/* ==========================================================
   ARlogs — Login (theme v4: Wine Red & White)
   Matches landing/home.css exactly
   ========================================================== */

:root {
    --wine: #9D2235;
    --wine-dark: #6E1423;
    --wine-hover: #B92A40;
    --wine-soft: rgba(157, 34, 53, 0.08);
    --champagne: #D9A441;
    --bg: #FFFDFC;
    --tinted: #FBF4F2;
    --text: #33222A;
    --text-dim: #8A767D;
    --border: #F0E2E0;
    --white: #ffffff;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

.mono { font-family: 'JetBrains Mono', monospace; }

/* ---------- BUTTONS ---------- */
.ar-btn-primary {
    background: var(--wine);
    color: #fff;
    border: 1px solid var(--wine);
    font-weight: 600;
    border-radius: 10px;
}
.ar-btn-primary:hover {
    background: var(--wine-hover);
    border-color: var(--wine-hover);
    color: #fff;
}

.ar-btn-outline {
    background: transparent;
    color: var(--wine);
    border: 1px solid var(--wine);
    font-weight: 600;
    border-radius: 10px;
}
.ar-btn-outline:hover {
    background: var(--wine);
    color: #fff;
}

/* ---------- NAVBAR ---------- */
.auth-navbar {
    background: rgba(255, 253, 252, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    padding-block: 14px;
}
.logo-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--wine);
    display: inline-block;
    margin-right: 10px;
    box-shadow: 0 0 0 4px var(--wine-soft);
}
.logo-text { font-weight: 900; font-size: 22px; color: var(--text); letter-spacing: -0.5px; }
.logo-text span { color: var(--wine); }

/* ==========================================================
   AUTH SECTION
   ========================================================== */
.auth-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 130px 0 80px;
    background:
        radial-gradient(700px 400px at 85% 10%, var(--wine-soft), transparent 65%),
        radial-gradient(500px 350px at 5% 90%, rgba(217, 164, 65, 0.10), transparent 60%),
        var(--bg);
}

.auth-split {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px !important;
    box-shadow: 0 30px 80px rgba(157, 34, 53, 0.10) !important;
    overflow: hidden;
}

/* ---------- FORM COLUMN ---------- */
.auth-form-col {
    padding: 0;
}

.auth-form-inner {
    padding: 56px 54px;
}

.auth-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: var(--wine);
    background: var(--wine-soft);
    border: 1px solid rgba(157, 34, 53, 0.2);
    padding: 7px 16px;
    border-radius: 100px;
    margin-bottom: 22px;
}

.auth-title {
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 10px;
}

.auth-sub {
    color: var(--text-dim);
    font-size: 15.5px;
    line-height: 1.7;
    margin-bottom: 30px;
}

/* ---------- ALERTS ---------- */
.auth-alert {
    border-radius: 10px;
    font-size: 14px;
    padding: 12px 16px;
    border: 1px solid transparent;
}
.auth-alert.alert-error,
.auth-alert.alert-danger {
    background: var(--wine-soft);
    border-color: rgba(157, 34, 53, 0.25);
    color: var(--wine-dark);
}
.auth-alert.alert-success {
    background: rgba(34, 158, 84, 0.08);
    border-color: rgba(34, 158, 84, 0.25);
    color: #1E6B3C;
}
.auth-alert.alert-warning {
    background: rgba(217, 164, 65, 0.10);
    border-color: rgba(217, 164, 65, 0.35);
    color: #8a6414;
}
.auth-alert.alert-info {
    background: rgba(34, 158, 217, 0.08);
    border-color: rgba(34, 158, 217, 0.25);
    color: #155e80;
}

/* ---------- FORM ---------- */
.form-label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 7px;
}

.auth-input .input-group-text {
    background: var(--tinted);
    border: 1px solid var(--border);
    border-right: none;
    color: var(--wine);
    border-radius: 10px 0 0 10px;
    padding: 11px 14px;
}

.auth-input .form-control {
    border: 1px solid var(--border);
    border-left: none;
    border-right: none;
    border-radius: 0;
    padding: 11px 14px;
    font-size: 14.5px;
    color: var(--text);
    background: var(--white);
}
.auth-input .form-control::placeholder { color: var(--text-dim); }
.auth-input .form-control:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--wine);
    background: #fff;
}

/* password toggle button inside the group */
.auth-input .pw-toggle {
    border: 1px solid var(--border);
    border-left: none;
    border-radius: 0 10px 10px 0;
    background: var(--tinted);
    color: var(--text-dim);
    padding: 0 14px;
    transition: color .15s ease, background .15s ease;
}
.auth-input .pw-toggle:hover {
    color: var(--wine);
    background: var(--wine-soft);
}

/* focus state for the whole group */
.auth-input:focus-within .input-group-text,
.auth-input:focus-within .form-control,
.auth-input:focus-within .pw-toggle {
    border-color: var(--wine);
}
.auth-input:focus-within {
    box-shadow: 0 0 0 3px rgba(157, 34, 53, 0.12);
    border-radius: 10px;
}

/* ---------- FORGOT LINK ---------- */
.forgot-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--wine);
    text-decoration: none;
}
.forgot-link:hover { color: var(--wine-hover); }

/* ---------- REMEMBER CHECKBOX ---------- */
.form-check-input {
    border: 1.5px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
}
.form-check-input:checked {
    background-color: var(--wine);
    border-color: var(--wine);
}
.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(157, 34, 53, 0.12);
    border-color: var(--wine);
}
.remember-label {
    font-size: 13.5px;
    color: var(--text-dim);
    cursor: pointer;
}

/* ---------- SUBMIT ---------- */
.auth-submit {
    padding: 13px 20px;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    transition: transform .15s ease, background .15s ease;
}
.auth-submit:hover { transform: translateY(-1px); }
.auth-submit:active { transform: translateY(0); }
.auth-submit:disabled {
    background: var(--text-dim);
    border-color: var(--text-dim);
    cursor: not-allowed;
    transform: none;
}

/* ---------- ALT LINK ---------- */
.auth-alt {
    text-align: center;
    font-size: 14px;
    color: var(--text-dim);
}
.auth-alt a {
    color: var(--wine);
    font-weight: 700;
    text-decoration: none;
}
.auth-alt a:hover { color: var(--wine-hover); }

/* ==========================================================
   BRAND COLUMN (right side panel)
   ========================================================== */
.auth-brand-col {
    background: linear-gradient(160deg, var(--wine-dark), var(--wine) 60%, #C43B54);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.auth-brand-col::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(500px 300px at 90% 0%, rgba(217, 164, 65, 0.25), transparent 60%),
        radial-gradient(400px 400px at 0% 100%, rgba(255, 255, 255, 0.08), transparent 60%);
    pointer-events: none;
}

.auth-brand-inner {
    position: relative;
    z-index: 1;
    padding: 60px 52px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.logo-dot-light {
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18);
}
.logo-text-light { color: #fff; }
.logo-text-light span { color: #FFD9DE; }

.auth-brand-logo { margin-bottom: 34px; }

.auth-brand-title {
    font-size: clamp(26px, 2.6vw, 34px);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.25;
    margin-bottom: 26px;
}
.auth-brand-title em {
    font-style: normal;
    background: linear-gradient(90deg, #FFD9DE, var(--champagne));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.auth-perks {
    list-style: none;
    padding: 0;
    margin: 0 0 40px;
}
.auth-perks li {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 14px;
}
.auth-perks li i {
    color: var(--champagne);
    font-size: 16px;
}

/* ---------- STATS ---------- */
.login-stats {
    display: flex;
    gap: 34px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    padding-top: 26px;
}
.login-stat { display: flex; flex-direction: column; }
.login-stat span {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}
.login-stat small {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================
   FOOTER
   ========================================================== */
.auth-footer {
    background: #2A1017;
    color: rgba(255, 255, 255, 0.45);
    font-size: 13.5px;
    padding: 20px 0;
}
.auth-footer a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 13.5px;
}
.auth-footer a:hover { color: #fff; }
.auth-footer i { color: #229ED9; }

/* ==========================================================
   RESPONSIVE — laptops & below (1199px)
   ========================================================== */
@media (max-width: 1199px) {
    .auth-form-inner { padding: 48px 44px; }
    .auth-brand-inner { padding: 52px 42px; }
}

/* ==========================================================
   RESPONSIVE — tablets (991px)
   ========================================================== */
@media (max-width: 991px) {
    .auth-section { padding: 120px 0 60px; }
    .auth-form-inner { padding: 44px 36px; }
    .auth-split { max-width: 560px; margin-inline: auto; }
}

/* ==========================================================
   RESPONSIVE — small tablets (767px)
   ========================================================== */
@media (max-width: 767px) {
    .auth-title { letter-spacing: -0.5px; }
    .auth-form-inner { padding: 38px 26px; }
}

/* ==========================================================
   RESPONSIVE — phones (480px)
   ========================================================== */
@media (max-width: 480px) {
    .auth-section { padding: 105px 0 40px; }
    .auth-form-inner { padding: 32px 20px; }
    .auth-badge { font-size: 11px; padding: 6px 13px; letter-spacing: 2px; }
    .auth-sub { font-size: 14.5px; margin-bottom: 24px; }
    .auth-submit { padding: 12px 16px; font-size: 15px; }
    .auth-navbar .btn { font-size: 12.5px; padding: 7px 12px; }
    .logo-text { font-size: 19px; }
    .auth-alt { font-size: 13.5px; }
}



/* ---------- password reset pages ---------- */
.auth-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(157, 34, 53, 0.10);
    max-width: 520px;
    margin-inline: auto;
    overflow: hidden;
}
.auth-card-inner { padding: 44px 42px; }
.auth-card .auth-title { font-size: clamp(24px, 3vw, 30px); }
.auth-center-icon {
    width: 58px; height: 58px;
    border-radius: 16px;
    background: var(--wine-soft);
    color: var(--wine);
    font-size: 24px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
}

@media (max-width: 480px) {
    .auth-card-inner { padding: 30px 22px; }
}