@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* --- Root Variables (needed for auth pages) --- */
:root {
    --bg-color: #231f20;
    --bg-2-color: #332d2f;
    --text-color: #fff;
    --text-color-light: #C2C2C2;
    --text-silver: #C1C2C3;
    --text-color-muted: #FFFFFF60;
    --accent-color: #FF5533;
    --primary-color: #ff5533;
    --danger-color: #DC3545;
    --border-color: #FFFFFF1A;
    --font-roboto: 'Roboto', sans-serif;
    --font-inter: 'Inter', sans-serif;
    --font-work-sans: 'Work Sans', sans-serif;
    --border-radius-sm: 8px;
    --border-radius-md: 10px;
    --border-radius-lg: 32px;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  box-shadow: 0 0 0px 1000px #f7f7f7 inset; 
  -webkit-box-shadow: 0 0 0px 1000px #f7f7f7 inset;
  -webkit-text-fill-color: #fff;            
  transition: background-color 5000s ease-in-out 0s; 
}

input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus {box-shadow: 0 0 0px 1000px #fff inset;-webkit-text-fill-color: #fff;}
input:-moz-autofill,
textarea:-moz-autofill,
select:-moz-autofill {background-color: #f7f7f7;color: #fff;-moz-box-shadow: 0 0 0px 1000px #f7f7f7 inset;}
.form-class input:-webkit-autofill {box-shadow: 0 0 0px 1000px #f7f7f7 inset;-webkit-text-fill-color: #fff;}

/* --- Auth Pages --- */
.auth_pages .full-height {height: 100vh;}
.auth_pages .form-container {max-width: 340px;width: 100%;color: #fff;}
.auth_pages .form-container input.form-control {height: 45px;box-shadow: none;}
.auth_pages .rounded-input, .auth_pages .rounded-left-input, .auth_pages .rounded-right-input {border: 2px solid #e0e0e0;}
.auth_pages .rounded-input {border-radius: var(--border-radius-sm);}
.auth_pages .rounded-left-input {border-radius: var(--border-radius-sm) 0 0 var(--border-radius-sm);border-right: none;}
.auth_pages .rounded-right-input {border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;border-left: none;}
.auth_pages .signin-link, .auth_pages .terms-link {text-decoration: none;color: #f44336;}
.auth_pages .btn-signup,.auth_pages .btn-signup:hover,.auth_pages .btn-signup:active {background-color: #f44336;color: white;border: none;border-radius: 50px;    font-weight: 400;height: 40px;font-size: 14px;font-family: 'Inter';align-content:center;}
.auth_pages .welcome-section{display: flex;flex-direction:column;justify-content: center;align-items: start;color: #fff;background-color: var(--bg-color);border-left: 1px solid var(--border-color);padding:20px; padding-left: 100px;}
.auth_pages .auth-form{display: flex;flex-direction:column;justify-content: center;align-items: end;background-color: var(--bg-color);padding:20px; padding-right: 100px;}
.auth_pages .welcome-content {max-width: 500px;text-align: left;}
.auth_pages .welcome-title {line-height: 1.2;font-size: 48px;font-weight: 600;font-family: var(--font-inter);}
.auth_pages .welcome-description {line-height: 1.6;font-size: 14px;font-family: var(--font-roboto);font-weight: 400;color: #d3d2d2;}
.auth_pages .user-count {line-height: 1.6;font-size: 14px;font-family: var(--font-roboto);font-weight: 500;color: #d3d2d2;}
.auth_pages .user-avatars .avatar {width: 45px;height: 45px;color: white;font-weight: bold;border: 3px solid white;z-index: 1;display: flex;align-items: center;justify-content: center;border-radius: 50%;margin-right: -0.5rem;}
.auth_pages .avatar-a {background-color: #ff9800;z-index: 4;}
.auth_pages .avatar-b {background-color: #4caf50;z-index: 3;}
.auth_pages .avatar-c {background-color: #9c27b0;z-index: 2;}
.auth_pages .avatar-d {background-color: #ff5722;z-index: 1;}
/*.auth_pages .form-control:focus {border-color: #2196F3;box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);}*/
.auth_pages .btn:focus {box-shadow: none;}
.auth_pages .form-check-input:checked {background-color: #f44336;border-color: #f44336;}
.auth_pages .form-check-input:focus {border-color: #f44336;box-shadow: 0 0 0 0.25rem rgba(244, 67, 54, 0.25);}
.auth_pages .form-label {color: #fff;font-weight: 500;}
.auth_pages .form-check-label {color: #fff;}
.auth_pages .validation-message {color: #dc3545 !important;font-size: 0.875rem;margin-top: 0.25rem;}

/* ensure inputs used on auth pages appear correctly */
.auth_pages input.form-control {background-color: var(--bg-color);color: #fff;border: 1px solid var(--border-color);font-size: 14px;font-weight: 400;font-family: var(--font-inter);}
.auth_pages input.form-control::placeholder {color: #a7a5a6;}
.auth_pages .phone-input-container input {background-color: var(--bg-color);color: #fff;border: 1px solid var(--border-color);font-size: 14px;font-weight: 400;font-family: var(--font-inter);}
.auth_pages .phone-input-container input::placeholder {color: #a7a5a6;}

/* Fix autofill styling for phone input to prevent white text on white background */
.auth_pages .phone-input-container input:-webkit-autofill,
.auth_pages .phone-input-container input:-webkit-autofill:hover,
.auth_pages .phone-input-container input:-webkit-autofill:focus,
.auth_pages .phone-input-container input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px var(--bg-color) inset !important;
    box-shadow: 0 0 0px 1000px var(--bg-color) inset !important;
    -webkit-text-fill-color: #fff !important;
    color: #fff !important;
    background-color: var(--bg-color) !important;
    transition: background-color 5000s ease-in-out 0s;
}

.auth_pages .phone-input-container input:-moz-autofill {
    background-color: var(--bg-color) !important;
    color: #fff !important;
    -moz-box-shadow: 0 0 0px 1000px var(--bg-color) inset !important;
}
.auth_pages .password_input .btn{border-color: var(--border-color) !important;}
.auth_pages .password_input .btn i{color:#a7a5a6;}
.maintenance-container {min-height: 100vh;background-color: #231F20;display: flex;align-items: center;justify-content: center;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;padding: 2rem;}
.maintenance-content {text-align: center;max-width: 600px;width: 100%;}
.maintenance-content img {width: 70%;margin-bottom:30px;}
.maintenance-content .logo {width: 250px;position: absolute;left: 20px;top: 20px;}
.maintenance-text {color: white;}
.maintenance-text h1 {font-size: 2rem;font-weight: 600;margin: 0 0 1rem 0;color: white;}
.maintenance-text p {font-size: 1.1rem;margin: 0;opacity: 0.8;color: white;}

@media (max-width: 767.98px) {
    .maintenance-text h1 {font-size: 1.5rem;}
    .maintenance-text p {font-size: 1rem;}
    .auth_pages .welcome-section{display: none;}
    .auth_pages .auth-form{padding-right: 20px;align-items: center;}
}
@media (max-width: 480px) {
    .maintenance-container {padding: 1rem;}
    .maintenance-text h1 {font-size: 1.25rem;}
    .maintenance-text p {font-size: 0.9rem;}
}

/* Phone Input Styling */
.phone-input-container {
    position: relative;
}

.phone-input-container input {
    height: 45px;
    border: 2px solid #e0e0e0;
    border-radius: var(--border-radius-sm);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    width: 100%;
}

.phone-input-container input:focus {
    border-color: #f44336;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(244, 67, 54, 0.25);
}

.phone-input-container input.is-invalid {
    border-color: #dc3545;
}

.phone-input-container input.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* International Telephone Input customization */
.iti {
    width: 100%;
    position: relative; /* create stacking context for dropdown */
    z-index: 30000; /* ensure above nearby controls */
}

.iti__country-list {
    z-index: 20000 !important; /* Ensure dropdown overlays password eye icon and other UI */
}

.iti__selected-flag {
    border: 2px solid #e0e0e0;
    border-right: none;
    border-radius: var(--border-radius-sm) 0 0 var(--border-radius-sm);
    background-color: #f8f9fa;
}

.iti__selected-flag:hover {
    background-color: #e9ecef;
}

.iti__arrow {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #555;
}

.iti__country-list {
    border: 2px solid #e0e0e0;
    border-radius: var(--border-radius-sm);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background-color: #fff; /* prevent see-through */
}

.iti__country {
    padding: 8px 12px;
    color: #000; /* Ensure country names are readable on light background */
    background-color: #fff; /* prevent see-through */
}

.iti__country:hover {
    background-color: #f8f9fa;
}

.iti__country.iti__highlight {
    background-color: #f44336;
    color: white;
}

/* Ensure country names and dial codes appear in black by default */
.iti__country-name,
.iti__dial-code,
.iti__country-list { color: #000; }
.auth_pages .user-count {opacity: 0.8;}
.auth_pages .text-muted {color: #666 !important;}
.auth_pages .form-container input.form-control:focus {border-color: #f44336;outline: 0;box-shadow: 0 0 0 0.2rem rgba(244, 67, 54, 0.25);}