/* ============================================================
   Design: calm, premium automotive-tech utility. Off-white page,
   white card, one blue accent for action/selection, green used
   only for the verified/success signal. No illustrations, no
   multi-color noise — the goal is "understood in 2-3 seconds."
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
/* Oswald — condensed, blocky, uniform-stroke geometric sans, used only
   for the plate badge's characters below. It's the closest widely
   available Google Font to the real embossed plate lettering (Inter
   reads as a normal UI font, too soft/rounded for a plate). */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600;700&display=swap');

:root {
    --color-bg:        #ECF0F3;
    --color-card:      #ECF0F3;
    --color-neumorph-light: #FFFFFF;
    --color-neumorph-dark:  #D1D9E6;
    --color-input-bg:  #ECF0F3;
    --color-ink:       #171F30;
    --color-ink-soft:  #5B6472;
    --color-muted:     #8890A0;
    --color-border:    #D9DEE8;
    --color-line:      #E4E7EE;
    --color-accent:    #3457E8;
    --color-accent-2:  #2544C4;
    --color-accent-bg: #EDF1FE;
    --color-success:   #1E9E5A;
    --color-success-bg:#E7F6ED;
    --color-danger:    #D6455B;
    --color-danger-bg: #FCEAED;
    --color-amber:     #E8A317;
    --color-chip-bg:   #F1F2F5;
    --color-checkbox-border: #D8DEE9;
    --color-solid-dark:   #171F30;
    --color-solid-dark-text: #ffffff;
    --color-pending-bg:   #FFF4DA;
    --color-pending-text: #92600A;
    --color-sold-bg:      #EDE9FE;
    --color-sold-text:    #6D28D9;
    --color-flash-bg:     #FFF4DA;
    --color-danger-border: #F5C2CC;
    --card-gradient: var(--color-card);
    --color-ambient-glow:   rgba(52, 87, 232, 0.05);
    --color-ambient-glow-2: rgba(30, 158, 90, 0.04);

    /* Colorful icon-badge palette — soft tinted background + a bold icon
       color, for a warmer, more "digital business card" feel than a
       single neutral gray chip for every category. */
    --icon-purple-bg: #EDE9FE; --icon-purple-fg: #7C3AED;
    --icon-blue-bg:   #DBEAFE; --icon-blue-fg:   #2563EB;
    --icon-green-bg:  #D1FAE5; --icon-green-fg:  #059669;
    --icon-pink-bg:   #FCE7F3; --icon-pink-fg:   #DB2777;
    --icon-orange-bg: #FFEDD5; --icon-orange-fg: #EA580C;
    --icon-teal-bg:   #CCFBF1; --icon-teal-fg:   #0D9488;
    --shadow-card: 8px 8px 16px var(--color-neumorph-dark), -8px -8px 16px var(--color-neumorph-light), 0 0 0 1px var(--color-border);
    --shadow-subtle: 5px 5px 10px var(--color-neumorph-dark), -5px -5px 10px var(--color-neumorph-light), 0 0 0 1px var(--color-border);
    --shadow-subtle-hover: 6px 6px 12px var(--color-neumorph-dark), -6px -6px 12px var(--color-neumorph-light), 0 0 0 1px var(--color-border);
    --shadow-inset: inset 4px 4px 8px var(--color-neumorph-dark), inset -4px -4px 8px var(--color-neumorph-light), 0 0 0 1px var(--color-border);

    --font-body: 'Inter', sans-serif;
    --font-display: 'Inter', sans-serif;
    --font-mono: 'Inter', monospace;
    --radius-card: 18px;
    --radius-el: 14px;
    color-scheme: light;
}

/* ═══════════════ Dark mode — follows the device/browser setting
   automatically (prefers-color-scheme), no toggle needed. A genuinely
   considered dark palette (warm charcoal, not pure black; brightened
   accent/status colors for contrast) rather than a naive inversion. ═══ */
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg:        #1E212B;
        --color-card:      #1E212B;
        --color-neumorph-light: #262B38;
        --color-neumorph-dark:  #121319;
        --color-input-bg:  #1E212B;
        --color-ink:       #EDEFF4;
        --color-ink-soft:  #A7ADBB;
        --color-muted:     #767C8C;
        --color-border:    #3A3F4E;
        --color-line:      #2C303C;
        --color-accent:    #6C8CFF;
        --color-accent-2:  #8AA3FF;
        --color-accent-bg: #1E2642;
        --color-success:   #34D399;
        --color-success-bg:#12301F;
        --color-danger:    #FB7185;
        --color-danger-bg: #3A1620;
        --color-amber:     #FBBF24;
        --color-chip-bg:   #262A36;
        --color-checkbox-border: #383D4C;
        --color-pending-bg:   #362A0E;
        --color-pending-text: #FBBF24;
        --color-sold-bg:      #291F42;
        --color-sold-text:    #C4B5FD;
        --color-flash-bg:     #362A0E;
        --color-danger-border: #5C2A35;
        --card-gradient: var(--color-card);
        --color-ambient-glow:   rgba(108, 140, 255, 0.09);
        --color-ambient-glow-2: rgba(52, 211, 153, 0.06);

        --icon-purple-bg: #2E2350; --icon-purple-fg: #C4B5FD;
        --icon-blue-bg:   #1E2E52; --icon-blue-fg:   #93C5FD;
        --icon-green-bg:  #123829; --icon-green-fg:  #6EE7B7;
        --icon-pink-bg:   #3D1F35; --icon-pink-fg:   #F9A8D4;
        --icon-orange-bg: #3D2712; --icon-orange-fg: #FDBA74;
        --icon-teal-bg:   #0F3733; --icon-teal-fg:   #5EEAD4;
        --shadow-card: 8px 8px 16px var(--color-neumorph-dark), -8px -8px 16px var(--color-neumorph-light), 0 0 0 1px var(--color-border);
        --shadow-subtle: 5px 5px 10px var(--color-neumorph-dark), -5px -5px 10px var(--color-neumorph-light), 0 0 0 1px var(--color-border);
        --shadow-subtle-hover: 6px 6px 12px var(--color-neumorph-dark), -6px -6px 12px var(--color-neumorph-light), 0 0 0 1px var(--color-border);
        --shadow-inset: inset 4px 4px 8px var(--color-neumorph-dark), inset -4px -4px 8px var(--color-neumorph-light), 0 0 0 1px var(--color-border);
        color-scheme: dark;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background-color: var(--color-bg);
    background-image:
        radial-gradient(ellipse 800px 500px at 50% -10%, var(--color-ambient-glow), transparent 60%),
        radial-gradient(ellipse 600px 400px at 100% 100%, var(--color-ambient-glow-2), transparent 60%);
    background-attachment: fixed;
    font-family: var(--font-body);
    color: var(--color-ink);
    display: flex;
    justify-content: center;
    padding: 24px 16px 120px;
    -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: 500px; }
.wrap.wide { max-width: 1100px; }

/* ---- The card ---- */
.note {
    background: var(--card-gradient);
    border-radius: var(--radius-card);
    padding: 22px 20px 24px;
    box-shadow: var(--shadow-card);
    border: none;
    position: relative;
}

/* ---- Compact verification header — centered plate as the anchor ---- */
.verify-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}
.verify-plate-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.verify-badge {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--color-accent-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.verify-text { min-width: 0; }
/* Real Turkish vehicle plate look — white plate, blue "TR" euroband,
   black text/border. Deliberately hard-coded colors (not the theme's
   --color-* tokens): a physical plate doesn't switch to light text on
   a dark background in dark mode, it stays a white plate wherever it
   appears. */
.plate-badge {
    display: inline-flex;
    align-items: stretch;
    border: 2px solid #16181D;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.plate-badge__tr {
    background: #1345C6;
    color: #fff;
    font-family: 'Oswald', var(--font-body);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-right: 2px solid #16181D;
}
.plate-badge__number {
    /* Oswald — condensed/blocky, much closer to real embossed plate
       lettering than the site's normal UI font (Inter). */
    font-family: 'Oswald', var(--font-body);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1.5px;
    /* Real plates read as separate blocks (province / letters / digits)
       with a wide gap between each — plain letter-spacing alone just
       stretches every character evenly and reads as one packed string.
       word-spacing widens only the space between the groups. */
    word-spacing: 7px;
    /* Tight top/bottom padding — the number should nearly fill the
       plate's height, not float in a lot of empty margin. */
    padding: 2px 12px;
    color: #16181D;
    font-variant-numeric: tabular-nums;
    background: #fff;
    white-space: nowrap;
}
.plate-badge--lg {
    border-radius: 6px;
    /* Clearly visible double outline — a thicker white gap then a
       proper (not hairline) black inner ring — plus a stronger drop
       shadow underneath, for the raised/embossed "plastic plate" look
       rather than a flat printed chip. */
    box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 6px #16181D, 0 3px 7px rgba(0, 0, 0, 0.32);
}
.plate-badge--lg .plate-badge__tr { font-size: 12px; padding: 0 4px; }
.plate-badge--lg .plate-badge__number { font-size: 27px; padding: 4px 13px; letter-spacing: 1.5px; word-spacing: 8px; }

/* Dark mode: the plate FACE stays identical (white background, black
   inner double-line, blue TR box — a real plate doesn't repaint
   itself for dark mode). Only the outer rim and the drop shadow
   change, because a near-black border and a black shadow both read
   fine against this site's light page but vanish against its dark
   navy card background — with nothing to separate the plate's outer
   edge (or lift it off the surface) it looks like it's floating with
   no boundary. */
@media (prefers-color-scheme: dark) {
    .plate-badge { border-color: var(--color-border); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55); }
    .plate-badge--lg {
        border-color: var(--color-border);
        box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 6px #16181D, 0 0 0 1px rgba(255, 255, 255, 0.12), 0 6px 18px rgba(0, 0, 0, 0.6);
    }
    .plate-badge--stacked .plate-badge__number { border-color: var(--color-border); }
}

/* Stacked variant — plate on top, "TR" as a small caption below it,
   instead of side-by-side (used where the badge sits over a light
   info line rather than inline text). */
.plate-badge--stacked {
    flex-direction: column;
    align-items: center;
    border: none;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}
.plate-badge--stacked .plate-badge__number {
    padding: 4px 20px;
    border: 2px solid #16181D;
    border-radius: 7px;
    box-shadow: inset 0 0 0 1.5px #fff, 0 1px 3px rgba(0, 0, 0, 0.18);
    background: #fff;
    color: #16181D;
}
.plate-badge--stacked .plate-badge__tr {
    background: transparent;
    color: var(--color-muted);
    padding: 4px 0 0;
    font-size: 11px;
    letter-spacing: 1.5px;
}

/* End-of-form placement needs a top divider (separating it from the
   note field above) instead of the bottom divider used at the top of
   the page. */
.verify-row--end {
    margin-top: 20px;
    padding-top: 18px;
    padding-bottom: 0;
    border-bottom: none;
    border-top: 1px solid var(--color-border);
}

.code-badge--sm { padding: 5px 11px; }
.code-badge--sm .code-badge__text { font-size: 13px; }
.code-badge--sm .code-badge__icon { width: 13px; height: 13px; }

.owner-link-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 2px;
    padding: 8px 6px;
    text-decoration: none;
    transition: opacity 0.15s ease;
}
.owner-link-row:hover { opacity: 0.75; }
.owner-link-row__text {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-ink-soft);
    text-align: center;
}
.owner-link-row__circle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--color-card);
    color: var(--color-accent);
    box-shadow: var(--shadow-subtle);
    transition: box-shadow 0.15s ease, transform 0.12s ease;
}
.owner-link-row:hover .owner-link-row__circle { box-shadow: var(--shadow-subtle-hover); }
.owner-link-row:active .owner-link-row__circle { transform: scale(0.92); }
.verify-status {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-success);
}

h1.headline {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.2px;
    margin: 0 0 6px;
    color: var(--color-ink);
    line-height: 1.3;
}
.subtitle {
    color: var(--color-ink-soft);
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 20px;
    line-height: 1.5;
}

/* ---- Reason list ---- */
.reason-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.reason-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border: 1.5px solid transparent;
    border-radius: var(--radius-el);
    background: var(--color-card);
    box-shadow: var(--shadow-subtle);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
    min-height: 44px;
}
.reason-item:hover { box-shadow: var(--shadow-subtle-hover); }
.reason-item:active { transform: scale(0.99); }
@media (prefers-reduced-motion: reduce) {
    .reason-item:active { transform: none; }
}
.reason-item input { position: absolute; opacity: 0; width: 0; height: 0; }

/* Colorful per-category icon badge — warmer, more distinctive than a
   single neutral gray chip for every reason. */
.reason-icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-chip-bg);
    color: var(--color-ink-soft);
    box-shadow: var(--shadow-inset);
    transition: transform 0.15s ease;
}
.reason-icon--purple { background: var(--icon-purple-bg); color: var(--icon-purple-fg); }
.reason-icon--blue   { background: var(--icon-blue-bg);   color: var(--icon-blue-fg); }
.reason-icon--green  { background: var(--icon-green-bg);  color: var(--icon-green-fg); }
.reason-icon--pink   { background: var(--icon-pink-bg);   color: var(--icon-pink-fg); }
.reason-icon--orange { background: var(--icon-orange-bg); color: var(--icon-orange-fg); }
.reason-icon--teal   { background: var(--icon-teal-bg);   color: var(--icon-teal-fg); }

.reason-body { flex-grow: 1; min-width: 0; }
.reason-text {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-ink);
    display: block;
}
.reason-subtext {
    font-size: 12.5px;
    font-weight: 400;
    color: var(--color-muted);
    margin-top: 2px;
    display: block;
    line-height: 1.4;
}

.reason-check {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid var(--color-checkbox-border);
    background: var(--color-card);
    position: relative;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.reason-check::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--color-card);
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.15s ease;
}

/* One coherent selected state — single accent color, no mixed borders. */
.reason-item:has(input:checked) {
    border-color: var(--color-accent);
    background: var(--color-accent-bg);
}
.reason-item:has(input:checked) .reason-icon {
    transform: scale(1.06);
}
.reason-item:has(input:checked) .reason-check {
    border-color: var(--color-accent);
    background: var(--color-accent);
}
.reason-item:has(input:checked) .reason-check::after { transform: translate(-50%, -50%) scale(1); }

.reason-item:focus-within {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ---- Inline validation error (no alert()) ---- */
.inline-error {
    display: none;
    align-items: center;
    gap: 8px;
    background: var(--color-danger-bg);
    color: var(--color-danger);
    border: 1px solid var(--color-danger-border);
    border-radius: var(--radius-el);
    padding: 11px 14px;
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 14px;
}
.inline-error.visible { display: flex; }
.reason-item.has-error { border-color: var(--color-danger); }

.caller-info, .note-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
.caller-info.hidden { display: none; }
.hidden { display: none !important; }
.otp-entry-row { margin-top: 10px; display: flex; gap: 8px; align-items: center; }

.phone-verify-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 9px 3px 7px;
    border-radius: 999px;
    background: var(--color-pending-bg);
    color: var(--color-pending-text);
    margin-left: 6px;
    vertical-align: middle;
    transition: background 0.2s ease, color 0.2s ease;
}
.phone-verify-badge .badge-icon-verified { display: none; }
.phone-verify-badge.verified {
    background: var(--color-success-bg);
    color: var(--color-success);
    animation: badge-pulse-once 0.4s ease;
}
.phone-verify-badge.verified .badge-icon-unverified { display: none; }
.phone-verify-badge.verified .badge-icon-verified { display: inline-flex; }
@keyframes badge-pulse-once {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

.phone-inline-verify-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    min-height: unset;
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 700;
    border-radius: 9px;
    background: var(--color-accent);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}
.phone-inline-verify-btn:hover { background: var(--color-accent-2); transform: translateY(-50%); }
.phone-inline-verify-btn:active { transform: translateY(-50%) scale(0.95); }
.phone-inline-verify-btn:disabled { opacity: 0.55; cursor: not-allowed; }
#ownerPhoneField { padding-right: 92px; }

.otp-panel {
    margin-top: 12px;
    padding: 16px;
    border-radius: var(--radius-el);
    background: var(--color-card);
    box-shadow: var(--shadow-subtle);
    animation: field-enter 0.3s ease both;
}
.otp-panel__label {
    font-size: 12.5px;
    color: var(--color-ink-soft);
    margin: 0 0 12px;
    text-align: center;
}
.otp-digit-row { display: flex; justify-content: center; gap: 8px; margin-bottom: 14px; }
.otp-digit {
    width: 40px;
    height: 48px;
    text-align: center;
    font-size: 20px;
    font-weight: 800;
    border: none;
    border-radius: 10px;
    background: var(--color-input-bg);
    color: var(--color-ink);
    box-shadow: var(--shadow-inset);
    padding: 0;
    min-height: unset;
}
.otp-digit:focus {
    outline: none;
    box-shadow: var(--shadow-inset), 0 0 0 3px var(--color-accent-bg);
}
.otp-digit.shake { animation: otp-shake 0.4s ease; }
@keyframes otp-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.otp-success-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-el);
    background: var(--color-success-bg);
    color: var(--color-success);
    font-size: 13px;
    font-weight: 700;
    animation: card-enter 0.4s cubic-bezier(.2,.8,.3,1) both;
}
.otp-msg { font-size: 12px; margin: 8px 0 0; min-height: 14px; text-align: center; }
@media (prefers-reduced-motion: reduce) {
    .phone-verify-badge.verified, .otp-digit.shake, .otp-success-banner { animation: none; }
}

/* Homepage (index.php) — single centered hero (image on top, same
   pattern the page always used) plus two wide utility rows below it.
   Deliberately flexbox-only, no CSS grid, matching every other layout
   already on this site — predictable at any width, nothing to
   collapse or overlap. Requires $wrap_wide = true in index.php.
   The <img> below also carries width/height HTML attributes, not just
   CSS, so it can never render oversized even if a stylesheet fails to
   load (a stale cached style.css, a blocked request, etc.) — the
   browser reserves the right box before any CSS runs. */
.home-hero { position: relative; overflow: hidden; }
.home-hero__glow {
    position: absolute;
    width: 320px; height: 320px;
    right: -150px; top: -150px;
    border-radius: 50%;
    background: var(--color-ambient-glow);
    pointer-events: none;
}
.home-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}
.home-hero__img {
    width: 108px;
    height: 108px;
    object-fit: contain;
    margin: 0 auto 18px;
    display: block;
    filter: drop-shadow(0 14px 18px rgba(23, 31, 48, 0.16));
}
.home-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--color-accent-bg);
    color: var(--color-accent-2);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.home-hero__eyebrow:before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--color-success);
    box-shadow: 0 0 0 4px var(--color-success-bg);
}
.home-hero .headline {
    margin: 0;
    font-size: clamp(26px, 4vw, 36px);
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.home-hero .subtitle {
    max-width: 520px;
    margin: 14px auto 0;
    font-size: 15px;
    line-height: 1.65;
}
.home-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.home-login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 22px;
    border-radius: var(--radius-el);
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(52, 87, 232, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.home-login-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(52, 87, 232, 0.38); color: #fff; }
.home-login-btn:active { transform: translateY(0) scale(0.98); }

.home-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 26px 0 16px;
    color: var(--color-muted);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.home-divider:before, .home-divider:after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-line);
}

.home-scan-form { max-width: 400px; margin: 0 auto; text-align: left; }
.home-scan-form__label { text-align: left; }
.home-scan-form__hint { text-align: left; }
.home-scan-form__btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
}

.home-section-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--color-ink);
    margin: 0 0 18px;
    letter-spacing: -0.01em;
    text-align: left;
}
.home-reasons { margin-top: 18px; }
.home-reason-list { display: flex; flex-wrap: wrap; gap: 16px; }
.home-reason {
    flex: 1 1 240px;
    padding: 18px;
    border-radius: var(--radius-el);
    background: var(--color-card);
    box-shadow: var(--shadow-subtle);
    text-align: left;
}
.home-reason .field-icon-badge, .home-mini-card .field-icon-badge {
    position: static;
    transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 10px;
}
.home-reason .field-icon-badge { margin-bottom: 12px; }
.home-reason__title { font-size: 13.5px; font-weight: 700; color: var(--color-ink); margin-bottom: 4px; }
.home-reason__text { font-size: 12.5px; color: var(--color-muted); line-height: 1.55; }

.home-meta { margin-top: 18px; }
.home-meta-row { display: flex; flex-wrap: wrap; gap: 16px; }
.home-mini-card {
    flex: 1 1 300px;
    display: flex;
    gap: 14px;
    padding: 20px;
    border-radius: var(--radius-el);
    background: var(--color-card);
    box-shadow: var(--shadow-subtle);
    text-align: left;
}
.home-mini-card__title { font-size: 13.5px; font-weight: 700; color: var(--color-ink); margin-bottom: 4px; }
.home-mini-card__text { font-size: 12.5px; color: var(--color-muted); line-height: 1.55; }
.home-mini-card__text a { color: var(--color-accent); font-weight: 600; }
.home-mini-card__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.home-mini-card__btn { margin-top: 0; }
.legal-contact-btn--whatsapp { background: #25D366; color: #fff !important; }
.legal-contact-btn--whatsapp:hover { background: #1ebe59; }

@media (max-width: 480px) {
    .home-actions { flex-direction: column; }
    .home-login-btn { width: 100%; }
}

/* Demo page (demo.php / demo_dashboard.php) */
.demo-intro { text-align: center; margin-bottom: 22px; }
.demo-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.4px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--icon-orange-bg);
    color: var(--icon-orange-fg);
    margin-bottom: 12px;
}
.demo-intro .headline { margin-bottom: 6px; }
.demo-intro .subtitle { max-width: 560px; margin-left: auto; margin-right: auto; }
.demo-columns {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.demo-box { flex: 1 1 380px; min-width: 0; }
.demo-box__label {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.4px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--icon-blue-bg);
    color: var(--icon-blue-fg);
    margin-bottom: 10px;
}
.demo-box__label--alt { background: var(--icon-green-bg); color: var(--icon-green-fg); }
.demo-box__title { font-size: 19px; margin: 0 0 6px; }
.demo-box__desc { font-size: 13.5px; color: var(--color-muted); margin: 0 0 18px; }
.demo-footer-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
}
.demo-reset-btn {
    width: auto;
    min-height: unset;
    padding: 6px 4px;
    background: none;
    border: none;
    color: var(--color-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    text-decoration: underline;
    cursor: pointer;
    box-shadow: none;
}
.demo-reset-btn:hover { background: none; color: var(--color-ink-soft); transform: none; }
.demo-reset-btn:active { transform: none; }
@media (max-width: 780px) {
    .demo-columns { flex-direction: column; }
}

label.field-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-ink);
    display: block;
    margin-bottom: 7px;
}
label.field-label .field-optional {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-muted);
    margin-left: 5px;
}
.field-hint {
    font-size: 12px;
    color: var(--color-muted);
    margin: -3px 0 8px;
}

/* Icon-prefixed inputs — a small colorful circular badge sits inside
   the field, left-aligned (not just a flat tinted line icon). */
.input-icon-wrap { position: relative; }
.input-icon-wrap .field-icon-badge {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px; height: 26px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-inset);
    pointer-events: none;
}
.input-icon-wrap input[type=text],
.input-icon-wrap input[type=tel],
.input-icon-wrap input[type=email],
.input-icon-wrap input[type=time],
.input-icon-wrap select { padding-left: 44px; }

input[type=text], input[type=tel], input[type=email], input[type=password], input[type=number], input[type=time], textarea, select {
    padding: 13px 15px;
    border: none;
    border-radius: var(--radius-el);
    font-size: 15px;
    font-family: var(--font-body);
    width: 100%;
    min-width: 0;
    background: var(--color-input-bg);
    color: var(--color-ink);
    box-shadow: var(--shadow-inset);
    min-height: 44px;
}
/* Safari renders type=time with its own wide native chrome (and, on
   some versions, a stray extra control/indicator) that doesn't
   respect the width above unless its default appearance is stripped
   first — this is what was overflowing past the card edge on iOS. */
input[type=time] {
    -webkit-appearance: none;
    appearance: none;
}
select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%235B6472' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
input[type=text]:focus, input[type=tel]:focus, input[type=email]:focus, input[type=password]:focus, input[type=number]:focus, input[type=time]:focus, textarea:focus, select:focus {
    outline: none;
    box-shadow: var(--shadow-inset), 0 0 0 3px var(--color-accent-bg);
    background: var(--color-input-bg);
}

/* Browsers force their own background/text color on autofilled fields
   (Chrome's blue/yellow tint), which can't be turned off directly —
   this is the standard workaround: a huge inset box-shadow "paints
   over" the forced background with our own field color instead. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--color-input-bg) inset !important;
    -webkit-text-fill-color: var(--color-ink) !important;
    caret-color: var(--color-ink);
    transition: background-color 5000s ease-in-out 0s;
}
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px var(--color-card) inset, 0 0 0 3px var(--color-accent-bg) !important;
}
textarea { min-height: 68px; resize: vertical; }

.note-field-wrap { position: relative; }
.note-field-wrap textarea { padding-right: 56px; }

.photo-block { margin-top: 16px; }
.photo-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    min-height: unset;
    padding: 10px 16px;
    border-radius: var(--radius-el);
    background: var(--color-input-bg);
    box-shadow: var(--shadow-inset);
    color: var(--color-ink-soft);
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    border: none;
    cursor: pointer;
    transition: box-shadow 0.15s ease;
}
.photo-upload-btn:hover { box-shadow: var(--shadow-inset), 0 0 0 2px var(--color-accent-bg); background: var(--color-input-bg); transform: none; }
.photo-upload-btn:active { transform: none; }
.photo-upload-btn.location-shared {
    background: var(--color-success-bg);
    color: var(--color-success);
}
.photo-upload-btn.location-shared:hover { background: var(--color-success-bg); }
.photo-preview-wrap {
    position: relative;
    display: inline-block;
    margin-top: 4px;
}
.photo-preview-wrap img {
    max-width: 160px;
    max-height: 160px;
    border-radius: var(--radius-el);
    box-shadow: var(--shadow-subtle);
    display: block;
}
.photo-preview-wrap button {
    position: absolute;
    top: -8px; right: -8px;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--color-danger);
    color: #fff;
    border: 2px solid var(--color-card);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.char-counter {
    position: absolute;
    right: 12px; bottom: 10px;
    font-size: 12px;
    color: var(--color-muted);
    background: rgba(255,255,255,0.9);
    padding: 1px 4px;
    pointer-events: none;
}

button, .btn {
    width: 100%;
    padding: 16px;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-el);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
}
button:hover, .btn:hover { background: var(--color-accent-2); transform: translateY(-1px); }
button:active, .btn:active { transform: translateY(0) scale(0.98); }
button:focus-visible, .btn:focus-visible { outline: 2px solid var(--color-accent-2); outline-offset: 2px; }
button:disabled { opacity: 0.75; cursor: not-allowed; }
button:disabled:hover { transform: none; }
@media (prefers-reduced-motion: reduce) {
    button, .btn { transition: background 0.15s ease, opacity 0.15s ease; }
    button:hover, .btn:hover, button:active, .btn:active { transform: none; }
}

.spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: none;
    flex-shrink: 0;
}
button.is-loading .spinner { display: inline-block; }
button.is-loading .btn-icon { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .spinner { animation-duration: 1.4s; }
}

/* ---- Fixed submit bar ---- */
.fixed-submit-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to bottom, rgba(245,246,248,0) 0%, var(--color-bg) 45%);
    pointer-events: none;
}
.fixed-submit-bar > * { pointer-events: auto; }
.fixed-submit-bar-inner { width: 100%; max-width: 500px; }
.fixed-submit-bar button { box-shadow: 0 10px 24px rgba(52, 87, 232, 0.28); }
.trust-microcopy {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-ink-soft);
    margin: 10px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.trust-microcopy-sub {
    text-align: center;
    font-size: 11px;
    color: var(--color-muted);
    margin: 2px 0 0;
}
.form-scroll-area { padding-bottom: 100px; }
.legal-footnote {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
}
.legal-footnote .trust-microcopy-sub { margin-top: 0; }

/* The fixed bar is now just the button + one short line, but it still
   sits on top of the page in normal flow — without this, the actual
   page footer (logo + legal links) renders directly underneath it and
   gets visually covered/overlapped as the page scrolls to the bottom.
   z-index above guarantees the bar always wins that overlap if it
   ever happens anyway (e.g. an unusually narrow screen wrapping the
   trust line to an extra line) — the button stays legible rather than
   getting visually tangled with the logo behind it. */
.fixed-submit-bar ~ footer.mini { margin-top: 150px; }

.flash {
    background: var(--color-flash-bg);
    border: 1.5px solid var(--color-amber);
    padding: 11px 14px;
    border-radius: var(--radius-el);
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--color-ink);
    animation: field-enter 0.3s ease both;
}

/* ═══════════════ Activation celebration — a real "you did it" moment,
   distinct from ordinary notices, shown once right after a tag goes live ═══════════════ */
.activation-celebration {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #1E9E5A, #17b869);
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 20px;
    box-shadow: 0 10px 28px rgba(30, 158, 90, 0.35);
    animation: celebration-pop 0.5s cubic-bezier(.26,1.5,.4,1) both;
}
.activation-celebration__icon {
    flex-shrink: 0;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,0.22);
    border: 2px solid rgba(255,255,255,0.55);
    display: flex; align-items: center; justify-content: center;
    animation: celebration-icon-bounce 0.6s 0.15s cubic-bezier(.26,1.5,.4,1) both;
}
.activation-celebration__text { display: flex; flex-direction: column; gap: 2px; }
.activation-celebration__text strong { color: #fff; font-size: 16.5px; font-weight: 800; }
.activation-celebration__text span { color: rgba(255,255,255,0.92); font-size: 13px; line-height: 1.4; }

.activation-celebration__confetti { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.activation-celebration__confetti span {
    position: absolute;
    color: #fff;
    opacity: 0;
    animation: confetti-pop 1s ease-out both;
}
.activation-celebration__confetti span:nth-child(1) { top: 4px;  left: 16%; font-size: 16px; animation-delay: 0.10s; }
.activation-celebration__confetti span:nth-child(2) { top: 14px; left: 84%; font-size: 12px; animation-delay: 0.25s; }
.activation-celebration__confetti span:nth-child(3) { top: 68%; left: 6%;  font-size: 10px; animation-delay: 0.40s; }
.activation-celebration__confetti span:nth-child(4) { top: 74%; left: 90%; font-size: 14px; animation-delay: 0.15s; }
.activation-celebration__confetti span:nth-child(5) { top: -6px; left: 50%; font-size: 11px; animation-delay: 0.50s; }

@keyframes celebration-pop {
    0%   { opacity: 0; transform: scale(0.85) translateY(-6px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes celebration-icon-bounce {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); }
}
@keyframes confetti-pop {
    0%   { opacity: 0; transform: scale(0.3) rotate(0deg) translateY(0); }
    30%  { opacity: 1; transform: scale(1.1) rotate(90deg) translateY(-6px); }
    100% { opacity: 0; transform: scale(0.8) rotate(180deg) translateY(-16px); }
}
@media (prefers-reduced-motion: reduce) {
    .activation-celebration, .activation-celebration__icon, .activation-celebration__confetti span { animation: none; }
}

/* ---- Save-contact button — shown once, right after activation ---- */
.save-contact-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    text-align: left;
    text-decoration: none;
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
    border-radius: 16px;
    padding: 16px 18px;
    margin-bottom: 20px;
    box-shadow: 0 10px 28px rgba(52, 87, 232, 0.35);
    animation: celebration-pop 0.5s 0.1s cubic-bezier(.26,1.5,.4,1) both;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.save-contact-btn:hover, .save-contact-btn:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(52, 87, 232, 0.42);
}
.save-contact-btn:active { transform: translateY(0); }
.save-contact-btn__icon {
    flex-shrink: 0;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,0.22);
    border: 2px solid rgba(255,255,255,0.55);
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.save-contact-btn__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.save-contact-btn__text strong { color: #fff; font-size: 15.5px; font-weight: 800; }
.save-contact-btn__text span { color: rgba(255,255,255,0.92); font-size: 12.5px; line-height: 1.35; }
.save-contact-btn__chevron { flex-shrink: 0; opacity: 0.85; }
@media (prefers-reduced-motion: reduce) {
    .save-contact-btn { animation: none; }
}

/* ---- Success / fail state ---- */
.result-scene {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px 0 4px;
}
.result-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    background: var(--color-success-bg);
    position: relative;
    animation: result-icon-pop 0.5s cubic-bezier(.26,1.5,.4,1) both;
}
.result-icon.fail { background: var(--color-danger-bg); }
.result-icon::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid var(--color-success);
    opacity: 0;
    animation: result-ring-pulse 1.1s ease-out 0.25s both;
}
.result-icon.fail::before { border-color: var(--color-danger); }
.result-icon .result-check-path {
    stroke-dasharray: 22;
    stroke-dashoffset: 22;
    animation: result-check-draw 0.45s ease-out 0.3s forwards;
}
@keyframes result-icon-pop {
    0%   { transform: scale(0.5); opacity: 0; }
    60%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); }
}
@keyframes result-ring-pulse {
    0%   { opacity: 0.6; transform: scale(0.8); }
    100% { opacity: 0; transform: scale(1.45); }
}
@keyframes result-check-draw {
    to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .result-icon, .result-icon::before, .result-icon .result-check-path {
        animation: none !important;
        stroke-dashoffset: 0 !important;
    }
}
.result-scene h1 { margin: 0 0 8px; }
.result-scene .subtitle { margin-bottom: 4px; }
.result-note {
    font-size: 12.5px;
    color: var(--color-muted);
    margin-top: 10px;
    line-height: 1.5;
}

/* ---- Admin ---- */
.admin-form { display: flex; flex-direction: column; gap: 12px; }
.link-box {
    background: var(--color-input-bg);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-el);
    padding: 12px;
    word-break: break-all;
    font-family: var(--font-mono);
    font-size: 13px;
    margin: 16px 0;
    color: var(--color-ink);
}
.qr-box { text-align: center; margin: 18px 0; }
.qr-box img { border-radius: var(--radius-el); border: 1.5px solid var(--color-border); }
a.plain { color: var(--color-accent); }
a.plain:hover { color: var(--color-accent-2); }

.location-card {
    margin-top: 10px;
    border: 1.5px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-card);
}
.location-card__row {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px 0;
    font-size: 12.5px; color: var(--color-ink-soft); font-weight: 600;
}
.location-card__row:first-child { padding-top: 10px; }
.location-card__row svg { flex-shrink: 0; color: var(--color-accent); }
.location-card__map { display: block; margin-top: 8px; }
.location-card__map img { width: 100%; display: block; }
.location-card__coords {
    padding: 7px 12px; text-align: center;
    font-size: 11px; color: var(--color-muted); letter-spacing: 0.2px;
    border-top: 1px solid var(--color-border);
}

/* ---- iOS-style toggle switch — used for the tag on/off setting ---- */
.ios-toggle-row {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    background: var(--color-card);
    border: 1.5px solid var(--color-border);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: var(--shadow-subtle);
    margin-bottom: 24px;
}
.ios-toggle-row__text strong { display: block; font-size: 14.5px; color: var(--color-ink); }
.ios-toggle-row__text span { display: block; font-size: 12.5px; color: var(--color-muted); margin-top: 2px; }
.ios-toggle { display: inline-block; position: relative; flex-shrink: 0; width: 51px; height: 31px; }
.ios-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; }
.ios-toggle__track {
    position: absolute; inset: 0;
    background: var(--color-checkbox-border);
    border-radius: 999px;
    transition: background 0.2s ease;
    box-shadow: var(--shadow-inset);
}
.ios-toggle__thumb {
    position: absolute; top: 2px; left: 2px;
    width: 27px; height: 27px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.25);
    transition: transform 0.2s cubic-bezier(.4,0,.2,1);
}
.ios-toggle input:checked ~ .ios-toggle__track { background: var(--color-success); }
.ios-toggle input:checked ~ .ios-toggle__thumb { transform: translateX(20px); }
.ios-toggle input:focus-visible ~ .ios-toggle__track { box-shadow: var(--shadow-inset), 0 0 0 3px var(--color-accent-bg); }

/* ---- Unresolved-notification alert card — the single latest
   unresolved item, surfaced above settings until read/resolved ---- */
.unresolved-alert {
    background: var(--color-pending-bg);
    border: 1.5px solid var(--color-amber);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 24px;
    position: relative;
}
.unresolved-alert__badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--color-amber);
    color: #3D2E00;
    font-size: 10.5px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase;
    padding: 3px 9px; border-radius: 999px;
    margin-bottom: 8px;
}
.unresolved-alert__title { font-weight: 700; font-size: 15px; color: var(--color-ink); margin-bottom: 2px; }
.unresolved-alert__meta { font-size: 12.5px; color: var(--color-ink-soft); }

.section-divider { border: none; border-top: 1.5px solid var(--color-border); margin: 24px 0; }

.return-time-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.return-time-preset {
    width: auto;
    min-height: unset;
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 700;
    background: var(--color-input-bg);
    color: var(--color-ink-soft);
    border-radius: 999px;
    box-shadow: var(--shadow-subtle);
    transition: background 0.15s, color 0.15s;
}
.return-time-preset:hover { background: var(--color-accent-bg); color: var(--color-accent); }
.return-time-preset.is-selected { background: var(--color-accent); color: #fff; box-shadow: 0 4px 10px rgba(52, 87, 232, 0.28); }
.return-time-custom { display: flex; align-items: center; gap: 10px; }
/* iOS Safari's native <input type="time"> has a wide intrinsic content
   size of its own — without min-width: 0 here, a flex child can never
   shrink below that size (the browser's default min-width: auto uses
   content size as a floor), so the input overflows its container
   instead of respecting width: 100%. This is what caused the visible
   overflow artifact on iOS. */
.return-time-custom .input-icon-wrap { min-width: 0; }
.return-time-custom__label { font-size: 12.5px; color: var(--color-muted); white-space: nowrap; flex-shrink: 0; }
.return-time-preview {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-accent);
    margin: 10px 0 0;
    min-height: 18px;
}

.temp-message-card {
    background: var(--color-card);
    border: 1.5px solid var(--color-border);
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: var(--shadow-subtle);
    margin-bottom: 24px;
}
.temp-message-card__header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.temp-message-card__header strong { font-size: 14.5px; color: var(--color-ink); }
.temp-message-card__active {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: linear-gradient(135deg, var(--color-accent-bg), var(--color-card));
    border: 1.5px solid var(--color-accent);
    border-radius: 12px;
    padding: 14px 16px;
    margin: 12px 0 14px;
}
.temp-message-card__active-icon {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 10px;
    background: var(--color-accent);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(52, 87, 232, 0.28);
}
.temp-message-card__active-body { min-width: 0; }
.temp-message-card__active-text { font-size: 15px; font-weight: 700; color: var(--color-ink); line-height: 1.35; }
.temp-message-card__active-time { font-size: 13px; color: var(--color-accent); font-weight: 700; margin-top: 5px; }

/* ---- Caller-facing away-message banner — shown at the top of r.php
   while the owner has an active "back by HH:MM" note ---- */
.away-message-card {
    background: linear-gradient(135deg, var(--color-accent-bg), var(--color-card));
    border: 1.5px solid var(--color-accent);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 20px;
}
.away-message-card__row { display: flex; align-items: center; gap: 7px; color: var(--color-accent); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; }
.away-message-card__text { font-size: 15px; font-weight: 700; color: var(--color-ink); margin: 8px 0 10px; }
.away-message-card__countdown {
    display: flex; align-items: baseline; gap: 10px;
    background: var(--color-card);
    border-radius: 10px;
    padding: 10px 14px;
    box-shadow: var(--shadow-inset);
}
.away-message-card__countdown #awayCountdown { font-size: 22px; font-weight: 800; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.away-message-card__return-clock { font-size: 12.5px; color: var(--color-muted); font-weight: 600; }
.away-message-card__note { font-size: 12px; color: var(--color-muted); margin: 10px 0 0; }

footer.mini {
    text-align: center;
    margin-top: 22px;
}
.footer-logo {
    height: 42px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    opacity: 0.75;
}

/* ---- Focus visibility everywhere (keyboard accessibility) ---- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.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;
}

/* Honeypot — deliberately NOT display:none, since some bots specifically
   skip fields hidden that way. Off-screen instead, so it renders (and a
   naive scraper sees a normal-looking field to fill) but no real visitor
   ever sees or focuses it. */
.hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    height: 0;
    overflow: hidden;
}

/* ═══════════════ Activation page — a little eyecandy for a
   genuine one-time, first-use moment ═══════════════ */

@keyframes card-enter {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes field-enter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes badge-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(52, 87, 232, 0.22); }
    50%      { box-shadow: 0 0 0 8px rgba(52, 87, 232, 0); }
}
@keyframes icon-pop {
    0%   { transform: scale(0.6); opacity: 0; }
    60%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); }
}

.activate-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--color-border);
}
.activate-icon {
    width: 110px; height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    padding: 8px;
    /*background: #fff;*/
    border-radius: 24px;
    box-shadow: var(--shadow-subtle);
    animation: icon-pop 0.5s cubic-bezier(.25,1.4,.4,1) both;
}
.activate-icon img { width: 100%; height: 100%; object-fit: contain; }
.login-icon {
    width: 56px; height: 56px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
    box-shadow: 0 6px 16px rgba(52, 87, 232, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    color: #fff;
    animation: icon-pop 0.5s cubic-bezier(.25,1.4,.4,1) both;
}
.code-eyebrow {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 6px;
}
.code-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-accent-bg);
    border: 1.5px solid var(--color-accent);
    border-radius: 10px;
    padding: 7px 14px;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    animation: badge-glow 2.4s ease-out 0.6s 2;
}
.code-badge:hover { box-shadow: 0 0 0 4px var(--color-accent-bg); }
.code-badge:active { transform: scale(0.97); }
.code-badge.copied {
    background: var(--color-success-bg);
    border-color: var(--color-success);
}
.code-badge__text {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--color-accent-2);
    transition: color 0.15s ease;
}
.code-badge.copied .code-badge__text { color: var(--color-success); }
.code-badge__icon {
    position: relative;
    display: inline-flex;
    width: 15px; height: 15px;
    color: var(--color-accent-2);
    transition: color 0.15s ease;
}
.code-badge.copied .code-badge__icon { color: var(--color-success); }
.code-badge__icon .icon-copy, .code-badge__icon .icon-check {
    position: absolute;
    top: 0; left: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.code-badge__icon .icon-check { opacity: 0; transform: scale(0.4) rotate(-20deg); }
.code-badge.copied .code-badge__icon .icon-copy { opacity: 0; transform: scale(0.4) rotate(20deg); }
.code-badge.copied .code-badge__icon .icon-check { opacity: 1; transform: scale(1) rotate(0); }
.code-badge__hint {
    display: block;
    text-align: center;
    font-size: 11px;
    color: var(--color-muted);
    margin-top: 7px;
}
@media (prefers-reduced-motion: reduce) {
    .code-badge, .code-badge__icon .icon-copy, .code-badge__icon .icon-check { transition: none; }
}

.note.animate-in { animation: card-enter 0.4s cubic-bezier(.2,.8,.3,1) both; }
.field-enter {
    animation: field-enter 0.35s ease both;
}
@media (prefers-reduced-motion: reduce) {
    .note.animate-in, .field-enter, .activate-icon, .code-badge { animation: none; }
}

/* ═══════════════ Admin panel — data-dense dashboard ═══════════════ */

.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.admin-topbar h1 { margin: 0; }
.admin-topbar .subtitle { margin: 2px 0 0; }
.admin-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-actions .btn, .admin-actions button {
    width: auto;
    padding: 10px 16px;
    font-size: 13.5px;
}
.btn-secondary {
    background: var(--color-card);
    color: var(--color-ink);
    border: 1.5px solid var(--color-border);
}
.btn-secondary:hover { background: var(--color-chip-bg); }

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}
.stat-card {
    background: var(--color-card);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: var(--shadow-subtle);
}
.stat-card__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-muted);
    margin-bottom: 4px;
}
.stat-card__value {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-ink);
}
.stat-card--accent .stat-card__value { color: var(--color-accent); }
.stat-card--success .stat-card__value { color: var(--color-success); }
.stat-card--muted .stat-card__value { color: var(--color-muted); }
.stat-card--danger .stat-card__value { color: var(--color-danger); }

.filter-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.filter-bar input[type=text] { flex: 1; min-width: 180px; }
.filter-bar select {
    padding: 12px 14px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-el);
    font-size: 14px;
    font-family: var(--font-body);
    background: var(--color-input-bg);
    color: var(--color-ink);
    min-height: 44px;
}
.filter-bar button { width: auto; padding: 12px 18px; }

.table-scroll { overflow-x: auto; margin: 0 -4px; }
table.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    min-width: 920px;
}
table.data-table th {
    text-align: left;
    padding: 9px 10px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 1.5px solid var(--color-border);
    white-space: nowrap;
}
table.data-table td {
    padding: 10px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
table.data-table tr:hover td { background: var(--color-bg); }
.cell-code { font-family: var(--font-mono); font-weight: 700; font-size: 12.5px; }
.cell-muted { color: var(--color-muted); }

.status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
}
.status-badge--active { background: var(--color-success-bg); color: var(--color-success); }
.status-badge--pending { background: var(--color-pending-bg); color: var(--color-pending-text); }
.status-badge--printed { background: var(--color-accent-bg); color: var(--color-accent); }
.status-badge--inactive { background: var(--color-danger-bg); color: var(--color-danger); }
.status-badge--sold { background: var(--color-sold-bg); color: var(--color-sold-text); }

.icon-btn {
    width: auto;
    padding: 6px 11px;
    font-size: 12px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 30px;
}
.icon-btn-dark { background: var(--color-solid-dark); color: var(--color-solid-dark-text); border: none; }
.icon-btn-danger { background: var(--color-card); color: var(--color-danger); border: 1.5px solid var(--color-danger-border); }
.icon-btn-danger:hover { background: var(--color-danger-bg); }
.icon-btn-toggle { background: var(--color-card); color: var(--color-ink); border: 1.5px solid var(--color-border); }
.icon-btn-toggle:hover { background: var(--color-chip-bg); }
.nfc-toggle {
    width: 28px; height: 28px;
    border-radius: 8px;
    border: 1.5px solid var(--color-border);
    background: var(--color-card);
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.nfc-toggle.on { background: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success); }

.note-inline-form { display: flex; gap: 6px; align-items: center; }
.note-inline-form input[type=text] {
    padding: 6px 9px;
    font-size: 12.5px;
    min-height: unset;
    min-width: 140px;
}
.note-inline-form button {
    width: auto;
    padding: 6px 9px;
    min-height: unset;
}

.row-actions { display: flex; gap: 6px; flex-wrap: nowrap; }

.pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 18px;
}
.pagination a, .pagination span {
    padding: 7px 13px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-ink);
    border: 1.5px solid var(--color-border);
}
.pagination a:hover { background: var(--color-chip-bg); }
.pagination .current { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }

.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--color-muted);
}

/* ═══════════════ Legal pages (KVKK, Terms) ═══════════════ */
.legal-doc .headline { font-size: 21px; }
.legal-section {
    margin: 22px 0;
    padding-top: 18px;
    border-top: 1px solid var(--color-border);
}
.legal-section:first-of-type { border-top: none; padding-top: 0; margin-top: 4px; }
.legal-section h2 {
    font-size: 15px;
    font-weight: 800;
    color: var(--color-ink);
    margin: 0 0 8px;
}
.legal-section p {
    font-size: 13.5px;
    color: var(--color-ink-soft);
    line-height: 1.65;
    margin: 0 0 8px;
}
.legal-section p:last-child { margin-bottom: 0; }
.legal-section ul {
    margin: 8px 0 0 18px;
    padding: 0;
}
.legal-section ul li {
    font-size: 13.5px;
    color: var(--color-ink-soft);
    line-height: 1.6;
    margin-bottom: 6px;
}
.legal-section a { color: var(--color-accent); }
.legal-info-table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 13px;
}
.legal-info-table td {
    padding: 7px 4px;
    border-bottom: 1px solid var(--color-border);
}
.legal-info-table td:first-child { color: var(--color-muted); font-weight: 600; width: 140px; }
.legal-info-table td:last-child { color: var(--color-ink); }
.legal-info-table tr:last-child td { border-bottom: none; }
.legal-highlight {
    background: var(--color-accent-bg);
    border-left: 3px solid var(--color-accent);
    border-radius: 0 8px 8px 0;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--color-accent-2);
    margin-top: 10px;
}
.legal-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: var(--color-solid-dark);
    color: var(--color-solid-dark-text) !important;
    font-size: 13px;
    font-weight: 700;
    border-radius: 10px;
    text-decoration: none;
    margin-top: 4px;
}
.legal-updated-note {
    text-align: center;
    font-size: 12px;
    color: var(--color-muted);
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

/* Footer legal links */
.footer-links {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 10px;
    font-size: 12px;
}
.footer-lang-switcher {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}
.footer-lang-switcher a {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--color-muted);
    text-decoration: none;
    padding: 4px 9px;
    border-radius: 999px;
    transition: background 0.15s, color 0.15s;
}
.footer-lang-switcher a:hover { background: var(--color-accent-bg); color: var(--color-accent); }
.footer-lang-switcher a.is-active { background: var(--color-accent); color: #fff; }
.footer-links a {
    color: var(--color-muted);
    text-decoration: none;
}
.footer-links a:hover { color: var(--color-ink-soft); text-decoration: underline; }

/* Consent notice on forms that collect personal data */
.consent-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 12.5px;
    color: var(--color-ink-soft);
    line-height: 1.5;
    margin: 4px 0 2px;
}
.consent-check + .consent-check { margin-top: 8px; }
.consent-check input[type=checkbox] {
    margin-top: 3px;
    width: 16px; height: 16px;
    flex-shrink: 0;
    accent-color: var(--color-accent);
}
.consent-check a { color: var(--color-accent); }
.consent-note {
    font-size: 11.5px;
    color: var(--color-muted);
    text-align: center;
    margin-top: 2px;
}
.consent-note a { color: var(--color-ink-soft); }

/* The floating reCAPTCHA badge is hidden site-wide (see below) — Google's
   terms require this disclosure text to be shown somewhere on the page
   instead, wherever the protected action's button lives. */
.recaptcha-disclosure {
    font-size: 10.5px;
    color: var(--color-muted);
    text-align: center;
    margin-top: 6px;
    line-height: 1.4;
}
.recaptcha-disclosure a { color: var(--color-muted); text-decoration: underline; }

/* Hides Google's floating reCAPTCHA v3 badge in the corner. Safe to do
   ONLY because .recaptcha-disclosure above satisfies Google's ToS
   requirement to show the disclosure text somewhere on the page instead —
   removing the badge without that text would violate their terms. */
.grecaptcha-badge { visibility: hidden !important; }

/* ═══════════════ Split plate input (province / letters / digits) ═══════════════ */
.plate-input-group {
    display: flex;
    gap: 8px;
}
.plate-input-select {
    flex: 1.6;
    min-width: 0;
    padding: 13px 8px;
    border: none;
    border-radius: var(--radius-el);
    font-size: 14px;
    font-family: var(--font-body);
    background: var(--color-input-bg);
    color: var(--color-ink);
    box-shadow: var(--shadow-inset);
    min-height: 44px;
}
.plate-input-letters, .plate-input-digits {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.plate-input-select:focus, .plate-input-letters:focus, .plate-input-digits:focus {
    outline: none;
    box-shadow: var(--shadow-inset), 0 0 0 3px var(--color-accent-bg);
    background: var(--color-input-bg);
}
.plate-preview-wrap {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}
.plate-preview-wrap.hidden { display: none; }
.plate-preview-wrap .plate-badge { animation: field-enter 0.25s ease both; }

/* ═══════════════ Live notification / voice-call status ═══════════════ */
.notification-card {
    overflow: hidden;
    min-height: 500px;
}
.notification-card::before {
    content: '';
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--color-accent-bg) 0%, transparent 68%);
    top: -155px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    opacity: .85;
}
.status-plate {
    position: relative;
    z-index: 2;
    width: fit-content;
    margin: 0 auto 24px;
    padding: 7px 13px;
    border-radius: 8px;
    border: 1.5px solid var(--color-ink);
    background: var(--color-card);
    color: var(--color-ink);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.4px;
    box-shadow: var(--shadow-subtle);
}
.notification-status {
    text-align: center;
    position: relative;
    z-index: 1;
}
.status-visual {
    position: relative;
    width: 154px;
    height: 154px;
    margin: 2px auto 24px;
    display: grid;
    place-items: center;
}
.status-orbit {
    position: absolute;
    inset: 50%;
    border: 1px solid color-mix(in srgb, var(--color-accent) 28%, transparent);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(.55);
    opacity: 0;
    pointer-events: none;
}
@keyframes status-ring {
    0% { width: 88px; height: 88px; opacity: .52; }
    100% { width: 154px; height: 154px; opacity: 0; }
}
.status-icon {
    position: absolute;
    width: 82px;
    height: 82px;
    border-radius: 28px;
    display: grid;
    place-items: center;
    background: var(--color-accent-bg);
    color: var(--color-accent);
    box-shadow: var(--shadow-subtle);
    opacity: 0;
    transform: scale(.78) translateY(8px);
    transition: opacity .35s ease, transform .42s cubic-bezier(.2,.8,.2,1), background .3s ease, color .3s ease;
}
.status-icon svg { width: 37px; height: 37px; }
.notification-status[data-stage="CONNECTING"] .status-icon--phone,
.notification-status[data-stage="RINGING"] .status-icon--phone,
.notification-status[data-stage="SMS_SENDING"] .status-icon--sms,
.notification-status[data-stage="ANSWERED"] .status-icon--done,
.notification-status[data-stage="RESPONSE_RECEIVED"] .status-icon--done,
.notification-status[data-stage="SMS_SENT"] .status-icon--done,
.notification-status[data-stage="NO_ANSWER"] .status-icon--phone,
.notification-status[data-stage="FAILED"] .status-icon--fail {
    opacity: 1;
    transform: scale(1) translateY(0);
}
/* CONNECTING — a calm, settled breathing pulse. Deliberately NOT the
   ringing shake below: the call hasn't started ringing on the other
   end yet, so this should read as "getting ready", not "ringing now" —
   conflating the two would make the later RINGING transition (the
   moment that most needs to feel distinct) land with less impact. */
.notification-status[data-stage="CONNECTING"] .status-icon--phone {
    animation: phone-connecting-pulse 1.8s ease-in-out infinite;
}
@keyframes phone-connecting-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.035); }
}
.notification-status[data-stage="CONNECTING"] .status-orbit {
    animation: status-ring 1.8s ease-out infinite;
}
.notification-status[data-stage="CONNECTING"] .status-orbit--two { animation-delay: .5s; }
.notification-status[data-stage="CONNECTING"] .status-orbit--three { animation-delay: 1s; }
.notification-status[data-stage="RINGING"] .status-icon--phone {
    animation: phone-ring 1.6s ease-in-out infinite;
}
/* A real ringing phone vibrates in short bursts with a pause between —
   not a smooth continuous pulse — so this mimics that rhythm: a quick
   multi-directional shake, then a brief rest, repeating. Reads as "a
   call is actually happening right now" far more convincingly than a
   gentle scale breathe. */
@keyframes phone-ring {
    0%, 55%, 100% { transform: rotate(0deg) scale(1); }
    58% { transform: rotate(-9deg) scale(1.03); }
    61% { transform: rotate(8deg) scale(1.03); }
    64% { transform: rotate(-7deg) scale(1.03); }
    67% { transform: rotate(6deg) scale(1.03); }
    70% { transform: rotate(-4deg) scale(1.02); }
    73% { transform: rotate(3deg) scale(1.02); }
    76%, 100% { transform: rotate(0deg) scale(1); }
}
/* The expanding sound-wave rings pulse in time with each ring burst
   above (roughly every 1.6s) rather than looping independently, so the
   whole thing reads as one coordinated "ringing" moment, not two
   unrelated animations layered on top of each other. */
.notification-status[data-stage="RINGING"] .status-orbit {
    animation: status-ring 1.6s ease-out infinite;
}
.notification-status[data-stage="RINGING"] .status-orbit--two { animation-delay: .18s; }
.notification-status[data-stage="RINGING"] .status-orbit--three { animation-delay: .36s; }
.notification-status[data-stage="SMS_SENDING"] .status-icon--sms {
    animation: sms-float 1.45s ease-in-out infinite;
}
@keyframes sms-float {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
.notification-status[data-stage="ANSWERED"] .status-icon--done,
.notification-status[data-stage="RESPONSE_RECEIVED"] .status-icon--done,
.notification-status[data-stage="SMS_SENT"] .status-icon--done {
    background: var(--color-success-bg);
    color: var(--color-success);
    animation: status-pop .55s cubic-bezier(.2,.9,.25,1.25) both;
}
/* A single ring, expanding once and fading — not the continuous
   ringing loop from RINGING — marking the specific moment the call
   was picked up as a distinct "connected" event, not just an icon
   swap. Scoped to ANSWERED/RESPONSE_RECEIVED only (not SMS_SENT),
   since that's the one genuinely live "someone just picked up"
   moment. */
.notification-status[data-stage="ANSWERED"] .status-orbit--one,
.notification-status[data-stage="RESPONSE_RECEIVED"] .status-orbit--one {
    animation: connect-ring .7s ease-out both;
    border-color: color-mix(in srgb, var(--color-success) 45%, transparent);
}
@keyframes connect-ring {
    0% { width: 82px; height: 82px; opacity: .6; }
    100% { width: 168px; height: 168px; opacity: 0; }
}
/* NO_ANSWER is deliberately neutral, not red/danger — nothing failed,
   the guaranteed SMS channel already succeeded, the call simply
   wasn't picked up. A muted slate tone (not the accent blue, not
   success green, not danger red) keeps it reading as "a plain fact",
   matching the brief's request for a calm, non-alarming state. */
.notification-status[data-stage="NO_ANSWER"] .status-icon--phone {
    background: var(--color-input-bg);
    color: var(--color-ink-soft);
    animation: status-pop .55s cubic-bezier(.2,.9,.25,1.25) both;
}
.notification-status[data-stage="FAILED"] .status-icon--fail {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    animation: status-pop .55s cubic-bezier(.2,.9,.25,1.25) both;
}
@keyframes status-pop {
    0% { transform: scale(.6); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.status-kicker {
    margin-bottom: 8px;
    color: var(--color-accent);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.45px;
}
.notification-status[data-stage="ANSWERED"] .status-kicker,
.notification-status[data-stage="RESPONSE_RECEIVED"] .status-kicker,
.notification-status[data-stage="SMS_SENT"] .status-kicker { color: var(--color-success); }
.notification-status[data-stage="NO_ANSWER"] .status-kicker { color: var(--color-ink-soft); }
.notification-status[data-stage="FAILED"] .status-kicker { color: var(--color-danger); }
.status-title {
    margin: 0 auto;
    max-width: 390px;
    font-size: clamp(23px, 6vw, 30px);
    line-height: 1.12;
    letter-spacing: -.65px;
    color: var(--color-ink);
}
.status-detail {
    max-width: 390px;
    margin: 12px auto 0;
    color: var(--color-ink-soft);
    font-size: 14px;
    line-height: 1.6;
    min-height: 45px;
}
/* Cross-fade wrapper — see notify_wait.php's crossFade() helper. A
   brief, uniform fade applied to the whole status block on every
   stage change, so text/icon swaps read as a considered transition
   rather than an abrupt re-render. */
.notification-status {
    transition: opacity .18s ease;
}
.notification-status.is-transitioning,
#statusRoot.is-transitioning {
    opacity: 0;
}

/* ---- The dominant response reveal — see the "IMPORTANT" section of
   the brief: once the owner's IVR response arrives, it must become
   the single most attention-grabbing element on the page. Hidden by
   default; shown (and the plain title/detail/visual above hidden) only
   for data-stage="RESPONSE_RECEIVED". ---- */
.response-reveal { display: none; }
.notification-status[data-stage="RESPONSE_RECEIVED"] .status-visual,
.notification-status[data-stage="RESPONSE_RECEIVED"] .status-kicker,
.notification-status[data-stage="RESPONSE_RECEIVED"] .status-title,
.notification-status[data-stage="RESPONSE_RECEIVED"] .status-detail {
    display: none;
}
.notification-status[data-stage="RESPONSE_RECEIVED"] .response-reveal {
    display: block;
    animation: response-reveal-in .5s cubic-bezier(.2,.85,.25,1.15) both;
}
.response-reveal__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 18px;
    background: var(--color-success-bg);
    color: var(--color-success);
    display: grid;
    place-items: center;
}
.response-reveal__icon svg { width: 25px; height: 25px; }
.response-reveal__label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.3px;
    color: var(--color-success);
    margin-bottom: 10px;
}
/* This is THE focal element of the whole page once shown — large,
   bold, unmissable, matching "ana cevap çok büyük ve bold olmalı". */
.response-reveal__headline {
    font-size: clamp(34px, 10vw, 48px);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.05;
    color: var(--color-ink);
    text-transform: uppercase;
    max-width: 380px;
    margin: 0 auto;
}
.response-reveal__subtext {
    margin: 14px auto 0;
    max-width: 360px;
    font-size: 15px;
    color: var(--color-ink-soft);
    line-height: 1.55;
}
@keyframes response-reveal-in {
    0% { opacity: 0; transform: scale(.88) translateY(6px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
.status-progress-wrap {
    margin: 28px 2px 0;
    text-align: left;
}
.status-progress-track {
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--color-input-bg);
    box-shadow: var(--shadow-inset);
}
.status-progress-bar {
    position: relative;
    height: 100%;
    min-width: 8px;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-accent-2), var(--color-accent));
    transition: width .65s cubic-bezier(.25,.8,.25,1), background .35s ease;
    overflow: hidden;
}
.status-progress-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.38) 45%, transparent 70%);
    transform: translateX(-100%);
    animation: status-shimmer 1.55s linear infinite;
}
.notification-status[data-stage="ANSWERED"] .status-progress-bar,
.notification-status[data-stage="RESPONSE_RECEIVED"] .status-progress-bar,
.notification-status[data-stage="SMS_SENT"] .status-progress-bar,
.notification-status[data-stage="NO_ANSWER"] .status-progress-bar {
    background: var(--color-success);
}
.notification-status[data-stage="FAILED"] .status-progress-bar {
    background: var(--color-danger);
}
@keyframes status-shimmer { to { transform: translateX(100%); } }
.status-progress-meta {
    margin-top: 9px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 600;
}
.status-timeline {
    margin: 29px auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 355px;
}
.status-timeline__item {
    min-width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 700;
    transition: color .3s ease;
}
.status-timeline__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-border);
    box-shadow: 0 0 0 4px var(--color-card);
    transition: all .3s ease;
}
.status-timeline__line {
    width: 56px;
    height: 2px;
    margin: 0 -6px 17px;
    background: var(--color-border);
}
.status-timeline__item.is-active { color: var(--color-accent); }
.status-timeline__item.is-active .status-timeline__dot {
    background: var(--color-accent);
    box-shadow: 0 0 0 4px var(--color-accent-bg), 0 0 0 7px var(--color-card);
    animation: dot-pulse 1.2s ease-in-out infinite;
}
.status-timeline__item.is-done { color: var(--color-success); }
.status-timeline__item.is-done .status-timeline__dot {
    background: var(--color-success);
    box-shadow: 0 0 0 4px var(--color-success-bg), 0 0 0 7px var(--color-card);
}
@keyframes dot-pulse {
    50% { transform: scale(1.18); }
}
.status-privacy {
    max-width: 360px;
    margin: 27px auto 0;
    padding-top: 18px;
    border-top: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: 10.5px;
    line-height: 1.5;
}
.status-home-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 154px;
    margin: 22px auto 0;
    padding: 12px 20px;
    border: 0;
    border-radius: 12px;
    background: var(--color-solid-dark);
    color: var(--color-solid-dark-text) !important;
    font: 700 13px/1 var(--font-body);
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadow-subtle);
    transition: transform .2s ease, opacity .2s ease;
}
.status-home-btn:hover { transform: translateY(-1px); }
.status-home-btn--hidden { display: none; }
.notification-status--error .notification-status__final-icon {
    width: 70px;
    height: 70px;
    border-radius: 22px;
    margin: 8px auto 20px;
    display: grid;
    place-items: center;
    color: var(--color-danger);
    background: var(--color-danger-bg);
}
.notification-status--error .notification-status__final-icon svg { width: 32px; height: 32px; }
@media (max-width: 430px) {
    .notification-card { min-height: 470px; }
    .status-visual { width: 140px; height: 140px; }
    .status-timeline__line { width: 42px; }
    .status-title { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .status-orbit,
    .status-icon,
    .status-timeline__dot,
    .status-progress-bar::after { animation: none !important; }
    .status-progress-bar { transition-duration: .15s; }
}

/* ── Subscription package selection cards (subscribe.php) ── */
.package-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 20px 0;
}
.package-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    border-radius: var(--radius-card);
    background: var(--color-card);
    box-shadow: var(--shadow-inset);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.package-card:has(input:checked) {
    border-color: var(--color-accent);
    background: var(--color-accent-bg);
}
.package-card input[type=radio] {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 18px;
    height: 18px;
    accent-color: var(--color-accent);
}
.package-card__badge {
    position: absolute;
    top: -10px;
    left: 16px;
    background: var(--color-accent);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .3px;
    padding: 3px 10px;
    border-radius: 999px;
}
.package-card__name { font-size: 15px; font-weight: 700; color: var(--color-ink); padding-right: 30px; }
.package-card__price { font-size: 22px; font-weight: 800; color: var(--color-accent); }
.package-card__desc { font-size: 12.5px; color: var(--color-muted); }

/* ── Subscription status card (owner_dashboard.php) ── */
.subscription-card {
    margin-bottom: 24px;
    padding: 18px 20px;
    border-radius: var(--radius-card);
    background: var(--color-card);
    box-shadow: var(--shadow-inset);
    border: 1.5px solid transparent;
}
.subscription-card--active { border-color: color-mix(in srgb, var(--color-success) 35%, transparent); }
.subscription-card--expired { border-color: color-mix(in srgb, var(--color-danger) 35%, transparent); }
.subscription-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.subscription-card__title { font-size: 13px; font-weight: 700; color: var(--color-ink); text-transform: uppercase; letter-spacing: .3px; }
.subscription-card__badge {
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
}
.subscription-card--active .subscription-card__badge { background: var(--color-success-bg); color: var(--color-success); }
.subscription-card--expired .subscription-card__badge { background: var(--color-danger-bg); color: var(--color-danger); }
.subscription-card__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}
.subscription-card__label { font-size: 11px; color: var(--color-muted); margin-bottom: 2px; }
.subscription-card__value { font-size: 14.5px; font-weight: 700; color: var(--color-ink); }
.subscription-card__note {
    margin: 14px 0 0;
    font-size: 12.5px;
    color: var(--color-danger);
    line-height: 1.5;
}
.subscription-card__cta {
    display: block;
    text-align: center;
    margin-top: 16px;
    padding: 11px;
    border-radius: var(--radius-el);
    background: var(--color-accent);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
}

/* ── Collapsible "Bildirim Geçmişi" toggle (owner_dashboard.php) ── */
.history-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 4px 0 12px;
    margin: 0;
    cursor: pointer;
    text-align: left;
    color: var(--color-ink);
    font: inherit;
}
/* Overriding the generic button/.btn hover/active/focus rules
   elsewhere in this file — those give the site's primary action
   buttons a solid accent-blue fill, which .history-toggle alone can't
   out-specificity since button:hover/:active add a pseudo-class to
   the selector. This is a plain text toggle, not a call-to-action
   button, so it keeps its transparent background at every state. */
.history-toggle:hover, .history-toggle:active {
    background: none;
    transform: none;
}
.history-toggle:focus-visible {
    background: none;
    transform: none;
    outline: 2px solid var(--color-accent-2);
    outline-offset: 2px;
}
.history-toggle__title {
    font-family: var(--font-display);
    font-size: 15px;
    text-transform: uppercase;
    color: var(--color-ink);
}
.history-toggle__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: 999px;
    background: var(--color-accent-bg);
    color: var(--color-accent);
    font-size: 11.5px;
    font-weight: 800;
    text-transform: none;
    vertical-align: middle;
}
.history-toggle__chevron {
    flex-shrink: 0;
    color: var(--color-muted);
    transition: transform .2s ease;
}
.history-toggle[aria-expanded="true"] .history-toggle__chevron {
    transform: rotate(180deg);
}