/* =========================================================
   Quicksoft Forms
   Variable-driven customer theming with stable presentation defaults.
   ========================================================= */

.quicksoft-form,
.quicksoft-form-panel {
    --qs-form-font: var(--font-family-base, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    --qs-form-text: var(--color-text, #17202a);
    --qs-form-text-soft: var(--color-muted, #667085);
    --qs-form-text-subtle: var(--color-soft, #98a2b3);
    --qs-form-surface: var(--color-white, #ffffff);
    --qs-form-surface-alt: var(--color-surface, #f7f8fb);
    --qs-form-surface-raised: var(--color-white, #ffffff);
    --qs-form-border: var(--color-border, #d8dee8);
    --qs-form-border-strong: var(--color-border-strong, #aab5c4);
    --qs-form-accent: var(--color-accent, #0f766e);
    --qs-form-accent-hover: var(--color-accent-dark, #115e59);
    --qs-form-accent-soft: var(--color-accent-soft, #d9f2ee);
    --qs-form-danger: var(--color-danger, #b42318);
    --qs-form-danger-hover: var(--color-danger-hover, #912018);
    --qs-form-danger-soft: #fef3f2;
    --qs-form-danger-border: #f3b5ad;
    --qs-form-success: var(--color-success, #166534);
    --qs-form-success-soft: #f0fdf4;
    --qs-form-success-border: #bbf7d0;
    --qs-form-radius: var(--radius-md, 8px);
    --qs-form-radius-sm: var(--radius-sm, 6px);
    --qs-form-radius-pill: var(--radius-pill, 999px);
    --qs-form-shadow: var(--shadow-lg, 0 18px 48px rgba(15, 23, 42, 0.12));
    --qs-form-shadow-soft: var(--shadow-sm, 0 10px 28px rgba(15, 23, 42, 0.08));
    --qs-form-focus-ring: var(--color-accent-soft, rgba(15, 118, 110, 0.22));
    --qs-form-gap: 1.25rem;
    --qs-form-field-gap: 0.5rem;
    --qs-form-control-height: 2.75rem;
    --qs-form-control-padding-block: 0.65rem;
    --qs-form-control-padding-inline: 0.875rem;
    --qs-form-max-width: var(--container, 860px);
    --qs-form-panel-max-width: 920px;
    --qs-form-popup-width: 760px;
    --qs-form-popup-width-compact: 560px;
    --qs-form-popup-width-standard: 760px;
    --qs-form-popup-width-wide: 980px;
    --qs-form-popup-width-full: calc(100vw - 2rem);
    --qs-form-popup-backdrop: rgba(15, 23, 42, 0.48);
    --qs-form-step-size: 1.7rem;
    --qs-form-wizard-max-width: var(--container, 860px);
    color: var(--qs-form-text);
    font-family: var(--qs-form-font);
    font-size: var(--text-base, 1rem);
    line-height: 1.5;
}

.quicksoft-form *,
.quicksoft-form *::before,
.quicksoft-form *::after,
.quicksoft-form-panel *,
.quicksoft-form-panel *::before,
.quicksoft-form-panel *::after {
    box-sizing: border-box;
}

/* =========================================================
   Form Container
   ========================================================= */

.quicksoft-form {
    display: grid;
    gap: var(--qs-form-gap);
    width: min(100%, var(--qs-form-max-width));
    margin: 0 auto;
    padding: 1.5rem;
}

.quicksoft-form-panel {
    width: min(100%, var(--qs-form-panel-max-width));
    margin: 1.5rem auto;
    padding: clamp(1.125rem, 3vw, 1.75rem);
    border: 1px solid var(--qs-form-border);
    border-radius: var(--qs-form-radius);
    background: var(--qs-form-surface);
    box-shadow: var(--qs-form-shadow-soft);
}

.quicksoft-form__title,
.quicksoft-form__description,
.quicksoft-form__heading h2,
.quicksoft-form__heading p {
    margin: 0;
}

.quicksoft-form__title,
.quicksoft-form__heading h2 {
    color: var(--qs-form-text);
    font-size: var(--text-2xl, 1.5rem);
    font-weight: 800;
    line-height: 1.15;
}

.quicksoft-form__description,
.quicksoft-form__heading p {
    max-width: 68ch;
    color: var(--qs-form-text-soft);
    font-size: var(--text-md, 1rem);
    line-height: 1.65;
}

/* =========================================================
   Field Layout
   ========================================================= */

.quicksoft-form__fields,
.quicksoft-form__grid,
.form-container__fields,
.form-container__collection-item-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--qs-form-gap);
    align-items: start;
}

.quicksoft-form__fields--onecolumn {
    grid-template-columns: 1fr;
}

.quicksoft-form__fields--twocolumns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quicksoft-form__fields--threecolumns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quicksoft-form__fields--wizard,
.quicksoft-form--wizard .quicksoft-form__fields {
    grid-template-columns: 1fr;
}

.quicksoft-form__field,
.form-field,
.form-container {
    display: grid;
    gap: var(--qs-form-field-gap);
    min-width: 0;
}

.form-field--width-full,
.form-container--width-full,
.form-field-width-full {
    grid-column: 1 / -1;
}

.form-field--width-half,
.form-container--width-half,
.form-field-width-half {
    grid-column: span 1;
}

.form-field--width-third,
.form-container--width-third,
.form-field-width-third {
    grid-column: span 1;
}

.quicksoft-form__fields--threecolumns .form-field--width-half,
.quicksoft-form__fields--threecolumns .form-container--width-half,
.quicksoft-form__fields--threecolumns .form-field-width-half {
    grid-column: span 2;
}

/* =========================================================
   Labels, Help, and Validation
   ========================================================= */

.form-field__label,
.form-field__checkbox-label,
.quicksoft-form label {
    color: var(--qs-form-text);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 700;
    line-height: 1.4;
}

.form-field__required {
    margin-left: 0.25rem;
    color: var(--qs-form-danger);
    text-decoration: none;
}

.form-field__help,
.field-help,
.form-container__description {
    margin: 0;
    color: var(--qs-form-text-soft);
    font-size: var(--text-xs, 0.75rem);
    line-height: 1.5;
}

.form-field__error,
.field-error,
.quicksoft-form__error {
    display: none;
    margin: 0;
    color: var(--qs-form-danger);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 700;
    line-height: 1.4;
}

.form-field__error:not(:empty),
.field-error:not(:empty),
.quicksoft-form__error:not(:empty) {
    display: block;
}

/* =========================================================
   Inputs
   ========================================================= */

.form-field__input,
.form-field__textarea,
.form-field__select,
.quicksoft-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.quicksoft-form select,
.quicksoft-form textarea {
    width: 100%;
    min-height: var(--qs-form-control-height);
    padding: var(--qs-form-control-padding-block) var(--qs-form-control-padding-inline);
    border: 1px solid var(--qs-form-border);
    border-radius: var(--qs-form-radius-sm);
    background: var(--qs-form-surface);
    color: var(--qs-form-text);
    font: inherit;
    line-height: 1.5;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background-color 160ms ease;
}

.form-field__input:focus,
.form-field__textarea:focus,
.form-field__select:focus,
.quicksoft-form input:not([type="checkbox"]):not([type="radio"]):focus,
.quicksoft-form select:focus,
.quicksoft-form textarea:focus {
    outline: none;
    border-color: var(--qs-form-accent);
    box-shadow: 0 0 0 3px var(--qs-form-focus-ring);
}

.form-field__input::placeholder,
.form-field__textarea::placeholder,
.quicksoft-form input::placeholder,
.quicksoft-form textarea::placeholder {
    color: var(--qs-form-text-subtle);
}

.form-field__input:disabled,
.form-field__textarea:disabled,
.form-field__select:disabled,
.quicksoft-form input:disabled,
.quicksoft-form select:disabled,
.quicksoft-form textarea:disabled {
    background: var(--qs-form-surface-alt);
    color: var(--qs-form-text-soft);
    cursor: not-allowed;
    opacity: 0.7;
}

.form-field__input[aria-invalid="true"],
.form-field__textarea[aria-invalid="true"],
.form-field__select[aria-invalid="true"],
.quicksoft-form [aria-invalid="true"] {
    border-color: var(--qs-form-danger);
}

.form-field__input[aria-invalid="true"]:focus,
.form-field__textarea[aria-invalid="true"]:focus,
.form-field__select[aria-invalid="true"]:focus,
.quicksoft-form [aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.16);
}

.form-field__textarea,
.quicksoft-form textarea {
    min-height: 6rem;
    resize: vertical;
}

.form-field__select,
.quicksoft-form select {
    appearance: none;
    padding-right: 2.5rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--qs-form-text-soft) 50%), linear-gradient(135deg, var(--qs-form-text-soft) 50%, transparent 50%);
    background-position: calc(100% - 1rem) 50%, calc(100% - 0.7rem) 50%;
    background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
    background-repeat: no-repeat;
    cursor: pointer;
}

/* =========================================================
   Checkbox
   ========================================================= */

.form-field__checkbox-wrapper,
.checkbox-control {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: var(--qs-form-control-height);
    padding: var(--qs-form-control-padding-block) var(--qs-form-control-padding-inline);
    border: 1px solid var(--qs-form-border);
    border-radius: var(--qs-form-radius-sm);
    background: var(--qs-form-surface);
    transition:
        border-color 160ms ease,
        background-color 160ms ease;
}

.form-field__checkbox-wrapper:hover,
.checkbox-control:hover {
    border-color: var(--qs-form-accent);
    background: var(--qs-form-accent-soft);
}

.form-field__checkbox,
.checkbox-control input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    min-height: 1.125rem;
    margin: 0;
    cursor: pointer;
    accent-color: var(--qs-form-accent);
}

.form-field__checkbox-label,
.checkbox-control span {
    flex: 1;
    margin: 0;
    cursor: pointer;
}

/* =========================================================
   Static Content
   ========================================================= */

.form-field--heading {
    padding-top: 0.35rem;
}

.form-field__heading,
.form-field--heading h3,
.quicksoft-form__static h3 {
    margin: 0;
    color: var(--qs-form-text);
    font-size: var(--text-xl, 1.25rem);
    font-weight: 800;
    line-height: 1.2;
}

.form-field--body,
.quicksoft-form__body {
    padding: 1rem;
    border: 1px solid var(--qs-form-border);
    border-radius: var(--qs-form-radius);
    background: var(--qs-form-surface-alt);
}

.form-field__body,
.form-field--body p,
.quicksoft-form__static p {
    margin: 0;
    color: var(--qs-form-text-soft);
    font-size: var(--text-sm, 0.875rem);
    line-height: 1.65;
}

/* =========================================================
   Containers: Sections, Collections, Button Groups
   ========================================================= */

.form-container--section,
.quicksoft-form__section {
    grid-column: 1 / -1;
    padding: 1rem;
    border: 1px solid var(--qs-form-border);
    border-radius: var(--qs-form-radius);
    background: var(--qs-form-surface);
}

.form-container--section > .form-container__title,
.form-container--collection > .form-container__title,
.quicksoft-form__section-heading h3,
.form-section__heading h3,
.form-collection__heading h3 {
    margin: 0;
    color: var(--qs-form-text);
    font-size: var(--text-lg, 1.125rem);
    font-weight: 800;
    line-height: 1.25;
}

.form-container--section > .form-container__description,
.form-container--collection > .form-container__description {
    margin-top: -0.1rem;
}

.form-container--section > .form-container__fields,
.quicksoft-form__section-heading,
.form-section__heading {
    padding-top: 1rem;
    border-top: 1px solid var(--qs-form-border);
}

.form-container--collection,
.quicksoft-form__collection,
.form-field--collection {
    grid-column: 1 / -1;
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--qs-form-border);
    border-radius: var(--qs-form-radius);
    background: var(--qs-form-surface-alt);
}

.form-container__collection-items,
.form-collection__items,
.collection-items {
    display: grid;
    gap: 0.85rem;
}

.form-container__collection-item,
.form-collection__item,
.collection-item,
.quicksoft-form__item {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--qs-form-border);
    border-radius: var(--qs-form-radius-sm);
    background: var(--qs-form-surface);
}

.form-container__collection-item-fields,
.quicksoft-form__item-grid,
.collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-container--button-group {
    grid-column: 1 / -1;
}

.form-container__buttons,
.form-field--button-group,
.quicksoft-form__button-group-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.form-container--align-center .form-container__buttons {
    justify-content: center;
}

.form-container--align-right .form-container__buttons {
    justify-content: flex-end;
}

.form-container--align-separate .form-container__buttons {
    justify-content: space-between;
}

/* =========================================================
   Buttons
   ========================================================= */

.quicksoft-form__submit,
.form-button,
.form-field__button,
.quicksoft-form__button,
.quicksoft-form button:not(.quicksoft-form__popup-close),
.form-container__collection-add,
.form-container__collection-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--qs-form-control-height);
    padding: 0.75rem 1.15rem;
    border: 1px solid transparent;
    border-radius: var(--qs-form-radius-sm);
    background: var(--qs-form-accent);
    color: var(--color-button-primary-text, #ffffff);
    font: inherit;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        background-color 160ms ease;
}

.quicksoft-form__submit:hover,
.form-button:hover,
.form-field__button:hover,
.quicksoft-form__button:hover,
.quicksoft-form button:not(.quicksoft-form__popup-close):hover,
.form-container__collection-add:hover {
    background: var(--qs-form-accent-hover);
    transform: translateY(-1px);
}

.quicksoft-form__submit:focus-visible,
.form-button:focus-visible,
.form-field__button:focus-visible,
.quicksoft-form__button:focus-visible,
.quicksoft-form button:focus-visible {
    outline: 3px solid var(--qs-form-focus-ring);
    outline-offset: 2px;
}

.quicksoft-form__submit:disabled,
.form-button:disabled,
.form-field__button:disabled,
.quicksoft-form__button:disabled,
.quicksoft-form button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
}

.quicksoft-form__button-primary,
.quicksoft-form button.quicksoft-form__button-primary {
    border-color: transparent;
    background: var(--qs-form-accent);
    color: var(--color-button-primary-text, #ffffff);
}

.quicksoft-form__button-primary:hover,
.quicksoft-form button.quicksoft-form__button-primary:hover {
    background: var(--qs-form-accent-hover);
}

.form-button--secondary,
.form-field__button.btn--secondary,
.quicksoft-form__button-secondary,
.quicksoft-form__secondary,
.form-container__collection-remove,
.quicksoft-form button.form-field__button.btn--secondary,
.quicksoft-form button.quicksoft-form__button-secondary,
.quicksoft-form button.quicksoft-form__secondary,
.quicksoft-form button.form-container__collection-remove {
    border-color: var(--qs-form-border-strong);
    background: var(--qs-form-surface);
    color: var(--qs-form-text);
    box-shadow: none;
}

.form-button--secondary:hover,
.form-field__button.btn--secondary:hover,
.quicksoft-form__button-secondary:hover,
.quicksoft-form__secondary:hover,
.form-container__collection-remove:hover,
.quicksoft-form button.form-field__button.btn--secondary:hover,
.quicksoft-form button.quicksoft-form__button-secondary:hover,
.quicksoft-form button.quicksoft-form__secondary:hover,
.quicksoft-form button.form-container__collection-remove:hover {
    border-color: var(--qs-form-border-strong);
    background: var(--qs-form-surface-alt);
    color: var(--qs-form-text);
}

.form-button--danger,
.form-field__button.btn--danger,
.quicksoft-form__button-danger,
.quicksoft-form button.form-field__button.btn--danger,
.quicksoft-form button.quicksoft-form__button-danger {
    background: var(--qs-form-danger);
    color: #ffffff;
}

.form-button--danger:hover,
.form-field__button.btn--danger:hover,
.quicksoft-form__button-danger:hover,
.quicksoft-form button.form-field__button.btn--danger:hover,
.quicksoft-form button.quicksoft-form__button-danger:hover {
    background: var(--qs-form-danger-hover);
}

.form-container__collection-remove {
    justify-self: end;
    min-height: 2rem;
    padding: 0.45rem 0.7rem;
    color: var(--qs-form-danger);
}

.btn--align-center {
    justify-self: center;
}

.btn--align-right {
    justify-self: end;
}

.btn--align-stretch {
    width: 100%;
}

.form-field--button {
    justify-items: start;
}

.quicksoft-form__actions,
.quicksoft-form__wizard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: 0.25rem;
}

/* =========================================================
   Messages
   ========================================================= */

.quicksoft-form__messages {
    display: none;
    padding: 0.875rem 1rem;
    border-radius: var(--qs-form-radius-sm);
    font-size: var(--text-sm, 0.875rem);
    line-height: 1.5;
}

.quicksoft-form__messages:not(:empty) {
    display: block;
}

.quicksoft-form__messages--error {
    border: 1px solid var(--qs-form-danger-border);
    background: var(--qs-form-danger-soft);
    color: var(--qs-form-danger);
}

.quicksoft-form__messages--success {
    border: 1px solid var(--qs-form-success-border);
    background: var(--qs-form-success-soft);
    color: var(--qs-form-success);
}

/* =========================================================
   Presentation: Static
   ========================================================= */

.quicksoft-form--static {
    padding-block: var(--qs-form-static-padding-block, 1.5rem);
    padding-inline: var(--qs-form-static-padding-inline, 0);
}

.quicksoft-form--static.quicksoft-form--card {
    padding: clamp(1.125rem, 3vw, 1.75rem);
    border: 1px solid var(--qs-form-border);
    border-radius: var(--qs-form-radius);
    background: var(--qs-form-surface);
    box-shadow: var(--qs-form-shadow-soft);
}

/* =========================================================
   Presentation: Popup
   ========================================================= */

.quicksoft-form--popup {
    width: 100%;
    max-width: 100%;
}

.quicksoft-form__popup-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--qs-form-popup-z-index, 1050);
    display: grid;
    place-items: center;
    padding: clamp(1rem, 3vw, 1.5rem);
    background: var(--qs-form-popup-backdrop);
}

.quicksoft-form__popup-panel {
    position: relative;
    width: min(100%, var(--qs-form-popup-width));
    max-height: min(820px, calc(100svh - 2rem));
    overflow: auto;
    padding: clamp(1rem, 3vw, 1.5rem);
    border: 1px solid var(--qs-form-border);
    border-radius: var(--qs-form-radius);
    background: var(--qs-form-surface-raised);
    box-shadow: var(--qs-form-shadow);
}

.quicksoft-form__popup-panel .quicksoft-form {
    width: 100%;
}

.quicksoft-form__popup-panel-compact {
    --qs-form-popup-width: var(--qs-form-popup-width-compact);
}

.quicksoft-form__popup-panel-standard {
    --qs-form-popup-width: var(--qs-form-popup-width-standard);
}

.quicksoft-form__popup-panel-wide {
    --qs-form-popup-width: var(--qs-form-popup-width-wide);
}

.quicksoft-form__popup-panel-full {
    --qs-form-popup-width: var(--qs-form-popup-width-full);
    max-height: calc(100svh - 2rem);
}

.quicksoft-form__popup-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    min-height: 2rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--qs-form-border);
    border-radius: var(--qs-form-radius-sm);
    background: var(--qs-form-surface);
    color: var(--qs-form-text);
    font: inherit;
    font-size: var(--text-xs, 0.75rem);
    font-weight: 800;
    cursor: pointer;
}

.quicksoft-form__popup-close:hover {
    background: var(--qs-form-surface-alt);
}

.quicksoft-form__popup-trigger-small {
    min-height: 2.125rem;
    padding: 0.45rem 0.7rem;
    font-size: var(--text-xs, 0.75rem);
}

.quicksoft-form__popup-trigger-medium {
    min-height: 2.5rem;
    padding: 0.6rem 1rem;
}

.quicksoft-form__popup-trigger-large {
    min-height: 3rem;
    padding: 0.8rem 1.25rem;
    font-size: var(--text-base, 1rem);
}

/* =========================================================
   Presentation: Wizard
   ========================================================= */

.quicksoft-form--wizard {
    --qs-form-max-width: var(--qs-form-wizard-max-width, 760px);
}

.quicksoft-form__wizard,
.quicksoft-form__step,
.quicksoft-form__step-heading {
    display: grid;
    gap: 0.75rem;
}

.quicksoft-form__steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.quicksoft-form__steps button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.35rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--qs-form-border);
    border-radius: var(--qs-form-radius-pill);
    background: var(--qs-form-surface);
    color: var(--qs-form-text-soft);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 800;
}

.quicksoft-form__steps span {
    display: grid;
    place-items: center;
    width: var(--qs-form-step-size);
    height: var(--qs-form-step-size);
    border-radius: var(--qs-form-radius-pill);
    background: var(--qs-form-border-strong);
    color: #ffffff;
    font-size: var(--text-xs, 0.75rem);
    font-weight: 800;
}

.quicksoft-form__steps .is-active button,
.quicksoft-form__steps [aria-current="step"] {
    border-color: var(--qs-form-accent);
    background: var(--qs-form-accent-soft);
    color: var(--qs-form-accent-hover);
}

.quicksoft-form__steps .is-active span,
.quicksoft-form__steps [aria-current="step"] span {
    background: var(--qs-form-accent);
}

.quicksoft-form__steps .is-complete button {
    border-color: var(--qs-form-accent);
    color: var(--qs-form-accent-hover);
}

.quicksoft-form__step-heading {
    padding-left: 0.85rem;
    border-left: 3px solid var(--qs-form-accent);
}

.quicksoft-form__step-heading h3,
.quicksoft-form__step-heading p {
    margin: 0;
}

.quicksoft-form__step-heading h3 {
    color: var(--qs-form-text);
    font-size: var(--text-lg, 1.125rem);
    font-weight: 800;
}

.quicksoft-form__step-heading p {
    color: var(--qs-form-text-soft);
    font-size: var(--text-sm, 0.875rem);
}

.quicksoft-form__wizard-actions {
    justify-content: space-between;
    padding-top: 0.25rem;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 768px) {
    .quicksoft-form__fields--twocolumns,
    .quicksoft-form__fields--threecolumns,
    .form-container__collection-item-fields,
    .quicksoft-form__item-grid,
    .collection-grid {
        grid-template-columns: 1fr;
    }

    .quicksoft-form__field,
    .form-field,
    .form-container,
    .form-field--width-half,
    .form-field--width-third,
    .form-container--width-half,
    .form-container--width-third,
    .form-field-width-half,
    .form-field-width-third {
        grid-column: 1 / -1;
    }

    .quicksoft-form__title,
    .quicksoft-form__heading h2 {
        font-size: var(--text-xl, 1.25rem);
    }

    .quicksoft-form__submit,
    .form-button,
    .form-field__button,
    .quicksoft-form__button {
        width: 100%;
    }

    .form-container__buttons,
    .form-field--button-group,
    .quicksoft-form__button-group-controls,
    .quicksoft-form__actions,
    .quicksoft-form__wizard-actions {
        align-items: stretch;
    }
}

@media (max-width: 480px) {
    .quicksoft-form,
    .quicksoft-form-panel {
        --qs-form-gap: 1rem;
    }

    .quicksoft-form__title,
    .quicksoft-form__heading h2 {
        font-size: var(--text-lg, 1.125rem);
    }

    .quicksoft-form__description,
    .quicksoft-form__heading p {
        font-size: var(--text-base, 1rem);
    }

    .quicksoft-form__popup-backdrop {
        align-items: end;
        padding: 0.75rem;
    }

    .quicksoft-form__popup-panel {
        max-height: calc(100svh - 1.5rem);
    }

    .quicksoft-form__steps {
        display: grid;
        grid-template-columns: 1fr;
    }

    .quicksoft-form__steps button {
        width: 100%;
        justify-content: flex-start;
    }
}