/* md.css — /p/md (Goods Space). Design source: MEMBERSHIP_REQUIREMENTS
   §8 (Module 3 spec) / §15.9 (Figma page 04, 1200px desktop), plus the
   2026-07-06 UI/UX revision pass (direct qty on card, conditions popup,
   planner redesign, category filter). */

*, *::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; }

/* flex column + min-height (2026-07-10) — lets the footer pin to the
   bottom of the viewport via margin-top:auto below when content is short.
   position:relative/z-index:1 (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. */
.md-page { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 40px 24px 20px; display: flex; flex-direction: column; min-height: calc(100vh - var(--navbar-h)); min-height: calc(100dvh - var(--navbar-h)); }
/* Legal footer is the last child of .md-page. margin-top: auto (2026-07-10)
   pins it to the bottom of the viewport; padding-top preserves the tuned
   20px minimum gap for the overflow case, where auto resolves to 0. */
.md-page .lg-footer-link { margin-top: auto; padding-top: 20px; }

.md-hero { text-align: center; max-width: 560px; margin: 0 auto 28px; }
.md-hero h1 { font-size: 32px; font-weight: 700; margin: 0 0 8px; }
.md-hero p { font-size: 14px; color: var(--text-secondary); margin: 0; }

/* ── Toolbar ─────────────────────────────────────────────────────────── */
.md-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
.md-toolbar__spacer { flex: 1; }
.md-pill {
  background: var(--dropdown-bg); border: 1px solid var(--border); color: var(--text-primary);
  border-radius: 999px; padding: 10px 16px; font-size: 13px; font-family: var(--font-thai);
  cursor: pointer;
}
.md-search-wrap { position: relative; flex: 1; min-width: 180px; max-width: 320px; }
.md-search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 13px; opacity: 0.7; pointer-events: none;
}
.md-pill--search { width: 100%; max-width: none; cursor: text; padding-left: 34px; }
.md-pill--search::placeholder { color: var(--text-secondary); }
.md-pill--dd { appearance: none; padding-right: 30px;
  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 14px center;
}
.md-pill--dd:focus, .md-pill--dd:hover { border-color: var(--accent-teal); color: var(--text-primary); }
select.md-pill { appearance: none; }
.md-toolbar__filters { display: contents; }

/* ── Content: grid + planner ─────────────────────────────────────────── */
.md-content { display: flex; gap: 24px; align-items: flex-start; }
/* 2-col by default; only steps up to 3 once there's enough room per column
   (2026-07-07 — 3-col at every desktop width made cards cramped/overlapping
   between ~768–1099px, where the grid track is squeezed next to the fixed
   320px planner). */
.md-grid {
  flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
}
@media (min-width: 1100px) {
  .md-grid { grid-template-columns: repeat(3, 1fr); }
}
.md-empty-catalog {
  grid-column: 1 / -1; text-align: center; color: var(--text-secondary);
  font-size: 14px; padding: 60px 20px; background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: 16px;
}
.md-coming-soon {
  max-width: 560px; margin: 0 auto; text-align: center; color: var(--text-secondary);
  font-size: 15px; padding: 60px 24px; background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: 16px;
}

/* ── Product card (2026-07-06 redesign: clearer hierarchy, hover lift,
   description + conditions link, direct qty stepper) ───────────────── */
.md-card {
  background: linear-gradient(180deg, var(--bg-elevated), var(--bg-secondary));
  border: 1px solid var(--border); border-radius: 18px;
  padding: 10px; display: flex; flex-direction: column; gap: 10px; min-width: 0;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.md-card:hover {
  transform: translateY(-3px); border-color: rgba(var(--accent-teal-rgb),0.4);
  box-shadow: 0 10px 28px rgba(var(--shadow-rgb), calc(0.35 * var(--shadow-mult)));
}
/* Taller (2026-08-07 ask, clarified as the GRID CARD photo, not the
   lightbox preview — was 150px) so real product photos read as a proper
   photo instead of a cropped strip. */
.md-card__thumb {
  position: relative; height: 190px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(var(--accent-teal-rgb),0.18), rgba(var(--accent-gold-rgb),0.14));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.md-card__thumb-emoji { font-size: 32px; }
.md-card__thumb-label { font-size: 10px; color: var(--text-secondary); }
/* Real product photo (2026-08-07 addition) — overrides the placeholder's
   gradient background/centered-content layout; click opens the full
   gallery via the shared lightbox. */
.md-card__thumb--photo { padding: 0; overflow: hidden; }
/* Blur-up fade-in (2026-08-07 ask — match giveaway.js's .nt-card__photo
   loading pattern instead of an instant pop-in once the file arrives). */
.md-card__thumb-img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; opacity: 0; filter: blur(16px); transition: opacity 0.35s ease, filter 0.35s ease; }
.md-card__thumb-img.is-loaded { opacity: 1; filter: blur(0); }
.md-card__rank {
  position: absolute; top: 8px; left: 8px; background: var(--accent-gold); color: #1a1200;
  font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(var(--accent-gold-rgb),0.4);
}
.md-card__body { display: flex; flex-direction: column; gap: 6px; padding: 0 4px; min-width: 0; }
.md-card__name { font-size: 15px; font-weight: 700; line-height: 1.35; margin-top: 6px; }
.md-card__price { font-size: 18px; font-weight: 700; color: var(--accent-gold); }
/* Quota badge relocated to the image's top-right corner (2026-07-07 — was
   crowding the fav/qty/add action row). Went through several color passes
   the same day (2026-08-07): started illegible (rgba(var(--surface-rgb))
   background + var(--text-primary) text — near-identical tokens in both
   themes, since MD_PRODUCTS was empty until this day so nobody ever saw it
   render for real) → solid black scrim → solid teal → translucent teal →
   now translucent orange/gold (matches .md-card__rank's gold, so both
   badges share one accent instead of a gold/teal pair). */
/* 10% smaller again (2026-08-07 ask) — was 10px / 3px 10px padding. */
.md-card__quota {
  position: absolute; top: 8px; right: 8px;
  font-size: 9px; color: #1a1200; font-weight: 700; white-space: nowrap;
  background: rgba(var(--accent-gold-rgb),0.55); border: 1px solid rgba(var(--accent-gold-rgb),0.7);
  border-radius: 999px; padding: 2.7px 9px; backdrop-filter: blur(3px);
  box-shadow: 0 2px 8px rgba(var(--accent-gold-rgb),0.25);
}
/* 10% smaller (2026-08-07 ask) — was 12px. */
.md-card__desc { font-size: 10.8px; color: var(--text-secondary); line-height: 1.5; }
/* Bullet-point layout (2026-08-07 ask) — description is split on its " · "
   fact separators (see md.js's descriptionBullets()) into a real <ul>. */
.md-card__desc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.md-card__desc-list li { position: relative; padding-left: 12px; }
.md-card__desc-list li::before { content: '•'; position: absolute; left: 0; color: var(--accent-teal); }

/* Size picker (2026-08-07 addition) — only rendered for products with sibling
   variants (currently just the T-shirt's 5 sizes). Matches .md-pill--dd's
   select styling so it doesn't look like a foreign control on the card. */
.md-card__size-row { display: flex; align-items: center; gap: 8px; }
.md-card__size-label { font-size: 12px; color: var(--text-secondary); flex-shrink: 0; }
.md-card__size-select {
  flex: 1; min-width: 0; height: 32px; box-sizing: border-box;
  /* Was `var(--surface)` (2026-08-07 fix) — that token doesn't exist in
     tokens.css (only `--surface-rgb`, the raw-channel version used for
     rgba() overlays elsewhere), so the property silently fell through to
     the browser's default white <select> background in both themes. */
  background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-primary);
  border-radius: 8px; padding: 0 10px; font-size: 12px; font-family: var(--font-thai); cursor: pointer;
}
.md-card__size-select:focus, .md-card__size-select:hover { border-color: var(--accent-teal); }

/* Row 1 (2026-07-07 rework): fav on the left, qty stepper right-aligned via
   justify-content:space-between — just these two controls share this row now. */
.md-card__actions {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: auto; padding: 8px 4px 0; border-top: 1px solid var(--border);
}
.md-fav-btn {
  flex-shrink: 0; height: 36px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(var(--accent-teal-rgb),0.1); border: 1px solid rgba(var(--accent-teal-rgb),0.3); color: var(--accent-teal);
  border-radius: 999px; padding: 0 12px; font-size: 10.8px; font-weight: 600; cursor: pointer;
  font-family: var(--font-thai); white-space: nowrap;
}
.md-fav-btn.is-active { background: rgba(var(--accent-teal-rgb),0.25); }
/* Icon kept at a fixed whole-pixel size (2026-08-07 fix) — it used to
   inherit the button's own font-size via "1em" sizing, so shrinking the
   button to 10.8px (10% smaller ask) put the outline heart's stroke-width
   at a sub-pixel value, which rendered as a fuzzy/uneven outline instead of
   a clean heart shape. Text (the fave count) still shrinks with the button;
   only the icon is decoupled from it. */
.md-fav-btn__icon { font-size: 13px; display: inline-flex; }

/* Row 2: "เพิ่มลงแพลน" — its own full-width row below, separate from fav/qty.
   Solid teal (2026-07-07 — violet didn't fit the site's gold/teal space
   theme; teal is the page's own secondary accent, already used for the fav
   pill, so a solid fill here reads as on-brand instead of an outside color).
   No margin-top of its own — spacing from the row above comes purely from
   .md-card's flex `gap: 10px`, matching every other gap in the card instead
   of stacking an extra margin on top of it (that mismatch was the "uneven
   spacing" bug). */
.md-add-btn {
  display: block; width: 100%; height: 38px; box-sizing: border-box;
  background: var(--accent-teal); color: #072626; border: none;
  border-radius: 10px; padding: 0 14px; font-size: 13px; font-weight: 700; cursor: pointer;
  font-family: var(--font-thai); white-space: nowrap;
}
.md-add-btn:hover { filter: brightness(1.08); }

/* Direct-qty stepper on the card — +/- are true circles now (2026-07-07,
   were rounded-squares). */
.md-stepper--card {
  flex-shrink: 0; height: 36px; box-sizing: border-box;
  background: rgba(var(--accent-gold-rgb),0.1); border: 1px solid rgba(var(--accent-gold-rgb),0.35);
  border-radius: 999px; padding: 0 6px;
}
.md-stepper--card .md-stepper__btn { background: var(--accent-gold); color: #1a1200; border: none; border-radius: 50%; }

/* ── Planner panel (2026-07-06 redesign — distinct identity from product
   cards: gold-accented header band, pill-style rows, prominent total). ── */
/* Height-capped + internal scroll (2026-08-07 fix, desktop only — see the
   max-height:none override in the mobile media query below) — a long cart
   used to just grow the sidebar taller than the viewport with no way to
   reach the total/save button at the bottom (sticky doesn't add scrolling
   on its own). Now the ITEM LIST scrolls internally (.md-planner__list
   below) while the total/save button row stays permanently pinned and
   visible — replaced an earlier floating "jump to summary" bar, which
   fought with this element's own `position: sticky` during scrollIntoView
   and looked jumpy/flickery. */
.md-planner {
  width: 320px; flex-shrink: 0; background: var(--bg-elevated); border: 1px solid rgba(var(--accent-gold-rgb),0.3);
  border-radius: 18px; padding: 0; position: sticky; top: calc(var(--navbar-h) + 20px);
  overflow: hidden; box-shadow: 0 12px 32px rgba(var(--shadow-rgb), calc(0.3 * var(--shadow-mult)));
  max-height: calc(100vh - var(--navbar-h) - 40px);
  display: flex; flex-direction: column;
}
.md-planner__head {
  font-size: 16.8px; font-weight: 700; padding: 18px 20px; margin: 0;
  background: linear-gradient(135deg, rgba(var(--accent-gold-rgb),0.22), rgba(var(--accent-gold-rgb),0.06));
  border-bottom: 1px solid rgba(var(--accent-gold-rgb),0.3);
}
.md-planner__body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.md-planner__list { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px 4px; overflow-y: auto; flex: 1; min-height: 0; }
.md-planner__empty { font-size: 12px; color: var(--text-secondary); text-align: center; padding: 20px 8px; }
.md-planner__row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: rgba(var(--surface-rgb),0.04); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 12px;
}
.md-planner__info { flex: 1 1 100%; min-width: 0; }
.md-planner__name { font-size: 13px; font-weight: 600; white-space: normal; overflow-wrap: break-word; }
.md-planner__unit { font-size: 10px; color: var(--text-secondary); }
.md-planner__line { font-size: 13px; font-weight: 700; color: var(--accent-gold); margin-left: auto; }

.md-planner__remove {
  /* color was a literal #FF9CA8 (2026-08-08 fix) — tuned to read against the
     DARK planner card only; on the light card it measured 1.72:1 contrast,
     effectively invisible. var(--like-red) is theme-aware (3.63:1 in light
     mode, ~4.2:1 in dark — close enough to the original that dark mode
     looks unchanged). */
  background: rgba(232,67,90,0.12); border: 1px solid rgba(232,67,90,0.35); color: var(--like-red);
  border-radius: 8px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 12px; padding: 0; flex-shrink: 0;
}
.md-planner__remove:hover { background: rgba(232,67,90,0.22); }

/* +/- buttons are true circles (2026-07-07 — were rounded-squares). Qty
   readout is a matching circular badge. */
.md-stepper { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.md-stepper__btn {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border);
  background: rgba(var(--surface-rgb),0.06); color: var(--text-primary); cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.md-stepper__qty {
  font-size: 12px; font-weight: 700; min-width: 22px; height: 22px; text-align: center;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(var(--surface-rgb),0.08);
}
.md-stepper--card .md-stepper__qty { background: rgba(0,0,0,0.2); }

/* Plain text only (2026-07-07 — no more box/border, was too heavy). */
.md-quota-warn { color: var(--accent-gold); font-size: 11px; font-weight: 600; }

.md-planner__hr { border-top: 1px solid var(--border); margin: 14px 0; }
.md-planner__srow { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
/* Label stays normal-ish size (13px → 15.6px, +20% per 2026-07-07 request) —
   only the amount itself (.md-planner__total-val) is meant to be large. */
.md-planner__srow--total { align-items: center; font-size: 15.6px; font-weight: 600; color: var(--text-primary); }
.md-planner__total-val { font-size: 26px; font-weight: 800; color: var(--accent-gold); text-shadow: 0 2px 14px rgba(var(--accent-gold-rgb),0.4); }
.md-planner__note { font-size: 10px; color: var(--text-secondary); margin-top: 8px; }

/* flex-shrink:0 (2026-08-07) — sits alongside .md-planner__list in a flex
   column where the list is the one that scrolls/shrinks; this must keep
   its natural height and stay fully visible, never compressed. */
.md-planner__summary { padding: 0 20px 20px; flex-shrink: 0; }

/* Button group (2026-07-07, fixed same day: was missing visible spacing
   between the 3 buttons — margin-top on each individually read as ~0 next
   to the others). Explicit flex column + gap replaces the old per-button
   margin-top rules. Hierarchy: save = solid gold (primary), Advance
   Purchase = outline blue (secondary), conditions = bordered teal button
   (tertiary but still a real button, not a text link). */
.md-planner__actions { display: flex; flex-direction: column; gap: 12px; padding: 0 20px 20px; margin-top: 14px; flex-shrink: 0; }

.md-save-btn {
  width: 100%; background: var(--accent-gold); color: #1a1200; border: none;
  border-radius: 10px; padding: 13px; font-size: 16.1px; font-weight: 700; cursor: pointer;
  font-family: var(--font-thai);
}
.md-save-btn:hover { filter: brightness(1.06); }

/* Advance Purchase CTA — outline blue (secondary), from the existing
   identity-color palette (data-p.js COLOR_PALETTE '#0170fe'), not a new token. */
.md-advance-btn {
  display: block; width: 100%; background: rgba(1,112,254,0.12); color: #5CA8FF;
  border: 1px solid rgba(1,112,254,0.55);
  border-radius: 10px; padding: 12px; font-size: 14px; font-weight: 700; cursor: pointer;
  font-family: var(--font-thai); text-align: center; text-decoration: none; box-sizing: border-box;
}
.md-advance-btn:hover { background: rgba(1,112,254,0.2); }

/* Conditions button in the planner — a real bordered button (teal, distinct
   from gold/blue above), not a plain text link. */
.md-planner-cond-btn {
  width: 100%; background: rgba(var(--accent-teal-rgb),0.12); color: var(--accent-teal);
  border: 1px solid rgba(var(--accent-teal-rgb),0.4); border-radius: 10px; padding: 11px; font-size: 13px;
  font-weight: 600; cursor: pointer; font-family: var(--font-thai);
}
.md-planner-cond-btn:hover { background: rgba(var(--accent-teal-rgb),0.2); }

/* Mobile collapse toggle (2026-07-06) — hidden on desktop; see media query
   below for the >768px override that always shows the body expanded.
   Only the chevron arrow is enlarged (+15%, 2026-07-07) — label/badge stay
   at their original size (a previous pass wrongly scaled the whole bar). */
.md-planner__toggle {
  display: none; width: 100%; align-items: center; gap: 10px;
  background: rgba(var(--surface-rgb),0.04); border: none; border-bottom: 1px solid rgba(var(--accent-gold-rgb),0.3);
  color: var(--text-primary); padding: 14px 20px; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: var(--font-thai); text-align: left;
}
.md-planner__toggle-badge {
  flex-shrink: 0; min-width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-gold); color: #1a1200; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.md-planner__toggle-label { font-size: 13px; }
/* Qty/price numbers inside the toggle label + floating bar (2026-08-07 ask)
   — stand out from the surrounding plain text. */
.md-summary-num { color: var(--accent-gold); font-weight: 700; }
.md-planner__toggle-chevron { margin-left: auto; font-size: 15px; transition: transform 0.2s ease; }
.md-planner__toggle.is-open .md-planner__toggle-chevron { transform: rotate(180deg); }

/* Floating quick-jump bar (2026-08-07 addition, orange theme + 🛒 icon added
   same day) — mobile only. Compact pill, hidden by default (only
   .is-visible flips it on, via JS IntersectionObserver tracking on the
   inline toggle — see buildPlanner() in md.js); the observed target is
   display:none on desktop and never intersects, so this never shows there
   — no viewport-width media query needed on `.is-visible` itself. (A
   same-day desktop version — showing when the sidebar's total/save button
   scrolled out of view — was tried and reverted; scrollIntoView fought
   with that element's own `position: sticky` and looked jumpy. Desktop's
   real fix lives on .md-planner/.md-planner__list instead: the sidebar is
   height-capped with the item list scrolling internally, so the total/save
   button just stays permanently visible and there's nothing to jump to.)
   Solid accent-gold fill (not just a gold border/accent like the toggle
   bar) so it reads as its own attention-grabbing "cart" affordance while
   floating over page content. */
.md-float-bar {
  /* Centered + width-capped — reads fine at any width this could plausibly
     show at, though it's mobile-only today. */
  display: none; position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 16px; z-index: 200; width: min(360px, calc(100% - 32px));
  align-items: center; gap: 10px;
  background: var(--accent-gold); border: none;
  border-radius: 999px; padding: 10px 16px; box-shadow: 0 6px 20px rgba(var(--accent-gold-rgb),0.45);
  cursor: pointer; font-family: var(--font-thai); color: #1a1200;
}
.md-float-bar.is-visible { display: flex; }
.md-float-bar__icon { flex-shrink: 0; font-size: 18px; line-height: 1; display: flex; }
.md-float-bar__badge {
  flex-shrink: 0; min-width: 20px; height: 20px; border-radius: 50%;
  background: #1a1200; color: var(--accent-gold); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.md-float-bar__label { font-size: 12px; font-weight: 700; flex: 1; text-align: left; }
.md-float-bar__chevron { font-size: 11px; opacity: 0.7; flex-shrink: 0; }
/* .md-summary-num defaults to accent-gold text (2026-08-07 ask) — invisible
   against this bar's own solid-gold background, so override to the same
   dark ink used for the rest of the bar's text/badge. */
.md-float-bar__label .md-summary-num { color: #1a1200; }

/* ── Cart-merge popup (§8.3) / conditions popup (shared modal shell) ─── */
.md-modal-scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  /* Was 999 — one below .ppw-nav's 1000 (nav.css), so the sticky navbar
     rendered on top of this popup instead of behind it. */
  z-index: 1100;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.md-modal {
  position: relative;
  width: 100%; max-width: 460px; background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 12px;
}
.md-modal__title { font-size: 17px; font-weight: 700; }

/* Top-right "×" close button (2026-07-07 — replaces a plain "ปิด" text
   button at the bottom, matching the corner-close convention already used
   by p/modals.js's auth-modal shell). */
.md-modal__close-x {
  position: absolute; top: 14px; right: 14px; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--surface-rgb),0.06); border: 1px solid var(--border); border-radius: 50%;
  color: var(--text-secondary); font-size: 18px; line-height: 1; cursor: pointer;
}
.md-modal__close-x:hover { background: rgba(var(--surface-rgb),0.14); color: var(--text-primary); }
.md-modal__box {
  background: rgba(var(--surface-rgb),0.04); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; max-height: 140px; overflow-y: auto;
}
.md-modal__box-label { font-size: 11px; color: var(--text-secondary); margin-bottom: 4px; }
.md-modal__box-item { font-size: 12px; }

.md-modal__option {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: rgba(var(--surface-rgb),0.05); border: 1px solid var(--border); color: var(--text-primary);
  border-radius: 10px; padding: 12px 14px; font-size: 13px; font-family: var(--font-thai);
  cursor: pointer; text-align: left; flex-wrap: wrap;
}
.md-modal__option:hover { background: rgba(var(--surface-rgb),0.09); }
.md-modal__option--reco { border-color: var(--accent-gold); }
.md-modal__badge { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.md-modal__badge--gold { background: rgba(var(--accent-gold-rgb),0.18); color: var(--accent-gold); }
.md-modal__option-warn { width: 100%; font-size: 11px; color: var(--accent-gold); }

.md-modal__footer {
  background: transparent; border: none; color: var(--text-secondary); font-size: 12px;
  cursor: pointer; font-family: var(--font-thai); padding: 6px; text-align: center;
}
.md-modal__footer:hover { color: var(--text-primary); }

/* Conditions popup (2026-07-06 redesign — numbered chips instead of a plain
   <ol>, easier to scan). */
.md-modal--conditions {
  max-width: 520px; max-height: 80vh; overflow-y: auto;
  background: linear-gradient(180deg, var(--bg-elevated), var(--bg-primary));
  border-color: rgba(var(--accent-teal-rgb),0.3);
}
.md-modal--conditions .md-modal__title { padding-right: 30px; }
/* Tab switcher (2026-08-07 addition — Advance Purchase / การซื้อหน้างาน,
   real terms replacing the mockup-era single list). */
.md-cond-tabs { display: flex; gap: 8px; margin: 14px 0 4px; }
.md-cond-tab {
  flex: 1; padding: 8px 10px; border-radius: 999px; border: 1px solid var(--border);
  background: transparent; color: var(--text-secondary); font-size: 12px; font-weight: 600;
  font-family: var(--font-thai); cursor: pointer; text-align: center;
}
.md-cond-tab.is-active { background: rgba(var(--accent-teal-rgb),0.18); border-color: var(--accent-teal); color: var(--accent-teal); }
/* No per-item box (2026-07-07 — the bordered card look was bulky/wasted
   space); a thin divider between rows replaces it. */
.md-conditions-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; counter-reset: cond; }
.md-conditions-list li {
  counter-increment: cond;
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 13px; line-height: 1.6; color: var(--text-primary);
  padding: 10px 2px; border-bottom: 1px solid var(--border);
}
.md-conditions-list li:last-child { border-bottom: none; }
/* Single flex child holding the rich text (2026-08-07 fix) — see md.js
   comment. min-width:0 lets it shrink below its content's natural width
   instead of overflowing the flex row. */
.md-cond-text { flex: 1; min-width: 0; }
.md-conditions-list li::before {
  content: counter(cond); flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(var(--accent-teal-rgb),0.18); color: var(--accent-teal); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
/* Inline emphasis (2026-08-07 addition, color removed same day — reported
   as messy/distracting) — <strong> = the one critical fact per sentence
   (dates/times/prices/required documents), <u> = prohibition verbs
   (ห้าม/ไม่ได้/ตัดสิทธิ์). Plain bold/underline only, no color. */
.md-conditions-list li strong { font-weight: 700; }

/* Success popup (2026-07-06 addition; login link + prominent OK button
   added 2026-07-07). */
.md-modal--success { text-align: center; align-items: center; }
.md-modal--success .md-modal__title { font-size: 19px; }
.md-modal__desc { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
/* Guest case: login button + OK sit side by side, deliberately different
   colors (teal vs gold) so they read as two distinct actions (2026-07-07). */
.md-modal__btn-row { display: flex; gap: 10px; width: 100%; margin-top: 6px; }
.md-modal__login-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(var(--accent-teal-rgb),0.14); color: var(--accent-teal); border: 1px solid rgba(var(--accent-teal-rgb),0.45);
  border-radius: 10px; padding: 12px; font-size: 14px; font-weight: 700; cursor: pointer;
  font-family: var(--font-thai); text-decoration: none;
}
.md-modal__login-btn:hover { background: rgba(var(--accent-teal-rgb),0.24); }
.md-modal__ok-btn {
  flex: 1; background: var(--accent-gold); color: #1a1200; border: none;
  border-radius: 10px; padding: 12px; font-size: 14px; font-weight: 700; cursor: pointer;
  font-family: var(--font-thai);
}
.md-modal__ok-btn:hover { filter: brightness(1.06); }

@media (max-width: 768px) {
  .md-page { padding: 28px 16px 20px; }
  .md-hero h1 { font-size: 24px; }
  .md-content { flex-direction: column; }
  .md-grid { grid-template-columns: repeat(2, 1fr); width: 100%; }
  /* max-height:none + static list (2026-08-07) — the desktop internal-
     scroll fix (.md-planner above) doesn't apply here: mobile wants the
     expanded plan to be part of normal page flow/scroll, not a short
     nested scroll box. */
  .md-planner { width: 100%; position: static; order: -1; max-height: none; }
  .md-planner__list { overflow-y: visible; flex: initial; }
  .md-toolbar { flex-direction: column; align-items: stretch; }
  .md-search-wrap { max-width: none; }
  .md-toolbar__filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
  .md-toolbar__filters .md-pill--dd { width: 100%; }

  /* Collapsible plan list (mobile only) — desktop always shows it expanded,
     since .md-planner__toggle is display:none there and .is-collapsed only
     has meaning inside this media query. */
  .md-planner__toggle { display: flex; }
  .md-planner__body.is-collapsed { display: none; }
}

@media (max-width: 480px) {
  .md-grid { grid-template-columns: 1fr; }
}