/* MetaPilates — brand tokens, plus the three components JavaScript injects into
 * every page: the cookie banner (mp-consent.js), the persistent booking CTA and
 * the language toggle (mp-site.js).
 *
 * Every page loads this one — the marketing site and the client app alike —
 * because those three are mounted everywhere. The marketing design system
 * (assets/mp.css) loads after it and uses the tokens defined here; the app
 * pages (/account, /signin, /checkout) load their own chain instead.
 *
 * Keep it small. Anything that is only ever true on a marketing page belongs in
 * mp.css, not here.
 */

/* ── Fonts ─────────────────────────────────────────────────────────────────
   Self-hosted, same-origin, no third-party request. DM Sans and Fraunces are
   the two the site already shipped; Noto Sans Georgian is new and necessary —
   neither of the other two has a Georgian glyph, and ka is the default locale.
   No unicode-range here on purpose: each file carries only its own script, so
   the browser falls through the stack to Noto for Georgian by itself. (The old
   overrides file pinned DM Sans to the latin-EXT range, which meant plain ASCII
   never actually used it.) */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/dm-sans-latin.woff2) format('woff2');
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/fraunces-latin.woff2) format('woff2');
}

@font-face {
  font-family: 'Noto Sans Georgian';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/noto-sans-georgian.woff2) format('woff2');
  unicode-range: U+0589, U+10A0-10FF, U+1C90-1CBA, U+1CBD-1CBF, U+205A, U+2D00-2D2F, U+2E31;
}

:root {
  /* Two greens, both sampled from the approved design: the deep one is the
     hero panel, the sage is the BOOK NOW button and the footer. */
  --mp-green: #37453b;
  --mp-green-deep: #2b352d;
  --mp-sage: #5f6e65;
  --mp-sage-hover: #4e5c54;

  /* The design's ground is a NEUTRAL off-white, not the warm MetaPilates cream
     (#efeae0) the rest of the brand uses. That is deliberate — it is what the
     client approved — and it is one token to change back. */
  --mp-ground: #f4f5f5;
  /* Sampled from the comp: the card is barely lighter than the ground and is
     defined by its hairline, not by being a raised white panel. */
  --mp-card: #f8f8f8;
  --mp-line: #e9e8e5;
  --mp-line-strong: #d6d3cc;

  --mp-ink: #2f2f2d;
  --mp-ink-soft: #55554f;
  --mp-ink-muted: #7d7d75;
  --mp-on-dark: #ffffff;
  --mp-on-dark-soft: rgba(255, 255, 255, 0.78);

  --mp-focus: #1d4ed8;

  --mp-sans: 'DM Sans', 'Noto Sans Georgian', system-ui, -apple-system, sans-serif;
  --mp-serif: 'Fraunces', Georgia, 'Times New Roman', serif;

  --mp-track-label: 0.16em;
  --mp-track-nav: 0.12em;

  --mp-container: 1360px;
  --mp-gutter: 32px;
  --mp-header-h: 92px;

  --mp-radius: 0px;
  --mp-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Cookie consent (PW-3-R4) ──────────────────────────────────────────────
   "Accept all" and "Reject non-essential" share one selector on purpose:
   PW-3-R4 asks for equal ease, and a reject styled as a quiet secondary is the
   usual way that requirement is met on paper and broken in practice. Any change
   that gives one of them its own rule fails test/cookie-consent.spec.ts. */

.mp-consent {
  position: fixed;
  z-index: 9000;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px max(5vw, 22px) calc(22px + env(safe-area-inset-bottom, 0px));
  /* Measured at 493px tall on a 390x844 phone — 58% of the viewport, which is
     what buried the booking CTA underneath it. */
  max-height: 70vh;
  overflow-y: auto;
  background: var(--mp-card);
  color: var(--mp-ink);
  border-top: 1px solid var(--mp-line-strong);
  box-shadow: 0 -12px 40px rgba(20, 26, 22, 0.16);
  font-family: var(--mp-sans);
  font-size: 15px;
  line-height: 1.45;
}

.mp-consent__title {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: var(--mp-track-label);
  text-transform: uppercase;
}

:lang(ka) .mp-consent__title {
  text-transform: none;
}

.mp-consent__body {
  margin: 0;
  max-width: 62ch;
  color: var(--mp-ink-soft);
}

.mp-consent__policy {
  text-decoration: underline;
  color: inherit;
}

.mp-consent__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.mp-consent__category {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}

.mp-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.mp-consent__action,
.mp-consent__save {
  min-height: 44px;
  /* 200px twice plus the gap overflows a 390px phone; they wrap to one per row
     there instead of being cut off. */
  min-width: min(200px, 100%);
  flex: 1 1 200px;
  padding: 12px 22px;
  font: inherit;
  font-size: 12px;
  letter-spacing: var(--mp-track-label);
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid var(--mp-green);
  border-radius: var(--mp-radius);
  background: var(--mp-green);
  color: var(--mp-on-dark);
}

.mp-consent__save {
  background: transparent;
  color: var(--mp-green);
}

.mp-consent__settings {
  cursor: pointer;
}

/* ── The persistent booking CTA (PW-1-R8, PW-A-R3) ─────────────────────────
   A 44px target in the bottom-right thumb arc, never in the top bar — that
   placement is the requirement, not a style choice. */

.mp-cta {
  position: fixed;
  /* Deliberately BELOW the consent banner (9000). A booking button floating on
     top of a consent dialog would cover its controls, and pushing a sale over
     an unanswered privacy choice is exactly the pattern TR-1 exists to avoid.
     The banner is a first-visit gate; the CTA is there the moment it is
     answered. What was fixed instead is the banner's own footprint below. */
  z-index: 8000;
  right: max(3vw, 16px);
  bottom: calc(max(3vw, 16px) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

.mp-cta__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 48px;
  padding: 14px 24px;
  background: var(--mp-green);
  color: var(--mp-on-dark);
  font-family: var(--mp-sans);
  font-size: 12px;
  letter-spacing: var(--mp-track-label);
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 8px 26px rgba(20, 26, 22, 0.28);
}

:lang(ka) .mp-cta__link {
  text-transform: none;
}

.mp-cta__link:hover {
  background: var(--mp-green-deep);
}

.mp-cta__link--secondary {
  background: var(--mp-card);
  color: var(--mp-green);
  border: 1px solid var(--mp-line-strong);
}

.mp-cta__link--secondary:hover {
  background: var(--mp-card);
  border-color: var(--mp-sage);
}

/* ── Language toggle ───────────────────────────────────────────────────────
   mp-site.js inserts this into the header, before the BOOK NOW button. */

.mp-lang {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  font-family: var(--mp-sans);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.mp-lang__opt {
  color: inherit;
  text-decoration: none;
  opacity: 0.5;
  /* Was 21x24 — two of them 4px apart. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 8px;
  transition: opacity 0.2s var(--mp-ease);
}

.mp-lang__opt:hover,
.mp-lang__opt:focus-visible {
  opacity: 1;
}

.mp-lang__opt--current {
  opacity: 1;
  font-weight: 600;
}

.mp-lang__sep {
  opacity: 0.3;
}

/* The banner's own footprint on a phone: three stacked full-width buttons plus
   three category rows is most of a small screen. Tighter, and the two decisions
   still share one selector so neither can be quietly demoted. */
@media (max-width: 620px) {
  .mp-consent {
    gap: 10px;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    font-size: 14px;
  }

  .mp-consent__categories {
    gap: 4px 16px;
  }

  .mp-consent__action,
  .mp-consent__save {
    min-height: 44px;
    padding: 10px 16px;
  }
}