/**
 * Wizard Calculator Gravity Forms Skin - v1.0.0
 *
 * Forked from peo_gf_form.css v11.4.0 for the parallel "Wizard Calculator"
 * form. Identical base skin so the form looks unchanged, PLUS the
 * coverage-mix page styling (live tally + auto-assist employee-only row).
 * Scopes to .gform-theme--framework + every GF wrapper, so it co-exists
 * with the live PEO skin without bleed (same selectors, same tokens).
 *
 * Pure Orbital CSS API. Scopes to .gform-theme--framework + every GF wrapper.
 *
 * v11.4.0: Option B card treatment  -  every input field (.gfield) gets its
 *          own cream card. Dividers (.gfield--type-section) stay flat as
 *          section breaks. Form wrapper flattened (no bg, no border, no shadow)
 *          so per-field cards become the primary visual layer.
 * v11.3.0: Merriweather everywhere (including form-control elements which
 *          don't inherit font-family by default).
 * v11.2.0: Added review-summary card styles.
 * v11.1.0: Black/orange paper palette; 1400px fluid wrapper; Merriweather @import.
 */

@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700;900&family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================
   FORM WRAPPER + DESIGN TOKENS
   ============================================================ */

.gform-theme--framework[id^="gform_wrapper_"] {
    --gf-color-primary: #b8551f;
    --gf-color-primary-darker: #8a3e15;
    --gf-ctrl-radius: 8px;
    --gf-ctrl-btn-radius: 999px;

    --gf-ctrl-bg-color: #ffffff;
    --gf-ctrl-bg-color-hover: #f4efe6;
    --gf-ctrl-bg-color-focus: #ffffff;
    --gf-ctrl-border-color: #cdc4b0;
    --gf-ctrl-border-color-hover: #5a544a;
    --gf-ctrl-border-color-focus: #b8551f;
    --gf-ctrl-color: #0e0d0b;
    --gf-ctrl-font-size: 16px;
    --gf-ctrl-shadow: none;
    --gf-ctrl-accent-color: #b8551f;

    --gf-ctrl-bg-color-error: #fbf3f0;
    --gf-ctrl-border-color-error: #8a2c1f;

    --gf-ctrl-label-color-primary: #0e0d0b;
    --gf-ctrl-label-font-size-primary: 15px;
    --gf-ctrl-label-font-weight-primary: 600;
    --gf-ctrl-label-color-secondary: #25221d;
    --gf-ctrl-label-font-size-secondary: 15px;
    --gf-ctrl-label-color-tertiary: #5a544a;
    --gf-ctrl-label-font-size-tertiary: 13px;
    --gf-ctrl-label-font-weight-tertiary: 500;

    --gf-ctrl-desc-color: #5a544a;
    --gf-ctrl-desc-font-size: 14px;
    --gf-ctrl-desc-color-error: #8a2c1f;
    --gf-ctrl-desc-font-size-error: 14px;
    --gf-ctrl-desc-font-weight-error: 500;
    --gf-ctrl-desc-line-height-error: 1.43;

    --gf-ctrl-btn-bg-color-primary: #b8551f;
    --gf-ctrl-btn-bg-color-hover-primary: #8a3e15;
    --gf-ctrl-btn-color-primary: #ffffff;
    --gf-ctrl-btn-font-size: 15px;
    --gf-ctrl-btn-font-weight: 600;
    --gf-ctrl-btn-padding-x: 28px;

    --gf-ctrl-btn-bg-color-secondary: #ffffff;
    --gf-ctrl-btn-bg-color-hover-secondary: #f4efe6;
    --gf-ctrl-btn-border-color-secondary: #0e0d0b;
    --gf-ctrl-btn-color-secondary: #0e0d0b;

    width: 100%;
    max-width: 1400px;
    margin-inline: auto;
    padding: clamp(20px, 4vw, 48px);
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-family: 'Merriweather', Georgia, serif;
}

/* ============================================================
   GLOBAL FONT-FAMILY OVERRIDE
   Form-control elements don't inherit font-family from their
   ancestor by default. These rules force Merriweather across
   every element inside the wrapper.
   ============================================================ */

.gform-theme--framework[id^="gform_wrapper_"] *,
.gform-theme--framework[id^="gform_wrapper_"] input,
.gform-theme--framework[id^="gform_wrapper_"] select,
.gform-theme--framework[id^="gform_wrapper_"] textarea,
.gform-theme--framework[id^="gform_wrapper_"] button {
    font-family: 'Merriweather', Georgia, serif;
}

.gform-theme--framework[id^="gform_wrapper_"].gform_validation_error {
    border-color: #8a2c1f;
}

/* ============================================================
   FORM HEADING
   ============================================================ */

.gform-theme--framework[id^="gform_wrapper_"] .gform_heading {
    margin-block-end: 24px;
    padding-block-end: 20px;
    border-block-end: 1px solid #ddd5bf;
}

.gform-theme--framework[id^="gform_wrapper_"] .gform_title {
    font-family: 'Merriweather', Georgia, serif;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #0e0d0b;
    margin: 0 0 8px 0;
}

.gform-theme--framework[id^="gform_wrapper_"] .gform_description {
    display: block;
    font-size: 15px;
    line-height: 1.5;
    color: #5a544a;
}

/* ============================================================
   HIDDEN FIELDS
   ============================================================ */

.gform-theme--framework[id^="gform_wrapper_"] .gfield--type-hidden {
    display: none !important;
}

/* ============================================================
   RADIO BUTTONS
   ============================================================ */

.gform-theme--framework[id^="gform_wrapper_"] .gfield--type-radio {
    --gf-field-choice-gap: 12px;
    --gf-ctrl-choice-size: 20px;
    --gf-ctrl-radio-check-size: 8px;
    --gf-ctrl-choice-check-color: #b8551f;
}

/* ============================================================
   CHECKBOXES
   ============================================================ */

.gform-theme--framework[id^="gform_wrapper_"] .gfield--type-checkbox {
    --gf-field-choice-gap: 12px;
    --gf-ctrl-choice-size: 20px;
    --gf-ctrl-checkbox-check-size: 14px;
    --gf-ctrl-choice-check-color: #b8551f;
}

/* ============================================================
   SECTION BREAKS
   ============================================================ */

.gform-theme--framework[id^="gform_wrapper_"] .gfield--type-section {
    --gf-field-section-border-color: #ddd5bf;
    --gf-field-section-border-width: 1px;
    --gf-field-section-padding-y-end: 16px;
    margin-block-start: 8px;
    margin-block-end: 8px;
}

.gform-theme--framework[id^="gform_wrapper_"] .gfield--type-section .gsection_title {
    font-family: 'Merriweather', Georgia, serif;
    font-size: 20px;
    font-weight: 700;
    color: #0e0d0b;
    margin: 0 0 8px 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.gform-theme--framework[id^="gform_wrapper_"] .gfield--type-section .gsection_description {
    font-size: 14px;
    color: #5a544a;
    line-height: 1.5;
}

/* ============================================================
   PROGRESS BAR
   ============================================================ */

.gform-theme--framework[id^="gform_wrapper_"] .gf_progressbar_wrapper {
    --gf-field-pg-prog-margin-y-end: 32px;
    --gf-field-pg-prog-color: #5a544a;
    --gf-field-pg-prog-font-size: 13px;
    --gf-field-pg-prog-font-weight: 600;
    --gf-field-pg-prog-title-margin-y-end: 10px;
}

.gform-theme--framework[id^="gform_wrapper_"] .gf_progressbar_title {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.gform-theme--framework[id^="gform_wrapper_"] .gf_progressbar {
    --gf-field-pg-prog-bar-bg-color: #ece5d4;
    --gf-field-pg-prog-bar-radius: 100px;
    --gf-field-pg-prog-bar-height: 8px;
}

.gform-theme--framework[id^="gform_wrapper_"] .gf_progressbar .gf_progressbar_percentage {
    --gf-field-pg-prog-bar-bg-color-blue: #b8551f;
    --gf-field-pg-prog-bar-bg-color-gray: #b8551f;
    --gf-field-pg-prog-bar-bg-color-green: #b8551f;
    --gf-field-pg-prog-bar-bg-color-orange: #b8551f;
    --gf-field-pg-prog-bar-bg-color-red: #b8551f;
}

/* ============================================================
   PAGE WRAPPER
   ============================================================ */

.gform-theme--framework[id^="gform_wrapper_"] .gform_page {
    padding-block: 8px;
}

/* ============================================================
   FOOTER + BUTTONS
   ============================================================ */

.gform-theme--framework[id^="gform_wrapper_"] .gform_page_footer,
.gform-theme--framework[id^="gform_wrapper_"] .gform_footer {
    --gf-form-footer-margin-y-start: 32px;
    --gf-form-footer-gap: 12px;
    padding-block-start: 24px;
    border-block-start: 1px solid #ddd5bf;
    justify-content: flex-end;
}

/* ============================================================
   VALIDATION SUMMARY
   ============================================================ */

.gform-theme--framework[id^="gform_wrapper_"] .gform_validation_errors {
    --gf-form-validation-bg-color: #fbf3f0;
    --gf-form-validation-border-color: #d4a899;
    --gf-form-validation-border-width: 1px;
    --gf-form-validation-border-style: solid;
    --gf-form-validation-radius: 8px;
    --gf-form-validation-gap: 8px;
    --gf-form-validation-padding-y: 16px;
    --gf-form-validation-padding-x: 16px;
    --gf-form-validation-heading-color: #6e2418;
    --gf-form-validation-heading-font-size: 15px;
    --gf-form-validation-heading-font-weight: 600;
    --gf-form-validation-heading-icon-bg-color: rgba(138, 44, 31, 0.08);
    --gf-form-validation-heading-icon-border-color: #d4a899;
    --gf-form-validation-heading-icon-color: #8a2c1f;
    --gf-form-validation-summary-color: #6e2418;
    --gf-form-validation-summary-font-size: 14px;
}

/* ============================================================
   FIELD-LEVEL VALIDATION
   ============================================================ */

.gform-theme--framework[id^="gform_wrapper_"] .gfield_error {
    --gf-ctrl-bg-color-error: #fbf3f0;
    --gf-ctrl-border-color-error: #8a2c1f;
}

.gform-theme--framework[id^="gform_wrapper_"] .gfield_validation_message {
    --gf-ctrl-desc-color-error: #8a2c1f;
    --gf-ctrl-desc-font-size-error: 13px;
    margin-block-start: 6px;
}

/* ============================================================
   REQUIRED INDICATOR
   ============================================================ */

.gform-theme--framework[id^="gform_wrapper_"] .gfield_required {
    color: #8a2c1f;
    margin-inline-start: 2px;
}

/* ============================================================
   AJAX SPINNER
   ============================================================ */

.gform-theme--framework[id^="gform_wrapper_"] .gform_ajax_spinner {
    margin-inline-start: 12px;
    vertical-align: middle;
}

/* ============================================================
   REVIEW SUMMARY (final page card grid)
   ============================================================ */

.gform-theme--framework[id^="gform_wrapper_"] .pt-review-wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.gform-theme--framework[id^="gform_wrapper_"] .pt-review-headline {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gform-theme--framework[id^="gform_wrapper_"] .pt-step-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #b8551f;
}

.gform-theme--framework[id^="gform_wrapper_"] .pt-review-headline .pt-step-title {
    font-family: 'Merriweather', Georgia, serif;
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #0e0d0b;
    margin: 0;
}

.gform-theme--framework[id^="gform_wrapper_"] .pt-step-sub {
    font-size: 15px;
    line-height: 1.5;
    color: #5a544a;
    margin: 0;
}

.gform-theme--framework[id^="gform_wrapper_"] .pt-review-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-block: 8px;
}

@media (min-width: 640px) {
    .gform-theme--framework[id^="gform_wrapper_"] .pt-review-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .gform-theme--framework[id^="gform_wrapper_"] .pt-review-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.gform-theme--framework[id^="gform_wrapper_"] .pt-review-card {
    background-color: #f4efe6;
    border: 1px solid #ddd5bf;
    border-radius: 10px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gform-theme--framework[id^="gform_wrapper_"] .pt-review-card-title {
    font-family: 'Merriweather', Georgia, serif;
    font-size: 16px;
    font-weight: 700;
    color: #0e0d0b;
    letter-spacing: -0.01em;
    padding-block-end: 10px;
    border-block-end: 1px solid #ddd5bf;
}

.gform-theme--framework[id^="gform_wrapper_"] .pt-review-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gform-theme--framework[id^="gform_wrapper_"] .pt-review-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    line-height: 1.4;
}

.gform-theme--framework[id^="gform_wrapper_"] .pt-review-label {
    color: #5a544a;
    flex: 0 1 auto;
    font-weight: 500;
}

.gform-theme--framework[id^="gform_wrapper_"] .pt-review-value {
    color: #0e0d0b;
    font-weight: 600;
    text-align: right;
    flex: 0 1 auto;
    min-width: 0;
    word-break: break-word;
}

.gform-theme--framework[id^="gform_wrapper_"] .pt-review-value.is-na {
    color: #a39885;
    font-weight: 500;
    font-style: italic;
}

.gform-theme--framework[id^="gform_wrapper_"] .pt-review-disclaimer {
    font-size: 13px;
    line-height: 1.5;
    color: #5a544a;
    margin: 0;
}
/* ============================================================
   OPTION B  -  PER-FIELD CARDS (v11.4.0)
   Every input .gfield gets its own cream card. Excludes hidden,
   page-break, section dividers, html headers, and the review host.
   ============================================================ */

.gform-theme--framework[id^="gform_wrapper_"] .gfield:not(.gfield--type-hidden):not(.gfield--type-page):not(.gfield--type-section):not(.gfield--type-html) {
    background-color: #f4efe6;
    border: 1px solid #ddd5bf;
    border-radius: 10px;
    padding: 18px 20px;
    box-sizing: border-box;
}

/* Force every direct child of a card .gfield to sit inside the padding.
   Orbital's reset can apply negative or auto margins that push the label
   above the card edge  -  clamp them all to 0 top-margin. */
.gform-theme--framework[id^="gform_wrapper_"] .gfield:not(.gfield--type-hidden):not(.gfield--type-page):not(.gfield--type-section):not(.gfield--type-html) > * {
    margin-block-start: 0;
}
.gform-theme--framework[id^="gform_wrapper_"] .gfield:not(.gfield--type-hidden):not(.gfield--type-page):not(.gfield--type-section):not(.gfield--type-html) > .gfield_label {
    margin-block-start: 0;
    margin-block-end: 4px;
}

/* Radio/checkbox fields render as <fieldset> with <legend> labels. Browsers
   reserve a slot for <legend> at the top of the fieldset that sits ON the
   border, not inside padding. Solution: float the legend so it flows as a
   normal element inside the padding box, then clear it so subsequent content
   stacks below. */
.gform-theme--framework[id^="gform_wrapper_"] fieldset.gfield:not(.gfield--type-hidden):not(.gfield--type-page):not(.gfield--type-section):not(.gfield--type-html) {
    min-inline-size: 0;
}
.gform-theme--framework[id^="gform_wrapper_"] fieldset.gfield:not(.gfield--type-hidden):not(.gfield--type-page):not(.gfield--type-section):not(.gfield--type-html) > legend.gfield_label {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0 0 4px 0;
    line-height: 1.4;
}
.gform-theme--framework[id^="gform_wrapper_"] fieldset.gfield:not(.gfield--type-hidden):not(.gfield--type-page):not(.gfield--type-section):not(.gfield--type-html) > legend.gfield_label + * {
    clear: left;
}

/* Required indicator: keep "(Required)" tight to the preceding word so the
   label/indicator pair wraps as a single unit. */
.gform-theme--framework[id^="gform_wrapper_"] .gfield_required {
    white-space: nowrap;
}

/* Header HTML blocks (pt-step-header) stay flat above the card stack */
.gform-theme--framework[id^="gform_wrapper_"] .gfield--type-html.pt-step-header {
    background: transparent;
    border: 0;
    padding: 0;
    margin-block-end: 8px;
}

/* Review host (page 11) keeps its own internal grid, no outer card */
.gform-theme--framework[id^="gform_wrapper_"] .gfield--type-html.pt-review-host {
    background: transparent;
    border: 0;
    padding: 0;
}

/* Section dividers (divider_retirement, divider_wc) stay flat between cards */
.gform-theme--framework[id^="gform_wrapper_"] .gfield--type-html.pt-step-header hr.ptr-divider {
    border: 0;
    border-block-start: 1px solid #ddd5bf;
    margin-block: 20px 12px;
}

/* Field error state: tint card + border red */
.gform-theme--framework[id^="gform_wrapper_"] .gfield_error:not(.gfield--type-hidden):not(.gfield--type-page):not(.gfield--type-section):not(.gfield--type-html) {
    background-color: #fbf3f0;
    border-color: #8a2c1f;
}
/* ============================================================
   WIZARD COVERAGE-MIX PAGE (v1.0.0)
   The "Who is covered" page: a live tally banner plus the four
   tier-count selects. Employee-only (#209) is auto-managed by JS.
   Built mobile-first; every flex child uses min-width:0 and the
   container uses max-width:100% so nothing overflows the iframe
   at narrow (~360-380px) widths.
   ============================================================ */

/* The tally banner lives inside the page-7b header content block. */
.gform-theme--framework[id^="gform_wrapper_"] .wizard-tally {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    box-sizing: border-box;
    max-width: 100%;
    margin-block-start: 16px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid #ddd5bf;
    background-color: #f4efe6;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

/* The numeric "X of Y placed" text. */
.gform-theme--framework[id^="gform_wrapper_"] .wizard-tally .wizard-tally-text {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Balanced state: calm teal-green confirmation. Unbalanced should be rare
   (the JS keeps it balanced), but we style it so a mid-interaction frame
   reads as "in progress" rather than broken. */
.gform-theme--framework[id^="gform_wrapper_"] .wizard-tally.is-balanced {
    background-color: #e8f3ec;
    border-color: #2f7d57;
    color: #1f6043;
}

.gform-theme--framework[id^="gform_wrapper_"] .wizard-tally.is-unbalanced {
    background-color: #fbf3f0;
    border-color: #b8551f;
    color: #8a3e15;
}

/* A small leading dot/check feel via a pseudo marker, kept text-free so it
   never overflows or needs an icon font. */
.gform-theme--framework[id^="gform_wrapper_"] .wizard-tally::before {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: currentColor;
    opacity: 0.85;
}

/* The four tier selects already get the per-field cream card from the base
   skin. On the coverage-mix page we tighten vertical rhythm so the four
   rows read as a compact group under the tally. We target by the new
   page-break body via the page wrapper; GF wraps each page in .gform_page,
   and the coverage page break carries .peo-page-coverage-mix on the BREAK,
   but the page content div is the NEXT sibling. To stay robust we simply
   reduce the gap between consecutive count cards globally on small screens
   only where they stack. */

/* Employee-only auto-managed row: subtle "calculated for you" affordance.
   We cannot add a class to the field (locked), so we target the locked GF
   field id via attribute on the list item. GF renders id="field_{form}_209".
   Using [id$="_209"] is form-id agnostic and matches only the EO field. */
.gform-theme--framework[id^="gform_wrapper_"] .gfield[id$="_209"] {
    position: relative;
}

.gform-theme--framework[id^="gform_wrapper_"] .gfield[id$="_209"] select {
    background-color: #f4efe6;
    color: #25221d;
    font-weight: 600;
}

/* A tiny "auto" hint appended after the EO label via CSS so we add no DOM
   and touch no field content. Uses the GF label element. */
.gform-theme--framework[id^="gform_wrapper_"] .gfield[id$="_209"] .gfield_label::after,
.gform-theme--framework[id^="gform_wrapper_"] .gfield[id$="_209"] legend.gfield_label::after {
    content: " (filled in for you)";
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    font-style: normal;
    color: #5a544a;
    letter-spacing: 0;
}

/* Disabled options inside the enrolling select (capped above ft+pt) inherit
   the browser's muted style; ensure they're clearly non-selectable. */
.gform-theme--framework[id^="gform_wrapper_"] select option:disabled {
    color: #b3aa97;
}

/* Tablet+ : give the tally a touch more presence. */
@media (min-width: 640px) {
    .gform-theme--framework[id^="gform_wrapper_"] .wizard-tally {
        font-size: 15px;
        padding: 14px 18px;
    }
}