/* Survey modal + 4 steps + form fields + radio cards + validation states */

/* Validation error on form inputs */
.field-input--error,
.field-textarea--error {
    border-color: var(--error) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 15%, transparent) !important;
}

/* Validation error on radio groups */
.radio-group--error {
    border-radius: var(--radius);
    outline: 2px solid var(--error);
    outline-offset: 4px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 15%, transparent);
}

/* ============================================================
   Survey modal
   ============================================================ */
.survey-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: grid;
    place-items: center;
    padding: 16px;
}

.survey-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(33, 49, 69, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: var(--z-modal-backdrop);
}

.survey-modal__card {
    position: relative;
    z-index: calc(var(--z-modal) + 1);
    width: min(640px, 100%);
    max-height: calc(100vh - 32px);
    background: var(--surface-container-lowest);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-modal);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.survey-modal__progress {
    background: var(--surface-container-lowest);
    border-bottom: 1px solid var(--outline-variant);
}

.survey-modal__progress-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
}

.survey-modal__step-label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
}

.survey-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    color: var(--outline);
    transition: background 0.15s ease, color 0.15s ease;
}

.survey-modal__close:hover {
    background: var(--surface-container-low);
    color: var(--on-surface);
}

.survey-modal__close:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}

.survey-modal__body {
    padding: 32px;
    overflow-y: auto;
}

.survey-step {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.survey-step__head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.survey-step__head--center {
    text-align: center;
}

.survey-step__title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--on-surface);
    margin: 0;
}

.survey-step__sub {
    font-size: 16px;
    color: var(--on-surface-variant);
    margin: 0;
}

.survey-step__field {
    display: flex;
    flex-direction: column;
}

/* ------ Form fields ------ */
.field-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--on-surface);
    margin-bottom: 8px;
}

.field-with-icon {
    position: relative;
}

.field-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--outline);
    font-size: 20px !important;
    pointer-events: none;
}

.field-input {
    width: 100%;
    padding: 12px 16px 12px 48px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--on-surface);
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}

.field-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(11, 28, 48, 0.12);
}

.field-input::placeholder {
    color: var(--outline);
}

.field-textarea {
    width: 100%;
    padding: 16px;
    font-size: 16px;
    font-family: var(--font-primary);
    line-height: 1.5;
    color: var(--on-surface);
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    resize: vertical;
    min-height: 140px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 10px -2px rgba(15, 23, 42, 0.04);
}

.field-textarea:focus {
    border-color: var(--tertiary-container);
    box-shadow: 0 0 0 3px rgba(112, 115, 255, 0.25);
}

/* ------ Radio cards ------ */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.radio-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    background: var(--surface-container-lowest);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.radio-card:hover {
    background: var(--surface-container-low);
}

.radio-card input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--secondary);
    flex-shrink: 0;
    margin: 0;
}

.radio-card__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.radio-card__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--on-surface);
}

.radio-card__sub {
    font-size: 12px;
    font-weight: 500;
    color: var(--on-surface-variant);
}

.radio-card:has(input:checked) {
    border-color: var(--secondary);
    border-width: 2px;
    padding: 15px;
    background: var(--surface-container-low);
}

/* ------ Footer ------ */
.survey-modal__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 20px 32px;
    border-top: 1px solid var(--outline-variant);
    background: var(--surface-bright, var(--background));
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 720px) {
    .survey-modal__body {
        padding: 20px;
    }

    .survey-modal__footer {
        padding: 16px 20px;
    }
}

/* ============================================================
   OptinMonster popup — silent background submit
   The OM campaign (id `wbt0vt2vg2zm9guy2dl1`, matches OM_CAMPAIGN_ID in
   assets/scripts.js — a DISTINCT campaign from the EN page's
   ahi3spdgtapjr1yipots) is rendered into the DOM by the WP optinmonster
   plugin. We sync the survey form into it and click its submit button
   programmatically. The popup itself must stay "alive" (offsetParent !=
   null, normal React lifecycle) so OM doesn't short-circuit on visibility
   checks — hence offscreen positioning instead of `display: none`.
   ============================================================ */
#om-wbt0vt2vg2zm9guy2dl1 {
    position: fixed !important;
    left: -99999px !important;
    top: -99999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
}