/*
 * Shared styles for client portal auth screens:
 * Login, Register, ForgotPassword, ResetPassword.
 *
 * Body palette + brand custom utilities are intentionally redeclared here so the
 * auth pages render identically whether they extend _Layout or not.
 */

body.client-auth-page,
body.client-auth-page > main {
    font-family: 'Inter', sans-serif;
    background-color: #FFFFFF;
    color: #191710;
}

/* ---------- Brand utilities ---------- */
.bg-primary-custom { background-color: #215A36; }
.text-primary-custom { color: #215A36; }

.btn-primary-custom {
    background-color: #215A36 !important;
    border-color: #215A36 !important;
    color: #ffffff !important;
}

.btn-primary-custom:hover {
    background-color: #1A4729;
    border-color: #1A4729;
}

/* ---------- Login layout ---------- */
.login-wrapper {
    max-width: 1100px;
    border-radius: 1rem;
    background-color: #FFFFFF;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18);
    overflow: hidden;
    min-height: 600px;
}

.login-image {
    background-size: cover;
    background-position: center top;
    min-height: 220px;
}

@media (max-width: 767.98px) {
    .login-image {
        min-height: 260px;
        background-position: center 20%;
    }
}

.login-image-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
}

/* ---------- Register layout ---------- */
.header-blur {
    backdrop-filter: blur(10px);
    background-color: rgba(248, 247, 246, 0.85);
}

.register-wrapper {
    max-width: 1200px;
    border-radius: 1.5rem;
    background-color: #FFFFFF;
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.18);
    overflow: hidden;
    min-height: 600px;
    border: 1px solid #E5E7EB;
}

.sidebar-image {
    height: 100%;
    object-fit: cover;
}

.sidebar-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}

/* ---------- Form controls used across all auth views ---------- */
.form-control-custom {
    background-color: #FFFFFF;
    border-color: #E5E7EB;
    color: #191710;
}

.form-control-custom::placeholder {
    color: #9CA3AF;
}

.form-control-custom:focus {
    box-shadow: 0 0 0 0.15rem rgba(33, 90, 54, 0.35);
    border-color: #215A36;
}

.form-control-soft {
    background-color: #F9FAFB;
    border-color: #d6d3cd;
    color: #111827;
}

.form-control-soft::placeholder {
    color: #a8a29e;
}

.form-control-soft:focus {
    box-shadow: 0 0 0 0.15rem rgba(33, 90, 54, 0.35);
    border-color: #215A36;
}

.unit-addon {
    background-color: #F9FAFB;
    border-color: #d6d3cd;
    color: #5c5a54;
    font-weight: 600;
    min-width: 3rem;
    justify-content: center;
}

.textarea-soft {
    background-color: #F9FAFB;
    border-color: #d6d3cd;
    color: #111827;
}

.textarea-soft::placeholder {
    color: #a8a29e;
}

.textarea-soft:focus {
    box-shadow: 0 0 0 0.15rem rgba(33, 90, 54, 0.35);
    border-color: #215A36;
}

.form-label-sm {
    font-size: 0.85rem;
    font-weight: 600;
}

/* ---------- intl-tel-input (register phone) ---------- */
.iti {
    width: 100%;
    display: block;
    --iti-border-color: #d6d3cd;
    --iti-hover-color: rgba(33, 90, 54, 0.08);
    --iti-dropdown-bg: #FFFFFF;
}

.iti__country-container {
    z-index: 4;
}

.iti input.form-control-soft,
.iti input.iti__tel-input {
    width: 100%;
    background-color: #F9FAFB;
    border-color: #d6d3cd;
    color: #111827;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.iti input.form-control-soft:focus,
.iti input.iti__tel-input:focus {
    box-shadow: 0 0 0 0.15rem rgba(33, 90, 54, 0.35);
    border-color: #215A36;
}

.iti__selected-country {
    border-radius: 0.375rem 0 0 0.375rem;
}

.iti__dropdown-content {
    border-radius: 0.5rem;
    border-color: #E5E7EB;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
}

.iti__search-input {
    border-color: #E5E7EB !important;
}

.iti__country.iti__highlight {
    background-color: rgba(33, 90, 54, 0.1);
}

footer {
    color: #9CA3AF;
}