/* ==========================================================================
   ZamPayroll — Split Auth Card
   Add-on stylesheet, loaded after style.css. Only touches .auth-* classes
   so it won't fight with the rest of the design system.
========================================================================== */

.auth-body {
    background:
        repeating-radial-gradient(circle at 85% 15%, rgba(255,255,255,.045) 0 1px, transparent 1px 30px),
        linear-gradient(150deg, #0A3B22 0%, #00742D 100%);
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
}

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
}

/* ---- Card shell ---------------------------------------------------- */

.auth-card {
    display: flex;
    width: 100%;
    max-width: 960px;
    min-height: 640px;
    background: var(--bs-body-bg);
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 24px 60px -28px rgba(15, 23, 42, .35);
    transition: opacity .15s ease, transform .15s ease;
}

.auth-card.auth-card-wide {
    max-width: 1360px;
}

/* ---- Left: form ------------------------------------------------------ */

.auth-form-side {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    padding: 1rem 1rem;
    max-height: 100vh;
    overflow-y: auto;
}

.auth-card-wide .auth-form-side {
    flex-basis: 60%;
    padding: 1rem 1rem;
}

.auth-form-content {
    margin-top: 1.75rem;
}

/* Roomier fields — applies inside any auth form, register benefits most */
.auth-form-side .form-label {
    margin-bottom: .5rem;
}

.auth-form-side .form-control,
.auth-form-side .input-group-text,
.auth-form-side textarea.form-control {
    padding-top: .65rem;
    padding-bottom: .65rem;
    font-size: .95rem;
}

.auth-form-side .input-group-text {
    width: 42px;
    justify-content: center;
}

.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none;
    color: inherit;
    width: fit-content;
}

.auth-brand .brand-logo {
    border-radius: .55rem;
}

.auth-brand strong {
    display: block;
    font-size: 1.05rem;
    line-height: 1.2;
}

.auth-brand small {
    display: block;
    color: var(--bs-secondary-color, #6c757d);
    font-weight: 500;
    font-size: .8rem;
}

/* ---- Right: image / slider -------------------------------------------- */

.auth-image-side {
    flex: 1 1 50%;
    position: relative;
}

.auth-card-wide .auth-image-side {
    flex-basis: 40%;
}

.auth-carousel,
.auth-carousel .carousel-inner,
.auth-carousel .carousel-item {
    height: 100%;
}

.auth-slide {
    height: 100%;
    
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 5rem;
    position: relative;
    overflow: hidden;
    color: #fff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Dark gradient over the photo so the caption text stays readable */
.auth-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(2, 6, 23, .88) 0%, rgba(2, 6, 23, .45) 50%, rgba(2, 6, 23, .05) 100%);
    pointer-events: none;
}

.auth-slide-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    position: relative;
}

.auth-slide h3 {
    font-weight: 700;
    font-size: 1.4rem;
    margin-bottom: .5rem;
    position: relative;
}

.auth-slide p {
    color: rgba(255, 255, 255, .85);
    max-width: 300px;
    margin-bottom: 0;
    position: relative;
}

.auth-slide-tag {
    position: relative;
    display: inline-block;
    font-size: .7rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(255, 255, 255, .8);
    margin-bottom: .75rem;
}

.auth-placeholder-note {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 2;
    font-size: .65rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: rgba(0, 0, 0, .28);
    padding: .3rem .65rem;
    border-radius: 999px;
    color: rgba(255, 255, 255, .8);
}

.auth-carousel-indicators {
    position: absolute;
    bottom: 1.5rem;
    left: 2.5rem;
    right: auto;
    margin: 0;
    justify-content: flex-start;
    gap: .4rem;
    z-index: 2;
}

.auth-carousel-indicators [data-bs-target] {
    width: 22px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .35);
    opacity: 1;
    border: 0;
}

.auth-carousel-indicators .active {
    background: #fff;
}

/* ---- Responsive -------------------------------------------------------- */

@media (max-width: 991.98px) {
    .auth-image-side {
        display: none !important;
    }

    .auth-card,
    .auth-card.auth-card-wide {
        max-width: 540px;
    }

    .auth-form-side {
        max-height: none;
        padding: 2.25rem 1.75rem;
    }
}

@media (max-width: 575.98px) {
    .auth-page {
        padding: 1.25rem;
    }

    .auth-form-side {
        padding: 1.75rem 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-carousel .carousel-item {
        transition: none;
    }
}

/* ---- ZamPayroll brand refresh ----------------------------------------- */
.auth-brand-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.auth-workspace {
    display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 700;
    padding: .35rem .7rem; border-radius: 999px; background: #FBF0E5; color: #9A5418;
}
.auth-form-side { padding: 2rem 2.25rem; }
.auth-form-content h1 { font-family: 'Fraunces', Georgia, serif; font-size: 1.9rem; font-weight: 700; letter-spacing: -.01em; }
.auth-form-content .form-control { border-radius: 0 12px 12px 0; }
.auth-form-content .input-group-text { border-radius: 12px 0 0 12px; }
.auth-form-content .form-control:focus { border-color: #00742D; box-shadow: 0 0 0 4px rgba(0,116,45,.12); }
.auth-form-content .btn-success { background: #00742D; border-color: #00742D; border-radius: 12px; font-weight: 600; }
.auth-form-content .btn-success:hover { background: #00602A; border-color: #00602A; }
.auth-form-content a.text-success, .auth-form-content .text-success { color: #00742D !important; }
.auth-divider { display: flex; align-items: center; gap: .75rem; color: #7B877F; font-size: .8rem; margin: 1.5rem 0; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: #DCE5DE; }
.auth-cta-card {
    display: flex; gap: .85rem; align-items: center; padding: .9rem 1rem; border-radius: 14px;
    border: 1.5px dashed #CFE6D7; background: #F6FAF7; text-decoration: none; color: #15201A;
}
.auth-cta-card:hover { border-color: #00742D; color: #15201A; }
.auth-cta-card .ic { width: 40px; height: 40px; border-radius: 12px; background: #E8F3EC; color: #00742D; display: grid; place-items: center; font-size: 1.15rem; flex: none; }
.auth-cta-card b { display: block; font-size: .92rem; }
.auth-cta-card span { font-size: .8rem; color: #7B877F; }
.pw-rules { list-style: none; padding: 0; margin: .5rem 0 0; font-size: .8rem; color: #7B877F; display: flex; flex-wrap: wrap; gap: .35rem .9rem; }
.pw-rules li::before { content: "○ "; }
.pw-rules li.ok { color: #00742D; }
.pw-rules li.ok::before { content: "● "; }