/* ==========================================================================
   gms-pages-b.css — GROUP B page-specific CSS (content/service pages).
   Loaded via renderPage()'s `extraHead` AFTER ab-design-system.css and
   gms-ab.css. Unlayered like gms-ab.css, so it can win where needed, but it
   never redefines anything the master already provides (form fields,
   accordions, price tags and addon rows have no master component).
   ========================================================================== */

/* --------------------------------------------------------------------------
   FIX (Fable review, 1366px): contact.html's two-column grid (form panel +
   "What happens next?" timeline panel) is two SIBLING `.ab-panel` elements
   inside `.ab-grid--2`. Two master rules collide there:
     1. `.ab-grid--2 > * { height: 100% }` stretches BOTH columns to the
        row's track height (correct for a paired-card layout, not for two
        columns of genuinely different content).
     2. `.ab-panel + .ab-panel { margin-top: 26px }` is a vertical-stacking
        convenience for `.ab-panel`s that follow one another in NORMAL FLOW
        (one below another) — the selector has no idea these two panels are
        side-by-side grid columns, so it push the second column's panel down
        26px inside its own grid area regardless.
   Together: the taller column's un-stretched natural height plus the
   sibling's 26px top offset pushed its bottom 26px past the grid/footer —
   measured live before this fix: panel-2 bottom 1343.275 vs footer top
   1317.275 (a 26px overlap) at 1366px.
   Fix: a normal grid, `align-items:start`, natural per-column height, and
   the sibling margin zeroed for this pair — so the row is exactly as tall
   as its tallest column and the footer starts below it, at every width.
   -------------------------------------------------------------------------- */
.gmsb-2col-panels { align-items: start; }
.gmsb-2col-panels > .ab-panel { height: auto; }
.gmsb-2col-panels > .ab-panel + .ab-panel { margin-top: 0; }

/* --------------------------------------------------------------------------
   Contact form (contact.html) — WhatsApp-handoff form, kept functional.
   -------------------------------------------------------------------------- */
.gmsb-form { display: grid; gap: 14px; max-width: 640px; }
.gmsb-form label {
  display: block; font: 700 13px/1.3 "Roboto", sans-serif; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted, #6b7280); margin: 0 0 6px;
}
.gmsb-form input, .gmsb-form select, .gmsb-form textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card-surface, #fff); color: var(--ink);
  padding: 12px 14px; font: 500 15px/1.4 "Roboto", sans-serif;
}
.gmsb-form input:focus, .gmsb-form select:focus, .gmsb-form textarea:focus {
  outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold);
}
.gmsb-form textarea { min-height: 110px; resize: vertical; }
.gmsb-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .gmsb-form-grid { grid-template-columns: 1fr; } }
.gmsb-form-note { font-size: 13px; color: var(--muted, #6b7280); margin: 2px 0 0; }
.gmsb-form-note a { color: var(--gold-ink); }

/* --------------------------------------------------------------------------
   Accordion — FAQ categories + any collapsible content group.
   -------------------------------------------------------------------------- */
.gmsb-acc { border: 1px solid var(--line); border-radius: var(--radius, 16px); overflow: hidden; margin: 0 0 16px; background: var(--card-surface, #fff); }
.gmsb-acc__h {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 16px 20px; background: transparent; border: 0; cursor: pointer;
  text-align: left; font: 700 17px/1.3 "Noto Serif Devanagari", Georgia, serif; color: var(--ink);
}
.gmsb-acc__h::before { content: ""; width: 4px; align-self: stretch; border-radius: 3px; background: var(--gold); flex: 0 0 4px; }
.gmsb-acc__count { margin-left: auto; font: 700 13px/1 "Roboto", sans-serif; color: var(--muted, #6b7280); flex: 0 0 auto; }
.gmsb-acc__chev { transition: transform .2s ease; flex: 0 0 auto; width: 18px; height: 18px; }
.gmsb-acc.open .gmsb-acc__chev { transform: rotate(180deg); }
.gmsb-acc:not(.open) .gmsb-acc__body { display: none; }
.gmsb-acc__body { padding: 4px 20px 18px; }
.gmsb-acc__body .gms-pills { margin-top: 4px; }

/* --------------------------------------------------------------------------
   Price cards (marriage-documents) — an .ab-card with a price tag + a
   verbatim WhatsApp-enquiry CTA instead of the dead `pay()` alert.
   -------------------------------------------------------------------------- */
.gmsb-price-tag {
  display: inline-flex; align-items: baseline; gap: 6px; margin: 4px 0 10px;
  font: 800 22px/1 "Roboto", sans-serif; color: var(--gold-ink);
}
.gmsb-price-tag small { font: 600 13px/1 "Roboto", sans-serif; color: var(--muted, #6b7280); }
.gmsb-price-badge {
  display: inline-block; font: 800 13px/1 "Roboto", sans-serif; letter-spacing: .06em;
  text-transform: uppercase; padding: 5px 10px; border-radius: 999px;
  background: var(--gold); color: #1B2A5E; margin-bottom: 8px;
}
.gmsb-price-list { list-style: none; margin: 10px 0 14px; padding: 0; display: grid; gap: 6px; }
.gmsb-price-list li { font-size: 14px; padding-left: 20px; position: relative; }
.gmsb-price-list li::before { content: "✓"; position: absolute; left: 0; color: var(--green, #177A39); font-weight: 800; }

/* --------------------------------------------------------------------------
   Addon rows (marriage-documents optional add-ons, photography add-on
   catalogue, wedding-planning premium add-ons) — compact price-row list.
   -------------------------------------------------------------------------- */
.gmsb-addon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.gmsb-addon {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  background: var(--paper, #FAF9F6); display: flex; flex-direction: column; gap: 2px;
}
.gmsb-addon b { font-size: 14.5px; }
.gmsb-addon span { font-size: 13px; color: var(--muted, #6b7280); }
.gmsb-addon strong { margin-top: 6px; color: var(--gold-ink); font-size: 14px; }

/* --------------------------------------------------------------------------
   ROUND 4 item 2/3 — Package Comparison table, REBUILT on AB tokens only.
   Aniket's report: the header cycled literal off-brand hex
   (#2563EB/#0D9488/#16A34A/#EA580C/#7C3AED — the AB master's own
   `.ab-table--spectrum` component, nth-child(6n+N) rainbow), and the first
   column (row labels) was silently empty (a generator regex bug — see
   _build/gen-group-b.js). `.ab-table--spectrum` is dropped from the markup
   entirely; `.gmsb-cmp-table` is a fresh, scoped replacement:
     - navy header cells (--panel-1), gold-soft text (--gold-soft) — ONE
       colour, not a cycling palette, matching the brief's own wording.
     - package names as pills inside the header (gmsb-cmp-pill).
     - zebra rows using the SITE'S OWN --tint-N-bg cycling (the identical
       tintNext() helper already used for every card grid on this page),
       never a flat grey zebra or a second literal-hex palette.
     - ✓ = green chip (--green-ink), "Add-on" = gold chip (--gold-ink), a
       plain em-dash for "not included", anything else (Basic/1/2/Pack/
       Production…) as plain bold text.
     - sticky first column (own opaque background per row so the scrolled
       body never shows through it), horizontal scroll on mobile.
   -------------------------------------------------------------------------- */
.gmsb-table-wrap {
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--radius, 16px);
}
.gmsb-cmp-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.gmsb-cmp-table thead th {
  background: var(--panel-1, #1B2A5E); color: var(--gold-soft, #E8D9AE);
  font: 700 13px/1.3 "Roboto", sans-serif; letter-spacing: .04em; text-transform: uppercase;
  padding: 14px 16px; text-align: center; white-space: nowrap;
}
.gmsb-cmp-table thead th:first-child {
  text-align: left; position: sticky; left: 0; z-index: 2;
  background: var(--panel-1, #1B2A5E);
}
.gmsb-cmp-pill {
  display: inline-block; padding: 5px 14px; border-radius: 999px;
  background: rgba(255,255,255,.14); font-weight: 800; letter-spacing: .02em;
}
.gmsb-cmp-table tbody td {
  padding: 12px 16px; border-top: 1px solid var(--line);
  font-size: 14px; text-align: center; white-space: nowrap;
}
.gmsb-cmp-table tbody td:first-child {
  text-align: left; font-weight: 700; color: var(--ink);
  position: sticky; left: 0; z-index: 1;
  box-shadow: 2px 0 0 var(--line);
}
.gmsb-cmp-table tbody tr.ab-tint-1 td { background: var(--tint-1-bg); }
.gmsb-cmp-table tbody tr.ab-tint-2 td { background: var(--tint-2-bg); }
.gmsb-cmp-table tbody tr.ab-tint-3 td { background: var(--tint-3-bg); }
.gmsb-cmp-table tbody tr.ab-tint-4 td { background: var(--tint-4-bg); }
.gmsb-cmp-table tbody tr.ab-tint-5 td { background: var(--tint-5-bg); }
.gmsb-cmp-table tbody tr.ab-tint-6 td { background: var(--tint-6-bg); }
.gmsb-cmp-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 24px; padding: 0 9px; border-radius: 999px;
  font-weight: 800; font-size: 13px; line-height: 1;
}
.gmsb-cmp-chip--yes   { background: rgba(23,122,57,.14); color: var(--green-ink); }
.gmsb-cmp-chip--addon { background: rgba(138,109,31,.16); color: var(--gold-ink); }
.gmsb-cmp-dash { color: var(--muted, #6b7280); font-weight: 700; }
.gmsb-cmp-text { font-weight: 700; color: var(--ink); }
@media (max-width: 760px) { .gmsb-cmp-table { min-width: 560px; } }

/* --------------------------------------------------------------------------
   Sitemap grid.
   -------------------------------------------------------------------------- */
.gmsb-sm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.gmsb-sm-col ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.gmsb-sm-col a { color: var(--ink); font-size: 14.5px; }
.gmsb-sm-col a:hover { color: var(--gold-ink); }