/* PHC Survey Form — targets .phc-survey-form added by survey.js */

/* 1. CARD */
.phc-survey-form {
    background: #fff !important;
    border-radius: 20px !important;
    padding: 48px !important;
    max-width: 540px !important;
    margin: 0 auto !important;
    box-shadow: 0px 8px 32px 0px rgba(0,0,0,0.06) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    color: #1E1E1E !important;
    box-sizing: border-box !important;
}

/* 2. HIDE FORMINATOR DEFAULT PROGRESS (replaced by JS footer) */
.phc-survey-form .forminator-pagination-progress {
    display: none !important;
}

/* 3. PAGE 1 INTRO — flex column with 24px gap matching Figma */
.phc-survey-form .forminator-merge-tags:has(.badge_icon) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 24px !important;
    width: 100% !important;
}

.phc-survey-form .badge_icon {
    width: 56px !important;
    height: 56px !important;
    background: #F5F0E8 !important;
    border-radius: 28px !important;
    margin: 0 auto 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.phc-survey-form .badge_icon::after {
    content: '+' !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    color: #9B8764 !important;
    line-height: normal !important;
    font-family: 'Inter', sans-serif !important;
}
.phc-survey-form p.survey_header {
    font-size: 26px !important;
    font-weight: 700 !important;
    text-align: center !important;
    color: #1E1E1E !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    font-family: 'Inter', sans-serif !important;
}
.phc-survey-form p.survey_header strong {
    font-weight: inherit !important;
}
.phc-survey-form p.description {
    text-align: center !important;
    color: #737373 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    font-family: 'Inter', sans-serif !important;
}
.phc-survey-form .survey_divider {
    width: 80px !important;
    height: 1px !important;
    background: #E0D9D1 !important;
    margin: 4px auto !important;
}
.phc-survey-form p.survey_time {
    text-align: center !important;
    color: #9B8764 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
    margin: 0 !important;
    font-family: 'Inter', sans-serif !important;
}

/* 4. SECTION HEADER (page 5 "Do you have a personal history...") */
.phc-survey-form p.section_header {
    font-size: 22px !important;
    font-weight: 600 !important;
    text-align: center !important;
    color: #1E1E1E !important;
    margin: 0 0 20px !important;
    line-height: 1.4 !important;
    font-family: 'Inter', sans-serif !important;
}
.phc-survey-form p.section_header strong {
    font-weight: inherit !important;
}

/* 5. LABELS — default small left-aligned; radio question labels override to large centered */
.phc-survey-form .forminator-label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #0E1B2B !important;
    text-align: left !important;
    line-height: 1.4 !important;
    margin: 0 0 6px !important;
}
/* Question label inside radio group: large + centered */
.phc-survey-form [role="radiogroup"] > .forminator-label {
    font-size: 22px !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin: 0 0 8px !important;
    font-family: 'Inter', sans-serif !important;
    color: #1E1E1E !important;
    line-height: 1.4 !important;
}
.phc-survey-form .forminator-required {
    display: none !important;
}
.phc-survey-form .forminator-description {
    display: block !important;
    font-size: 13px !important;
    color: #999 !important;
    text-align: center !important;
    line-height: 1.5 !important;
    margin: 0 0 24px !important;
}

/* 6. HIDE NATIVE RADIO INPUT & FORMINATOR BULLET */
.phc-survey-form input[type="radio"] {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
}
.phc-survey-form .forminator-radio-bullet {
    display: none !important;
}

/* 7. QUESTION PAGE RADIOGROUP: question full-width, pills side-by-side */
.phc-survey-form .forminator-field-radio:not(.step_4):not(#radio-7) [role="radiogroup"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: stretch !important;
}
.phc-survey-form .forminator-field-radio:not(.step_4):not(#radio-7) [role="radiogroup"] > .forminator-label {
    flex: 0 0 100% !important;
    width: 100% !important;
    margin-bottom: 0 !important;
}
.phc-survey-form .forminator-field-radio:not(.step_4):not(#radio-7) [role="radiogroup"] > .forminator-description {
    flex: 0 0 100% !important;
    width: 100% !important;
    margin-bottom: 8px !important;
}

/* Radio pill buttons */
.phc-survey-form label.forminator-radio {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1.5px solid #E0E0E0 !important;
    border-radius: 12px !important;
    padding: 14px 20px !important;
    cursor: pointer !important;
    transition: background 0.15s, border-color 0.15s, color 0.15s !important;
    background: #fff !important;
    margin: 0 !important;
    font-size: 16px !important;
    color: #1E1E1E !important;
    font-weight: 700 !important;
    line-height: normal !important;
    pointer-events: auto !important;
    text-align: center !important;
}
/* In question pages: pills share the row equally */
.phc-survey-form .forminator-field-radio:not(.step_4):not(#radio-7) label.forminator-radio {
    flex: 1 !important;
    min-width: 0 !important;
}
/* Selected state */
.phc-survey-form label.forminator-radio.phc-selected,
.phc-survey-form label.forminator-radio:has(input:checked) {
    background: #F5EDDA !important;
    border-color: #CCC2B0 !important;
    color: #9B8764 !important;
}
/* Hover state */
.phc-survey-form label.forminator-radio:hover {
    background: #F5EDDA !important;
    border-color: #CCC2B0 !important;
    color: #9B8764 !important;
}
/* Radio label text — zero out Forminator's default margin-left */
.phc-survey-form .forminator-radio-label {
    font-size: inherit !important;
    color: inherit !important;
    font-weight: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: normal !important;
}

/* 28px gap between question label and option pills */
.phc-survey-form .forminator-field-radio:not(.step_4):not(#radio-7) [role="radiogroup"] > .forminator-label {
    margin-bottom: 18px !important;
}

/* Error messages must break to their own row — all radio groups */
.phc-survey-form [role="radiogroup"] > *:not(.forminator-label):not(.forminator-description):not(label.forminator-radio) {
    flex: 0 0 100% !important;
    width: 100% !important;
    order: 10 !important;
    margin-top: 4px !important;
}

/* 8. PAGE 5 TABLE LAYOUT (step_4 only) — label left, pills right, errors below */
.phc-survey-form .step_4 [role="radiogroup"] {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
.phc-survey-form .step_4 .forminator-label {
    flex: 1 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    text-align: left !important;
    margin: 0 !important;
}
.phc-survey-form .step_4 label.forminator-radio {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    flex-shrink: 0 !important;
    padding: 8px 0 !important;
    margin: 2px 0 !important;
    font-size: 13px !important;
    border-radius: 6px !important;
    text-align: center !important;
    justify-content: center !important;
}
.phc-survey-form .step_4 .forminator-field-radio {
    border-bottom: 1px solid #f0ece8 !important;
    padding-bottom: 4px !important;
    margin-bottom: 4px !important;
}
.phc-survey-form .step_4 .forminator-field-radio:last-of-type {
    border-bottom: none !important;
}

/* 9. TEXT / EMAIL / PHONE INPUTS */
.phc-survey-form input[type="text"],
.phc-survey-form input[type="email"],
.phc-survey-form input[type="tel"],
.phc-survey-form textarea {
    width: 100% !important;
    border: 1px solid #d8d2ca !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
    color: #0E1B2B !important;
    background: #fff !important;
    outline: none !important;
    transition: border-color 0.15s !important;
    font-family: inherit !important;
}
.phc-survey-form input[type="text"]:focus,
.phc-survey-form input[type="email"]:focus,
.phc-survey-form input[type="tel"]:focus,
.phc-survey-form textarea:focus {
    border-color: #9D9470 !important;
    box-shadow: 0 0 0 3px rgba(157,148,112,0.12) !important;
}

/* Field labels on contact page */
.phc-survey-form .forminator-field-text .forminator-label,
.phc-survey-form .forminator-field-phone .forminator-label,
.phc-survey-form .forminator-field-email .forminator-label {
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: left !important;
    margin-bottom: 6px !important;
}

/* Contact page heading & subtext (HTML field) */
.phc-survey-form .forminator-field-html p:first-child {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    margin: 0 0 8px;
}

/* 10. CHECKBOX — Forminator uses .forminator-checkbox-box as visual, not native input */
.phc-survey-form input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
.phc-survey-form .forminator-checkbox-box {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    border: 1.5px solid #9B8764 !important;
    border-radius: 6px !important;
    background: #F5EDDA !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    transition: background 0.15s, border-color 0.15s !important;
    box-sizing: border-box !important;
}
.phc-survey-form .forminator-checkbox.forminator-checked .forminator-checkbox-box,
.phc-survey-form input[type="checkbox"]:checked ~ .forminator-checkbox-box,
.phc-survey-form .forminator-checkbox-box.phc-checked {
    background-color: #F5EDDA !important;
    border-color: #9B8764 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%239B8764' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3 8l3.5 3.5L13 5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px !important;
}
.phc-survey-form .forminator-checkbox-check,
.phc-survey-form .forminator-checkbox-box > svg,
.phc-survey-form .forminator-checkbox-box > img,
.phc-survey-form .forminator-checkbox-box > i,
.phc-survey-form .forminator-checkbox-box::before,
.phc-survey-form .forminator-checkbox-box::after {
    display: none !important;
    content: none !important;
}
.phc-survey-form label.forminator-checkbox {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 15px !important;
    color: #1E1E1E !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    font-family: 'Inter', sans-serif !important;
}

/* Subtitle/description paragraphs in HTML fields */
.phc-survey-form p.section_subtitle,
.phc-survey-form .forminator-field-html p:not([class]) {
    color: #999 !important;
    font-size: 14px !important;
    text-align: center !important;
    margin: 0 0 16px !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
}

/* 11. CONSENT BULLET LIST BOX */
.phc-survey-form .forminator-field-html ul {
    background: #F9F7F5 !important;
    border-radius: 12px !important;
    padding: 20px 24px 20px 38px !important;
    margin: 0 0 24px !important;
    list-style: disc !important;
    color: #1E1E1E !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
}
.phc-survey-form .forminator-field-html ul li {
    margin: 0 0 14px !important;
    padding-left: 6px !important;
}
.phc-survey-form .forminator-field-html ul li:last-child {
    margin-bottom: 0 !important;
}
.phc-survey-form .forminator-field-html ul li::marker {
    color: #9B8764 !important;
    font-weight: 500 !important;
}

/* 12. CLEAN UP FORM ROW SPACING */
.phc-survey-form .forminator-row {
    margin-bottom: 0 !important;
}
.phc-survey-form .forminator-field-html {
    margin-bottom: 0 !important;
}
.phc-survey-form .forminator-pagination--content {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}
.phc-survey-form .forminator-pagination {
    padding: 0 !important;
}

/* 13. CUSTOM FOOTER */
.phc-form-footer {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 24px !important;
}
.phc-step-label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #999 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-family: 'Inter', sans-serif !important;
}
.phc-progress-line {
    flex: 1 !important;
    height: 3px !important;
    background: #EBEBEB !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    min-width: 40px !important;
}
.phc-progress-fill {
    height: 100% !important;
    background: #9B8764 !important;
    border-radius: 2px !important;
    transition: width 0.4s ease !important;
}
.phc-nav-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

/* 14. NAV BUTTONS — CIRCLES */
.phc-nav-buttons .forminator-button {
    box-sizing: border-box !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    font-size: 0 !important;
    line-height: 1 !important;
    transition: background 0.15s, opacity 0.15s !important;
    padding: 0 !important;
    margin: 0 !important;
    text-indent: 0 !important;
    letter-spacing: 0 !important;
}
/* Keep Forminator's display:none on buttons that should be hidden */
.phc-nav-buttons .forminator-button[style*="display: none"],
.phc-nav-buttons .forminator-button[style*="display:none"] {
    display: none !important;
}
.phc-nav-buttons .forminator-button-back {
    background: transparent !important;
    border: 1.5px solid #9D9470 !important;
}
.phc-nav-buttons .forminator-button-back::before {
    content: '' !important;
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239D9470' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}
.phc-nav-buttons .forminator-button-next {
    background: #9D9470 !important;
    border: 1.5px solid #9D9470 !important;
}
.phc-nav-buttons .forminator-button-next::before {
    content: '' !important;
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}
.phc-nav-buttons .forminator-pagination-submit {
    background: #9D9470 !important;
    border: 1.5px solid #9D9470 !important;
    overflow: visible !important;
}
.phc-nav-buttons .forminator-pagination-submit::before {
    content: none !important;
}
.phc-nav-buttons .forminator-pagination-submit:hover {
    background: #CCC2B0 !important;
    border-color: #CCC2B0 !important;
}
.phc-submit-icon {
    display: block !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #fff !important;
    line-height: 1 !important;
    width: 20px !important;
    height: 20px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

/* Fix hover on all nav circle buttons */
.phc-nav-buttons .forminator-button-next:hover {
    background: #CCC2B0 !important;
    border-color: #CCC2B0 !important;
}
.phc-nav-buttons .forminator-button-back:hover {
    border-color: #CCC2B0 !important;
}
.phc-nav-buttons .forminator-button.forminator-hidden {
    display: none !important;
}

/* 15. PAGE 1: "Start Questionnaire" is a wide pill, not a circle */
.phc-nav-buttons:has(.forminator-button-back.forminator-hidden) .forminator-button-next {
    border-radius: 12px !important;
    width: auto !important;
    height: auto !important;
    min-width: unset !important;
    max-width: none !important;
    min-height: unset !important;
    max-height: none !important;
    padding: 16px 48px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    text-indent: 0 !important;
    letter-spacing: normal !important;
    color: #fff !important;
}
.phc-nav-buttons:has(.forminator-button-back.forminator-hidden) .forminator-button-next::before {
    display: none !important;
}

/* 16. radio-7 (Hormone-sensitive cancer) — no step_ class, force table layout */
.phc-survey-form #radio-7 [role="radiogroup"] {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
.phc-survey-form #radio-7 .forminator-label {
    flex: 1 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    text-align: left !important;
    margin: 0 !important;
}
.phc-survey-form #radio-7 label.forminator-radio {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    flex-shrink: 0 !important;
    padding: 8px 0 !important;
    margin: 2px 0 !important;
    font-size: 13px !important;
    border-radius: 6px !important;
    text-align: center !important;
    justify-content: center !important;
}
.phc-survey-form #radio-7 {
    border-bottom: none !important;
}

/* 17. MOBILE — Step 1 footer: stack step label and Start button on separate rows */
@media (max-width: 767px) {
    .phc-form-footer:has(.forminator-button-back.forminator-hidden) {
        flex-wrap: wrap !important;
    }
    .phc-form-footer:has(.forminator-button-back.forminator-hidden) .phc-nav-buttons {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
    .phc-form-footer:has(.forminator-button-back.forminator-hidden) .phc-nav-buttons .forminator-button-next {
        width: 100% !important;
        padding: 16px 24px !important;
        justify-content: center !important;
    }
}