/* ============================================================
   One Card Brand 2026
   Loaded LAST (after tailwind + vcardonline-overrides) so it wins on
   equal specificity. Three jobs:
     1. Map generic Tailwind blue/indigo to One Card cyan (#009bc1).
     2. Set the Sora display type system (matches the card templates).
     3. Add 2026 web-platform niceties: View Transitions + a
        prefers-reduced-motion guard.
   ============================================================ */

:root {
  --cf-50:  #e6f5f9;
  --cf-100: #b3e0ec;
  --cf-200: #80cbde;
  --cf-300: #4db7d1;
  --cf-400: #26a6c7;
  --cf-500: #009bc1; /* One Card / BHD cyan, fills and gradients only */
  --cf-ink: #00718c; /* text + white-on-brand CTAs, 5.6:1 on white */
  --cf-600: #0086a6;
  --cf-700: #00708c;
  --cf-800: #005b73;
  --cf-900: #004559;
}

/* ---- Display type ----
   Sora for headings (the same face the printed card templates use,
   so the marketing site reads as the product). Body stays on Plus
   Jakarta Sans (set in ui-header). Hebrew keeps IBM Plex Sans Hebrew
   via the higher-specificity html[dir="rtl"] rule, so this never
   touches RTL pages. */
h1, h2, h3, .font-display {
  font-family: 'Sora', 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.02em;
}

/* ============================================================
   BLUE -> CYAN REMAP, gated to `.vcardonline-brand` (apex marketing/app
   chrome only; ui-header.php adds that class). Tenant subdomains keep
   their OWN brand color, so this NEVER repaints their hardcoded blue-*
   chrome. Everything OUTSIDE this block (Sora, grid restore, view
   transitions, reduced-motion) stays global on purpose.
   ============================================================ */

/* ---- Backgrounds ---- */
.vcardonline-brand .bg-blue-50  { background-color: var(--cf-50); }
.vcardonline-brand .bg-blue-100 { background-color: var(--cf-100); }
.vcardonline-brand .bg-blue-500 { background-color: var(--cf-ink); }
.vcardonline-brand .bg-blue-600 { background-color: var(--cf-ink); }
.vcardonline-brand .bg-blue-700 { background-color: var(--cf-600); }
.vcardonline-brand .bg-blue-800 { background-color: var(--cf-700); }
.vcardonline-brand .bg-blue-500\/10 { background-color: rgb(0 155 193 / 0.10); }
.vcardonline-brand .bg-blue-500\/20 { background-color: rgb(0 155 193 / 0.20); }
.vcardonline-brand .bg-blue-500\/30 { background-color: rgb(0 155 193 / 0.30); }
.vcardonline-brand .hover\:bg-blue-50:hover  { background-color: var(--cf-50); }
.vcardonline-brand .hover\:bg-blue-700:hover { background-color: var(--cf-600); }
.vcardonline-brand .group:hover .group-hover\:bg-blue-600 { background-color: var(--cf-ink); }

/* ---- Text ---- */
.vcardonline-brand .text-blue-100 { color: var(--cf-100); }
.vcardonline-brand .text-blue-400 { color: var(--cf-300); }
.vcardonline-brand .text-blue-500 { color: var(--cf-ink); }
.vcardonline-brand .text-blue-600 { color: var(--cf-ink); }
.vcardonline-brand .text-blue-700 { color: var(--cf-600); }
.vcardonline-brand .text-blue-800 { color: var(--cf-700); }

/* ---- Borders / ring ---- */
.vcardonline-brand .border-blue-100 { border-color: var(--cf-100); }
.vcardonline-brand .border-blue-400 { border-color: var(--cf-300); }
.vcardonline-brand .ring-blue-200   { --tw-ring-color: var(--cf-100); }

/* ---- Gradients (rewrite the Tailwind --tw-gradient-* custom props) ---- */
.vcardonline-brand .from-blue-50  { --tw-gradient-from: var(--cf-50) var(--tw-gradient-from-position); --tw-gradient-to: rgb(230 245 249 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.vcardonline-brand .from-blue-500 { --tw-gradient-from: var(--cf-500) var(--tw-gradient-from-position); --tw-gradient-to: rgb(0 155 193 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.vcardonline-brand .from-blue-600 { --tw-gradient-from: var(--cf-500) var(--tw-gradient-from-position); --tw-gradient-to: rgb(0 155 193 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.vcardonline-brand .via-blue-700  { --tw-gradient-to: rgb(0 134 166 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--cf-600) var(--tw-gradient-via-position), var(--tw-gradient-to); }
.vcardonline-brand .to-blue-50    { --tw-gradient-to: var(--cf-50) var(--tw-gradient-to-position); }
.vcardonline-brand .to-blue-600   { --tw-gradient-to: var(--cf-500) var(--tw-gradient-to-position); }
.vcardonline-brand .to-indigo-50  { --tw-gradient-to: var(--cf-50) var(--tw-gradient-to-position); }
.vcardonline-brand .to-indigo-700 { --tw-gradient-to: var(--cf-700) var(--tw-gradient-to-position); }
.vcardonline-brand .to-indigo-800 { --tw-gradient-to: var(--cf-800) var(--tw-gradient-to-position); }

/* ---- Colored shadows ---- */
.vcardonline-brand .shadow-blue-500\/30 { --tw-shadow-color: rgb(0 155 193 / 0.30); --tw-shadow: var(--tw-shadow-colored); }
.vcardonline-brand .shadow-blue-600\/30 { --tw-shadow-color: rgb(0 155 193 / 0.30); --tw-shadow: var(--tw-shadow-colored); }

/* ---- Hero wash: brand cyan instead of the generic blue/cream ---- */
.vcardonline-brand .hero-gradient {
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(0,155,193,.10), transparent 58%),
    linear-gradient(135deg, #f3fafc 0%, #ffffff 60%, #f6fcfd 100%);
}

/* ---- Wallet pass hero (design.md canonical hero object) ----
   Styled in plain CSS, NOT Tailwind utilities: the prebuilt techwind
   subset omits arbitrary-value classes (p-7, rounded-3xl, w-[360px]...),
   so relying on them left the pass unpadded with overlapping text. */
.cf-hero-stage { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 16px 0; }
.cf-pass {
  position: relative; width: 360px; max-width: 100%; border-radius: 24px;
  padding: 28px; color: #fff;
  background: linear-gradient(150deg, var(--cf-500) 0%, var(--cf-900) 100%);
  box-shadow: 0 44px 90px -34px rgba(0, 69, 89, .55);
}
.cf-pass__live {
  position: absolute; top: 22px; inset-inline-end: 22px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  background: rgba(255,255,255,.16); padding: 5px 11px; border-radius: 999px;
}
.cf-pass__co {
  font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: 13px; letter-spacing: .18em; color: rgba(255,255,255,.82);
}
.cf-pass__name {
  font-family: 'Sora', sans-serif; font-weight: 800;
  font-size: 26px; line-height: 1.12; margin-top: 28px;
}
.cf-pass__role { margin-top: 6px; color: rgba(255,255,255,.85); font-size: 15px; }
.cf-pass-qr {
  width: 78px; height: 78px; border-radius: 14px; background: #fff; margin-top: 24px;
  background-image: url('/assets/images/hero-card-qr.svg');
  background-repeat: no-repeat; background-position: center;
  background-size: 60px 60px; /* ~9px white quiet-zone for scannability */
  box-shadow: 0 8px 20px -10px rgba(0,0,0,.4);
}
.cf-swatches {
  display: flex; align-items: center; gap: 12px;
  background: #fff; padding: 12px 16px; border-radius: 16px;
  box-shadow: 0 12px 34px -18px rgba(0,0,0,.28);
}
.cf-swatches__lbl { font-size: 12px; font-weight: 600; color: #6b7280; margin-inline-end: 4px; }
/* 34px of visible swatch inside a 44x44 hit area. The padding is the
   touch surface; background-clip keeps the swatch's own colour at 34px. */
.cf-swatch { width: 34px; height: 34px; border-radius: 10px; display: inline-block;
             padding: 5px; box-sizing: content-box; background-clip: content-box;
             background-origin: content-box; }
.cf-swatch--sel { outline: 3px solid #b9e3ee; outline-offset: 2px; }
.cf-wallet-cta { font-size: 14px; font-weight: 600; color: #6b7280; display: flex; align-items: center; gap: 8px; }

/* ---- Interactive hero: brand colour driven by a single --pass-c var ---- */
.cf-pass--live {
  background: linear-gradient(150deg,
              var(--pass-c, var(--cf-500)) 0%,
              color-mix(in srgb, var(--pass-c, var(--cf-500)) 40%, #04141b) 100%);
  transition: background .45s ease;
}
.cf-pass--live:focus-within { animation-play-state: paused; } /* stop the bob while typing */
.cf-pass__pen {
  position: absolute; bottom: 24px; inset-inline-end: 24px;
  width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.14); color: #fff; font-size: 12px; pointer-events: none;
}
.cf-edit {
  outline: none; cursor: text; border-radius: 7px;
  padding: 1px 5px; margin-inline: -5px;
  transition: background .18s ease, box-shadow .18s ease;
}
.cf-edit:hover { background: rgba(255,255,255,.08); }
.cf-edit:focus { background: rgba(255,255,255,.14); box-shadow: 0 0 0 2px rgba(255,255,255,.4); }
/* On-card editable contact lines (phone + email) */
.cf-pass__contact { margin-top: 16px; display: flex; flex-direction: column; gap: 7px; }
.cf-pass__line { display: flex; align-items: center; gap: 9px; font-size: 14px; color: rgba(255,255,255,.92); }
.cf-pass__line i { font-size: 12px; opacity: .8; width: 15px; text-align: center; flex-shrink: 0; }
.cf-pass__field { display: inline-block; min-width: 60px; }
.cf-pass__field:empty::before { content: attr(data-ph); color: rgba(255,255,255,.5); }
.cf-pass-qr { margin-top: 18px; }
.cf-swatch { border: 0; padding: 0; cursor: pointer; transition: transform .15s ease, outline-color .15s ease; }
.cf-swatch:hover { transform: translateY(-2px); }
.cf-swatch:focus-visible { outline: 2px solid var(--cf-500); outline-offset: 3px; }
.cf-try-hint {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--cf-700);
  background: var(--cf-50); padding: 8px 14px; border-radius: 999px; max-width: 320px; text-align: center;
}
.cf-try-hint i { color: var(--cf-ink); }
.cf-wallet-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.cf-wallet-row--android { flex-direction: row-reverse; } /* native (Google) first on Android */
.cf-wallet-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 14.5px; font-weight: 600; text-decoration: none;
  padding: 11px 20px; border-radius: 999px;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.cf-wallet-btn i { font-size: 16px; }
.cf-wallet-btn:hover { transform: translateY(-2px); }
.cf-wallet-btn--apple { background: #0c1418; color: #fff; box-shadow: 0 10px 26px -12px rgba(12,20,24,.6); }
.cf-wallet-btn--apple:hover { background: #1a2731; box-shadow: 0 14px 30px -12px rgba(12,20,24,.7); }
.cf-wallet-btn--google { background: #fff; color: #1f2937; border: 1px solid var(--line, #e7ebea); box-shadow: 0 6px 18px -10px rgba(0,0,0,.25); }
.cf-wallet-btn--google i { color: #4285f4; }
.cf-wallet-btn--google:hover { border-color: #d0d7de; box-shadow: 0 12px 26px -12px rgba(0,0,0,.3); }

/* ---- Get-my-card funnel ---- */
.cf-getcard { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 400px; }
.cf-email-input {
  flex: 1; min-width: 190px; padding: 12px 16px; border: 1px solid var(--line, #e7ebea);
  border-radius: 12px; font-size: 15px; font-weight: 500; background: #fff; color: #0c1418;
}
.cf-email-input:focus { outline: none; border-color: var(--cf-500); box-shadow: 0 0 0 3px rgba(0,155,193,.15); }
.cf-getcard-btn {
  background: var(--cf-ink); color: #fff; border: 0; border-radius: 12px; padding: 12px 22px;
  font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap;
  box-shadow: 0 8px 24px -8px rgba(0,155,193,.6); transition: transform .15s ease, background .15s ease;
}
.cf-getcard-btn:hover:not(:disabled) { transform: translateY(-2px); background: var(--cf-600); }
.cf-getcard-btn:disabled { opacity: .6; cursor: default; }
.cf-getcard-err { color: #dc2626; font-size: 13px; font-weight: 600; max-width: 400px; text-align: center; }
.cf-getcard-done {
  background: var(--cf-50); border: 1px solid var(--cf-100); border-radius: 14px;
  padding: 14px 18px; max-width: 400px; text-align: center; font-size: 14px; color: var(--cf-900);
}
.cf-getcard-done strong { display: block; margin-bottom: 4px; }
.cf-getcard-done a { color: var(--cf-600); font-weight: 700; word-break: break-all; text-decoration: none; }

/* ---- Restore responsive grid utilities missing from the prebuilt Tailwind ----
   `lg:grid-cols-5` / `lg:grid-cols-6` weren't compiled, so the footer fell back
   to md:grid-cols-2 and stacked 5 sections into 3 tall rows. This puts it back
   to a single row on desktop, which is the main fix for the oversized footer. */
@media (min-width: 1024px) {
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---- 2026 web-platform niceties ---- */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .float-animation, .float-delayed, .float-delay-2 { animation: none !important; }
}