/* =========================================================
   QUOTE FORM
   One set of rules for the dynamic quote form, wherever it
   lands. Everything colour-related goes through the tokens on
   .qf, so the three places it appears — the dark quote section,
   the glass card in the home hero, and the modal on pages with
   no form of their own — differ by a token block and nothing
   else.
========================================================= */

.qf {
    /* Default skin: the dark quote section on the service pages. */
    --qf-text: #ffffff;
    --qf-muted: rgba(255, 255, 255, .62);
    --qf-label: rgba(255, 255, 255, .82);
    --qf-field-bg: rgba(255, 255, 255, .07);
    --qf-field-border: rgba(255, 255, 255, .16);
    --qf-field-focus: rgba(254, 111, 1, .75);
    --qf-placeholder: rgba(255, 255, 255, .42);
    --qf-choice-bg: rgba(255, 255, 255, .06);
    --qf-accent: var(--orange, #fe6f01);
    --qf-accent-ink: #171714;
    --qf-error: #ff9c6e;
    --qf-arrow: %23ffffff;

    position: relative;
    display: grid;
    gap: 16px;
    padding: 26px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: var(--qf-text);
}

/* ---- Service chooser ---- */
.qf-chooser {
    margin: 0;
    padding: 0;
    border: 0;
}

.qf-legend {
    padding: 0;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--qf-label);
}

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

.qf-service input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.qf-service-face {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--qf-field-border);
    background: var(--qf-field-bg);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    cursor: pointer;
    transition: border-color 220ms ease, background 220ms ease, transform 220ms ease;
}

.qf-service-face i,
.qf-service-face svg {
    flex: none;
    width: 17px;
    height: 17px;
    color: var(--qf-accent);
}

.qf-service-face:hover {
    border-color: var(--qf-field-focus);
    transform: translateY(-1px);
}

.qf-service input:checked + .qf-service-face {
    border-color: var(--qf-accent);
    background: var(--qf-accent);
    color: var(--qf-accent-ink);
}

.qf-service input:checked + .qf-service-face i,
.qf-service input:checked + .qf-service-face svg {
    color: var(--qf-accent-ink);
}

.qf-service input:focus-visible + .qf-service-face {
    outline: 2px solid var(--qf-accent);
    outline-offset: 2px;
}

.qf-hint,
.qf-blurb {
    margin: 0;
    font-size: 13px;
    color: var(--qf-muted);
}

.qf-blurb {
    grid-column: 1 / -1;
}

/* ---- Fields ---- */
.qf-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.qf-fields[hidden],
.qf-foot[hidden] {
    display: none;
}

.qf-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.qf-field--half {
    grid-column: span 1;
}

.qf-field--full {
    grid-column: 1 / -1;
}

.qf-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--qf-label);
}

.qf-optional {
    font-weight: 600;
    color: var(--qf-muted);
}

.qf-input {
    width: 100%;
    padding: 13px 15px;
    border-radius: 13px;
    border: 1px solid var(--qf-field-border);
    background: var(--qf-field-bg);
    color: var(--qf-text);
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    transition: border-color 240ms ease, background 240ms ease;
}

.qf-input::placeholder {
    color: var(--qf-placeholder);
}

.qf-input:focus {
    outline: none;
    border-color: var(--qf-field-focus);
}

.qf-textarea {
    min-height: 92px;
    resize: vertical;
}

/* The prompt option stays muted until a real choice is made. */
.qf-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    color: var(--qf-placeholder);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
}

.qf-select.is-filled {
    color: var(--qf-text);
}

.qf-select option {
    color: #171714;
}

/* ---- Checkbox and radio groups ---- */
.qf-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.qf-choice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 100px;
    border: 1px solid var(--qf-field-border);
    background: var(--qf-choice-bg);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 220ms ease, background 220ms ease;
}

.qf-choice input {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 15px;
    height: 15px;
    margin: 0;
    border-radius: 5px;
    border: 1px solid var(--qf-field-border);
    background: transparent;
    cursor: pointer;
    transition: border-color 200ms ease, background 200ms ease;
}

.qf-choice input[type="radio"] {
    border-radius: 50%;
}

.qf-choice input:checked {
    border-color: var(--qf-accent);
    background: var(--qf-accent);
    box-shadow: inset 0 0 0 2.5px var(--qf-field-bg);
}

.qf-choice:hover {
    border-color: var(--qf-field-focus);
}

.qf-choice:has(input:checked) {
    border-color: var(--qf-accent);
}

.qf-choice input:focus-visible {
    outline: 2px solid var(--qf-accent);
    outline-offset: 2px;
}

/* ---- Errors ---- */
.qf-error {
    display: none;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--qf-error);
}

.qf-field.is-invalid .qf-error {
    display: block;
}

.qf-field.is-invalid .qf-input {
    border-color: var(--qf-error);
}

/* ---- Foot ---- */
.qf-foot {
    display: grid;
    gap: 10px;
}

.qf-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 14px 20px;
    border: 0;
    border-radius: 13px;
    background: var(--qf-accent);
    color: var(--qf-accent-ink);
    font-family: "Manrope", sans-serif;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 240ms cubic-bezier(.2, .8, .2, 1), box-shadow 240ms ease;
}

.qf-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(254, 111, 1, .34);
}

.qf-submit i,
.qf-submit svg {
    width: 17px;
    height: 17px;
}

/* The second delivery route, kept quiet next to the WhatsApp button. */
.qf-alt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 2px;
    border: 0;
    background: none;
    color: var(--qf-muted);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: color 200ms ease;
}

.qf-alt:hover {
    color: var(--qf-accent);
}

.qf-alt i,
.qf-alt svg {
    width: 14px;
    height: 14px;
}

.qf-submit i.fa-brands {
    width: auto;
    height: auto;
    font-size: 17px;
}

.qf-note {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 11.5px;
    color: var(--qf-muted);
}

.qf-note i,
.qf-note svg {
    width: 13px;
    height: 13px;
}

.qf-status:empty {
    display: none;
}

.qf-status {
    margin: 0;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--qf-accent);
}

/* =====================================================
   SKIN — HOME HERO
   Glass card on the orange banner: dark ink, light fields.
   ====================================================== */
.qf--hero {
    --qf-text: #171714;
    --qf-muted: #554f47;
    --qf-label: #3d3830;
    --qf-field-bg: rgba(255, 255, 255, .68);
    --qf-field-border: rgba(255, 255, 255, .72);
    --qf-field-focus: rgba(254, 111, 1, .9);
    --qf-placeholder: #4a443b;
    --qf-choice-bg: rgba(255, 255, 255, .6);
    --qf-error: #a32e00;

    padding: 0;
    gap: 13px;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.qf--hero .qf-note {
    display: none;
}

.qf--hero .qf-fields {
    gap: 10px;
}

.qf--hero .qf-input {
    padding: 11px 14px;
    border-radius: 12px;
}

/* =====================================================
   SKIN — MODAL
   The Book Online form. The card is capped at the viewport and
   the FORM scrolls inside it, rather than the card growing tall
   enough to push the whole overlay into a scroll. Moving &
   storage asks fourteen questions; on a laptop that is taller
   than the screen, and scrolling the overlay took the heading
   and the close button off the top with it. Now the heading and
   the close button stay put and only the fields move.
   ====================================================== */
.qf-modal[hidden] {
    display: none;
}

.qf-modal {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    /* The card handles its own scrolling now, so the overlay never does. */
    overflow: hidden;
}

.qf-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(23, 23, 20, .58);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: qf-fade 220ms ease both;
}

.qf-modal-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 660px;
    /* Capped, not fixed: a four-field service stays compact instead of
       sitting in a half-empty box, and a fourteen-field one stops here and
       scrolls. */
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    margin: 0 auto;
    padding: 30px 30px 26px;
    border-radius: 26px;
    background: #ffffff;
    border: 1px solid #ece7de;
    box-shadow: 0 40px 90px rgba(23, 23, 20, .3);
    overflow: hidden;
    animation: qf-rise 280ms cubic-bezier(.2, .8, .2, 1) both;
}

.qf-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #ece7de;
    border-radius: 50%;
    background: #fffdf8;
    color: var(--gray, #706b61);
    cursor: pointer;
    transition: background 220ms ease, color 220ms ease;
}

.qf-modal-close:hover {
    background: var(--orange, #fe6f01);
    border-color: var(--orange, #fe6f01);
    color: #171714;
}

.qf-modal-close i,
.qf-modal-close svg {
    width: 17px;
    height: 17px;
}

.qf-modal-head {
    flex: none;
    margin-bottom: 20px;
    padding-right: 44px;
}

.qf-modal-head span {
    display: inline-block;
    margin-bottom: 8px;
    padding: 5px 12px;
    border-radius: 100px;
    background: rgba(254, 111, 1, .1);
    color: var(--orange-dark, #cb5901);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.qf-modal-head h2 {
    font-family: "Manrope", sans-serif;
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--black, #171714);
}

.qf-modal-head p {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--gray, #706b61);
}

/* This is the part that scrolls. The negative margin plus matching padding
   lets the scrollbar sit at the card's edge while the fields keep their
   inset, and `contain` stops the scroll chaining to the page behind. */
.qf-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0 -30px -26px;
    padding: 0 30px 26px;
    /* Firefox: thumb then track. */
    scrollbar-width: thin;
    scrollbar-color: var(--orange, #fe6f01) rgba(254, 111, 1, .12);
}

.qf-modal-body::-webkit-scrollbar {
    width: 10px;
}

/* The white border keeps the thumb reading as a rounded pill inset from the
   card edge rather than a bar stuck to it. */
.qf-modal-body::-webkit-scrollbar-thumb {
    border: 2px solid #ffffff;
    border-radius: 100px;
    background: var(--orange, #fe6f01);
}

.qf-modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--orange-dark, #cb5901);
}

.qf-modal-body::-webkit-scrollbar-track {
    border: 2px solid #ffffff;
    border-radius: 100px;
    background: rgba(254, 111, 1, .12);
}

.qf-modal-body .qf {
    --qf-text: #171714;
    --qf-muted: #706b61;
    --qf-label: #3d3830;
    --qf-field-bg: #fffdf8;
    --qf-field-border: #e8e3da;
    --qf-field-focus: rgba(254, 111, 1, .9);
    --qf-placeholder: #a8a294;
    --qf-choice-bg: #fffdf8;
    --qf-error: #c2410c;

    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.qf-locked,
.qf-locked body {
    overflow: hidden;
}

@keyframes qf-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes qf-rise {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .qf-modal-card,
    .qf-modal-backdrop,
    .qf-submit,
    .qf-service-face {
        animation: none;
        transition: none;
    }
}

/* =====================================================
   RESPONSIVE
   ====================================================== */
@media (max-width: 760px) {
    .qf {
        padding: 20px 18px;
    }

    .qf-fields {
        grid-template-columns: 1fr;
    }

    .qf-modal-card {
        padding: 24px 20px 22px;
        border-radius: 22px;
    }

    .qf-modal-body {
        margin: 0 -20px -22px;
        padding: 0 20px 22px;
    }

    .qf-service-grid {
        gap: 6px;
    }
}