/* ─────────────────────────────────────────────────────────────
   RIA Channel – OD Video Pop-Up Questions for CPE
   Structural styles only — no font, color, or spacing overrides.
   The site theme provides all typography and color.
   ───────────────────────────────────────────────────────────── */

/* Overlay */
#odvp-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    animation: odvp-fade-in 0.2s ease;
}

#odvp-modal-overlay.odvp-active {
    display: flex;
}

/* Modal box */
#odvp-modal {
    background: #fff;
    width: 100%;
    max-width: 600px;
    max-height: 85vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    animation: odvp-slide-up 0.25s ease;
}

#odvp-modal-title {
    padding-left: 30px;
}

.nf-form-title h3 {
    padding-bottom: 30px;
}

/* Header */
#odvp-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}

#odvp-modal-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Close button — reset browser defaults */
#odvp-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    color: black;
}

/* Survey thank-you toast */
#odvp-survey-thanks {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
}

/* Animations */
@keyframes odvp-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes odvp-slide-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 600px) {
    #odvp-modal {
        max-width: calc(100vw - 32px);
        max-height: 90vh;
    }
}

/* Form wrapper padding */
.odvp-form-wrap {
    padding: 30px;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
}

/* Constrain all NF content within modal width */
.odvp-form-wrap *,
.odvp-form-wrap .nf-form-cont,
.odvp-form-wrap .nf-form-content,
.odvp-form-wrap .nf-field-container,
.odvp-form-wrap .field-wrap,
.odvp-form-wrap ul,
.odvp-form-wrap li {
    max-width: 100%;
    box-sizing: border-box;
}

/* Fix radio/checkbox lists overflowing */
.odvp-form-wrap .nf-form-content .listradio-wrap ul,
.odvp-form-wrap .nf-form-content .listcheckbox-wrap ul,
.odvp-form-wrap .nf-form-content .field-wrap ul {
    padding-left: 0;
    margin-left: 0;
    list-style: none;
}

.odvp-form-wrap .nf-form-content .listradio-wrap ul li,
.odvp-form-wrap .nf-form-content .listcheckbox-wrap ul li,
.odvp-form-wrap .nf-form-content .field-wrap ul li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding-left: 0;
    margin-left: 0;
}

.odvp-form-wrap .nf-form-content .field-wrap ul li input[type="radio"],
.odvp-form-wrap .nf-form-content .field-wrap ul li input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 3px;
}

/* ── Radio & checkbox list containment ──────────────────────────
   The theme applies pseudo-element bullets with absolute/negative
   positioning to [type="radio"] + label which bleed outside the
   modal. Flex on each li keeps the input and label in-bounds.
   ─────────────────────────────────────────────────────────────── */

#odvp-modal-body .listradio-wrap ul,
#odvp-modal-body .listcheckbox-wrap ul,
#odvp-modal-body .nf-field-element ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

#odvp-modal-body .listradio-wrap ul li,
#odvp-modal-body .listcheckbox-wrap ul li,
#odvp-modal-body .nf-field-element ul li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    position: relative !important;
    overflow: visible !important;
}

#odvp-modal-body .nf-field-element ul li input[type="radio"],
#odvp-modal-body .nf-field-element ul li input[type="checkbox"] {
    flex-shrink: 0 !important;
    /* position: relative !important; */
    margin-top: 3px !important;
    margin-left: 0 !important;
}

#odvp-modal-body .nf-field-element ul li label {
    flex: 1 !important;
    min-width: 0 !important;
    position: static !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Neutralise the theme's pseudo-element radio dots inside the modal */
#odvp-modal-body [type="radio"] + label:before,
#odvp-modal-body [type="radio"] + label:after {
    margin-left: 30px !important;
}

/* Push labels right of the radio/checkbox input */
#odvp-modal-body .nf-field-element ul li label {
    margin-left: 30px !important;
    padding-left: 10px !important;
}