/* ============================================================
   auth.css — shared styles for Login, NewProvider, NewStudent
   ============================================================ */

/* ── CSS custom properties ── */
:root {
    --auth-brand-from:    #F63D68;
    --auth-brand-to:      #c0174a;
    --auth-accent-pink:   #F63D68;
    --auth-accent-cyan:   #29b6d8;
    --auth-bg:            #f8f9fb;
    --auth-card-radius:   20px;
    --auth-btn-radius:    10px;
    --auth-btn-height:    48px;
}

/* ── split layout ── */
.auth-split {
    display: flex;
    min-height: 100vh;
}

/* ── left brand panel ── */
.auth-brand {
    flex: 0 0 42%;
    background: linear-gradient(155deg, var(--auth-brand-from) 0%, var(--auth-brand-to) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem 2.5rem;
    gap: 2rem;
    position: relative;
    overflow: hidden;
}
.auth-brand::before {
    content: '';
    position: absolute;
    width: 340px; height: 340px;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
    top: -80px; left: -80px;
}
.auth-brand::after {
    content: '';
    position: absolute;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    bottom: -60px; right: -60px;
}
.auth-brand-logo {
    background: #fff;
    border-radius: 20px;
    padding: 18px 28px;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    z-index: 1;
}
.auth-brand-logo img { height: 52px; display: block; }
.auth-brand-headline {
    color: #fff;
    font-size: 1.55rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.35;
    z-index: 1;
}

/* ── right form panel ── */
.auth-form-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--auth-bg);
    padding: 3rem 2rem;
    overflow-y: auto;
}

/* ── card ── */
.auth-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: var(--auth-card-radius);
    box-shadow: 0 4px 24px rgba(0,0,0,.07);
    padding: 2.5rem 2.5rem 2rem;
}

/* Keep auth inputs visible even if Telerik/Bootstrap skin assets load late. */
.auth-card .RadInput,
.auth-card .riSingle,
.auth-card .RadTextBox,
.auth-card .RadInput table {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.auth-card .RadInput .riTextBox,
.auth-card .RadTextBox input.riTextBox,
.auth-card input[type="text"].riTextBox,
.auth-card input[type="password"].riTextBox {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-height: 42px !important;
    height: 42px !important;
    box-sizing: border-box !important;
    padding: 0.55rem 0.75rem !important;
    border: 1px solid #adb5bd !important;
    border-radius: 0.375rem !important;
    background: #fff !important;
    color: #212529 !important;
    font: inherit !important;
    line-height: 1.5 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.06) !important;
}

.auth-card .RadInput .riTextBox:focus,
.auth-card .RadTextBox input.riTextBox:focus,
.auth-card input[type="text"].riTextBox:focus,
.auth-card input[type="password"].riTextBox:focus {
    border-color: var(--auth-accent-cyan) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.2rem rgba(41,182,216,.25) !important;
}

.auth-card .RadInput .riEmpty,
.auth-card .RadTextBox .riEmpty {
    color: #6c757d !important;
}

.auth-card input[type="submit"].btn-auth-login,
.auth-card .btn-auth-login {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-height: var(--auth-btn-height);
    padding: 0.5rem 1rem !important;
    border: 1px solid var(--auth-accent-cyan) !important;
    border-radius: var(--auth-btn-radius) !important;
    background: var(--auth-accent-cyan) !important;
    color: #fff !important;
    font: inherit !important;
    font-size: .875rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(41,182,216,.3);
}

.auth-card input[type="submit"].btn-auth-login:hover,
.auth-card .btn-auth-login:hover {
    background: #1fa0bf !important;
    border-color: #1fa0bf !important;
    color: #fff !important;
}

/* ── divider ── */
.auth-divider::before,
.auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--bs-border-color, #dee2e6); }
.auth-divider span { padding: 0 12px; font-size: .75rem; font-weight: 600; color: var(--bs-secondary-color, #6c757d); text-transform: uppercase; letter-spacing: .05em; }

/* ── password toggle ── */
.auth-pwd-wrapper {
    position: relative;
    width: 100%;
}
.auth-pwd-wrapper .RadInput,
.auth-pwd-wrapper .riSingle { width: 100% !important; box-sizing: border-box !important; }
.auth-pwd-wrapper .riTextBox { padding-right: 40px !important; }

.auth-pwd-toggle {
    position: absolute;
    top: 50%; right: 10px;
    transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    color: #94a3b8; display: flex; align-items: center;
    z-index: 10; padding: 2px;
}
.auth-pwd-toggle:hover { color: #475569; }
.auth-pwd-toggle svg { width: 20px; height: 20px; display: block; }

/* ── buttons ── */
.btn-auth-primary {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: var(--auth-btn-height);
    font-size: .875rem; font-weight: 600;
    border-radius: var(--auth-btn-radius); border: none;
    background: var(--auth-accent-cyan); color: #fff;
    text-decoration: none; cursor: pointer;
    transition: background .2s, box-shadow .2s;
    box-shadow: 0 4px 14px rgba(41,182,216,.3);
}
.btn-auth-primary:hover { background: #1fa0bf; color: #fff; text-decoration: none; box-shadow: 0 6px 18px rgba(41,182,216,.42); }

.btn-auth-provider {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: var(--auth-btn-height);
    font-size: .875rem; font-weight: 600;
    border-radius: var(--auth-btn-radius); border: none;
    background: var(--auth-accent-pink); color: #fff;
    text-decoration: none; cursor: pointer;
    transition: background .2s, box-shadow .2s;
    box-shadow: 0 4px 14px rgba(246,61,104,.35);
}
.btn-auth-provider:hover { background: #d62d57; color: #fff; text-decoration: none; box-shadow: 0 6px 18px rgba(246,61,104,.45); }

.btn-auth-student {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: var(--auth-btn-height);
    font-size: .875rem; font-weight: 600;
    border-radius: var(--auth-btn-radius); border: none;
    background: var(--auth-accent-cyan); color: #fff;
    text-decoration: none; cursor: pointer;
    transition: background .2s, box-shadow .2s;
    box-shadow: 0 4px 14px rgba(41,182,216,.3);
}
.btn-auth-student:hover { background: #1fa0bf; color: #fff; text-decoration: none; box-shadow: 0 6px 18px rgba(41,182,216,.42); }

/* ── responsive ── */

/* portrait phones */
@media (max-width: 767px) {
    .auth-split { flex-direction: column; min-height: unset; }
    .auth-brand { flex: none; min-height: unset; padding: 1.5rem; gap: 1rem; }
    .auth-brand-logo img { height: 38px; }
    .auth-brand-headline { font-size: 1.2rem; }
    .auth-form-panel { padding: 1.5rem 1rem; align-items: flex-start; overflow-y: unset; }
    .auth-card { padding: 1.5rem 1.25rem 1.25rem; }
}

/* landscape phones */
@media (orientation: landscape) and (max-height: 600px) {
    .auth-brand { display: none; }
    .auth-split { min-height: 100vh; }
    .auth-form-panel {
        background: linear-gradient(155deg, var(--auth-brand-from) 0%, var(--auth-brand-to) 100%);
        padding: 0.75rem 1rem;
        align-items: flex-start;
        justify-content: center;
    }
    .auth-card {
        padding: 1rem 1.25rem;
        max-width: 460px;
        margin: auto 0;
    }
    .auth-card .mb-3 { margin-bottom: 0.4rem !important; }
    .auth-card .mb-4 { margin-bottom: 0.5rem !important; }
    .auth-card h1 { font-size: 1rem !important; margin-bottom: 0.25rem !important; }
    .auth-divider { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
    .btn-auth-primary,
    .btn-auth-provider,
    .btn-auth-student { height: 40px; }
}