/* =================================================================== */
/* GLOBAL & COLOR STYLES (Applied to Mobile & Desktop)
/* =================================================================== */

/* Force the modal to correctly clip its children */
.popup-modal__inner {
    overflow: hidden !important;
    transform: translateZ(0); /* Hardware acceleration fix */
    margin-top: 0 !important; /* Removes extra space */
    padding-top: 0 !important;
    position: relative; /* Needed for positioning the close button */
}

/* Position the 'X' close button in the top-right corner on all screens */
.popup-modal__close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
    cursor: pointer;
}

/* Base Dropdown and Input Styles */
.hs-custom-form select.hs-input {
    border: 1px solid transparent !important;
    box-shadow: 0 0 0 1px #ced4da; /* Clean border effect */
    background-clip: padding-box !important;
}
.hs-custom-form .hs-input {
    overflow: hidden;
}

/* Checkbox Color Styles */
.hs-form-booleancheckbox-display > span {
    background-color: var(--neutral--light) !important;
    border: none !important;
}
.hs-form-booleancheckbox-display em {
    color: black;
    transition: color 0.3s ease;
}
.hs-form-booleancheckbox-display:hover em {
    color: #246DFF;
}

/* --- Mobile-First Layout for the Modal Grid --- */
.popup-modal--demo .two-column__grid {
    display: flex;
    flex-direction: column; /* Stacks columns on mobile */
}

/* --- "Scorched Earth" Form Fixes (Global Resets & Colors) --- */
.hs-form-field .input,
.hs-form-field .input::before,
.hs-form-field .input::after {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    display: block !important; 
    content: "" !important;
    padding: 0 !important; /* Reset padding globally */
    margin: 0 !important;  /* Reset margin globally */
}

.hs-form-field select.hs-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: white !important;
    box-shadow: none !important;
    outline: none !important;
    border: 1px solid #ced4da !important; /* Global border color */
}

.hs-form-field.error select.hs-input {
    border-color: #d32f2f !important;
}

.hs-form-field .input {
    position: relative;
}
.hs-form-field .input::after {
    content: '▼';
    color: #333; /* Arrow color is global */
    position: absolute;
    pointer-events: none;
    transform: translateY(-50%);
}

/* Global Label Color */
label {
    color: white !important;
}

/* --- Final Checkbox Section (Global Colors & Resets) --- */
.hs_consent_to_contact span {
    color: white !important;
}
.hs_consent_to_contact .hs-form-booleancheckbox-display::before {
    border: 2px solid white;
    background-color: transparent;
}
.hs_consent_to_contact input:checked + .hs-form-booleancheckbox-display::before {
    border-color: white;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l3.072 3.09L8 2.223z'/%3e%3c/svg%3e");
}
.hs-form-booleancheckbox,
.hs_consent_to_contact {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
}
.material-symbols-rounded{
    color: white !important;
}

/* =================================================================== */
/* DESKTOP SIZING & LAYOUT STYLES (Applied only to 769px and wider)
/* =================================================================== */
@media (min-width: 769px) {

    .module--bg-primary-dark {
        border-radius: 0px !important;
    }

    .popup-modal__inner {
        border-radius: 17px !important;
    }

    .popup-modal.popup-modal--active .popup-modal__inner {
        width: 616px;
        max-height: 105vh;
        overflow-y: auto;
        background-color: #000000 !important; /* Ensure black background on desktop too */
    }
    
    /* --- Desktop Layout for the Modal Grid --- */
    .popup-modal--demo .two-column__grid {
        flex-direction: row; /* Side-by-side columns on desktop */
    }

    /* --- Form Field Sizing for Desktop --- */
    .hs-custom-form .hs-input,
    .hs-custom-form .hs-button,
    .hs-custom-form .hs-error-msgs {
        border-radius: 16px !important;
    }

    /* --- "Scorched Earth" Form Sizing for Desktop --- */
    .hs-form-field select.hs-input {
        width: 100% !important;
        margin: 0 !important;
        border-radius: 16px !important;
        padding: 12px 16px !important;
    }
    .hs-form-field .input::after {
        font-size: 14px;
        right: 16px;
        top: 50%;
    }

    /* --- Final Checkbox Section Sizing for Desktop --- */
    .hs_consent_to_contact {
        padding: 20px !important; /* Restore padding on desktop */
        border-radius: 16px;
        margin-top: 10px;
    }
    .hs_consent_to_contact .hs-form-booleancheckbox-display::before {
        border-radius: 4px;
    }
}

/* =================================================================== */
/* FINAL MOBILE-SPECIFIC FIX (Applied only to screens below 768px)
/* =================================================================== */
@media (max-width: 768px) {
    /* Set responsive width & height */
    .popup-modal.popup-modal--active .popup-modal__inner {
        width: 90%;
        max-width: 500px; 
        box-sizing: border-box;
        max-height: 90vh;
    }

    /* FIX #1: Force the modal container itself to have the black background and all padding.
       This is a direct fix for the corner artifact and button spacing issues. */
    .popup-modal--demo .popup-modal__inner {
        background-color: #000000 !important; 
        padding: 45px 25px 40px 25px !important; /* Increased BOTTOM padding for the button */
    }

    /* FIX #2: Make the form container transparent so its corners can't poke through. */
    .popup-modal--demo form {
        background: transparent !important;
    }

    /* FIX #3: Remove any padding from the inner column, as it's now handled by the parent. */
    .popup-modal--demo .two-column__column {
       padding: 0 !important;
    }
}