/*
 * HI-BOND — Optimize My Mix Questionnaire Modal
 * ─────────────────────────────────────────────────────────────
 * KEY FIX: overlay uses visibility:hidden (NOT display:none).
 * This keeps every child element permanently in the rendering
 * tree so CSS transitions fire correctly on iOS Safari, Android
 * Chrome, and all other mobile browsers.
 * ─────────────────────────────────────────────────────────────
 */

/* ── Design tokens ─────────────────────────────────────────── */
:root {
    --oq-blue:      #005db5;
    --oq-blue-d:    #00439b;
    --oq-blue-100:  #dbeafe;
    --oq-blue-50:   #eff6ff;
    --oq-green:     #16a34a;
    --oq-red:       #dc2626;
    --oq-slate-50:  #f8fafc;
    --oq-slate-100: #f1f5f9;
    --oq-slate-200: #e2e8f0;
    --oq-slate-400: #94a3b8;
    --oq-slate-500: #64748b;
    --oq-slate-700: #334155;
    --oq-slate-900: #0f172a;
    --oq-radius:    12px;
    --oq-shadow:    0 24px 64px rgba(0,40,100,.16), 0 4px 16px rgba(0,0,0,.06);
}

/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes oqBounceIn {
    0%   { opacity:0; transform:scale(.22) }
    60%  { transform:scale(1.1) }
    85%  { transform:scale(.94) }
    100% { opacity:1; transform:scale(1) }
}
@keyframes oqSpin   { to { transform:rotate(360deg) } }
@keyframes oqShake  {
    0%,100% { transform:translateX(0) }
    25%     { transform:translateX(-4px) }
    75%     { transform:translateX(4px) }
}
@keyframes oqFadeUp {
    from { opacity:0; transform:translateY(6px) }
    to   { opacity:1; transform:translateY(0) }
}

/* ── Overlay ───────────────────────────────────────────────── */
/*
 * ALWAYS display:flex — never display:none.
 * Hiding/showing is done via visibility + opacity only.
 * This ensures the rendering tree is never destroyed, which
 * is what causes iOS Safari to skip transitions.
 */
.hbsm-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;

    /* Hidden state */
    visibility: hidden;
    pointer-events: none;
    /* Delay visibility:hidden until fade-out finishes */
    transition: visibility 0s linear .28s;
}

.hbsm-overlay.open {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s; /* Become visible immediately on open */
}

/* ── Backdrop ──────────────────────────────────────────────── */
.hbsm-bd {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(6, 14, 38, 0.80);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    opacity: 0;
    transition: opacity .26s ease;
}
.hbsm-overlay.open .hbsm-bd { opacity: 1; }

/* ── Modal card ────────────────────────────────────────────── */
.hbsm-modal {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: var(--oq-radius);
    width: 100%;
    max-width: 900px;
    /*
     * height + max-height together: the modal grows to fit its content up to
     * 88vh, then stops.  flex:1 on .hbsm-body requires a definite height on
     * the parent flex container — max-height alone is NOT sufficient in some
     * browsers (notably Safari).  Using height:88vh + max-height:88vh is
     * equivalent to clamp(content, 88vh) and guarantees the body scrolls.
     */
    height: 88vh;
    max-height: 88vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--oq-shadow);

    /* Hidden/entry state — transitions fire because element is always rendered */
    opacity: 0;
    transform: translateY(14px) scale(.97);
    transition: opacity .28s ease, transform .34s cubic-bezier(.34,1.4,.64,1);
}
.hbsm-overlay.open .hbsm-modal {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ── Mobile drag handle ────────────────────────────────────── */
.hbsm-handle {
    display: none;
    width: 36px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 10px auto 0;
    flex-shrink: 0;
}

/* ── Modal header ──────────────────────────────────────────── */
.hbsm-hdr {
    background: linear-gradient(135deg, var(--oq-blue), var(--oq-blue-d));
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-shrink: 0;
}
.hbsm-hdr-left {
    display: flex;
    align-items: center;
    gap: .875rem;
    min-width: 0;
}
.hbsm-hdr-logo {
    height: 26px;
    width: auto;
    filter: brightness(0) invert(1);
    flex-shrink: 0;
}
.hbsm-hdr-divider {
    width: 1px;
    height: 28px;
    background: rgba(255,255,255,.22);
    flex-shrink: 0;
}
.hbsm-hdr-info  { display:flex; flex-direction:column; gap:1px; min-width:0; }
.hbsm-hdr-eyebrow {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.6);
}
.hbsm-hdr-title {
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hbsm-close-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255,255,255,.12);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background .16s;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.hbsm-close-btn:hover { background: rgba(255,255,255,.22); }
.hbsm-close-btn svg  { width:16px; height:16px; display:block; }

/* ── Scrollable body ───────────────────────────────────────── */
.hbsm-body {
    flex: 1;
    min-height: 0; /* Required: lets flex child shrink so max-height on modal is respected and body scrolls */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.hbsm-body::-webkit-scrollbar       { width: 4px; }
.hbsm-body::-webkit-scrollbar-track { background: transparent; }
.hbsm-body::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 99px; }

/* ── Contact summary bar ───────────────────────────────────── */
.hbsm-contact-bar {
    margin: 1rem 1.5rem 0;
    padding: .55rem .9rem;
    background: var(--oq-blue-50);
    border: 1.5px solid #bfdbfe;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .775rem;
    color: var(--oq-slate-700);
    line-height: 1.5;
}
.hbsm-contact-bar svg    { width:14px; height:14px; color:var(--oq-blue); flex-shrink:0; margin-top:1px; }
.hbsm-contact-bar strong { color:var(--oq-blue); font-weight:600; }

/* ── Section ───────────────────────────────────────────────── */
.hbsm-section {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--oq-slate-100);
}
.hbsm-section:last-child { border-bottom: none; }

.hbsm-sec-hd {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin-bottom: .9rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--oq-slate-100);
}
.hbsm-sec-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--oq-blue-100);
    color: var(--oq-blue);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .03em;
    flex-shrink: 0;
}
.hbsm-sec-title {
    font-size: .72rem;
    font-weight: 700;
    color: var(--oq-blue);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* ── Question block ────────────────────────────────────────── */
.hbsm-q { margin-bottom: 1rem; }
.hbsm-q:last-child { margin-bottom: 0; }

.hbsm-q-lbl {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--oq-slate-900);
    margin-bottom: .45rem;
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-wrap: wrap;
    line-height: 1.4;
}
.hbsm-q-sub { font-size:.7rem; font-weight:400; color:var(--oq-slate-400); }
.hbsm-req   { color:var(--oq-red); font-size:.7rem; }

/* ── Option grid ───────────────────────────────────────────── */
.hbsm-opts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .35rem;
}
.hbsm-opts.c2  { grid-template-columns: repeat(2, 1fr); }
.hbsm-opts.c2m { grid-template-columns: repeat(2, 1fr); max-width: 380px; }
.hbsm-opts.c1  { grid-template-columns: 1fr; max-width: 460px; }

/* ── Option label / card ───────────────────────────────────── */
.hbsm-opt {
    position: relative;
    cursor: pointer;
    display: block;
}
.hbsm-opt input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.hbsm-opt-card {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-radius: 7px;
    border: 1.5px solid var(--oq-slate-200);
    background: #fff;
    font-size: .7875rem;
    font-weight: 500;
    color: var(--oq-slate-700);
    min-height: 40px;
    cursor: pointer;
    user-select: none;
    line-height: 1.3;
    transition: border-color .14s, background .14s, color .14s;
    -webkit-tap-highlight-color: transparent;
}
.hbsm-opt-card:hover {
    border-color: var(--oq-blue);
    background: var(--oq-blue-50);
    color: var(--oq-blue);
}

/* Indicator: circle = radio, rounded square = checkbox */
.hbsm-indicator {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid #cbd5e1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .14s, border-color .14s;
}
.hbsm-opt.cb .hbsm-indicator { border-radius: 4px; }
.hbsm-indicator svg { width:9px; height:9px; color:#fff; display:none; flex-shrink:0; }

/* Selected */
.hbsm-opt input:checked ~ .hbsm-opt-card {
    border-color: var(--oq-blue);
    background: var(--oq-blue-100);
    color: var(--oq-blue);
    font-weight: 600;
    box-shadow: 0 0 0 3px rgba(0,93,181,.07);
}
.hbsm-opt input:checked ~ .hbsm-opt-card .hbsm-indicator {
    background: var(--oq-blue);
    border-color: var(--oq-blue);
}
.hbsm-opt input:checked ~ .hbsm-opt-card .hbsm-indicator svg { display:block; }

/* Error */
.hbsm-q.has-err .hbsm-opt-card { border-color:#fca5a5; background:#fef2f2; }
.hbsm-q.has-err .hbsm-opt input:checked ~ .hbsm-opt-card {
    border-color: var(--oq-blue);
    background: var(--oq-blue-100);
}
.hbsm-verr {
    display: none;
    color: var(--oq-red);
    font-size: .72rem;
    margin-top: .3rem;
    font-weight: 500;
}
.hbsm-q.has-err .hbsm-verr {
    display: block;
    animation: oqShake .3s ease both;
}

/* ── File upload ───────────────────────────────────────────── */
.hbsm-upload-zone {
    position: relative;
    border: 1.5px dashed #cbd5e1;
    border-radius: 10px;
    padding: 1.375rem 1rem;
    text-align: center;
    cursor: pointer;
    background: var(--oq-slate-50);
    transition: border-color .16s, background .16s;
}
.hbsm-upload-zone:hover,
.hbsm-upload-zone.drag { border-color:var(--oq-blue); background:var(--oq-blue-50); }

.hbsm-upload-inp {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.hbsm-upload-ico   { width:32px; height:32px; color:var(--oq-blue); margin:0 auto .5rem; display:block; opacity:.7; }
.hbsm-upload-title { font-size:.8125rem; font-weight:600; color:var(--oq-slate-700); margin-bottom:.2rem; }
.hbsm-upload-hint  { font-size:.7rem; color:var(--oq-slate-400); }

.hbsm-file-prev {
    display: none;
    align-items: center;
    gap: .5rem;
    padding: .5rem .875rem;
    background: var(--oq-blue-100);
    border: 1.5px solid #93c5fd;
    border-radius: 7px;
    margin-top: .5rem;
    animation: oqFadeUp .2s ease both;
}
.hbsm-file-prev.vis { display:flex; }
.hbsm-file-name {
    flex: 1;
    min-width: 0;
    font-size: .775rem;
    font-weight: 600;
    color: var(--oq-slate-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hbsm-file-rm { background:none; border:none; cursor:pointer; color:#94a3b8; padding:2px; flex-shrink:0; line-height:1; }
.hbsm-file-rm:hover { color:var(--oq-red); }
.hbsm-file-rm svg { width:14px; height:14px; display:block; }

/* ── Footer ────────────────────────────────────────────────── */
.hbsm-ftr {
    background: #fff;
    border-top: 1px solid var(--oq-slate-100);
    padding: .875rem 1.5rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    box-shadow: 0 -1px 0 var(--oq-slate-100), 0 -6px 18px rgba(0,0,0,.04);
}
.hbsm-ftr-note      { font-size:.7rem; color:var(--oq-slate-400); margin:0; white-space:nowrap; }
.hbsm-ftr-note span { color:var(--oq-red); }

.hbsm-sub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .7rem 1.75rem;
    background: var(--oq-blue);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 2px 8px rgba(0,93,181,.28);
    transition: background .16s, box-shadow .16s, transform .12s;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.hbsm-sub-btn svg    { width:16px; height:16px; flex-shrink:0; }
.hbsm-sub-btn:hover  { background:var(--oq-blue-d); box-shadow:0 4px 14px rgba(0,93,181,.4); }
.hbsm-sub-btn:active { transform:translateY(1px); }
.hbsm-sub-btn:disabled { opacity:.65; cursor:not-allowed; transform:none; }
.hbsm-spin { animation:oqSpin .7s linear infinite; display:inline-block; }

/* ── Success overlay ───────────────────────────────────────── */
.hbsm-success {
    display: none;
    position: absolute;
    inset: 0;
    background: #fff;
    border-radius: var(--oq-radius);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2.5rem 2rem;
}
.hbsm-success.vis { display:flex; animation:oqFadeUp .32s ease both; }

.hbsm-suc-ring {
    width: 68px;
    height: 68px;
    background: linear-gradient(135deg, #16a34a, #15803d);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.125rem;
    box-shadow: 0 8px 24px rgba(22,163,74,.28);
    animation: oqBounceIn .52s cubic-bezier(.34,1.56,.64,1) both;
}
.hbsm-suc-ring svg { width:34px; height:34px; color:#fff; }
.hbsm-suc-h {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--oq-slate-900);
    margin-bottom: .5rem;
}
.hbsm-suc-p {
    font-size: .875rem;
    color: var(--oq-slate-500);
    max-width: 360px;
    margin: 0 auto .375rem;
    line-height: 1.65;
}
.hbsm-suc-ref {
    font-size: .8rem;
    font-weight: 700;
    color: var(--oq-blue);
    margin-bottom: 1.625rem;
    letter-spacing: .04em;
}
.hbsm-suc-back {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--oq-blue);
    color: #fff;
    padding: .7rem 1.625rem;
    border-radius: 8px;
    font-size: .875rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background .16s;
    text-decoration: none;
}
.hbsm-suc-back:hover { background:var(--oq-blue-d); color:#fff; }
.hbsm-suc-back svg { width:15px; height:15px; }

/* ── Lead form field errors ────────────────────────────────── */
.hb-opt-lead-input-shell input.hbq-invalid {
    border-color: var(--oq-red) !important;
    box-shadow: 0 0 0 3px rgba(220,38,38,.09) !important;
}
.hb-opt-lead-field .hbq-fld-err {
    color: var(--oq-red);
    font-size: .72rem;
    margin-top: 3px;
    display: none;
}
.hb-opt-lead-field .hbq-fld-err.show { display:block; animation:oqShake .3s ease both; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .hbsm-opts { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 640px) {
    .hbsm-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .hbsm-handle { display:block; }

    .hbsm-modal {
        border-radius: 16px 16px 0 0;
        width: 100%;
        max-width: 100%;
        /* Stable height: svh respects browser chrome, dvh as enhancement */
        height: 92vh;
        height: 92svh;
        max-height: none;
        /* Mobile: slide up from bottom (no scale) */
        transform: translateY(56px);
        opacity: 0;
    }
    .hbsm-overlay.open .hbsm-modal {
        transform: translateY(0);
        opacity: 1;
    }

    .hbsm-hdr          { padding:.875rem 1rem; }
    .hbsm-hdr-divider,
    .hbsm-hdr-eyebrow  { display:none; }

    .hbsm-contact-bar  { margin:.875rem 1rem 0; font-size:.72rem; }
    .hbsm-section      { padding:1rem; }
    .hbsm-sec-hd       { margin-bottom:.75rem; padding-bottom:.625rem; }

    .hbsm-q-lbl        { font-size:.8rem; }
    .hbsm-opt-card     { font-size:.8rem; min-height:44px; }

    .hbsm-ftr {
        padding: .75rem 1rem;
        /* Safe area for phones with home indicator */
        padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
        flex-wrap: wrap;
    }
    .hbsm-sub-btn { width:100%; justify-content:center; padding:.8rem 1rem; }

    /* Single column on mobile */
    .hbsm-opts,
    .hbsm-opts.c2 { grid-template-columns:1fr; }
    .hbsm-opts.c2m { grid-template-columns:repeat(2,1fr); max-width:100%; }
}

@media (max-width: 380px) {
    .hbsm-opts.c2m { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .hbsm-modal,
    .hbsm-bd            { transition:none !important; }
    .hbsm-suc-ring      { animation:none !important; }
    .hbsm-verr.show,
    .hbq-fld-err.show   { animation:none !important; }
}



/* ==========================================================
   Optimize My Mix - Mobile Plain Background
   ========================================================== */

@media (max-width: 767.98px) {

    /* Card layout remains unchanged */
    .hb-opt-lead-card {
        overflow: hidden;
    }

    /* Plain branded background */
    .hb-opt-lead-left {
        background: linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f9fc 45%,
            #eef5ff 100%
        ) !important;
        position: relative;
    }

    /* Remove image background */
    .hb-opt-lead-media {
        display: none !important;
    }

    /* Remove dark overlay */
    .hb-opt-lead-overlay {
        display: none !important;
    }

    /* Improve readability */
    .hb-opt-lead-content {
        position: relative;
        z-index: 2;
    }

    .hb-opt-lead-title,
    .hb-opt-lead-title-top,
    .hb-opt-lead-title-brand,
    .hb-opt-lead-text {
        color: #0f172a;
    }

    .hb-opt-lead-divider {
        background: #005db5;
    }

    .hb-opt-lead-logo {
        filter: none;
    }
}