/*
 * My247Card MVP Screens — Shared Styles
 * Generated by UXMagic Copilot
 */

/* Chromium repaints `position: sticky` + `backdrop-filter` together on every
   scroll frame instead of compositing them once, which shows up as a visible
   flicker/strobe on the header while scrolling (worse on some Windows GPU
   drivers). Promoting the header to its own stable compositing layer stops
   the repaint-on-scroll and eliminates the flicker. */
.sticky.backdrop-blur {
  transform: translateZ(0);
  will-change: transform;
}

/* ── Theme (shared across all pages) ── */
:root {
  --background: #f8fafc;
  --foreground: #0f172a;
  --primary: #14b8a6;
  --primary-foreground: #ffffff;
  --secondary: #e6fffb;
  --secondary-foreground: #0f172a;
  --tertiary: #f59e0b;
  --muted: #eef2f7;
  --muted-foreground: #606f86;
  --accent: #fffbeb;
  --accent-foreground: #0f172a;
  --card: #ffffff;
  --card-foreground: #0f172a;
  --destructive: #dc2626;
  --border: #dce5ee;
  --input: #cbd5e1;
  --ring: #14b8a6;
  --radius: 0.75rem;
  --font-sans: Inter, sans-serif;
  --font-heading: Inter, sans-serif;
  --font-mono: JetBrains Mono, monospace;
  --shadow-offset-x: 0;
  --shadow-offset-y: 10;
  --shadow-blur: 30;
  --shadow-spread: -8;
  --shadow-color: rgba(15, 23, 42, 0.12);
  --tertiary-foreground: #0f172a;
  --contrast-exempt:
    --background, --card, --card-foreground, --foreground, --primary, --primary-foreground,
    --tertiary, --tertiary-foreground;
  --destructive-foreground: #edf9ff;
  --secondary-text: #627874;
  --accent-text: #777366;
  --destructive-text: #dc2626;
}

/* ==========================================================================
   CSS Reset & Base Styles
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

body {
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  -webkit-font-smoothing: antialiased;
}

/* Ensure no page wrapper or layout container can produce horizontal wobble */
[data-page],
.min-h-screen,
main,
form,
section,
article {
  max-width: 100%;
}

/* Prevent double-tap zoom delay & accidental double-tap zoom bounce on all form elements and triggers */
input,
select,
textarea,
button,
label,
summary {
  touch-action: manipulation;
}

/* ==========================================================================
   Mobile Form Zoom & Horizontal Wobble Prevention
   iOS Safari automatically forces a zoom-in when any input, select, or
   textarea has a font-size < 16px. Once zoomed in, the entire page becomes
   wider than the screen and causes severe horizontal wobbling while typing
   or scrolling.
   Enforcing a minimum font-size of 16px on mobile viewports (< 768px)
   guarantees that iOS never auto-zooms or wobbles the form fields.
   ========================================================================== */
@media screen and (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
  select,
  textarea {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  /* Specific mobile adjustments for compact combo/search boxes */
  .phone-country-search,
  input[role="combobox"] {
    font-size: 16px !important;
  }
}

/* Ensure dropdowns, combos, and popovers never exceed viewport width */
[id*="PhoneDropdown"],
[id*="Suggest"],
[data-combobox-list],
[role="listbox"] {
  max-width: calc(100vw - 2rem) !important;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── Public Card View page-specific styles ── */
[data-page='public-card-view'] .brand-gradient {
  background-image: linear-gradient(135deg, var(--primary), var(--accent));
}

[data-page='public-card-view'] .shadow-theme {
  box-shadow: calc(var(--shadow-offset-x, 0) * 1px) calc(var(--shadow-offset-y, 10) * 1px)
    calc(var(--shadow-blur, 30) * 1px) calc(var(--shadow-spread, -8) * 1px)
    var(--shadow-color, rgba(15, 23, 42, 0.12));
}

[data-page="public-card-view"] /* Brand colours used as TEXT resolve to a legibility-adjusted variant.
       *
       * --primary and friends are tuned to look right as FILLS; painted as text
       * on the page they are routinely too light — a #16A34A "+8.4%" on a white
       * card measures 3.3:1. The --*-text tokens are the same hue and chroma
       * with lightness nudged just far enough to clear AA on the page and card
       * surfaces,
[data-page="public-card-view"] so fills keep the exact brand colour while text becomes
       * readable.
       *
       * This block is intentionally UNLAYERED: unlayered declarations outrank
       * every cascade layer,
[data-page="public-card-view"] so these beat Tailwind's own text-* utilities. The
       * var() fallbacks leave documents that predate the derived tokens
       * rendering exactly as before.
       */
      .text-primary {
  color: var(--primary-text, var(--primary));
}

[data-page='public-card-view'] .text-secondary {
  color: var(--secondary-text, var(--secondary));
}

[data-page='public-card-view'] .text-tertiary {
  color: var(--tertiary-text, var(--tertiary));
}

[data-page='public-card-view'] .text-accent {
  color: var(--accent-text, var(--accent));
}

[data-page='public-card-view'] .text-destructive {
  color: var(--destructive-text, var(--destructive));
}

/* ── Register / Create Card page-specific styles ── */
[data-page='register-create-card'] .brand-gradient {
  background-image: linear-gradient(135deg, var(--primary), var(--accent));
}

[data-page='register-create-card'] .shadow-theme {
  box-shadow: calc(var(--shadow-offset-x, 0) * 1px) calc(var(--shadow-offset-y, 10) * 1px)
    calc(var(--shadow-blur, 30) * 1px) calc(var(--shadow-spread, -8) * 1px)
    var(--shadow-color, rgba(15, 23, 42, 0.12));
}

[data-page="register-create-card"] /* Brand colours used as TEXT resolve to a legibility-adjusted variant.
       *
       * --primary and friends are tuned to look right as FILLS; painted as text
       * on the page they are routinely too light — a #16A34A "+8.4%" on a white
       * card measures 3.3:1. The --*-text tokens are the same hue and chroma
       * with lightness nudged just far enough to clear AA on the page and card
       * surfaces,
[data-page="register-create-card"] so fills keep the exact brand colour while text becomes
       * readable.
       *
       * This block is intentionally UNLAYERED: unlayered declarations outrank
       * every cascade layer,
[data-page="register-create-card"] so these beat Tailwind's own text-* utilities. The
       * var() fallbacks leave documents that predate the derived tokens
       * rendering exactly as before.
       */
      .text-primary {
  color: var(--primary-text, var(--primary));
}

[data-page='register-create-card'] .text-secondary {
  color: var(--secondary-text, var(--secondary));
}

[data-page='register-create-card'] .text-tertiary {
  color: var(--tertiary-text, var(--tertiary));
}

[data-page='register-create-card'] .text-accent {
  color: var(--accent-text, var(--accent));
}

[data-page='register-create-card'] .text-destructive {
  color: var(--destructive-text, var(--destructive));
}

/* ── Card Details Editor page-specific styles ── */
[data-page='card-details-editor'] .brand-gradient {
  background-image: linear-gradient(135deg, var(--primary), var(--accent));
}

[data-page='card-details-editor'] .shadow-theme {
  box-shadow: calc(var(--shadow-offset-x, 0) * 1px) calc(var(--shadow-offset-y, 10) * 1px)
    calc(var(--shadow-blur, 30) * 1px) calc(var(--shadow-spread, -8) * 1px)
    var(--shadow-color, rgba(15, 23, 42, 0.12));
}

[data-page="card-details-editor"] /* Brand colours used as TEXT resolve to a legibility-adjusted variant.
       *
       * --primary and friends are tuned to look right as FILLS; painted as text
       * on the page they are routinely too light — a #16A34A "+8.4%" on a white
       * card measures 3.3:1. The --*-text tokens are the same hue and chroma
       * with lightness nudged just far enough to clear AA on the page and card
       * surfaces,
[data-page="card-details-editor"] so fills keep the exact brand colour while text becomes
       * readable.
       *
       * This block is intentionally UNLAYERED: unlayered declarations outrank
       * every cascade layer,
[data-page="card-details-editor"] so these beat Tailwind's own text-* utilities. The
       * var() fallbacks leave documents that predate the derived tokens
       * rendering exactly as before.
       */
      .text-primary {
  color: var(--primary-text, var(--primary));
}

[data-page='card-details-editor'] .text-secondary {
  color: var(--secondary-text, var(--secondary));
}

[data-page='card-details-editor'] .text-tertiary {
  color: var(--tertiary-text, var(--tertiary));
}

[data-page='card-details-editor'] .text-accent {
  color: var(--accent-text, var(--accent));
}

[data-page='card-details-editor'] .text-destructive {
  color: var(--destructive-text, var(--destructive));
}

/* ── Payment page-specific styles ── */
[data-page='payment'] .brand-gradient {
  background-image: linear-gradient(135deg, var(--primary), var(--accent));
}

[data-page='payment'] .shadow-theme {
  box-shadow: calc(var(--shadow-offset-x, 0) * 1px) calc(var(--shadow-offset-y, 10) * 1px)
    calc(var(--shadow-blur, 30) * 1px) calc(var(--shadow-spread, -8) * 1px)
    var(--shadow-color, rgba(15, 23, 42, 0.12));
}

[data-page="payment"] /* Brand colours used as TEXT resolve to a legibility-adjusted variant.
       *
       * --primary and friends are tuned to look right as FILLS; painted as text
       * on the page they are routinely too light — a #16A34A "+8.4%" on a white
       * card measures 3.3:1. The --*-text tokens are the same hue and chroma
       * with lightness nudged just far enough to clear AA on the page and card
       * surfaces,
[data-page="payment"] so fills keep the exact brand colour while text becomes
       * readable.
       *
       * This block is intentionally UNLAYERED: unlayered declarations outrank
       * every cascade layer,
[data-page="payment"] so these beat Tailwind's own text-* utilities. The
       * var() fallbacks leave documents that predate the derived tokens
       * rendering exactly as before.
       */
      .text-primary {
  color: var(--primary-text, var(--primary));
}

[data-page='payment'] .text-secondary {
  color: var(--secondary-text, var(--secondary));
}

[data-page='payment'] .text-tertiary {
  color: var(--tertiary-text, var(--tertiary));
}

[data-page='payment'] .text-accent {
  color: var(--accent-text, var(--accent));
}

[data-page='payment'] .text-destructive {
  color: var(--destructive-text, var(--destructive));
}

/* ── Payment Success + Install PWA page-specific styles ── */
[data-page='payment-success-install-pwa'] .brand-gradient {
  background-image: linear-gradient(135deg, var(--primary), var(--accent));
}

[data-page='payment-success-install-pwa'] .shadow-theme {
  box-shadow: calc(var(--shadow-offset-x, 0) * 1px) calc(var(--shadow-offset-y, 10) * 1px)
    calc(var(--shadow-blur, 30) * 1px) calc(var(--shadow-spread, -8) * 1px)
    var(--shadow-color, rgba(15, 23, 42, 0.12));
}

[data-page="payment-success-install-pwa"] /* Brand colours used as TEXT resolve to a legibility-adjusted variant.
       *
       * --primary and friends are tuned to look right as FILLS; painted as text
       * on the page they are routinely too light — a #16A34A "+8.4%" on a white
       * card measures 3.3:1. The --*-text tokens are the same hue and chroma
       * with lightness nudged just far enough to clear AA on the page and card
       * surfaces,
[data-page="payment-success-install-pwa"] so fills keep the exact brand colour while text becomes
       * readable.
       *
       * This block is intentionally UNLAYERED: unlayered declarations outrank
       * every cascade layer,
[data-page="payment-success-install-pwa"] so these beat Tailwind's own text-* utilities. The
       * var() fallbacks leave documents that predate the derived tokens
       * rendering exactly as before.
       */
      .text-primary {
  color: var(--primary-text, var(--primary));
}

[data-page='payment-success-install-pwa'] .text-secondary {
  color: var(--secondary-text, var(--secondary));
}

[data-page='payment-success-install-pwa'] .text-tertiary {
  color: var(--tertiary-text, var(--tertiary));
}

[data-page='payment-success-install-pwa'] .text-accent {
  color: var(--accent-text, var(--accent));
}

[data-page='payment-success-install-pwa'] .text-destructive {
  color: var(--destructive-text, var(--destructive));
}

/* ── My Card / Home page-specific styles ── */
[data-page='my-card-home'] .brand-gradient {
  background-image: linear-gradient(135deg, var(--primary), var(--accent));
}

[data-page='my-card-home'] .shadow-theme {
  box-shadow: calc(var(--shadow-offset-x, 0) * 1px) calc(var(--shadow-offset-y, 10) * 1px)
    calc(var(--shadow-blur, 30) * 1px) calc(var(--shadow-spread, -8) * 1px)
    var(--shadow-color, rgba(15, 23, 42, 0.12));
}

[data-page="my-card-home"] /* Brand colours used as TEXT resolve to a legibility-adjusted variant.
       *
       * --primary and friends are tuned to look right as FILLS; painted as text
       * on the page they are routinely too light — a #16A34A "+8.4%" on a white
       * card measures 3.3:1. The --*-text tokens are the same hue and chroma
       * with lightness nudged just far enough to clear AA on the page and card
       * surfaces,
[data-page="my-card-home"] so fills keep the exact brand colour while text becomes
       * readable.
       *
       * This block is intentionally UNLAYERED: unlayered declarations outrank
       * every cascade layer,
[data-page="my-card-home"] so these beat Tailwind's own text-* utilities. The
       * var() fallbacks leave documents that predate the derived tokens
       * rendering exactly as before.
       */
      .text-primary {
  color: var(--primary-text, var(--primary));
}

[data-page='my-card-home'] .text-secondary {
  color: var(--secondary-text, var(--secondary));
}

[data-page='my-card-home'] .text-tertiary {
  color: var(--tertiary-text, var(--tertiary));
}

[data-page='my-card-home'] .text-accent {
  color: var(--accent-text, var(--accent));
}

[data-page='my-card-home'] .text-destructive {
  color: var(--destructive-text, var(--destructive));
}

/* ── Customers page-specific styles ── */
[data-page='customers'] .brand-gradient {
  background-image: linear-gradient(135deg, var(--primary), var(--accent));
}

[data-page='customers'] .shadow-theme {
  box-shadow: calc(var(--shadow-offset-x, 0) * 1px) calc(var(--shadow-offset-y, 10) * 1px)
    calc(var(--shadow-blur, 30) * 1px) calc(var(--shadow-spread, -8) * 1px)
    var(--shadow-color, rgba(15, 23, 42, 0.12));
}

[data-page="customers"] /* Brand colours used as TEXT resolve to a legibility-adjusted variant.
       *
       * --primary and friends are tuned to look right as FILLS; painted as text
       * on the page they are routinely too light — a #16A34A "+8.4%" on a white
       * card measures 3.3:1. The --*-text tokens are the same hue and chroma
       * with lightness nudged just far enough to clear AA on the page and card
       * surfaces,
[data-page="customers"] so fills keep the exact brand colour while text becomes
       * readable.
       *
       * This block is intentionally UNLAYERED: unlayered declarations outrank
       * every cascade layer,
[data-page="customers"] so these beat Tailwind's own text-* utilities. The
       * var() fallbacks leave documents that predate the derived tokens
       * rendering exactly as before.
       */
      .text-primary {
  color: var(--primary-text, var(--primary));
}

[data-page='customers'] .text-secondary {
  color: var(--secondary-text, var(--secondary));
}

[data-page='customers'] .text-tertiary {
  color: var(--tertiary-text, var(--tertiary));
}

[data-page='customers'] .text-accent {
  color: var(--accent-text, var(--accent));
}

[data-page='customers'] .text-destructive {
  color: var(--destructive-text, var(--destructive));
}

/* ── Income page-specific styles ── */
[data-page='income'] .brand-gradient {
  background-image: linear-gradient(135deg, var(--primary), var(--accent));
}

[data-page='income'] .shadow-theme {
  box-shadow: calc(var(--shadow-offset-x, 0) * 1px) calc(var(--shadow-offset-y, 10) * 1px)
    calc(var(--shadow-blur, 30) * 1px) calc(var(--shadow-spread, -8) * 1px)
    var(--shadow-color, rgba(15, 23, 42, 0.12));
}

[data-page="income"] /* Brand colours used as TEXT resolve to a legibility-adjusted variant.
       *
       * --primary and friends are tuned to look right as FILLS; painted as text
       * on the page they are routinely too light — a #16A34A "+8.4%" on a white
       * card measures 3.3:1. The --*-text tokens are the same hue and chroma
       * with lightness nudged just far enough to clear AA on the page and card
       * surfaces,
[data-page="income"] so fills keep the exact brand colour while text becomes
       * readable.
       *
       * This block is intentionally UNLAYERED: unlayered declarations outrank
       * every cascade layer,
[data-page="income"] so these beat Tailwind's own text-* utilities. The
       * var() fallbacks leave documents that predate the derived tokens
       * rendering exactly as before.
       */
      .text-primary {
  color: var(--primary-text, var(--primary));
}

[data-page='income'] .text-secondary {
  color: var(--secondary-text, var(--secondary));
}

[data-page='income'] .text-tertiary {
  color: var(--tertiary-text, var(--tertiary));
}

[data-page='income'] .text-accent {
  color: var(--accent-text, var(--accent));
}

[data-page='income'] .text-destructive {
  color: var(--destructive-text, var(--destructive));
}

/* ── Analysts / Team page-specific styles ── */
[data-page='analysts-team'] .brand-gradient {
  background-image: linear-gradient(135deg, var(--primary), var(--accent));
}

[data-page='analysts-team'] .shadow-theme {
  box-shadow: calc(var(--shadow-offset-x, 0) * 1px) calc(var(--shadow-offset-y, 10) * 1px)
    calc(var(--shadow-blur, 30) * 1px) calc(var(--shadow-spread, -8) * 1px)
    var(--shadow-color, rgba(15, 23, 42, 0.12));
}

[data-page="analysts-team"] /* Brand colours used as TEXT resolve to a legibility-adjusted variant.
       *
       * --primary and friends are tuned to look right as FILLS; painted as text
       * on the page they are routinely too light — a #16A34A "+8.4%" on a white
       * card measures 3.3:1. The --*-text tokens are the same hue and chroma
       * with lightness nudged just far enough to clear AA on the page and card
       * surfaces,
[data-page="analysts-team"] so fills keep the exact brand colour while text becomes
       * readable.
       *
       * This block is intentionally UNLAYERED: unlayered declarations outrank
       * every cascade layer,
[data-page="analysts-team"] so these beat Tailwind's own text-* utilities. The
       * var() fallbacks leave documents that predate the derived tokens
       * rendering exactly as before.
       */
      .text-primary {
  color: var(--primary-text, var(--primary));
}

[data-page='analysts-team'] .text-secondary {
  color: var(--secondary-text, var(--secondary));
}

[data-page='analysts-team'] .text-tertiary {
  color: var(--tertiary-text, var(--tertiary));
}

[data-page='analysts-team'] .text-accent {
  color: var(--accent-text, var(--accent));
}

[data-page='analysts-team'] .text-destructive {
  color: var(--destructive-text, var(--destructive));
}

/* ── Account & Bank Details page-specific styles ── */
[data-page='account-bank-details'] .brand-gradient {
  background-image: linear-gradient(135deg, var(--primary), var(--accent));
}

[data-page='account-bank-details'] .shadow-theme {
  box-shadow: calc(var(--shadow-offset-x, 0) * 1px) calc(var(--shadow-offset-y, 10) * 1px)
    calc(var(--shadow-blur, 30) * 1px) calc(var(--shadow-spread, -8) * 1px)
    var(--shadow-color, rgba(15, 23, 42, 0.12));
}

[data-page="account-bank-details"] /* Brand colours used as TEXT resolve to a legibility-adjusted variant.
       *
       * --primary and friends are tuned to look right as FILLS; painted as text
       * on the page they are routinely too light — a #16A34A "+8.4%" on a white
       * card measures 3.3:1. The --*-text tokens are the same hue and chroma
       * with lightness nudged just far enough to clear AA on the page and card
       * surfaces,
[data-page="account-bank-details"] so fills keep the exact brand colour while text becomes
       * readable.
       *
       * This block is intentionally UNLAYERED: unlayered declarations outrank
       * every cascade layer,
[data-page="account-bank-details"] so these beat Tailwind's own text-* utilities. The
       * var() fallbacks leave documents that predate the derived tokens
       * rendering exactly as before.
       */
      .text-primary {
  color: var(--primary-text, var(--primary));
}

[data-page='account-bank-details'] .text-secondary {
  color: var(--secondary-text, var(--secondary));
}

[data-page='account-bank-details'] .text-tertiary {
  color: var(--tertiary-text, var(--tertiary));
}

[data-page='account-bank-details'] .text-accent {
  color: var(--accent-text, var(--accent));
}

/* ── About Us page-specific styles ── */
[data-page='about-us'] .brand-gradient {
  background-image: linear-gradient(135deg, var(--primary), var(--accent));
}

[data-page='about-us'] .shadow-theme {
  box-shadow: calc(var(--shadow-offset-x, 0) * 1px) calc(var(--shadow-offset-y, 10) * 1px)
    calc(var(--shadow-blur, 30) * 1px) calc(var(--shadow-spread, -8) * 1px)
    var(--shadow-color, rgba(15, 23, 42, 0.12));
}

[data-page='about-us'] .text-primary {
  color: var(--primary-text, var(--primary));
}

[data-page='about-us'] .text-secondary {
  color: var(--secondary-text, var(--secondary));
}

[data-page='about-us'] .text-tertiary {
  color: var(--tertiary-text, var(--tertiary));
}

[data-page='about-us'] .text-accent {
  color: var(--accent-text, var(--accent));
}

[data-page='about-us'] .text-destructive {
  color: var(--destructive-text, var(--destructive));
}

/* ── Contact Us page-specific styles ── */
[data-page='contact-us'] .brand-gradient {
  background-image: linear-gradient(135deg, var(--primary), var(--accent));
}

[data-page='contact-us'] .shadow-theme {
  box-shadow: calc(var(--shadow-offset-x, 0) * 1px) calc(var(--shadow-offset-y, 10) * 1px)
    calc(var(--shadow-blur, 30) * 1px) calc(var(--shadow-spread, -8) * 1px)
    var(--shadow-color, rgba(15, 23, 42, 0.12));
}

[data-page='contact-us'] .text-primary {
  color: var(--primary-text, var(--primary));
}

[data-page='contact-us'] .text-secondary {
  color: var(--secondary-text, var(--secondary));
}

[data-page='contact-us'] .text-tertiary {
  color: var(--tertiary-text, var(--tertiary));
}

[data-page='contact-us'] .text-accent {
  color: var(--accent-text, var(--accent));
}

[data-page='contact-us'] .text-destructive {
  color: var(--destructive-text, var(--destructive));
}

/* ── Terms page-specific styles ── */
[data-page='terms'] .brand-gradient {
  background-image: linear-gradient(135deg, var(--primary), var(--accent));
}

[data-page='terms'] .shadow-theme {
  box-shadow: calc(var(--shadow-offset-x, 0) * 1px) calc(var(--shadow-offset-y, 10) * 1px)
    calc(var(--shadow-blur, 30) * 1px) calc(var(--shadow-spread, -8) * 1px)
    var(--shadow-color, rgba(15, 23, 42, 0.12));
}

[data-page='terms'] .text-primary {
  color: var(--primary-text, var(--primary));
}

[data-page='terms'] .text-secondary {
  color: var(--secondary-text, var(--secondary));
}

[data-page='terms'] .text-tertiary {
  color: var(--tertiary-text, var(--tertiary));
}

[data-page='terms'] .text-accent {
  color: var(--accent-text, var(--accent));
}

[data-page='terms'] .text-destructive {
  color: var(--destructive-text, var(--destructive));
}

/* ── Privacy page-specific styles ── */
[data-page='privacy'] .brand-gradient {
  background-image: linear-gradient(135deg, var(--primary), var(--accent));
}

[data-page='privacy'] .shadow-theme {
  box-shadow: calc(var(--shadow-offset-x, 0) * 1px) calc(var(--shadow-offset-y, 10) * 1px)
    calc(var(--shadow-blur, 30) * 1px) calc(var(--shadow-spread, -8) * 1px)
    var(--shadow-color, rgba(15, 23, 42, 0.12));
}

[data-page='privacy'] .text-primary {
  color: var(--primary-text, var(--primary));
}

[data-page='privacy'] .text-secondary {
  color: var(--secondary-text, var(--secondary));
}

[data-page='privacy'] .text-tertiary {
  color: var(--tertiary-text, var(--tertiary));
}

[data-page='privacy'] .text-accent {
  color: var(--accent-text, var(--accent));
}

[data-page='privacy'] .text-destructive {
  color: var(--destructive-text, var(--destructive));
}

/* ── Cookies page-specific styles ── */
[data-page='cookies'] .brand-gradient {
  background-image: linear-gradient(135deg, var(--primary), var(--accent));
}

[data-page='cookies'] .shadow-theme {
  box-shadow: calc(var(--shadow-offset-x, 0) * 1px) calc(var(--shadow-offset-y, 10) * 1px)
    calc(var(--shadow-blur, 30) * 1px) calc(var(--shadow-spread, -8) * 1px)
    var(--shadow-color, rgba(15, 23, 42, 0.12));
}

[data-page='cookies'] .text-primary {
  color: var(--primary-text, var(--primary));
}

[data-page='cookies'] .text-secondary {
  color: var(--secondary-text, var(--secondary));
}

[data-page='cookies'] .text-tertiary {
  color: var(--tertiary-text, var(--tertiary));
}

[data-page='cookies'] .text-accent {
  color: var(--accent-text, var(--accent));
}

[data-page='cookies'] .text-destructive {
  color: var(--destructive-text, var(--destructive));
}

/* ── AI Policy page-specific styles ── */
[data-page='ai-policy'] .brand-gradient {
  background-image: linear-gradient(135deg, var(--primary), var(--accent));
}

[data-page='ai-policy'] .shadow-theme {
  box-shadow: calc(var(--shadow-offset-x, 0) * 1px) calc(var(--shadow-offset-y, 10) * 1px)
    calc(var(--shadow-blur, 30) * 1px) calc(var(--shadow-spread, -8) * 1px)
    var(--shadow-color, rgba(15, 23, 42, 0.12));
}

[data-page='ai-policy'] .text-primary {
  color: var(--primary-text, var(--primary));
}

[data-page='ai-policy'] .text-secondary {
  color: var(--secondary-text, var(--secondary));
}

[data-page='ai-policy'] .text-tertiary {
  color: var(--tertiary-text, var(--tertiary));
}

[data-page='ai-policy'] .text-accent {
  color: var(--accent-text, var(--accent));
}

[data-page='ai-policy'] .text-destructive {
  color: var(--destructive-text, var(--destructive));
}

/* ==========================================================================
   Sticky mobile header + fixed bottom tab bar
   Added 2026-09-09. Applies to the five app screens that carry the bottom
   nav. Left unlayered on purpose so it overrides Tailwind's position utils
   (.absolute / .bottom-0) the same way the text-* block above does.
   ========================================================================== */

/* The page's inline "AI help" script adds .overflow-x-hidden to .min-h-screen,
   which makes CSS compute overflow-y to `auto` — that turns the wrapper into a
   scroll container and breaks `position: sticky` (it would stick to the wrapper
   instead of the viewport). `overflow-x: clip` clips the same way but leaves
   overflow-y as `visible`, so the viewport stays the scroll context. */
[data-page] .min-h-screen.overflow-x-hidden {
  overflow-x: clip;
}

/* --- fixed bottom tab bar (was position:absolute, so it sat below the fold) --- */
[data-page] nav.absolute.bottom-0.inset-x-0 {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* --- sticky page header --- */
/* my-card-home's header is a sibling of main, not nested inside it, so it
   can't match `main > header:first-child` — it's made sticky directly via
   Tailwind classes on the element instead (see My Card - Home.html). */
[data-page='customers'] main > header:first-child,
[data-page='income'] main > header:first-child,
[data-page='analysts-team'] main > header:first-child,
[data-page='account-bank-details'] main > header:first-child {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  /* bleed past main's 1.25rem (px-5) side padding so scrolled content
     doesn't show through beside the header */
  margin: 0 -1.25rem;
  padding: 0.75rem 1.25rem;
  background: color-mix(in srgb, var(--background) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  box-shadow:
    0 1px 0 var(--border),
    0 6px 16px -12px rgba(15, 23, 42, 0.4);
  /* see the .sticky.backdrop-blur comment above — same sticky+blur
     repaint-on-scroll flicker, fixed the same way. */
  transform: translateZ(0);
  will-change: transform;
}

/* Note: about-us, contact-us, terms, privacy, cookies and ai-policy don't use
   this CSS-driven approach — their headers sit outside <main> (siblings, like
   Register - Create Card) and are made sticky directly via Tailwind classes
   on the element instead. See About Us.html etc. */

/* trim main's pt-7 so the sticky header starts near the top edge */
[data-page='my-card-home'] main,
[data-page='customers'] main,
[data-page='income'] main,
[data-page='analysts-team'] main,
[data-page='account-bank-details'] main {
  padding-top: 0.75rem;
}

/* browsers without color-mix still get a solid header background */
@supports not (background: color-mix(in srgb, red, blue)) {
  [data-page='customers'] main > header:first-child,
  [data-page='income'] main > header:first-child,
  [data-page='analysts-team'] main > header:first-child,
  [data-page='account-bank-details'] main > header:first-child {
    background: var(--background);
  }
}

[data-page='account-bank-details'] .text-destructive {
  color: var(--destructive-text, var(--destructive));
}

/* ==========================================================================
   Primary CTA buttons/links use white label text everywhere — several pages
   ship the markup with an explicit `text-foreground`, which we override here
   so every teal button reads consistently. Icons inherit the white.
   ========================================================================== */
button.bg-primary,
a.bg-primary,
[role='button'].bg-primary {
  color: var(--primary-foreground, #fff) !important;
}
button.bg-primary iconify-icon,
a.bg-primary iconify-icon {
  color: inherit !important;
}

/* Reserve space for icons before the (async) iconify-icon element upgrades,
   so nothing reflows / pops in when the icon font resolves. */
iconify-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
}

/* Voice Contact Capture's mic button — two staggered rings expand outward
   and fade, signalling "tap to start listening". Scoped to [data-mic] so it
   only affects that one button. */
[data-mic] {
  position: relative;
}
[data-mic]::before,
[data-mic]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: #D97706;
  opacity: 0;
  pointer-events: none;
}
[data-mic].mic-active::before,
[data-mic].mic-active::after {
  opacity: 0.35;
  animation: mic-pulse 2.2s ease-out infinite;
}
[data-mic].mic-active::after {
  animation-delay: 1.1s;
}
@keyframes mic-pulse {
  0% { transform: scale(1); opacity: 0.35; }
  100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  [data-mic].mic-active::before,
  [data-mic].mic-active::after {
    animation: none;
    display: none;
  }
}

/* ── Product Splash Screen ── */
.m247-splash {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 38%, #FFFFFF 0%, #F4FBFA 50%, #E1F4F1 100%);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  animation: m247SplashAutoDismiss 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes m247SplashAutoDismiss {
  0%, 70% { opacity: 1; pointer-events: auto; }
  95% { opacity: 0; pointer-events: auto; }
  100% { opacity: 0; pointer-events: none; visibility: hidden; }
}
.m247-splash.m247-splash-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.m247-splash-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  max-width: 90vw;
}
.m247-splash-logo-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.75rem;
}
.m247-splash-glow {
  position: absolute;
  inset: -14px;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(20, 184, 166, 0.28) 0%, rgba(20, 184, 166, 0) 70%);
  filter: blur(14px);
  animation: m247PulseGlow 2.2s ease-in-out infinite;
}
.m247-splash-card {
  position: relative;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 1.5rem;
  background: #FFFFFF;
  box-shadow: 0 16px 36px -6px rgba(15, 118, 110, 0.16), 0 0 0 1px rgba(20, 184, 166, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem;
  animation: m247PopIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@media (min-width: 640px) {
  .m247-splash-card {
    width: 7.5rem;
    height: 7.5rem;
    border-radius: 1.75rem;
    padding: 1rem;
  }
}
.m247-splash-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.m247-splash-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: m247FadeUp 0.65s 0.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.m247-splash-title {
  font-family: Inter, system-ui, sans-serif;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0F172A;
  margin: 0;
  line-height: 1.15;
}
@media (min-width: 640px) {
  .m247-splash-title {
    font-size: 2.35rem;
  }
}
.m247-splash-title span {
  color: #087E8B;
}
.m247-splash-slogan {
  font-size: 0.95rem;
  font-weight: 500;
  color: #475569;
  margin: 0.5rem 0 0 0;
  letter-spacing: 0.01em;
  line-height: 1.45;
  max-width: 20rem;
}
@media (min-width: 640px) {
  .m247-splash-slogan {
    font-size: 1.05rem;
    max-width: 24rem;
  }
}
.m247-splash-loader {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  animation: m247FadeUp 0.65s 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.m247-splash-track {
  width: 11rem;
  height: 0.35rem;
  background: rgba(203, 213, 225, 0.75);
  border-radius: 9999px;
  overflow: hidden;
}
@media (min-width: 640px) {
  .m247-splash-track {
    width: 13rem;
    height: 0.375rem;
  }
}
.m247-splash-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #087E8B 0%, #14B8A6 60%, #F59E0B 100%);
  border-radius: 9999px;
  animation: m247FillBar 1.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.m247-splash-status {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94A3B8;
}
.m247-splash-footer {
  position: absolute;
  bottom: 1.5rem;
  inset-x: 0;
  text-align: center;
  padding: 0 1rem;
  animation: m247FadeUp 0.65s 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.m247-splash-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #64748B;
  padding: 0.35rem 0.85rem;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 9999px;
  backdrop-filter: blur(4px);
}
.m247-splash-badge-icon {
  color: #087E8B;
  font-size: 0.875rem;
}
@keyframes m247PopIn {
  0% { transform: scale(0.82); opacity: 0; }
  70% { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes m247FadeUp {
  0% { transform: translateY(8px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes m247FillBar {
  0% { width: 0%; }
  45% { width: 65%; }
  80% { width: 90%; }
  100% { width: 100%; }
}
@keyframes m247PulseGlow {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.1); }
}

/* Desktop bottom navigation: turn the phone tab bar into a horizontal nav bar (phones unchanged) */
@media (min-width: 1024px) {
  nav[class*="bottom-0"] > div.h-16.max-w-md {
    max-width: 56rem;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.875rem;
  }
  nav[class*="bottom-0"] > div.h-16.max-w-md > button,
  nav[class*="bottom-0"] > div.h-16.max-w-md > details > summary {
    flex-direction: row;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    border-radius: 9999px;
    transition: background-color .15s ease, color .15s ease;
  }
  nav[class*="bottom-0"] > div.h-16.max-w-md > button:hover,
  nav[class*="bottom-0"] > div.h-16.max-w-md > details > summary:hover {
    background-color: var(--muted, #f1f5f9);
    color: var(--foreground, #0f172a);
  }
  nav[class*="bottom-0"] > div.h-16.max-w-md > button.text-foreground {
    background-color: var(--secondary, #e6f7f5);
    color: var(--primary, #14b8a6);
  }
  nav[class*="bottom-0"] > div.h-16.max-w-md > details > div {
    bottom: calc(100% + 0.75rem);
  }
}



/* ==========================================================================
   Mobile navigation drawers hidden on tablet & desktop (min-width: 768px)
   ========================================================================== */
@media (min-width: 768px) {
  [data-mobile-menu-panel],
  #mobileNavAbout,
  #mobileNavLegal,
  #mobileNavTerms,
  #mobileNavPrivacy,
  #mobileNavCookies,
  #mobileNavAIPolicy,
  #mobileNavContact,
  [id^="mobileNav"],
  [data-page] [data-mobile-menu-panel] {
    display: none !important;
  }
}

/* ==========================================================================
   Desktop Grid Alignment: Headers, Main, and Footers (min-width: 1024px)
   Aligns header content, main container, and footer to the exact same 80% width.
   ========================================================================== */
@media (min-width: 1024px) {
  html {
    scrollbar-gutter: stable;
  }

  /* Responsive 80% container on desktop across all pages */
  [data-page] main {
    width: 80% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* Landing page header */
  [data-page="landing-login"] header {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    width: 100% !important;
  }
  [data-page="landing-login"] header > div:first-child,
  [data-page="landing-login"] header > div[class*="80%"] {
    width: 80% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    min-height: 4.5rem;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  [data-page="landing-login"] header > [data-mobile-menu-panel],
  [data-mobile-menu-panel] {
    display: none !important;
  }

  /* All other page headers (My Card, Analysis, Customers, Contact Us, About Us, Terms, Privacy, Cookies, AI Policy, etc.):
     Header itself is 80% width centered to perfectly match main. */
  [data-page]:not([data-page="landing-login"]) > div > header,
  [data-page]:not([data-page="landing-login"]) > header,
  [data-page]:not([data-page="landing-login"]) header {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    width: 80% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    min-height: 4.5rem;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: color-mix(in srgb, var(--background, #f8fafc) 92%, transparent) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  [data-page]:not([data-page="landing-login"]) header > div.mx-auto,
  [data-page]:not([data-page="landing-login"]) header > div[class*="80%"] {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* Same-size header logo on every page */
  [data-page] header img[alt*="logo" i] {
    width: 3.5rem !important;
    height: 3.5rem !important;
    object-fit: contain !important;
  }

  /* Headers nested directly inside main (like Customers, Income) take 100% of main (which is 80% width) */
  [data-page] main > header:first-child {
    width: 100% !important;
    max-width: none !important;
    margin-bottom: 1.25rem !important;
    padding-top: 0 !important;
  }
}