/* ===============================
   Global Styles
=================================*/
body {
    background-color: #F5F8FA;
}

label {
    display: flex;
    justify-content: start;
    align-items: center;
    margin-inline: 5px;
    text-align: start;
}

.parent-container {
    overflow-x: hidden !important;
}

/* ===============================
   Form Styles
=================================*/
.individual-form {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.individual-form div:nth-of-type(2) svg,
.individual-form div:nth-of-type(3) svg {
    top: 54%;
}

.individual-form div:nth-of-type(4) svg,
.individual-form div:nth-of-type(5) svg {
    top: 55%;
}

.individual-form div:nth-of-type(6) svg {
    top: 31%;
}

.pass svg {
    top: 53%;
}

.phone_input svg {
    position: absolute !important;
    top: 32% !important;
}

.error_span {
    display: block;
}

.error-text {
    color: red;
    font-size: 15px;
}

.error_border {
    border-color: red !important;
}

.form-container {
    overflow: auto;
    scrollbar-width: none;
}

.dropdown-toggle::after {
    display: none;
}

/* ===============================
   Terms and Conditions
=================================*/
.agree_terms {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: start;
    gap: 8px;
}

.agree_terms input[type="checkbox"] {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    outline: none;
}

.terms-modal {
    font-size: 14px;
    font-weight: 500;
}

.terms-modal span {
    font-size: 13px;
    font-weight: 500;
}

.terms-modal h5 {
    color: rgb(29, 123, 255);
    margin-top: 10px;
}

.terms-modal p {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    padding: 10px;
}

.terms-modal li {
    margin-bottom: 5px;
}

/* ===============================
   Buttons
=================================*/
.btn-action {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: 500;
}

.btn-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-action:active {
    transform: translateY(0);
}

.btn-action.loading {
    pointer-events: none;
    opacity: 0.7;
    color: transparent;
}

.btn-action.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: spinner 0.6s linear infinite;
}

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

.button_disable {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    opacity: 0.6;
}

/* ===============================
   Button Navigation
=================================*/
.button-navigation {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ===============================
   Phone Input
=================================*/
.phone_input button {
    width: 16%;
    padding: 10px;
}

.phone_input img {
    width: 26px !important;
    height: 20px !important;
}

.phone_input span {
    font-size: 14px !important;
}

.phone_input_container {
    width: 84% !important;
    padding-left: 6px !important;
}

/* ===============================
   Logo
=================================*/
.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.registration-logo {
    max-width: 180px;
    height: auto;
    object-fit: contain;
}

/* ===============================
   Select2 Styling
=================================*/
.select2-container .select2-selection--single {
    height: 3.5rem !important;
    padding: 1rem !important;
    border-radius: 0.5rem !important;
    border: 1px solid #DADEE1 !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    width: 100% !important;
    color: #212529 !important;
    line-height: normal !important;
    font-size: 1rem !important;
    padding-left: 0.25rem !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    right: 10px !important;
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--single:hover {
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15) !important;
}

/* ===============================
   Animations
=================================*/
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ===============================
   Responsive Design
=================================*/
@media (max-width: 1220px) {
    .div_type {
        min-width: auto !important;
    }


    body {
        background-color: white !important;
    }

    .main-section {
        padding-bottom: 5rem;
    }

    .individual-form,
    .form-container,
    .main-container {
        box-shadow: none !important;
        border: none !important;
        background: white !important;
    }

    .button-navigation {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #ffffff;
        padding: 1rem 1.5rem;
        /* border-top: 1px solid #e0e0e0;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); */
        z-index: 100;
        height: 75px;
        border: none !important;
    }

    .button-navigation .btn-action {
        font-size: 0.875rem;
        padding: 12px 16px;
        flex: 1;
        width: 50%;
    }

    .phone_input button {
        width: 33% !important;
    }

    .phone_input_container {
        width: 67% !important;
    }

    .registration-logo {
        max-width: 150px;
    }
}

@media (max-width: 992px) {
    .side-login-register {
        padding: 3rem 0;
        display: none;
    }
}

@media (max-width: 768px) {}

@media (max-width: 576px) {
    .registration-logo {
        max-width: 130px;
    }

    .agree_terms {
        gap: 7px !important;
        font-size: 14px !important;
    }
}

/* Base input with icon */
.input-with-icon {
    padding-right: calc(1.5em + 0.75rem) !important;
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* User icon */
.input-icon-user {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 22C4 17.5817 7.58172 14 12 14C16.4183 14 20 17.5817 20 22H18C18 18.6863 15.3137 16 12 16C8.68629 16 6 18.6863 6 22H4ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11Z' fill='%238E8E99'/%3E%3C/svg%3E");
}

/* Email icon */
.input-icon-email {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM20 7.23792L12.0718 14.338L4 7.21594V19H20V7.23792ZM4.51146 5L12.0619 11.662L19.501 5H4.51146Z' fill='%238E8E99'/%3E%3C/svg%3E");
}

/* Phone icon */
.input-icon-phone {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9.36556 10.6821C10.302 12.3288 11.6712 13.698 13.3179 14.6344L14.2024 13.3961C14.4965 12.9845 15.0516 12.8573 15.4956 13.0998C16.9024 13.8683 18.4571 14.3353 20.0789 14.4637C20.599 14.5049 21 14.9389 21 15.4606V19.9234C21 20.4361 20.6122 20.8657 20.1022 20.9181C19.5723 20.9726 19.0377 21 18.5 21C9.93959 21 3 14.0604 3 5.5C3 4.96227 3.02742 4.42771 3.08189 3.89776C3.1343 3.38775 3.56394 3 4.07665 3H8.53942C9.0611 3 9.49513 3.40104 9.5363 3.92109C9.66467 5.54288 10.1317 7.09764 10.9002 8.50444C11.1427 8.9484 11.0155 9.50354 10.6039 9.79757L9.36556 10.6821ZM6.84425 10.0252L8.7442 8.66809C8.20547 7.50514 7.83628 6.27183 7.64727 5H5.00907C5.00303 5.16632 5 5.333 5 5.5C5 12.9558 11.0442 19 18.5 19C18.667 19 18.8337 18.997 19 18.9909V16.3527C17.7282 16.1637 16.4949 15.7945 15.3319 15.2558L13.9748 17.1558C13.4258 16.9425 12.8956 16.6915 12.3874 16.4061L12.3293 16.373C10.3697 15.2587 8.74134 13.6303 7.627 11.6707L7.59394 11.6126C7.30849 11.1044 7.05754 10.5742 6.84425 10.0252Z' fill='%238E8E99'/%3E%3C/svg%3E");
}

/* Password icon - eye */
.input-icon-password {
    padding-right: calc(2.5em + 0.75rem) !important; /* Extra space for clickable eye icon */
}

/* Remove icon when input has error (is-invalid) */
.form-control.is-invalid.input-with-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important;
}
/* Make all form inputs consistent and larger */
.individual-form .form-control,
.individual-form .form-select,
.individual-form .select2-container .select2-selection {
    min-height: 50px !important;
    height: 50px !important;
    font-size: 15px !important;
    padding: 0.75rem 1rem !important;
    border-radius: 8px !important;
}

/* Adjust padding for inputs with icons */
.form-control.input-with-icon {
    padding-right: calc(2.5em + 0.75rem) !important;
}

/* Password input with eye icon */
.form-control.input-icon-password {
    padding-right: calc(3em + 0.75rem) !important;
}

/* Adjust icon size and position for larger inputs */
.input-with-icon {
    background-position: right calc(0.75em + 0.375rem) center !important;
    background-size: 20px 20px !important;
}

/* Labels consistent size */
.individual-form .form-label {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #2c3e50;
}

/* Phone dropdown button height match */
.phone_input .btn-outline-secondary {
    min-height: 50px !important;
    height: 50px !important;
    padding: 0.75rem 1rem !important;
    border-radius: 8px !important;
}

/* Phone input to match */
.phone_input_container .form-control {
    min-height: 50px !important;
    height: 50px !important;
}

/* Select2 dropdown height */
.select2-container .select2-selection--single {
    min-height: 50px !important;
    height: 50px !important;
    padding: 0.75rem 1rem !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 50px !important;
    padding-left: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 50px !important;
}

/* Checkbox and terms alignment */
.agree_terms {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 1rem;
}

.agree_terms input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.agree_terms .form-check-label,
.agree_terms a {
    font-size: 14px;
    margin: 0;
}

.showHidePass{
    cursor: pointer; 
    z-index: 10;
    position: fixed;
    top: 13px;
    right: 16px;
}

/* Button sizes */
.btn-action {
    min-height: 48px;
    padding: 0.75rem 1.5rem;
    font-size: 16px;
    font-weight: 500;
    border-radius: 8px;
}

/* Error message styling */
.invalid-feedback {
    display: block !important;
    color: #dc3545;
    font-size: 14px;
    margin-top: 0.5rem;
}

/* Input spacing */
.individual-form .mb-3 {
    margin-bottom: 1.5rem !important;
}

/* Focus state for better UX */
.form-control:focus,
.select2-container--default .select2-selection--single:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}