/* ============================================
   AWSP.APP — Base Component Styles
   Import AFTER awsp-tokens.css
   All rules scoped to .awsp- prefix so they
   cannot conflict with existing site CSS.
   ============================================ */

/* ── Navigation ── */
.awsp-nav {
  background: var(--awsp-navy);
  height: var(--awsp-nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--awsp-space-6);
  position: sticky;
  top: 0;
  z-index: var(--awsp-z-nav);
}

.awsp-logo {
  font-size: var(--awsp-text-lg);
  font-weight: 600;
  color: var(--awsp-text-on-dark);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.awsp-logo__accent {
  color: var(--awsp-teal);
}

/* ── Buttons ── */
.awsp-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--awsp-space-2);
  font-size: var(--awsp-text-sm);
  font-weight: 500;
  padding: 10px var(--awsp-space-5);
  border-radius: var(--awsp-radius-md);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity var(--awsp-transition);
  white-space: nowrap;
}

.awsp-btn:hover { opacity: 0.88; }
.awsp-btn:active { opacity: 0.76; transform: scale(0.98); }

.awsp-btn--primary {
  background: var(--awsp-rose);
  color: var(--awsp-white);
}

.awsp-btn--secondary {
  background: var(--awsp-teal-18);
  color: var(--awsp-teal);
  border: 1px solid rgba(0, 180, 166, 0.30);
}

.awsp-btn--ghost {
  background: rgba(255,255,255,0.08);
  color: var(--awsp-white);
  border: 1px solid rgba(255,255,255,0.18);
}

.awsp-btn--sm {
  font-size: var(--awsp-text-xs);
  padding: 6px 12px;
}

/* ── Cards ── */
.awsp-card {
  background: var(--awsp-white);
  border: 0.5px solid var(--awsp-border);
  border-radius: var(--awsp-radius-lg);
  padding: var(--awsp-space-4) var(--awsp-space-5);
}

/* ── Badges / Pills ── */
.awsp-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--awsp-space-1);
  font-size: var(--awsp-text-xs);
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--awsp-radius-pill);
}

.awsp-badge--live {
  background: var(--awsp-rose-10);
  color: #791F1F;
}

.awsp-badge--win {
  color: var(--awsp-teal);
}

.awsp-badge--final {
  background: var(--awsp-gold-12);
  color: #633806;
}

.awsp-badge--premium {
  background: var(--awsp-violet-10);
  color: #4B1528;
}

.awsp-badge--online {
  color: var(--awsp-teal);
}

/* ── Live dot ── */
.awsp-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--awsp-rose);
  display: inline-block;
  flex-shrink: 0;
}

/* ── Score card ── */
.awsp-score-card {
  background: var(--awsp-white);
  border: 0.5px solid var(--awsp-border);
  border-radius: var(--awsp-radius-lg);
  padding: var(--awsp-space-3) var(--awsp-space-4);
}

.awsp-score-card__sport {
  font-size: var(--awsp-text-xs);
  color: var(--awsp-text-secondary);
  margin-bottom: var(--awsp-space-1);
}

.awsp-score-card__team {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}

.awsp-score-card__name {
  font-size: var(--awsp-text-sm);
  font-weight: 500;
  color: var(--awsp-text-primary);
}

.awsp-score-card__score {
  font-size: 18px;
  font-weight: 600;
  color: var(--awsp-text-primary);
}

.awsp-score-card__score--win {
  color: var(--awsp-teal);
}

.awsp-score-card__meta {
  font-size: var(--awsp-text-xs);
  color: var(--awsp-text-muted);
  margin-top: var(--awsp-space-2);
  padding-top: var(--awsp-space-2);
  border-top: 0.5px solid var(--awsp-border);
}

.awsp-score-card__meta--gold {
  color: var(--awsp-gold);
}

/* ── Stat strip ── */
.awsp-stat-strip {
  background: var(--awsp-navy);
  display: flex;
}

.awsp-stat-strip__item {
  flex: 1;
  padding: var(--awsp-space-3) var(--awsp-space-4);
  border-right: 1px solid rgba(255,255,255,0.06);
}

.awsp-stat-strip__item:last-child {
  border-right: none;
}

.awsp-stat-strip__value {
  font-size: 20px;
  font-weight: 600;
  color: var(--awsp-sunflower);
}

.awsp-stat-strip__label {
  font-size: var(--awsp-text-xs);
  color: rgba(255,255,255,0.40);
  margin-top: 2px;
}

/* ── Chat ── */
.awsp-chat {
  background: var(--awsp-white);
  border: 0.5px solid var(--awsp-border);
  border-radius: var(--awsp-radius-lg);
  overflow: hidden;
}

.awsp-chat__header {
  background: var(--awsp-slate);
  padding: var(--awsp-space-3) var(--awsp-space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.awsp-chat__title {
  font-size: var(--awsp-text-sm);
  font-weight: 500;
  color: var(--awsp-text-on-dark);
}

.awsp-chat__online {
  font-size: var(--awsp-text-xs);
  color: var(--awsp-teal);
  display: flex;
  align-items: center;
  gap: 4px;
}

.awsp-chat__messages {
  padding: var(--awsp-space-4);
  background: var(--awsp-bg);
  display: flex;
  flex-direction: column;
  gap: var(--awsp-space-3);
}

.awsp-chat__bubble {
  font-size: var(--awsp-text-sm);
  color: var(--awsp-text-primary);
  background: var(--awsp-white);
  padding: 8px 12px;
  border-radius: 0 8px 8px 8px;
  line-height: 1.5;
}

.awsp-chat__bubble--self {
  background: var(--awsp-teal-10);
  color: #04342C;
  border-radius: 8px 0 8px 8px;
}

.awsp-chat__send {
  background: var(--awsp-rose);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity var(--awsp-transition);
}

.awsp-chat__send:hover { opacity: 0.88; }

/* ── Fantasy ── */
.awsp-fantasy__header {
  background: var(--awsp-navy);
  padding: var(--awsp-space-3) var(--awsp-space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.awsp-fantasy__stat-value--points  { color: var(--awsp-sunflower); }
.awsp-fantasy__stat-value--change  { color: var(--awsp-teal); }
.awsp-fantasy__stat-value--prize   { color: var(--awsp-gold); }
.awsp-fantasy__points--top         { color: var(--awsp-gold); }
.awsp-fantasy__points--mid         { color: var(--awsp-teal); }
.awsp-fantasy__points--premium     { color: var(--awsp-violet); }

/* ── Join Banner ── */
.awsp-join-banner {
  background: var(--awsp-rose);
  padding: var(--awsp-space-5) var(--awsp-space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--awsp-space-3);
}

.awsp-join-banner__title {
  font-size: var(--awsp-text-base);
  font-weight: 500;
  color: var(--awsp-white);
}

.awsp-join-banner__sub {
  font-size: var(--awsp-text-sm);
  color: rgba(255,255,255,0.75);
  margin-top: 2px;
}

.awsp-join-banner__btn {
  background: var(--awsp-white);
  color: var(--awsp-rose);
  font-size: var(--awsp-text-sm);
  font-weight: 500;
  padding: 10px 20px;
  border-radius: var(--awsp-radius-md);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--awsp-transition);
}

.awsp-join-banner__btn:hover { opacity: 0.90; }

/* ── Avatar ── */
.awsp-avatar {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  flex-shrink: 0;
}

/* ── Utility ── */
.awsp-divider {
  height: 0.5px;
  background: var(--awsp-border);
  margin: var(--awsp-space-2) 0;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .awsp-nav {
    height: var(--awsp-nav-height-mobile);
    padding: 0 var(--awsp-space-4);
  }
}