/* ==========================================================
   ARlogs — Signup (theme v4: Wine Red & White)
   Matches landing/home.css and login.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;
    --green: #229E54;
}

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-inner {
    padding: 48px 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: 26px;
}

/* ---------- ALERTS (styled per message.tags) ---------- */
.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: 6px;
}

.form-text {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 5px;
}

/* field-level errors from the form */
.field-error {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--wine);
    margin-top: 5px;
}

/* ---------- INPUT GROUPS ---------- */
.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: 10px 14px;
}

.auth-input .form-control {
    border: 1px solid var(--border);
    border-left: none;
    border-right: none;
    border-radius: 0;
    padding: 10px 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;
}

/* valid / invalid borders propagated to the group pieces */
.auth-input .form-control.is-valid {
    border-color: var(--green);
    background-image: none;
}
.auth-input .form-control.is-valid ~ .pw-toggle,
.auth-input:has(.form-control.is-valid) .input-group-text {
    border-color: var(--green);
}
.auth-input .form-control.is-invalid {
    border-color: var(--wine);
    background-image: none;
}
.auth-input .form-control.is-invalid ~ .pw-toggle,
.auth-input:has(.form-control.is-invalid) .input-group-text {
    border-color: var(--wine);
}

/* 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);
}

/* unified focus ring across the whole input 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;
}
/* keep green ring when a valid field is focused */
.auth-input:focus-within:has(.form-control.is-valid) {
    box-shadow: 0 0 0 3px rgba(34, 158, 84, 0.12);
}
.auth-input:focus-within:has(.form-control.is-valid) .input-group-text,
.auth-input:focus-within:has(.form-control.is-valid) .form-control,
.auth-input:focus-within:has(.form-control.is-valid) .pw-toggle {
    border-color: var(--green);
}

/* ---------- PASSWORD MATCH FEEDBACK ---------- */
.pw-match-feedback {
    font-size: 12.5px;
    font-weight: 600;
    margin-top: 5px;
    min-height: 18px;
}
.pw-match-feedback.is-match { color: var(--green); }
.pw-match-feedback.is-mismatch { color: var(--wine); }

/* ---------- TERMS 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);
}
.terms-label {
    font-size: 13px;
    color: var(--text-dim);
    cursor: pointer;
}
.terms-label a {
    color: var(--wine);
    font-weight: 600;
    text-decoration: none;
}
.terms-label a:hover { color: var(--wine-hover); }

/* ---------- 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);
    margin-top: 22px;
}
.auth-alt a {
    color: var(--wine);
    font-weight: 700;
    text-decoration: none;
}
.auth-alt a:hover { color: var(--wine-hover); }

/* ==========================================================
   BRAND COLUMN (right 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: 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: 30px; }

.auth-brand-title {
    font-size: clamp(26px, 2.6vw, 34px);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.25;
    margin-bottom: 24px;
}
.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 34px;
}
.auth-perks li {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 13px;
}
.auth-perks li i {
    color: var(--champagne);
    font-size: 16px;
}

/* ---------- MINI PHONE MOCKUP ---------- */
.mini-phone {
    width: min(250px, 100%);
    border-radius: 28px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(6px);
    padding: 16px 14px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.25);
}
.mini-phone-notch {
    width: 70px; height: 14px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    margin: 0 auto 14px;
}
.mini-chat {
    font-size: 12px;
    line-height: 1.5;
    padding: 9px 12px;
    border-radius: 12px;
    margin-bottom: 9px;
    max-width: 92%;
}
.mini-chat-in {
    background: rgba(255, 255, 255, 0.16);
    border-bottom-left-radius: 4px;
    color: rgba(255, 255, 255, 0.9);
}
.mini-chat-out {
    background: #fff;
    color: var(--wine-dark);
    font-weight: 600;
    border-bottom-right-radius: 4px;
    margin-left: auto;
}
.mini-chat-out .mono { color: var(--wine); letter-spacing: 2px; }

/* ==========================================================
   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: 42px 44px; }
    .auth-brand-inner { padding: 46px 42px; }
}

/* ==========================================================
   RESPONSIVE — tablets (991px)
   ========================================================== */
@media (max-width: 991px) {
    .auth-section { padding: 120px 0 60px; }
    .auth-form-inner { padding: 40px 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: 34px 26px; }
}

/* ==========================================================
   RESPONSIVE — phones (480px)
   ========================================================== */
@media (max-width: 480px) {
    .auth-section { padding: 105px 0 40px; }
    .auth-form-inner { padding: 28px 20px; }
    .auth-badge { font-size: 11px; padding: 6px 13px; letter-spacing: 2px; }
    .auth-sub { font-size: 14.5px; margin-bottom: 22px; }
    .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; }
    .form-label { font-size: 13px; }
}