/* Custom CSS for TADATAXI Login Page */

:root {
    --orange-primary: #f85601;
    --orange-dark: #ff3c00;
    --gray-light: #f5f5f5;
    --gray-medium: #cccccc;
    --gray-dark: #666666;
    --text-dark: #333333;
    --white: #ffffff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Typography*/
.fw-300 {
    font-weight: 300;
}

.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}

.fw-800 {
    font-weight: 800;
}

.fw-900 {
    font-weight: 900;
}

.fs-10px {
    font-size: 10px;
}

.fs-12px {
    font-size: 12px;
}

.fs-14px {
    font-size: 14px;
}

.fs-16px {
    font-size: 16px;
}

.fs-18px {
    font-size: 18px;
}

.fs-20px {
    font-size: 20px;
}

.fs-24px {
    font-size: 24px;
}

.fs-28px {
    font-size: 28px;
}

.fs-32px {
    font-size: 32px;
}

.fs-36px {
    font-size: 36px;
}

.fs-40px {
    font-size: 40px;
}

.fs-44px {
    font-size: 44px;
}

.fs-48px {
    font-size: 48px;
}

.fs-52px {
    font-size: 52px;
}

.fs-56px {
    font-size: 56px;
}

.fs-60px {
    font-size: 60px;
}

.fs-64px {
    font-size: 64px;
}

.fs-68px {
    font-size: 68px;
}

.fs-72px {
    font-size: 72px;
}

.fs-76px {
    font-size: 76px;
}

.fs-80px {
    font-size: 80px;
}

.fs-84px {
    font-size: 84px;
}

.fs-88px {
    font-size: 88px;
}

.fs-92px {
    font-size: 92px;
}

body {
    font-family: "Inter", sans-serif;
    height: 100vh;
    overflow: hidden;
}

.logo-img {
    max-width: 120px;
    height: auto;
}

.login-container {
    width: 95%;
}

/* Form Styles */
.form-label {
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 14px;
    color: #535862;
}

.custom-input {
    border: 1px solid #535862;
    border-radius: 4px;
    padding: 12px 16px;
    font-size: 16px;
    border-right: none;
}

.custom-input:focus {
    border-color: var(--orange-primary);
    box-shadow: 0 0 0 0.2rem rgba(255, 87, 34, 0.25);
}

.forgot-password {
    color: var(--orange-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
}

.forgot-password:hover {
    color: var(--orange-dark);
    text-decoration: underline;
}

/* icon styles */

.input-icon {
    background-color: var(--orange-primary);
    border: none;
    border-radius: 4px;
    padding: 11px 13px;
}

.icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.icon-email {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_24_4084)'%3E%3Cpath d='M3 3H21C21.2652 3 21.5196 3.10536 21.7071 3.29289C21.8946 3.48043 22 3.73478 22 4V20C22 20.2652 21.8946 20.5196 21.7071 20.7071C21.5196 20.8946 21.2652 21 21 21H3C2.73478 21 2.48043 20.8946 2.29289 20.7071C2.10536 20.5196 2 20.2652 2 20V4C2 3.73478 2.10536 3.48043 2.29289 3.29289C2.48043 3.10536 2.73478 3 3 3ZM20 7.238L12.072 14.338L4 7.216V19H20V7.238ZM4.511 5L12.061 11.662L19.502 5H4.511Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_24_4084'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

.icon-lock {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_24_4092)'%3E%3Cpath d='M19 10H20C20.2652 10 20.5196 10.1054 20.7071 10.2929C20.8946 10.4804 21 10.7348 21 11V21C21 21.2652 20.8946 21.5196 20.7071 21.7071C20.5196 21.8946 20.2652 22 20 22H4C3.73478 22 3.48043 21.8946 3.29289 21.7071C3.10536 21.5196 3 21.2652 3 21V11C3 10.7348 3.10536 10.4804 3.29289 10.2929C3.48043 10.1054 3.73478 10 4 10H5V9C5 8.08075 5.18106 7.1705 5.53284 6.32122C5.88463 5.47194 6.40024 4.70026 7.05025 4.05025C7.70026 3.40024 8.47194 2.88463 9.32122 2.53284C10.1705 2.18106 11.0807 2 12 2C12.9193 2 13.8295 2.18106 14.6788 2.53284C15.5281 2.88463 16.2997 3.40024 16.9497 4.05025C17.5998 4.70026 18.1154 5.47194 18.4672 6.32122C18.8189 7.1705 19 8.08075 19 9V10ZM5 12V20H19V12H5ZM11 14H13V18H11V14ZM17 10V9C17 7.67392 16.4732 6.40215 15.5355 5.46447C14.5979 4.52678 13.3261 4 12 4C10.6739 4 9.40215 4.52678 8.46447 5.46447C7.52678 6.40215 7 7.67392 7 9V10H17Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_24_4092'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

/* Button Styles */
.btn-login {
    background-color: var(--orange-primary);
    border: none;
    color: var(--white);
    padding: 16px 8px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    transition: transform 0.3s ease;
}

.btn-login:hover {
    transform: translateY(-2px);
}

/* Divider Styles */

.divider {
    flex: 1;
    border: none;
    height: 1px;
    background-color: #535862;
    margin: 0;
}

.btn-create-account {
    background-color: transparent;
    border: 1px solid var(--orange-primary);
    color: var(--orange-primary);
    padding: 16px 8px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.btn-create-account:hover {
    background-color: var(--orange-primary);
    color: var(--white);
}

/* Illustration Panel Styles */

.right-illustration {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.verification-email {
    color: var(--orange-primary);
    font-weight: 500;
}


/* Additional styles for password reset pages */

.code-input {
    font-size: 24px !important;
    text-align: center;
    letter-spacing: 10px;
    font-weight: bold;
    font-family: 'Courier New', monospace;
}

.resend-link {
    color: var(--orange-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    background: none;
    border: none;
    cursor: pointer;
}

.resend-link:hover {
    color: var(--orange-dark);
    text-decoration: underline;
}

.btn-link {
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

/* Password strength indicator */
.is-valid {
    border-color: #28a745 !important;
}

.is-invalid {
    border-color: #dc3545 !important;
}

/* Email verification styling */
.verification-email {
    color: var(--orange-primary);
    font-weight: 500;
}

/* Auto-format code styling */
.code-input:focus {
    border-color: var(--orange-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(248, 86, 1, 0.25) !important;
}

/* Success and error messages */
.alert {
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.alert p {
    margin: 0;
}

.alert p:not(:last-child) {
    margin-bottom: 5px;
}

.btn-loading {
    position: relative;
    color: transparent !important;
}

.btn-loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 768px) {
    .code-input {
        font-size: 20px;
        letter-spacing: 5px;
    }
    
    .login-container {
        width: 90%;
        padding: 20px;
    }
    
    .logo-img {
        max-width: 80px;
    }
}