/*------------------------------------*\
    FX Popup Form Proposal

    Renders:
      1) A fixed side trigger ("Get a free proposal") on the right edge.
      2) A Fancybox popup that displays a dark "Work with Our Team" card
         containing a Gravity Form.
\*------------------------------------*/


/* =========================================================================
   1. Side trigger (right edge, rotated 90° so the pill reads bottom-up)
   ========================================================================= */
.popup-form-proposal-side-trigger-wrapper {
    position: fixed;
    z-index: 999999;
    display: none;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    /* height: 0; */
    transition: opacity 0.3s ease 0s;
    opacity: 1;
}

.popup-form-proposal-side-trigger-wrapper .popup-form-proposal-side-trigger-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 8px 8px 0 0;
    background-color: var(--Primary-Blue-Darkest);
    color: var(--White, #fff);
    font-family: var(--font-inter);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transform-origin: 100% 50%;
    transform: rotate(-90deg) translate(50%, -50%);
    transition: background-color 0.3s ease 0s;
    letter-spacing: -0.081px;
}

.popup-form-proposal-side-trigger-wrapper .popup-form-proposal-side-trigger-inner:hover,
.popup-form-proposal-side-trigger-wrapper:focus .popup-form-proposal-side-trigger-inner {
    background-color: var(--Primary-Blue-Dark, #054a96);
}


/* =========================================================================
   2. Hidden source container (revealed only inside Fancybox)

   Rendered off-screen instead of display:none so the Gravity Form, its
   fonts, styles, and any AJAX/init JS are fully laid out at page load.
   Without this, the first Fancybox open janks while the browser does all
   of that layout work for the first time. Fancybox moves the node into
   its own DOM on open; the open-state rules below reset the offscreen
   positioning back to a normal in-flow block.
   ========================================================================= */
.popup-form-proposal-side-trigger-content {
    position: absolute;
    left: -99999px;
    top: -99999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}

.popup-form-proposal-side-trigger-content.popup-form-proposal-side-trigger-content--open,
.fancybox-popup-form-proposal .popup-form-proposal-side-trigger-content {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    overflow: visible;
    visibility: visible;
    pointer-events: auto;
    display: block;
}


/* =========================================================================
   3. Fancybox container / close button overrides
   ========================================================================= */
/* Scoped backdrop: darker / more opaque only for this popup */
.fancybox-popup-form-proposal.fancybox-container .fancybox-bg {
    background: #000;
    opacity: 0.3;
}

.fancybox-popup-form-proposal.fancybox-container.fancybox-is-open .fancybox-bg {
    opacity: 0.7;
}

.fancybox-popup-form-proposal .fancybox-slide {
    padding: var(--s4, 32px) var(--s2, 16px);
}

.fancybox-popup-form-proposal .fancybox-content {
    padding: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    max-width: 800px;
    width: 100%;
}

.fancybox-popup-form-proposal .popup-form-proposal-side-trigger-content {
    width: 100%;
    position: relative;
}

/* White close X positioned over the dark card */
.fancybox-popup-form-proposal .fancybox-button.fancybox-close-small {
    top: 12px;
    right: 12px;
    width: 50px;
    height: 50px;
    padding: 8px;
    color: var(--White, #fff);
    background: transparent;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.fancybox-popup-form-proposal .fancybox-button.fancybox-close-small:hover {
    opacity: 1;
}

.fancybox-popup-form-proposal .fancybox-button.fancybox-close-small svg path {
    fill: var(--White, #fff);
}


/* =========================================================================
   4. Popup card ("Work with Our Team") — dark blue panel
   ========================================================================= */
.popup-form-proposal-card {
    position: relative;
    background-color: var(--Primary-Blue-Darkest, #083A74);
    border-radius: var(--s2, 16px);
    padding: var(--s5, 40px) var(--s6, 48px) var(--s6, 48px);
    color: var(--White, #fff);
    font-family: var(--font-inter);
    box-sizing: border-box;
}

.popup-form-proposal-card * {
    box-sizing: border-box;
}

.popup-form-proposal-card__title {
    margin: 0 0 var(--s4, 32px);
    color: var(--White, #fff);
    font-family: var(--font-inter);
    font-size: 32px;
    font-weight: 800;
    line-height: 40px;
    letter-spacing: -1.152px;
    text-align: center;
}

.popup-form-proposal-card__form h2 {
    display: none;
}


/* =========================================================================
   5. Gravity Forms styling — scoped to the popup
   ========================================================================= */

/* Reset GF wrapper paddings inside the dark card */
.popup-form-proposal-card .gform_wrapper {
    padding: 0;
    margin: 0;
    width: 100%;
}

.popup-form-proposal-card .gform_wrapper form {
    margin: 0;
    padding: 0;
    max-width: 100%;
}

.popup-form-proposal-card .gform_heading {
    display: none;
}

/* --- Field grid: 2 columns with 40px column gap, 24px row gap --- */
.popup-form-proposal-card .gform_body .gform_fields,
.popup-form-proposal-card .gform_body ul.gform_fields {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px !important;
    row-gap: var(--s3, 24px) !important;
}

.popup-form-proposal-card .gfield {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Full-width fields (textareas, selects, hidden, html, addresses, etc.) span both columns */
.popup-form-proposal-card .gfield--width-full,
.popup-form-proposal-card .gfield_html,
.popup-form-proposal-card .gfield--type-textarea,
.popup-form-proposal-card .gfield--type-section,
.popup-form-proposal-card .gfield--type-html,
.popup-form-proposal-card .gfield--type-address,
.popup-form-proposal-card .gfield--type-fileupload,
.popup-form-proposal-card .gfield--type-multiselect,
.popup-form-proposal-card .gfield--type-checkbox,
.popup-form-proposal-card .gfield--type-radio,
.popup-form-proposal-card .gfield--type-consent,
.popup-form-proposal-card .gfield--type-list,
.popup-form-proposal-card .gfield:has(textarea),
.popup-form-proposal-card .gfield:has(.ginput_container_textarea),
.popup-form-proposal-card .gfield:has(.ginput_container_address),
.popup-form-proposal-card .gfield:has(.ginput_container_fileupload),
.popup-form-proposal-card .gfield:has(.ginput_container_multiselect),
.popup-form-proposal-card .gfield:has(.ginput_container_checkbox),
.popup-form-proposal-card .gfield:has(.ginput_container_radio),
.popup-form-proposal-card .gfield:has(.ginput_container_consent) {
    grid-column: 1 / -1;
}

/* --- Labels --- */
.popup-form-proposal-card .gfield_label,
.popup-form-proposal-card label.gfield_label {
    display: block;
    margin: 0 0 var(--s1, 8px) 0 !important;
    padding: 0 !important;
    color: var(--White, #fff) !important;
    font-family: var(--font-inter);
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 28px !important;
    letter-spacing: -0.081px !important;
}

.popup-form-proposal-card .gfield_required,
.popup-form-proposal-card .gfield_required_text,
.popup-form-proposal-card .gfield_required_asterisk {
    color: #F87476 !important;
    margin-left: 4px;
    font-weight: 600;
}

.popup-form-proposal-card .gfield_required::before {
    color: #F87476 !important;
}

/* --- Inputs / selects / textareas --- */
.popup-form-proposal-card .ginput_container input[type="text"],
.popup-form-proposal-card .ginput_container input[type="email"],
.popup-form-proposal-card .ginput_container input[type="tel"],
.popup-form-proposal-card .ginput_container input[type="url"],
.popup-form-proposal-card .ginput_container input[type="number"],
.popup-form-proposal-card .ginput_container input[type="password"],
.popup-form-proposal-card .ginput_container input[type="date"],
.popup-form-proposal-card .ginput_container select,
.popup-form-proposal-card .ginput_container textarea {
    width: 100%;
    height: 48px;
    padding: var(--s1, 8px) var(--s2, 16px) !important;
    background: var(--White, #fff);
    border: none;
    border-radius: 4px;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.15);
    color: var(--Primary-Darkest-Gray, #222);
    font-family: var(--font-inter);
    font-size: 18px !important;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: -0.081px;
    outline: none;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}

.popup-form-proposal-card .ginput_container textarea {
    height: 114px;
    padding: var(--s2, 16px);
    line-height: 28px;
    resize: vertical;
}

.popup-form-proposal-card .ginput_container select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23222' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 7px;
    padding-right: 40px;
    border: 1px solid var(--Primary-Light-Gray, #CED4DA);
    box-shadow: none;
    cursor: pointer;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 28px !important;
    letter-spacing: -0.081px !important;
    border-radius: 4px !important;
}



.popup-form-proposal-card .ginput_container input::placeholder,
.popup-form-proposal-card .ginput_container textarea::placeholder {
    color: var(--Primary-Gray, #A9B4BC);
    font-weight: 600;
    opacity: 1;
    font-size: 18px !important;
    line-height: 35px !important;
}

.popup-form-proposal-card .ginput_container input:focus,
.popup-form-proposal-card .ginput_container select:focus,
.popup-form-proposal-card .ginput_container textarea:focus {
    box-shadow: inset 0 0 0 2px var(--Primary-Blue, #207DE9);
}

/* --- Validation errors --- */
.popup-form-proposal-card .gfield_error .gfield_label,
.popup-form-proposal-card .gfield_error label.gfield_label {
    color: #F87476 !important;
}

.popup-form-proposal-card .gfield_error .ginput_container input,
.popup-form-proposal-card .gfield_error .ginput_container select,
.popup-form-proposal-card .gfield_error .ginput_container textarea {
    box-shadow: inset 0 0 0 2px #F87476;
}

.popup-form-proposal-card .validation_message,
.popup-form-proposal-card .gfield_validation_message {
    color: #F87476 !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    margin-top: 4px;
    background: transparent;
    border: none;
    padding: 0;
}

.popup-form-proposal-card .gform_validation_errors {
    background: rgba(248, 116, 118, 0.12);
    border: 1px solid rgba(248, 116, 118, 0.6);
    color: var(--White, #fff);
    border-radius: 4px;
    padding: var(--s2, 16px);
    margin-bottom: var(--s3, 24px);
}

.popup-form-proposal-card .gform_validation_errors h2,
.popup-form-proposal-card .gform_validation_errors .gform_submission_error {
    color: var(--White, #fff) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 24px !important;
    margin: 0 !important;
}

/* --- Footer / submit button --- */
.popup-form-proposal-card .gform_footer,
.popup-form-proposal-card .gform_wrapper .gform_footer {
    /* margin: var(--s6, 48px) 0 0 0 !important; */
    padding: 0 !important;
    display: block !important;
    width: 100%;
    margin-top: 15px !important;
}

.popup-form-proposal-card .gform_footer input[type="submit"],
.popup-form-proposal-card .gform_footer button[type="submit"] {
    display: block;
    width: 100%;
    margin: 0;
    padding: var(--s2, 16px) var(--s4, 32px);
    background-color: var(--Primary-Blue, #207DE9);
    color: var(--White, #fff);
    border: none;
    border-radius: 4px;
    font-family: var(--font-inter);
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.144px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.popup-form-proposal-card .gform_footer input[type="submit"]:hover,
.popup-form-proposal-card .gform_footer button[type="submit"]:hover {
    background-color: var(--Primary-Blue-Dark, #0C57AD);
}

/* --- AJAX spinner --- */
.popup-form-proposal-card .gform_ajax_spinner {
    margin-left: 12px;
    vertical-align: middle;
}

/* --- Confirmation message --- */
.popup-form-proposal-card .gform_confirmation_message {
    color: var(--White, #fff);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    text-align: center;
}

/* .action-container {
    bottom: 60px;
    right: 20px;
    top: auto;
}

.back-to-top {
    margin: 0;
    transform-origin: center;
    transform: none;
}

.back-to-top:hover {
    transform: translateY(-5px);
}

.back-to-top-inner {
    transform: none;
    flex-direction: row;
}

.back-to-top svg {
    width: 24px;
    transform: rotate(0deg) !important;
}

.back-to-top-text {
    transform: none;
    width: auto;
    top: auto;
} */


/* =========================================================================
   6. Responsive
   ========================================================================= */
@media (max-width: 768px) {
    .popup-form-proposal-card {
        padding: var(--s4, 32px) var(--s3, 24px) var(--s4, 32px);
    }

    .popup-form-proposal-card__title {
        font-size: 24px;
        line-height: 32px;
        letter-spacing: -0.864px;
        margin-bottom: var(--s3, 24px);
    }

    .popup-form-proposal-card .gform_body .gform_fields,
    .popup-form-proposal-card .gform_body ul.gform_fields {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: var(--s2, 16px);
    }

    .popup-form-proposal-card .gform_footer,
    .popup-form-proposal-card .gform_wrapper .gform_footer {
        margin-top: var(--s4, 32px) !important;
    }
}

@media (max-width: 480px) {
    .fancybox-popup-form-proposal .fancybox-slide {
        padding: var(--s2, 16px) var(--s1, 8px);
    }

    .popup-form-proposal-card {
        padding: var(--s4, 32px) var(--s2, 16px) var(--s3, 24px);
        border-radius: var(--s1, 8px);
    }
}