/**
 * Sarisara Lanka — the one button file (Stage 0 of the rebrand).
 * ============================================================================
 * The `.btn` system copied, unchanged, from the design system (preview/_ds.css,
 * "BUTTONS", 21 September 2026): variants primary / ink / secondary / outline /
 * ghost / success / danger / gold / quiet, sizes xs / sm / md, `.wide`, `.icon`.
 * Every size keeps a 44px finger target through an invisible ::after pad.
 *
 * SCOPE: every rule is prefixed with `.sarisara-ds`, so the Traveler theme's
 * own gold `.btn` keeps styling the old pages. Inside an opted-in block the
 * design-system button wins, and the extra specificity is what beats the theme.
 *
 * Usage: <button class="btn primary md">Start your trip</button>
 *
 * @package Sarisara_Child
 * @since 22 October 2026
 */

/* ═══ BUTTONS ═══════════════════════════════════════════════════════════
   THE button. Transcribed verbatim from preview/button-library.html and
   moved here 21 Sep 2026 so that every sheet uses it instead of inventing
   its own. If a button anywhere does not carry .btn, that is a defect.

     <button class="btn primary md">Continue</button>
     <button class="btn outline sm">Live 4</button>

   Sizes: xs 6·12·12 · sm 8·16·13 · md 11·20·14. Medium is the ceiling.
   Shape: pill, always. There is no square button on Sarisara.
   Weight: 600, never 700.                                                 */
.sarisara-ds .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: var(--fw-strong); font-size: 14px;
  letter-spacing: -.005em;
  border: 0; cursor: pointer; white-space: nowrap;
  border-radius: var(--r-full);
  transition: all 180ms var(--ease-smooth);
  position: relative;
}
.sarisara-ds .btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; box-shadow: var(--sh-glow); }

.sarisara-ds .btn.xs { padding: 6px 12px; font-size: 12px; }
.sarisara-ds .btn.sm { padding: 8px 16px; font-size: 13px; }
.sarisara-ds .btn.md { padding: 11px 20px; font-size: 14px; }
/* NOT .block — that name is already the sheet's section card, and a button
   carrying both picked up the card's corner radius and padding. */
.sarisara-ds .btn.wide { width: 100%; }

/* EVERY size keeps a 44px touch target by growing an INVISIBLE pad, not by
   growing itself — and never by gaining a min-width, which turns a short
   label like "All" into a circle.
   Note md draws at 40px tall (11 + 11 + 18), so it needs the pad too; the
   button sheet said "xs and sm", which left the default size one short. */
.sarisara-ds .btn::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 44px; transform: translateY(-50%);
}
.sarisara-ds .btn.icon { flex: 0 0 auto; }
.sarisara-ds .btn.icon::after { left: 50%; width: 44px; margin-left: -22px; }

.sarisara-ds .btn.primary { background: var(--primary); color: #fff; }
.sarisara-ds .btn.primary:hover { background: var(--primary-dark); transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(119,0,255,.25); }
.sarisara-ds .btn.primary:active { transform: translateY(0); }
.sarisara-ds .btn.ink { background: var(--navy); color: #fff; }
.sarisara-ds .btn.ink:hover { background: var(--navy-soft); }
.sarisara-ds .btn.secondary { background: var(--muted); color: var(--text-primary); }
.sarisara-ds .btn.secondary:hover { background: var(--border); }
.sarisara-ds .btn.outline { background: var(--surface); color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.sarisara-ds .btn.outline:hover { background: var(--primary-ultra-light); }
.sarisara-ds .btn.ghost { background: transparent; color: var(--text-primary); }
.sarisara-ds .btn.ghost:hover { background: var(--muted); }
.sarisara-ds .btn.success { background: var(--success); color: #fff; }
.sarisara-ds .btn.success:hover { background: var(--success-dark); }
.sarisara-ds .btn.danger { background: var(--error); color: #fff; }
.sarisara-ds .btn.danger:hover { background: var(--error-dark); }
.sarisara-ds .btn.gold { background: var(--warning); color: var(--navy); }
.sarisara-ds .btn.gold:hover { background: var(--warning-dark); color: #fff; }
.sarisara-ds .btn[disabled], .sarisara-ds .btn.disabled, .sarisara-ds .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* A quiet pill for filters and segmented choices. Same button, unselected
   state is a hairline grey rather than violet, so a row of them is calm. */
.sarisara-ds .btn.quiet { background: var(--surface); color: var(--text-secondary);
  box-shadow: inset 0 0 0 1px var(--border); }
.sarisara-ds .btn.quiet:hover { background: var(--surface-2); color: var(--navy); }
.sarisara-ds .btn.quiet.on { background: var(--primary-light); color: var(--primary-dark);
  box-shadow: inset 0 0 0 1px var(--primary); }

.sarisara-ds .btn .chev { display: inline-block; width: 11px; height: 11px;
  border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
  transform: rotate(45deg); margin-left: 2px; }
.sarisara-ds .btn .dot { display: inline-block; width: 7px; height: 7px; border-radius: 9999px;
  background: var(--navy); }
.sarisara-ds .btn .n { font-size: .88em; opacity: .7; font-variant-numeric: tabular-nums; }

/* The icon-only button — square-ish tap area, pill corner, same family. */
.sarisara-ds .btn.icon { width: 44px; height: 44px; padding: 0; border-radius: var(--r-md); }
.sarisara-ds .btn.icon.sm { width: 36px; height: 36px; }
.sarisara-ds .btn.icon.sm::after { left: -4px; right: -4px; }