/* Form fields and buttons use Kaffa's own styles (inputs, .lte-btn, grid);
   this file only lays out the dialog. Colors and fonts come from the theme's CSS variables. */

html.fqm-is-open { overflow: hidden; }

.fqm-wrap { margin: 20px 0; }

.fqm-modal {
    width: min(760px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    padding: 0;
    border: 0;
    background: var(--white, #fff);
    color: var(--black, #151515);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
    overflow: auto;
    overscroll-behavior: contain;
}
.fqm-modal[open] { animation: fqm-in .2s ease-out; }
.fqm-modal::backdrop { background: rgba(21, 21, 21, .7); }
.fqm-modal [hidden] { display: none !important; }

@keyframes fqm-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

.fqm-inner { position: relative; padding: 40px 40px 20px; }

.fqm-title { margin: 0 40px 5px 0; }
.fqm-product { margin: 0 0 25px; color: var(--main, #d12323); font-weight: 600; }

.fqm-form p { margin: 0 0 20px; }
.fqm-form input[type="text"],
.fqm-form input[type="email"],
.fqm-form input[type="tel"],
.fqm-form textarea { width: 100%; box-sizing: border-box; }
.fqm-form textarea { resize: vertical; }

.fqm-quantity { display: flex; align-items: center; gap: 15px; }
.fqm-quantity input { width: 110px; }

.fqm-consent label { display: flex; align-items: flex-start; gap: 10px; font-weight: normal; }
.fqm-consent input { margin-top: .35em; flex-shrink: 0; }

.fqm-error { color: var(--red, #d12323); }
.fqm-success { margin: 0 0 20px; padding: 20px; background: var(--gray, #efece5); font-weight: 600; }

.fqm-submit:disabled { opacity: .6; cursor: wait; }

/* Honeypot: hidden from people, visible to bots */
.fqm-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fqm-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
    color: var(--black, #151515);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}
.fqm-close:hover,
.fqm-close:focus-visible { background: none; color: var(--main, #d12323); }

.fqm-loop-btn { margin-top: 6px; }
.fqm-price-on-request { font-style: italic; }

@media (max-width: 575px) {
    .fqm-inner { padding: 30px 20px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .fqm-modal[open] { animation: none; }
}