/**
 * TeraForms — Multi Step Form theme + popup shell.
 *
 * Popup rules are theme-agnostic (any form may set popup_enabled); everything
 * else is scoped to .theme-multi-step so other themes are untouched.
 *
 * @since 6.0.0
 */

/* ───────────────────────── Popup shell ───────────────────────── */

.tf-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px;
    overflow-y: auto;
    background: rgba(12, 18, 38, 0.72);
    -webkit-overflow-scrolling: touch;
}

.tf-popup-overlay[hidden] {
    display: none !important;
}

.tf-popup-card {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: auto;
    padding: 28px 28px 22px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 64px rgba(8, 15, 40, 0.28);
}

.tf-popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5; /* above the progress segments it overlaps */
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 22px;
    line-height: 1;
    color: #6b7280;
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.tf-popup-close:hover {
    color: #111827;
    background: #f3f4f6;
}

/* Background lock — `top` is set inline by JS to preserve scroll position. */
body.tf-popup-open {
    position: fixed;
    width: 100%;
    overflow: hidden;
}

/* The form fills the card; the card already provides the chrome. */
.tf-popup-card .teraforms-form-wrapper,
.tf-popup-card .teraforms-form-container {
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

@media (max-width: 600px) {
    .tf-popup-overlay { padding: 12px; }
    .tf-popup-card { padding: 24px 18px 18px; border-radius: 14px; }
}

/* ──────────────── Content blocks (all themes) ──────────────── */

.tf-content-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 4px;
}

.tf-content-heading-text {
    margin: 0;
    font-size: 23px;
    line-height: 1.25;
    font-weight: 700;
    color: #0f172a;
}

.tf-content-avatar {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 50%;
    background: #e5e7eb;
}

.tf-content-paragraph {
    margin: 0 0 18px;
    font-size: 14.5px;
    line-height: 1.5;
    color: #64748b;
}

/* Sub-text sits tight under its heading. */
.tf-content-heading + .tf-content-paragraph {
    margin-top: 2px;
}

/* A paragraph written directly after a heading renders inside it as the
   sub-heading, stacked under the headline text. */
.tf-content-heading-body {
    flex: 1 1 auto;
    min-width: 0;
}

.tf-content-heading-body .tf-content-subheading {
    margin: 3px 0 0;
}

@media (max-width: 600px) {
    .tf-content-heading-text { font-size: 20px; }
    .tf-content-avatar { width: 46px; height: 46px; }
}

/* Header block spacing inside the Multi Step theme. Steps are flex rows with
   their own gap, so margins are zeroed there and the gap does the spacing.
   Applied without the .tf-step child combinator so single-step forms (no page
   breaks, hence no .tf-step wrapper) get the same treatment. */
/* Two columns: the avatar, then the headline and its sub-heading stacked
   beside it. The sub-heading renders inside .tf-content-heading-body, so it
   lines up with the headline text instead of guessing an indent. */
.theme-multi-step .tf-content-heading {
    margin: 0;
    gap: 13px;
    align-items: center;
}

.theme-multi-step .tf-content-heading-body {
    flex: 1 1 auto;
    min-width: 0;
}

.theme-multi-step .tf-content-heading-body .tf-content-subheading {
    margin: 3px 0 0;
    padding: 0;
}

.theme-multi-step .tf-content-paragraph {
    margin: 2px 0 10px;
}

.theme-multi-step .tf-content-heading-text {
    font-size: 20.5px;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.theme-multi-step .tf-content-avatar {
    width: 52px;
    height: 52px;
}

/* ───────────────── Multi Step theme ───────────────── */

.theme-multi-step .teraforms-form-title,
.theme-multi-step .teraforms-form-description {
    display: none;
}

/* Segmented progress — the existing .tf-step-indicator already renders one
   .tf-si-step per step and teraforms-form.js keeps .tf-si-active/.tf-si-done in
   sync, so each dot is restyled into a flat segment. No new markup or JS. */
.theme-multi-step .tf-step-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 22px;
    /* Keep the last segment clear of the close button */
    padding: 0 30px 0 0;
}

.theme-multi-step .tf-si-step {
    flex: 1 1 0;
    min-width: 0;
    display: block;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
}

/* The dot becomes the bar; its number/tick are not part of this design. */
.theme-multi-step .tf-si-dot {
    display: block;
    width: 100%;
    height: 4px;
    min-width: 0;
    padding: 0;
    margin: 0;
    font-size: 0;
    line-height: 0;
    color: transparent;
    background: #e3e8ef;
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    transition: background 0.3s ease;
}

.theme-multi-step .tf-si-num,
.theme-multi-step .tf-si-check,
.theme-multi-step .tf-si-label,
.theme-multi-step .tf-si-line {
    display: none;
}

.theme-multi-step .tf-si-step.tf-si-active .tf-si-dot,
.theme-multi-step .tf-si-step.tf-si-done .tf-si-dot {
    background: #1d3fb5;
}

/* The in-form progress bar and OTP stepper are redundant here. */
.theme-multi-step .tf-progress-wrap,
.theme-multi-step .tf-otp-stepper {
    display: none;
}

/* Option cards — reuses the existing options_style=card markup.
   The shared capsule/card CSS centres text, pads tighter and fills the active
   card solid; all of that is overridden here, scoped to this theme only. */
.theme-multi-step .tf-capsule-group.tf-card-group,
.theme-multi-step .tf-capsule-group.tf-capsule-radio {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.theme-multi-step .tf-capsule-pill,
.theme-multi-step .tf-card-pill {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    padding: 17px 20px;
    font-size: 15.5px;
    font-weight: 400;
    text-align: left;
    color: #0f172a;
    background: #fff;
    border: 1.5px solid #e4e9f0;
    border-radius: 12px;
    box-shadow: none;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.theme-multi-step .tf-option-icon {
    flex: 0 0 auto;
    width: 21px;
    height: 21px;
    color: #1d3fb5;
    /* Heavier than the base so the glyph reads clearly against the label. */
    stroke-width: 2.1;
}

.theme-multi-step .tf-option-label {
    flex: 1 1 auto;
    text-align: left;
}

/* Subhead ("Label|value|icon|subhead") — the label and its subhead stack
   inside .tf-option-text so the icon stays a single flex sibling of the pair.
   Cards without a subhead keep the original single-line layout untouched. */
.theme-multi-step .tf-option-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 3px;
    text-align: left;
    min-width: 0;
}

.theme-multi-step .tf-option-sub {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
    color: #64748b;
}

/* A two-line card is taller, so pin the icon to the first line rather than
   letting it float to the vertical centre of the whole card. */
.theme-multi-step .tf-card-pill.tf-has-sub,
.theme-multi-step .tf-capsule-pill.tf-has-sub {
    align-items: flex-start;
}

.theme-multi-step .tf-has-sub .tf-option-icon {
    margin-top: 1px;
}

.theme-multi-step .tf-capsule-active .tf-option-sub {
    color: #475569;
}

.theme-multi-step .tf-capsule-pill:hover:not(.tf-capsule-active),
.theme-multi-step .tf-card-pill:hover:not(.tf-capsule-active) {
    border-color: #c7d2e8;
    background: #fbfcff;
    box-shadow: none;
}

/* Selected — light tint with a blue outline, not a solid fill.
   The outline is an inset shadow rather than an outset one: .tf-slide-clip has
   overflow:hidden (the iOS slide fix) and these cards are full-width, so an
   outset shadow gets shaved off at the left and right edges. */
.theme-multi-step .tf-capsule-pill.tf-capsule-active,
.theme-multi-step .tf-card-pill.tf-capsule-active {
    color: #0f172a;
    border-color: #1d3fb5;
    background: #f5f8ff;
    box-shadow: inset 0 0 0 1px #1d3fb5;
}

.theme-multi-step .tf-capsule-active .tf-option-icon {
    color: #1d3fb5;
}

/* Inputs */
/* Inputs — white with a light border, matching the option cards.
   The phone field keeps intl-tel-input's own flag layout; only the shared
   height/border/radius below apply to it. */
.theme-multi-step .teraforms-field input[type="text"],
.theme-multi-step .teraforms-field input[type="email"],
.theme-multi-step .teraforms-field input[type="tel"],
.theme-multi-step .teraforms-field input[type="number"],
.theme-multi-step .teraforms-field select,
.theme-multi-step .teraforms-field textarea {
    width: 100%;
    padding: 15px 16px;
    font-size: 15.5px;
    line-height: 1.3;
    color: #0f172a;
    background: #fff;
    border: 1.5px solid #dbe2ea;
    border-radius: 12px;
    box-shadow: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.theme-multi-step .teraforms-field input::placeholder,
.theme-multi-step .teraforms-field textarea::placeholder {
    color: #94a3b8;
    opacity: 1;
}

/* Inset focus ring for the same reason as the selected card above — an outset
   ring would be clipped by .tf-slide-clip on full-width fields. */
.theme-multi-step .teraforms-field input:focus,
.theme-multi-step .teraforms-field select:focus,
.theme-multi-step .teraforms-field textarea:focus {
    outline: none;
    border-color: #1d3fb5;
    box-shadow: inset 0 0 0 1px #1d3fb5;
}

.theme-multi-step .teraforms-field.error input,
.theme-multi-step .teraforms-field.error select,
.theme-multi-step .teraforms-field.error textarea {
    border-color: #dc2626;
}

/* Each field reserves a fixed strip for its error text and the message is taken
   out of flow, so showing one never pushes the following fields down. The step
   gap is reduced by the same amount to keep normal spacing unchanged. */
.theme-multi-step .teraforms-field {
    position: relative;
    padding-bottom: 17px;
}

.theme-multi-step .teraforms-error-message {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1px;
    display: block;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.2;
    color: #dc2626;
    pointer-events: none;
    /* Clip a rare two-line message instead of letting it grow the field. */
    max-height: 15px;
    overflow: hidden;
}

/* Steps are a wrapping row so half-width fields pair up on one line. */
.theme-multi-step .tf-step {
    display: none;
    flex-wrap: wrap;
    /* Row gap is small because each field already reserves a strip below itself
       for its error text; the column gap between paired fields stays 12px. */
    row-gap: 0;
    column-gap: 12px;
    align-items: flex-start;
}

.theme-multi-step .tf-step.tf-step-active {
    display: flex;
}

/* Single-step forms have no .tf-step wrapper, so the fields container itself
   becomes the wrapping row. */
.theme-multi-step .teraforms-form-fields {
    display: flex;
    flex-wrap: wrap;
    row-gap: 0;
    column-gap: 12px;
    align-items: flex-start;
}

/* In stepped forms each .tf-step is itself a full-width row inside this flex
   container, so the same rules hold without needing a separate layout mode. */
.theme-multi-step .teraforms-form-fields > .tf-step,
.theme-multi-step .teraforms-form-fields > .teraforms-field,
.theme-multi-step .teraforms-form-fields > .tf-content-heading,
.theme-multi-step .teraforms-form-fields > .tf-content-paragraph,
.theme-multi-step .teraforms-form-fields > .tf-capsule-group {
    flex: 0 0 100%;
    max-width: 100%;
}

.theme-multi-step .teraforms-form-fields > .teraforms-field.half-width {
    flex: 0 0 calc(50% - 6px);
    max-width: calc(50% - 6px);
}

/* Full-width by default; half-width fields take just under half so two fit. */
.theme-multi-step .tf-step > .teraforms-field {
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0;
}

.theme-multi-step .tf-step > .teraforms-field.half-width {
    flex: 0 0 calc(50% - 6px);
    max-width: calc(50% - 6px);
}

/* Content blocks always span the row. */
.theme-multi-step .tf-step > .tf-content-heading,
.theme-multi-step .tf-step > .tf-content-paragraph,
.theme-multi-step .tf-step > .tf-capsule-group {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Row gap is 0 (fields carry their own error strip), so blocks without one
   space themselves. */
.theme-multi-step .tf-step > .tf-capsule-group,
.theme-multi-step .teraforms-form-fields > .tf-capsule-group {
    margin-bottom: 4px;
}


/* Consent checkbox — small text, aligned with the box. */
.theme-multi-step .teraforms-checkbox-group,
.theme-multi-step .teraforms-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13.5px;
    line-height: 1.45;
    font-weight: 400;
    color: #475569;
}

.theme-multi-step .teraforms-checkbox-label input[type="checkbox"] {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin: 1px 0 0;
    accent-color: #1d3fb5;
}

/* Buttons — submit first, Back beneath it. */
.theme-multi-step .tf-step-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 18px;
}

.theme-multi-step .tf-btn-next,
.theme-multi-step .teraforms-submit-btn {
    width: 100%;
    padding: 16px 24px;
    font-size: 16.5px;
    font-weight: 700;
    color: #fff;
    background: #1d3fb5;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.theme-multi-step .tf-btn-next:hover,
.theme-multi-step .teraforms-submit-btn:hover {
    background: #17339a;
}

/* The submit button is moved into .tf-step-nav by showStep() on the last step. */
.theme-multi-step .tf-step-nav .teraforms-form-actions {
    order: -1;
    width: 100%;
}

.theme-multi-step .tf-btn-back {
    align-self: flex-start;
    padding: 4px 0;
    font-size: 14.5px;
    font-weight: 500;
    color: #64748b;
    background: none;
    border: 0;
    cursor: pointer;
}

.theme-multi-step .tf-btn-back:hover {
    color: #0f172a;
}

@media (max-width: 600px) {
    .theme-multi-step .tf-step > .teraforms-field.half-width {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* "Show checkbox in the card" — control on the right of each option card.
   The label/subhead column already takes the free space, so the control sits
   flush right without needing a margin hack. */
.theme-multi-step .tf-option-control {
    width: 24px;
    height: 24px;
    border: 2px solid #d3dbe6;
    background: #fff;
}

.theme-multi-step .tf-capsule-active .tf-option-control-radio {
    border-color: #1d3fb5;
    background: #1d3fb5;
    box-shadow: inset 0 0 0 4px #fff;
}

.theme-multi-step .teraforms-checkbox-group.tf-show-control .teraforms-checkbox-label {
    padding: 17px 20px;
    font-size: 15.5px;
    color: #0f172a;
    border: 1.5px solid #e4e9f0;
    border-radius: 12px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.theme-multi-step .teraforms-checkbox-group.tf-show-control .teraforms-checkbox-label:hover {
    border-color: #c7d2e8;
    background: #fbfcff;
}

.theme-multi-step .teraforms-checkbox-group.tf-show-control {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.theme-multi-step .teraforms-checkbox-group.tf-show-control input[type="checkbox"] {
    accent-color: #1d3fb5;
}

/* ───────────── Theme Style: green (settings → Theme Style) ─────────────
   Layered on .theme-multi-step via .tf-style-green on the form wrapper, so the
   theme's own rules stay the single source of layout and only the accent
   colour changes. A form left on "Default" carries no extra class and is
   untouched by everything below. */

/* Progress segments */
.theme-multi-step.tf-style-green .tf-si-step.tf-si-active .tf-si-dot,
.theme-multi-step.tf-style-green .tf-si-step.tf-si-done .tf-si-dot {
    background: #0d9488;
}

/* Option icons */
.theme-multi-step.tf-style-green .tf-option-icon,
.theme-multi-step.tf-style-green .tf-capsule-active .tf-option-icon {
    color: #0d9488;
}

/* Selected option card */
.theme-multi-step.tf-style-green .tf-capsule-pill.tf-capsule-active,
.theme-multi-step.tf-style-green .tf-card-pill.tf-capsule-active {
    border-color: #0d9488;
    background: #effbf8;
    box-shadow: inset 0 0 0 1px #0d9488;
}

/* Option card hover */
.theme-multi-step.tf-style-green .tf-capsule-pill:hover:not(.tf-capsule-active),
.theme-multi-step.tf-style-green .tf-card-pill:hover:not(.tf-capsule-active) {
    border-color: #99e2d7;
    background: #f7fdfc;
}

/* "Show checkbox in the card" control */
.theme-multi-step.tf-style-green .tf-capsule-active .tf-option-control-radio {
    border-color: #0d9488;
    background: #0d9488;
}

/* Inputs on focus */
.theme-multi-step.tf-style-green .teraforms-field input[type="text"]:focus,
.theme-multi-step.tf-style-green .teraforms-field input[type="email"]:focus,
.theme-multi-step.tf-style-green .teraforms-field input[type="tel"]:focus,
.theme-multi-step.tf-style-green .teraforms-field input[type="number"]:focus,
.theme-multi-step.tf-style-green .teraforms-field select:focus,
.theme-multi-step.tf-style-green .teraforms-field textarea:focus {
    border-color: #0d9488;
    box-shadow: inset 0 0 0 1px #0d9488;
}

/* Native checkboxes */
.theme-multi-step.tf-style-green .teraforms-checkbox-label input[type="checkbox"],
.theme-multi-step.tf-style-green .teraforms-checkbox-group.tf-show-control input[type="checkbox"] {
    accent-color: #0d9488;
}

/* Continue / submit buttons */
.theme-multi-step.tf-style-green .tf-btn-next,
.theme-multi-step.tf-style-green .teraforms-submit-btn {
    background: #0d9488;
}

.theme-multi-step.tf-style-green .tf-btn-next:hover,
.theme-multi-step.tf-style-green .teraforms-submit-btn:hover {
    background: #0b7f75;
}

/* Step hint ("Tap an answer to continue") — stands in for the Continue button
   on steps that advance themselves. theme-multi-step.js adds .tf-hint-on when
   the button is hidden; only the green style renders it, so other forms are
   unaffected even though the class is applied everywhere. */
/* Hidden by default everywhere, including before the script runs. */
.theme-multi-step .tf-step-hint {
    display: none;
}

.theme-multi-step.tf-style-green .tf-step-nav {
    /* The hint sits on its own full-width line, right-aligned. The Back link
       sets its own align-self, so it is unaffected by this. */
    align-items: stretch;
}

.theme-multi-step.tf-style-green .tf-step-hint.tf-hint-on {
    display: block;
    width: 100%;
    margin-top: -2px;
    font-size: 13.5px;
    line-height: 1.4;
    color: #94a3b8;
    text-align: right;
}