/* ============================================================
   Sign-up / log-in modal — ported from /topics (hotbot_search T02 css/topics.tpl).
   Self-contained, light-only: the design tokens are scoped to .hb-auth-overlay
   (NOT :root) so they can't leak into or collide with the hb-network theme.
   Markup: template-parts/auth-modal.php. Behavior: js/auth-modal.js.
   ============================================================ */

.hb-auth-overlay {
    /* Scoped tokens (light palette). Descendants inherit these via the cascade. */
    --c-bg: #ffffff;
    --c-bg-secondary: #f8f9fa;
    --c-text-primary: #1f1f1f;
    --c-text-secondary: #474747;
    --c-text-tertiary: #757575;
    --c-border: #e0e0e0;
    --c-surface: #f8f9fa;
    --c-surface-hover: #f1f3f4;
    --c-error: #ea4335;
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 16px;
    --sp-4: 24px;
    --sp-5: 32px;
    --sp-6: 48px;
    --transition-fast: 0.15s ease;

    position: fixed;
    inset: 0;
    /* Above the theme's fixed header (.site-search-bar.fixed-top z-index:9999,
       .site-header z-index:90000) and the WordPress admin bar (99999). */
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    padding: var(--sp-3);
}
.hb-auth-overlay[aria-hidden="true"] { display: none; }
.hb-auth-overlay [hidden] { display: none !important; }
body.hb-auth-open { overflow: hidden; }

.hb-auth-dialog {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 960px;
    max-height: 90vh;
    background: var(--c-bg);
    color: var(--c-text-primary);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

/* Left promo pane */
.hb-auth-promo {
    width: 50%;
    flex-shrink: 0;
    background: var(--c-bg-secondary);
    border-right: 1px solid var(--c-border);
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}
.hb-auth-promo-top { width: 100%; display: flex; flex-direction: column; align-items: center; }
.hb-auth-promo-label { font-size: 12px; color: var(--c-text-tertiary); margin: 0 0 var(--sp-2); }
.hb-auth-avail { margin-top: var(--sp-4); }
.hb-auth-powered {
    display: flex; align-items: center; gap: 14px;
    border: 1px solid var(--c-border); border-radius: 999px;
    padding: var(--sp-2) var(--sp-3);
}
.hb-auth-powered span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--c-text-primary); }
.hb-auth-powered img { display: block; }
.hb-auth-browsers { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-2); }
.hb-auth-browser {
    width: 40px; height: 40px; border-radius: 999px;
    background: var(--c-bg); border: 1px solid var(--c-border);
    display: flex; align-items: center; justify-content: center;
}
.hb-auth-promo-title { font-size: 22px; font-weight: 700; margin: var(--sp-5) 0 var(--sp-3); text-align: center; color: var(--c-text-primary); }

.hb-auth-marquee { width: 100%; overflow: hidden; }
.hb-auth-track { display: flex; gap: var(--sp-3); width: max-content; animation: hb-auth-scroll 40s linear infinite; }
.hb-auth-marquee:hover .hb-auth-track { animation-play-state: paused; }
@keyframes hb-auth-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-50% - 8px)); }
}
@media (prefers-reduced-motion: reduce) {
    .hb-auth-track { animation: none; flex-wrap: nowrap; overflow-x: auto; }
}
.hb-auth-tcard {
    width: 240px; flex-shrink: 0;
    background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 14px;
    padding: var(--sp-3); display: flex; flex-direction: column; gap: 6px;
}
.hb-auth-tcard-head { display: flex; align-items: center; gap: var(--sp-2); }
.hb-auth-tcard-name { font-weight: 700; font-size: 13px; }
.hb-auth-tcard-stars { color: #f5b301; font-size: 13px; letter-spacing: 1px; }
.hb-auth-tcard-verified { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--c-text-tertiary); }
.hb-auth-tcard-verified svg { width: 14px; height: 14px; color: var(--c-text-primary); flex-shrink: 0; }
.hb-auth-tcard-text { font-size: 12px; color: var(--c-text-secondary); margin: 4px 0 0; line-height: 1.4; }
.hb-auth-tcard-time { font-size: 11px; color: var(--c-text-tertiary); margin-top: auto; text-align: right; }

/* Right auth pane */
.hb-auth-pane { width: 50%; flex-grow: 1; position: relative; padding: var(--sp-6) var(--sp-5); overflow-y: auto; }
.hb-auth-body { display: flex; flex-direction: column; }
.hb-auth-close {
    position: absolute; top: 12px; right: 12px;
    width: 40px; height: 40px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 0; border-radius: 999px; cursor: pointer;
    color: var(--c-text-tertiary); z-index: 2;
}
.hb-auth-close:hover { color: var(--c-text-primary); background: var(--c-surface-hover); }
.hb-auth-heading { font-size: 28px; font-weight: 700; text-align: center; margin: 0 0 var(--sp-2); color: var(--c-text-primary); }
.hb-auth-subheading { font-size: 14px; text-align: center; margin: 0 0 var(--sp-4); color: var(--c-text-secondary); }

.hb-auth-methods { display: flex; flex-direction: column; gap: var(--sp-2); }
.hb-auth-method {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 100%; padding: 13px var(--sp-5);
    background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 12px;
    font-size: 15px; font-weight: 500; font-family: inherit; color: var(--c-text-primary);
    text-decoration: none; cursor: pointer; transition: background var(--transition-fast);
}
.hb-auth-method:hover { background: var(--c-surface-hover); }
.hb-auth-overlay.is-busy .hb-auth-method,
.hb-auth-overlay.is-busy .hb-auth-textbtn { pointer-events: none; opacity: 0.6; }
.hb-auth-ic { position: absolute; left: 16px; display: flex; align-items: center; }

.hb-auth-emailform { display: flex; flex-direction: column; gap: var(--sp-3); }
.hb-auth-divider { display: flex; align-items: center; gap: var(--sp-3); }
.hb-auth-divider::before, .hb-auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--c-border); }
.hb-auth-divider span { font-size: 14px; color: var(--c-text-tertiary); white-space: nowrap; }
.hb-auth-input-wrap { position: relative; }
.hb-auth-input-ic { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); color: var(--c-text-tertiary); display: flex; pointer-events: none; }
.hb-auth-input {
    width: 100%; padding: 14px 16px 14px 44px;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 12px;
    font-size: 16px; font-family: inherit; color: var(--c-text-primary); outline: none;
    transition: border-color var(--transition-fast);
}
.hb-auth-input:focus { border-color: var(--c-text-tertiary); }
.hb-auth-input::placeholder { color: var(--c-text-tertiary); }
.hb-auth-status { font-size: 14px; margin: 0; color: var(--c-text-secondary); }
.hb-auth-status.is-error { color: var(--c-error); }
.hb-auth-submit {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    width: 100%; padding: 14px; margin-top: var(--sp-1);
    background: #306DE5; color: #fff; border: 0; border-radius: 12px;
    font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer;
    transition: background var(--transition-fast);
}
.hb-auth-submit:hover { background: #2a5fd0; }
.hb-auth-submit:disabled { opacity: 0.6; cursor: default; }
.hb-auth-spinner {
    width: 16px; height: 16px; border-radius: 999px;
    border: 3px solid rgba(255, 255, 255, 0.4); border-top-color: #fff;
    animation: hb-auth-spin 0.7s linear infinite;
}
@keyframes hb-auth-spin { to { transform: rotate(360deg); } }
.hb-auth-hint { font-size: 12px; color: var(--c-text-tertiary); text-align: center; line-height: 1.5; margin: var(--sp-2) 0 0; }
.hb-auth-legal { font-size: 12px; color: var(--c-text-tertiary); text-align: center; line-height: 1.5; margin: var(--sp-4) 0 0; }
.hb-auth-legal a { color: inherit; text-decoration: underline; }

.hb-auth-checkemail { text-align: center; padding: var(--sp-3) 0; }
.hb-auth-checkemail-ic {
    width: 40px; height: 40px; margin: 0 auto var(--sp-3);
    display: flex; align-items: center; justify-content: center; border-radius: 999px;
    background: rgba(48, 109, 229, 0.12); color: #306DE5;
}
.hb-auth-checkemail-title { font-size: 15px; font-weight: 600; margin: 0; color: var(--c-text-primary); }
.hb-auth-checkemail-msg { font-size: 14px; color: var(--c-text-secondary); margin: var(--sp-2) 0 var(--sp-3); }
.hb-auth-textbtn { background: none; border: 0; color: #306DE5; font-size: 14px; font-family: inherit; cursor: pointer; text-decoration: underline; padding: 0; }

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

/* Mobile: full-screen, single column, promo hidden, no backdrop click */
@media (max-width: 650px) {
    .hb-auth-overlay { padding: 0; }
    .hb-auth-dialog { max-width: 100%; max-height: 100%; height: 100%; border-radius: 0; flex-direction: column; }
    .hb-auth-promo { display: none; }
    .hb-auth-pane { width: 100%; flex: 1; padding: var(--sp-5) var(--sp-4); }
}