/* ═════════════════════════════════════════════════════════════════
   SeaFly.ai — Login / Register / OTP modal
   Uses only the design tokens that index.html already defines
   (--bg-card, --accent, --text-1 …) and the existing .modal-overlay,
   so it works in index.html without seafly-base.css or dashboard.css.
   Laravel: resources/css/auth.css  ·  markup: partials/auth-modal.blade.php
═════════════════════════════════════════════════════════════════ */

.auth-modal {
    position: relative;
    max-width: 440px;
    max-height: min(92vh, 780px);
    overflow: hidden;
    padding: 0;
}
.auth-scroll {
    overflow-y: auto;
    padding: 30px 30px 26px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.auth-glow {
    position: absolute; inset: -30% -30% auto -30%;
    height: 260px;
    background: radial-gradient(circle at 30% 40%, rgba(59,123,255,.22), transparent 60%), radial-gradient(circle at 80% 30%, rgba(34,197,94,.12), transparent 55%);
    filter: blur(30px);
    pointer-events: none;
}
.auth-close {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--overlay-1, rgba(20,40,90,.045));
    border: 1px solid var(--border);
    color: var(--text-3);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.auth-close:hover { color: var(--text-1); border-color: var(--border-lit); }

.auth-head { position: relative; text-align: center; margin-bottom: 22px; }
.auth-logo {
    width: 52px; height: 52px; margin: 0 auto 14px;
    border-radius: 15px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border-lit);
    box-shadow: 0 10px 28px rgba(59,123,255,.22);
}
.auth-logo img { width: 34px; height: 34px; }
.auth-head h3 {
    font-family: 'Syne', sans-serif;
    font-size: 1.45rem; font-weight: 800; letter-spacing: -0.025em;
    color: var(--text-1);
    margin-bottom: 6px;
}
.auth-head p { font-size: 0.88rem; color: var(--text-2); line-height: 1.55; font-weight: 300; }
.auth-head p strong { color: var(--text-1); font-weight: 600; }

/* Tabs */
.auth-tabs {
    position: relative;
    display: grid; grid-template-columns: 1fr 1fr;
    padding: 4px;
    margin-bottom: 22px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 100px;
}
.auth-tabs button {
    position: relative; z-index: 1;
    min-height: 40px;
    background: none; border: none; cursor: pointer;
    font-family: inherit; font-size: 0.86rem; font-weight: 500;
    color: var(--text-2);
    border-radius: 100px;
    transition: color .2s;
}
.auth-tabs button.active { color: #fff; }
.auth-tab-ind {
    position: absolute; top: 4px; bottom: 4px; left: 4px;
    width: calc(50% - 4px);
    border-radius: 100px;
    background: linear-gradient(135deg, #1d4ed8, #3b7bff);
    box-shadow: 0 6px 16px rgba(59,123,255,.35);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.auth-tabs[data-active="register"] .auth-tab-ind { transform: translateX(100%); }
.auth-tabs[hidden] { display: none; }

/* Views */
.auth-view { display: flex; flex-direction: column; gap: 14px; animation: authIn .3s ease both; }
.auth-view[hidden] { display: none; }
@keyframes authIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.auth-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.auth-field label { font-size: 0.76rem; font-weight: 600; color: var(--text-2); }
.auth-input-wrap { position: relative; }
.auth-input {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-1);
    font-family: inherit;
    font-size: 16px; /* no iOS zoom */
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.auth-input::placeholder { color: var(--text-3); }
.auth-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,123,255,.14); }
.auth-input.invalid { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
.auth-input-wrap .auth-input { padding-right: 48px; }
.auth-eye {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px;
    border: none; background: none; cursor: pointer;
    color: var(--text-3);
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
}
.auth-eye:hover { color: var(--text-1); background: var(--overlay-1, rgba(20,40,90,.045)); }
.auth-eye .eye-off { display: none; }
.auth-eye.on .eye-on { display: none; }
.auth-eye.on .eye-off { display: block; }

.auth-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.auth-check { display: flex; align-items: flex-start; gap: 9px; font-size: 0.82rem; color: var(--text-2); line-height: 1.5; cursor: pointer; }
.auth-check input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; }
.auth-check a, .auth-link { color: var(--accent-soft); text-decoration: none; font-weight: 500; }
.auth-link { background: none; border: none; cursor: pointer; font-family: inherit; font-size: 0.82rem; padding: 4px 0; }
.auth-check a:hover, .auth-link:hover { text-decoration: underline; }

/* Password strength */
.pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 2px; }
.pw-meter i { height: 4px; border-radius: 4px; background: var(--border); transition: background .25s; }
.pw-meter[data-score="1"] i:nth-child(-n+1) { background: #dc2626; }
.pw-meter[data-score="2"] i:nth-child(-n+2) { background: #d97706; }
.pw-meter[data-score="3"] i:nth-child(-n+3) { background: #2f5fe0; }
.pw-meter[data-score="4"] i { background: #16a34a; }
.pw-hint { font-size: 0.72rem; color: var(--text-3); }

.auth-error {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 12px;
    border-radius: 11px;
    background: rgba(220,38,38,.08);
    border: 1px solid rgba(220,38,38,.25);
    color: #dc2626;
    font-size: 0.82rem; line-height: 1.45;
}
html[data-theme="dark"] .auth-error { color: #f87171; }
.auth-error[hidden] { display: none; }
.auth-info { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 11px; background: rgba(59,123,255,.08); border: 1px dashed var(--border-lit); color: var(--text-2); font-size: 0.78rem; line-height: 1.45; }

/* Buttons */
.auth-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%;
    min-height: 50px;
    padding: 12px 22px;
    border: none;
    border-radius: 100px;
    background: linear-gradient(135deg, #1d4ed8, #3b7bff);
    color: #fff;
    font-family: inherit; font-size: 0.95rem; font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(59,123,255,.32);
    transition: transform .2s, box-shadow .2s, opacity .2s;
}
.auth-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(59,123,255,.42); }
.auth-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.auth-btn .spin { display: none; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: authSpin .8s linear infinite; }
.auth-btn.loading .spin { display: block; }
.auth-btn.loading .arrow { display: none; }
@keyframes authSpin { to { transform: rotate(360deg); } }
.auth-btn .arrow { transition: transform .2s; }
.auth-btn:hover .arrow { transform: translateX(3px); }
.auth-btn-ghost {
    background: var(--bg-surface); color: var(--text-1);
    border: 1px solid var(--border-lit); box-shadow: none; font-weight: 500;
}
.auth-btn-ghost:hover { box-shadow: none; border-color: var(--accent); }

.auth-foot { text-align: center; font-size: 0.84rem; color: var(--text-2); margin-top: 18px; }
.auth-back { display: inline-flex; align-items: center; gap: 6px; align-self: center; }

/* OTP */
.otp-icon {
    width: 58px; height: 58px; margin: 0 auto 14px;
    border-radius: 17px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #1d4ed8, #3b7bff);
    color: #fff;
    box-shadow: 0 12px 30px rgba(59,123,255,.4);
}
.otp-boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.otp-boxes input {
    width: 100%;
    aspect-ratio: 5 / 6;
    min-height: 52px;
    text-align: center;
    font-family: 'Syne', sans-serif;
    font-size: 1.5rem; font-weight: 700;
    color: var(--text-1);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    outline: none;
    caret-color: var(--accent);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.otp-boxes input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,123,255,.16); transform: translateY(-1px); }
.otp-boxes input.filled { border-color: var(--border-lit); background: var(--bg-card); }
.otp-boxes.error input { border-color: #dc2626; }
.otp-boxes.shake { animation: otpShake .4s ease; }
@keyframes otpShake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.otp-resend { text-align: center; font-size: 0.82rem; color: var(--text-3); }
.otp-resend .auth-link[disabled] { color: var(--text-3); cursor: default; text-decoration: none; }

/* Done */
.auth-done { text-align: center; padding: 20px 0 8px; }
.auth-done .check {
    width: 70px; height: 70px; margin: 0 auto 18px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #15803d, #22c55e);
    color: #fff;
    box-shadow: 0 14px 34px rgba(34,197,94,.4);
    animation: modalIn .45s cubic-bezier(.34,1.5,.64,1);
}
.auth-done h4 { font-family: 'Syne', sans-serif; font-size: 1.2rem; color: var(--text-1); margin-bottom: 6px; }
.auth-done p { font-size: 0.88rem; color: var(--text-2); }
.auth-progress { height: 4px; border-radius: 4px; background: var(--border); overflow: hidden; margin: 18px auto 0; max-width: 200px; }
.auth-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3b7bff, #22c55e); animation: authFill 1.2s ease forwards; }
@keyframes authFill { to { width: 100%; } }

/* Phones: bottom sheet */
@media (max-width: 520px) {
    #modal-auth.modal-overlay { padding: 0; align-items: flex-end; }
    .auth-modal { max-width: none; max-height: 94vh; border-radius: 22px 22px 0 0; border-bottom: none; }
    .auth-scroll { padding: 26px 18px calc(22px + env(safe-area-inset-bottom)); }
    .auth-row { grid-template-columns: 1fr; }
    .otp-boxes { gap: 6px; }
    .otp-boxes input { min-height: 48px; font-size: 1.3rem; }
}

/* Above index.html's floating chat button and sticky header */
#modal-auth.modal-overlay { z-index: 1000; }
/* Terms / Privacy opened from the register form: the legal overlay must sit ABOVE the auth overlay.
   Both overlays are direct children of <body> (position: fixed), so they share one stacking context
   and a higher z-index on the legal overlay is enough — no extreme values needed. */
.modal-overlay.modal-overlay--above-auth { z-index: 1010; }
.modal-overlay.modal-overlay--above-auth .modal { max-height: min(86vh, 86dvh); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.auth-info { display: block; }
.auth-info strong { color: var(--text-1); letter-spacing: .08em; }

.auth-info[hidden], .auth-info:empty { display: none !important; }