:root {
    --bg: #0a0a0a;
    --muted: #bfc3cb;
    --pill-bg: #d3d7dd;
    --primary-btn: #2e3c75;
    --primary-btn-hover: #283567;
    --aqua: #27a7b9;
    --aqua-600: #1f8a97;
    --purple: #6f2b95;
    --purple-600: #5d227d;
    --card-border: rgba(255,255,255,.5);
}

/* outer page scroll disabled */
html, body {
    height: 100%;
    background: var(--bg);
    color: #fff;
    overflow: hidden;
}

.login-row {
    height: 100vh;
}

/* Left panel */
.left-pane {
    background: #000;
    display: flex;
    align-items: flex-start !important;
    justify-content: center;
    position: relative;
    height: 100vh;
    overflow-y: auto; /* scroll for left panel */
}

.left-pane {
    align-items: flex-start !important;
    overflow-y: auto;
    padding-top: 60px; /* spacing from top */
}

/* left scroll */
.left-pane {
    direction: rtl;
    overflow-y: auto;
}

    /* content ltr */
    .left-pane .login-card {
        direction: ltr;
    }

.brand {
    position: absolute;
    top: 16px;
    left: 20px;
    opacity: .9;
}

.login-card {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    text-align: center;
}

.pill-input.bg-white {
    background-color: #fff;
    border: 1px solid #cfd3dc !important;
}

.pill-input.form-control {
    background: var(--pill-bg);
    border: none;
    border-radius: 9999px !important;
    padding: 0.75rem 1.25rem !important;
    min-height: 48px;
}

    .pill-input.form-control::placeholder {
        color: #3b3b3b;
    }

/* center placeholder text */
.pill-input::placeholder {
    text-align: center;
}

/* keep typed text aligned left */
.pill-input {
    text-align: center !important;
}

.btn-pill {
    border-radius: 999px !important;
    padding: .55rem 1.25rem;
}

.btn-primary-pill {
    background: var(--primary-btn);
    border: 2px solid #ffffff;
    color: #fff;
}

    .btn-primary-pill:hover {
        background: var(--primary-btn-hover);
        border: 2px solid #ffffff;
    }

.btn-aqua-outline {
    background: var(--aqua);
    border: 2px solid #ffffff;
    color: #fff;
}

    .btn-aqua-outline:hover {
        background: var(--aqua-600);
        color: #fff;
        border: 2px solid #ffffff;
    }

.btn-purple {
    background: var(--purple);
    border: 2px solid #ffffff;
    color: #fff;
}

    .btn-purple:hover {
        background: var(--purple-600);
        border: 2px solid #ffffff;
    }

.form-links a {
    color: #cfd3dc;
    text-decoration: underline;
}

    .form-links a:hover {
        color: #fff;
    }

.divider-text {
    color: var(--muted);
    margin: .75rem 0;
}

.socials .social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    box-sizing: border-box;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    background: #0f0f0f;
    margin: 0 .35rem;
}

    .socials .social-btn img {
        width: 26px;
        height: 26px;
    }

.social-btn:hover {
    border: 1px solid #ffffff;
}

.tiny {
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.25rem;
}

/* Right slider */
.right-pane {
    position: relative;
    background: #111;
}

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

        .right-pane .carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

/* light vertical divider */
.divider-vertical {
    position: absolute;
    top: 0;
    left: -1px;
    width: 2px;
    height: 100%;
    background: rgba(255,255,255,.08);
}

/* circular carousel dots */
.carousel-indicators [data-bs-target] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ffffff80;
    border: 1px solid #ffffff;
    margin: 0 6px;
}

.carousel-indicators .active {
    background-color: #ffffff;
    opacity: 1;
}

/* Mobile tweaks */
@media (max-width: 991.98px) {
    .left-pane {
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
        padding: 1.5rem 1rem 2rem;
    }

    .brand {
        position: static;
        display: block;
        margin: 0 auto 1.5rem auto;
        text-align: center;
    }

    .login-card {
        max-width: 100%;
        margin: 0 auto;
    }
}

/* pill style select */
.pill-input.form-select {
    background: var(--pill-bg);
    border: none;
    border-radius: 9999px !important;
    padding: 0.75rem 3rem 0.75rem 1.25rem !important;
    min-height: 48px;
    /* center select text */
    text-align: center;
    text-align-last: center;
}

    /* remove default focus shadow */
    .pill-input.form-select:focus {
        box-shadow: none;
    }

/* keep inputs left aligned */
.pill-input.form-control, .pill-input.form-select {
    background-color: var(--pill-bg);
    border: none;
    border-radius: 9999px !important;
    padding: 0.75rem 1.25rem !important;
    min-height: 48px;
}

    .pill-input.form-control::placeholder {
        color: #3b3b3b;
    }

/* general left alignment */
.pill-input {
    text-align: center !important;
}

    /* re-center only selects */
    .pill-input.form-select {
        text-align: center !important;
        text-align-last: center;
    }

    /* Restore standard Bootstrap 5 arrow since base CSS might strip it */
    .pill-input.form-select {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 1.25rem center;
        background-size: 16px 12px;
        padding-right: 2.5rem !important;
    }

/* pill input group */
.input-group.pill-input-group .form-control.pill-input {
    border-radius: 9999px 0 0 9999px !important;
}

.input-group.pill-input-group .btn {
    border-radius: 0 9999px 9999px 0 !important;
    border-left: 0;
}

/* match input and button height */
.input-group.pill-input-group .form-control,
.input-group.pill-input-group .btn {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

@media (max-width: 991.98px) {
    .brand {
        position: static;
        display: block;
        margin: 0 auto 1.5rem auto;
        text-align: center;
    }

    .login-card {
        max-width: 100%;
        margin: 0 auto;
    }
}

.tiny a {
    color: #cfd3dc;
    text-decoration: underline;
}

    .tiny a:hover {
        color: #fff;
    }

.modal-content {
    background-color: #ffffff;
    color: #000000;
}

@media (max-width: 991.98px) {
    html, body {
        overflow-y: auto; /* enable normal scroll on mobile */
    }

    .left-pane {
        height: auto;
        overflow-y: visible;
    }
}