/*
 * front-auth.css
 * Shared styles for auth pages: login.blade.php & register.blade.php
 * Extracted from inline <style> blocks — UI is identical.
 */

/* ---- Slide image helpers (shared) ---- */
.auth-alt-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-decoration: none;
    cursor: pointer;
}

.auth-slide-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: fill;
    object-position: center;
    padding: 0;
    margin: 0;
    vertical-align: bottom;
    line-height: 0;
    font-size: 0;
}

/* ---- Captcha ---- */
.auth-captcha-field { margin-bottom: 10px; }
.auth-captcha-wrap { display: flex; align-items: center; gap: 8px; }
.auth-captcha-wrap canvas {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f7f8fb;
    cursor: pointer;
}
.auth-captcha-refresh {
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #718096;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: .2s;
}
.auth-captcha-refresh:hover { border-color: #f58220; color: #f58220; }
.auth-captcha-error {
    color: #dc2626;
    font-size: 11.5px;
    font-weight: 600;
    margin-top: 6px;
    display: none;
}

/* ---- Design tokens ---- */
:root {
    --auth-navy: #071426;
    --auth-navy-2: #0d2038;
    --auth-orange: #f58220;
    --auth-orange-dark: #d9670c;
    --auth-red: #e02020;
    --auth-purple: #5613d3;
    --auth-bg: #f7f8fb;
    --auth-text: #172033;
    --auth-muted: #718096;
    --auth-border: #e2e8f0;
}

* { box-sizing: border-box; }

/* ---- Page shell ---- */
.auth-page {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    background: var(--auth-bg);
    display: flex;
    flex-direction: column;
    font-family: Inter, Arial, sans-serif;
    color: var(--auth-text);
}

/* ---- Header ---- */
.auth-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 40px;
    flex-shrink: 0;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}
.auth-header-logo { height: 28px; }
.auth-help-btn {
    border: 1px solid var(--auth-border);
    background: #fff;
    color: #344054;
    font-size: 12px;
    font-weight: 700;
    padding: 9px 16px;
    border-radius: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: .2s;
    text-decoration: none;
}
.auth-help-btn:hover { border-color: var(--auth-orange); color: var(--auth-orange); }

/* ---- Main layout ---- */
.auth-main {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 370px;
    gap: 20px;
    align-items: stretch;
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    padding: 12px 32px 12px;
    min-height: 0;
    overflow: hidden;
}

/* ---- Slider ---- */
.auth-slider {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-width: 100%;
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 36px rgba(7,20,38,.15);
    padding: 0;
    margin: 0;
}
.auth-slider--tall { height: 100%; }
.auth-slider-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform .6s cubic-bezier(.65,0,.35,1);
}
.auth-slide {
    min-width: 100%;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    display: block;
    padding: 0;
    margin: 0;
}
.auth-slide::before {
    display: none;
}
.auth-slider-dots {
    position: absolute;
    bottom: 16px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 7px;
    z-index: 3;
}
.auth-slider-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.3);
    cursor: pointer;
    transition: .2s;
}
.auth-slider-dot.active {
    background: var(--auth-orange);
    width: 20px;
    border-radius: 5px;
}

/* ---- Form panel ---- */
.auth-form-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    height: 100%;
    min-height: 0;
}
.auth-form-panel--compact { gap: 10px; }
.auth-form-card {
    background: #fff;
    border-radius: 18px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
    padding: 26px 26px 22px;
    width: 100%;
    overflow-y: auto;
}
.auth-form-card::-webkit-scrollbar { width: 4px; }
.auth-form-card::-webkit-scrollbar-track { background: transparent; }
.auth-form-card::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }
.auth-form-card::-webkit-scrollbar-thumb:hover { background: var(--auth-orange); }
.auth-form-top { display: flex; justify-content: center; margin-bottom: 18px; }
.auth-form-logo { height: 32px; }
.auth-view { display: none; }
.auth-view.active { display: block; }

/* ---- Headings ---- */
.auth-heading { text-align: center; margin-bottom: 14px; }
.auth-heading h2 { font-size: 20px; font-weight: 800; margin: 0 0 4px; }
.auth-heading p { font-size: 12px; color: var(--auth-muted); margin: 0; }

/* ---- Alerts ---- */
.auth-alert { padding: 11px 14px; border-radius: 9px; font-size: 12px; font-weight: 600; margin-bottom: 18px; }
.auth-alert-error { background: #fff1f2; color: #dc2626; border: 1px solid #fecdd3; }
.auth-alert-success { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }

/* ---- Fields ---- */
.auth-field { margin-bottom: 10px; }
.auth-label { display: block; font-size: 11px; font-weight: 700; color: #344054; margin-bottom: 5px; }
.auth-optional { color: #a0aec0; font-weight: 500; text-transform: none; }
.auth-input-wrap { position: relative; }
.auth-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #98a2b3;
    font-size: 14px;
    z-index: 2;
}
.auth-input {
    width: 100%;
    height: 40px;
    border: 1px solid var(--auth-border);
    border-radius: 10px;
    background: #fff;
    padding: 0 43px;
    color: var(--auth-text);
    font-size: 12px;
    outline: 0;
    transition: .2s;
}
.auth-input:focus { border-color: var(--auth-orange); box-shadow: 0 0 0 3px rgba(245,130,32,.1); }
.auth-input::placeholder { color: #a0aec0; }
.auth-input-wrap-btn .auth-input { padding-right: 88px; }
.auth-inline-btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: var(--auth-purple);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
}
.auth-inline-btn:hover { background: #4610ab; }
.auth-inline-btn:disabled { opacity: .6; cursor: not-allowed; }
.auth-eye {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #98a2b3;
    cursor: pointer;
    padding: 8px;
    font-size: 14px;
}
.auth-eye:hover { color: var(--auth-orange); }

/* ---- Two-col row (register) ---- */
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ---- Password strength ---- */
.auth-strength-wrap { margin: -4px 0 18px; }
.auth-strength-bars { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-bottom: 7px; }
.auth-strength-bars span { height: 4px; border-radius: 3px; background: #e5e7eb; transition: .25s; }
.auth-strength-label { font-size: 10.5px; color: #a0aec0; line-height: 1.5; }

/* ---- Options row ---- */
.auth-options { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 10px; font-size: 11px; }
.auth-remember { display: flex; align-items: center; gap: 7px; color: #667085; cursor: pointer; }
.auth-remember input { accent-color: var(--auth-orange); }
.auth-forgot { color: var(--auth-orange); font-weight: 700; cursor: pointer; }
.auth-agree { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; color: #667085; line-height: 1.5; margin: 6px 0 20px; cursor: pointer; }
.auth-agree input { margin-top: 3px; accent-color: var(--auth-orange); }
.auth-agree a { color: var(--auth-purple); font-weight: 700; text-decoration: none; }

/* ---- Submit button ---- */
.auth-submit {
    width: 100%;
    height: 42px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(90deg, #151378 0%, #FD7604 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: .2s;
}
.auth-submit:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(224,32,32,.25); }
.auth-submit:disabled { opacity: .7; cursor: not-allowed; transform: none; }
.auth-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: authSpin .7s linear infinite;
    display: none;
}
.auth-submit.loading .auth-spinner { display: block; }
.auth-submit.loading .auth-submit-text { display: none; }
@keyframes authSpin { to { transform: rotate(360deg); } }

/* ---- Divider / alt button ---- */
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: #a0aec0; font-size: 11px; font-weight: 700; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--auth-border); }
.auth-alt-btn {
    width: 100%;
    height: 48px;
    border: 1px solid var(--auth-purple);
    border-radius: 10px;
    background: #fff;
    color: var(--auth-purple);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: .2s;
}
.auth-alt-btn:hover { background: #f7f4fe; }

/* ---- Links ---- */
.auth-links { text-align: center; margin-top: 22px; padding-top: 16px; border-top: 1px solid #edf0f4; font-size: 11px; color: #98a2b3; }
.auth-links a { color: #718096; text-decoration: none; margin: 0 6px; }
.auth-links a:hover { color: var(--auth-orange); }

/* ---- OTP Modal ---- */
#otp-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(7,20,38,.55);
    backdrop-filter: blur(4px);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
}
#otp-modal-overlay.active { display: flex; animation: otpFadeIn .2s ease; }
@keyframes otpFadeIn { from { opacity: 0; } to { opacity: 1; } }
.otp-modal {
    background: #fff;
    border-radius: 18px;
    padding: 32px 28px;
    width: calc(100% - 40px);
    max-width: 380px;
    position: relative;
    box-shadow: 0 24px 60px rgba(7,20,38,.22);
    animation: otpSlideUp .25s ease;
}
@keyframes otpSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.otp-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    border: 0;
    background: transparent;
    color: #98a2b3;
    font-size: 16px;
    cursor: pointer;
    padding: 6px;
    line-height: 1;
    border-radius: 6px;
    transition: .2s;
}
.otp-modal-close:hover { background: #f1f4f8; color: #344054; }
.auth-otp-box { text-align: center; background: #fff8f2; border: 1px solid #ffe1c7; border-radius: 12px; padding: 20px; margin-bottom: 20px; }
.auth-otp-icon { width: 50px; height: 50px; border-radius: 50%; background: #fff0e3; color: var(--auth-orange); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; font-size: 20px; }
.auth-otp-box h5 { font-size: 15px; margin: 0 0 5px; font-weight: 800; }
.auth-otp-box p { font-size: 11px; color: #8b95a5; margin: 0; }
.auth-otp-input { letter-spacing: 7px; text-align: center; font-size: 20px; font-weight: 800; padding-left: 20px; }
.auth-resend { text-align: center; font-size: 12px; color: #8b95a5; margin: 14px 0 4px; }
.auth-resend span { color: var(--auth-orange); font-weight: 700; cursor: pointer; }

/* ---- Success state ---- */
.auth-success { display: none; text-align: center; padding: 50px 20px; }
.auth-success.show { display: block; }
.auth-success-icon { width: 70px; height: 70px; background: #ecfdf3; color: #16a34a; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; margin: 0 auto 20px; }
.auth-success h3 { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
.auth-success p { font-size: 13px; color: var(--auth-muted); }

/* ---- Flip card ---- */
.auth-flip-scene { width: 100%; max-width: 100%; perspective: 1200px; }
.auth-flip-scene--tall { min-height: unset; }
.auth-flip-card { width: 100%; position: relative; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.65,0,.35,1); }
.auth-flip-card.flipped { transform: rotateY(180deg); }
.auth-flip-face { width: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.auth-flip-face.auth-flip-front { position: relative; z-index: 2; }
.auth-flip-face.auth-flip-back { position: absolute; top: 0; left: 0; transform: rotateY(180deg); }

/* ---- Toggle buttons ---- */
.auth-toggle-btns { display: flex; gap: 10px; width: 100%; max-width: 100%; margin-top: 10px; }
.auth-toggle-btn {
    flex: 1;
    height: 40px;
    border-radius: 10px;
    border: 1.5px solid var(--auth-border);
    background: #fff;
    color: #000000;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: .2s;
    box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
.auth-toggle-btn:hover { border-color: var(--auth-orange); color: var(--auth-orange); }
.auth-toggle-btn.active { border-color: transparent; color: #000000; box-shadow: 0 4px 12px rgba(86,19,211,.2); }

/* ---- QR box ---- */
.auth-qr-box { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--auth-border); border-radius: 14px; padding: 10px 16px; }
.auth-qr-code { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: #f1f4f8; display: flex; align-items: center; justify-content: center; }
.auth-qr-code img { width: 100%; height: 100%; object-fit: contain; }
.auth-qr-box span { font-size: 12px; font-weight: 700; color: #344054; display: flex; align-items: center; gap: 6px; }

/* ---- Alliances (logo ticker) ---- */
.auth-alliances {
    background: #fff;
    border-top: 1px solid var(--auth-border);
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    flex-shrink: 0;
    content-visibility: auto;
    contain-intrinsic-size: 0 70px;
}
.auth-alliances-inner { max-width: 1260px; width: 100%; margin: 0 auto; padding: 8px 40px; }
.auth-alliances-title { font-size: 11px; font-weight: 800; color: var(--auth-navy); margin: 0 0 6px; }
.auth-alliances-viewport {
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.auth-alliances-track { display: flex; align-items: center; gap: 48px; width: max-content; will-change: transform; backface-visibility: hidden; }
.auth-alliance-logo { display: flex; align-items: center; justify-content: center; height: 36px; flex: 0 0 auto; }
.auth-alliance-logo img {
    height: 28px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    display: block;
}
.auth-alliance-logo:hover img { transform: translateY(-1px); }

/* ---- Footer band ---- */
.auth-footer-band { background: var(--auth-navy); color: rgba(255,255,255,.85); }
.auth-footer-inner { max-width: 1260px; width: 100%; margin: 0 auto; padding: 26px 40px; display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.auth-footer-col h5 { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--auth-orange); font-weight: 800; margin: 0 0 8px; }
.auth-footer-col p { font-size: 12.5px; line-height: 1.6; margin: 0; color: rgba(255,255,255,.75); }

/* ================================================================
   RESPONSIVE BLOCK — replace everything in front-auth.css from the
   line "RESPONSIVE BREAKPOINTS" down to the end of the file with this.
   Colours, fonts, spacing and look on desktop are NOT changed.
   Devices covered: phones (320–430), foldables (280–968), tablets
   (768–1368), laptops (1280–1920), large monitors / 4K (2200+),
   short laptop screens, phone landscape, notch / safe-area devices.
   ================================================================ */

/* ---------- Base fixes that apply to every screen ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

.auth-page {
    height: 100vh;
    height: 100dvh;              /* correct height on mobile browser bars */
    max-height: 100vh;
    max-height: 100dvh;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.auth-header-logo { width: auto; max-width: 100%; }   /* stop logo stretching */
.auth-slider, .auth-form-panel, .auth-form-card, .auth-input-wrap { min-width: 0; }
.auth-input { min-width: 0; }

/* Flip card: both faces always the same height, only visible face clickable */
.auth-flip-face.auth-flip-back { height: 100%; }
.auth-flip-face .auth-form-card { height: 100%; }
.auth-flip-card:not(.flipped) .auth-flip-back  { pointer-events: none; }
.auth-flip-card.flipped .auth-flip-front       { pointer-events: none; }

/* Options row never overflows */
.auth-options { flex-wrap: wrap; gap: 6px 12px; }

/* OTP modal never taller than the screen */
.otp-modal {
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
}

/* Touch devices: no sticky hover lift */
@media (hover: none) {
    .auth-submit:hover { transform: none; filter: none; box-shadow: none; }
    .auth-alliance-logo:hover img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-slider-track, .auth-flip-card { transition-duration: .01ms !important; }
}

/* ===== EXTRA LARGE: 4K / big monitors ===== */
@media (min-width: 2200px) {
    .auth-header { padding: 14px 80px; }
    .auth-header-logo { height: 36px; }
    .auth-main { max-width: 1900px; grid-template-columns: 1fr 480px; gap: 32px; padding: 20px 48px; }
    .auth-alliances-inner { max-width: 1900px; padding: 12px 48px; }
    .auth-form-card { padding: 34px 34px 28px; }
    .auth-input { height: 46px; font-size: 13px; }
    .auth-submit { height: 48px; font-size: 14px; }
    .auth-alliance-logo img { height: 34px; max-width: 150px; }
}

/* ===== LARGE DESKTOP: Full HD (1600px+) ===== */
@media (min-width: 1600px) and (max-width: 2199px) {
    .auth-header { padding: 12px 56px; }
    .auth-main { max-width: 1500px; grid-template-columns: 1fr 420px; gap: 28px; padding: 16px 40px; }
    .auth-alliances-inner { max-width: 1500px; padding: 10px 40px; }
    .auth-form-card { padding: 30px 30px 26px; }
}

/* ===== LAPTOP / SURFACE PRO / NEST HUB (≤1400px) ===== */
@media (max-width: 1400px) {
    .auth-main { max-width: 1280px; padding: 12px 24px; }
    .auth-footer-inner { padding: 24px 32px; }
    .auth-alliances-inner { padding: 8px 32px; }
}

@media (max-width: 1368px) {
    .auth-main { gap: 18px; padding: 12px 20px; grid-template-columns: 1fr 360px; }
}

/* ===== TABLET LANDSCAPE: iPad Pro 13 (≤1100px) ===== */
@media (max-width: 1100px) {
    .auth-header { padding: 10px 28px; }
    .auth-main { gap: 16px; padding: 10px 20px; grid-template-columns: 1fr 340px; }
    .auth-footer-inner { padding: 22px 28px; }
}

/* ===== TABLET PORTRAIT / SMALL LAPTOP (≤1024px) ===== */
@media (max-width: 1024px) {
    .auth-main { gap: 14px; padding: 10px 18px; grid-template-columns: 1fr 320px; }
    .auth-form-card { padding: 22px 20px 18px; }
    .auth-footer-inner { grid-template-columns: repeat(2, 1fr); padding: 20px 24px; }
}

/* ===== FOLDABLE OUTER / LARGE TABLET (≤968px) ===== */
@media (max-width: 968px) {
    .auth-header { padding: 10px 22px; }
    .auth-main { gap: 14px; padding: 10px 16px; grid-template-columns: 1fr 300px; }
}

/* Narrow form column (two-column layout 861–1024px): captcha wraps to 2 rows */
@media (min-width: 861px) and (max-width: 1024px) {
    .auth-captcha-wrap { flex-wrap: wrap; }
    .auth-captcha-wrap .auth-input-wrap { flex: 1 1 100% !important; }
    .auth-toggle-btn { height: auto; min-height: 40px; padding: 6px 8px; line-height: 1.25; text-align: center; }
}

/* ===== SHORT SCREENS on desktop / laptop (height ≤ 700px) =====
   Lets the page scroll instead of cutting the form off. */
@media (min-width: 861px) and (max-height: 700px) {
    html, body { height: auto !important; overflow-y: auto !important; overflow-x: hidden !important; }
    .auth-page { height: auto; min-height: 100vh; max-height: none; overflow: visible; }
    .auth-main { overflow: visible; min-height: 540px; flex: none; }
    .auth-slider { min-height: 440px; }
}

/* ===== TABLET / SINGLE COLUMN (≤860px): iPad Mini, foldables, all phones ===== */
@media (max-width: 860px) {
    html, body {
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: thin;
        scrollbar-color: #f58220 transparent;
    }
    html::-webkit-scrollbar, body::-webkit-scrollbar { width: 4px; }
    html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: transparent; }
    html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #f58220 0%, #151378 100%);
        border-radius: 10px;
    }

    .auth-page {
        height: auto !important;
        min-height: 100vh;
        min-height: 100dvh;
        max-height: none !important;
        overflow: visible !important;
        -webkit-overflow-scrolling: touch;
    }

    .auth-header { padding: 10px 20px; }

    .auth-main {
        grid-template-columns: 1fr;
        max-width: 620px;
        margin: 0 auto;
        padding: 16px 20px 24px;
        gap: 20px;
        flex: none;
        overflow: visible;
        min-height: 0;
    }

    .auth-form-panel { order: 1; width: 100%; height: auto; align-items: stretch; justify-content: flex-start; }
    .auth-slider     { order: 2; }

    .auth-flip-scene, .auth-toggle-btns { max-width: 100%; }

    /* Slider becomes a banner under the form (cover = no stretched images) */
    .auth-slider {
        display: block;
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: none;
        aspect-ratio: 16 / 9;
        border-radius: 16px;
    }
    .auth-slider-track { height: 100%; }
    .auth-slide-image { object-fit: cover; }

    .auth-toggle-btn { height: auto; min-height: 40px; padding: 6px 10px; line-height: 1.25; text-align: center; }

    .auth-alliances-inner { padding: 10px 20px; }
    .auth-alliances-track { gap: 36px; }
    .auth-alliance-logo { height: 32px; }
    .auth-alliance-logo img { height: 24px; }

    .auth-footer-inner { grid-template-columns: repeat(2, 1fr); padding: 18px 20px; }
}

/* ===== FOLDABLE INNER: Galaxy Z Fold inner (≤720px) ===== */
@media (max-width: 720px) {
    .auth-main { max-width: 100%; padding: 14px 18px 22px; gap: 18px; }
    .auth-form-card { padding: 20px 18px 16px; }
    .auth-toggle-btn { font-size: 11px; }
}

/* ===== FOLDABLE NARROW: Pixel Fold inner (≤540px) ===== */
@media (max-width: 540px) {
    .auth-main { padding: 12px 14px 20px; gap: 16px; }
    .auth-form-card { padding: 18px 16px 14px; }
    .auth-toggle-btn { font-size: 10.5px; gap: 4px; }
}

/* ===== PHONES (≤600px) ===== */
@media (max-width: 600px) {
    .auth-header { padding: 10px 16px; }

    /* Keep the Help button, show icon only (original hid it completely) */
    .auth-help-btn { font-size: 0; gap: 0; padding: 9px 13px; }
    .auth-help-btn i { font-size: 14px; }

    .auth-main { max-width: 100%; padding: 12px 14px 20px; gap: 16px; }
    .auth-slider { aspect-ratio: 4 / 3; border-radius: 12px; touch-action: pan-y; }
    .auth-toggle-btns { gap: 7px; }

    /* 16px stops iOS Safari zooming in on focus */
    .auth-input { font-size: 16px; }
    .auth-input::placeholder { font-size: 13px; }
    .auth-row { grid-template-columns: 1fr; }

    .auth-eye { padding: 10px; }

    .auth-alliances-inner { padding: 8px 14px; }
    .auth-alliances-track { gap: 24px; }
    .auth-alliance-logo { height: 28px; }
    .auth-alliance-logo img { height: 20px; }

    .auth-footer-inner { grid-template-columns: 1fr; padding: 16px 14px; }

    .otp-modal { padding: 26px 18px; }
    .auth-otp-input { letter-spacing: 5px; }
}

/* ===== SMALL PHONES: iPhone SE, Galaxy A-series (≤430px) ===== */
@media (max-width: 430px) {
    /* Captcha: image + refresh on row 1, code input on row 2 */
    .auth-captcha-wrap { flex-wrap: wrap; }
    .auth-captcha-wrap canvas { flex: 0 0 auto; }
    .auth-captcha-wrap .auth-input-wrap { flex: 1 1 100% !important; }
}

/* ===== VERY SMALL: iPhone SE 375 and below (≤390px) ===== */
@media (max-width: 390px) {
    .auth-header { padding: 8px 12px; }
    .auth-main { padding: 10px 12px 18px; gap: 14px; }
    .auth-form-card { padding: 16px 14px 14px; border-radius: 14px; }
    .auth-heading h2 { font-size: 18px; }
    .auth-heading p { font-size: 11px; }
    .auth-toggle-btn { font-size: 10px; min-height: 38px; padding: 6px; }
    .auth-submit { height: 40px; font-size: 12px; }
    .auth-alliances-inner { padding: 6px 12px; }
    .auth-footer-inner { padding: 14px 12px; }
}

/* ===== TINY: Fold cover screens, Galaxy Fold 280px, small Androids (≤340px) ===== */
@media (max-width: 340px) {
    .auth-main { padding: 8px 8px 16px; }
    .auth-form-card { padding: 14px 10px 12px; }
    .auth-toggle-btns { flex-direction: column; }
    .auth-toggle-btn { width: 100%; }
    .auth-options { flex-direction: column; align-items: flex-start; }
    .auth-header-logo { height: 24px; }
}

/* ===== PHONE LANDSCAPE (short height) ===== */
@media (max-width: 960px) and (orientation: landscape) and (max-height: 500px) {
    .auth-slider { display: none; }
    .auth-main { max-width: 620px; padding: 8px 16px 12px; gap: 10px; }
    .auth-form-card { padding: 16px 20px; }
    .auth-heading { margin-bottom: 10px; }
    .auth-field { margin-bottom: 8px; }
    .auth-header { padding: 6px 16px; }

    .otp-modal { padding: 16px 20px; }
    .auth-otp-box { padding: 10px; margin-bottom: 10px; }
    .auth-otp-icon { width: 36px; height: 36px; margin-bottom: 6px; font-size: 16px; }
}

/* ================================================================
   ALLIANCES LOGO TICKER FIX (keep at the very END of the file)
   Forces the logos into ONE horizontal row on every device, so the
   marquee/JS scroll works and logos are never stacked or cut off.
   ================================================================ */
.auth-alliances { width: 100%; }
.auth-alliances-inner { width: 100%; }
.auth-alliances-viewport { display: block; width: 100%; overflow: hidden; }
.auth-alliances-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    width: max-content !important;
    max-width: none !important;
}
.auth-alliance-logo { display: flex; flex: 0 0 auto; width: auto; }
.auth-alliance-logo img { flex: none; width: auto; height: 28px; max-width: 120px; object-fit: contain; }
@media (max-width: 860px) { .auth-alliance-logo img { height: 24px; } }
@media (max-width: 600px) { .auth-alliance-logo img { height: 20px; } }

/* ================================================================
   MOBILE / TABLET FIX: full banner + page scrolls to the bottom
   (keep at the very END of the file, after the alliances fix)
   ================================================================ */
@media (max-width: 860px) {
    /* Make sure nothing (layout inline styles, wrappers) locks the page height */
    html, html body, body {
        height: auto !important;
        min-height: 100%;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        position: static !important;
    }
    .auth-page {
        display: flex;
        flex-direction: column;
        height: auto !important;
        min-height: 100vh;
        min-height: 100dvh;
        max-height: none !important;
        overflow: visible !important;
    }
    .auth-main { overflow: visible !important; flex: none !important; height: auto !important; }

    /* Logo strip + everything below the banner always renders */
    .auth-alliances { content-visibility: visible; contain-intrinsic-size: auto; }

    /* Banner: show the WHOLE image, no crop, no stretch */
    .auth-slider {
        aspect-ratio: auto !important;
        height: auto !important;
        background: #fff;
    }
    .auth-slider-track { height: auto; align-items: flex-start; }
    .auth-slide { height: auto; }
    .auth-slide-image { width: 100%; height: auto; object-fit: contain; }
}

/* ================================================================
   CUSTOM SCROLLBAR + EVEN SIDE PADDING (keep at the very END)
   ================================================================ */

/* ---- Branded scrollbar: Chrome, Edge, Safari, Android/iOS WebView ---- */
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 8px; height: 8px; }
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: #eef1f6; }
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #f58220 0%, #151378 100%);
    border-radius: 10px;
    border: 2px solid #eef1f6;
}
html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover { background: #f58220; }

/* ---- Firefox only (Chrome would ignore the gradient above if these applied to it) ---- */
@supports not selector(::-webkit-scrollbar) {
    html, body { scrollbar-width: thin; scrollbar-color: #f58220 #eef1f6; }
}

/* ---- Even left/right padding on every screen size ----
   Header, banner/form area, logo strip and footer all share one gutter,
   so the edges line up on every phone, foldable and tablet. */
@media (max-width: 860px) {
    /* Chrome 121+ ignores ::-webkit-scrollbar if scrollbar-width/color is set — reset it */
    html, html body, body { scrollbar-width: auto; scrollbar-color: auto; }
    html::-webkit-scrollbar, body::-webkit-scrollbar { width: 5px; }

    :root { --auth-gutter: 20px; }
    .auth-header { padding-left: var(--auth-gutter); padding-right: var(--auth-gutter); }
    .auth-main { padding-left: var(--auth-gutter); padding-right: var(--auth-gutter); padding-bottom: 24px; }
    .auth-alliances-inner, .auth-footer-inner { padding-left: var(--auth-gutter); padding-right: var(--auth-gutter); }
    .auth-alliances { padding-bottom: env(safe-area-inset-bottom); }

    /* Card, toggle buttons and banner always the exact same width */
    .auth-form-panel, .auth-flip-scene, .auth-form-card, .auth-toggle-btns, .auth-slider { width: 100%; max-width: 100%; }
    .auth-toggle-btn { min-width: 0; }
}
@media (max-width: 600px) { :root { --auth-gutter: 16px; } }
@media (max-width: 430px) { :root { --auth-gutter: 14px; } }
@media (max-width: 360px) { :root { --auth-gutter: 12px; } }
@media (max-width: 340px) { :root { --auth-gutter: 10px; } }

/* Phone landscape keeps a little extra room for notches */
@media (max-width: 960px) and (orientation: landscape) and (max-height: 500px) {
    :root { --auth-gutter: 20px; }
}