/* ===================================================================
   CosaNostra – Auth Pages (Login / Register / Forgot Password)
   Uses theme variables from site.css (--cn-*).
   =================================================================== */

/* ---------- Page shell ---------- */
.auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--cn-dark-bg);
    background-image:
        linear-gradient(rgba(20, 20, 20, 0.95), rgba(20, 20, 20, 0.95)),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 0, 0, 0.1) 2px, rgba(0, 0, 0, 0.1) 4px);
    color: var(--cn-light);
    font-family: var(--cn-font-family);
}

/* ---------- Nav bar ---------- */
.auth-nav {
    background: linear-gradient(135deg, var(--cn-shadow-black) 0%, var(--cn-dark) 100%);
    border-bottom: 2px solid var(--cn-gold);
    padding: .75rem 0;
}

.auth-nav .navbar-brand {
    font-family: var(--cn-font-family-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cn-gold) !important;
    letter-spacing: 1px;
}

.text-cn-red { color: var(--cn-red); }

/* ---------- Main content area ---------- */
.auth-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.auth-wrapper {
    width: 100%;
    max-width: 520px;
}

/* ---------- Mysterious figure override for dark theme ---------- */
.auth-wrapper .mysterious-figure-container {
    border-bottom: 2px solid var(--cn-brown);
    padding: 1rem;
    margin-bottom: 0;
}

.auth-wrapper .speech-bubble {
    background: var(--cn-card-bg);
    color: var(--cn-light);
    border: 1px solid var(--cn-brown);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
}

.auth-wrapper .speech-bubble::after {
    border-right-color: var(--cn-card-bg);
}

.auth-wrapper .speech-bubble::before {
    border-right-color: var(--cn-brown);
}

.auth-wrapper .label-top-left {
    color: var(--cn-gold);
    font-family: var(--cn-font-family-display);
}

/* Mobile: triangle points up */
@media (max-width: 768px) {
    .auth-wrapper .speech-bubble::before {
        border-right-color: transparent;
        border-bottom-color: var(--cn-brown);
    }
    .auth-wrapper .speech-bubble::after {
        border-right-color: transparent;
        border-bottom-color: var(--cn-card-bg);
    }
}

/* ---------- Auth card ---------- */
.auth-card {
    background: var(--cn-card-bg);
    border: 1px solid var(--cn-brown);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
    padding: 2.5rem 2rem;
}

.auth-card-title {
    font-family: var(--cn-font-family-display);
    color: var(--cn-gold);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.75rem;
    text-align: center;
}

/* ---------- Form controls ---------- */
.auth-card .form-label,
.auth-card label {
    color: var(--cn-gold);
    font-weight: 600;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: .35rem;
}

.auth-card .form-control,
.auth-card .p_input {
    background-color: var(--cn-dark);
    border: 1px solid var(--cn-steel-gray);
    color: var(--cn-light);
    border-radius: 6px;
    padding: .65rem .9rem;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.auth-card .form-control:focus,
.auth-card .p_input:focus {
    background-color: var(--cn-dark);
    border-color: var(--cn-gold);
    box-shadow: 0 0 0 3px rgba(200, 165, 91, .15);
    color: var(--cn-light);
    outline: none;
}

.auth-card .form-control::placeholder,
.auth-card .p_input::placeholder {
    color: var(--cn-smoke);
}

/* ---------- Checkboxes ---------- */
.auth-card .form-check-input {
    background-color: var(--cn-dark);
    border-color: var(--cn-steel-gray);
}

.auth-card .form-check-input:checked {
    background-color: var(--cn-red);
    border-color: var(--cn-red);
}

.auth-card .form-check-label {
    color: var(--cn-light);
    font-size: .9rem;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

/* ---------- Links ---------- */
.auth-card a {
    color: var(--cn-gold);
    text-decoration: none;
    transition: color .2s ease;
}

.auth-card a:hover {
    color: var(--cn-light);
    text-decoration: underline;
}

/* ---------- Buttons ---------- */
.auth-card .btn-primary {
    background: linear-gradient(135deg, var(--cn-red) 0%, var(--cn-blood-red) 100%);
    border: 1px solid var(--cn-blood-red);
    color: var(--cn-light);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: .6rem 1.5rem;
    border-radius: 5px;
    transition: all .25s ease;
}

.auth-card .btn-primary:hover {
    box-shadow: var(--cn-glow-red);
    transform: translateY(-1px);
}

.auth-card .btn-secondary,
.auth-card .btn-outline-secondary {
    background: transparent;
    border: 1px solid var(--cn-gold);
    color: var(--cn-gold);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: .6rem 1.5rem;
    border-radius: 5px;
    transition: all .25s ease;
}

.auth-card .btn-secondary:hover,
.auth-card .btn-outline-secondary:hover {
    background: var(--cn-gold);
    color: var(--cn-dark);
    box-shadow: var(--cn-glow-gold);
}

/* ---------- Alerts ---------- */
.auth-card .alert {
    border-radius: 6px;
    font-size: .9rem;
    border: none;
}

.auth-card .alert-success {
    background: rgba(46, 125, 50, .15);
    color: #66bb6a;
    border-left: 3px solid var(--cn-success);
}

.auth-card .alert-danger {
    background: rgba(198, 40, 40, .15);
    color: #ef5350;
    border-left: 3px solid var(--cn-danger);
}

.auth-card .alert-warning {
    background: rgba(249, 168, 37, .15);
    color: #ffb74d;
    border-left: 3px solid var(--cn-warning);
}

.auth-card .alert-info {
    background: rgba(25, 118, 210, .15);
    color: #42a5f5;
    border-left: 3px solid var(--cn-info);
}

/* ---------- Validation ---------- */
.auth-card .text-danger,
.auth-card .error,
.auth-card .field-validation-error {
    color: #ef5350 !important;
    font-size: .8rem;
    margin-top: .25rem;
}

.auth-card .validation-summary-errors ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.auth-card .validation-summary-errors li {
    color: #ef5350;
    font-size: .85rem;
    padding: .2rem 0;
}

/* ---------- Divider ---------- */
.auth-card hr {
    border-color: var(--cn-brown);
    opacity: .5;
}

/* ---------- Footer text ---------- */
.auth-footer-text {
    text-align: center;
    margin-top: 1.25rem;
    font-size: .9rem;
    color: rgba(238, 238, 238, .55);
}

.auth-footer-text a {
    color: var(--cn-gold);
    font-weight: 600;
}

/* ---------- Page footer ---------- */
.auth-page-footer {
    text-align: center;
    padding: 1.25rem 0;
    border-top: 1px solid var(--cn-brown);
    background: var(--cn-shadow-black);
}

.auth-page-footer p {
    margin: 0;
    font-size: .8rem;
    color: rgba(238, 238, 238, .3);
}

/* ---------- Responsive ---------- */
@media (max-width: 575px) {
    .auth-card {
        padding: 1.75rem 1.25rem;
    }

    .auth-card-title {
        font-size: 1.25rem;
    }
}