/*
 * Gravity Word Docs — Frontend Gravity Forms styling.
 *
 * Aligns Gravity Forms (Orbital theme, GF 2.9+) with the Care Together
 * design system:
 *   - $pink   #731944  (primary / focus / link)
 *   - $yellow #f6ca67  (CTA background)
 *   - $gray4  #a7a7a7  (input border idle)
 *   - $red    #b20000  (validation error)
 *   - "URW DIN", sans-serif (loaded globally by the child theme)
 *
 * Conventions:
 *   - Scope under .gform_wrapper (and .gwd-draft-list) so the plugin never
 *     leaks styles outside the form.
 *   - GF 2.9 wraps forms with class `.gform-theme--orbital`. Older `.gravity-theme`
 *     legacy class is also matched for back-compat.
 *   - Tokens are exposed as CSS custom properties so a child theme can re-skin
 *     everything without copying selectors.
 *   - Use of !important is intentional and limited to selectors where Orbital
 *     and Flatsome already ship !important / high-specificity rules
 *     (input height, button background, font sizes).
 */

/* ------------------------------------------------------------------------ *
 *  Design tokens
 * ------------------------------------------------------------------------ */
.gform_wrapper,
.gwd-draft-list {
    --gwd-pink:       #731944;
    --gwd-pink-soft:  rgba(115, 25, 68, 0.15);
    --gwd-yellow:     #f6ca67;
    --gwd-yellow-dk:  #e8b94c;
    --gwd-black:      #000;
    --gwd-white:      #fff;
    --gwd-gray-1:     #f5f5f5;
    --gwd-gray-3:     #d1d1d1;
    --gwd-gray-4:     #a7a7a7;
    --gwd-gray-6:     #666;
    --gwd-gray-8:     #333;
    --gwd-red:        #b20000;
    --gwd-red-soft:   #fff3f3;
    --gwd-green:      #2c8a3a;
    --gwd-green-soft: #f0f8f1;

    --gwd-font:       "URW DIN", "Helvetica Neue", Arial, sans-serif;
    --gwd-radius:     5px;
    --gwd-input-h:    46px;
    --gwd-gap:        25px;
    --gwd-gap-lg:     33px;
}

/* ------------------------------------------------------------------------ *
 *  Form container
 * ------------------------------------------------------------------------ */
.gform_wrapper {
    font-family: var(--gwd-font);
    color: var(--gwd-gray-8);
}

/* Removed in v1.32.3 — `.gform-body` / `.gform_body` panel styling (light grey
 * background, 40px padding, border, radius) created a "nested card" look that
 * felt visually noisy once every section moved into accordions, which already
 * have their own card chrome. Accordions are now the only container that
 * carries surface styling; the form body itself stays transparent and
 * inherits page background. */

/* ------------------------------------------------------------------------ *
 *  Headings inside the form
 *
 *  Type scale anchored to body text (20px). Form context is data-entry, not
 *  display — theme's global h* (60/50/40/30) overwhelm inputs and dwarf the
 *  field labels they're meant to introduce. We rescale to a tighter range:
 *
 *    h1: 42  (display, rare)
 *    h2: 34  (form section break — used by .gform_title)
 *    h3: 28  (sub-description / .gsection_title)
 *    h4: 24  weight 600
 *    h5: 22  weight 400
 *    h6: 22  weight 300
 *
 *  Hierarchy below: field label = 28px / 800. Label = h3 by size but heavier
 *  by weight (800 vs 700), so the row anchor still wins when admins insert
 *  h3 sub-descriptions inside .gfield_description. Accordion title (section
 *  anchor) lives in the accordion plugin CSS at 34px — equivalent to h2 — so
 *  an accordion section reads as a full form section.
 *
 *  Mobile scale-down keeps the ratios proportional.
 * ------------------------------------------------------------------------ */
.gform_wrapper h1,
.gform_wrapper h2,
.gform_wrapper h3,
.gform_wrapper h4,
.gform_wrapper h5,
.gform_wrapper h6 {
    margin-top: 0;
    margin-bottom: 16px;
    font-family: var(--gwd-font) !important;
    color: var(--gwd-pink) !important;
    line-height: 1.2 !important;
}

.gform_wrapper h1 { font-size: 42px !important; font-weight: 900 !important; }
.gform_wrapper h2 { font-size: 34px !important; font-weight: 800 !important; }
.gform_wrapper h3 { font-size: 28px !important; font-weight: 700 !important; }
.gform_wrapper h4 { font-size: 24px !important; font-weight: 600 !important; }
.gform_wrapper h5 { font-size: 22px !important; font-weight: 400 !important; }
.gform_wrapper h6 { font-size: 22px !important; font-weight: 300 !important; text-transform: none; letter-spacing: 0; }

@media (max-width: 1168px) {
    .gform_wrapper h1 { font-size: 36px !important; }
    .gform_wrapper h2 { font-size: 30px !important; }
    .gform_wrapper h3 { font-size: 26px !important; }
    .gform_wrapper h4 { font-size: 22px !important; }
    .gform_wrapper h5 { font-size: 20px !important; }
    .gform_wrapper h6 { font-size: 20px !important; }
}

@media (max-width: 992px) {
    .gform_wrapper h1 { font-size: 32px !important; }
    .gform_wrapper h2 { font-size: 28px !important; }
}

/* Form title (`.gform_title`) is rendered as an <h2> by Gravity Forms;
 * picks up the h2 scale above (34px). Section divider title (`.gsection_title`)
 * is rendered as an <h3>; picks up the h3 scale (28px). No extra overrides. */

/* ------------------------------------------------------------------------ *
 *  Field row (gfield)
 * ------------------------------------------------------------------------ */
.gform_wrapper .gfield {
    margin-bottom: var(--gwd-gap);
}

.gform_wrapper .gfield:not(.label-no__line) > .gfield_label,
.gform_wrapper .gfield:not(.label-no__line) > .ginput_container ~ .gfield_label {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    padding-bottom: 0.3em;
    display: block;
}

.gform_wrapper .gfield_label,
.gform_wrapper .gform-field-label {
    font-family: var(--gwd-font) !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--gwd-gray-8) !important;
    margin-bottom: 12px;
    line-height: 1.3;
}

/* Label ≥ h3 by design: in rows that contain rich-content descriptions
 * (admin-inserted h3 inside .gfield_description), the field label still
 * needs to read as the row anchor. Label is the same size as h3 (28px)
 * but heavier (800 vs 700) and uses the dark body colour instead of the
 * brand pink, so it visually wins without exceeding the scale. */

@media (max-width: 1024px) {
    .gform_wrapper .gfield_label,
    .gform_wrapper .gform-field-label { font-size: 26px !important; }
}
@media (max-width: 768px)  {
    .gform_wrapper .gfield_label,
    .gform_wrapper .gform-field-label { font-size: 22px !important; }
}

/* "(Required)" marker after the label.
 *
 * Orbital ships `.gfield_required_text { font-size: 12px; font-weight: 500 }`
 * which reads as a whisper next to a 22px/700 label. Pump it up so it's
 * legible as a real warning without screaming louder than the field name. */
.gform_wrapper .gfield_required,
.gform_wrapper .gfield_required .gfield_required_text {
    color: var(--gwd-pink) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0;
    margin-left: 8px !important;
    /* Force a real space between the label text and "(Required)" — the
     * outer <span> sits directly after the text node with no whitespace
     * in the markup, so margin-left alone leaves them visually touching
     * because the marker collapses into the preceding glyph's right side. */
}

.gform_wrapper .gfield_label > .gfield_required::before {
    content: " ";
    /* Real whitespace, not styled — keeps copy-paste sensible and ensures
     * a word break between the label text and the marker. */
}

@media (max-width: 1168px) {
    .gform_wrapper .gfield_required,
    .gform_wrapper .gfield_required .gfield_required_text {
        font-size: 16px !important;
    }
}

/* Section divider field
 *
 * Plugin uses border-TOP (pink, 2px) as the visual section break.
 * Orbital theme's default applies border-block-end + padding-block-end on
 * `.gfield--type-section` which adds a second line below the section title
 * and stacks padding on the wrong edge. Reset both to 0 using Orbital's
 * own selector (matches specificity exactly, no !important needed). */
.gform_wrapper .gsection {
    border-top: 2px solid var(--gwd-pink);
    padding-top: 18px;
    margin-top: 32px;
    margin-bottom: 8px;
}

.gform-theme--framework:where(:not(.gform_editor)) .gfield--type-section {
    border-block-end: 0;
    padding-block-end: 0;
}

.gform_wrapper .gsection .gsection_title {
    /* Font-size/weight/family/color come from the h3 rule above
     * (matches site `@mixin heading-3`: 40 → 35 @≤1168). */
    margin: 0 0 6px !important;
    border: 0 !important;
    padding: 0 !important;
}

/* HTML / description / instruction blocks
 *
 * Matches the child theme's `@mixin rte` (used by `.custom-rte` and
 * `@mixin text-4`): 20px desktop, 16px at ≤1168px. Orbital ships
 * `.gfield_description { font-size: 20px !important }` which is already
 * the desktop value, but we re-declare with !important so the responsive
 * step down kicks in (Orbital's !important would otherwise pin 20px). */
.gform_wrapper .gfield_description,
.gform_wrapper .top_label .gsection_description,
.gform_wrapper .gfield_html {
    font-family: var(--gwd-font) !important;
    font-size: 20px !important;
    line-height: 1.7 !important; /* $line-height-2 */
    color: var(--gwd-gray-8);
}

@media (max-width: 1168px) {
    .gform_wrapper .gfield_description,
    .gform_wrapper .top_label .gsection_description,
    .gform_wrapper .gfield_html {
        font-size: 16px !important;
    }
}

.gform_wrapper .gfield_description p,
.gform_wrapper .gfield_html p {
    margin: 0 0 12px;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

.gform_wrapper .gfield_description p:last-child,
.gform_wrapper .gfield_html p:last-child {
    margin-bottom: 0;
}

.gform_wrapper .gfield_description strong,
.gform_wrapper .gfield_html strong {
    color: var(--gwd-pink);
    font-weight: 700;
}

.gform_wrapper .gfield_description a,
.gform_wrapper .gfield_html a {
    color: var(--gwd-pink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.gform_wrapper .gfield_description a:hover,
.gform_wrapper .gfield_html a:hover {
    color: var(--gwd-black);
    background: var(--gwd-yellow);
    text-decoration: none;
}

/* ------------------------------------------------------------------------ *
 *  Lists (ul / ol) — Orbital strips list-style; restore comprehensively
 * ------------------------------------------------------------------------ */

/* Restore list rendering inside descriptions. Sizes inherit from the
 * `.gfield_description` block above (20px desktop / 16px ≤1168) so paragraphs
 * and lists in the same description stay visually consistent. Markers and
 * nested list-style match the child theme's `@mixin rte`.
 *
 * Selector scope: we cover all the places admins paste rich text into a
 * Gravity Forms field — descriptions, HTML field bodies, Section headers'
 * descriptions, and the legend/sublabel slots. Anything outside these
 * containers (e.g. Choice lists, checkbox/radio groups) keeps its own
 * styling because it's matched by more specific rules elsewhere.
 *
 * IMPORTANT: we do NOT override `list-style-type` if the markup carries an
 * inline `style="list-style-type: …"` from the WP editor. That's how authors
 * pick upper-alpha or lower-roman per list. We restore the *default* per
 * nesting depth and let inline styles win via cascade (inline > rule with
 * !important on a property is still inline-wins when both use !important;
 * but here the inline has no !important so we use lower specificity for
 * list-style-type so authored choices stick). */

/* Container reset — margins, padding, position, typography. These don't
 * conflict with inline styles. */
.gform_wrapper .gfield_description ul,
.gform_wrapper .gfield_description ol,
.gform_wrapper .gfield_html ul,
.gform_wrapper .gfield_html ol,
.gform_wrapper .gsection_description ul,
.gform_wrapper .gsection_description ol,
.gform_wrapper .gfield > .gfield_label + .ginput_container ul,
.gform_wrapper .gfield > .gfield_label + .ginput_container ol {
    margin: 0 0 16px !important;
    padding-left: 28px !important;
    list-style-position: outside !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}

/* Default markers per nesting depth — NO !important so inline
 * `style="list-style-type: …"` from the WP editor wins. */
.gform_wrapper .gfield_description ul,
.gform_wrapper .gfield_html ul,
.gform_wrapper .gsection_description ul {
    list-style-type: disc;
}
.gform_wrapper .gfield_description ul ul,
.gform_wrapper .gfield_html ul ul,
.gform_wrapper .gsection_description ul ul {
    list-style-type: circle;
}
.gform_wrapper .gfield_description ul ul ul,
.gform_wrapper .gfield_html ul ul ul,
.gform_wrapper .gsection_description ul ul ul {
    list-style-type: square;
}

.gform_wrapper .gfield_description ol,
.gform_wrapper .gfield_html ol,
.gform_wrapper .gsection_description ol {
    list-style-type: decimal;
}
.gform_wrapper .gfield_description ol ol,
.gform_wrapper .gfield_html ol ol,
.gform_wrapper .gsection_description ol ol {
    list-style-type: lower-alpha;
}
.gform_wrapper .gfield_description ol ol ol,
.gform_wrapper .gfield_html ol ol ol,
.gform_wrapper .gsection_description ol ol ol {
    list-style-type: lower-roman;
}

/* List items — force display:list-item so markers render even if a
 * theme reset set them to block. Also reset list-style-type to inherit
 * because some theme resets (e.g. Flatsome child) set
 * `li, ol, ul { list-style: none }`, which silently disables the
 * marker on <li> regardless of what <ol>/<ul> declares. We use
 * !important here so the cascade can't reach back in and kill it. */
.gform_wrapper .gfield_description li,
.gform_wrapper .gfield_html li,
.gform_wrapper .gsection_description li {
    margin-bottom: 6px;
    padding-left: 4px;
    display: list-item !important;
    list-style-type: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}

.gform_wrapper .gfield_description li::marker,
.gform_wrapper .gfield_html li::marker,
.gform_wrapper .gsection_description li::marker {
    color: var(--gwd-pink);
    font-weight: 700;
}

.gform_wrapper .gfield_description li:last-child,
.gform_wrapper .gfield_html li:last-child,
.gform_wrapper .gsection_description li:last-child {
    margin-bottom: 0;
}

/* Nested lists — tighter rhythm */
.gform_wrapper .gfield_description li > ul,
.gform_wrapper .gfield_description li > ol,
.gform_wrapper .gfield_html li > ul,
.gform_wrapper .gfield_html li > ol,
.gform_wrapper .gsection_description li > ul,
.gform_wrapper .gsection_description li > ol {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
}

/* ------------------------------------------------------------------------ *
 *  Rich-text fallback for nested HTML inside descriptions
 *
 *  Orbital ships an aggressive `all: unset; display: revert` reset on most
 *  descendants of `.gform-theme--framework`. Its whitelist (e.g.
 *  `.gfield_description > *`) only protects DIRECT children — so authors
 *  who paste rich HTML (h3 > strong, ul > li > strong, p > em, p > a)
 *  see anything nested deeper than one level go flat.
 *
 *  Restore the common inline + block tags everywhere we host author HTML:
 *  field descriptions, HTML fields, section descriptions, the legacy
 *  `.gform_confirmation_message` block, and form heading copy.
 *
 *  `:where(...)` keeps specificity at (0,1,0) so existing GWD rules above
 *  (font-family, color, etc.) still win where they're set; this just
 *  un-blanks the browser defaults the reset took away.
 * ------------------------------------------------------------------------ */
.gform_wrapper .gfield_description :where(strong, b, em, i, u, s, mark, small, sub, sup, code, kbd, samp, var, abbr, cite, q, time, br, a, span),
.gform_wrapper .gfield_html        :where(strong, b, em, i, u, s, mark, small, sub, sup, code, kbd, samp, var, abbr, cite, q, time, br, a, span),
.gform_wrapper .gsection_description :where(strong, b, em, i, u, s, mark, small, sub, sup, code, kbd, samp, var, abbr, cite, q, time, br, a, span),
.gform_wrapper .gform_heading        :where(strong, b, em, i, u, s, mark, small, sub, sup, code, kbd, samp, var, abbr, cite, q, time, br, a, span),
.gform_confirmation_message          :where(strong, b, em, i, u, s, mark, small, sub, sup, code, kbd, samp, var, abbr, cite, q, time, br, a, span) {
    all: revert;
}

/* Nested block elements (li, p, h*, blockquote, table) inside the same
 * containers — bring back default display + spacing. */
.gform_wrapper .gfield_description :where(li, p, h1, h2, h3, h4, h5, h6, blockquote, table, thead, tbody, tr, th, td, figure, figcaption, hr, dl, dt, dd),
.gform_wrapper .gfield_html        :where(li, p, h1, h2, h3, h4, h5, h6, blockquote, table, thead, tbody, tr, th, td, figure, figcaption, hr, dl, dt, dd),
.gform_wrapper .gsection_description :where(li, p, h1, h2, h3, h4, h5, h6, blockquote, table, thead, tbody, tr, th, td, figure, figcaption, hr, dl, dt, dd),
.gform_confirmation_message          :where(li, p, h1, h2, h3, h4, h5, h6, blockquote, table, thead, tbody, tr, th, td, figure, figcaption, hr, dl, dt, dd) {
    all: revert;
}

/* Anchor color inside descriptions — keep brand pink without touching the
 * GWD pre-styled `.gfield_html a` rule above. */
.gform_wrapper .gfield_description a,
.gform_wrapper .gsection_description a,
.gform_confirmation_message a {
    color: var(--gwd-pink);
    text-decoration: underline;
}

.gform_wrapper .gfield_description a:hover,
.gform_wrapper .gsection_description a:hover,
.gform_confirmation_message a:hover {
    color: var(--gwd-black);
}

/* "My Drafts" shortcode list */
.gwd-draft-list ul,
.gwd-draft-list ol {
    margin: 0 0 16px;
    padding-left: 28px;
    list-style-position: outside;
    font-family: var(--gwd-font);
    font-size: 16px;
    line-height: 1.6;
}

.gwd-draft-list ul   { list-style-type: disc; }
.gwd-draft-list ol   { list-style-type: decimal; }
.gwd-draft-list li   { margin-bottom: 8px; padding-left: 4px; }
.gwd-draft-list li::marker { color: var(--gwd-pink); font-weight: 700; }

/* ------------------------------------------------------------------------ *
 *  Inputs / textarea / select
 *
 *  Use high-specificity selectors so we beat both Orbital's :where() rules
 *  AND Flatsome's `input[type=text]` global form reset (height 2.507em).
 * ------------------------------------------------------------------------ */
.gform_wrapper .gfield input[type="text"],
.gform_wrapper .gfield input[type="email"],
.gform_wrapper .gfield input[type="url"],
.gform_wrapper .gfield input[type="tel"],
.gform_wrapper .gfield input[type="number"],
.gform_wrapper .gfield input[type="password"],
.gform_wrapper .gfield input[type="search"],
.gform_wrapper .gfield input[type="date"],
.gform_wrapper .gfield input[type="datetime-local"],
.gform_wrapper .gfield input[type="time"],
.gform_wrapper .ginput_container input[type="text"],
.gform_wrapper .ginput_container input[type="email"],
.gform_wrapper .ginput_container input[type="url"],
.gform_wrapper .ginput_container input[type="tel"],
.gform_wrapper .ginput_container input[type="number"] {
    width: 100% !important;
    height: var(--gwd-input-h) !important;
    padding: 0 20px !important;
    border: 1px solid var(--gwd-gray-4) !important;
    border-radius: var(--gwd-radius) !important;
    background-color: var(--gwd-white);
    font-family: var(--gwd-font) !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
    color: var(--gwd-gray-8) !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

/* Select dropdowns — auto width (sized to content), vertically centered.
 *
 *   Why width: auto instead of 100%? A native <select> shows the *current*
 *   option, not a free-form input. Forcing 100% wastes horizontal space and
 *   makes short option strings look stranded inside a wide box.
 *
 *   Why padding 10/20 instead of 0/20 for inputs? Native <select> doesn't
 *   honour line-height for vertical centering the way <input> does — the
 *   text glues to the top of the box. Equal top/bottom padding pushes the
 *   browser to center the content. */
.gform_wrapper .gfield select,
.gform_wrapper .ginput_container select {
    width: auto !important;
    min-width: 240px;
    max-width: 100%;
    height: var(--gwd-input-h) !important;
    padding: 10px 44px 10px 20px !important; /* extra right padding for the chevron */
    border: 1px solid var(--gwd-gray-4) !important;
    border-radius: var(--gwd-radius) !important;
    background-color: var(--gwd-white);
    font-family: var(--gwd-font) !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
    color: var(--gwd-gray-8) !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.gform_wrapper .gfield textarea,
.gform_wrapper .ginput_container textarea {
    width: 100% !important;
    min-height: 207px !important;
    height: auto !important;
    padding: 14px 20px !important;
    border: 1px solid var(--gwd-gray-4) !important;
    border-radius: var(--gwd-radius) !important;
    background-color: var(--gwd-white);
    font-family: var(--gwd-font) !important;
    font-size: 18px !important;
    line-height: 1.55 !important;
    color: var(--gwd-gray-8) !important;
    margin-bottom: var(--gwd-gap-lg);
    resize: vertical;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

@media (max-width: 768px) {
    .gform_wrapper .gfield input[type="text"],
    .gform_wrapper .gfield input[type="email"],
    .gform_wrapper .gfield input[type="url"],
    .gform_wrapper .gfield input[type="tel"],
    .gform_wrapper .gfield input[type="number"],
    .gform_wrapper .gfield input[type="password"],
    .gform_wrapper .gfield input[type="search"],
    .gform_wrapper .gfield input[type="date"],
    .gform_wrapper .gfield select,
    .gform_wrapper .gfield textarea {
        font-size: 16px !important;
    }
}

/* Custom select chevron */
.gform_wrapper .gfield select,
.gform_wrapper .ginput_container select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23731944' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 18px center !important;
    background-size: 12px 8px !important;
    padding-right: 44px !important;
    cursor: pointer;
}

/* Hover */
.gform_wrapper .gfield input:hover,
.gform_wrapper .gfield select:hover,
.gform_wrapper .gfield textarea:hover {
    border-color: var(--gwd-pink) !important;
}

/* Focus */
.gform_wrapper .gfield input:focus,
.gform_wrapper .gfield select:focus,
.gform_wrapper .gfield textarea:focus {
    border-color: var(--gwd-pink) !important;
    box-shadow: 0 0 0 3px var(--gwd-pink-soft) !important;
    outline: 0 !important;
}

/* Placeholder */
.gform_wrapper .gfield input::placeholder,
.gform_wrapper .gfield textarea::placeholder {
    color: var(--gwd-gray-4);
    opacity: 1;
}

/* Disabled */
.gform_wrapper .gfield input:disabled,
.gform_wrapper .gfield select:disabled,
.gform_wrapper .gfield textarea:disabled {
    background-color: var(--gwd-gray-1) !important;
    color: var(--gwd-gray-4) !important;
    cursor: not-allowed;
}

/* ------------------------------------------------------------------------ *
 *  Checkbox & radio
 * ------------------------------------------------------------------------ */
.gform_wrapper .gfield_checkbox,
.gform_wrapper .gfield_radio {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gform_wrapper .gfield_checkbox .gchoice,
.gform_wrapper .gfield_radio .gchoice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
}

.gform_wrapper .gfield_checkbox input[type="checkbox"],
.gform_wrapper .gfield_radio input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    margin: 2px 0 0 !important;
    accent-color: var(--gwd-pink);
    cursor: pointer;
    flex-shrink: 0;
    -webkit-appearance: auto;
    appearance: auto;
}

.gform_wrapper .gfield_checkbox label,
.gform_wrapper .gfield_radio label {
    font-family: var(--gwd-font) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5;
    color: var(--gwd-gray-8) !important;
    cursor: pointer;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* ------------------------------------------------------------------------ *
 *  Validation / errors
 * ------------------------------------------------------------------------ */
/* Field error state.
 *
 * The normal input rule uses an attribute selector
 *   .gform_wrapper .gfield input[type="text"] { border: 1px solid var(--gwd-gray-4) !important }
 * which beats `.gform_wrapper .gfield_error input` on specificity
 * (0,2,2 > 0,2,1). We match the attribute-selector form so the error
 * border wins, and double up the .gfield_error class for headroom. */
.gform_wrapper .gfield_error.gfield input[type="text"],
.gform_wrapper .gfield_error.gfield input[type="email"],
.gform_wrapper .gfield_error.gfield input[type="url"],
.gform_wrapper .gfield_error.gfield input[type="tel"],
.gform_wrapper .gfield_error.gfield input[type="number"],
.gform_wrapper .gfield_error.gfield input[type="password"],
.gform_wrapper .gfield_error.gfield input[type="search"],
.gform_wrapper .gfield_error.gfield input[type="date"],
.gform_wrapper .gfield_error.gfield input[type="time"],
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea {
    border: 1px solid var(--gwd-red) !important;
    background-color: var(--gwd-red-soft) !important;
}

.gform_wrapper .gfield_error.gfield input[type="text"]:focus,
.gform_wrapper .gfield_error.gfield input[type="email"]:focus,
.gform_wrapper .gfield_error.gfield input[type="url"]:focus,
.gform_wrapper .gfield_error.gfield input[type="tel"]:focus,
.gform_wrapper .gfield_error.gfield input[type="number"]:focus,
.gform_wrapper .gfield_error.gfield input[type="password"]:focus,
.gform_wrapper .gfield_error.gfield input[type="search"]:focus,
.gform_wrapper .gfield_error input:focus,
.gform_wrapper .gfield_error select:focus,
.gform_wrapper .gfield_error textarea:focus {
    border-color: var(--gwd-red) !important;
    box-shadow: 0 0 0 3px rgba(178, 0, 0, 0.18) !important;
}

/* ------------------------------------------------------------------------ *
 *  Save & Continue confirmation panel
 *  Markup: <div class="form_saved_message">
 *            <h2>Link to continue editing later</h2>
 *            <p>…</p>
 *            <p class="resume_form_link_wrapper">
 *               <a class="resume_form_link" href="…?gf_token=…">…</a>
 *            </p>
 *            <strong>Note: …</strong>
 *            <div class="form_saved_message_emailform">…</div>
 *          </div>
 * Style as a card; tame the giant h2; make the long URL wrap. */
.gform_wrapper .form_saved_message {
    background: var(--gwd-gray-1) !important;
    border-left: 4px solid var(--gwd-pink) !important;
    border-radius: var(--gwd-radius) !important;
    padding: 24px 28px !important;
    margin: 0 0 24px 0 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: var(--gwd-gray-8) !important;
}

.gform_wrapper .form_saved_message h2 {
    font-family: var(--gwd-font) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: var(--gwd-pink) !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    border: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.gform_wrapper .form_saved_message p {
    margin: 0 0 12px 0 !important;
    font-size: 16px !important;
}

.gform_wrapper .form_saved_message .resume_form_link_wrapper {
    margin: 12px 0 !important;
}

.gform_wrapper .form_saved_message .resume_form_link {
    display: inline-block !important;
    max-width: 100% !important;
    padding: 12px 16px !important;
    background: var(--gwd-white) !important;
    border: 1px solid var(--gwd-gray-4) !important;
    border-radius: var(--gwd-radius) !important;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace !important;
    font-size: 15px !important;                  /* was 13px — readable for older users */
    color: var(--gwd-pink) !important;
    text-decoration: none !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    line-height: 1.5 !important;
}

.gform_wrapper .form_saved_message .resume_form_link:hover,
.gform_wrapper .form_saved_message .resume_form_link:focus {
    background: var(--gwd-pink) !important;
    color: var(--gwd-white) !important;
    border-color: var(--gwd-pink) !important;
    text-decoration: none !important;
}

.gform_wrapper .form_saved_message strong {
    display: block !important;
    margin: 14px 0 18px 0 !important;
    font-size: 16px !important;                  /* was 14px */
    font-weight: 600 !important;
    color: var(--gwd-gray-8) !important;
}

/* Email sub-form inside the save panel */
.gform_wrapper .form_saved_message_emailform {
    margin-top: 16px !important;
    padding-top: 0 !important;                   /* was 16px — no separator above email block */
    border-top: 0 !important;                    /* was 1px solid — removed at user's request */
}

.gform_wrapper .form_saved_message_emailform .gform_resume_email_label {
    font-size: 16px !important;                  /* was 15px — matches body text */
    font-weight: 600 !important;
    color: var(--gwd-gray-8) !important;
    margin-bottom: 8px !important;
    display: block !important;
    border-bottom: 0 !important;                  /* defeat the global .gfield_label underline rule */
    padding-bottom: 0 !important;
}

.gform_wrapper .form_saved_message_emailform input[type="email"] {
    background-color: var(--gwd-white) !important;
    width: 100% !important;
    max-width: 360px !important;
    height: var(--gwd-input-h) !important;
    padding: 0 20px !important;
    border: 1px solid var(--gwd-gray-4) !important;
    border-radius: var(--gwd-radius) !important;
    font-family: var(--gwd-font) !important;
    font-size: 16px !important;
    color: var(--gwd-gray-8) !important;
    box-sizing: border-box !important;
}

.gform_wrapper .form_saved_message_emailform .gform_footer {
    margin-top: 12px !important;
    padding: 0 !important;
    border-top: 0 !important;                    /* defeat the global .gform_footer border above the Send Link button */
}

.gform_wrapper .form_saved_message_emailform input[type="submit"] {
    display: inline-block !important;
    height: var(--gwd-input-h) !important;
    padding: 0 24px !important;
    background: var(--gwd-yellow) !important;
    color: #000 !important;
    border: 0 !important;
    border-radius: var(--gwd-radius) !important;
    font-family: var(--gwd-font) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: var(--gwd-input-h) !important;
    cursor: pointer !important;
    transition: background-color 0.15s, color 0.15s !important;
}

.gform_wrapper .form_saved_message_emailform input[type="submit"]:hover,
.gform_wrapper .form_saved_message_emailform input[type="submit"]:focus {
    background: var(--gwd-pink) !important;
    color: var(--gwd-white) !important;
}

/* Field-level validation message — bump from 14px to 15px so it lines
 * up with the rest of the small/meta text, and add a leading icon
 * marker so it reads as an alert, not a stray paragraph. */
.gform_wrapper .validation_message,
.gform_wrapper .gfield_validation_message {
    display: flex !important;
    align-items: flex-start !important;
    gap: 6px !important;
    color: var(--gwd-red) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 8px 0 0 0 !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

.gform_wrapper .validation_message::before,
.gform_wrapper .gfield_validation_message::before {
    content: "" !important;
    flex: 0 0 auto !important;
    width: 14px !important;
    height: 14px !important;
    margin-top: 3px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b20000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='13'/><circle cx='12' cy='16.5' r='0.6' fill='%23b20000' stroke='none'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

/* Submission error banner.
 *
 * GF 2.9 wraps the message in:
 *   <div class="gform_validation_errors">       ← real container (default: 1px ring + pink bg)
 *     <h2 class="gform_submission_error">…</h2>  ← message (default: <h2>, picks up h2 50px rule)
 *   </div>
 *
 * We style the wrapper as the alert container (border-left + bg), and
 * neutralise the inner <h2> so it doesn't render at heading scale and
 * doesn't add a second nested border. */
.gform_wrapper .gform_validation_errors {
    background: var(--gwd-red-soft) !important;
    border: 0 !important;
    border-left: 4px solid var(--gwd-red) !important;
    border-radius: var(--gwd-radius) !important;
    padding: 14px 18px !important;
    margin: 0 0 20px 0 !important;
    color: var(--gwd-red) !important;
}

.gform_wrapper h2.gform_submission_error,
.gform_wrapper .gform_submission_error,
.gform_wrapper .validation_error {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--gwd-red) !important;
    padding: 0 !important;
    font-family: var(--gwd-font) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    text-transform: none !important;
    margin: 0 !important;
}

/* Standalone .validation_error (without the wrapper div on some forms)
 * still needs its own bg + left rule. */
.gform_wrapper .validation_error:not(.gform_validation_errors *) {
    background: var(--gwd-red-soft) !important;
    border-left: 4px solid var(--gwd-red) !important;
    border-radius: var(--gwd-radius) !important;
    padding: 14px 18px !important;
    margin: 0 0 20px 0 !important;
}

/* Replace the built-in icon span (which renders blank without GF's icon
 * font) with our own inline SVG via background-image. */
.gform_wrapper .gform_submission_error .gform-icon,
.gform_wrapper .gform_submission_error .gform-icon--circle-error,
.gform_wrapper .validation_error .gform-icon,
.gform_wrapper .validation_error .gform-icon--circle-error {
    flex: 0 0 auto !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b20000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='13'/><circle cx='12' cy='16.5' r='0.6' fill='%23b20000' stroke='none'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

.gform_wrapper .gform_submission_error .gform-icon::before,
.gform_wrapper .gform_submission_error .gform-icon::after,
.gform_wrapper .validation_error .gform-icon::before,
.gform_wrapper .validation_error .gform-icon::after {
    content: none !important;
    display: none !important;
}

/* hide_summary modifier — same look, no bullet list of fields below. */
.gform_wrapper .gform_submission_error.hide_summary + ul,
.gform_wrapper .gform_submission_error.hide_summary ~ .gform_validation_errors {
    display: none !important;
}

/* ------------------------------------------------------------------------ *
 *  Confirmation message
 *
 *  GF sometimes wraps the confirmation in BOTH `.gform_confirmation_wrapper`
 *  AND a nested `.gform_confirmation_message` — applying card chrome to both
 *  produces two stacked green border-lefts ("border lồng nhau"). We style the
 *  outer wrapper as the card and reset the inner message when nested.
 * ------------------------------------------------------------------------ */
.gform_confirmation_message,
.gform_confirmation_wrapper {
    background: var(--gwd-green-soft);
    border-left: 4px solid var(--gwd-green);
    padding: 20px 24px;
    border-radius: var(--gwd-radius);
    font-family: var(--gwd-font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--gwd-gray-8);
}

/* When the message is nested inside the wrapper, drop the inner card chrome
 * so we don't render two borders + two backgrounds stacked on each other. */
.gform_confirmation_wrapper .gform_confirmation_message {
    background: transparent;
    border-left: 0;
    padding: 0;
    border-radius: 0;
}

/* ------------------------------------------------------------------------ *
 *  Confirmation message — typography hierarchy
 *
 *  Client feedback (post-launch 2026-05-26): "Congratulations" heading too
 *  small, spacing above/below the two <h3> headings feels uneven, and the
 *  closing call-to-action ("You should now proceed to draft your Disclosure
 *  Statement.") reads as body copy instead of a directive.
 *
 *  GF sometimes renders confirmation as `.gform_confirmation_wrapper`
 *  WITHOUT merging `.gform_wrapper` (page-reload submit, AJAX confirmation
 *  injected at page root) — so the default h*-scale block at line 89 above
 *  doesn't always apply. Re-state the h3 scale + paragraph rhythm against
 *  both confirmation wrappers directly.
 * ------------------------------------------------------------------------ */
.gform_confirmation_message h3,
.gform_confirmation_wrapper h3 {
    margin-top: 0;
    margin-bottom: 16px;
    font-family: var(--gwd-font) !important;
    color: var(--gwd-pink) !important;
    line-height: 1.2 !important;
    font-size: 28px !important;
    font-weight: 700 !important;
}

@media (max-width: 1168px) {
    .gform_confirmation_message h3,
    .gform_confirmation_wrapper h3 {
        font-size: 26px !important;
    }
}

/* Second + subsequent <h3> ("Next steps: ...") needs a larger top gap so it
 * reads as a section break, not a continuation of the paragraph above. */
.gform_confirmation_message h3 ~ h3,
.gform_confirmation_wrapper h3 ~ h3 {
    margin-top: 32px;
}

/* Paragraph rhythm — explicit so we don't depend on browser defaults that
 * Orbital's reset already nuked once. */
.gform_confirmation_message p,
.gform_confirmation_wrapper p {
    margin: 0 0 14px;
}

/* Closing CTA — last meaningful content in the confirmation message. The
 * message often renders WITHOUT <p> wrappers (wpautop is suppressed by
 * Orbital/GF theme on confirmation output — content sits as direct h3 + br
 * chain + inline elements), so the CTA lands as a bare `<strong>` as the
 * last child. Target both the wrapped and unwrapped forms. */
.gform_confirmation_message > strong:last-child,
.gform_confirmation_wrapper > strong:last-child,
.gform_confirmation_wrapper .gform_confirmation_message > strong:last-child,
.gform_confirmation_message > p:last-child strong,
.gform_confirmation_wrapper > p:last-child strong,
.gform_confirmation_wrapper .gform_confirmation_message > p:last-child strong {
    display: inline-block;
    font-size: 18px;
    line-height: 1.5;
}

/* ------------------------------------------------------------------------ *
 *  Download button (generated by form-processor.php for {DOWNLOAD_BTN}).
 *
 *  Rendered as `<a class="gwd-download-btn" data-gwd-download>` — we own the
 *  full selector so Flatsome's generic `a.button` and `.button-primary` rules
 *  can't bleed in. Tokens are duplicated on the element itself because the
 *  confirmation may render outside `.gform_wrapper` (e.g. AJAX confirmation
 *  injected at page-root level).
 * ------------------------------------------------------------------------ */
a.gwd-download-btn {
    /* Self-contained tokens so the button works even when not inside .gform_wrapper */
    --gwd-pink:       #731944;
    --gwd-yellow:     #f6ca67;
    --gwd-yellow-dk:  #e8b94c;
    --gwd-black:      #000;
    --gwd-white:      #fff;
    --gwd-radius:     5px;
    --gwd-font:       "URW DIN", "Helvetica Neue", Arial, sans-serif;

    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 12px 26px !important;
    min-height: 46px;
    box-sizing: border-box;

    background-color: var(--gwd-yellow) !important;
    color: var(--gwd-black) !important;
    border: 2px solid var(--gwd-yellow) !important;
    border-radius: var(--gwd-radius) !important;

    font-family: var(--gwd-font) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    text-decoration: none !important;
    letter-spacing: 0 !important;
    white-space: normal;
    word-break: break-word;
    box-shadow: none !important;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
    cursor: pointer;
}

a.gwd-download-btn:hover,
a.gwd-download-btn:focus {
    background-color: var(--gwd-pink) !important;
    border-color: var(--gwd-pink) !important;
    color: var(--gwd-white) !important;
    text-decoration: none !important;
}

a.gwd-download-btn:focus-visible {
    outline: 2px solid var(--gwd-pink);
    outline-offset: 2px;
}

a.gwd-download-btn:active {
    transform: translateY(1px);
}

a.gwd-download-btn .gwd-download-btn__icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    display: inline-block;
}

a.gwd-download-btn .gwd-download-btn__label {
    display: inline-block;
}

/* ------------------------------------------------------------------------ *
 *  Progress bar (multi-page forms)
 *
 *  GF ships a color-class system: `.gf_progressbar_blue`, `.gf_progressbar_orange`,
 *  `.gf_progressbar_green`, `.gf_progressbar_red`, `.gf_progressbar_custom`,
 *  plus `.percentbar_blue` etc. on the fill. We force-override all of them.
 * ------------------------------------------------------------------------ */
.gform_wrapper .gf_progressbar_wrapper {
    margin-bottom: 30px;
}

.gform_wrapper .gf_progressbar_title {
    font-family: var(--gwd-font) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--gwd-pink) !important;
    margin-bottom: 8px !important;
    text-transform: uppercase !important;
}

.gform_wrapper .gf_progressbar,
.gform_wrapper .gf_progressbar.gf_progressbar_blue,
.gform_wrapper .gf_progressbar.gf_progressbar_orange,
.gform_wrapper .gf_progressbar.gf_progressbar_green,
.gform_wrapper .gf_progressbar.gf_progressbar_red,
.gform_wrapper .gf_progressbar.gf_progressbar_custom {
    background: var(--gwd-gray-1) !important;
    background-color: var(--gwd-gray-1) !important;
    height: 12px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

.gform_wrapper .gf_progressbar_percentage,
.gform_wrapper .gf_progressbar_percentage[class*="percentbar_"],
.gform_wrapper .percentbar_blue,
.gform_wrapper .percentbar_orange,
.gform_wrapper .percentbar_green,
.gform_wrapper .percentbar_red,
.gform_wrapper .percentbar_custom {
    background: var(--gwd-pink) !important;
    background-color: var(--gwd-pink) !important;
    background-image: linear-gradient(90deg, var(--gwd-pink) 0%, #8a2654 100%) !important;
    height: 100% !important;
    color: var(--gwd-white) !important;
    border-radius: 999px !important;
    transition: width 0.3s ease;
    font-family: var(--gwd-font) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 12px !important;
    text-align: right;
    padding: 0 8px;
    box-sizing: border-box;
}

.gform_wrapper .gf_progressbar_percentage span {
    color: var(--gwd-white) !important;
    font-family: var(--gwd-font) !important;
    font-weight: 700 !important;
}

/* ------------------------------------------------------------------------ *
 *  Footer / buttons
 *
 *  GF 2.9 Orbital renders buttons as <button class="gform-theme-button button">,
 *  not <input type=submit>. Both forms covered below.
 * ------------------------------------------------------------------------ */
.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: var(--gwd-gap-lg);
    padding-top: 20px;
    border-top: 0;
}

/* Primary action — yellow CT button. */
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_page_footer input[type="submit"],
.gform_wrapper button.gform_button,
.gform_wrapper button.gform_next_button,
.gform_wrapper .gform-theme-button:not(.gform-theme-button--secondary) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: var(--gwd-input-h) !important;
    min-width: 180px !important;
    padding: 0 28px !important;
    background-color: var(--gwd-yellow) !important;
    background-image: none !important;
    color: var(--gwd-black) !important;
    border: 2px solid var(--gwd-yellow) !important;
    border-radius: var(--gwd-radius) !important;
    font-family: var(--gwd-font) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-transform: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, color 0.2s ease,
                border-color 0.2s ease, transform 0.15s ease,
                box-shadow 0.2s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_page_footer input[type="submit"]:hover,
.gform_wrapper button.gform_button:hover,
.gform_wrapper button.gform_next_button:hover,
.gform_wrapper .gform-theme-button:not(.gform-theme-button--secondary):hover {
    background-color: var(--gwd-pink) !important;
    color: var(--gwd-white) !important;
    border-color: var(--gwd-pink) !important;
    box-shadow: 0 4px 12px rgba(115, 25, 68, 0.25) !important;
}

.gform_wrapper button.gform_button:focus-visible,
.gform_wrapper button.gform_next_button:focus-visible,
.gform_wrapper .gform-theme-button:not(.gform-theme-button--secondary):focus-visible {
    outline: 0 !important;
    box-shadow: 0 0 0 3px var(--gwd-pink-soft) !important;
}

.gform_wrapper button.gform_button:active,
.gform_wrapper button.gform_next_button:active {
    transform: translateY(1px);
}

/* Secondary buttons — Previous / Save and Continue. */
.gform_wrapper button.gform_previous_button,
.gform_wrapper button.gform_save_link,
.gform_wrapper .gform-theme-button--secondary,
.gform_wrapper .gform_previous_button.button,
.gform_wrapper .gform_save_link.button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: var(--gwd-input-h) !important;
    min-width: 160px !important;
    padding: 0 22px !important;
    background-color: var(--gwd-white) !important;
    background-image: none !important;
    color: var(--gwd-pink) !important;
    border: 2px solid var(--gwd-pink) !important;
    border-radius: var(--gwd-radius) !important;
    font-family: var(--gwd-font) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-transform: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, color 0.2s ease,
                box-shadow 0.2s ease !important;
    box-shadow: none !important;
}

.gform_wrapper button.gform_previous_button:hover,
.gform_wrapper button.gform_save_link:hover,
.gform_wrapper .gform-theme-button--secondary:hover {
    background-color: var(--gwd-pink) !important;
    color: var(--gwd-white) !important;
}

/* Kill any icon / decorative pseudo-element inside the Save link.
 * GF 2.9 ships an inline SVG; Flatsome may also inject a ::before/::after
 * via .button. We strip them all so the label is plain text. */
.gform_wrapper .gform_save_link svg,
.gform_wrapper .gform_save_link img,
.gform_wrapper .gform_save_link i,
.gform_wrapper .gform_save_link .dashicons,
.gform_wrapper .gform_save_link [class^="icon-"],
.gform_wrapper .gform_save_link [class*=" icon-"] {
    display: none !important;
}

.gform_wrapper .gform_save_link::before,
.gform_wrapper .gform_save_link::after {
    content: none !important;
    display: none !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ------------------------------------------------------------------------ *
 *  Save & Continue link panel
 * ------------------------------------------------------------------------ */
.gform_save_form_link,
.gform_save_email_link {
    display: inline-block;
    color: var(--gwd-pink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.gform_save_form_link:hover,
.gform_save_email_link:hover {
    color: var(--gwd-black);
    background: var(--gwd-yellow);
    text-decoration: none;
}

/* ------------------------------------------------------------------------ *
 *  "My Drafts" shortcode list
 * ------------------------------------------------------------------------ */
.gwd-draft-list {
    font-family: var(--gwd-font);
    color: var(--gwd-gray-8);
}

.gwd-draft-list .gwd-draft-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: var(--gwd-white);
    border: 1px solid var(--gwd-gray-3);
    border-left: 4px solid var(--gwd-pink);
    border-radius: var(--gwd-radius);
    margin-bottom: 12px;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.gwd-draft-list .gwd-draft-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.gwd-draft-list .gwd-draft-title {
    font-weight: 700;
    color: var(--gwd-pink);
    font-size: 17px;
}

.gwd-draft-list .gwd-draft-meta {
    font-size: 14px;
    color: var(--gwd-gray-6);
}

.gwd-draft-list .gwd-draft-actions {
    display: inline-flex;
    gap: 8px;
}

.gwd-draft-list .gwd-draft-actions a,
.gwd-draft-list .gwd-draft-actions button {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 14px;
    font-family: var(--gwd-font);
    font-size: 14px;
    font-weight: 700;
    border-radius: var(--gwd-radius);
    border: 2px solid var(--gwd-pink);
    background: var(--gwd-white);
    color: var(--gwd-pink);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.gwd-draft-list .gwd-draft-actions a:hover,
.gwd-draft-list .gwd-draft-actions button:hover {
    background: var(--gwd-pink);
    color: var(--gwd-white);
}

.gwd-draft-list .gwd-draft-actions .gwd-draft-delete {
    border-color: var(--gwd-red);
    color: var(--gwd-red);
}

.gwd-draft-list .gwd-draft-actions .gwd-draft-delete:hover {
    background: var(--gwd-red);
    color: var(--gwd-white);
}

.gwd-draft-list .gwd-no-drafts {
    color: var(--gwd-gray-6);
    font-style: italic;
    padding: 16px 0;
}

/* ------------------------------------------------------------------------ *
 *  Draft-list shortcode notices
 *  [gf_list_user_drafts] returns one of:
 *    <p class="gwd-draft-notice gwd-draft-notice--login">…</p>
 *    <p class="gwd-draft-notice gwd-draft-notice--empty">…</p>
 *  Style them as soft info banners — not bare paragraphs. */
.gwd-draft-notice {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 16px 0 !important;
    padding: 14px 18px !important;
    background: var(--gwd-gray-1) !important;
    border-left: 4px solid var(--gwd-pink) !important;
    border-radius: var(--gwd-radius) !important;
    color: var(--gwd-gray-8) !important;
    font-family: var(--gwd-font) !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    font-style: normal !important;
}

.gwd-draft-notice::before {
    content: "" !important;
    flex: 0 0 auto !important;
    width: 20px !important;
    height: 20px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

.gwd-draft-notice--login::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23731944' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/><polyline points='10 17 15 12 10 7'/><line x1='15' y1='12' x2='3' y2='12'/></svg>") !important;
}

.gwd-draft-notice--empty::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23731944' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><line x1='9' y1='14' x2='15' y2='14'/></svg>") !important;
}

/* ============================================================
 * Workflow Gating — Email Gate component (v1.45.0)
 * ============================================================ */

.gwd-email-gate {
    max-width: 520px;
    margin: 24px auto;
    padding: 32px 28px;
    background: var(--gwd-white, #fff);
    border: 1px solid var(--gwd-gray-3, #d1d1d1);
    border-left: 4px solid var(--gwd-pink, #731944);
    border-radius: var(--gwd-radius, 8px);
    font-family: var(--gwd-font, system-ui, -apple-system, sans-serif);
    color: var(--gwd-gray-8, #1f1f1f);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.gwd-email-gate__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--gwd-pink, #731944);
    margin: 0 0 12px;
    line-height: 1.3;
}

.gwd-email-gate__intro {
    font-size: 15px;
    line-height: 1.55;
    color: var(--gwd-gray-6, #666);
    margin: 0 0 20px;
}

.gwd-email-gate-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 16px;
}

.gwd-email-gate__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--gwd-gray-8, #1f1f1f);
    margin-bottom: 2px;
}

.gwd-email-gate-form input[type=email] {
    width: 100%;
    padding: 12px 14px;
    font-size: 16px;
    line-height: 1.4;
    border: 1px solid var(--gwd-gray-3, #d1d1d1);
    border-radius: var(--gwd-radius, 8px);
    background: var(--gwd-white, #fff);
    color: var(--gwd-gray-8, #1f1f1f);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.gwd-email-gate-form input[type=email]:focus {
    outline: none;
    border-color: var(--gwd-pink, #731944);
    box-shadow: 0 0 0 3px var(--gwd-pink-soft, rgba(115, 25, 68, 0.15));
}

/* Style provided by theme class `button primary custom-btn type-large no-icon`
   (yellow #F6CA67 default → maroon #731944 + white on hover). We only keep
   busy-state + spinner suffix here. */
.gwd-email-gate__submit {
    cursor: pointer;
}

.gwd-email-gate__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.gwd-email-gate-form.is-busy .gwd-email-gate__submit::after {
    content: " …";
}

.gwd-email-gate__resume {
    font-size: 14px;
    color: var(--gwd-gray-6, #666);
    margin: 0 0 12px;
    border-top: 1px solid var(--gwd-gray-3, #d1d1d1);
    padding-top: 14px;
}

.gwd-email-gate__resume a {
    color: var(--gwd-pink, #731944);
    text-decoration: underline;
    font-weight: 500;
}

.gwd-email-gate__resume a:hover {
    text-decoration: none;
}

.gwd-email-gate__msg {
    font-size: 14px;
    line-height: 1.4;
    min-height: 1.4em;
    color: var(--gwd-gray-6, #666);
}

.gwd-email-gate__msg.is-error {
    color: #b00020;
    font-weight: 500;
}

/* Mobile */
@media (max-width: 600px) {
    .gwd-email-gate {
        margin: 16px 8px;
        padding: 24px 20px;
    }
    .gwd-email-gate__title {
        font-size: 20px;
    }
    .gwd-email-gate__submit {
        align-self: stretch;
        text-align: center;
    }
}