@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&display=swap');
@import './tokens.css';

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; }
[id] { scroll-margin-top: 88px; }
html, body { max-width: 100%; overflow-x: clip; }
body {
  margin: 0;
  font: 400 16px/1.5 var(--font-sans, 'Onest', system-ui, sans-serif);
  color: var(--fg-2, #3D4753);
  background: var(--surface-0, #FFFFFF);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }

.container { max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
@media (max-width: 720px) { .container { padding-inline: 16px; } }

.section { padding-block: var(--space-20, 80px); position: relative; }
.section--surface { background: var(--surface-1, #F6F7F9); }
@media (max-width: 720px) { .section { padding-block: var(--space-12, 48px); } }

/* Repeating card collections become native swipe sliders on phones. */
@media (max-width: 720px) {
  .mobile-card-slider {
    display: flex !important;
    gap: var(--space-4, 16px);
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0;
    padding: 0 0 var(--space-3, 12px);
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 0;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: none;
  }
  .mobile-card-slider::-webkit-scrollbar { display: none; }
  .mobile-card-slider > * {
    /* One card is exactly one viewport of the slider: swipe without leaking
       a partially visible neighbouring card beyond the section container. */
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: var(--r-sm, 10px);
  font: 600 16px var(--font-sans); border: 0; cursor: pointer;
  transition: background var(--dur-base, 200ms) var(--ease-out, ease),
              transform 120ms var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  text-decoration: none;
}
.btn--primary { background: var(--accent, #FF5436); color: #fff; box-shadow: var(--shadow-cta); }
.btn--primary:hover { background: var(--accent-hover, #E04528); }
.btn--primary:active { transform: scale(0.98); }
.btn--ghost { background: transparent; border: 1px solid var(--border-1, #E5E7EB); color: var(--fg-1, #0F1419); }
.btn--ghost:hover { border-color: var(--fg-1); }
.btn--dark { background: var(--fg-1); color: #fff; }
.btn:focus-visible { outline: 0; box-shadow: var(--ring); }

/* Badge & tag */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--surface-1); color: var(--fg-1);
  font: 500 13px var(--font-sans);
}
.tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border-radius: 999px; border: 1px solid var(--border-1);
  font: 500 14px var(--font-sans); color: var(--fg-2);
}
.tag--active { background: var(--fg-1); color: #fff; border-color: var(--fg-1); }

/* Card */
.card {
  background: var(--surface-0); border-radius: var(--r-md, 14px);
  border: 1px solid var(--border-1);
  padding: var(--space-6, 24px);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); }

/* Field */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font: 500 14px var(--font-sans); color: var(--fg-2); }
.field__input, .field__select, .field__textarea {
  padding: 12px 14px; border-radius: var(--r-sm);
  border: 1px solid #D1D5DB; background: #fff;
  font: 400 16px var(--font-sans); color: var(--fg-1);
  transition: border-color var(--dur-fast, 120ms) var(--ease-out);
}
.field__input:hover { border-color: #B4B9C1; }
.field__input:focus, .field__select:focus, .field__textarea:focus { outline: 0; border-color: var(--accent); box-shadow: var(--ring); }
.field__error { font-size: 13px; color: #C0392B; min-height: 18px; }

/* Divider */
.divider { height: 1px; background: var(--border-1); border: 0; margin-block: var(--space-8, 32px); }

/* Utilities */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.no-scroll { overflow: hidden; }
.text-money { font-variant-numeric: tabular-nums; color: var(--money, #14B866); font-weight: 700; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.06em; font: 600 12px var(--font-sans); color: var(--fg-3, #6B7280); }

/* Z-layers */
:root {
  --z-header: 100;
  --z-floating-cta: 90;
  --z-sticky: 80;
  --z-modal: 200;
}