/* ==========================================================================
   TAA Form Popup
   ========================================================================== */

/* show/hide controlled via JS inline style — CSS defines layout and fade */
.taa-form-popup {
    position: fixed;
    inset: 0;
    z-index: 99990;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Overlay backdrop */
.taa-form-popup__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

/* Dialog — #taaPopupContent moved inside #taaFormPopup on show */
#taaFormPopup #taaPopupContent {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.28);
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 48px 40px 40px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}

/* Close button */
.taa-form-popup__close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.15s;
}

.taa-form-popup__close:hover,
.taa-form-popup__close:focus {
    color: #111;
    outline: none;
}

/* Prevent body scroll when popup is open */
body.taa-popup-open {
    overflow: hidden;
}

#taaFormPopup #taaPopupContent > p:first-of-type {margin-bottom: 10px;}
#taaFormPopup #taaPopupContent [data-sf-role=form-container] {margin-bottom: 32px;}
#taaFormPopup #taaPopupContent [data-sf-role=form-container] button {border-radius: 15px; color: #FFFFFF; border: 1px solid #5E2777; background-color: #5E2777; padding: 5px 50px; line-height: 20px; outline: none; margin-top: 16px; transition: all .3s ease-out;}
#taaFormPopup #taaPopupContent [data-sf-role=form-container] button:hover {color: #5E2777; background-color: transparent; cursor: pointer; border: 1px solid #5E2777;}
#taaFormPopup #taaPopupContent [data-sf-role=form-container] .sf-RadioButtons strong {display: none; visibility: hidden;}
#taaFormPopup #taaPopupContent [data-sf-role=form-container] .sf-RadioButtons label {font-weight: normal; color: #5E2777; margin: 0;}
#taaFormPopup #taaPopupContent [data-sf-role=form-container] form input[type=radio] {position: relative; left: unset; width: auto;}
#taaFormPopup #taaPopupContent [data-sf-role=form-container] input[type='text'] {
    border-radius: 15px;
    border: 1px solid #5E2777;
    color: unset;
    padding: 12px;
    line-height: 20px;
    outline: none;
    transition: all .3s ease-out;
    width: 100%;
    margin-top: 0;
}


/* ==========================================================================
   Design mode
   ========================================================================== */

/* Toggle button fixed at bottom-left */
.taa-popup-design-toggle {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99999;
    background: #1a1a2e;
    color: #fff;
    border: none;
    border-radius: 0 6px 0 0;
    padding: 10px 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background 0.15s;
    user-select: none;
    box-shadow: 3px -3px 10px rgba(0, 0, 0, 0.35);
}

.taa-popup-design-toggle:hover {
    background: #2d2d4e;
}

/* Placeholder zone — collapsed by default, opens above the toggle button */
.taa-popup-design-zone {
    position: fixed;
    bottom: 37px;
    left: 0;
    z-index: 99998;
    width: 320px;
    max-height: 65vh;
    overflow-y: auto;
    background: #fff;
    border: 2px solid #1a1a2e;
    border-bottom: none;
    border-radius: 0 8px 0 0;
    padding: 0 16px 16px;
    box-shadow: 4px -4px 20px rgba(0, 0, 0, 0.25);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px;
}

.taa-popup-design-zone::before {
    content: "TAA Popup";
    display: block;
    position: sticky;
    top: 0;
    background: #1a1a2e;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 8px 0;
    margin: 0 -16px 12px;
    padding-left: 16px;
}

.taa-popup-design-zone--closed {
    display: none;
}

/* Reserve left space when panel is open */
body:has(.taa-popup-design-zone:not(.taa-popup-design-zone--closed)) {
    padding-left: 336px;
}

/* Mobile */
@media (max-width: 600px) {
    #taaFormPopup #taaPopupContent {
        padding: 40px 20px 24px;
    }
}