/* ═══════════════════════════════════════════════════════════════════════
   AUTH MODAL - public/front/css/auth-modal.css
   Single responsibility: visual styling only. Markup lives in
   resources/views/front/components/auth-modal.blade.php, behavior in
   public/front/js/auth-modal.js.

   Design approach
   ─────────────────────────────────────────────────────────────────────
   Mobile (default, <768px): full-width bottom sheet. Slides up, rounded
   top corners only, generous padding, one thing to do at a time. No
   brand panel - it would just eat vertical space on a small screen.

   Desktop (≥768px): centered card, two columns. Left = botanical brand
   panel (pure CSS/SVG, no photo - no licensing risk, always loads).
   Right = the form. Both breathe: fewer borders, more whitespace,
   shadow does the separating instead of lines.
   ═══════════════════════════════════════════════════════════════════════ */

/* Design tokens (--hh-*) come from hh-auth-tokens.css, loaded first by
   the Blade partial that includes this file - see auth-modal.blade.php. */

/* ── Modal shell ─────────────────────────────────────────────────────── */
#staticBackd .modal-dialog.auth-dialog {
    max-width: 900px;
    margin: 0;
}
#staticBackd .auth-card {
    border: none;
    border-radius: 0;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    box-shadow: none;
}

/* Mobile: bottom sheet */
@media (max-width: 767.98px) {
    #staticBackd .modal-dialog.auth-dialog {
        width: 100%;
        min-height: 100vh;
        display: flex;
        align-items: flex-end;
    }
    #staticBackd .auth-card {
        width: 100%;
        min-height: 0;
        max-height: 92vh;
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -8px 40px rgba(28, 26, 22, 0.18);
    }
    #staticBackd.show .auth-card,
    #staticBackd.showing .auth-card {
        animation: authSheetUp 320ms cubic-bezier(.2,.85,.35,1);
    }
    @keyframes authSheetUp {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
}

/* Desktop: centered split card */
@media (min-width: 768px) {
    #staticBackd .modal-dialog.auth-dialog {
        margin: 2.5rem auto;
    }
    #staticBackd .auth-card {
        min-height: 560px;
        border-radius: 24px;
        box-shadow: 0 30px 80px rgba(28, 26, 22, 0.22);
    }
    #staticBackd.show .auth-card,
    #staticBackd.showing .auth-card {
        animation: authCardIn 280ms cubic-bezier(.2,.9,.3,1.15);
    }
    @keyframes authCardIn {
        from { opacity: 0; transform: scale(.95) translateY(10px); }
        to   { opacity: 1; transform: scale(1) translateY(0); }
    }
}

.auth-close {
    position: absolute; top: 16px; right: 16px; z-index: 30;
    width: 36px; height: 36px; border-radius: 50%; border: none;
    background: rgba(255,255,255,.85); backdrop-filter: blur(4px);
    color: var(--hh-ink); display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem; transition: background 150ms ease, transform 150ms ease;
}
.auth-close:hover { background: #fff; transform: rotate(90deg); }

/* ── Brand panel (desktop only) ──────────────────────────────────────── */
@media (min-width: 768px) {

    #staticBackd .modal-dialog.auth-dialog{
        max-width: 900px;
    }

    #staticBackd .auth-card{
        min-height: auto;
        align-items: stretch;
    }

    .auth-brand-panel{
        flex: 0 0 42%;
        aspect-ratio: 2 / 3;
        overflow: hidden;
    }

    .auth-brand-panel-inner{
        width:100%;
        height:100%;
        padding:0;
    }

    .auth-brand-img{
        width:100%;
        height:100%;
        display:block;
        object-fit:cover;
    }
    .auth-brand-video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
}

/* ── Form panel ───────────────────────────────────────────────────────── */
.auth-form-panel {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    background: #fff;
    padding: 40px 28px 32px;
    position: relative;
    overflow-y: auto;
}
@media (min-width: 768px) {
    .auth-form-panel { padding:48px; }
}

.auth-screens { width: 100%; position: relative; }
.auth-screen { animation: authScreenIn 240ms ease; }
.auth-screen-hidden { display: none; }
@keyframes authScreenIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.auth-title { font-weight: 700; font-size: 1.5rem; color: var(--hh-ink); margin-bottom: 6px; letter-spacing: -0.01em; }
.auth-subtitle { color: var(--hh-muted); font-size: .92rem; margin-bottom: 28px; line-height: 1.4; }

/* ── Google button ───────────────────────────────────────────────────── */
.auth-google-btn {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 16px; border-radius: var(--hh-radius-sm); border: 1.5px solid var(--hh-line);
    background: #fff; font-weight: 600; font-size: .95rem; color: var(--hh-ink);
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 100ms ease;
}
.auth-google-btn:hover { border-color: #d4d0c4; box-shadow: 0 6px 18px rgba(0,0,0,.05); }
.auth-google-btn:active { transform: scale(.99); }
.auth-google-icon { width: 20px; height: 20px; }

.auth-divider {
    display: flex; align-items: center; gap: 14px; margin: 24px 0 20px;
    color: var(--hh-muted); font-size: .78rem;
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--hh-line); }

/* ── Inputs ───────────────────────────────────────────────────────────── */
.auth-input {
    width: 100%; padding: 14px 16px; border-radius: var(--hh-radius-sm); border: 1.5px solid var(--hh-line);
    font-size: 1rem; color: var(--hh-ink); background: var(--hh-surface);
    transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.auth-input:focus {
    outline: none; border-color: var(--hh-primary); background: #fff;
    box-shadow: 0 0 0 4px rgba(94, 87, 69, 0.1);
}
.auth-input + .auth-input,
.auth-password-row { margin-top: 14px; }

.auth-phone-row { display: flex; gap: 10px; }
.auth-country-btn {
    display: flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: var(--hh-radius-sm);
    border: 1.5px solid var(--hh-line); background: var(--hh-surface); font-size: .94rem; color: var(--hh-ink);
    white-space: nowrap; transition: border-color 150ms ease;
}
.auth-country-btn:hover { border-color: #d4d0c4; }
.auth-country-btn i { font-size: .7rem; color: var(--hh-muted); margin-left: 2px; }
.auth-phone-input { flex: 1; min-width: 0; }

.auth-error { color: var(--hh-error); font-size: .8rem; margin-top: 8px; display: none; }
.auth-error.auth-error-show { display: block; }
.auth-error-center { text-align: center; }

.auth-dev-note { margin-top: 18px; font-size: .76rem; color: var(--hh-muted); text-align: center; }

.auth-primary-btn {
    width: 100%; margin-top: 22px; padding: 15px 16px; border-radius: var(--hh-radius-sm); border: none;
    background: var(--hh-primary); color: #fff; font-weight: 600; font-size: 1rem;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: background 150ms ease, transform 100ms ease;
}
.auth-primary-btn:hover { background: var(--hh-primary-hover); }
.auth-primary-btn:active { transform: scale(.99); }
.auth-primary-btn:disabled { opacity: .7; }

.auth-text-link {
    display: block; width: 100%; text-align: center; margin-top: 18px; background: none; border: none;
    color: var(--hh-primary); font-size: .88rem; font-weight: 600; padding: 4px;
}
.auth-text-link:hover { text-decoration: underline; }

.auth-back {
    display: inline-flex; align-items: center; gap: 6px; background: none; border: none;
    color: var(--hh-muted); font-size: .84rem; margin-bottom: 18px; padding: 0;
}
.auth-back:hover { color: var(--hh-ink); }

/* ── OTP boxes ────────────────────────────────────────────────────────── */
.auth-otp-boxes { display: flex; gap: 10px; justify-content: space-between; margin-bottom: 4px; }
.auth-otp-box {
    width: 100%; aspect-ratio: 1 / 1.15; text-align: center; font-size: 1.4rem; font-weight: 700;
    border-radius: var(--hh-radius-sm); border: 1.5px solid var(--hh-line); color: var(--hh-ink);
    background: var(--hh-surface);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.auth-otp-box:focus {
    outline: none; border-color: var(--hh-primary); background: #fff;
    box-shadow: 0 0 0 4px rgba(94, 87, 69, 0.1);
}

.auth-timer-row { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.auth-timer-ring { width: 24px; height: 24px; transform: rotate(-90deg); flex-shrink: 0; }
.auth-timer-ring-bg { fill: none; stroke: var(--hh-line); stroke-width: 3; }
.auth-timer-ring-fg {
    fill: none; stroke: var(--hh-primary); stroke-width: 3; stroke-linecap: round;
    stroke-dasharray: 100.5; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear;
}
.auth-timer-text { color: var(--hh-muted); font-size: .84rem; }
.auth-resend-btn { display: none; margin: 0 0 0 auto; width: auto; }

/* ── Password field ──────────────────────────────────────────────────── */
.auth-password-row { position: relative; }
.auth-password-row .auth-input { padding-right: 46px; }
.auth-password-toggle {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none;
    color: var(--hh-muted); font-size: 1.05rem;
}

.auth-fineprint { margin-top: 20px; font-size: .8rem; color: var(--hh-muted); text-align: center; line-height: 1.4; }

/* ── Spinner ──────────────────────────────────────────────────────────── */
.auth-spinner {
    width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5);
    border-top-color: #fff; animation: authSpin .7s linear infinite;
}
.auth-google-btn .auth-spinner { border-color: rgba(94,87,69,.3); border-top-color: var(--hh-primary); }
@keyframes authSpin { to { transform: rotate(360deg); } }

/* ── Country picker - full-panel overlay sheet, not a cramped dropdown ── */
.auth-country-sheet {
    display: none; position: absolute; inset: 0; background: #fff; z-index: 10;
    flex-direction: column; border-radius: inherit;
}
.auth-country-sheet.auth-country-sheet-open { display: flex; }
.auth-country-sheet-head {
    display: flex; align-items: center; gap: 10px; padding: 4px 4px 16px; border-bottom: 1px solid var(--hh-line);
    color: var(--hh-muted);
}
.auth-country-sheet-head input {
    border: none; outline: none; flex: 1; font-size: 1rem; background: transparent; color: var(--hh-ink);
    padding: 8px 0;
}
.auth-country-sheet-close {
    width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--hh-surface);
    color: var(--hh-ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.auth-country-list { flex: 1; overflow-y: auto; padding-top: 8px; margin: 0 -8px; }
.auth-country-item {
    display: flex; align-items: center; gap: 12px; padding: 12px 8px; border-radius: 10px; font-size: .95rem;
    cursor: pointer; transition: background 100ms ease;
}
.auth-country-item:hover { background: var(--hh-surface); }
.auth-country-item-name { flex: 1; color: var(--hh-ink); }
.auth-country-item-dial { color: var(--hh-muted); font-size: .88rem; }

@media (max-width: 767.98px) {
    .auth-form-panel { padding: 32px 22px 26px; }
    .auth-title { font-size: 1.32rem; }
    #staticBackd .auth-card { position: relative; }
    #staticBackd .auth-card::before {
        content: "";
        position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
        width: 38px; height: 4px; border-radius: 4px; background: rgba(28,26,22,.18);
        z-index: 25;
    }
}