html,
body {
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-content {
    flex: 1 0 auto;
}

.footer-section {
    flex-shrink: 0;
    margin-top: auto;
}

/* Profile page layering */
.profile-section {
    position: relative;
    isolation: isolate;
}

.profile-section > .container-lg {
    position: relative;
    z-index: 1;
}

body.light-mode .profile-section::before {
    display: none;
}


/* Phone input group specific rules */
.phone-group {
    display: flex;
    gap: 10px;
    align-items: stretch;
    direction: rtl;
}

    .phone-group .select2-container {
        width: 110px !important;
        min-width: 110px;
        flex: 0 0 110px;
        direction: rtl;
    }

        .phone-group .select2-container .selection {
            display: block;
            width: 100%;
        }

    .phone-group .select2-container--default .select2-selection--single {
        height: 56px;
        border-radius: 20px;
        background: var(--Secondy-colors-Accent-Cosmos, rgba(34, 44, 56, 1));
        border: 1px solid rgba(255, 255, 255, 0.12);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 2rem 0 0.9rem;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .phone-group .select2-container--default.select2-container--open .select2-selection--single,
    .phone-group .select2-container--default.select2-container--focus .select2-selection--single {
        border-color: rgba(0, 204, 153, 0.55);
        box-shadow: 0 0 0 4px rgba(0, 204, 153, 0.08);
    }

    .phone-group .select2-container--default .select2-selection--single .select2-selection__rendered {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        line-height: normal;
        padding: 0 !important;
        color: var(--text-light);
        overflow: visible;
    }

    .phone-group .select2-container--default .select2-selection--single .select2-selection__arrow {
        width: 18px;
        height: 18px;
        right: 0.7rem;
        left: auto;
        top: 50%;
        transform: translateY(-50%);
    }

        .phone-group .select2-container--default .select2-selection--single .select2-selection__arrow b {
            border-color: rgba(139, 153, 163, 1) transparent transparent transparent;
            border-width: 6px 5px 0 5px;
            margin-left: -5px;
            margin-top: -2px;
        }

    .phone-group .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
        border-color: transparent transparent rgba(139, 153, 163, 1) transparent;
        border-width: 0 5px 6px 5px;
    }

.country-selection-value,
.country-option,
.country-option-meta {
    display: flex;
    align-items: center;
}

.country-selection-value {
    gap: 0.45rem;
    justify-content: center;
    color: var(--text-light);
    font-weight: 500;
    white-space: nowrap;
}

    .country-selection-value .flag-icon,
    .country-option .flag-icon {
        width: 1rem;
        height: 0.75rem;
        border-radius: 2px;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
    }

.phone-country-dropdown {
    min-width: 220px;
    background: #18212c;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.28);
}

    .phone-country-dropdown .select2-results__options {
        padding: 0.35rem;
    }

    .phone-country-dropdown .select2-results__option {
        padding: 0.7rem 0.85rem;
        border-radius: 12px;
        color: var(--text-light);
    }

    .phone-country-dropdown .select2-results__option--highlighted.select2-results__option--selectable {
        background: rgba(0, 204, 153, 0.14);
        color: #fff;
    }

.country-option {
    justify-content: space-between;
    gap: 0.85rem;
    width: 100%;
    direction: rtl;
}

.country-option-meta {
    gap: 0.55rem;
    color: #fff;
    font-weight: 600;
}

.country-option-name {
    color: rgba(160, 170, 181, 1);
    font-size: 0.85rem;
    text-align: left;
}

/* Auth form inputs: Login and Register */
#loginForm,
#registerForm {
    --auth-input-bg: rgba(34, 44, 56, 1);
    --auth-input-border: rgba(124, 145, 166, 0.32);
    --auth-input-text: #ffffff;
    --auth-input-muted: rgba(139, 153, 163, 1);
    --auth-input-focus: rgba(0, 204, 153, 0.55);
    --auth-input-error: #ff4d6d;
    --auth-input-focus-bg: rgba(34, 44, 56, 1);
    --auth-input-focus-shadow: rgba(0, 204, 153, 0.1);
    --auth-input-error-bg: rgba(255, 77, 109, 0.05);
    --auth-country-dropdown-bg: #18212c;
}

body.light-mode #loginForm,
body.light-mode #registerForm {
    --auth-input-bg: #f5fafc;
    --auth-input-border: #d5e7ef;
    --auth-input-text: #263142;
    --auth-input-muted: #8a9aa7;
    --auth-input-focus: #b8d6e3;
    --auth-input-focus-bg: #ffffff;
    --auth-input-focus-shadow: rgba(184, 214, 227, 0.2);
    --auth-input-error-bg: #fff7f9;
    --auth-country-dropdown-bg: #ffffff;
}

#loginForm .form-label,
#registerForm .form-label {
    color: var(--auth-input-text);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.65rem;
}

#loginForm .custom-input,
#registerForm .custom-input,
#loginForm .password-field-container,
#registerForm .password-field-container {
    min-height: 60px;
    border-radius: 20px;
    background: var(--auth-input-bg);
    border: 1px solid var(--auth-input-border);
    box-shadow: none;
    color: var(--auth-input-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

#loginForm .custom-input,
#registerForm .custom-input {
    display: flex;
    align-items: center;
    padding: 0 1.15rem;
}

#loginForm .custom-input:focus-within,
#registerForm .custom-input:focus-within,
#loginForm .password-field-container:focus-within,
#registerForm .password-field-container:focus-within {
    background: var(--auth-input-focus-bg);
    border-color: var(--auth-input-focus);
    box-shadow: 0 0 0 4px var(--auth-input-focus-shadow);
}

#loginForm .form-control,
#registerForm .form-control,
#loginForm .password-input,
#registerForm .password-input {
    min-height: 58px;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--auth-input-text) !important;
    font-size: 0.95rem;
    font-weight: 500;
    outline: 0 !important;
    text-align: right;
}

#loginForm .form-control:focus,
#registerForm .form-control:focus,
#loginForm .password-input:focus,
#registerForm .password-input:focus {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--auth-input-text) !important;
    outline: 0 !important;
}

#loginForm .form-control::placeholder,
#registerForm .form-control::placeholder,
#loginForm .password-input::placeholder,
#registerForm .password-input::placeholder {
    color: var(--auth-input-muted);
    opacity: 1;
}

#loginForm .auth-input-icon,
#registerForm .auth-input-icon,
#loginForm .phone-input-icon,
#registerForm .phone-input-icon,
#loginForm .password-field-icons,
#registerForm .password-field-icons {
    color: var(--auth-input-muted);
}

#loginForm .auth-input-icon,
#registerForm .auth-input-icon,
#loginForm .phone-input-icon,
#registerForm .phone-input-icon {
    flex: 0 0 auto;
    margin: 0 0 0 0.85rem;
    font-size: 1rem;
}

#loginForm .password-input,
#registerForm .password-input {
    padding: 0 3.2rem 0 3.6rem;
}

#loginForm .password-field-icons,
#registerForm .password-field-icons {
    position: static;
    transform: none;
    padding: 0;
}

#loginForm .password-field-container .fa-lock,
#registerForm .password-field-container .fa-lock {
    position: absolute;
    right: 1.15rem;
    top: 50%;
    transform: translateY(-50%);
}

#loginForm .pass-toggle,
#registerForm .pass-toggle {
    position: absolute;
    left: 1.15rem;
    top: 50%;
    transform: translateY(-50%);
}

#loginForm .phone-group,
#registerForm .phone-group {
    gap: 10px;
    align-items: stretch;
}

#loginForm .input-number-field,
#registerForm .input-number-field {
    min-width: 0;
    flex: 1 1 auto;
}

#loginForm .phone-group .select2-container,
#registerForm .phone-group .select2-container {
    width: 90px !important;
    min-width: 90px;
    flex-basis: 90px;
    direction: ltr;
}

#loginForm .phone-group .select2-container--default .select2-selection--single,
#registerForm .phone-group .select2-container--default .select2-selection--single {
    height: 60px;
    border-radius: 20px;
    background: var(--auth-input-bg);
    border: 1px solid var(--auth-input-border);
    color: var(--auth-input-text);
    padding: 0 1rem;
}

#loginForm .phone-group .select2-container--default .select2-selection--single .select2-selection__rendered,
#registerForm .phone-group .select2-container--default .select2-selection--single .select2-selection__rendered,
#loginForm .country-selection-value,
#registerForm .country-selection-value {
    color: var(--auth-input-text);
    font-weight: 600;
    direction: ltr;
}

#loginForm .country-selection-value,
#registerForm .country-selection-value {
    gap: 0.35rem;
    justify-content: center;
    white-space: nowrap;
}

#loginForm .country-selection-value .flag-icon,
#registerForm .country-selection-value .flag-icon {
    flex: 0 0 auto;
    width: 1.1rem;
    height: 0.8rem;
    margin: 0;
}

#loginForm .phone-group .select2-container--default .select2-selection--single .select2-selection__arrow,
#registerForm .phone-group .select2-container--default .select2-selection--single .select2-selection__arrow {
    left: 0.75rem;
    right: auto;
}

#loginForm .custom-input.error,
#registerForm .custom-input.error,
#loginForm .password-field-container.error,
#registerForm .password-field-container.error {
    background: var(--auth-input-error-bg);
    border-color: var(--auth-input-error);
    box-shadow: 0 0 0 4px rgba(255, 77, 109, 0.12);
}

@media (max-width: 575.98px) {
    #loginForm .custom-input,
    #registerForm .custom-input,
    #loginForm .password-field-container,
    #registerForm .password-field-container,
    #loginForm .phone-group .select2-container--default .select2-selection--single,
    #registerForm .phone-group .select2-container--default .select2-selection--single {
        min-height: 56px;
        border-radius: 18px;
    }

    #loginForm .phone-group .select2-container,
    #registerForm .phone-group .select2-container {
        width: 82px !important;
        min-width: 82px;
        flex-basis: 82px;
    }
}