/* static/css/style.css */

:root {
    --brand-primary: #f8f9fa;
    --brand-secondary: #ffffff;
    --brand-accent: rgb(9, 12, 100);
    --brand-accent-hover: rgb(7, 9, 80);
    --brand-light: #6c757d;
    --brand-lighter: #212529;
    --bs-body-bg: var(--brand-primary);
    --bs-body-color: var(--brand-lighter);
    --bs-border-color: #dee2e6;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bs-body-bg);
}

.left-panel {
    background: var(--brand-accent);
}

.form-container {
    background-color: var(--brand-secondary);
}

.btn-accent {
    background-color: var(--brand-accent);
    color: white;
    border: 0;
    padding: 0.75rem;
}
.btn-accent:hover {
    background-color: var(--brand-accent-hover);
    color: white;
}

.form-control {
    padding: 0.75rem;
}

.form-control:focus {
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 0.25rem rgba(9, 12, 100, 0.25);
}

.link-accent {
    color: var(--brand-accent);
    text-decoration: none;
}
.link-accent:hover {
    color: var(--brand-accent-hover);
    text-decoration: underline;
}

.or-separator {
    display: flex;
    align-items: center;
    text-align: center;
    color: #6c757d;
}

.or-separator::before,
.or-separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #dee2e6;
}

.or-separator:not(:empty)::before {
    margin-right: .5em;
}

.or-separator:not(:empty)::after {
    margin-left: .5em;
}

.btn-social {
    padding: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    border: 1px solid var(--bs-border-color);
    transition: background-color 0.2s ease-in-out;
    text-decoration: none;
    color: var(--bs-body-color);
}
.btn-social:hover {
    background-color: #f1f3f5;
}
.btn-social svg {
    width: 20px;
    height: 20px;
}

/* Password strength and toggle styles */
.password-wrapper {
    position: relative;
}

.password-toggle-icon {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--brand-light);
}

.password-strength {
    height: 5px;
    margin-top: 5px;
}

/* ADD THIS SNIPPET TO DISABLE BOOTSTRAP'S DEFAULT INPUT ICONS */
.form-control.is-valid, .was-validated .form-control:valid,
.form-control.is-invalid, .was-validated .form-control:invalid {
    background-image: none !important;
    padding-right: 0.75rem !important; /* Reset padding */
}


/* ################################################### */
.mobile_only {
    display:block; 
}

.laptop_only {
    display:none; 
}

/* Styles work for screens above 768px */
@media (min-width:768px) {
    .mobile_only {
    display:none;
    }

    .laptop_only {
        display:block;
    }

}
/* ################################################## */