/* Kiora - login page styles */

:root {
    --gold: #E0782A;
    --gold-light: #F7A94F;
    --gold-soft: #FFD9A6;
    --ivory: #FFF3E4;
    --font: Tahoma, "Segoe UI", "Noto Naskh Arabic", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { min-height: 100%; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    color: var(--ivory);
    font-family: var(--font);
    background:
        radial-gradient(circle at 88% 6%, rgba(255, 140, 50, .34), transparent 30%),
        radial-gradient(circle at 6% 0%, rgba(190, 60, 45, .26), transparent 34%),
        linear-gradient(180deg, #2b110d 0%, #1a0b0a 45%, #150909 100%);
    background-attachment: fixed;
}

a, button, input { font: inherit; }
img { display: block; max-width: 100%; }

a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 3px solid rgba(247, 169, 79, .55);
    outline-offset: 3px;
}

/* ---------- Top bar ---------- */
.top-bar {
    position: relative;
    z-index: 20;
    width: min(1380px, calc(100% - 40px));
    min-height: 74px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.mini-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }

.mini-brand-logo {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    object-fit: cover;
    border: 1px solid rgba(247, 169, 79, .38);
    border-radius: 50%;
    background: #111;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .26);
}

.mini-brand-copy strong, .mini-brand-copy span { display: block; }
.mini-brand-copy strong { color: #FFF8EA; font-size: 15px; }
.mini-brand-copy span { margin-top: 3px; color: rgba(255, 255, 255, .58); font-size: 11px; }

.language-switch {
    display: inline-flex;
    gap: 3px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 13px;
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.language-switch a {
    min-width: 46px;
    padding: 8px 10px;
    color: rgba(255, 255, 255, .66);
    border-radius: 9px;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
}

.language-switch a.active {
    color: #2a1206;
    background: linear-gradient(135deg, var(--gold-soft), var(--gold));
}

/* ---------- Stage ---------- */
.login-page {
    width: min(1480px, calc(100% - 32px));
    min-height: calc(100vh - 94px);
    min-height: calc(100dvh - 94px);
    margin: 0 auto;
    padding: 10px 0 28px;
}

.login-stage {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    direction: ltr;
    min-height: clamp(700px, calc(100dvh - 118px), 840px);
    grid-template-columns: minmax(360px, .94fr) minmax(370px, .98fr) minmax(410px, 1.08fr);
    border: 1px solid rgba(247, 169, 79, .10);
    background:
        radial-gradient(900px 480px at 20% 100%, rgba(224, 120, 42, .14), transparent 65%),
        linear-gradient(90deg, rgba(255, 255, 255, .018), transparent 34%),
        #0d0606;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .28);
}

html[dir="rtl"] .login-panel, html[dir="rtl"] .brand-story, html[dir="rtl"] .visual-panel { direction: rtl; }
html[dir="ltr"] .login-panel, html[dir="ltr"] .brand-story, html[dir="ltr"] .visual-panel { direction: ltr; }

.login-stage::before {
    content: "";
    position: absolute;
    width: 760px;
    height: 300px;
    inset-inline-start: 14%;
    bottom: -175px;
    z-index: 0;
    border: 2px solid rgba(224, 120, 42, .16);
    border-radius: 50%;
    box-shadow: 0 0 0 38px rgba(255, 255, 255, .014), 0 0 0 76px rgba(255, 255, 255, .009);
    transform: rotate(-7deg);
}

.login-stage::after {
    content: "K";
    position: absolute;
    inset-inline-start: 42%;
    bottom: -105px;
    z-index: 0;
    color: rgba(224, 120, 42, .07);
    font-family: Georgia, serif;
    font-size: 390px;
    line-height: 1;
}

/* ---------- Login card ---------- */
.login-panel {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    grid-column: 1;
    grid-row: 1;
    padding: 54px 28px 70px;
}

.login-card {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 32px;
    border: 1px solid rgba(247, 169, 79, .16);
    border-radius: 28px;
    background: rgba(46, 23, 20, .93);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .30);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.card-kicker {
    color: rgba(255, 217, 166, .66);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.login-card h1 {
    margin: 10px 0 7px;
    color: var(--gold-light);
    font-size: clamp(29px, 3vw, 42px);
    line-height: 1.2;
}

.login-card > p { margin: 0 0 22px; color: rgba(255, 243, 228, .66); font-size: 13px; line-height: 1.8; }

.message {
    margin-bottom: 17px;
    padding: 12px 13px;
    color: #FFD8CC;
    border: 1px solid rgba(200, 123, 105, .28);
    border-radius: 12px;
    background: rgba(200, 123, 105, .10);
    font-size: 13px;
    line-height: 1.7;
}

.message[hidden] { display: none; }
.message.success { color: #D9F4E1; border-color: rgba(130, 185, 148, .30); background: rgba(130, 185, 148, .10); }

.field { margin-bottom: 15px; }
.field label { display: block; margin-bottom: 7px; color: #FFE9CF; font-size: 13px; font-weight: 800; }

.field input {
    width: 100%;
    height: 52px;
    padding: 0 14px;
    color: #fff;
    outline: none;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 13px;
    background: rgba(255, 255, 255, .06);
    font-size: 16px;               /* 16px stops iPhones from zooming in on focus */
    transition: .2s ease;
}

.field input::placeholder { color: rgba(255, 255, 255, .38); }
.field input:hover { border-color: rgba(247, 169, 79, .26); }
.field input:focus { border-color: rgba(247, 169, 79, .65); background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 4px rgba(224, 120, 42, .12); }
.field.has-error input { border-color: rgba(200, 123, 105, .65); }

.field-error { margin: 6px 2px 0; color: #F0A898; font-size: 12px; line-height: 1.6; }
.field-error[hidden] { display: none; }

.password-wrapper { position: relative; }
html[dir="rtl"] .password-wrapper input { padding-left: 84px; }
html[dir="ltr"] .password-wrapper input { padding-right: 84px; }

.show-password {
    position: absolute;
    top: 8px;
    height: 36px;
    padding: 0 12px;
    color: #FFD9A6;
    cursor: pointer;
    border: 1px solid rgba(247, 169, 79, .22);
    border-radius: 9px;
    background: rgba(224, 120, 42, .12);
    font-size: 12px;
    font-weight: 900;
}

html[dir="rtl"] .show-password { left: 8px; }
html[dir="ltr"] .show-password { right: 8px; }

.forgot-row { display: flex; margin: -2px 0 18px; }
html[dir="rtl"] .forgot-row { justify-content: flex-start; }
html[dir="ltr"] .forgot-row { justify-content: flex-end; }
.forgot-row a { color: #F7A94F; text-decoration: none; font-size: 12px; font-weight: 800; }
.forgot-row a:hover { text-decoration: underline; }

.login-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    color: #2a1206;
    cursor: pointer;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(135deg, #FFC46E, #E0782A);
    box-shadow: 0 15px 32px rgba(224, 120, 42, .28);
    font-size: 15px;
    font-weight: 900;
}

.login-button:hover { filter: brightness(1.05); }
.login-button[disabled] { opacity: .7; cursor: wait; }

.spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(42, 18, 6, .3);
    border-top-color: #2a1206;
    animation: spin .7s linear infinite;
}

.spinner[hidden] { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.register-area { margin-top: 18px; padding-top: 17px; border-top: 1px solid rgba(255, 255, 255, .09); text-align: center; }
.register-area span { display: block; color: rgba(255, 243, 228, .58); font-size: 12px; }

.register-button {
    min-height: 46px;
    margin-top: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFE9CF;
    border: 1px solid rgba(247, 169, 79, .24);
    border-radius: 11px;
    background: rgba(255, 255, 255, .04);
    text-decoration: none;
    font-size: 13px;
    font-weight: 900;
}

.register-button:hover { border-color: rgba(247, 169, 79, .55); }

.security-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 15px;
    color: rgba(255, 243, 228, .46);
    text-align: center;
    font-size: 11px;
}

.security-note svg { flex: none; }

/* ---------- Brand story (middle) ---------- */
.brand-story {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    grid-column: 2;
    grid-row: 1;
    padding: 56px 34px 72px;
    text-align: center;
}

.welcome-line { margin-bottom: 23px; color: #FFF3E4; font-size: clamp(20px, 2.2vw, 31px); font-weight: 900; }
.brand-story small { color: rgba(255, 217, 166, .66); font-size: 11px; font-weight: 900; letter-spacing: .11em; }

.brand-story h2 {
    max-width: 500px;
    margin: 11px auto 8px;
    color: var(--gold);
    font-size: clamp(42px, 5vw, 70px);
    line-height: 1.12;
    letter-spacing: -.04em;
}

.brand-tagline { color: #F7A94F; font-size: clamp(18px, 2.1vw, 28px); line-height: 1.45; }
.brand-story p { max-width: 470px; margin: 20px auto 0; color: rgba(255, 243, 228, .62); font-size: 13px; line-height: 1.9; }

.feature-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; margin-top: 25px; }
.feature-strip span { color: rgba(255, 243, 228, .56); font-size: 11px; font-weight: 800; }
.feature-strip span::before { content: "•"; margin-inline-end: 6px; color: var(--gold); }

/* ---------- Visual (right) ---------- */
.visual-panel { position: relative; z-index: 3; overflow: hidden; grid-column: 3; grid-row: 1; min-width: 0; }

.visual-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(13, 6, 6, .18), transparent 24%),
        radial-gradient(circle at 85% 5%, rgba(255, 140, 50, .26), transparent 26%);
    pointer-events: none;
}

.model-image {
    position: absolute;
    inset-inline: auto -3%;
    bottom: 0;
    width: 108%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(-18px 24px 30px rgba(0, 0, 0, .38));
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 89%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 89%, transparent 100%);
}

.logo-orb {
    position: absolute;
    left: 3%;
    bottom: -26px;
    z-index: 0;
    width: 230px;
    height: 230px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(224, 120, 42, .24);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(224, 120, 42, .16), rgba(0, 0, 0, .52) 68%);
    opacity: .58;
}

.logo-orb img { width: 80%; height: 80%; object-fit: cover; border-radius: 50%; }

.page-footer {
    position: absolute;
    inset-inline: 0;
    bottom: 16px;
    z-index: 8;
    color: rgba(255, 243, 228, .42);
    text-align: center;
    font-size: 11px;
}

.page-footer strong { color: rgba(247, 169, 79, .80); }

/* ---------- Tablet ---------- */
@media (max-width: 1180px) {
    .login-page { width: min(1180px, calc(100% - 24px)); }
    .login-stage { grid-template-columns: minmax(320px, .92fr) minmax(330px, .96fr) minmax(350px, 1fr); }
    .login-card { padding: 26px; }
    .login-panel { padding-inline: 20px; }
    .brand-story { padding-inline: 24px; }
}

@media (max-width: 960px) {
    .login-stage { min-height: auto; grid-template-columns: minmax(310px, .90fr) minmax(0, 1.10fr); grid-template-rows: auto minmax(360px, 1fr); }
    .login-panel { grid-column: 1; grid-row: 1 / span 2; align-items: center; padding: 34px 18px 54px; }
    .brand-story { grid-column: 2; grid-row: 1; padding: 38px 26px 16px; }
    .visual-panel { grid-column: 2; grid-row: 2; min-height: 410px; }
    .login-card { max-width: 440px; }
    .model-image { inset-inline: auto -2%; width: 104%; }
    .logo-orb { width: 175px; height: 175px; left: 4%; bottom: -22px; }
}

/* ---------- Phone ---------- */
@media (max-width: 720px) {
    .top-bar { width: calc(100% - 18px); min-height: 66px; }
    .mini-brand-copy strong { font-size: 13px; }
    .mini-brand-copy span { display: none; }
    .mini-brand-logo { width: 40px; height: 40px; flex-basis: 40px; }
    .language-switch a { min-width: 40px; padding: 8px; }
    .login-page { width: calc(100% - 16px); padding-top: 6px; }
    .login-stage { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
    .brand-story { order: 1; padding: 28px 20px 14px; }
    .welcome-line { margin-bottom: 16px; font-size: 22px; }
    .brand-story h2 { font-size: clamp(38px, 12vw, 50px); }
    .visual-panel { order: 3; min-height: 410px; }
    .model-image { inset-inline: 0; width: 100%; height: 100%; }
    .logo-orb { width: 145px; height: 145px; left: 5%; bottom: -16px; }
    .login-panel { order: 2; padding: 8px 12px 26px; }
    .login-card { position: relative; z-index: 6; max-width: 560px; padding: 24px 20px; border-radius: 22px; background: rgba(42, 21, 18, .97); }
    .page-footer { position: static; order: 4; padding: 0 14px 18px; }
}

@media (max-width: 420px) {
    .top-bar { width: calc(100% - 12px); }
    .login-page { width: calc(100% - 10px); }
    .mini-brand-copy { display: none; }
    .brand-story { padding-inline: 15px; }
    .visual-panel { min-height: 340px; }
    .login-panel { padding-inline: 7px; }
    .login-card { padding: 21px 15px; border-radius: 20px; }
}

@media (hover: none) and (pointer: coarse) {
    .login-button, .register-button, .show-password { -webkit-tap-highlight-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}