/* =========================================================
   THE CREATIVE STUDIO — FORMS
   Load this file after style.css:
   <link rel="stylesheet" href="forms.css">
   ========================================================= */

:root {
    --form-primary: var(--primary, #1F73E8);
    --form-primary-light: var(--primary-light, #4EA6FF);
    --form-accent: var(--accent, #7BC4FF);
    --form-dark: var(--dark, #1b1b1b);
    --form-gray: var(--gray, #6b7280);
    --form-white: #fff;
    --form-page: #f6faff;
    --form-soft: #f8fbff;
    --form-border: #cfdcf0;
    --form-border-light: #dbe9ff;
    --form-success: #2d8b42;
    --form-success-bg: #eaf9ef;
    --form-warning: #9a6500;
    --form-warning-bg: #fff7dc;
    --form-danger: #c62828;
    --form-danger-bg: #fff0f0;
    --form-info: #155bc0;
    --form-info-bg: #eef6ff;
    --form-radius-sm: 10px;
    --form-radius: 14px;
    --form-radius-lg: 21px;
    --form-shadow: 0 18px 44px rgba(15, 38, 75, .09);
    --form-focus: 0 0 0 4px rgba(31, 115, 232, .14);
    --form-transition: .2s ease;
}

/* ---------- Base form behavior ---------- */

form,
fieldset,
input,
select,
textarea,
button {
    font: inherit;
}

form {
    color: var(--form-dark);
}

fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

legend {
    width: 100%;
    margin-bottom: 14px;
    color: var(--form-dark);
    font-family: "Poppins", sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
}

.hidden,
[hidden] {
    display: none !important;
}

/* ---------- Form shells and sections ---------- */

:where(
    .form-card,
    .form-shell,
    .section-card,
    .booking-section,
    .feedback-section,
    .referral-section,
    .support-section,
    .agreement-signature-card,
    .estimate-decision-card,
    .change-request-section,
    .payment-card
) {
    padding: clamp(23px, 4vw, 38px);
    border: 1px solid var(--form-border-light);
    border-radius: var(--form-radius-lg);
    background: var(--form-white);
    box-shadow: var(--form-shadow);
}

:where(
    .form-card,
    .section-card,
    .booking-section,
    .feedback-section,
    .referral-section,
    .support-section
) + :where(
    .form-card,
    .section-card,
    .booking-section,
    .feedback-section,
    .referral-section,
    .support-section
) {
    margin-top: 24px;
}

:where(
    .form-top,
    .step-heading,
    .split-heading,
    .referral-section-heading,
    .agreement-signature-heading,
    .estimate-decision-heading
) {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

:where(
    .form-top,
    .step-heading,
    .split-heading,
    .referral-section-heading
) h2,
:where(
    .form-top,
    .step-heading,
    .split-heading,
    .referral-section-heading
) h3 {
    margin-bottom: 6px;
    color: var(--form-primary);
}

:where(
    .form-top,
    .step-heading,
    .split-heading,
    .referral-section-heading
) p {
    margin: 0;
}

/* ---------- Grids ---------- */

:where(
    .form-grid,
    .order-grid,
    .booking-form-grid,
    .feedback-form-grid,
    .referral-form-grid,
    .support-form-grid,
    .change-form-grid,
    .payment-form-grid,
    .signature-grid
) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

:where(
    .form-grid,
    .order-grid,
    .booking-form-grid,
    .feedback-form-grid,
    .referral-form-grid,
    .support-form-grid,
    .change-form-grid,
    .payment-form-grid,
    .signature-grid
) > .full,
:where(
    .field,
    .order-field,
    .booking-field,
    .feedback-field,
    .referral-field,
    .support-field,
    .change-field,
    .payment-field
).full {
    grid-column: 1 / -1;
}

.order-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---------- Fields and labels ---------- */

:where(
    .field,
    .order-field,
    .booking-field,
    .feedback-field,
    .referral-field,
    .support-field,
    .change-field,
    .payment-field,
    .agreement-signature-field,
    .estimate-field
) {
    min-width: 0;
}

:where(
    .field,
    .order-field,
    .booking-field,
    .feedback-field,
    .referral-field,
    .support-field,
    .change-field,
    .payment-field,
    .agreement-signature-field,
    .estimate-field
) > label,
form > label {
    display: block;
    margin-bottom: 8px;
    color: var(--form-dark);
    font-weight: 700;
    line-height: 1.4;
}

.required,
label .required,
.required-marker {
    color: var(--form-danger);
    font-weight: 800;
}

:where(
    .field-help,
    .help-text,
    .form-help,
    .field-note,
    .limit-note
) {
    display: block;
    margin-top: 7px;
    color: var(--form-gray);
    font-size: .86rem;
    line-height: 1.55;
}

/* ---------- Inputs ---------- */

:where(
    form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
    form select,
    form textarea
) {
    width: 100%;
    min-height: 50px;
    padding: 13px 15px;
    border: 1px solid var(--form-border);
    border-radius: 12px;
    outline: 0;
    background: var(--form-white);
    color: var(--form-dark);
    line-height: 1.45;
    transition:
        border-color var(--form-transition),
        box-shadow var(--form-transition),
        background var(--form-transition);
}

form textarea {
    min-height: 145px;
    resize: vertical;
}

form select {
    appearance: none;
    padding-right: 44px;
    background-image:
        linear-gradient(45deg, transparent 50%, #667085 50%),
        linear-gradient(135deg, #667085 50%, transparent 50%);
    background-position:
        calc(100% - 19px) calc(50% - 2px),
        calc(100% - 13px) calc(50% - 2px);
    background-repeat: no-repeat;
    background-size: 6px 6px, 6px 6px;
}

:where(
    form input,
    form select,
    form textarea
)::placeholder {
    color: #8b96a8;
    opacity: 1;
}

:where(
    form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    form select,
    form textarea
):hover {
    border-color: #aec6e8;
}

:where(
    form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    form select,
    form textarea
):focus {
    border-color: var(--form-primary);
    box-shadow: var(--form-focus);
}

:where(
    form input,
    form select,
    form textarea
):disabled {
    cursor: not-allowed;
    border-color: #e1e6ef;
    background: #f2f4f7;
    color: #87909f;
    opacity: 1;
}

:where(
    form input,
    form textarea
)[readonly] {
    background: #f6f8fb;
    color: #556070;
}

:where(
    form input:not([type="checkbox"]):not([type="radio"]),
    form select,
    form textarea
)[aria-invalid="true"],
:where(
    form input:not([type="checkbox"]):not([type="radio"]),
    form select,
    form textarea
).invalid {
    border-color: var(--form-danger);
    background: #fffafa;
    box-shadow: 0 0 0 3px rgba(198, 40, 40, .09);
}

:where(
    form input:not([type="checkbox"]):not([type="radio"]),
    form select,
    form textarea
).valid {
    border-color: var(--form-success);
    background: #fbfffc;
}

/* ---------- Checkboxes and radios ---------- */

form input[type="checkbox"],
form input[type="radio"] {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    margin: 2px 0 0;
    accent-color: var(--form-primary);
    cursor: pointer;
}

:where(
    .checkbox-label,
    .consent,
    .booking-consent,
    .feedback-consent,
    .referral-consent,
    .support-consent,
    .change-confirmation,
    .agreement-acknowledgement,
    .estimate-acknowledgement
) {
    display: flex !important;
    align-items: flex-start;
    gap: 11px;
    margin: 18px 0 !important;
    padding: 15px;
    border: 1px solid var(--form-border-light);
    border-radius: 13px;
    background: var(--form-soft);
    color: #3f4a5a;
    line-height: 1.55;
}

:where(
    .checkbox-label,
    .consent,
    .booking-consent,
    .feedback-consent,
    .referral-consent,
    .support-consent,
    .change-confirmation,
    .agreement-acknowledgement,
    .estimate-acknowledgement
):focus-within {
    border-color: var(--form-primary);
    box-shadow: var(--form-focus);
}

/* ---------- Choice cards ---------- */

:where(
    .choice-grid,
    .feedback-choice-grid,
    .feedback-rating-grid,
    .support-choice-grid,
    .change-choice-grid,
    .estimate-decision-options
) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 13px;
}

:where(
    .choice,
    .feedback-choice,
    .support-choice,
    .change-choice,
    .estimate-decision-option
) {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-width: 0;
    padding: 16px;
    border: 2px solid #dfe8f8;
    border-radius: 14px;
    background: var(--form-white);
    cursor: pointer;
    transition:
        border-color var(--form-transition),
        background var(--form-transition),
        transform var(--form-transition),
        box-shadow var(--form-transition);
}

:where(
    .choice,
    .feedback-choice,
    .support-choice,
    .change-choice,
    .estimate-decision-option
):hover {
    border-color: #aac8ee;
    transform: translateY(-1px);
}

:where(
    .choice,
    .feedback-choice,
    .support-choice,
    .change-choice,
    .estimate-decision-option
):focus-within {
    border-color: var(--form-primary);
    box-shadow: var(--form-focus);
}

:where(
    .choice,
    .feedback-choice,
    .support-choice,
    .change-choice,
    .estimate-decision-option
):has(input:checked) {
    border-color: var(--form-primary);
    background: var(--form-info-bg);
}

:where(
    .choice,
    .feedback-choice,
    .support-choice,
    .change-choice,
    .estimate-decision-option
) strong {
    display: block;
    margin-bottom: 4px;
    color: var(--form-primary);
}

/* ---------- Service cards ---------- */

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 15px;
}

.service-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    min-height: 100%;
    padding: 20px;
    border: 2px solid var(--form-border-light);
    border-radius: 16px;
    background: var(--form-white);
    cursor: pointer;
    transition:
        transform var(--form-transition),
        border-color var(--form-transition),
        box-shadow var(--form-transition),
        background var(--form-transition);
}

.service-card:hover {
    transform: translateY(-2px);
    border-color: #aecdf4;
    box-shadow: 0 12px 28px rgba(31, 115, 232, .10);
}

.service-card:focus-within,
.service-card.active,
.service-card:has(input:checked) {
    border-color: var(--form-primary);
    background: var(--form-info-bg);
    box-shadow: var(--form-focus);
}

.service-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(
        135deg,
        var(--form-primary),
        var(--form-primary-light)
    );
    color: #fff;
    font-weight: 800;
}

.service-panel {
    padding: 25px;
    border: 1px solid var(--form-border-light);
    border-radius: 17px;
    background: var(--form-soft);
}

.service-panels {
    display: grid;
    gap: 18px;
}

/* ---------- Upload zones ---------- */

:where(
    .drop-zone,
    .upload-zone,
    .support-upload-zone,
    .change-upload-zone
) {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 190px;
    padding: 28px;
    border: 2px dashed #a9c8ee;
    border-radius: 17px;
    background: #f8fbff;
    color: #475467;
    cursor: pointer;
    text-align: center;
    transition:
        border-color var(--form-transition),
        background var(--form-transition),
        transform var(--form-transition),
        box-shadow var(--form-transition);
}

:where(
    .drop-zone,
    .upload-zone,
    .support-upload-zone,
    .change-upload-zone
):hover,
:where(
    .drop-zone,
    .upload-zone,
    .support-upload-zone,
    .change-upload-zone
).dragover {
    border-color: var(--form-primary);
    background: var(--form-info-bg);
    box-shadow: var(--form-focus);
}

:where(
    .drop-zone,
    .upload-zone,
    .support-upload-zone,
    .change-upload-zone
) input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.drop-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: #e7f2ff;
    color: var(--form-primary);
    font-size: 1.7rem;
    font-weight: 800;
}

:where(
    .file-list,
    .support-file-list,
    .change-file-list
) {
    display: grid;
    gap: 10px;
    margin-top: 15px;
}

:where(
    .file-item,
    .file-list > li,
    .support-file-list > li,
    .change-file-list > li
) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--form-border-light);
    border-radius: 11px;
    background: var(--form-white);
    word-break: break-word;
}

.file-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 16px;
    margin-top: 12px;
    color: var(--form-gray);
    font-size: .86rem;
}

/* ---------- Status and validation messages ---------- */

:where(
    .form-status,
    .form-message,
    .booking-form-status,
    .feedback-form-status,
    .referral-form-status,
    .support-form-status,
    .change-form-status,
    .payment-status,
    .agreement-form-status,
    .estimate-form-status
) {
    display: none;
    margin-top: 17px;
    padding: 14px 16px;
    border-radius: 12px;
    font-weight: 650;
    line-height: 1.55;
}

:where(
    .form-status,
    .form-message,
    .booking-form-status,
    .feedback-form-status,
    .referral-form-status,
    .support-form-status,
    .change-form-status,
    .payment-status,
    .agreement-form-status,
    .estimate-form-status
).show,
:where(
    .form-status,
    .form-message,
    .booking-form-status,
    .feedback-form-status,
    .referral-form-status,
    .support-form-status,
    .change-form-status,
    .payment-status,
    .agreement-form-status,
    .estimate-form-status
).success,
:where(
    .form-status,
    .form-message,
    .booking-form-status,
    .feedback-form-status,
    .referral-form-status,
    .support-form-status,
    .change-form-status,
    .payment-status,
    .agreement-form-status,
    .estimate-form-status
).error,
:where(
    .form-status,
    .form-message,
    .booking-form-status,
    .feedback-form-status,
    .referral-form-status,
    .support-form-status,
    .change-form-status,
    .payment-status,
    .agreement-form-status,
    .estimate-form-status
).info,
:where(
    .form-status,
    .form-message,
    .booking-form-status,
    .feedback-form-status,
    .referral-form-status,
    .support-form-status,
    .change-form-status,
    .payment-status,
    .agreement-form-status,
    .estimate-form-status
).warning {
    display: block;
}

:where(
    .form-status,
    .form-message,
    .booking-form-status,
    .feedback-form-status,
    .referral-form-status,
    .support-form-status,
    .change-form-status,
    .payment-status,
    .agreement-form-status,
    .estimate-form-status
).success {
    border-left: 5px solid var(--form-success);
    background: var(--form-success-bg);
    color: var(--form-success);
}

:where(
    .form-status,
    .form-message,
    .booking-form-status,
    .feedback-form-status,
    .referral-form-status,
    .support-form-status,
    .change-form-status,
    .payment-status,
    .agreement-form-status,
    .estimate-form-status
).error {
    border-left: 5px solid var(--form-danger);
    background: var(--form-danger-bg);
    color: var(--form-danger);
}

:where(
    .form-status,
    .form-message,
    .booking-form-status,
    .feedback-form-status,
    .referral-form-status,
    .support-form-status,
    .change-form-status,
    .payment-status,
    .agreement-form-status,
    .estimate-form-status
).info {
    border-left: 5px solid var(--form-primary);
    background: var(--form-info-bg);
    color: var(--form-info);
}

:where(
    .form-status,
    .form-message,
    .booking-form-status,
    .feedback-form-status,
    .referral-form-status,
    .support-form-status,
    .change-form-status,
    .payment-status,
    .agreement-form-status,
    .estimate-form-status
).warning {
    border-left: 5px solid var(--form-warning);
    background: var(--form-warning-bg);
    color: var(--form-warning);
}

.field-error {
    display: block;
    margin-top: 7px;
    color: var(--form-danger);
    font-size: .84rem;
    font-weight: 700;
}

/* ---------- Notices, summaries, and confirmations ---------- */

:where(
    .notice,
    .subcard,
    .summary,
    .terms,
    .signature-panel,
    .booking-selection-summary,
    .feedback-testimonial-preview,
    .change-confirmation
) {
    padding: 18px;
    border: 1px solid var(--form-border-light);
    border-radius: 14px;
    background: var(--form-soft);
}

.notice {
    border-left: 5px solid var(--form-primary);
}

.notice.warning {
    border-left-color: var(--form-warning);
    background: var(--form-warning-bg);
}

.notice.error {
    border-left-color: var(--form-danger);
    background: var(--form-danger-bg);
}

.term {
    padding: 14px 0;
    border-bottom: 1px solid #e2eaf6;
}

.term:last-child {
    border-bottom: 0;
}

.confirmation {
    padding: clamp(28px, 5vw, 50px);
    border: 1px solid #c9ead3;
    border-radius: var(--form-radius-lg);
    background: var(--form-success-bg);
    text-align: center;
}

.confirmation-icon {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #d8f2e1;
    color: var(--form-success);
    font-size: 2rem;
    font-weight: 800;
}

.confirmation-ref {
    display: inline-block;
    margin: 8px 0 20px;
    padding: 8px 15px;
    border-radius: 999px;
    background: #fff;
    color: var(--form-success);
    font-weight: 800;
}

/* ---------- Actions and buttons ---------- */

:where(
    .step-actions,
    .submit-row,
    .booking-submit-row,
    .feedback-submit-row,
    .referral-submit-row,
    .support-submit-row,
    .change-submit-row,
    .confirmation-actions,
    .agreement-sign-actions,
    .estimate-decision-actions
) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
}

:where(
    form button,
    form input[type="submit"],
    form input[type="button"],
    form input[type="reset"]
) {
    border: 0;
    cursor: pointer;
}

form .btn,
form button.btn,
form input.btn {
    min-height: 48px;
    padding: 12px 25px;
    border-radius: 999px;
    font-weight: 800;
    line-height: 1.2;
}

form .btn.primary,
form button.primary,
form input.primary {
    background: var(--form-primary);
    color: #fff;
}

form .btn.primary:hover,
form button.primary:hover,
form input.primary:hover {
    background: #1764cc;
    transform: translateY(-1px);
}

form .btn.secondary,
form button.secondary,
form input.secondary {
    border: 2px solid var(--form-primary);
    background: #fff;
    color: var(--form-primary);
}

form .btn.secondary:hover,
form button.secondary:hover,
form input.secondary:hover {
    background: var(--form-info-bg);
}

form .btn:focus-visible,
form button:focus-visible,
form input[type="submit"]:focus-visible,
form input[type="button"]:focus-visible,
form input[type="reset"]:focus-visible {
    outline: 0;
    box-shadow: var(--form-focus);
}

form .btn:disabled,
form button:disabled,
form input[type="submit"]:disabled {
    cursor: not-allowed;
    transform: none;
    opacity: .58;
}

/* ---------- Multi-step order form ---------- */

.order-step {
    display: none;
}

.order-step.active {
    display: block;
    animation: formStepIn .25s ease;
}

@keyframes formStepIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.badge {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--form-info-bg);
    color: var(--form-primary);
    font-size: .78rem;
    font-weight: 800;
}

.conditional {
    margin-top: 16px;
}

.color-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.color-list,
.employee-list {
    display: grid;
    gap: 12px;
}

/* ---------- Booking calendar ---------- */

.booking-calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.booking-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(38px, 1fr));
    gap: 7px;
}

.booking-calendar-grid button {
    min-height: 43px;
    border: 1px solid var(--form-border-light);
    border-radius: 10px;
    background: #fff;
    color: var(--form-dark);
}

.booking-calendar-grid button:hover,
.booking-calendar-grid button:focus-visible,
.booking-calendar-grid button.selected {
    border-color: var(--form-primary);
    background: var(--form-info-bg);
    color: var(--form-primary);
}

.booking-calendar-grid button:disabled {
    background: #f2f4f7;
    color: #a0a7b2;
}

.booking-time-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 10px;
}

.booking-time-grid button {
    padding: 11px 12px;
    border: 1px solid var(--form-border);
    border-radius: 10px;
    background: #fff;
    color: var(--form-primary);
    font-weight: 750;
}

.booking-time-grid button:hover,
.booking-time-grid button:focus-visible,
.booking-time-grid button.selected {
    border-color: var(--form-primary);
    background: var(--form-primary);
    color: #fff;
}

/* ---------- Feedback ratings ---------- */

.feedback-rating {
    display: grid;
    gap: 12px;
}

.feedback-nps {
    display: grid;
    grid-template-columns: repeat(11, minmax(34px, 1fr));
    gap: 7px;
}

.feedback-nps label {
    display: grid;
    place-items: center;
    min-height: 42px;
    border: 1px solid var(--form-border);
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
    font-weight: 800;
}

.feedback-nps label:has(input:checked) {
    border-color: var(--form-primary);
    background: var(--form-primary);
    color: #fff;
}

.feedback-nps input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.feedback-nps-labels {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    color: var(--form-gray);
    font-size: .8rem;
}

/* ---------- Payment form ---------- */

#card-container,
.card-container {
    min-height: 52px;
    padding: 13px;
    border: 1px solid var(--form-border);
    border-radius: 12px;
    background: #fff;
}

#card-container:focus-within,
.card-container:focus-within {
    border-color: var(--form-primary);
    box-shadow: var(--form-focus);
}

.payment-submit {
    width: 100%;
    min-height: 52px;
    margin-top: 18px;
    border-radius: 999px;
    background: var(--form-primary);
    color: #fff;
    font-weight: 800;
}

/* ---------- Small utilities ---------- */

.mt-1 {
    margin-top: 1rem !important;
}

.text-center {
    text-align: center !important;
}

.form-divider {
    height: 1px;
    margin: 26px 0;
    border: 0;
    background: #e2eaf6;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    :where(
        .form-grid,
        .order-grid,
        .booking-form-grid,
        .feedback-form-grid,
        .referral-form-grid,
        .support-form-grid,
        .change-form-grid,
        .payment-form-grid,
        .signature-grid,
        .order-grid.three
    ) {
        grid-template-columns: 1fr;
    }

    :where(
        .form-grid,
        .order-grid,
        .booking-form-grid,
        .feedback-form-grid,
        .referral-form-grid,
        .support-form-grid,
        .change-form-grid,
        .payment-form-grid,
        .signature-grid
    ) > *,
    :where(
        .field,
        .order-field,
        .booking-field,
        .feedback-field,
        .referral-field,
        .support-field,
        .change-field,
        .payment-field
    ) {
        grid-column: 1;
    }

    .color-columns {
        grid-template-columns: 1fr;
    }

    .feedback-nps {
        grid-template-columns: repeat(6, minmax(34px, 1fr));
    }
}

@media (max-width: 650px) {
    :where(
        .form-card,
        .form-shell,
        .section-card,
        .booking-section,
        .feedback-section,
        .referral-section,
        .support-section,
        .agreement-signature-card,
        .estimate-decision-card,
        .change-request-section,
        .payment-card
    ) {
        padding: 21px 17px;
        border-radius: 17px;
    }

    :where(
        .form-top,
        .step-heading,
        .split-heading,
        .referral-section-heading,
        .agreement-signature-heading,
        .estimate-decision-heading
    ) {
        align-items: stretch;
        flex-direction: column;
    }

    :where(
        .step-actions,
        .submit-row,
        .booking-submit-row,
        .feedback-submit-row,
        .referral-submit-row,
        .support-submit-row,
        .change-submit-row,
        .confirmation-actions,
        .agreement-sign-actions,
        .estimate-decision-actions
    ) {
        align-items: stretch;
        flex-direction: column;
    }

    :where(
        .step-actions,
        .submit-row,
        .booking-submit-row,
        .feedback-submit-row,
        .referral-submit-row,
        .support-submit-row,
        .change-submit-row,
        .confirmation-actions,
        .agreement-sign-actions,
        .estimate-decision-actions
    ) .btn,
    :where(
        .step-actions,
        .submit-row,
        .booking-submit-row,
        .feedback-submit-row,
        .referral-submit-row,
        .support-submit-row,
        .change-submit-row,
        .confirmation-actions,
        .agreement-sign-actions,
        .estimate-decision-actions
    ) button {
        width: 100%;
    }

    .choice-grid,
    .feedback-choice-grid,
    .feedback-rating-grid,
    .support-choice-grid,
    .change-choice-grid,
    .estimate-decision-options,
    .service-grid {
        grid-template-columns: 1fr;
    }

    .booking-calendar-grid {
        gap: 4px;
    }

    .booking-calendar-grid button {
        min-height: 38px;
        padding: 4px;
        font-size: .85rem;
    }

    .feedback-nps {
        grid-template-columns: repeat(4, minmax(34px, 1fr));
    }

    .feedback-nps-labels {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ---------- Accessibility and print ---------- */

@media (prefers-reduced-motion: reduce) {
    form *,
    form *::before,
    form *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media print {
    form .btn,
    form button,
    .step-actions,
    .submit-row,
    .booking-submit-row,
    .feedback-submit-row,
    .referral-submit-row,
    .support-submit-row,
    .change-submit-row,
    .drop-zone,
    .upload-zone,
    .support-upload-zone,
    .change-upload-zone {
        display: none !important;
    }

    :where(
        .form-card,
        .form-shell,
        .section-card,
        .booking-section,
        .feedback-section,
        .referral-section,
        .support-section
    ) {
        box-shadow: none;
    }
}