/*
|--------------------------------------------------------------------------
| TBS Auth UI
|--------------------------------------------------------------------------
| Minimal • Modern • Clean
|--------------------------------------------------------------------------
*/

:root {

    /*
    |--------------------------------------------------------------------------
    | Bootstrap Overrides
    |--------------------------------------------------------------------------
    */

    --bs-primary: #0C1248;
    --bs-secondary: #72849C;

    --bs-success: #6F6F6F;
    --bs-danger: #D03737;
    --bs-warning: #E5C71F;
    --bs-info: #E37A1A;

    --bs-light: #FFFFFF;
    --bs-dark: #0C1248;

    --bs-body-bg: #FFFFFF;
    --bs-body-color: #0C1248;

    --bs-font-sans-serif:
            "Montserrat",
            system-ui,
            sans-serif;

    /*
    |--------------------------------------------------------------------------
    | Brand Colors
    |--------------------------------------------------------------------------
    */

    --tbs-blue: #0C1248;
    --tbs-red: #D03737;

    --tbs-orange: #E37A1A;
    --tbs-yellow: #E5C71F;

    --tbs-gray: #72849C;
    --tbs-gray-dark: #373B59;

    --tbs-dark-red: #860C0C;

    /*
    |--------------------------------------------------------------------------
    | UI
    |--------------------------------------------------------------------------
    */

    --tbs-radius-sm: 12px;
    --tbs-radius-md: 18px;
    --tbs-radius-lg: 28px;

    --tbs-shadow:
            0 10px 40px rgba(12,18,72,.06);

    --tbs-transition:
            all .2s ease;

}

/*
|--------------------------------------------------------------------------
| Base
|--------------------------------------------------------------------------
*/

html,
body {
    overflow-x: hidden;
}

body {

    min-height: 100vh;

    font-family:
            var(--bs-font-sans-serif);

    color:
            var(--tbs-blue);

    background:
            radial-gradient(
                    circle at top left,
                    rgba(227,122,26,.06),
                    transparent 28%
            ),
            radial-gradient(
                    circle at bottom right,
                    rgba(208,55,55,.06),
                    transparent 28%
            ),
            #fff;

    -webkit-font-smoothing:
            antialiased;

}

/*
|--------------------------------------------------------------------------
| Typography
|--------------------------------------------------------------------------
*/

.tbs-title {

    font-family:
            "Playfair Display",
            serif;

    font-size:
            clamp(2.1rem, 7vw, 4.1rem);

    line-height:
            1;

    color:
            var(--tbs-blue);

    letter-spacing:
            -.03em;

}

.tbs-subtitle {

    font-size:
            1rem;

    line-height:
            1.7;

    color:
            var(--tbs-gray);

}

.text-primary {
    color: var(--tbs-blue) !important;
}

.text-danger {
    color: var(--tbs-red) !important;
}

/*
|--------------------------------------------------------------------------
| Layout
|--------------------------------------------------------------------------
*/

.tbs-landing {

    min-height: 100vh;

    display: flex;
    align-items: center;

    padding:
            2rem
            0;

}

.tbs-logo {

    width: 100%;
    max-width: 180px;

    margin-inline: auto;

}

.tbs-card {

    position: relative;

    background:
            rgba(255,255,255,.82);

    backdrop-filter:
            blur(20px);

    border:
            1px solid rgba(12,18,72,.06);

    border-radius:
            var(--tbs-radius-lg);

    box-shadow:
            var(--tbs-shadow);

    padding:
            clamp(1.75rem, 4vw, 3rem);

}

/*
|--------------------------------------------------------------------------
| Badge
|--------------------------------------------------------------------------
*/

.tbs-badge {

    display: inline-flex;
    align-items: center;
    gap: .55rem;

    padding:
            .6rem
            1rem;

    border-radius:
            999px;

    background:
            rgba(208,55,55,.08);

    color:
            var(--tbs-red);

    font-size:
            .9rem;

    font-weight:
            600;

}

.tbs-icon {
    color: var(--tbs-red);
}

/*
|--------------------------------------------------------------------------
| Divider
|--------------------------------------------------------------------------
*/

.tbs-divider {

    width: 72px;
    height: 4px;

    border-radius: 999px;

    background:
            linear-gradient(
                    90deg,
                    var(--tbs-orange),
                    var(--tbs-red),
                    var(--tbs-yellow)
            );

}

/*
|--------------------------------------------------------------------------
| Form
|--------------------------------------------------------------------------
*/

.form-label {

    font-size:
            .92rem;

    font-weight:
            600;

    margin-bottom:
            .75rem;

}

.input-group {

    border-radius: 0;

    overflow: hidden;

}

.form-control,
.input-group-text {

    min-height:
            58px;

    border:
            1px solid rgba(12,18,72,.08);

    background:
            rgba(255,255,255,.9);

}

.form-control {

    padding:
            .85rem
            1rem;

    font-size:
            .95rem;

    color:
            var(--tbs-blue);

}

.form-control::placeholder {
    color: rgba(114,132,156,.8);
}

.form-control:focus {

    border-color:
            rgba(208,55,55,.35);

    box-shadow:
            0 0 0 .2rem rgba(208,55,55,.08);

}

.input-group-text {

    color:
            var(--tbs-blue);

    padding:
            0 1rem;

}

/*
|--------------------------------------------------------------------------
| Checkbox
|--------------------------------------------------------------------------
*/

.form-check-input {

    border-color:
            rgba(12,18,72,.18);

}

.form-check-input:checked {

    background-color:
            var(--tbs-red);

    border-color:
            var(--tbs-red);

}

/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/

.btn {

    min-height:
            56px;

    border-radius:
            999px;

    font-weight:
            600;

    transition:
            var(--tbs-transition);

}

.btn-primary {

    --bs-btn-bg:
            var(--tbs-blue);

    --bs-btn-border-color:
            var(--tbs-blue);

    --bs-btn-hover-bg:
            #070b32;

    --bs-btn-hover-border-color:
            #070b32;

    --bs-btn-active-bg:
            #070b32;

    --bs-btn-active-border-color:
            #070b32;

    box-shadow:
            0 10px 24px rgba(12,18,72,.12);

}

.btn-primary:hover {

    transform:
            translateY(-1px);

}

/*
|--------------------------------------------------------------------------
| Links
|--------------------------------------------------------------------------
*/

a {

    transition:
            var(--tbs-transition);

}

a:hover {
    opacity: .9;
}

/*
|--------------------------------------------------------------------------
| Flash Messages
|--------------------------------------------------------------------------
*/

.tbs-flash-wrapper {
    margin-bottom: 1.5rem;
}

.tbs-alert {

    border: 0;

    border-radius:
            var(--tbs-radius-md);

    padding:
            1rem
            1.25rem;

    box-shadow:
            0 8px 24px rgba(12,18,72,.04);

}

.tbs-alert-content {

    display: flex;
    align-items: center;
    gap: 1rem;

}

.tbs-alert-icon {

    width: 40px;
    height: 40px;

    border-radius: 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

}

.tbs-alert-message {

    display: flex;
    align-items: center;

    min-height: 40px;

    line-height: 1.5;

    font-weight: 500;

}

/*
|--------------------------------------------------------------------------
| Alert Variants
|--------------------------------------------------------------------------
*/

.alert-success {

    background:
            rgba(46,125,50,.08);

    color:
            #2E7D32;

}

.alert-success .tbs-alert-icon {

    background:
            rgba(46,125,50,.12);

}

.alert-danger {

    background:
            rgba(208,55,55,.08);

    color:
            var(--tbs-red);

}

.alert-danger .tbs-alert-icon {

    background:
            rgba(208,55,55,.12);

}

.alert-warning {

    background:
            rgba(227,122,26,.12);

    color:
            #9A5B00;

}

.alert-warning .tbs-alert-icon {

    background:
            rgba(227,122,26,.18);

}

.alert-info {

    background:
            rgba(12,18,72,.05);

    color:
            var(--tbs-blue);

}

.alert-info .tbs-alert-icon {

    background:
            rgba(12,18,72,.08);

}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    .tbs-card {

        padding:
                1.5rem;

        border-radius:
                24px;

    }

    .tbs-title {

        font-size:
                2.25rem;

    }

    .tbs-logo {
        max-width: 150px;
    }

    .form-control,
    .input-group-text {

        min-height:
                54px;

    }

}

@media (max-width: 576px) {

    .tbs-landing {

        padding:
                1rem
                0;

    }

    .tbs-card {

        padding:
                1.25rem;

    }

    .tbs-title {

        font-size:
                2rem;

    }

}