/* fanbene.css — /p/fanbene (Soul Lucky) lookup page. Design source:
   MEMBERSHIP_REQUIREMENTS §9 / §15.10 (Figma page 05, 3 states).
   Mockup phase (2026-07-05): fan_benefits has no real CSV data yet — see
   WEBSYS_MD/P_DEV_STATUS.md §7 for the ?mock=1 toggle this page uses meanwhile. */

/* Root cause of the "skewed" input boxes: nothing on this page set
   box-sizing, and .fb-select had no explicit width — a <select>'s intrinsic
   width comes from its widest OPTION text (e.g. "รอบที่ 3 · 23 สิงหาคม 2569"),
   so it was rendering wider than its grid/flex cell and pushing past the
   card's right edge instead of matching the other fields. */
*, *::before, *::after { box-sizing: border-box; }

body { background: var(--space-gradient), var(--bg-primary); background-repeat: no-repeat; background-attachment: fixed; color: var(--text-primary); font-family: var(--font-thai); margin: 0; }

.fb-page {
  /* Explicit stacking context (2026-07-10, starfield ask) — required to
     paint above the fixed z-index:0 starfield layers (tokens.css); plain
     static-position content paints BEHIND a positioned z-index:0 sibling
     per CSS stacking rules. */
  position: relative;
  z-index: 1;
  min-height: calc(100vh - var(--navbar-h));
  min-height: calc(100dvh - var(--navbar-h));
  padding: 48px 20px 20px; display: flex; flex-direction: column; align-items: center;
}
/* Legal footer is the last child of .fb-page — its padding-bottom (above,
   reduced from 80px/60px to a flat 20px now that the footer, not the
   lookup/result view, is the true last thing on the page) already provides
   the gap after the footer, so margin-top just needs to match it (2026-07-09).
   Reverted from margin-top:auto (2026-07-10 second pass) — the lookup/result
   view now centers itself via its own margin:auto (below), so the footer
   just needs its normal fixed gap again, not to independently chase the
   bottom of the viewport. */
.fb-page .lg-footer-link { margin-top: 20px; }
/* margin: auto 0 (2026-07-10) — centers the lookup form / result view
   vertically in the space above the footer when the page is short, instead
   of sitting flush at the top. Targets both possible .fb-page content
   children (only one is ever visible at a time — see fanbene.js). */
.fb-page > .fb-view,
.fb-page > .fb-result { margin-top: auto; margin-bottom: auto; }

.fb-hero { text-align: center; max-width: 560px; margin-bottom: 28px; }
.fb-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(var(--accent-teal-rgb),0.12); border: 1px solid rgba(var(--accent-teal-rgb),0.35);
  color: var(--accent-teal); font-size: 12px; font-weight: 600;
  padding: 6px 14px; border-radius: 999px; margin-bottom: 14px;
}
.fb-hero h1 { font-size: 26px; font-weight: 700; margin: 0 0 8px; }
.fb-hero p { font-size: 14px; color: var(--text-secondary); margin: 0; }

.fb-card {
  width: 100%; max-width: 560px; background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: 16px; padding: 24px;
}

.fb-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.fb-field label { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.fb-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

.fb-select {
  width: 100%; max-width: 100%;
  background: var(--dropdown-bg); border: 1px solid var(--border); color: var(--text-primary);
  border-radius: 10px; padding: 10px 30px 10px 12px; font-size: 14px; font-family: var(--font-thai);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238B8FA8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}

.fb-submit {
  width: 100%; margin-top: 6px; background: var(--accent-gold); color: var(--gold-btn-text);
  border: none; border-radius: 10px; padding: 13px; font-size: 15px; font-weight: 700;
  cursor: pointer; font-family: var(--font-thai);
}
.fb-submit:hover { filter: brightness(1.06); }
/* Keeps dark mode's vivid gold + dark text in light mode too (2026-08-08 ask)
   — solid fill + in-box text has self-contained contrast, independent of
   the page background, so light mode's muted gold isn't needed here. */
:root[data-theme="light"] .fb-submit { background: #F4A140; color: #1a1300; }

.fb-note { text-align: center; font-size: 11px; color: var(--text-secondary); margin-top: 14px; }

/* ── Result area ─────────────────────────────────────────────────────── */
/* Fade-in + zoom on every reveal — runs automatically since the element is
   freshly created and inserted each time a lookup completes. */
.fb-result {
  /* No margin-top: the result now replaces the lookup view as .fb-page's
     only visible child (§ 2026-07-05 "next page" rework), so it sits at
     the same top offset the hero used to — margin-top:28px was a leftover
     from when the result was appended *below* the still-visible form. */
  width: 100%; max-width: 620px; display: flex; flex-direction: column; gap: 20px;
  animation: fbResultIn 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fbResultIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

.fb-result-bottom { display: flex; justify-content: center; }
.fb-btn-check-another {
  background: rgba(var(--accent-teal-rgb),0.12); color: var(--accent-teal); border: 1px solid rgba(var(--accent-teal-rgb),0.35);
  border-radius: 10px; padding: 9px 16px; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: var(--font-thai);
}
.fb-btn-check-another:hover { background: rgba(var(--accent-teal-rgb),0.2); }

/* ── Confetti (raffle win celebration) ───────────────────────────────── */
.fb-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 999; overflow: hidden; }
.fb-confetti__piece {
  position: absolute; top: -20px; width: 8px; height: 14px; border-radius: 2px; opacity: 0.9;
  animation-name: fbConfettiFall; animation-timing-function: ease-in; animation-fill-mode: forwards;
}
@keyframes fbConfettiFall {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--fb-drift, 0), 100vh) rotate(var(--fb-rot, 540deg)); opacity: 0; }
}

.fb-seat-chip {
  display: inline-flex; align-self: center; align-items: center; gap: 6px;
  background: rgba(var(--surface-rgb),0.06); border: 1px solid var(--border);
  padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
}

/* Eligible (raffle won) — premium gold hero (2026-07-05: switched from teal
   to gold/amber, since this specifically represents a lucky-winner privilege
   and should read as upscale, not just "success"). A glossy sheen (::before)
   plus a gold-plaque treatment on the inner benefit card give the whole box
   a "VIP card" feel, not just a tinted border on an otherwise plain box. */
.fb-eligible {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, rgba(var(--accent-gold-rgb),0.38) 0%, rgba(var(--accent-gold-rgb),0.10) 55%, rgba(var(--accent-gold-rgb),0.20) 100%);
  border: 1px solid rgba(var(--accent-gold-rgb),0.6); border-radius: 18px; padding: 28px 24px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(var(--accent-gold-rgb),0.22), inset 0 1px 0 rgba(var(--surface-rgb),0.14);
}
.fb-eligible::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 140% 60% at 15% -10%, rgba(var(--surface-rgb),0.16), transparent 60%);
}
.fb-eligible > * { position: relative; }
.fb-eligible__spark { font-size: 34px; margin-bottom: 6px; filter: drop-shadow(0 2px 8px rgba(var(--accent-gold-rgb),0.6)); }
.fb-eligible__title {
  font-size: 19px; font-weight: 700; margin-bottom: 14px; color: #FFD9A0;
  text-shadow: 0 1px 12px rgba(var(--accent-gold-rgb), calc(0.5 * var(--glow-mult)));
}

.fb-benefit-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; text-align: left; }
.fb-benefit-card {
  display: flex; gap: 12px; background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px;
}
.fb-benefit-card__icon {
  flex-shrink: 0; width: 56px; height: 56px; border-radius: 10px;
  background: rgba(var(--surface-rgb),0.06);
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}
/* Gold-plaque version inside the eligible hero, so the inner card matches
   the premium outer box instead of sitting there as a plain grey card. */
.fb-eligible .fb-benefit-card {
  background: linear-gradient(135deg, rgba(var(--accent-gold-rgb),0.16), rgba(20,10,0,0.25));
  border: 1px solid rgba(var(--accent-gold-rgb),0.45);
}
.fb-eligible .fb-benefit-card__icon {
  background: linear-gradient(135deg, rgba(var(--accent-gold-rgb),0.35), rgba(var(--accent-gold-rgb),0.12));
  border: 1px solid rgba(var(--accent-gold-rgb),0.4);
}
.fb-benefit-card__body { flex: 1; min-width: 0; }
.fb-benefit-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.fb-benefit-card__name { font-size: 14px; font-weight: 600; }
.fb-benefit-card__tag {
  background: rgba(var(--accent-gold-rgb),0.18); color: var(--accent-gold); font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; flex-shrink: 0;
}
.fb-benefit-card__meta { font-size: 12px; color: var(--accent-gold); display: flex; align-items: center; gap: 5px; }
.fb-benefit-card__cond { font-size: 11px; color: var(--text-secondary); margin-top: 3px; }
/* Soft light-yellow text inside the won card — was plain white/grey, which
   clashed against the gold card (2026-07-06 user decision). */
.fb-eligible .fb-benefit-card__name { color: #FFE9C4; }
.fb-eligible .fb-benefit-card__cond { color: rgba(255, 233, 196, 0.65); }
.fb-eligible .fb-note { color: rgba(255, 233, 196, 0.65); }
.fb-verify-link { color: #FFD9A0; font-weight: 700; text-decoration: underline; }
.fb-verify-link:hover { color: #FFE9C4; }
/* Light-mode overrides (2026-08-08 fix, literal-hex sweep) — .fb-eligible's
   own background IS theme-aware (rgba(var(--accent-gold-rgb),X)), but this
   cream text was left as a fixed literal chosen only for the dark-mode
   card — measured 1.03-1.16:1 in light mode (essentially invisible).
   Same hue, darkened to ~3.3:1. */
:root[data-theme="light"] .fb-eligible__title,
:root[data-theme="light"] .fb-verify-link { color: #A56300; }
:root[data-theme="light"] .fb-eligible .fb-benefit-card__name,
:root[data-theme="light"] .fb-verify-link:hover { color: #A16500; }
:root[data-theme="light"] .fb-eligible .fb-benefit-card__cond,
:root[data-theme="light"] .fb-eligible .fb-note { color: rgba(161, 101, 0, 0.75); }
/* No time/notes to show for this one — center it nicely instead of leaving
   the name pinned to the top next to a taller icon with nothing below it. */
.fb-benefit-card--plain { align-items: center; }
.fb-benefit-card--plain .fb-benefit-card__head { margin-bottom: 0; }

/* Not-announced (raffle pending) */
.fb-pending {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 16px;
  padding: 22px 20px; text-align: center;
}
.fb-pending__icon { font-size: 26px; margin-bottom: 6px; }
.fb-pending__name { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.fb-pending__msg { font-size: 13px; color: var(--text-secondary); }
.fb-pending__cond { font-size: 11px; color: var(--text-secondary); margin-top: 8px; }

/* Announced, but this seat didn't win — mint/teal (2026-07-05: was gold at
   first, but that read too close to the winner card; moved to the mint
   tone the winner card used to have, so the two are unmistakably distinct
   at a glance). Deliberately not grey/red/sad — stays upbeat per user
   decision and points down to the guaranteed benefits below. */
.fb-lost {
  background: linear-gradient(135deg, rgba(var(--accent-teal-rgb),0.20), rgba(var(--accent-teal-rgb),0.05));
  border: 1px solid rgba(var(--accent-teal-rgb),0.4); border-radius: 16px;
  padding: 24px 20px; text-align: center;
}
.fb-lost__icon { font-size: 28px; margin-bottom: 8px; }
.fb-lost__title { font-size: 16px; font-weight: 700; margin-bottom: 6px; color: var(--accent-teal); }
.fb-lost__msg { font-size: 13px; color: var(--text-secondary); }

/* Guaranteed (all-ticket) block — always shown below raffle result */
.fb-guar-head { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin: 4px 0 -4px; }
.fb-guar-grid { display: flex; flex-direction: column; gap: 10px; }
.fb-guar-tile { display: flex; align-items: flex-start; gap: 12px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.fb-guar-tile__crest {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: rgba(var(--accent-gold-rgb),0.16); color: var(--accent-gold); font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  margin-top: 2px;
}
.fb-guar-tile__body { flex: 1; min-width: 0; }
.fb-guar-tile__name { font-size: 13px; font-weight: 500; }
.fb-guar-tile__note { font-size: 11px; color: var(--text-secondary); margin-top: 3px; }
/* No time/notes for this one — center it instead of top-aligning against
   a crest with nothing else in the row. */
.fb-guar-tile--plain { align-items: center; }

/* Consolation state — no benefits at all (theoretical: tier has neither
   'all' nor randomN entries for this round) */
.fb-empty {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 16px;
  padding: 26px 20px; text-align: center;
}
.fb-empty__icon { font-size: 26px; margin-bottom: 8px; }
.fb-empty__msg { font-size: 14px; margin-bottom: 16px; }
.fb-empty__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.fb-btn-sec, .fb-btn-gold {
  border: none; border-radius: 10px; padding: 10px 16px; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: var(--font-thai); text-decoration: none;
}
.fb-btn-sec { background: rgba(var(--surface-rgb),0.06); color: var(--text-primary); border: 1px solid var(--border); }
.fb-btn-gold { background: var(--accent-gold); color: var(--gold-btn-text); }
/* Keeps dark mode's vivid gold + dark text in light mode too (2026-08-08 ask)
   — solid fill + in-box text has self-contained contrast, independent of
   the page background, so light mode's muted gold isn't needed here. */
:root[data-theme="light"] .fb-btn-gold { background: #F4A140; color: #1a1300; }

.fb-error { color: #F87171; font-size: 13px; text-align: center; margin-top: 10px; }
/* 2026-08-08 fix — #F87171 measured 2.40:1 in light mode, sits on the plain
   page background (theme-aware), not a fixed surface. Same hue, darkened. */
:root[data-theme="light"] .fb-error { color: #E60B0B; }

@media (max-width: 768px) {
  .fb-page { padding: 32px 20px 20px; }
  /* Zone stays full-width on its own row; row + seat share the next row. */
  .fb-row3 { grid-template-columns: 1fr 1fr; }
  .fb-row3 > .fb-field:first-child { grid-column: 1 / -1; }
  .fb-hero h1 { font-size: 22px; }
}