.feedback-dialog {
    padding: 0;
    border: 0;
    border-radius: 2.5rem;
    background: var(--bg-white);
    color: var(--text);
    max-width: min(31.5rem, calc(100vw - 1.6rem));
    width: 100%;
    max-height: calc(100dvh - 1.6rem);
    /* Browsers give dialog:modal overflow: auto by default; the scroll belongs to the form. */
    overflow: hidden;
    box-shadow: 0 20px 40px -15px rgba(10, 61, 36, 0.05);
}

/* Flex only while open: an author display value would otherwise override the closed state. */
.feedback-dialog[open] {
    display: flex;
    flex-direction: column;
}

.feedback-dialog::backdrop {}

/* Scroll lives here, not on the form. Padding is moved to the children so the scrollbar
   sits flush with the dialog edge and the content keeps the same 1.8rem inset. */
.feedback-dialog__inner {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Scrollbar styles follow .catalog-filter-layout__form (components/woo/catalog-filter/style.css). */
.feedback-dialog__inner::-webkit-scrollbar {
    width: 0.375rem;
    border-radius: .5rem;
}

.feedback-dialog__inner::-webkit-scrollbar-thumb {
    background-color: var(--brand, var(--main-blue));
    border-radius: .5rem;
    width: 0.25rem;
    border: 1px solid #d9d9d9;
}

.feedback-dialog__inner::-webkit-scrollbar-track {
    background: #d9d9d9;
    border-radius: .5rem;
    padding: 1px;
}


.feedback-dialog__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 500;
}

.feedback-dialog__close {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.feedback-dialog__close:hover {
    color: var(--text);
}

.feedback-dialog__head {
    padding: 1.8rem 1.8rem 0;
}

.feedback-dialog__description {
    margin: 0 0 var(--space-5) 0;
    padding: 0 1.8rem;
    font-size: 0.7rem;
    color: var(--text-muted);
}


/* Body and form keep their natural height: the overflow is scrolled by .feedback-dialog__inner. */
.feedback-dialog__body {
    display: flex;
    flex-direction: column;
    flex: none;
}

.feedback-dialog__form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    flex: none;
    padding: 0 1.8rem 1.8rem;
    box-sizing: border-box;
}

/* Honeypot: hidden from people, visible to bots that fill every field. */
.feedback-dialog__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* While the lead request is in flight (see script.js): form content is dimmed and blurred,
   the loader is centered over the whole dialog (.feedback-dialog is the containing block). */
.feedback-dialog__form > * {
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.feedback-dialog__form.is-sending > * {
    opacity: 0.1;
    filter: blur(4px);
    pointer-events: none;
}

.feedback-dialog__loader {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.feedback-dialog.is-sending .feedback-dialog__loader {
    display: flex;
}

.feedback-dialog__error {
    display: none;
    grid-column: 1 / -1;
    margin: 0;
    color: var(--alert);
    font-size: 0.7rem;
}

.feedback-dialog__error.is-visible {
    display: block;
}

/* Same keyframes as forms/phone-input (intl-tel strict reject). */
@keyframes cct-field-shake {
    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-6px);
    }

    40% {
        transform: translateX(6px);
    }

    60% {
        transform: translateX(-4px);
    }

    80% {
        transform: translateX(4px);
    }
}

.js-lead-form .is-invalid,
.js-lead-form .is-invalid input {
    border-color: var(--alert);
}

.js-lead-form .is-invalid input[type="checkbox"],
.js-lead-form input[type="checkbox"].is-invalid {
    outline: 1px solid var(--alert);
    outline-offset: 2px;
}

/* Shake the control only (input / checkbox), not the field label. */
.js-lead-form .is-invalid,
.js-lead-form .sidebar-contact-form__checkbox:has(input.is-invalid) {
    animation: cct-field-shake 0.45s ease;
}

.js-lead-form .phone-input__label {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .js-lead-form .is-invalid,
    .js-lead-form .sidebar-contact-form__checkbox:has(input.is-invalid) {
        animation: none;
    }
}

.feedback-dialog .phone-input__label {
    padding-left: var(--space-5);
}

.feedback-dialog__form .contact-section__textarea {
    min-height: 6rem;
    max-height: none;
}

.feedback-dialog .sidebar-contact-form__checkbox {
    position: relative;
    flex: none;
}

.feedback-dialog__submit {
    width: 100%;
    justify-content: center;
    grid-column: 1 / -1;
}


#buy-now-dialog-title {
    font-size: 2.6rem;
    margin: 0;
    font-weight: 500;
}

#buy-now-dialog .feedback-dialog__head {
    margin-bottom: 2.8rem;
}


#buy-now-dialog .feedback-dialog__form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

#buy-now-dialog .feedback-dialog__form> :nth-child(n+3) {
    grid-column: 1 / -1;
}


#buy-now-dialog .sidebar-contact-form__terms {
    margin-top: var(--space-5);
}



#consultation-dialog-title {
    margin-bottom: var(--space-3);
}


#consultation-dialog .sidebar-contact-form__terms {
    order: 1;
    grid-column: 1 / -1;
}

/* Mobile layout for bottom sheet (transform/opacity live in assets/css/global.css). */
@media (max-width: 768px) {
    dialog.feedback-dialog {
        width: 100%;
        max-width: 100%;
        margin: auto 0 0;
        border-radius: 2.5rem 2.5rem 0 0;
        max-height: min(92dvh, 100%);
        will-change: transform, opacity;
    }


    dialog.feedback-dialog .feedback-dialog__form,
    #buy-now-dialog .feedback-dialog__form {
        grid-template-columns: 1fr;
    }

    #buy-now-dialog-title {
        font-size: 1.4rem;
    }

    #buy-now-dialog .feedback-dialog__head {
        margin-bottom: 1.5rem;
    }

    .feedback-dialog__head {
        padding: var(--space-5) var(--space-5) 0;
    }

    #consultation-dialog-title{
       margin-bottom: var(--space-5);
    }

    .feedback-dialog__description {
        padding: 0 var(--space-5).8rem;
    }
    .feedback-dialog__form {
        padding: 0 var(--space-5) var(--space-5);
    }
}