/* ═══════════════════════════════════════════════════════════════════════════
   Instant Callback Request (.hzo-callback) — W-041

   The lowest-friction phone-first lead form: masked tel field + "Call me back",
   optional when-window chips (native radios), a promise line that swaps to
   after-hours copy, and a success surface (countdown / thank-you / tel). The
   default strip is a single column; layout=inline packs field+CTA on one row
   (auto-collapsing on a narrow container, no JS); layout=card wraps it in a
   surface panel.

   Tokens ONLY — --space-* / --radius-* / --shadow-* / --dur-* / --ease-* /
   --border-* / --text-* / --surface / --accent* / --error* / --focus-ring /
   --fs-* / --lh-*. No hardcoded hex; px only for hairline borders / icon sizing
   where existing components already do. The widget renders no top-layer surface,
   so it claims NO z-index (inline errors never elevate above --z-toast).

   GATING: ALWAYS-LOAD (callback.php un-gates the shortcode) — the CSS ships
   wherever the shortcode can render (sticky/hero/footer).
   ═══════════════════════════════════════════════════════════════════════════ */

.hzo-callback {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin: 0;
    max-width: 32rem;
    text-align: start;
}
.hzo-callback--align-center { margin-inline: auto; align-items: stretch; text-align: center; }
.hzo-callback--align-start  { margin-inline: 0; }

/* ── Card layout: elevate onto a surface panel ── */
.hzo-callback--card {
    padding: var(--space-lg);
    background: var(--surface);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-2);
}

.hzo-callback__heading {
    margin: 0;
    font-size: var(--fs-500);
    line-height: var(--lh-snug);
    color: var(--text-heading);
}

/* ── Promise line (in-hours ↔ after-hours copy swap target) ── */
.hzo-callback__promise {
    margin: 0;
    color: var(--text-body);
    font-size: var(--fs-200);
    line-height: var(--lh-normal);
    transition: color var(--dur-1) var(--ease-standard);
}
.hzo-callback.is-after-hours .hzo-callback__promise { color: var(--text-muted); }

/* ── Field ── */
.hzo-callback__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}
.hzo-callback__label {
    font-size: var(--fs-100);
    font-weight: 600;
    color: var(--text-heading);
    line-height: var(--lh-snug);
}
.hzo-callback__input {
    width: 100%;
    padding: var(--space-smd) var(--space-md);
    font-size: var(--fs-300);          /* ≥16px avoids iOS zoom-on-focus */
    font-family: var(--font-body);
    color: var(--text-body);
    background: var(--bg-page);
    border: var(--border-1) solid var(--input-border, var(--border));
    border-radius: var(--radius-1);
    min-height: 48px;
    transition: border-color var(--dur-1) var(--ease-standard), box-shadow var(--dur-1) var(--ease-standard);
}
.hzo-callback__input:focus-visible {
    outline: var(--border-2) solid var(--focus-ring);
    outline-offset: var(--space-2xs);
    border-color: var(--focus-ring);
}
/* Visible error border (never invisible — G49) + error-tinted ring. */
.hzo-callback__input--error,
.hzo-callback__input[aria-invalid="true"] {
    border-color: var(--error);
}
.hzo-callback__input--error:focus-visible,
.hzo-callback__input[aria-invalid="true"]:focus-visible {
    outline-color: var(--error);
    border-color: var(--error);
}

.hzo-callback__error {
    color: var(--error-ink);
    font-size: var(--fs-100);
    line-height: var(--lh-snug);
}

/* ── When-window chips (native radios styled as chips; APG radiogroup) ── */
.hzo-callback__window {
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.hzo-callback__legend {
    padding: 0;
    font-size: var(--fs-100);
    font-weight: 600;
    color: var(--text-heading);
}
.hzo-callback__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}
.hzo-callback__chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;                 /* comfortable tap height */
    padding: var(--space-sm) var(--space-md);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-full);
    color: var(--text-body);
    background: var(--bg-page);
    font-size: var(--fs-100);
    line-height: 1;
    cursor: pointer;
    transition: border-color var(--dur-1) var(--ease-standard),
                background var(--dur-1) var(--ease-standard),
                color var(--dur-1) var(--ease-standard);
}
.hzo-callback__chip:hover { border-color: var(--accent-text); }
/* The real radio is visually hidden but focus lands on it → ring the label. */
.hzo-callback__chip-input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    inset: 0;
    cursor: pointer;
}
.hzo-callback__chip:has(.hzo-callback__chip-input:checked) {
    background: var(--accent-pale);
    border-color: var(--accent-text);
    color: var(--accent-text);
    font-weight: 600;
}
.hzo-callback__chip:has(.hzo-callback__chip-input:focus-visible) {
    outline: var(--border-2) solid var(--focus-ring);
    outline-offset: var(--space-2xs);
}
.hzo-callback__chip:active { transform: translateY(1px); }

/* ── Consent (TCPA) ── */
.hzo-callback__consent { font-size: var(--fs-75); color: var(--text-muted); line-height: var(--lh-normal); }
.hzo-callback__consent-label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    cursor: pointer;
}
.hzo-callback__consent-box {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--accent-text);
}
.hzo-callback__consent-box:focus-visible {
    outline: var(--border-2) solid var(--focus-ring);
    outline-offset: var(--space-2xs);
}
.hzo-callback__consent-text { margin: 0; }

/* ── Honeypot — off-screen, never shown, never announced ── */
.hzo-callback__hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ── Submit CTA (extends .hzo-btn --primary; adds a busy spinner) ── */
.hzo-callback__submit {
    position: relative;
    width: 100%;
}
.hzo-callback--inline .hzo-callback__submit { width: auto; }
.hzo-callback__spinner {
    display: none;
    width: 1em;
    height: 1em;
    margin-inline-start: var(--space-sm);
    border: var(--border-2) solid currentColor;
    border-top-color: transparent;
    border-radius: var(--radius-full);
    animation: hzo-callback-spin var(--dur-4) linear infinite;
}
.hzo-callback__submit.is-loading .hzo-callback__spinner { display: inline-block; }
@keyframes hzo-callback-spin { to { transform: rotate(360deg); } }

/* ── Inline layout: field + CTA share a row; collapses on a narrow container ── */
.hzo-callback--inline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    max-width: none;
}
.hzo-callback--inline .hzo-callback__promise { flex: 1 0 100%; }
.hzo-callback--inline .hzo-callback__field { flex: 1 1 12rem; }
@container (max-width: 26rem) {
    .hzo-callback--inline { flex-direction: column; align-items: stretch; }
    .hzo-callback--inline .hzo-callback__submit { width: 100%; }
}

/* ── Success surface (role=status; server ships it hidden + empty) ── */
.hzo-callback__success {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-items: inherit;
}
.hzo-callback--align-center .hzo-callback__success { align-items: center; text-align: center; }
.hzo-callback__success-title {
    margin: 0;
    font-size: var(--fs-400);
    line-height: var(--lh-snug);
    color: var(--text-heading);
}
.hzo-callback__success-title:focus-visible {
    outline: var(--border-2) solid var(--focus-ring);
    outline-offset: var(--space-2xs);
    border-radius: var(--radius-1);
}
.hzo-callback__success-text { margin: 0; color: var(--text-body); font-size: var(--fs-200); }

/* success=tel — a real, tappable, ≥44px tel link (never auto-dials) ── */
.hzo-callback__success-tel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: var(--space-smd) var(--space-lg);
    border-radius: var(--radius-full);
    background: var(--accent-pale);
    color: var(--accent-text);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--dur-1) var(--ease-standard);
}
.hzo-callback__success-tel:hover { background: var(--accent); color: var(--text-on-accent); }
.hzo-callback__success-tel:focus-visible {
    outline: var(--border-2) solid var(--focus-ring);
    outline-offset: var(--space-2xs);
}

/* ── Countdown ring (decorative; number carries the meaning) ── */
.hzo-callback__countdown {
    --hzo-cb-progress: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}
.hzo-callback__countdown-num {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--radius-full);
    font-size: var(--fs-500);
    font-family: var(--font-number, var(--font-body));
    font-weight: 700;
    color: var(--accent-text);
    /* Decorative progress dial: an accent wedge grows over a quiet track as the
       countdown elapses (--hzo-cb-progress 0→1). The inner disc keeps the number
       legible. Purely visual — the number/text carry the meaning. */
    background:
        radial-gradient(var(--surface) 54%, transparent 55%),
        conic-gradient(var(--accent) calc(var(--hzo-cb-progress) * 360deg), var(--border) 0deg);
}
.hzo-callback__countdown-text { color: var(--text-body); font-size: var(--fs-100); }

/* ═══ Reduced motion — spinner slows (never freezes), ring goes static ═══════ */
@media (prefers-reduced-motion: reduce) {
    .hzo-callback__spinner { animation-duration: 2s; }
    .hzo-callback__countdown-num { background: var(--surface-2); }
    .hzo-callback__promise,
    .hzo-callback__input,
    .hzo-callback__chip,
    .hzo-callback__success-tel { transition: none; }
}

/* ═══ Forced colors — real borders + aria-invalid carry state (never shadow/
   opacity alone); the ring falls back to the static remaining-time text ═══════ */
@media (forced-colors: active) {
    .hzo-callback__input { border: 1px solid ButtonBorder; }
    .hzo-callback__input[aria-invalid="true"] { border-color: Mark; }
    .hzo-callback__chip { border: 1px solid ButtonBorder; }
    .hzo-callback__chip:has(.hzo-callback__chip-input:checked) { border-color: Highlight; }
    .hzo-callback__countdown-num { background: ButtonFace; forced-color-adjust: none; }
}

/* ═══ Print — force the form + promise + consent visible; hide the ring; keep
   the success tel number so a printed estimate keeps the callback path ═══════ */
@media print {
    .hzo-callback,
    .hzo-callback__promise,
    .hzo-callback__consent { display: flex !important; }
    .hzo-callback__spinner,
    .hzo-callback__countdown-num { display: none !important; }
    .hzo-callback__success[hidden] { display: block !important; }
}