/*
 * aqua.money — shared brand base for the CLIENT-facing pages (/welcome, /chat).
 *
 * Light only: white page, deep-green ink, a bright-green accent used ONLY as a highlight
 * (dot, bars, borders, fills) — never as small text on white (it fails contrast).
 * Colors are sampled from the supplied logo / hero image.
 *
 * SCOPED: everything lives under `.aq` (put class="aq" on <body>). The admin UI
 * (index.html), /login and /policy do NOT load this file and are never affected.
 */

.aq {
    /* palette */
    --aq-bg: #FFFFFF;
    --aq-soft: #F5F8F6;
    --aq-ink: #0E1A16;
    --aq-muted: #52625B;
    --aq-line: #E3E9E6;
    --aq-deep: #0B4039;          /* headlines, primary buttons (sampled from the hero headline) */
    --aq-deep-hover: #08332D;
    --aq-green: #0CE04F;         /* the bright dot — accent / fills only, NEVER small text */
    --aq-green-logo: #08AC43;    /* the logo's own dot */
    --aq-bubble-user: #D6F1DD;   /* WhatsApp-light green */
    --aq-bubble-bot: #F0F2F1;    /* light gray */
    --aq-danger: #B42318;
    --aq-danger-bg: #FEF3F2;
    --aq-ok: #0B6B3A;
    --aq-ok-bg: #ECFDF3;

    /* shape + motion */
    --aq-radius: 16px;
    --aq-radius-sm: 12px;
    --aq-shadow: 0 1px 2px rgba(14, 26, 22, .06), 0 8px 24px -12px rgba(14, 26, 22, .18);
    --aq-ease: cubic-bezier(.16, 1, .3, 1);
    --aq-font: 'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

    margin: 0;
    background: var(--aq-bg);
    color: var(--aq-ink);
    font-family: var(--aq-font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.aq *, .aq *::before, .aq *::after { box-sizing: border-box; }
.aq h1, .aq h2, .aq h3, .aq p { margin: 0; }
.aq :where(a) { color: var(--aq-deep); }   /* :where → zero specificity, so a button-link keeps its own colors */
.aq button, .aq input, .aq select, .aq textarea { font-family: inherit; }
.aq img { max-width: 100%; }
.aq [hidden] { display: none !important; }

/* keyboard focus is always visible */
.aq :focus-visible { outline: 3px solid rgba(11, 64, 57, .55); outline-offset: 2px; border-radius: 6px; }

.aq-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }

/* ---------- the logo: the wordmark, cropped to its own box (the supplied image has wide white margins) ---------- */
.aq-logo {
    display: block;
    aspect-ratio: 1088 / 144;          /* the wordmark's bounding box inside the 1254×1254 file */
    width: var(--aq-logo-w, 180px);    /* sized by WIDTH (it can then never be wider than its container) */
    max-width: 100%;
    background: url('/public/brand/aqua-money-logo.webp') no-repeat;
    background-size: 115.257% auto;    /* 1254 / 1088 */
    background-position: 52.41% 50%;
    mix-blend-mode: multiply;          /* the file has a white background — this makes it vanish on any light surface */
    direction: ltr;
}
.aq-logo--lg { --aq-logo-w: 230px; }
.aq-logo--xl { --aq-logo-w: min(300px, 78vw); }

/* the slogan — Latin, heavy, always left-to-right */
.aq-slogan {
    direction: ltr; unicode-bidi: isolate;
    font-weight: 800; letter-spacing: -.01em; text-transform: uppercase;
    color: var(--aq-deep); line-height: 1.02;
}

/* ---------- buttons ---------- */
.aq-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1.5px solid transparent;
    font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer;
    transition: transform .18s var(--aq-ease), background .18s, border-color .18s, box-shadow .18s;
}
.aq-btn:active { transform: scale(.98); }
.aq-btn--primary { background: var(--aq-deep); color: #fff; box-shadow: 0 6px 18px -8px rgba(11, 64, 57, .7); }
.aq-btn--primary:hover { background: var(--aq-deep-hover); }
.aq-btn--secondary { background: #fff; color: var(--aq-deep); border-color: var(--aq-deep); }
.aq-btn--secondary:hover { background: var(--aq-soft); }
.aq-btn--ghost { background: transparent; color: var(--aq-muted); }
.aq-btn--ghost:hover { color: var(--aq-ink); background: var(--aq-soft); }
.aq-btn--block { width: 100%; }
.aq-btn--sm { min-height: 40px; padding: 0 16px; font-size: 14.5px; }
.aq-btn:disabled { opacity: .55; cursor: default; transform: none; }

/* ---------- forms ---------- */
.aq-field { display: flex; flex-direction: column; gap: 6px; text-align: start; }
.aq-label { font-size: 14.5px; font-weight: 600; color: var(--aq-ink); }
.aq-hint { font-size: 13.5px; color: var(--aq-muted); }
.aq-input {
    width: 100%; min-height: 52px; padding: 12px 16px; font-size: 16px; /* 16px: iOS Safari must not zoom on focus */
    color: var(--aq-ink); background: #fff; border: 1.5px solid var(--aq-line); border-radius: var(--aq-radius-sm);
    outline: none; transition: border-color .15s, box-shadow .15s;
}
.aq-input::placeholder { color: #7B8A84; }
.aq-input:focus { border-color: var(--aq-deep); box-shadow: 0 0 0 4px rgba(11, 64, 57, .12); }
.aq-input:focus-visible { outline: none; }                      /* the border + soft ring above ARE the focus indicator — no second heavy outline */
.aq-input[aria-invalid="true"]:focus { border-color: var(--aq-danger); box-shadow: 0 0 0 4px rgba(180, 35, 24, .14); }
.aq-input[aria-invalid="true"] { border-color: var(--aq-danger); }
.aq-input--ltr { direction: ltr; text-align: start; }
.aq-error { font-size: 14px; color: var(--aq-danger); background: var(--aq-danger-bg); border-radius: var(--aq-radius-sm); padding: 10px 14px; text-align: start; }
.aq-notice { font-size: 14.5px; color: var(--aq-ok); background: var(--aq-ok-bg); border-radius: var(--aq-radius-sm); padding: 12px 14px; }

.aq-check { display: flex; gap: 12px; align-items: flex-start; text-align: start; font-size: 14.5px; color: var(--aq-ink); cursor: pointer; }
.aq-check input { width: 22px; height: 22px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--aq-deep); }

/* radio "cards" for the preparation questions */
.aq-choices { display: grid; gap: 10px; }
.aq-choice { position: relative; }
.aq-choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.aq-choice span {
    display: block; padding: 14px 16px; border: 1.5px solid var(--aq-line); border-radius: var(--aq-radius-sm);
    background: #fff; font-size: 15.5px; transition: border-color .15s, background .15s, box-shadow .15s;
}
.aq-choice input:checked + span { border-color: var(--aq-deep); background: var(--aq-bubble-user); font-weight: 600; }
.aq-choice input:focus-visible + span { outline: 3px solid rgba(11, 64, 57, .55); outline-offset: 2px; }
.aq-choice:hover span { border-color: #B8C7C0; }

/* ---------- surfaces ---------- */
.aq-card { background: #fff; border: 1px solid var(--aq-line); border-radius: var(--aq-radius); box-shadow: var(--aq-shadow); }

/* ---------- chat primitives (shared by the real chat and the landing-page phone) ---------- */
.aq-bubble {
    max-width: 82%; padding: 10px 14px 6px; border-radius: 18px; font-size: 15.5px; line-height: 1.6;
    white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere;
}
/* RTL chat, WhatsApp-style: the person's messages on the right in light green, AQUA's on the left in light gray */
.aq-bubble--user { align-self: flex-start; background: var(--aq-bubble-user); border-end-start-radius: 6px; }
.aq-bubble--bot { align-self: flex-end; background: var(--aq-bubble-bot); border-end-end-radius: 6px; }
/* English (i18n.js puts .aq--ltr on the body): the person's messages stay on the right, AQUA's on the left */
.aq--ltr .aq-bubble--user { align-self: flex-end; border-end-start-radius: 18px; border-end-end-radius: 6px; }
.aq--ltr .aq-bubble--bot { align-self: flex-start; border-end-end-radius: 18px; border-end-start-radius: 6px; }
.aq-lang { font: inherit; font-size: 13.5px; font-weight: 700; color: var(--aq-deep); background: none; border: 0; padding: 8px 10px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.aq-lang:focus-visible { outline: 3px solid var(--aq-green); outline-offset: 2px; border-radius: 6px; }
.aq-bubble b { font-weight: 700; }
.aq-bubble a { color: var(--aq-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.aq-bubble-time { display: block; margin-top: 2px; font-size: 11.5px; color: var(--aq-muted); text-align: end; direction: ltr; }

.aq-chip {
    flex-shrink: 0; padding: 9px 16px; font-size: 14px; font-weight: 600; color: var(--aq-deep); background: #fff;
    border: 1.5px solid var(--aq-line); border-radius: 999px; cursor: pointer; transition: all .15s;
}
.aq-chip:hover { background: var(--aq-deep); color: #fff; border-color: var(--aq-deep); }

/* ---------- motion: gentle, and fully off for people who ask for less ---------- */
@keyframes aq-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes aq-pop { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
.aq-rise { animation: aq-rise .6s var(--aq-ease) both; }
@media (prefers-reduced-motion: reduce) {
    .aq *, .aq *::before, .aq *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}