/* ==========================================================================
   2-MINUTE ASSESSMENT — GRAVITY FORMS 2.10 (orbital theme), multi-step

   IMPORTANT — WHY THE SELECTORS LOOK LIKE THIS
   Gravity Forms 2.7+ defaults to the "orbital" theme, not the older
   "gravity-theme". Orbital does not add a .gravity-theme class, so
   selectors written as `.gform_wrapper.gravity-theme ...` never match.

   Instead this file hooks onto the classes GF derives from the form's
   own CSS Class Name setting (`co-assessment-form`):
     .co-assessment-form_wrapper   → the wrapper div (GF appends _wrapper)
     .co-assessment-form           → the <form> element
   Both exist regardless of which theme is active.

   Most of the look is set through orbital's supported CSS variable API
   (--gf-*), which avoids fighting the theme's own specificity. Bespoke
   pieces (card, step rail, pills, choice cards, consent block) follow.

   Visual language matches affiliatewp-custom.css:
     card 20px radius / 1px #e8edf0 / 0 15px 35px rgba(0,54,88,.05)
     input 14px 16px / 1.5px #e0e8e3 / 12px radius / #fcfdfe
     focus #6DAA4F + 0 0 0 4px rgba(109,170,79,.12)
     button 16px 24px / #6DAA4F / 16px radius / lift on hover
     font 'Sofia Pro', sans-serif
   ========================================================================== */

/* ── Orbital variable API ──────────────────────────────────────────── */
.co-assessment-form_wrapper {
    /* Brand.
       Orbital ships a stock blue (#204ce5, darker/lighter #044ad3) on
       --gf-color-primary AND on the separate --gf-color-in-ctrl-primary
       set used by focus rings, checkbox/radio accents and the datepicker.
       Both are overridden here so no stock blue can surface anywhere. */
    --gf-color-primary: #6DAA4F;
    --gf-color-primary-rgb: 109, 170, 79;
    --gf-color-primary-darker: #5a9440;
    --gf-color-primary-lighter: #86bd6a;
    --gf-color-primary-contrast: #ffffff;
    --gf-color-primary-contrast-rgb: 255, 255, 255;

    /* In-control accents → brand navy */
    --gf-color-in-ctrl-primary: #003658;
    --gf-color-in-ctrl-primary-rgb: 0, 54, 88;
    --gf-color-in-ctrl-primary-darker: #002a45;
    --gf-color-in-ctrl-primary-lighter: #0a4a72;
    --gf-color-in-ctrl-primary-contrast: #ffffff;
    --gf-color-in-ctrl-primary-contrast-rgb: 255, 255, 255;

    /* Focus outlines */
    --gf-ctrl-outline-color: #003658;
    --gf-ctrl-outline-color-focus: #6DAA4F;

    /* Inputs */
    --gf-ctrl-radius: 12px;
    --gf-ctrl-border-width: 1.5px;
    --gf-ctrl-border-color: #e0e8e3;
    --gf-ctrl-border-color-hover: #c5d4cc;
    --gf-ctrl-border-color-focus: #6DAA4F;
    --gf-ctrl-bg-color: #fcfdfe;
    --gf-ctrl-bg-color-hover: #fcfdfe;
    --gf-ctrl-bg-color-focus: #ffffff;
    --gf-ctrl-padding-x: 16px;
    --gf-ctrl-padding-y: 14px;
    --gf-ctrl-accent-color: #6DAA4F;
    /* Control text colour — orbital reads this for select/input values.
       Leaving it unset made the chosen dropdown value render invisible. */
    --gf-ctrl-color: #003658;
    --gf-ctrl-color-focus: #003658;
    --gf-ctrl-color-hover: #003658;

    /* Labels */
    --gf-ctrl-label-color-primary: #003658;
    --gf-ctrl-label-color-secondary: #003658;
    --gf-ctrl-label-color-req: #6DAA4F;
    --gf-ctrl-label-font-size-primary: 14px;
    --gf-ctrl-label-font-size-secondary: 14px;
    --gf-ctrl-label-font-weight-primary: 500;
    --gf-ctrl-label-font-weight-secondary: 500;
    --gf-ctrl-label-font-family-primary: 'Sofia Pro', sans-serif;
    --gf-ctrl-label-font-family-secondary: 'Sofia Pro', sans-serif;
    --gf-ctrl-label-font-family-req: 'Sofia Pro', sans-serif;

    /* Descriptions */
    --gf-ctrl-desc-color: #6B7280;
    --gf-ctrl-desc-font-size: 13px;
    --gf-ctrl-desc-font-family: 'Sofia Pro', sans-serif;

    /* Buttons */
    --gf-ctrl-btn-radius: 16px;
    --gf-ctrl-btn-font-family: 'Sofia Pro', sans-serif;
    --gf-ctrl-btn-font-size: 16px;
    --gf-ctrl-btn-font-weight: 600;
    --gf-ctrl-btn-padding-x: 32px;
    --gf-ctrl-btn-padding-y: 16px;
    --gf-ctrl-btn-bg-color-primary: #6DAA4F;
    --gf-ctrl-btn-bg-color-hover-primary: #5a9440;
    --gf-ctrl-btn-bg-color-focus-primary: #5a9440;
    --gf-ctrl-btn-border-color-primary: #6DAA4F;

    /* Layout rhythm */
    --gf-form-gap-y: 20px;
    --gf-form-gap-x: 20px;
    --gf-field-gap-y: 20px;
}

/* ── Card shell ────────────────────────────────────────────────────── */
.co-assessment-form_wrapper {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #e8edf0;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 54, 88, 0.05), 0 5px 15px rgba(0, 0, 0, 0.02);
    padding: 40px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    font-family: 'Sofia Pro', sans-serif;
    color: #003658;
}

/* Decorative premium top bar */
.co-assessment-form_wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #6DAA4F 0%, #003658 100%);
    z-index: 2;
}

/* Sofia Pro must be set on controls explicitly — it is not inherited */
.co-assessment-form_wrapper,
.co-assessment-form_wrapper *,
.co-assessment-form_wrapper input,
.co-assessment-form_wrapper select,
.co-assessment-form_wrapper textarea,
.co-assessment-form_wrapper button {
    font-family: 'Sofia Pro', sans-serif;
}

.co-assessment-form_wrapper .gform_title {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.25;
    color: #003658;
    text-align: center;
    margin: 0 0 12px;
}

.co-assessment-form_wrapper .gform_description {
    display: block;
    font-size: 15px;
    line-height: 1.65;
    color: #555555;
    text-align: center;
    margin: 0 auto 8px;
    max-width: 620px;
}

.co-assessment-form_wrapper .gform_required_legend {
    display: none;
}

/* ── Step indicator (orbital markup) ───────────────────────────────── */
.co-assessment-form_wrapper .gf_page_steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    border-bottom: 1px solid #eef2f6;
    margin: 0 0 30px;
    padding: 0 0 20px;
}

.co-assessment-form_wrapper .gf_step {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: #9aa7b4;
    opacity: 1;
    text-transform: none;
}

/* Perfect circle: fixed basis so flex cannot stretch it, aspect-ratio so
   longer numbers cannot make it oval, and no inherited padding. */
.co-assessment-form_wrapper .gf_step_number {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    min-width: 28px;
    max-width: 28px;
    aspect-ratio: 1 / 1;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #e0e8e3;
    border-radius: 50%;
    background: #fcfdfe;
    color: #9aa7b4;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    transition: all 0.25s ease;
}

/* GF layers its own pseudo-elements on the step number (a filled disc on
   ::before, a connector on ::after). Both are removed so only our circle
   renders. */
.co-assessment-form_wrapper .gf_step_number::before,
.co-assessment-form_wrapper .gf_step_number::after {
    content: none !important;
    display: none !important;
}

.co-assessment-form_wrapper .gf_step_label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12.5px;
    letter-spacing: .02em;
}

.co-assessment-form_wrapper .gf_step_active {
    color: #003658;
    font-weight: 600;
}

.co-assessment-form_wrapper .gf_step_active .gf_step_number {
    background: #6DAA4F;
    border-color: #6DAA4F;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(109, 170, 79, 0.2);
}

/* Completed steps switch to brand navy — green marks only where you are now */
.co-assessment-form_wrapper .gf_step_completed {
    color: #003658;
    font-weight: 500;
}

.co-assessment-form_wrapper .gf_step_completed .gf_step_number {
    background: #003658;
    border-color: #003658;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 54, 88, 0.18);
}

/* Percentage-bar variant, if pagination type is switched in the editor */
.co-assessment-form_wrapper .gf_progressbar_wrapper {
    margin: 0 0 28px;
}

.co-assessment-form_wrapper .gf_progressbar {
    background: #e8edf0;
    border-radius: 999px;
    height: 8px;
    box-shadow: none;
}

.co-assessment-form_wrapper .gf_progressbar_percentage {
    background: linear-gradient(90deg, #6DAA4F 0%, #003658 100%);
    border-radius: 999px;
    height: 8px;
}

/* ── Grid ──────────────────────────────────────────────────────────── */
.co-assessment-form_wrapper .gfield.co-half {
    grid-column: span 6;
}

.co-assessment-form_wrapper .gfield.co-third {
    grid-column: span 3;
}

/* ── Section headings ──────────────────────────────────────────────── */
.co-assessment-form_wrapper .gsection {
    border-bottom: none;
    margin: 0 0 4px;
    padding: 0;
}

.co-assessment-form_wrapper .gsection .gsection_title {
    display: block;
    font-size: 20px;
    font-weight: 600;
    color: #003658;
    margin: 0;
    padding: 0;
}

.co-assessment-form_wrapper .gsection .gsection_description {
    font-size: 14px;
    line-height: 1.6;
    color: #555555;
    padding: 8px 0 0;
    margin: 0;
}

/* ── Labels ────────────────────────────────────────────────────────── */
.co-assessment-form_wrapper .gfield_label,
.co-assessment-form_wrapper .gform-field-label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #003658;
    line-height: 1.45;
    cursor: pointer;
}

.co-assessment-form_wrapper .gfield_required {
    color: #6DAA4F;
    font-weight: 500;
    margin-left: 3px;
}

.co-assessment-form_wrapper .gfield_description,
.co-assessment-form_wrapper .gform-field-description {
    font-size: 13px;
    line-height: 1.55;
    color: #6B7280;
    padding-top: 6px;
}

/* ── Text inputs, selects, textareas ───────────────────────────────── */
/* One geometry for every control, keyed off the state dropdown:
   14px/16px padding + 1.5px border + 1.4 line-height on a 15px font
   resolves to a 52px box. Setting the height explicitly stops selects,
   date fields and number spinners drifting from the text inputs. */
.co-assessment-form_wrapper input[type="text"],
.co-assessment-form_wrapper input[type="email"],
.co-assessment-form_wrapper input[type="tel"],
.co-assessment-form_wrapper input[type="number"],
.co-assessment-form_wrapper input[type="date"],
.co-assessment-form_wrapper select,
.co-assessment-form_wrapper textarea {
    width: 100%;
    height: 52px;
    padding: 14px 16px;
    border: 1.5px solid #e0e8e3;
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.4;
    color: #003658;
    background-color: #fcfdfe;
    transition: all 0.25s ease;
    box-sizing: border-box;
    vertical-align: middle;
    -webkit-appearance: none;
    appearance: none;
}

/* Textareas are the one exception — they grow */
.co-assessment-form_wrapper textarea {
    height: auto;
}

.co-assessment-form_wrapper input[type="text"]:hover,
.co-assessment-form_wrapper input[type="email"]:hover,
.co-assessment-form_wrapper input[type="tel"]:hover,
.co-assessment-form_wrapper input[type="number"]:hover,
.co-assessment-form_wrapper select:hover,
.co-assessment-form_wrapper textarea:hover {
    border-color: #c5d4cc;
}

.co-assessment-form_wrapper input:focus,
.co-assessment-form_wrapper select:focus,
.co-assessment-form_wrapper textarea:focus {
    outline: none;
    border-color: #6DAA4F;
    box-shadow: 0 0 0 4px rgba(109, 170, 79, 0.12);
    background-color: #ffffff;
}

.co-assessment-form_wrapper ::placeholder {
    color: #a8b3bd;
    opacity: 1;
}

/* Select: the chosen value must stay visible. Orbital can null the text
   colour via --gf-ctrl-color, and some browsers inherit a transparent
   colour into <option>, so both are set explicitly here. */
.co-assessment-form_wrapper select,
.co-assessment-form_wrapper .ginput_container_select select,
.co-assessment-form_wrapper select.gfield_select {
    color: #003658;
    background-color: #fcfdfe;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23003658' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 20px 20px;
    padding-right: 44px;
    height: 52px;
    min-height: 0;
    line-height: 1.4;
    text-indent: 0;
    text-shadow: none;
    opacity: 1;
}

.co-assessment-form_wrapper select option {
    color: #003658;
    background-color: #ffffff;
}

/* The unselected placeholder row stays muted */
.co-assessment-form_wrapper select option[value=""] {
    color: #a8b3bd;
}

.co-assessment-form_wrapper textarea {
    min-height: 110px;
    resize: vertical;
    line-height: 1.6;
}

/* Number fields.
   GF's size setting (small/medium/large) adds a width class to the input,
   which collapsed the height/weight fields to a sliver. The grid already
   controls their width via .co-third, so the size class is neutralised
   and the native spinner buttons are removed — they clash with the
   custom control styling and are useless on touch. */
.co-assessment-form_wrapper input[type="number"],
.co-assessment-form_wrapper input.small,
.co-assessment-form_wrapper input.medium,
.co-assessment-form_wrapper input.large,
.co-assessment-form_wrapper select.small,
.co-assessment-form_wrapper select.medium,
.co-assessment-form_wrapper select.large,
.co-assessment-form_wrapper textarea.small,
.co-assessment-form_wrapper textarea.medium,
.co-assessment-form_wrapper textarea.large {
    width: 100%;
    max-width: 100%;
}

.co-assessment-form_wrapper input[type="number"]::-webkit-outer-spin-button,
.co-assessment-form_wrapper input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0;
    display: none;
}

.co-assessment-form_wrapper input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Keep the "Please enter a number from X to Y" hint from crowding the
   narrow columns */
.co-assessment-form_wrapper .co-third .gfield_description,
.co-assessment-form_wrapper .co-third .gform-field-description {
    font-size: 12.5px;
    line-height: 1.45;
}

/* Long labels wrap rather than forcing the description down the column */
.co-assessment-form_wrapper .co-third .gfield_label {
    min-height: 2.9em;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0 4px;
}

.co-assessment-form_wrapper .ginput_container_date {
    display: flex;
    align-items: center;
    gap: 8px;
}

.co-assessment-form_wrapper img.ui-datepicker-trigger {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

/* ── Checkboxes & radios (house custom controls) ───────────────────── */
.co-assessment-form_wrapper input[type="checkbox"],
.co-assessment-form_wrapper input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 1.5px solid #e0e8e3;
    outline: none;
    background-color: #fcfdfe;
    background-image: none;
    cursor: pointer;
    display: inline-grid;
    place-content: center;
    transition: all 0.2s ease;
    margin: 0 10px 0 0;
    flex: 0 0 auto;
}

.co-assessment-form_wrapper input[type="checkbox"] {
    border-radius: 6px;
}

.co-assessment-form_wrapper input[type="radio"] {
    border-radius: 50%;
}

.co-assessment-form_wrapper input[type="checkbox"]:hover,
.co-assessment-form_wrapper input[type="radio"]:hover {
    border-color: #c5d4cc;
}

.co-assessment-form_wrapper input[type="checkbox"]:checked,
.co-assessment-form_wrapper input[type="radio"]:checked {
    background-color: #6DAA4F;
    border-color: #6DAA4F;
}

.co-assessment-form_wrapper input[type="checkbox"]::before {
    content: "";
    width: 10px;
    height: 10px;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em #ffffff;
    transform-origin: center;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.co-assessment-form_wrapper input[type="radio"]::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em #ffffff;
}

.co-assessment-form_wrapper input[type="checkbox"]:checked::before,
.co-assessment-form_wrapper input[type="radio"]:checked::before {
    transform: scale(1);
}

.co-assessment-form_wrapper input[type="checkbox"]:focus,
.co-assessment-form_wrapper input[type="radio"]:focus {
    box-shadow: 0 0 0 4px rgba(109, 170, 79, 0.12);
}

.co-assessment-form_wrapper .gchoice {
    display: flex;
    align-items: center;
    margin: 0;
}

.co-assessment-form_wrapper .gfield_radio,
.co-assessment-form_wrapper .gfield_checkbox {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.co-assessment-form_wrapper .gchoice label,
.co-assessment-form_wrapper .gform-field-label--type-inline {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
    color: #555555;
    cursor: pointer;
    max-width: none;
    margin: 0;
}

/* ── Yes/No/Unsure rows — selectable pills ─────────────────────────── */
.co-assessment-form_wrapper .co-inline-choices .gfield_radio {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

.co-assessment-form_wrapper .co-inline-choices .gchoice {
    position: relative;
    flex: 0 1 auto;
}

.co-assessment-form_wrapper .co-inline-choices .gchoice input[type="radio"] {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 12px;
    z-index: 1;
}

.co-assessment-form_wrapper .co-inline-choices .gchoice label {
    display: block;
    min-width: 96px;
    text-align: center;
    padding: 13px 24px;
    border: 1.5px solid #e0e8e3;
    border-radius: 12px;
    background-color: #fcfdfe;
    font-size: 15px;
    font-weight: 500;
    color: #003658;
    transition: all 0.25s ease;
}

.co-assessment-form_wrapper .co-inline-choices .gchoice input[type="radio"]:hover + label {
    border-color: #c5d4cc;
}

.co-assessment-form_wrapper .co-inline-choices .gchoice input[type="radio"]:focus + label {
    box-shadow: 0 0 0 4px rgba(109, 170, 79, 0.12);
}

.co-assessment-form_wrapper .co-inline-choices .gchoice input[type="radio"]:checked + label {
    border-color: #6DAA4F;
    background-color: #6DAA4F;
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(109, 170, 79, 0.2);
}

/* ── "What are you interested in?" — selectable cards ──────────────── */
.co-assessment-form_wrapper .co-choice-cards .gfield_checkbox {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.co-assessment-form_wrapper .co-choice-cards .gchoice {
    align-items: center;
    padding: 16px;
    border: 1.5px solid #e0e8e3;
    border-radius: 12px;
    background-color: #fcfdfe;
    transition: all 0.25s ease;
}

.co-assessment-form_wrapper .co-choice-cards .gchoice:hover {
    border-color: #c5d4cc;
}

.co-assessment-form_wrapper .co-choice-cards .gchoice:has(input:checked) {
    border-color: #6DAA4F;
    background-color: rgba(109, 170, 79, 0.06);
}

.co-assessment-form_wrapper .co-choice-cards .gchoice label {
    font-size: 14.5px;
    font-weight: 500;
    color: #003658;
}

/* ── Conditional follow-up fields ──────────────────────────────────── */
.co-assessment-form_wrapper .co-conditional {
    border-left: 3px solid #6DAA4F;
    background-color: rgba(109, 170, 79, 0.06);
    border-radius: 0 12px 12px 0;
    padding: 16px;
}

/* ── Consent block ─────────────────────────────────────────────────── */
/* Each acknowledgment is a separate required field so Gravity Forms
   enforces all three. They are styled as three self-contained cards —
   an earlier version stitched them into one panel with negative margins,
   which left white seams wherever the grid's row gap showed through. */
.co-assessment-form_wrapper .co-consent-heading {
    margin: 0 0 4px;
    padding: 0;
}

.co-assessment-form_wrapper .co-consent-heading__title {
    font-size: 15px;
    font-weight: 600;
    color: #003658;
    margin: 0 0 5px;
}

.co-assessment-form_wrapper .co-consent-heading__note {
    font-size: 13px;
    color: #6B7280;
    margin: 0;
}

.co-assessment-form_wrapper .co-consent-item {
    background-color: #f8fafc;
    border: 1.5px solid #e8edf0;
    border-radius: 12px;
    padding: 16px 18px;
    transition: all 0.25s ease;
}

.co-assessment-form_wrapper .co-consent-item:hover {
    border-color: #c5d4cc;
}

/* Ticked consents read as confirmed */
.co-assessment-form_wrapper .co-consent-item:has(input:checked) {
    border-color: #6DAA4F;
    background-color: rgba(109, 170, 79, 0.06);
}

/* The short field label is admin-facing only — the choice text is the
   consent the customer actually agrees to. The block heading already
   says all three are required. */
.co-assessment-form_wrapper .co-consent-item .gfield_label {
    display: none;
}

.co-assessment-form_wrapper .co-consent-item .gfield_checkbox {
    gap: 0;
}

.co-assessment-form_wrapper .co-consent-item .gchoice {
    align-items: flex-start;
    gap: 12px;
}

.co-assessment-form_wrapper .co-consent-item input[type="checkbox"] {
    margin: 2px 0 0;
}

.co-assessment-form_wrapper .co-consent-item .gchoice label {
    font-size: 14px;
    line-height: 1.6;
    color: #374151;
}

/* Legal links inside consent text */
.co-assessment-form_wrapper .co-consent-item .gchoice label a {
    color: #003658;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(109, 170, 79, 0.5);
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.co-assessment-form_wrapper .co-consent-item .gchoice label a:hover,
.co-assessment-form_wrapper .co-consent-item .gchoice label a:focus-visible {
    color: #6DAA4F;
    text-decoration-color: #6DAA4F;
}

/* ── File uploads ──────────────────────────────────────────────────── */
/* File inputs must not inherit the fixed 52px control height — the
   "Choose File" button plus its padding needs more room, and a fixed
   height clipped it. Height is content-driven with a floor instead. */
.co-assessment-form_wrapper .co-upload input[type="file"],
.co-assessment-form_wrapper input[type="file"] {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 72px;
    padding: 16px;
    font-size: 14px;
    line-height: 1.5;
    color: #6B7280;
    background-color: #fcfdfe;
    border: 1.5px dashed #e0e8e3;
    border-radius: 12px;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.25s ease;
}

.co-assessment-form_wrapper .co-upload input[type="file"]:hover {
    border-color: #6DAA4F;
    background-color: rgba(109, 170, 79, 0.06);
}

.co-assessment-form_wrapper input[type="file"]::file-selector-button {
    flex: 0 0 auto;
    margin: 0 14px 0 0;
    padding: 12px 22px;
    height: auto;
    min-height: 0;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Sofia Pro', sans-serif;
    line-height: 1.2;
    color: #ffffff;
    background: #003658;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.25s ease;
}

.co-assessment-form_wrapper input[type="file"]::file-selector-button:hover {
    background: #002a45;
}

/* GF prints its own "Accepted file types: …" line, which duplicates the
   field description. Keep the description (it reads better) and drop the
   generated one. */
.co-assessment-form_wrapper .co-upload .gform_fileupload_rules {
    display: none;
}

.co-assessment-form_wrapper .gform_fileupload_rules {
    font-size: 12.5px;
    color: #6B7280;
}

/* ── Electronic signature ──────────────────────────────────────────── */
.co-assessment-form_wrapper .co-signature input[type="text"] {
    font-family: 'Segoe Script', 'Brush Script MT', cursive;
    font-size: 22px;
    padding: 16px;
    letter-spacing: .3px;
}

/* ── Validation ────────────────────────────────────────────────────── */
.co-assessment-form_wrapper .gfield_error input,
.co-assessment-form_wrapper .gfield_error select,
.co-assessment-form_wrapper .gfield_error textarea {
    border-color: #e5484d;
    background-color: #fdf2f2;
}

.co-assessment-form_wrapper .gfield_validation_message,
.co-assessment-form_wrapper .validation_message {
    font-size: 13px;
    color: #b42318;
    background-color: #fdf2f2;
    border: none;
    border-radius: 8px;
    padding: 10px 14px;
    margin-top: 8px;
}

.co-assessment-form_wrapper .gform_validation_errors {
    background-color: #fdf2f2;
    border: 1px solid #f5d0d0;
    border-radius: 12px;
    box-shadow: none;
    padding: 16px 20px;
    margin-bottom: 24px;
}

.co-assessment-form_wrapper .gform_validation_errors h2 {
    font-size: 15px;
    font-weight: 600;
    color: #b42318;
    margin: 0;
}

/* ── Footer & buttons ──────────────────────────────────────────────── */
.co-assessment-form_wrapper .gform_footer,
.co-assessment-form_wrapper .gform_page_footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 32px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid #eef2f6;
}

/* Shared button base */
.co-assessment-form_wrapper .gform_footer input[type="submit"],
.co-assessment-form_wrapper .gform_footer button,
.co-assessment-form_wrapper .gform_page_footer input[type="submit"],
.co-assessment-form_wrapper .gform_page_footer button,
.co-assessment-form_wrapper .gform_next_button,
.co-assessment-form_wrapper .gform_previous_button {
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Sofia Pro', sans-serif;
    line-height: 1.2;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    margin: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1 1 180px;
    min-width: 150px;
    max-width: 240px;
}

/* Primary — Continue / Submit */
.co-assessment-form_wrapper .gform_footer input[type="submit"],
.co-assessment-form_wrapper .gform_footer button.gform_button,
.co-assessment-form_wrapper .gform_next_button {
    background: #6DAA4F;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(109, 170, 79, 0.2);
}

.co-assessment-form_wrapper .gform_footer input[type="submit"]:hover:not([disabled]),
.co-assessment-form_wrapper .gform_footer button.gform_button:hover:not([disabled]),
.co-assessment-form_wrapper .gform_next_button:hover:not([disabled]) {
    background: #5a9440;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(109, 170, 79, 0.3);
}

.co-assessment-form_wrapper .gform_footer input[type="submit"]:active:not([disabled]),
.co-assessment-form_wrapper .gform_next_button:active:not([disabled]) {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(109, 170, 79, 0.2);
}

/* Secondary — Back */
.co-assessment-form_wrapper .gform_previous_button {
    order: -1;
    background: #ffffff;
    color: #003658;
    border: 1.5px solid #e0e8e3;
    box-shadow: none;
}

.co-assessment-form_wrapper .gform_previous_button:hover {
    border-color: #c5d4cc;
    background: #f8fafc;
    color: #003658;
}

/* Disabled state used by the gating script */
.co-assessment-form_wrapper .gform_footer input[type="submit"][disabled],
.co-assessment-form_wrapper .gform_footer button[disabled],
.co-assessment-form_wrapper .gform_next_button[disabled] {
    background: #dbe3ea;
    color: #96a3b0;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

/* Gating hint */
.co-assessment-form_wrapper .co-submit-hint {
    flex: 1 1 100%;
    width: 100%;
    order: 10;
    margin: 4px 0 0;
    font-size: 13px;
    color: #6B7280;
    text-align: center;
    font-family: 'Sofia Pro', sans-serif;
}

.co-assessment-form_wrapper .co-submit-hint.is-ready {
    color: #6DAA4F;
    font-weight: 600;
}

/* ── Confirmation ──────────────────────────────────────────────────── */
.co-assessment-confirmation {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #e8edf0;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 54, 88, 0.05), 0 5px 15px rgba(0, 0, 0, 0.02);
    padding: 40px;
    text-align: center;
    font-family: 'Sofia Pro', sans-serif;
}

.co-assessment-confirmation h2 {
    font-size: 24px;
    font-weight: 600;
    color: #003658;
    margin: 0 0 14px;
}

.co-assessment-confirmation p {
    font-size: 15px;
    line-height: 1.7;
    color: #555555;
    margin: 0 0 10px;
}

/* ==========================================================================
   HOMEPAGE CTA BUTTON
   ========================================================================== */

.co-assessment-cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-family: 'Sofia Pro', sans-serif;
}

.co-assessment-cta--center {
    align-items: center;
    text-align: center;
}

.co-assessment-cta--left {
    align-items: flex-start;
    text-align: left;
}

.co-assessment-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    font-family: 'Sofia Pro', sans-serif;
    color: #ffffff;
    background: #6DAA4F;
    text-decoration: none;
    border: none;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(109, 170, 79, 0.2);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.co-assessment-cta__btn:hover,
.co-assessment-cta__btn:focus-visible {
    color: #ffffff;
    background: #5a9440;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(109, 170, 79, 0.3);
}

.co-assessment-cta__btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(109, 170, 79, 0.2);
}

.co-assessment-cta__btn--navy {
    background: #003658;
    box-shadow: 0 4px 12px rgba(0, 54, 88, 0.2);
}

.co-assessment-cta__btn--navy:hover,
.co-assessment-cta__btn--navy:focus-visible {
    background: #002a45;
    box-shadow: 0 8px 20px rgba(0, 54, 88, 0.3);
}

.co-assessment-cta__arrow {
    flex: 0 0 auto;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.co-assessment-cta__btn:hover .co-assessment-cta__arrow {
    transform: translateX(4px);
}

.co-assessment-cta__note {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #6B7280;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
    .co-assessment-form_wrapper {
        padding: 32px 24px;
    }

    .co-assessment-form_wrapper .gfield.co-third {
        grid-column: span 6;
    }

    .co-assessment-form_wrapper .gf_step_label {
        display: none;
    }

    .co-assessment-form_wrapper .gf_step {
        flex: 0 0 auto;
    }

    .co-assessment-form_wrapper .gf_page_steps {
        justify-content: space-between;
    }
}

@media (max-width: 640px) {
    .co-assessment-form_wrapper {
        padding: 30px 20px;
        border-radius: 16px;
    }

    .co-assessment-form_wrapper .gform_title {
        font-size: 22px;
    }

    .co-assessment-form_wrapper .gf_page_steps {
        gap: 6px;
        margin-bottom: 24px;
        padding-bottom: 18px;
    }

    .co-assessment-form_wrapper .gf_step_number {
        width: 24px;
        height: 24px;
        font-size: 11.5px;
    }

    /* Single column everywhere */
    .co-assessment-form_wrapper .gfield.co-half,
    .co-assessment-form_wrapper .gfield.co-third {
        grid-column: 1 / -1;
    }

    .co-assessment-form_wrapper .co-choice-cards .gfield_checkbox {
        grid-template-columns: 1fr;
    }

    .co-assessment-form_wrapper .co-inline-choices .gchoice {
        flex: 1 1 calc(50% - 5px);
    }

    .co-assessment-form_wrapper .co-inline-choices .gchoice label {
        min-width: 0;
        width: 100%;
        padding: 13px 10px;
    }

    /* 16px minimum stops iOS Safari zooming on focus */
    .co-assessment-form_wrapper input[type="text"],
    .co-assessment-form_wrapper input[type="email"],
    .co-assessment-form_wrapper input[type="tel"],
    .co-assessment-form_wrapper input[type="number"],
    .co-assessment-form_wrapper input[type="date"],
    .co-assessment-form_wrapper select,
    .co-assessment-form_wrapper textarea {
        font-size: 16px;
    }

    .co-assessment-form_wrapper .co-consent-item {
        padding: 14px 14px;
    }

    .co-assessment-form_wrapper .co-consent-item .gchoice label {
        font-size: 13.5px;
    }

    .co-assessment-form_wrapper .co-upload input[type="file"] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 16px 14px;
        min-height: 0;
        text-align: center;
    }

    .co-assessment-form_wrapper .co-upload input[type="file"]::file-selector-button {
        width: 100%;
        margin: 0;
    }

    /* Buttons stack: primary on top, Back beneath, centered */
    .co-assessment-form_wrapper .gform_footer,
    .co-assessment-form_wrapper .gform_page_footer {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .co-assessment-form_wrapper .gform_footer input[type="submit"],
    .co-assessment-form_wrapper .gform_footer button,
    .co-assessment-form_wrapper .gform_page_footer input[type="submit"],
    .co-assessment-form_wrapper .gform_page_footer button,
    .co-assessment-form_wrapper .gform_next_button,
    .co-assessment-form_wrapper .gform_previous_button {
        width: 100%;
        max-width: 280px;
    }

    .co-assessment-form_wrapper .gform_previous_button {
        order: 1;
    }

    .co-assessment-cta {
        align-items: stretch;
    }

    .co-assessment-cta__btn {
        width: 100%;
    }

    .co-assessment-confirmation {
        padding: 30px 20px;
        border-radius: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .co-assessment-form_wrapper *,
    .co-assessment-cta * {
        transition: none !important;
        transform: none !important;
    }
}