/* ===== Segment ===== */
.auth-segment{
    position: relative;
    height: calc(100vh - var(--navbar-height, 125px));
    display: grid;
    place-items: center;
    padding: clamp(16px, 4vw, 32px);
    background: var(--color-bg, #0c0a22);
    border-radius: 24px;
    overflow: hidden;
    margin: auto 40px;

    /* local tokens */
    --g1: #00FFD1;
    --g2: #19C3B1;
    --field: #0D0A23;
}

.auth-segment a:not(.expert-btn,.order-btn){
    color: var(--color-blue-mid);
}
.auth-segment__bg{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    z-index: 0;
}
.auth-segment__center{
    position: relative; z-index: 2;
    width: 100%;
    display: grid; place-items: center;
}

/* ===== Card ===== */
.auth-card{
    width: min(92vw, 520px);
    max-width: 421px;
    color: var(--color-white, #fff);
    text-align: center;
    background: linear-gradient(0deg, #1C1930, rgb(53 50 73 / 80%));
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 20px;
    box-shadow: 0 51px 87px #000000b3;
    padding: clamp(20px, 4vw, 28px);
}
.auth-card__icon{ width:84px; height:84px; margin:0 auto 12px; display:grid; place-items:center; border-radius:16px; }
.auth-card__title{ margin:4px 0 8px; font-size:clamp(18px, 2.4vw, 20px); font-weight:600; }
.auth-card__text{ margin:0 0 18px; font-size:16px; color:#737A88; opacity:.95; font-weight: 600 }

/* ===== Steps ===== */
.step{ display:none; }
.step.is-active{ display:block; }

/* ===== Step 1: phone ===== */
.auth-input{
    display:flex; align-items:center; gap:10px;
    border:1px solid rgba(255,255,255,.12);
    background: var(--field);
    border-radius:999px;
    padding:6px 8px 6px 12px;
}
.auth-input__field{
    flex:1; min-width:0; border:0; outline:0; background:transparent;
    color:var(--color-white, #fff); font-size:14px; font-weight: 600; padding:10px 12px; text-align:right;
}
.auth-input__field::placeholder{ color:#737A88; font-size: 14px; font-weight: 600; }
.auth-input__back{
    width:45px; height:40px; display:flex; align-items:center; justify-content:center;
    border-radius:9999px; border:1px solid #39384B; background:#D4D4D4; color:#111; cursor:pointer;
    transition:border-color .2s ease, transform .12s ease;
}
.auth-input__back:hover{ border-color:var(--g1); }
.auth-input__back:active{ transform:scale(.98); }

.auth-submit{
    width:100%; margin-top:12px;
    border:0; cursor:pointer;
    padding:12px 16px; border-radius:14px; font-weight:700; font-size:15px;
    background: linear-gradient(90deg, var(--g1) 0%, var(--g2) 100%);
    color:#0E1230;
    box-shadow: 0 8px 24px rgba(0,255,209,.15);
}

.auth-card__terms{ margin:10px 8px 0; font-size:12px; text-align:right; color:#737A88; }
.auth-card__terms a{ text-decoration:none; color:var(--color-blue-mid, #00FFD1); }

/* ===== Step 2: OTP ===== */
.otp-head{ display:grid; justify-items:center; gap:8px; margin-bottom:12px; }
.otp-head__stars{ letter-spacing:10px; font-size:28px; font-weight:900; color:var(--g2); }
.otp-head__line{ width:64px; height:4px; border-radius:4px; background: linear-gradient(90deg,var(--g1),var(--g2)); }

.otp-hint{ margin:0 0 16px; font-size:16px; color:#737A88;font-weight: 600; }

.otp{
    display:flex; gap:14px; flex-direction:row-reverse; justify-content:center;
}
.otp__input{
    width:56px; height:56px; border-radius:50%;
    text-align:center; font-size:28px; font-weight:800; color:#fff;
    background: var(--field);
    border:1px solid rgba(255,255,255,.28);
    outline: none;
    transition: box-shadow .2s ease, border-color .2s ease, transform .05s ease;
}
.otp__input:focus{
    border-color: rgba(255,255,255,.6);
    box-shadow:
        0 0 0 2px rgba(255,255,255,.10),
        0 0 18px rgba(255,255,255,.35),
        0 0 1px 1px rgba(0,0,0,.35) inset;
}
.otp__input::-webkit-outer-spin-button,
.otp__input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.otp__input[type=number]{ -moz-appearance: textfield; }

.otp-actions{ margin-top:16px; display:flex; gap:10px; justify-content:space-between; align-items:center; }
.otp-actions button{
    outline: none;
    border: none;
    color: #2d7fda;
    text-decoration: underline;
    background: none;
}

.otp-actions button:disabled{
    color: #737A88;
    text-decoration: unset;
    background: unset;
}
.otp-submit{
    border:0; border-radius:14px; padding:10px 16px; cursor:pointer;
    background: linear-gradient(90deg,var(--g1),var(--g2));
    color:#0E1230; font-weight:800;
}
.otp-back{
    background:transparent; color:#fff; border:1px solid rgba(255,255,255,.25);
    border-radius:12px; padding:10px 14px; cursor:pointer;
}

/* Shake on error */
@keyframes shake-x {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}
.shake { animation: shake-x .4s linear both; }

/* =========================
   Mobile look & feel (<=768)
   ========================= */
@media (max-width: 768px){
    .auth-segment__bg{ display:none; }

    .auth-segment{
        margin: 0;
        border: none;
        border-radius: 0;
        padding: 0;
        height: calc(100vh - var(--navbar-height, 84px));
        background: linear-gradient(0deg, #13254C, transparent);
    }

    .auth-card{
        background: none;
        border: none;
        box-shadow: none;
        padding: 22px;
    }
    .auth-card__title{ font-size:20px; }
    .auth-card__icon{ width:72px; height:72px; }

    .auth-input{ padding: 8px 8px 8px 12px; }
    .auth-input__field{ font-size:14px; font-weight: 600; }
    .auth-input__back{
        width:44px; height:44px;
        background:#D4D4D4; color:#111;
        border:1px solid #39384B;
    }

    .auth-card__terms{ font-size:12px; opacity:.9; }

    .otp-head{
        position: relative;
        display: grid; justify-items: center;
        gap: 8px; margin-bottom: 12px;
    }

    .otp{ gap:12px; }
    .otp__input{
        width:56px; height:56px;
        font-size:24px;
    }
}