/* =========================================
   WIRE AUTH PAGES — shared card theme
   All layout via Bootstrap. Only colours here.
   ========================================= */

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: var(--bg, #e9dfcf);
    color: var(--text, #2d2a26);
    -webkit-font-smoothing: antialiased;
}

/* Top nav bar */
.auth-navbar {
    background: #fff;
    border-bottom: 1px solid #d6ccbb;
    box-shadow: 0 2px 8px rgba(63,55,45,0.07);
}
.auth-navbar .brand-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #3f372d;
}
.auth-navbar .logo { width: 32px; height: 32px; object-fit: contain; }

/* Card */
.auth-card {
    background: #fff;
    border: 1px solid #d6ccbb;
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(63,55,45,0.10);
}
.auth-card-icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: #f3eee7;
    font-size: 1.4rem; color: #5f5243;
}

/* Form controls — colour overrides only */
.form-control, .form-select {
    border: 1.5px solid #d6ccbb;
    border-radius: 9px;
    color: #2d2a26;
    background: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.form-control:focus, .form-select:focus {
    border-color: #5f5243;
    box-shadow: 0 0 0 3px rgba(95,82,67,0.12);
    background: #fff;
}
.form-control:disabled, .form-control[readonly] {
    background: #f5efe6;
    color: #6e6a64;
}
.input-group-text {
    background: #f5efe6;
    border-color: #d6ccbb;
    color: #6e6a64;
}
.form-label {
    font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: #6e6a64;
}
.form-text { color: #9a948c; font-size: 0.75rem; }

/* Buttons */
.btn-wire {
    background: #5f5243; color: #fff;
    border: none; border-radius: 9px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600; transition: all 0.18s;
}
.btn-wire:hover { background: #3f372d; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(63,55,45,0.2); }
.btn-wire:active { transform: none; }

.btn-wire-outline {
    background: transparent; color: #5f5243;
    border: 1.5px solid #5f5243; border-radius: 9px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600; transition: all 0.18s;
}
.btn-wire-outline:hover { background: #f3eee7; color: #3f372d; }

/* Alert overrides */
.alert-wire-info    { background: #f3eee7; color: #3f372d; border: 1px solid #c2b8a7; border-radius: 9px; }
.alert-wire-danger  { background: #fff3ee; color: #c2410c; border: 1px solid #f4a47c; border-radius: 9px; }
.alert-wire-warning { background: #fff8e6; color: #92600a; border: 1px solid #e9ca7c; border-radius: 9px; }
.alert-wire-success { background: #f1f8e9; color: #4d7c0f; border: 1px solid #a5d66b; border-radius: 9px; }

/* OTP input */
.otp-input {
    letter-spacing: 0.5em; font-size: 1.4rem; font-weight: 700;
    text-align: center; border-radius: 9px;
    border: 2px solid #d6ccbb;
}
.otp-input:focus { border-color: #5f5243; box-shadow: 0 0 0 3px rgba(95,82,67,0.12); }

/* Stage indicator pills */
.stage-pill {
    width: 28px; height: 28px; border-radius: 50%;
    font-size: 0.75rem; font-weight: 700;
}
.stage-pill.done    { background: #4d7c0f; color: #fff; }
.stage-pill.active  { background: #5f5243; color: #fff; }
.stage-pill.pending { background: #f5efe6; color: #9a948c; border: 2px solid #d6ccbb; }
.stage-line { height: 2px; flex: 1; background: #d6ccbb; }
.stage-line.done { background: #4d7c0f; }