/* ========================================================================== 
   WordForm Frontend Custom Styles
   --------------------------------------------------------------------------
   Adds responsive, theme-friendly styling for WordForm generated forms while
   keeping the markup compatible with all WordPress themes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Layout foundation and design tokens
   -------------------------------------------------------------------------- */
.sc-wordform-built-form-frontend-outermost-div-wrapper {
    --wf-font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --wf-text-color: #0f172a;
    --wf-field-bg: #ffffff;
    --wf-field-color: #162033;
    --wf-field-border: #d6deea;
    --wf-field-border-hover: #b4c1d6;
    --wf-field-border-focus: #2563eb;
    --wf-field-shadow-focus: 0 0 0 4px rgba(37, 99, 235, 0.14);
    --wf-field-radius: 14px;
    --wf-field-padding-y: 0.82rem;
    --wf-field-padding-x: 1rem;
    --wf-muted-color: #5f6f84;
    --wf-error-color: #d62d30;
    --wf-success-color: #2f9d5c;
    --wf-warning-color: #f59e0b;
    --wf-space-xs: 0.52rem;
    --wf-space-sm: 0.96rem;
    --wf-space-md: 1rem;
    --wf-space-lg: 1.65rem;
    --wf-space-xl: 2rem;
    --wf-label-size: 1rem;
    --wf-help-size: 0.92rem;
    --wf-heading-size: 1.3rem;
    --wf-control-height: 50px;
    --wf-card-radius: 20px;
    --wf-transition: 0.2s ease;
    width: 100%;
    max-width: 100%;
    font-family: var(--wf-font-family, inherit);
    color: var(--wf-text-color, inherit);
    line-height: 1.6;
    background: transparent;
    position: relative;
    z-index: 120;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper *,
.sc-wordform-built-form-frontend-outermost-div-wrapper *::before,
.sc-wordform-built-form-frontend-outermost-div-wrapper *::after {
    box-sizing: border-box;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper form {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: start;
    column-gap: var(--wf-space-xl);
    row-gap: 0;
    position: relative;
    z-index: 2;
    isolation: isolate;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper form > div {
    grid-column: 1 / -1;
    min-width: 0;
}

@media (max-width: 768px) {
    /* Force full-width layout on smaller viewports even when custom width is applied */
    .sc-wordform-built-form-frontend-outermost-div-wrapper form {
        width: 100% !important;
        max-width: 100% !important;
    }

    .sc-wordform-built-form-frontend-outermost-div-wrapper .sc-wordform-built-field-width-half,
    .sc-wordform-built-form-frontend-outermost-div-wrapper .sc-wordform-built-field-width-third {
        grid-column: 1 / -1;
        max-width: 100%;
        width: 100%;
        padding-right: 0;
    }
}

.sc-wordform-built-form-frontend-outermost-div-wrapper form.small,
.sc-wordform-built-form-frontend-outermost-div-wrapper form.medium,
.sc-wordform-built-form-frontend-outermost-div-wrapper form.large {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper form.small {
    max-width: 32rem;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper form.medium {
    max-width: 44rem;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper form.large {
    max-width: 56rem;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper fieldset {
    border: 0;
    margin: 0 0 var(--wf-space-lg);
    padding: 0;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper legend {
    font-weight: 600;
    margin-bottom: var(--wf-space-sm);
}

.sc-wordform-built-select-wrapper,
.sc-wordform-built-radio-wrapper,
.sc-wordform-built-checkbox-wrapper,
.sc-wordform-built-textarea-wrapper,
.sc-wordform-built-richeditor-wrapper,
.sc-wordform-built-captcha-wrapper,
.sc-wordform-built-hcaptcha-wrapper,
.sc-wordform-built-number-wrapper,
.sc-wordform-built-range-wrapper,
.sc-wordform-built-upload-wrapper,
.sc-wordform-built-text-wrapper,
.sc-wordform-built-email-wrapper,
.sc-wordform-built-firstlastname-wrapper,
.sc-wordform-built-address-wrapper,
  .sc-wordform-built-sectionhtml-wrapper,
  .sc-wordform-built-maskinput-wrapper,
  .sc-wordform-built-rating-wrapper,
  .sc-wordform-built-likert-wrapper,
  .sc-wordform-built-signature-wrapper,
.sc-wordform-built-url-wrapper,
.sc-wordform-built-tel-wrapper,
.sc-wordform-built-date-wrapper,
.sc-wordform-built-time-wrapper,
.sc-wordform-built-week-wrapper,
.sc-wordform-built-month-wrapper,
.sc-wordform-built-datetime-wrapper,
.sc-wordform-built-datetime-local-wrapper,
.sc-wordform-built-color-wrapper,
.sc-wordform-built-password-wrapper,
.sc-wordform-built-search-wrapper,
.sc-wordform-built-payment-item-wrapper,
.sc-wordform-built-payment-coupon-wrapper,
.sc-wordform-built-payment-method-wrapper,
.sc-wordform-built-payment-custom-amount-wrapper,
.sc-wordform-built-payment-quantity-wrapper,
.sc-wordform-built-payment-summary-wrapper,
.sc-wordform-built-payment-gateway-wrapper,
.sc-wordform-built-terms-wrapper,
.sc-wordform-built-gdpr-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--wf-space-sm);
    margin-bottom: var(--wf-field-gap, var(--wf-space-lg));
}

.sc-wordform-built-form-frontend-outermost-div-wrapper .sc-wordform-built-field-width-full {
    display: block;
    grid-column: span 6;
    width: 100%;
    max-width: 100%;
    padding-right: 0;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper .sc-wordform-built-field-width-half,
.sc-wordform-built-form-frontend-outermost-div-wrapper .sc-wordform-built-field-width-third {
    display: block;
    vertical-align: top;
    min-width: 0;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper .sc-wordform-built-field-width-half {
    grid-column: span 3;
    width: 100%;
    max-width: 100%;
    padding-right: 0;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper .sc-wordform-built-field-width-third {
    grid-column: span 2;
    width: 100%;
    max-width: 100%;
    padding-right: 0;
}

.sc-wordform-built-hcaptcha-wrapper .sc-wordform-built-hcaptcha-element-label,
.sc-wordform-built-gcaptcha-wrapper .sc-wordform-built-gcaptcha-element-label {
    display: inline-block;
    margin-bottom: 0.55rem;
    font-weight: 600;
}

.sc-wordform-built-gcaptcha-error-wrapper,
.sc-wordform-built-hcaptcha-error-wrapper {
    margin-top: 0.65rem;
}

.sc-wordform-built-gcaptcha-error-wrapper .sc-wordform-error-msg,
.sc-wordform-built-hcaptcha-error-wrapper .sc-wordform-error-msg {
    display: inline-flex;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper [class$="-element-label-wrapper"] {
    margin-bottom: 0;
    padding-bottom: 0.18rem;
}

.sc-wordform-hcaptcha-placeholder {
    padding: 0.9rem 1rem;
    border: 1px dashed var(--wf-field-border);
    border-radius: var(--wf-field-radius);
    background: rgba(37, 99, 235, 0.04);
    color: var(--wf-muted-color);
    font-size: 0.94rem;
}

.sc-wordform-built-upload-wrapper {
    margin-top: 0;
}

.sc-wordform-built-signature-wrapper {
    margin-top: 0;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper label {
    display: inline-block;
    font-weight: 700;
    color: inherit;
    margin-bottom: 0;
    font-size: var(--wf-label-size);
    line-height: 1.5;
    letter-spacing: 0.01em;
}

.sc-wordform-built-signature-canvas-shell {
    position: relative;
    width: 100%;
    min-height: 160px;
    border: 1px solid var(--wf-field-border);
    border-radius: calc(var(--wf-card-radius) - 2px);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    overflow: hidden;
}

.sc-wordform-built-signature-canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: crosshair;
    background:
        linear-gradient(transparent calc(100% - 34px), rgba(15, 23, 42, 0.12) calc(100% - 34px), rgba(15, 23, 42, 0.12) calc(100% - 33px), transparent calc(100% - 33px));
}

.sc-wordform-built-signature-placeholder {
    position: absolute;
    right: 1rem;
    bottom: 0.8rem;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--wf-muted-color);
    pointer-events: none;
}

.sc-wordform-built-rating-stars {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sc-wordform-built-rating-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid #d7dde5;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    color: #c7ced6;
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease, background 0.16s ease;
}

.sc-wordform-built-rating-star:hover,
.sc-wordform-built-rating-star:focus {
    border-color: #f59e0b;
    color: #f59e0b;
    box-shadow: 0 8px 18px rgba(245, 158, 11, 0.18);
    outline: none;
    transform: translateY(-1px);
}

.sc-wordform-built-rating-star.is-active {
    border-color: #f59e0b;
    background: linear-gradient(180deg, #fff7e0 0%, #ffe7ad 100%);
    color: #f59e0b;
    box-shadow: 0 8px 18px rgba(245, 158, 11, 0.18);
}

.sc-wordform-built-rating-star i {
    font-size: 16px;
}

.sc-wordform-built-rating-scale-labels {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    color: var(--wf-muted-color);
    font-size: 0.88rem;
    line-height: 1.4;
}

.sc-wordform-built-likert-table-shell {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--wf-field-border);
    border-radius: calc(var(--wf-card-radius) - 2px);
    background: #fff;
}

.sc-wordform-built-likert-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
}

.sc-wordform-built-likert-header-cell,
.sc-wordform-built-likert-row-label,
.sc-wordform-built-likert-choice-cell {
    padding: 0.9rem 0.85rem;
    border-right: 1px solid #e4e9f0;
    border-bottom: 1px solid #e4e9f0;
    text-align: center;
    vertical-align: middle;
}

.sc-wordform-built-likert-header-cell {
    background: #f8fafc;
    font-size: 0.86rem;
    font-weight: 600;
    color: #536375;
}

.sc-wordform-built-likert-row-label {
    min-width: 180px;
    background: #fcfdff;
    text-align: left;
    font-size: 0.96rem;
    font-weight: 600;
    color: #1f2d3d;
}

.sc-wordform-built-likert-header-cell:last-child,
.sc-wordform-built-likert-choice-cell:last-child {
    border-right: 0;
}

.sc-wordform-built-likert-row:last-child .sc-wordform-built-likert-row-label,
.sc-wordform-built-likert-row:last-child .sc-wordform-built-likert-choice-cell {
    border-bottom: 0;
}

.sc-wordform-built-likert-choice-label {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0;
    cursor: pointer;
}

.sc-wordform-built-likert-choice-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sc-wordform-built-likert-choice-ui {
    display: inline-flex;
    width: 20px;
    height: 20px;
    border: 1px solid #c7d1dc;
    border-radius: 999px;
    background: #fff;
    box-shadow: inset 0 0 0 4px #fff;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.sc-wordform-built-likert-choice-input:checked + .sc-wordform-built-likert-choice-ui {
    border-color: #1d4ed8;
    background: #1d4ed8;
    box-shadow: inset 0 0 0 4px #fff;
}

.sc-wordform-built-likert-choice-mobile-label {
    display: none;
    font-size: 0.74rem;
    line-height: 1.35;
    color: var(--wf-muted-color);
}

@media (max-width: 768px) {
    .sc-wordform-built-likert-table {
        min-width: 560px;
    }
}

@media (max-width: 600px) {
    .sc-wordform-built-likert-table {
        min-width: 560px;
        table-layout: auto;
    }

    .sc-wordform-built-likert-table thead {
        display: none;
    }

    .sc-wordform-built-likert-header-cell,
    .sc-wordform-built-likert-row-label,
    .sc-wordform-built-likert-choice-cell {
        padding: 0.75rem 0.6rem;
        vertical-align: top;
    }

    .sc-wordform-built-likert-row-label {
        min-width: 110px;
        width: 110px;
    }

    .sc-wordform-built-likert-choice-label {
        gap: 0.32rem;
        justify-content: flex-start;
        min-height: 100%;
    }

    .sc-wordform-built-likert-choice-mobile-label {
        display: inline-block;
        max-width: 74px;
        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
        text-align: center;
    }
}

body.wordform-preview-width-mobile .sc-wordform-built-likert-table {
    min-width: 560px;
    table-layout: auto;
}

body.wordform-preview-width-mobile .sc-wordform-built-likert-table thead {
    display: none;
}

body.wordform-preview-width-mobile .sc-wordform-built-likert-header-cell,
body.wordform-preview-width-mobile .sc-wordform-built-likert-row-label,
body.wordform-preview-width-mobile .sc-wordform-built-likert-choice-cell {
    padding: 0.75rem 0.6rem;
    vertical-align: top;
}

body.wordform-preview-width-mobile .sc-wordform-built-likert-row-label {
    min-width: 110px;
    width: 110px;
}

body.wordform-preview-width-mobile .sc-wordform-built-likert-choice-label {
    gap: 0.32rem;
    justify-content: flex-start;
    min-height: 100%;
}

body.wordform-preview-width-mobile .sc-wordform-built-likert-choice-mobile-label {
    display: inline-block;
    max-width: 74px;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    text-align: center;
}

.sc-wordform-built-signature-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.sc-wordform-built-richeditor-shell {
    border: 1px solid var(--wf-field-border);
    border-radius: calc(var(--wf-card-radius) - 2px);
    background: #fff;
    overflow: hidden;
}

.sc-wordform-built-richeditor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0.7rem 0.8rem;
    border-bottom: 1px solid #e4e9f0;
    background: linear-gradient(180deg, #fcfdff 0%, #f5f8fb 100%);
}

.sc-wordform-built-richeditor-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #d7dde5;
    border-radius: 10px;
    background: #fff;
    color: #415366;
    cursor: pointer;
    transition: border-color var(--wf-transition), box-shadow var(--wf-transition), color var(--wf-transition), transform var(--wf-transition);
}

.sc-wordform-built-richeditor-tool:hover,
.sc-wordform-built-richeditor-tool:focus {
    border-color: var(--wf-accent);
    color: var(--wf-accent);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.12);
    outline: none;
    transform: translateY(-1px);
}

.sc-wordform-built-richeditor-surface {
    min-height: 180px;
    padding: 0.95rem 1rem;
    color: var(--wf-field-color);
    font-size: 0.98rem;
    line-height: 1.6;
    background: #fff;
    outline: none;
    word-break: break-word;
}

.sc-wordform-built-richeditor-surface:empty::before {
    content: attr(data-placeholder);
    color: var(--wf-placeholder-color);
}

.sc-wordform-built-richeditor-shell:focus-within {
    border-color: var(--wf-accent);
    box-shadow: var(--wf-focus-ring);
}

.sc-wordform-built-richeditor-surface ul,
.sc-wordform-built-richeditor-surface ol {
    margin: 0.75rem 0 0.75rem 1.25rem;
}

.sc-wordform-built-richeditor-surface p {
    margin: 0 0 0.8rem;
}

.sc-wordform-built-richeditor-surface p:last-child {
    margin-bottom: 0;
}

.sc-wordform-built-signature-clear-button.button {
    min-height: 40px;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
}

.sc-wordform-built-payment-element-label-wrapper {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   2. Text inputs, selects, and textareas
   -------------------------------------------------------------------------- */
.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="text"],
.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="email"],
.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="number"],
.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="password"],
.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="search"],
.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="tel"],
.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="url"],
.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="date"],
.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="datetime"],
.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="datetime-local"],
.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="month"],
.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="week"],
.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="time"],
.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="color"],
.sc-wordform-built-form-frontend-outermost-div-wrapper input:not([type]) {
    display: block;
    width: 100%;
    min-height: var(--wf-control-height);
    padding: var(--wf-field-padding-y) var(--wf-field-padding-x);
    border: 1px solid var(--wf-field-border);
    border-radius: var(--wf-field-radius);
    background-color: var(--wf-field-bg);
    color: var(--wf-field-color);
    font-size: 1rem;
    line-height: 1.45;
    margin-top: 0;
    margin-bottom: 0;
    transition: border-color var(--wf-transition), box-shadow var(--wf-transition), background-color var(--wf-transition);
    appearance: none;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper textarea {
    display: block;
    width: 100%;
    min-height: 9rem;
    padding: var(--wf-field-padding-y) var(--wf-field-padding-x);
    border: 1px solid var(--wf-field-border);
    border-radius: var(--wf-field-radius);
    background-color: var(--wf-field-bg);
    color: var(--wf-field-color);
    font-size: 1rem;
    line-height: 1.55;
    margin-top: 0;
    margin-bottom: 0;
    resize: vertical;
    transition: border-color var(--wf-transition), box-shadow var(--wf-transition), background-color var(--wf-transition);
}

.sc-wordform-built-form-frontend-outermost-div-wrapper textarea[hidden],
.sc-wordform-built-form-frontend-outermost-div-wrapper .sc-wordform-built-richeditor-value,
.sc-wordform-built-form-frontend-outermost-div-wrapper .sc-wordform-built-richeditor-value[hidden] {
    display: none !important;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper select {
    display: block;
    width: 100%;
    min-height: var(--wf-control-height);
    padding: var(--wf-field-padding-y) calc(var(--wf-field-padding-x) + 1.75rem) var(--wf-field-padding-y) var(--wf-field-padding-x);
    border: 1px solid var(--wf-field-border);
    border-radius: var(--wf-field-radius);
    background-color: var(--wf-field-bg);
    background-image:
        linear-gradient(45deg, transparent 50%, var(--wf-muted-color) 50%),
        linear-gradient(135deg, var(--wf-muted-color) 50%, transparent 50%),
        linear-gradient(to right, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08));
    background-position:
        calc(100% - 1.2rem) 50%,
        calc(100% - 0.75rem) 50%,
        calc(100% - 2.5rem) 50%;
    background-size:
        7px 7px,
        7px 7px,
        1px 60%;
    background-repeat: no-repeat;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--wf-field-color);
    margin-top: 0;
    margin-bottom: 0;
    transition: border-color var(--wf-transition), box-shadow var(--wf-transition), background-color var(--wf-transition);
    appearance: none;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper select::-ms-expand {
    display: none;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="file"] {
    display: block;
    width: 100%;
    padding: var(--wf-field-padding-y) var(--wf-field-padding-x);
    border: 1px solid var(--wf-field-border);
    border-radius: var(--wf-field-radius);
    background-color: var(--wf-field-bg);
    color: var(--wf-field-color);
    font-size: 1rem;
    line-height: 1.45;
    margin-top: 0;
    margin-bottom: 0;
    transition: border-color var(--wf-transition), box-shadow var(--wf-transition), background-color var(--wf-transition);
    appearance: none;
    border-style: solid;
    cursor: pointer;
    box-sizing: border-box;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="file"]::file-selector-button {
    margin-right: 1rem;
    padding: 0.45rem 1rem;
    border: 0;
    border-radius: calc(var(--wf-field-radius) - 2px);
    background-color: var(--wf-field-border-focus);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="file"]::file-selector-button:hover,
.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="file"]::file-selector-button:focus-visible {
    background-color: #0f3fb8;
    transform: translateY(-1px);
    outline: none;
}

/* --------------------------------------------------------------------------
   3. Payment elements
   -------------------------------------------------------------------------- */
.sc-wordform-built-payment-item-card,
.sc-wordform-built-payment-method-options,
.sc-wordform-built-payment-summary-card,
.sc-wordform-built-payment-gateway-card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--wf-card-radius);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 1.05rem 1.1rem;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
}

.sc-wordform-built-payment-item-wrapper,
.sc-wordform-built-payment-coupon-wrapper,
.sc-wordform-built-payment-method-wrapper,
.sc-wordform-built-payment-custom-amount-wrapper,
.sc-wordform-built-payment-quantity-wrapper,
.sc-wordform-built-payment-summary-wrapper,
.sc-wordform-built-payment-gateway-wrapper {
    margin-top: 0;
}

.sc-wordform-built-payment-coupon-input-row {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
}

.sc-wordform-built-payment-coupon-input {
    flex: 1 1 auto;
    min-height: var(--wf-control-height);
    height: var(--wf-control-height);
    margin: 0;
}

.sc-wordform-built-payment-coupon-input-row .sc-wordform-built-payment-coupon-input {
    min-height: var(--wf-control-height);
    height: var(--wf-control-height) !important;
    padding-top: var(--wf-field-padding-y) !important;
    padding-bottom: var(--wf-field-padding-y) !important;
    line-height: 1.45 !important;
    box-sizing: border-box;
    align-self: center;
}

.sc-wordform-built-payment-coupon-apply-button,
.sc-wordform-built-payment-coupon-remove-button {
    min-height: 46px;
    margin-top: 0;
    border-radius: 999px !important;
    padding: 0.75rem 1.1rem !important;
    font-weight: 600 !important;
}

.sc-wordform-built-payment-coupon-apply-button,
.sc-wordform-built-payment-coupon-remove-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.sc-wordform-built-payment-coupon-apply-button.wordform-payment-coupon-hidden,
.sc-wordform-built-payment-coupon-remove-button.wordform-payment-coupon-hidden {
    display: none !important;
}

.sc-wordform-built-payment-coupon-apply-button::before {
    content: '\f145';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.92rem;
}

.sc-wordform-built-payment-coupon-remove-button::before {
    content: '\f00d';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.88rem;
}

.sc-wordform-built-payment-coupon-message {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.65rem;
    font-size: 0.92rem;
    line-height: 1.45;
}

.sc-wordform-built-payment-coupon-message.is-success {
    color: #0f766e;
}

.sc-wordform-built-payment-coupon-message.is-error {
    color: #b91c1c;
}

.sc-wordform-built-payment-coupon-message.is-info {
    color: #475569;
}

@media (max-width: 680px) {
    .sc-wordform-built-payment-coupon-input-row {
        flex-direction: column;
    }

    .sc-wordform-built-payment-coupon-apply-button,
    .sc-wordform-built-payment-coupon-remove-button {
        width: 100%;
    }
}

.sc-wordform-built-payment-item-card,
.sc-wordform-built-payment-summary-card,
.sc-wordform-built-payment-gateway-card {
    position: relative;
    overflow: hidden;
}

.sc-wordform-built-payment-item-card::before,
.sc-wordform-built-payment-summary-card::before,
.sc-wordform-built-payment-gateway-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, #0f766e 0%, #38bdf8 100%);
}

.sc-wordform-built-payment-item-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.sc-wordform-built-payment-method-helper-text {
    margin: 0 0 1rem;
    color: var(--wf-muted-color);
    font-size: 0.94rem;
    line-height: 1.55;
}

.sc-wordform-built-payment-method-options {
    display: flex;
    align-items: stretch;
    gap: 0.85rem;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.sc-wordform-built-payment-method-option {
    flex: 1 1 0;
    margin: 0;
    cursor: pointer;
}

.sc-wordform-built-payment-method-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sc-wordform-built-payment-method-option-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    min-height: 62px;
    padding: 1rem 1rem;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 15px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    color: #0f172a;
    font-weight: 700;
    transition: border-color var(--wf-transition), box-shadow var(--wf-transition), transform var(--wf-transition), background var(--wf-transition);
    position: relative;
}

.sc-wordform-built-payment-method-option:hover .sc-wordform-built-payment-method-option-card {
    border-color: rgba(29, 78, 216, 0.28);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.sc-wordform-built-payment-method-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
    font-size: 1rem;
    line-height: 1;
}

.sc-wordform-built-payment-method-option-text {
    font-size: 0.96rem;
    letter-spacing: 0.01em;
    line-height: 1.35;
}

.sc-wordform-built-payment-method-option[data-wordform-payment-method-option="stripe"] .sc-wordform-built-payment-method-option-icon {
    color: #635bff;
}

.sc-wordform-built-payment-method-option[data-wordform-payment-method-option="paypal"] .sc-wordform-built-payment-method-option-icon {
    color: #0070ba;
}

.sc-wordform-built-payment-method-option[data-wordform-payment-method-option="square"] .sc-wordform-built-payment-method-option-icon {
    color: #0f172a;
}

.sc-wordform-built-payment-method-option[data-wordform-payment-method-option="authorizenet"] .sc-wordform-built-payment-method-option-icon {
    color: #0f766e;
}

.sc-wordform-built-payment-method-option input[type="radio"]:checked + .sc-wordform-built-payment-method-option-card,
.sc-wordform-built-payment-method-option.is-active .sc-wordform-built-payment-method-option-card {
    border-color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.14);
    transform: translateY(-1px);
    background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
    padding-right: 2.6rem;
}

.sc-wordform-built-payment-method-option input[type="radio"]:checked + .sc-wordform-built-payment-method-option-card::after,
.sc-wordform-built-payment-method-option.is-active .sc-wordform-built-payment-method-option-card::after {
    content: '\f00c';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(29, 78, 216, 0.12);
    color: #1d4ed8;
    font-size: 0.78rem;
}

.sc-wordform-built-payment-item-label,
.sc-wordform-built-payment-summary-title,
.sc-wordform-built-payment-gateway-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    line-height: 1.35;
}

.sc-wordform-built-payment-summary-title {
    margin-bottom: 0.25rem;
}

.sc-wordform-built-payment-method-label,
.sc-wordform-built-payment-element-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 700;
    color: #0f172a;
}

.sc-wordform-built-payment-method-label::after {
    content: 'Secure';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.1);
    color: #0f766e;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
    margin-left: 0.5rem;
}

.sc-wordform-built-payment-item-amount,
.sc-wordform-payment-total-text,
.sc-wordform-payment-subtotal-text,
.sc-wordform-payment-gateway-total-text {
    color: #0f766e;
    font-weight: 700;
}

.sc-wordform-built-payment-item-description,
.sc-wordform-built-payment-gateway-description,
.sc-wordform-built-payment-gateway-total {
    margin-top: 0.5rem;
    color: var(--wf-muted-color);
    font-size: 0.92rem;
    line-height: 1.6;
}

.sc-wordform-built-payment-gateway-title i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
    flex: 0 0 2rem;
}

.sc-wordform-built-payment-input-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.sc-wordform-built-payment-input-currency {
    flex: 0 0 auto;
    min-width: 2.5rem;
    text-align: center;
    min-height: var(--wf-control-height);
    padding: 0.75rem 0.8rem;
    border: 1px solid var(--wf-field-border);
    border-radius: var(--wf-field-radius);
    background: #f8fafc;
    color: #0f172a;
    font-weight: 600;
}

.sc-wordform-built-payment-input-row input[type="number"] {
    flex: 1 1 auto;
    margin-top: 0;
    margin-bottom: 0;
}

.sc-wordform-built-payment-summary-totals {
    display: none;
}

.sc-wordform-built-payment-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.8rem;
    font-size: 0.95rem;
}

.sc-wordform-built-payment-summary-total-row {
    margin-top: 0.25rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    padding-top: 0.8rem;
}

.sc-wordform-built-payment-summary-empty-text {
    margin-top: 0.8rem;
    padding: 0.8rem 0.95rem;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.04);
    color: var(--wf-muted-color);
    font-size: 0.92rem;
    line-height: 1.55;
}

.sc-wordform-built-payment-gateway-wrapper-stripe .sc-wordform-built-payment-gateway-title i {
    color: #635bff;
}

.sc-wordform-built-payment-gateway-wrapper-stripe .sc-wordform-built-payment-gateway-card::before {
    background: linear-gradient(90deg, #635bff 0%, #8b5cf6 100%);
}

.sc-wordform-built-payment-gateway-wrapper-paypal .sc-wordform-built-payment-gateway-title i {
    color: #0070ba;
}

.sc-wordform-built-payment-gateway-wrapper-paypal .sc-wordform-built-payment-gateway-card::before {
    background: linear-gradient(90deg, #0070ba 0%, #00a3e0 100%);
}

.sc-wordform-built-payment-gateway-wrapper-square .sc-wordform-built-payment-gateway-title i {
    color: #0f172a;
}

.sc-wordform-built-payment-gateway-wrapper-square .sc-wordform-built-payment-gateway-card::before {
    background: linear-gradient(90deg, #0f172a 0%, #475569 100%);
}

.sc-wordform-built-payment-gateway-wrapper-authorizenet .sc-wordform-built-payment-gateway-title i {
    color: #0f766e;
}

.sc-wordform-built-payment-gateway-wrapper-authorizenet .sc-wordform-built-payment-gateway-card::before {
    background: linear-gradient(90deg, #0f766e 0%, #14b8a6 100%);
}

.sc-wordform-built-payment-gateway-button {
    margin-top: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 12rem;
    padding: 0.8rem 1.1rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #dbe4ff 0%, #bfdbfe 100%);
    color: #0f172a;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.14);
    transition: transform var(--wf-transition), box-shadow var(--wf-transition), filter var(--wf-transition);
    opacity: 0.85;
    cursor: not-allowed;
}

.sc-wordform-built-payment-gateway-wrapper-square .sc-wordform-built-payment-gateway-button,
.sc-wordform-built-payment-gateway-wrapper-authorizenet .sc-wordform-built-payment-gateway-button {
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    color: #0f172a;
    opacity: 1;
    cursor: pointer;
}

.sc-wordform-built-payment-gateway-wrapper-square .sc-wordform-built-payment-gateway-button:hover,
.sc-wordform-built-payment-gateway-wrapper-authorizenet .sc-wordform-built-payment-gateway-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.18);
}

.sc-wordform-paypal-button-element {
    margin-top: 0.95rem;
    min-height: 60px;
    padding: 0.95rem 1rem;
    border: 1px solid var(--wf-field-border);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.sc-wordform-built-payment-gateway-wrapper-paypal .sc-wordform-paypal-button-element::before {
    content: 'Pay securely with PayPal';
    display: block;
    margin: 0 0 0.55rem;
    color: #0070ba;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sc-wordform-payment-gateway-field-group {
    margin-top: 0.95rem;
}

.sc-wordform-payment-gateway-field-label {
    display: block;
    margin: 0 0 0.42rem;
    color: #0f172a;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.sc-wordform-stripe-card-element {
    margin-top: 0;
    min-height: 62px;
    padding: 1rem 1rem;
    border: 1px solid var(--wf-field-border);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.sc-wordform-square-card-element {
    margin-top: 0;
    min-height: 62px;
    padding: 1rem 1rem;
    border: 1px solid var(--wf-field-border);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.sc-wordform-authorizenet-card-fields {
    margin-top: 0.15rem;
}

.sc-wordform-authorizenet-card-fields input[type="text"] {
    width: 100%;
    min-height: var(--wf-control-height);
    padding: 0.75rem 0.95rem;
    border: 1px solid var(--wf-field-border);
    border-radius: var(--wf-field-radius);
    background: #ffffff;
    color: #0f172a;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.sc-wordform-authorizenet-card-meta-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.8rem;
}

.sc-wordform-authorizenet-card-meta-row .sc-wordform-payment-gateway-field-group {
    margin-top: 0;
}

.sc-wordform-authorizenet-card-fields input[type="text"]:focus {
    border-color: var(--wf-field-border-focus);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    outline: none;
}

.sc-wordform-built-payment-gateway-help-text {
    display: block;
    margin-top: 0.8rem;
    color: var(--wf-muted-color);
    font-size: 0.92rem;
}

.sc-wordform-built-field-help-text {
    margin: 0;
    color: var(--wf-muted-color);
    font-size: var(--wf-help-size);
    line-height: 1.6;
}

.progress {
    width: 100%;
    margin-top: var(--wf-space-md);
}

.progress .progress-bar {
    min-height: 0.42rem;
    border-radius: 999px;
}

.wordform-payment-gateway-error {
    display: block;
    margin-top: 0.75rem;
}

@media (max-width: 640px) {
    .sc-wordform-built-payment-method-options,
    .sc-wordform-built-payment-item-card-header,
    .sc-wordform-built-payment-summary-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .sc-wordform-built-payment-method-options {
        display: flex;
        width: 100%;
    }

    .sc-wordform-built-payment-input-row {
        flex-wrap: wrap;
    }

    .sc-wordform-authorizenet-card-meta-row {
        grid-template-columns: 1fr;
    }

    .sc-wordform-built-payment-input-currency {
        min-width: 2rem;
    }

    .sc-wordform-built-payment-method-option {
        width: 100%;
        flex: 1 1 100%;
    }
}

body.wordform-preview-width-tablet .sc-wordform-built-firstlastname-row,
body.wordform-preview-width-mobile .sc-wordform-built-firstlastname-row {
    grid-template-columns: 1fr;
}

body.wordform-preview-width-tablet .sc-wordform-built-form-frontend-outermost-div-wrapper .sc-wordform-built-field-width-half,
body.wordform-preview-width-tablet .sc-wordform-built-form-frontend-outermost-div-wrapper .sc-wordform-built-field-width-third,
body.wordform-preview-width-mobile .sc-wordform-built-form-frontend-outermost-div-wrapper .sc-wordform-built-field-width-half,
body.wordform-preview-width-mobile .sc-wordform-built-form-frontend-outermost-div-wrapper .sc-wordform-built-field-width-third {
    grid-column: 1 / -1;
    max-width: 100%;
    width: 100%;
    padding-right: 0;
}

body.wordform-preview-width-mobile .sc-wordform-built-payment-method-options {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

body.wordform-preview-width-mobile .sc-wordform-built-payment-method-option {
    width: 100%;
    flex: 1 1 100%;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="file"]::-webkit-file-upload-button {
    margin-right: 1rem;
    padding: 0.45rem 1rem;
    border: 0;
    border-radius: calc(var(--wf-field-radius) - 2px);
    background-color: var(--wf-field-border-focus);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="color"] {
    width: 3rem;
    padding: 0.1rem;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="range"] {
    width: 100%;
    margin-top: var(--wf-space-xs);
    margin-bottom: var(--wf-space-xs);
    background: transparent;
    height: 1.5rem;
    padding: 0;
    appearance: none;
    accent-color: var(--wf-field-border-focus);
    cursor: pointer;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="range"]:active {
    cursor: grabbing;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="range"]:focus {
    outline: none;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    background-color: var(--wf-field-border-hover);
    border-radius: 999px;
    transition: background-color 0.2s ease;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="range"]::-webkit-slider-thumb {
    height: 18px;
    width: 18px;
    margin-top: -6px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background-color: var(--wf-field-border-focus);
    box-shadow: -999px 0 0 995px rgba(34, 113, 177, 0.4), 0 2px 6px rgba(0, 0, 0, 0.2);
    appearance: none;
    cursor: grab;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="range"]::-webkit-slider-thumb:active {
    transform: scale(1.05);
    cursor: grabbing;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="range"]::-moz-range-track {
    height: 6px;
    background-color: var(--wf-field-border-hover);
    border-radius: 999px;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="range"]::-moz-range-thumb {
    height: 18px;
    width: 18px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background-color: var(--wf-field-border-focus);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: grab;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="range"]::-moz-range-progress {
    height: 6px;
    border-radius: 999px 0 0 999px;
    background-color: var(--wf-field-border-focus);
}

.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="range"]::-ms-track {
    height: 6px;
    border-color: transparent;
    color: transparent;
    background: transparent;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="range"]::-ms-fill-lower {
    background-color: var(--wf-field-border-focus);
    border-radius: 999px;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="range"]::-ms-fill-upper {
    background-color: var(--wf-field-border-hover);
    border-radius: 999px;
}

/* Placeholder styling */
.sc-wordform-built-form-frontend-outermost-div-wrapper input::placeholder,
.sc-wordform-built-form-frontend-outermost-div-wrapper textarea::placeholder {
    color: #8b95a7;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    opacity: 1;
    transition: color var(--wf-transition), transform var(--wf-transition);
}

.sc-wordform-built-form-frontend-outermost-div-wrapper input:focus::placeholder,
.sc-wordform-built-form-frontend-outermost-div-wrapper textarea:focus::placeholder {
    color: #a5afbd;
    transform: translateX(4px);
}

.sc-wordform-built-form-frontend-outermost-div-wrapper input::-webkit-input-placeholder,
.sc-wordform-built-form-frontend-outermost-div-wrapper textarea::-webkit-input-placeholder {
    color: var(--wf-muted-color);
}

.sc-wordform-built-form-frontend-outermost-div-wrapper input:-ms-input-placeholder,
.sc-wordform-built-form-frontend-outermost-div-wrapper textarea:-ms-input-placeholder {
    color: var(--wf-muted-color);
}

.sc-wordform-built-form-frontend-outermost-div-wrapper input::-ms-input-placeholder,
.sc-wordform-built-form-frontend-outermost-div-wrapper textarea::-ms-input-placeholder {
    color: var(--wf-muted-color);
}

/* Shared hover/focus/disabled states */
.sc-wordform-built-form-frontend-outermost-div-wrapper :is(
    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    input[type="time"],
    input[type="file"],
    input[type="color"],
    input:not([type]),
    select,
    textarea
):hover {
    border-color: var(--wf-field-border-hover) !important;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper :is(
    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    input[type="time"],
    input[type="file"],
    input[type="color"],
    input:not([type]),
    select,
    textarea
):focus,
.sc-wordform-built-form-frontend-outermost-div-wrapper :is(
    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    input[type="time"],
    input[type="file"],
    input[type="color"],
    input:not([type]),
    select,
    textarea
):focus-visible {
    border: 2px solid var(--wf-field-border-focus) !important;
    box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.25);
    outline: none;
    background-color: #ffffff;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="range"]:focus-visible {
    box-shadow: none;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper :is(
    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    input[type="time"],
    input[type="file"],
    input[type="color"],
    input:not([type]),
    select,
    textarea
):disabled {
    cursor: not-allowed;
    background-color: #f5f5f7;
    color: var(--wf-muted-color);
    border-color: #d4d7dd;
    box-shadow: none;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper :is(
    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    input[type="time"],
    input[type="file"],
    input[type="color"],
    input:not([type]),
    textarea
)[readonly] {
    background-color: #f9fafb;
    color: var(--wf-muted-color);
}

/* --------------------------------------------------------------------------
   3. Checkbox and radio controls
   -------------------------------------------------------------------------- */
.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="checkbox"],
.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="radio"] {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    margin-right: 0;
    border: 1.5px solid var(--wf-field-border);
    border-radius: 0.3rem;
    background-color: #ffffff;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    appearance: none;
    cursor: pointer;
    vertical-align: middle;
    flex: 0 0 1.1rem;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="radio"] {
    border-radius: 50%;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="checkbox"]:checked,
.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="radio"]:checked {
    border-color: var(--wf-field-border-focus);
    background-color: var(--wf-field-border-focus);
}

.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="checkbox"]:checked {
    background-image:
        linear-gradient(-45deg, transparent 46%, #ffffff 46%, #ffffff 60%, transparent 60%),
        linear-gradient(45deg, transparent 26%, #ffffff 26%, #ffffff 43%, transparent 43%),
        linear-gradient(-45deg, #ffffff 46%, transparent 46%);
    background-size: 9px 9px, 9px 9px, 9px 9px;
    background-position: 4px 7px, 7px 10px, 3px 10px;
    background-repeat: no-repeat;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="radio"]:checked {
    background-image: radial-gradient(circle, #ffffff 0 36%, transparent 40%);
    background-repeat: no-repeat;
    background-position: center;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="checkbox"]:hover,
.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="radio"]:hover {
    border-color: var(--wf-field-border-hover);
    transform: translateY(-1px);
}

.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="checkbox"]:focus-visible,
.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="radio"]:focus-visible {
    outline: 2px solid var(--wf-field-border-focus);
    outline-offset: 2px;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="checkbox"]:disabled,
.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="radio"]:disabled {
    cursor: not-allowed;
    border-color: #d4d7dd;
    background-color: #f5f5f7;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="checkbox"] + label,
.sc-wordform-built-form-frontend-outermost-div-wrapper input[type="radio"] + label {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--wf-space-sm);
    margin: 0;
    font-weight: 400;
    cursor: pointer;
    color: inherit;
    line-height: 1.6;
    font-size: 0.96rem;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper .sc-wordform-built-checkbox-element-option-text-label,
.sc-wordform-built-form-frontend-outermost-div-wrapper .sc-wordform-built-radio-element-option-text-label {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--wf-space-sm);
    margin: 0 0 0.8rem;
    font-weight: 400;
    cursor: pointer;
    color: inherit;
    line-height: 1.6;
    font-size: 0.96rem;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper .sc-wordform-built-checkbox-element-option-text-label input,
.sc-wordform-built-form-frontend-outermost-div-wrapper .sc-wordform-built-radio-element-option-text-label input {
    margin: 0;
    margin-right: 0;
    margin-top: 0.15rem;
}
.sc-wordform-built-terms-conditions-text-label {
    vertical-align: middle;
}

.sc-wordform-built-terms-wrapper {
    display: block;
}

.sc-wordform-built-gdpr-wrapper {
    display: block;
}

.sc-wordform-built-terms-check-row {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.sc-wordform-built-terms-wrapper .sc-wordform-built-terms-element {
    margin: 0;
    margin-top: 0.15rem;
    appearance: auto;
    accent-color: var(--wf-field-border-focus);
    border: 0;
    background: none;
    width: 1.05rem;
    height: 1.05rem;
    min-width: 1.05rem;
    min-height: 1.05rem;
    box-shadow: none;
    outline: none;
    transform: none;
}

.sc-wordform-built-terms-wrapper .sc-wordform-built-terms-element:checked {
    transform: none;
}

.sc-wordform-built-terms-wrapper .sc-wordform-built-terms-conditions-text-label {
    display: inline-block;
    margin: 0;
    margin-left: 0;
    line-height: 1.45 !important;
    vertical-align: middle;
    font-size: 0.96rem;
}

.sc-wordform-built-gdpr-consent-text-label {
    vertical-align: middle;
}

.sc-wordform-built-gdpr-check-row {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.sc-wordform-built-gdpr-wrapper .sc-wordform-built-gdpr-element {
    margin: 0;
    margin-top: 0.15rem;
    appearance: auto;
    accent-color: var(--wf-field-border-focus);
    border: 0;
    background: none;
    width: 1.05rem;
    height: 1.05rem;
    min-width: 1.05rem;
    min-height: 1.05rem;
    box-shadow: none;
    outline: none;
    transform: none;
}

.sc-wordform-built-gdpr-wrapper .sc-wordform-built-gdpr-consent-text-label {
    display: inline-block;
    margin: 0;
    margin-left: 0;
    line-height: 1.45 !important;
    vertical-align: middle;
    font-size: 0.96rem;
}
/* --------------------------------------------------------------------------
   4. Structured field groups
   -------------------------------------------------------------------------- */
.sc-wordform-built-firstlastname-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--wf-space-lg);
    margin-bottom: 0;
}

.sc-wordform-built-first-name-wrapper,
.sc-wordform-built-last-name-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--wf-space-xs);
}

.sc-wordform-built-first-name,
.sc-wordform-built-last-name {
    width: 100%;
}

.wordform-tel-element-phone-hints,
.wordform-datetime-element-format-hints {
    color: var(--wf-muted-color);
    font-size: 0.9rem;
    margin-top: var(--wf-space-xs);
}

/* --------------------------------------------------------------------------
   5. Status messaging and helper text
   -------------------------------------------------------------------------- */
span.sc-wordform-required-field {
    color: var(--wf-error-color);
    font-weight: 700;
    margin-left: 0.25rem;
}

.sc-wordform-error-input {
    border-color: var(--wf-error-color) !important;
    box-shadow: 0 0 0 3px rgba(214, 45, 48, 0.15) !important;
}

.sc-wordform-error-msg {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: var(--wf-space-xs);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--wf-error-color);
    font-weight: 600;
    white-space: pre-line;
    opacity: 0;
    animation: wordformErrorReveal 0.3s ease forwards;
}

.sc-wordform-error-msg:not(:empty)::before {
    content: '\f071';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.8rem;
    line-height: 1;
    flex: 0 0 auto;
}

@keyframes wordformErrorReveal {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sc-wordform-submission-success-msg-div-wrapper {
    text-align: center;
    color: var(--wf-success-color);
    font-weight: 600;
    padding: var(--wf-space-lg) 0 var(--wf-space-md);
    font-size: 0.98rem;
    line-height: 1.6;
}

.sc-wordform-submisson-fail-msg-div-wrapper {
    text-align: center;
    color: var(--wf-error-color);
    font-weight: 600;
    padding: var(--wf-space-lg) 0 var(--wf-space-md);
    font-size: 0.98rem;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   6. File upload customisations
   -------------------------------------------------------------------------- */
.sc-wordform-built-upload-element {
    opacity: 0;
    height: 1%;
}

.wordform-file-upload-label-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--wf-control-height);
    padding: 0.95rem 1rem;
    border: 1px dashed rgba(29, 78, 216, 0.28);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.96) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    gap: var(--wf-space-sm);
    cursor: pointer;
    font-weight: 600;
    color: var(--wf-field-border-focus);
}

.wordform-file-upload-label-wrapper:hover {
    border-color: rgba(29, 78, 216, 0.42);
    background: linear-gradient(180deg, #ffffff 0%, #eef5ff 100%);
}

.wordform-file-upload-label-wrapper:focus-within {
    border-color: var(--wf-field-border-focus);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12);
}

.wordform-file-upload-label-wrapper br {
    display: none;
}

.wordform-frontend-fileupload-icon {
    font-size: 1.45rem;
    color: var(--wf-field-border-focus);
    line-height: 1;
    padding-right:  var(--wf-space-xs);
    flex: 0 0 auto;
}

.wordform-frontend-upload-select-file-label {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    color: #1e3a5f;
    font-size: 0.96rem;
}

ul.wordform-selected-file-names-list {
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

ul.wordform-selected-file-names-list:empty {
    display: none;
}

.wordform-file-list-item {
    display: flex;
    align-items: center;
    gap: var(--wf-space-xs);
    padding: 0.4rem 0;
    animation: wordformFadeIn 0.3s ease-in-out;
    font-size: 0.94rem;
    color: #334155;
}

.wordform-remove-selected-file {
    color: var(--wf-error-color);
    margin-left: 0.5%;
    cursor: pointer !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    font-size: 1.1rem;
    line-height: 1;
    transition: transform 0.25s ease, color 0.25s ease;
}

.wordform-remove-selected-file:hover,
.wordform-remove-selected-file:focus,
.wordform-remove-selected-file:active {
    color: #b2080c;
    transform: scale(1.2);
}

.wordform-temporary-file-selection-error {
    margin-top: 0.65rem;
}

@keyframes wordformFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --------------------------------------------------------------------------
   7. Range displays and progress indicators
   -------------------------------------------------------------------------- */
.sc-wordform-built-range-wrapper {
    position: relative;    
}

.wordform-range-element-selected-value {
    position: absolute;
    top: calc(100% - 3.55rem);
    right: 0;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--wf-muted-color);
    white-space: nowrap;
    text-align: right;
}

.progress {
    display: none;
    width: 100%;
    margin-top: var(--wf-space-md);
    padding: 0.3rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7);
}

.progress.is-active,
.progress.is-complete {
    display: block;
}

.progress-bar {
    width: 0%;
    min-height: 16px;
    border-radius: 999px;
    color: #ffffff;
    text-align: center;
    font-size: 0.78rem;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: var(--wf-field-border-focus);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
    transition: width 0.35s ease, background-color 0.25s ease;
}

.progress.is-complete .progress-bar {
    background: linear-gradient(90deg, #0f766e 0%, #14b8a6 100%);
}

/* --------------------------------------------------------------------------
   8. Captcha and imagery
   -------------------------------------------------------------------------- */
.sc-wordform-captcha-container-wrapper {
    margin-top: var(--wf-space-md);
    text-align: left;
}

.sc-wordform-captcha-container-wrapper.center {
    text-align: center;
}

.sc-wordform-captcha-container-wrapper.right {
    text-align: right;
}

.sc-wordform-captcha-container-wrapper img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    box-shadow: 0 14px 24px rgba(15, 23, 42, 0.08);
}

.g-recaptcha {
    margin-top: var(--wf-space-sm);
}

.sc-wordform-captcha-container-wrapper,
.sc-wordform-captcha-container-wrapper.left {
    text-align: left;    
}
.sc-wordform-captcha-container-wrapper.center {
    text-align: center;
}
.sc-wordform-captcha-container-wrapper.right {
    text-align: right; 
}

/* --------------------------------------------------------------------------
   9. Buttons and alignment
   -------------------------------------------------------------------------- */
.sc-wordform-built-form-frontend-outermost-div-wrapper .button {
    vertical-align: top;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper .button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wf-space-xs);
    background: linear-gradient(180deg, #2f7fe6 0%, #1d63d8 100%);
    border: 1px solid #1d63d8;
    color: #ffffff;
    text-decoration: none;
    text-shadow: none;
    border-radius: 14px;
    white-space: nowrap;
    box-sizing: border-box;
    font-size: 1rem;
    line-height: 1.2;
    padding: 0.85rem 1.85rem;
    min-height: 50px;
    cursor: pointer;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.2);
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper .button-primary:hover {
    background: linear-gradient(180deg, #2b74d1 0%, #1557c7 100%);
    border-color: #1557c7;
    transform: translateY(-1px);
    box-shadow: 0 16px 32px rgba(37, 99, 235, 0.24);
}

.sc-wordform-built-form-frontend-outermost-div-wrapper .button-primary:focus-visible {
    outline: 2px solid var(--wf-field-border-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.2);
}

.sc-wordform-built-form-frontend-outermost-div-wrapper .button-primary:disabled {
    background-color: #9aa3b5;
    border-color: #9aa3b5;
    cursor: not-allowed;
    opacity: 0.8;
    transform: none;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper .button-large {
    min-height: 50px;
    padding: 0 1.35rem;
    line-height: 1.4;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper .button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wf-space-xs);
    min-height: 48px;
    padding: 0.78rem 1.2rem;
    border: 1px solid #cfd8e6;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    color: #162033;
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper .button-secondary:hover,
.sc-wordform-built-form-frontend-outermost-div-wrapper .button-secondary:focus-visible {
    border-color: #9fb4d8;
    color: #0f172a;
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.sc-wordform-built-form-formname-label-wrapper {
    margin: 0 0 var(--wf-space-xl);
}

.sc-wordform-built-form-formname-label-wrapper.left {
    text-align: left;
}

.sc-wordform-built-form-formname-label-wrapper.center {
    text-align: center;
}

.sc-wordform-built-form-formname-label-wrapper.right {
    text-align: right;
}

.sc-wordform-built-form-formname-label-wrapper h4 {
    margin: 0;
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    line-height: 1.2;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.sc-wordform-built-form-submit-button-wrapper {
    margin: var(--wf-space-xl) 0 0;
}

.sc-wordform-built-form-submit-button-wrapper.left {
    text-align: left;
}

.sc-wordform-built-form-submit-button-wrapper.center {
    text-align: center;
}

.sc-wordform-built-form-submit-button-wrapper.right {
    text-align: right;
}

/* Full-width version of WordForm button */
.wordform-button-full-width {
	display: block;
	width: 100%;
	text-align: center;
	box-sizing: border-box;
	white-space: nowrap;
	transition: all 0.25s ease;
}

/* Optional: smooth hover size feel without color change */
.wordform-button-full-width:hover {
	transform: scale(1.02);
}

/* For small screens ensure it stays readable */
@media (max-width: 600px) {
	.wordform-button-full-width {
		font-size: 15px;
		padding: 10px 18px;
	}
}

/* --------------------------------------------------------------------------
   10. Date picker affordance
   -------------------------------------------------------------------------- */
.sc-wordform-built-date-wrapper {
    width: 100%;
}

.sc-wordform-built-date-input-shell,
.sc-wordform-built-time-input-shell,
.sc-wordform-built-datetime-input-shell {
    position: relative;
    width: 100%;
}

.sc-wordform-built-date-wrapper input.sc-wordform-built-date-element,
.sc-wordform-built-time-wrapper input.sc-wordform-built-time-element {
    width: 100%;
    padding-right: calc(var(--wf-field-padding-x) + 2.2rem);
    box-sizing: border-box;
    cursor: pointer;
}

.sc-wordform-built-date-wrapper .sc-wordform-built-date-element-input-icon,
.sc-wordform-built-time-wrapper .sc-wordform-built-time-element-input-clock-icon {
    position: absolute;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    pointer-events: none;
    color: var(--wf-muted-color);
    transition: color 0.2s ease;
    line-height: 1;    
}

.sc-wordform-built-date-wrapper:hover .sc-wordform-built-date-element-input-icon,
.sc-wordform-built-time-wrapper:hover .sc-wordform-built-time-element-input-clock-icon {
    color: var(--wf-field-border-focus);
    transform: translateY(-50%) scale(1.1);
}

.sc-wordform-built-date-wrapper .sc-wordform-built-date-element-input-icon svg,
.sc-wordform-built-time-wrapper .sc-wordform-built-time-element-input-clock-icon svg {
    display: block;
    width: 18px;
    height: 18px;    
}

/* --------------------------------------------------------------------------
   11. Preview & test interface
   -------------------------------------------------------------------------- */
body.wordform-preview-page {
    margin: 0;
    background: #f3f6fb;
}

.wordform-preview-page-main {
    min-height: 100vh;
    padding: 1.5rem 0 5.5rem;
}

.wordform-preview-page-shell {
    width: 100%;
    min-height: 100%;
}

.wordform-preview-n-test-form-wrapper {
    width: min(100%, 860px);
    margin: 3% auto;
    padding: 0 1.25rem;
    transition: width 0.5s ease, margin 0.5s ease, transform 0.3s ease;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 120;
}

.wordform-preview-n-test-form-wrapper.resizing {
    transform: scale(1.02);
}

.wordform-responsive-toolbar {
    position: fixed;
    top: 72px;
    right: 48px;
    z-index: 9999;
    display: flex;
    gap: 8px;
    background: rgba(255, 255, 255, 0.95);
    padding: 6px 10px;
    border-radius: 12px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.14);    
backdrop-filter: blur(4px);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.wordform-responsive-toolbar .res-btn {
    background: #007cba;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.wordform-responsive-toolbar .res-btn:hover {
    background: #005a87;
    transform: scale(1.1);
    box-shadow: 0 6px 14px rgba(0, 92, 141, 0.35);
}

.wordform-responsive-toolbar .res-btn:hover::after {
    content: attr(title);
    position: absolute;
    top: -35px;
    right: 50%;
    transform: translateX(50%);
    background: rgba(0, 0, 0, 0.8);
    color: #ffffff;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.2s ease;
    z-index: 10000;
}

.wordform-responsive-toolbar .res-btn.active {
    background: #ff9800;
    color: #ffffff;
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.35);
}

/* --------------------------------------------------------------------------
   12. Responsive adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .wordform-responsive-toolbar {
        right: 24px;
    }
}

@media (max-width: 768px) {
    .wordform-preview-page-main {
        padding: 1rem 0 calc(5.75rem + env(safe-area-inset-bottom, 0px));
    }

    .wordform-preview-n-test-form-wrapper {
        width: 100%;
        margin: 2% auto;
        padding: 0 1rem;
    }

    .sc-wordform-built-form-frontend-outermost-div-wrapper form.small,
    .sc-wordform-built-form-frontend-outermost-div-wrapper form.medium,
    .sc-wordform-built-form-frontend-outermost-div-wrapper form.large {
        max-width: 100%;
    }

    .sc-wordform-built-firstlastname-row {
        grid-template-columns: 1fr;
    }

    .wordform-responsive-toolbar {
        top: auto;
        right: auto;
        left: 50%;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        transform: translateX(-50%);
        width: calc(100% - 1.5rem);
        max-width: 320px;
        justify-content: center;
        padding: 8px 10px;
        border-radius: 16px;
    }

    /* .sc-wordform-built-form-frontend-outermost-div-wrapper .button-primary {
        width: 100%;
    } */

    .wordform-remove-selected-file {
        font-size: 1.25rem;
    }

    .sc-wordform-built-payment-method-option-card {
        min-height: 58px;
        padding: 0.9rem 0.95rem;
    }

    .sc-wordform-built-payment-item-card,
    .sc-wordform-built-payment-summary-card,
    .sc-wordform-built-payment-gateway-card,
    .sc-wordform-built-sectionhtml-wrapper {
        padding: 0.95rem 1rem;
    }
}

@media (max-width: 600px) {
    .sc-wordform-built-form-frontend-outermost-div-wrapper input[type="checkbox"] + label,
    .sc-wordform-built-form-frontend-outermost-div-wrapper input[type="radio"] + label {
        align-items: flex-start;
        line-height: 1.4;
    }

    .sc-wordform-built-form-frontend-outermost-div-wrapper {
        padding-bottom: 80px;
    }

    .sc-wordform-built-form-frontend-outermost-div-wrapper form {
        padding-bottom: var(--wf-space-xl);
    }

    .sc-wordform-built-form-formname-label-wrapper {
        margin-bottom: 1.35rem;
    }

    .sc-wordform-built-form-formname-label-wrapper h4 {
        font-size: 1.1rem;
    }

    .sc-wordform-built-form-submit-button-wrapper {
        margin-top: 1.45rem;
    }

    .sc-wordform-built-form-frontend-outermost-div-wrapper .button-primary {
        min-height: 46px;
        padding: 0.75rem 1.25rem;
    }

    .wordform-file-upload-label-wrapper {
        padding: 0.85rem 0.9rem;
    }

    .wordform-frontend-upload-select-file-label {
        font-size: 0.93rem;
    }

    .sc-wordform-built-payment-coupon-input-row {
        gap: 0.65rem;
    }
        
    .wordform-responsive-toolbar {
        top: auto;        
        bottom: 24px;
        right: 16px;           
    }

    .wordform-responsive-toolbar .res-btn:hover::after {
        top: auto;
        bottom: -35px;
    }
}

@media (max-width: 480px) {
    .wordform-preview-page-main {
        padding-bottom: calc(6.25rem + env(safe-area-inset-bottom, 0px));
    }

    .wordform-preview-n-test-form-wrapper {
        padding: 0 0.75rem;
    }

    .wordform-responsive-toolbar {
        width: calc(100% - 1rem);
        gap: 6px;
        padding: 8px;
    }

    .wordform-responsive-toolbar .res-btn {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }

    .wordform-responsive-toolbar .res-btn:hover::after {
        display: none;
    }

    .sc-wordform-error-msg {
        font-size: 0.9rem;
    }

    .wordform-file-list-item {
        font-size: 0.9rem;
    }

    .sc-wordform-built-payment-method-options {
        gap: 0.65rem;
    }

    .sc-wordform-built-payment-method-option-card {
        min-height: 56px;
        padding: 0.85rem 0.9rem;
    }

    .sc-wordform-built-payment-method-option-text {
        font-size: 0.92rem;
    }

    .sc-wordform-built-payment-summary-row {
        font-size: 0.92rem;
    }
}

/* --------------------------------------------------------------------------
   13. Reduced motion preference
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .sc-wordform-built-form-frontend-outermost-div-wrapper *,
    .sc-wordform-built-form-frontend-outermost-div-wrapper *::before,
    .sc-wordform-built-form-frontend-outermost-div-wrapper *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   14. Loading icon on Submit Button Click
   -------------------------------------------------------------------------- */
/* Loading icon beside submit text */
.wordform-users-form-submit-loading-icon {
	display: none; /* hidden by default */
	align-items: center;
	justify-content: center;
	margin-right: 8px;
	vertical-align: middle;
	color: #ffffff; /* match WP primary button text */
	opacity: 0;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

/* When shown via jQuery .show() */
.wordform-users-form-submit-loading-icon[style*="display: inline"],
.wordform-users-form-submit-loading-icon[style*="display: block"],
.wordform-users-form-submit-loading-icon[style*="display:inline-block"] {
	display: inline-flex !important;
	opacity: 1;
	transform: scale(1.05);
}

/* Optional: modern subtle pulse for the spinning icon */
.wordform-users-form-submit-loading-icon i {
	animation: wordform-icon-pulse 1.2s ease-in-out infinite;
}

.sc-wordform-built-form-submit-button-wrapper button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

@keyframes wordform-icon-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.15); opacity: 0.85; }
}

.sc-wordform-built-form-frontend-outermost-div-wrapper {
	position: relative;
}

.sc-wordform-submit-progress-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	background: linear-gradient(180deg, rgba(248, 250, 252, 0.18) 0%, rgba(255, 255, 255, 0.10) 100%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	backdrop-filter: blur(2px);
	transition: opacity 0.22s ease, visibility 0.22s ease;
	z-index: 30;
}

.sc-wordform-submit-progress-overlay.is-active {
	opacity: 1;
	visibility: visible;
}

.sc-wordform-submit-progress-overlay-text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-width: 168px;
	padding: 10px 18px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: linear-gradient(135deg, rgba(15, 23, 42, 0.78) 0%, rgba(30, 41, 59, 0.72) 100%);
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: none;
	backdrop-filter: blur(10px);
	box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
}

.sc-wordform-submit-progress-overlay-text::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #7dd3fc;
	box-shadow: 0 0 0 5px rgba(125, 211, 252, 0.12);
	animation: wordform-submit-overlay-pulse 1.2s ease-in-out infinite;
	flex: 0 0 auto;
}

@keyframes wordform-submit-overlay-pulse {
	0%, 100% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.22);
		opacity: 0.72;
	}
}

.sc-wordform-submission-success-msg-div-wrapper.is-card {
	display: block;
	margin: 0 0 18px 0;
	padding: 16px 18px;
	border: 1px solid rgba(34, 113, 177, 0.18);
	border-radius: 16px;
	background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(242,248,255,0.96) 100%);
	box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

/* --- WordForm Datetime Field UI Enhancements --- */
.datetime-format-hint {
	display: block;
	color: #777;
	font-size: 12px;
	margin-top: 3px;
	margin-left: 2px;
	font-style: italic;
	transition: color 0.3s ease;
}

.datetime-format-hint:hover {
	color: #50575e; /* WP gray tone */
	cursor: default;
}

.datetime-error-msg {
	display: none;
	color: #dc3232; /* WP error red */
	font-weight: 500;
	margin-left: 2px;
	margin-top: 2px;
	font-size: 12.5px;
	animation: fadeInError 0.3s ease;
}

.flatpickr-calendar {
	--wf-calendar-accent: #2563eb;
	--wf-calendar-surface: #ffffff;
	--wf-calendar-text: #0f172a;
	background: var(--wf-calendar-surface);
	border: 1px solid rgba(15, 23, 42, 0.12);
	border-radius: 14px;
	box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
}

.flatpickr-calendar .flatpickr-months,
.flatpickr-calendar .flatpickr-weekdays {
	background: var(--wf-calendar-accent);
}

.flatpickr-calendar .flatpickr-months {
	border-radius: 14px 14px 0 0;
}

.flatpickr-calendar .flatpickr-month,
.flatpickr-calendar .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-next-month,
.flatpickr-calendar .flatpickr-current-month .cur-month,
.flatpickr-calendar .flatpickr-current-month input.cur-year,
.flatpickr-calendar span.flatpickr-weekday {
	color: #ffffff;
	fill: #ffffff;
}

.flatpickr-calendar .flatpickr-innerContainer,
.flatpickr-calendar .flatpickr-rContainer,
.flatpickr-calendar .flatpickr-time,
.flatpickr-calendar .dayContainer {
	background: var(--wf-calendar-surface);
	color: var(--wf-calendar-text);
}

.flatpickr-calendar .flatpickr-day {
	color: var(--wf-calendar-text);
	border-color: transparent;
}

.flatpickr-calendar .flatpickr-day.today {
	border-color: var(--wf-calendar-accent);
}

.flatpickr-calendar .flatpickr-day:hover,
.flatpickr-calendar .flatpickr-day:focus {
	background: rgba(37, 99, 235, 0.08);
	border-color: rgba(37, 99, 235, 0.22);
}

.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange,
.flatpickr-calendar .flatpickr-day.selected:hover,
.flatpickr-calendar .flatpickr-day.startRange:hover,
.flatpickr-calendar .flatpickr-day.endRange:hover {
	background: var(--wf-calendar-accent);
	border-color: var(--wf-calendar-accent);
	color: #ffffff;
}

.flatpickr-calendar .flatpickr-time input,
.flatpickr-calendar .flatpickr-time .flatpickr-am-pm {
	color: var(--wf-calendar-text);
}

.flatpickr-calendar .flatpickr-time input:hover,
.flatpickr-calendar .flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-calendar .flatpickr-time input:focus,
.flatpickr-calendar .flatpickr-time .flatpickr-am-pm:focus {
	background: rgba(37, 99, 235, 0.08);
}

@keyframes fadeInError {
	from { opacity: 0; transform: translateY(-2px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ────────────────────────────────
   WordForm DateTime Field Styling
   ──────────────────────────────── */
.sc-wordform-built-datetime-wrapper {
	width: 100%;
}

/* Input styling */
.sc-wordform-built-datetime-element {
	width: 100%;
	padding-right: 55px; /* leave room for both icons */
	box-sizing: border-box;
	line-height: 1.4;
    cursor: pointer;
}

/* Shared base style for both icons */
.sc-wordform-built-datetime-element-input-calendar-icon,
.sc-wordform-built-datetime-element-input-clock-icon {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	color: #777;
	cursor: pointer;
    pointer-events: none;
	transition: color 0.25s ease, transform 0.2s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Calendar icon slightly left of clock */
.sc-wordform-built-datetime-element-input-calendar-icon {
	right: 42px;
}

/* Clock icon stays at far right */
.sc-wordform-built-datetime-element-input-clock-icon {
	right: 12px;
}

/* Hover effect */
.sc-wordform-built-datetime-wrapper:hover .sc-wordform-built-datetime-element-input-calendar-icon,
.sc-wordform-built-datetime-wrapper:hover .sc-wordform-built-datetime-element-input-clock-icon {	
    color: var(--wf-field-border-focus);
	transform: translateY(-50%) scale(1.1);
}


/* Adjust spacing for small devices */
@media (max-width: 480px) {
	.sc-wordform-built-datetime-element {
		padding-right: 45px;
		font-size: 14px;
	}
	.sc-wordform-built-datetime-element-input-calendar-icon {
		right: 32px;
	}
	.sc-wordform-built-datetime-element-input-clock-icon {
		right: 8px;
	}
}

/* Prevent datetimepicker from getting hidden under top browser bar */
/* Smart visibility & layering for WordForm datetimepicker */
#ui-datepicker-div {
    --wf-calendar-accent: #2563eb;
    --wf-calendar-surface: #ffffff;
    --wf-calendar-text: #0f172a;
    position: absolute !important;
    z-index: 999999 !important;   /* above dialogs, tooltips, headers */
    margin: 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: var(--wf-calendar-surface);
    color: var(--wf-calendar-text);
    transform: none !important;
    transition: top 0.15s ease, left 0.15s ease;
}

#ui-datepicker-div .ui-widget-header {
    border: 0;
    background: var(--wf-calendar-accent);
    color: #ffffff;
}

#ui-datepicker-div .ui-datepicker-title,
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next,
#ui-datepicker-div .ui-datepicker-prev span,
#ui-datepicker-div .ui-datepicker-next span {
    color: #ffffff;
}

#ui-datepicker-div table,
#ui-datepicker-div .ui-datepicker-calendar,
#ui-datepicker-div .ui-timepicker-div,
#ui-datepicker-div .ui-timepicker-div dl,
#ui-datepicker-div .ui-timepicker-div dt,
#ui-datepicker-div .ui-timepicker-div dd,
#ui-datepicker-div .ui-datepicker-buttonpane,
#ui-datepicker-div .ui-widget-content {
    background: var(--wf-calendar-surface);
    color: var(--wf-calendar-text);
}

#ui-datepicker-div .ui-state-default,
#ui-datepicker-div .ui-widget-content .ui-state-default,
#ui-datepicker-div .ui-widget-header .ui-state-default {
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: var(--wf-calendar-surface);
    color: var(--wf-calendar-text);
}

#ui-datepicker-div .ui-state-hover,
#ui-datepicker-div .ui-widget-content .ui-state-hover,
#ui-datepicker-div .ui-widget-header .ui-state-hover,
#ui-datepicker-div .ui-state-focus,
#ui-datepicker-div .ui-widget-content .ui-state-focus,
#ui-datepicker-div .ui-widget-header .ui-state-focus {
    border-color: var(--wf-calendar-accent);
    background: #eff6ff;
    color: var(--wf-calendar-text);
}

#ui-datepicker-div .ui-state-active,
#ui-datepicker-div .ui-widget-content .ui-state-active,
#ui-datepicker-div .ui-widget-header .ui-state-active {
    border-color: var(--wf-calendar-accent);
    background: var(--wf-calendar-accent);
    color: #ffffff;
}

#ui-datepicker-div .ui-datepicker-today .ui-state-default {
    border-color: var(--wf-calendar-accent);
    box-shadow: inset 0 0 0 1px var(--wf-calendar-accent);
}

#ui-datepicker-div .ui-timepicker-div select {
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 8px;
    background: #ffffff;
    color: var(--wf-calendar-text);
}

/* Slight gap from input field */
#ui-datepicker-div.show-below {
    margin-top: 6px !important;
}

#ui-datepicker-div.show-above {
    margin-bottom: 6px !important;
}


/* RTL compatibility */
body.rtl .sc-wordform-built-datetime-element-input-calendar-icon {
	left: 38px;
	right: auto;
}
body.rtl .sc-wordform-built-datetime-element-input-clock-icon {
	left: 10px;
	right: auto;
}

/* RTL support */
body.rtl .datetime-format-hint,
body.rtl .datetime-error-msg {
	margin-left: 0;
	margin-right: 4px;
	text-align: right;
}

/* --------------------------------------------------------------------------
   Multi-step form UI
   -------------------------------------------------------------------------- */
.sc-wordform-step-progress {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin: 0 0 28px;
    flex-wrap: wrap;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.06);
}

.sc-wordform-step-progress-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 10px 14px;
    border: 1px solid #dbe5ec;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    color: #475569;
    flex: 1 1 180px;
    position: relative;
    overflow: hidden;
}

.sc-wordform-step-progress-item.is-active {
    border-color: #2563eb;
    background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
    color: #0f172a;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.10);
}

.sc-wordform-step-progress-item.is-active::before,
.sc-wordform-step-progress-item.is-complete::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #2563eb 0%, #0ea5e9 100%);
}

.sc-wordform-step-progress-item.is-complete {
    border-color: #0f766e;
    background: linear-gradient(180deg, #ffffff 0%, #ecfdf5 100%);
    color: #0f172a;
}

.sc-wordform-step-progress-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #0f172a;
    font-weight: 700;
    flex: 0 0 auto;
}

.sc-wordform-step-progress-item.is-active .sc-wordform-step-progress-number {
    background: #2563eb;
    color: #ffffff;
}

.sc-wordform-step-progress-item.is-complete .sc-wordform-step-progress-number {
    background: #0f766e;
    color: #ffffff;
}

.sc-wordform-step-progress-title {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.35;
}

.sc-wordform-step-panel {
    display: none;
    padding: 0;
}

.sc-wordform-step-panel.is-active {
    display: block;
}

.sc-wordform-step-panel-title {
    margin: 0 0 18px;
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
}

.sc-wordform-step-field + .sc-wordform-step-field {
    margin-top: 1rem;
}

.sc-wordform-step-actions {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 24px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.sc-wordform-step-actions .sc-wordform-step-previous-button,
.sc-wordform-step-actions .sc-wordform-step-next-button {
    min-height: 44px;
    border-radius: 999px;
    padding: 0 20px;
    font-weight: 700;
    cursor: pointer;
}

.sc-wordform-step-actions .sc-wordform-step-previous-button:hover,
.sc-wordform-step-actions .sc-wordform-step-next-button:hover {
    filter: brightness(0.98);
}

.sc-wordform-step-action-slot {
    display: flex;
    flex: 1 1 0;
    min-width: 180px;
}

.sc-wordform-step-action-slot.align-left {
    justify-content: flex-start;
}

.sc-wordform-step-action-slot.align-center {
    justify-content: center;
}

.sc-wordform-step-action-slot.align-right {
    justify-content: flex-end;
}

.sc-wordform-step-actions.is-final-step .sc-wordform-step-action-slot {
    flex: 0 0 auto;
    min-width: 0;
}

.sc-wordform-step-actions.is-final-step {
    justify-content: space-between;
    align-items: center;
}

.sc-wordform-step-actions.is-final-step .sc-wordform-step-action-slot.action-slot-submit {
    flex: 0 0 auto;
    width: auto;
    margin-top: 0;
    margin-left: auto;
}

.sc-wordform-step-actions.is-stacked {
    align-items: center;
}

.sc-wordform-step-actions.is-stacked .sc-wordform-step-action-slot {
    flex: 0 0 auto;
    min-width: 0;
}

.sc-wordform-step-actions.is-stacked[data-wordform-prev-align="left"][data-wordform-next-align="left"],
.sc-wordform-step-actions.is-stacked[data-wordform-prev-align="left"][data-wordform-submit-align="left"] {
    justify-content: flex-start;
}

.sc-wordform-step-actions.is-stacked[data-wordform-prev-align="center"][data-wordform-next-align="center"],
.sc-wordform-step-actions.is-stacked[data-wordform-prev-align="center"][data-wordform-submit-align="center"] {
    justify-content: center;
}

.sc-wordform-step-actions.is-stacked[data-wordform-prev-align="right"][data-wordform-next-align="right"],
.sc-wordform-step-actions.is-stacked[data-wordform-prev-align="right"][data-wordform-submit-align="right"] {
    justify-content: flex-end;
}

.sc-wordform-step-actions .sc-wordform-built-form-submit-button-wrapper {
    margin: 0;
}

@media (max-width: 768px) {
    .sc-wordform-step-progress {
        gap: 10px;
    }

    .sc-wordform-step-progress-item {
        flex: 1 1 100%;
    }

    .sc-wordform-step-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .sc-wordform-step-actions.is-stacked {
        flex-direction: column;
        align-items: stretch;
    }

    .sc-wordform-step-action-slot {
        width: 100%;
        flex: 1 1 auto;
    }

    .sc-wordform-step-actions.is-final-step .sc-wordform-step-action-slot.action-slot-submit {
        margin-top: 0;
    }
}

/* Additional frontend field layouts */
.sc-wordform-built-address-grid,
.sc-wordform-built-address-grid-inner {
    display: grid;
    gap: 14px;
}

.sc-wordform-built-address-grid {
    margin-top: 0;
}

.sc-wordform-built-address-grid-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sc-wordform-built-address-element,
.sc-wordform-built-maskinput-element {
    width: 100%;
}

.sc-wordform-built-sectionhtml-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 1.05rem 1.15rem;
    border: 1px solid #e1e7ef;
    border-radius: var(--wf-card-radius);
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
    box-shadow: 0 8px 18px rgba(20, 40, 66, 0.035);
    overflow: hidden;
}

.sc-wordform-built-sectionhtml-title {
    font-size: 1.03rem;
    font-weight: 700;
    color: #1f2d3d;
    line-height: 1.35;
}

.sc-wordform-built-sectionhtml-content {
    margin-top: 0.65rem;
    color: #546475;
    line-height: 1.68;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.sc-wordform-built-sectionhtml-content p:last-child {
    margin-bottom: 0;
}

.sc-wordform-built-sectionhtml-content > * {
    max-width: 100%;
}

.sc-wordform-built-sectionhtml-content img,
.sc-wordform-built-sectionhtml-content iframe,
.sc-wordform-built-sectionhtml-content table {
    max-width: 100%;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper .sc-wordform-built-field-width-half.sc-wordform-built-sectionhtml-wrapper,
.sc-wordform-built-form-frontend-outermost-div-wrapper .sc-wordform-built-field-width-third.sc-wordform-built-sectionhtml-wrapper {
    box-shadow: 0 6px 14px rgba(20, 40, 66, 0.03);
}

.sc-wordform-built-form-frontend-outermost-div-wrapper .sc-wordform-built-field-width-half.sc-wordform-built-sectionhtml-wrapper {
    grid-column: span 3;
    width: 100%;
    max-width: 100%;
    padding-right: 1.15rem;
}

.sc-wordform-built-form-frontend-outermost-div-wrapper .sc-wordform-built-field-width-third.sc-wordform-built-sectionhtml-wrapper {
    grid-column: span 2;
    width: 100%;
    max-width: 100%;
    padding-right: 1.15rem;
}

@media (max-width: 640px) {
    .sc-wordform-built-address-grid-inner {
        grid-template-columns: 1fr;
    }
}