/* sponsor.css — /p/find/sponsor (Sponsor Giveaways) full page. Design source:
   WEBSYS_MD/SPONSOR_GIVEAWAYS_REQUIREMENTS.md §2/§3 + Figma page `07 · Sponsor Giveaways`
   (list frame `sponsor-list-desktop`/`sponsor-card-grid`). Page shell mirrors
   market.css's .mk-page family (search+filter row pattern, 768px content
   breakpoint) — the card grid itself is auto-fit (not locked to market's
   fixed 3/2/1 columns) and the card internals are a distinct, deliberately
   lower-color-noise design (2026-07-12 layout/palette pass). */

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

.sp-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 32px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: calc(100vh - var(--navbar-total-h));
  min-height: calc(100dvh - var(--navbar-total-h));
}
/* .sp-content just groups everything above the footer into one block — no
   margin of its own, so it stays pinned to the top of .sp-page (2026-08-16:
   the results list grows over time, so it must not shift when short — only
   the footer below chases the bottom of the viewport via margin-top:auto). */
.sp-content { display: flex; flex-direction: column; gap: 16px; }
.sp-page .lg-footer-link { margin-top: auto; padding-top: 4px; }

.sp-back-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.4px;
  color: var(--text-secondary);
  text-decoration: none;
  background: rgba(var(--surface-rgb),0.06);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 6px 12px 6px 10px;
}
@media (hover: hover) { .sp-back-link:hover { color: var(--text-primary); border-color: var(--text-primary); } }

.sp-head-top { display: flex; align-items: center; gap: 8px; }
.sp-head-icon { font-size: 22px; color: var(--accent-gold-text); }
.sp-head-title { font-size: 26px; font-weight: 700; }
.sp-head-desc { font-size: 12px; color: var(--text-secondary); margin-top: -8px; }

.sp-search-wrap {
  display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 14px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.sp-search-icon { font-size: 14px; }
.sp-search { flex: 1; height: 100%; border: none; background: transparent; color: var(--text-primary); font-family: var(--font-thai); font-size: 13px; }
.sp-search:focus { outline: none; }
.sp-search-wrap:focus-within { border-color: var(--focus-ring); box-shadow: 0 0 0 3px rgba(var(--accent-gold-rgb),0.12); }
.sp-search::placeholder { color: var(--text-secondary); }

.sp-filter-row { display: flex; gap: 10px; flex-wrap: nowrap; }
.sp-select-wrap { position: relative; flex: 1; min-width: 160px; }
.sp-select-wrap::after {
  content: '▾'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 9px; color: var(--text-secondary); pointer-events: none;
}
.sp-select {
  width: 100%; height: 36px; padding: 0 26px 0 12px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md);
  color: var(--text-primary); font-family: var(--font-thai); font-size: 10px; font-weight: 600;
  appearance: none; cursor: pointer;
}
.sp-select:focus { outline: none; border-color: var(--accent-gold); }
/* Open option list is native/OS-rendered, ignores the closed box's theming
   above — see CLAUDE.md "Native <select> dropdown theming". */
.sp-select option { background: var(--bg-elevated); color: var(--text-primary); }

/* Auto-fit instead of a locked column count — cards flow 1/2/3(+) per row
   depending on available width, and get more breathing room on wide screens
   instead of staying cramped at a fixed 3-up. */
.sp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; }
.sp-panel-loading { font-size: 12px; color: var(--text-secondary); padding: 8px 0; }
.sp-empty {
  width: 100%; padding: 32px; text-align: center; color: var(--text-secondary);
  font-size: 12px; border: 1px dashed var(--border); border-radius: var(--radius-2xl);
}

/* ── Brand card ──────────────────────────────────────────────────────────
   Sizing note (§3): card typography/spacing is ~10-15% smaller than the
   details modal (Phase 6.3) — the modal is the full-size baseline. */
/* Dual low-alpha radial "nebula" tint instead of a flat fill — same
   treatment as myJASPER's .my-card base class (p/my.css), reused here so this
   page's cards don't read as a plain gray dashboard next to the rest of
   the site (2026-07-12 color-density pass). */
.sp-card {
  position: relative;
  background:
    radial-gradient(ellipse 260px 140px at 100% 0%, rgba(var(--accent-teal-rgb),0.07), transparent 65%),
    radial-gradient(ellipse 220px 160px at 0% 100%, rgba(var(--accent-gold-rgb),0.05), transparent 65%),
    var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-3xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
@media (hover: hover) { .sp-card:hover { border-color: rgba(var(--surface-rgb),0.18); } }

.sp-card__header {
  padding: 16px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--border);
}
/* Plain `cover` (100%), not zoomed — the source logo files themselves are
   now pre-cropped-to-content + padded to a true square (see
   scripts/crop-logo.js and the 2026-07-12 sponsor-logos regeneration), so
   no CSS-side zoom hack is needed. An earlier version of this rule used
   `center/150%` to fake this, which cropped real artwork off logos that
   had little/no built-in padding (e.g. MizuMi) — fixed at the image level
   instead, since the 3 brands' logos have wildly different padding ratios
   and no single CSS zoom value could ever be correct for all of them. */
.sp-card__logo {
  width: 42px; height: 42px; border-radius: var(--radius-full); flex-shrink: 0;
  background: rgba(var(--surface-rgb),0.05) center/105% no-repeat;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; color: var(--text-secondary); text-align: center;
}
.sp-card__header-text { min-width: 0; }
.sp-card__brand-name { font-size: 16px; font-weight: 700; }
.sp-card__brand-name-th { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }

.sp-card__closed-banner {
  margin: 12px 16px 0;
  padding: 10px 12px;
  text-align: center;
  background: rgba(var(--surface-rgb),0.05);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
}

.sp-card__phases { padding: 4px 16px 14px; display: flex; flex-direction: column; }
.sp-card__phase { padding: 10px 0; }
.sp-card__phase + .sp-card__phase { border-top: 1px solid var(--border); }
.sp-card__phase-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; }
.sp-card__phase-heading { font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Sized up into an actual icon-button shape (was bare 10px text) so the
   expand/collapse control reads as clickable, not just decorative
   (2026-07-12 ask). */
.sp-card__phase-chevron {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: var(--radius-full);
  background: rgba(var(--surface-rgb),0.06);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 11px;
  transition: transform 0.15s ease, background 0.12s ease;
}
@media (hover: hover) { .sp-card__phase-toggle:hover .sp-card__phase-chevron { background: rgba(var(--surface-rgb),0.14); } }
.sp-card__phase.is-collapsed .sp-card__phase-chevron { transform: rotate(-90deg); }
.sp-card__phase-body { margin-top: 8px; }
.sp-card__phase.is-collapsed .sp-card__phase-body { display: none; }
/* Circular index badge — replaces the plain "#1 :" text prefix. */
.sp-phase-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; flex-shrink: 0;
  border-radius: var(--radius-full);
  background: rgba(var(--surface-rgb),0.08);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 9.5px; font-weight: 700;
}
/* Sized ~10% up from the original (font/padding/radius scaled) per
   2026-07-12 ask — these are the busiest single element on the card. */
.sp-badge--close {
  display: inline-block;
  padding: 3px 7px;
  border-radius: var(--radius-sm);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--danger-text);
  background: rgba(var(--like-red-rgb), 0.14);
  border: 1px solid rgba(var(--like-red-rgb), 0.4);
}
/* Per-phase live countdown chip (replaces the old card-level countdown box).
   Green = still open: in the JASP.ER theme the accent is red, which read as
   "already closed" (2026-11-02 ask). */
.sp-badge--open {
  display: inline-block;
  padding: 3px 7px;
  border-radius: var(--radius-sm);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--success-text);
  background: rgba(var(--status-green-rgb),0.14);
  border: 1px solid rgba(var(--status-green-rgb),0.4);
}

/* วิธีร่วมสนุก / การเลือกผู้โชคดี — plain text + a small colored dot instead
   of filled pills, so they read as quiet metadata rather than competing
   with the prize box (the one thing on the card meant to pop visually). */
.sp-info-row { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; font-size: 10.5px; }
.sp-info-dot { width: 7px; height: 7px; border-radius: var(--radius-full); flex-shrink: 0; align-self: center; }
.sp-info-dot--participation { background: var(--accent-teal); }
.sp-info-dot--criteria { background: var(--accent-gold); }
:root[data-theme="light"] .sp-info-dot--participation { background: var(--brand-teal); }
:root[data-theme="light"] .sp-info-dot--criteria { background: var(--brand-gold); }
.sp-info-label { color: var(--text-secondary); }
.sp-info-value { color: var(--text-primary); }

/* Neutral + 🎫 icon, not gold — gold is the countdown chip's own signal
   right above this in the same phase heading; a gold eligibility badge here
   too would be the same color duplicate the CTA-button fix addressed
   (2026-07-12 review). The icon carries the meaning instead of the color. */
.sp-eligibility-badge {
  display: inline-block; margin-top: 8px;
  padding: 4px 9px; border-radius: var(--radius-sm);
  font-size: 10px; font-weight: 600;
  background: rgba(var(--surface-rgb),0.06);
  border: 1px solid rgba(var(--surface-rgb),0.15);
  color: var(--text-primary);
}

.sp-prize-box {
  position: relative;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-top: 14px;
  padding: 14px 10px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: rgba(var(--surface-rgb),0.02);
}
/* Legend-style label straddling the top border (fieldset look) — its
   background must match whatever sits behind the box (the card body, not
   the box's own tinted fill) so it visually "cuts" the border line. */
.sp-prize-box-label {
  position: absolute;
  top: -8px; left: 10px;
  padding: 0 6px;
  /* Was var(--bg-secondary), corrected to var(--modal-bg) not --bg-elevated
     (see p/giveaway.css's identical component for the full explanation).
     Fixed 2026-08-08. */
  background: var(--modal-bg);
  font-size: 10px;
  color: var(--text-secondary);
}
/* Base (fan_benefit/other, i.e. non-ticket) pill color — orange, distinct
   from ticket pills (which override this inline with their own TIERS price
   color) and from gold (countdown/CTA) and green ("verified" elsewhere on
   the site) (2026-07-13 ask). */
.sp-prize-pill {
  padding: 3px 8px; border-radius: var(--radius-sm); font-size: 10px; font-weight: 600;
  background: rgba(251, 146, 60, 0.16); color: #FB923C;
  font-variant-numeric: tabular-nums;
}
/* 2026-08-08 fix — badge text was a literal matching its own translucent
   tint (same class of bug as the already-fixed .mk-badge in market.css),
   measured ~1.96:1 in light mode. Same hue, darkened to ~3.3:1. */
:root[data-theme="light"] .sp-prize-pill { color: #BA5604; }
/* "RX" round prefix inside a prize pill — bolder weight only (same color as
   the rest of the pill, whichever tier/orange that pill already carries) so
   it doesn't fight the pill's own meaningful color, matching myJASPER's
   .my-chip__round emphasis pattern without hardcoding a 4th accent color. */
.sp-prize-pill__round { font-weight: 400; }

.sp-card__meta { font-size: 10px; color: var(--text-secondary); margin-top: 8px; line-height: 1.6; }

.sp-card__footer { padding: 0 16px 16px; margin-top: auto; }
/* Teal, not gold and not plain gray — gold stays reserved for the per-phase
   countdown chips above (that's the fix from before), but a fully neutral
   gray button read as too washed-out/uninviting (2026-07-12 follow-up).
   Teal is the card's "interactive" accent everywhere else (participation
   dot, ticket pills, markdown links), so it reads as "clickable" without
   competing with gold's "urgent" meaning. */
.sp-card__cta {
  width: 100%;
  padding: 10px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--accent-teal-rgb),0.45);
  background: rgba(var(--accent-teal-rgb),0.14);
  color: var(--accent-teal-text);
  font-family: var(--font-thai);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
@media (hover: hover) { .sp-card__cta:hover { background: rgba(var(--accent-teal-rgb),0.22); border-color: rgba(var(--accent-teal-rgb),0.6); } }

@media (max-width: 768px) {
  .sp-page { padding: 16px 16px 20px; }
  .sp-filter-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .sp-select-wrap { min-width: 0; flex: none; }
}

/* ── Details modal (§4) — full-size baseline; the card above is the ~10-15%
   condensed preview of this same content. Reuses .auth-modal shell from
   auth.css, just a wider card. ─────────────────────────────────────────── */
/* Same nebula tint as .sp-card, layered over .auth-modal__card's own flat
   var(--bg-elevated) (auth.css) rather than editing that shared file — this
   rule wins on source order since sponsor.css loads after auth.css. */
.sp-modal__card {
  max-width: 680px;
  /* Base layer was var(--bg-elevated) — corrected to var(--modal-bg)
     (2026-08-08 fix, see that token's definition for the full story). */
  background:
    radial-gradient(ellipse 260px 140px at 100% 0%, rgba(var(--accent-teal-rgb), 0.07), transparent 65%),
    radial-gradient(ellipse 220px 160px at 0% 100%, rgba(var(--accent-gold-rgb), 0.05), transparent 65%),
    var(--modal-bg);
  /* .auth-modal__card's own overflow-y:auto (auth.css) scrolled the WHOLE
     card as one unit — override to hidden here and give only the middle
     section (.sp-modal__scroll below) its own scrollbar, so the brand
     header and the official-link footer button stay put regardless of tab
     content length (2026-07-12 ask). */
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  /* All inter-block spacing below is explicit padding on each of the 3
     blocks (header/scroll/footer), not a mix of flex-gap + each block's own
     margin — that mix was stacking (e.g. footer got gap AND margin-top,
     landing at 34px, while header→scroll only got the 14px gap) and read as
     uneven (2026-07-13 fix). gap:0 makes header/scroll/footer 3 clean,
     independently-padded blocks. */
  gap: 0;
}
/* Cancels .auth-modal__card's own 20px left/right padding (auth.css) so the
   scrollbar/scroll track reaches the card's true edge instead of sitting
   inset — then restores that same 20px (on all sides, so top/bottom breathe
   the same amount as left/right) as inner padding so the CONTENT still lines
   up exactly where it did before (2026-07-13 ask). */
.sp-modal__scroll {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  margin: 0 -20px;
  padding: 20px;
}
.sp-modal__header, .sp-modal__footer { flex-shrink: 0; }

/* Flush with the card (no filled/bordered box of its own — that was reading
   as a "box inside a box" against .auth-modal__card's own border) and the
   logo sits inline on the left instead of floating absolute top-right,
   where it collided with the ✕ close button (2026-07-12 fix). Bottom padding
   matches the scroll block's own 20px unit exactly (was 16px — the mismatch
   was part of the "uneven spacing" feedback). */
.sp-modal__header {
  padding: 0 40px 20px 0;
  display: flex; align-items: center; gap: 14px;
  border-bottom: 1px solid var(--border);
}
.sp-modal__logo {
  width: 52px; height: 52px; border-radius: var(--radius-full); flex-shrink: 0;
  background: rgba(var(--surface-rgb),0.05) center/105% no-repeat;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--text-secondary); text-align: center;
}
.sp-modal__header-text { min-width: 0; }
.sp-modal__brand-name { font-size: 19px; font-weight: 700; }
.sp-modal__brand-name-th { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }

/* No margin-top — .sp-modal__scroll's own 20px padding already provides the
   gap above the first thing in the scroll block (tabbar or heading, doesn't
   matter which comes first). margin-bottom still needed since it's not the
   last thing when present (2026-07-13 — was stacking with the heading's own
   margin-top below, double-counting when both existed). */
.sp-modal__tabbar-wrap { margin-bottom: 16px; }

.sp-modal__phase-heading { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sp-modal__divider { height: 0; border-top: 1px solid var(--border); margin: 16px 0; }

/* Two columns on desktop: left = the same "quick facts" the card already
   showed (chips/eligibility/prize/dates, kept in that exact order), right =
   the long-form rules text the card never had room for. Single column,
   stacked in that same order, once the modal itself is narrow (2026-07-12
   restructure — the old single-column flow read as one undifferentiated
   block once summary_md's bullet list got long). */
.sp-modal__grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.sp-modal__facts { display: flex; flex-direction: column; min-width: 0; }
.sp-modal__facts > * { margin-top: 10px; }
.sp-modal__facts > *:first-child { margin-top: 0; }
.sp-modal__details { min-width: 0; }
@media (min-width: 640px) {
  .sp-modal__grid { grid-template-columns: 220px 1fr; }
  .sp-modal__facts { border-right: 1px solid var(--border); padding-right: 20px; }
}

.sp-modal__meta { font-size: 12px; color: var(--text-secondary); line-height: 1.7; }

/* Prize box keeps its bordered frame in the modal after all — stripping it
   made the single most important fact on the whole card ("what do you
   actually win") disappear into plain text (2026-07-12 revert). Tinted gold
   here specifically because nothing else gold-colored sits in this column
   (the countdown chip lives up in the heading, not down here), so there's
   no duplicate-color risk this time. */
.sp-modal__facts .sp-prize-box {
  border-color: rgba(var(--accent-gold-rgb),0.3);
  background: rgba(var(--accent-gold-rgb),0.05);
}

.sp-markdown { font-size: 13px; color: var(--text-primary); line-height: 1.7; }
.sp-markdown__p { margin: 6px 0; }
.sp-markdown__p:first-child { margin-top: 0; }
.sp-markdown__list { margin: 6px 0; padding-left: 18px; }
.sp-markdown a { color: var(--accent-teal); }
.sp-markdown__p--gap, .sp-markdown__list--gap { margin-top: 14px; }

/* .auth-btn was written for <button> only — as <a> (join/winners/official
   links here) it inherits the browser's default link underline without this,
   same bug class as tickets.css's .tk-btn fix. */
.sp-modal__cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.sp-modal__cta-row .auth-btn { flex: 1; width: auto; text-decoration: none; }
/* No margin-top — .sp-modal__scroll's own bottom padding (20px) already
   provides the gap before this block; this used to ALSO add margin-top:20px
   on top of the (then 14px) flex-gap, landing at 34px total vs. the header's
   14px, which was the root of the "spacing feels uneven" feedback
   (2026-07-13 fix). padding-top matches the scroll block's 20px unit. */
.sp-modal__footer { padding-top: 20px; border-top: 1px solid var(--border); }
/* Teal, not the default white .auth-btn--outline — sized ~10% down too
   (padding/font scaled) so it reads as the lower-priority action next to
   the full-size gold "เข้าร่วมกิจกรรม" button above (2026-07-13 ask). */
.sp-modal__footer .auth-btn {
  width: 100%;
  text-decoration: none;
  background: rgba(var(--accent-teal-rgb),0.12);
  border: 1px solid rgba(var(--accent-teal-rgb),0.45);
  color: var(--accent-teal-text);
  padding: 11.5px;
  font-size: 11.5px;
}
@media (hover: hover) { .sp-modal__footer .auth-btn:hover { background: rgba(var(--accent-teal-rgb),0.2); } }

@media (max-width: 640px) {
  .sp-modal__card { max-width: 100%; }
}