/*
 * ========================================
 * WOOCOMMERCE
 * OFFERTEPAGINA (WPC Request a Quote)
 * ========================================
 *
 * Alleen geladen op de offertepagina (zie
 * wc-quote-polylang.inc.php, punt 9).
 *
 * Opbouw (desktop): lijst links, aanvraagformulier
 * rechts in een --blue-100 vlak — zelfde verhouding
 * als de PDP (≈ 58/42). Onder 1025px onder elkaar.
 *
 * Selectors starten bij #wpcrq-quote-page: de ID
 * wint van de plugin-CSS, WooCommerce en GP zonder
 * overal !important. Alleen op knoppen is !important
 * nodig (buttons.css zet dat op alle button-elementen).
 */


/* ========================================
   LAYOUT — LIJST + FORMULIER
======================================== */

/* Ruimte boven gelijk aan de PDP (2.5rem, mobiel 1.5rem) */
#wpcrq-quote-page {
    margin: 0 0 1rem 0;
    padding-top: 2.5rem;
}

@media (max-width: 768px) {

    #wpcrq-quote-page {
        padding-top: 1.5rem;
    }
}

@media (min-width: 1025px) {

    #wpcrq-quote-page .wpcrq-quote-page {
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        gap: 4rem;
        align-items: start;
    }

    /* Formulier blijft in beeld bij een lange lijst */
    #wpcrq-quote-page .wpcrq-quote-form-wrapper {
        position: sticky;
        top: 100px;
    }

    /* Na versturen verdwijnt de lijst (plugin-JS):
       dan alleen het bevestigingsvlak, niet rechts
       naast een lege kolom. */
    #wpcrq-quote-page .wpcrq-quote-page:has(.wpcrq-form-response.success) {
        grid-template-columns: minmax(0, 1fr);
        max-width: 640px;
    }

    #wpcrq-quote-page .wpcrq-quote-page:has(.wpcrq-form-response.success) .wpcrq-quote-form-wrapper {
        position: static;
    }
}

#wpcrq-quote-page .wpcrq-quote-table-wrapper {
    margin: 0;
}


/* ========================================
   LIJST
   Tabel van de plugin → lijst met rijen:
   foto · naam · aantal · verwijderen.
   Dunne lijn tussen de rijen (zoals de
   specificaties op de PDP).
======================================== */

#wpcrq-quote-page .wpcrq-quote-table,
#wpcrq-quote-page .wpcrq-quote-table tbody {
    display: block;

    width: 100%;

    margin: 0;

    background: none;
    border: 0;
    border-radius: 0;
}

/* Kolomkoppen: niet zichtbaar, wel voor schermlezers */
#wpcrq-quote-page .wpcrq-quote-table thead {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

#wpcrq-quote-page .wpcrq-quote-table td {
    display: block;

    margin: 0;
    padding: 0;

    background: none;
    border: 0;

    text-align: left;
}

#wpcrq-quote-page .wpcrq-quote-item {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto 40px;
    grid-template-areas: "thumb name qty remove";
    align-items: center;
    gap: 1.5rem;

    padding: 1.25rem 0;

    border-bottom: 1px solid var(--neutral-200);
}

#wpcrq-quote-page .wpcrq-quote-item:first-child {
    border-top: 1px solid var(--neutral-200);
}

#wpcrq-quote-page .wpcrq-quote-item .product-thumbnail { grid-area: thumb; }
#wpcrq-quote-page .wpcrq-quote-item .product-name      { grid-area: name; }
#wpcrq-quote-page .wpcrq-quote-item .product-quantity  { grid-area: qty; }
#wpcrq-quote-page .wpcrq-quote-item .product-remove    { grid-area: remove; }
#wpcrq-quote-page .wpcrq-quote-item .product-subtotal  { display: none; }


/* ---------- Foto: kaart zoals de PDP-galerij ---------- */

#wpcrq-quote-page .product-thumbnail a {
    display: block;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background: var(--neutral-100);
    border-radius: var(--radius-md);
}

#wpcrq-quote-page .product-thumbnail img {
    display: block;

    width: 100%;
    max-width: none;
    height: 100%;

    padding: 10%;
    box-sizing: border-box;

    object-fit: contain;
}


/* ---------- Productnaam ---------- */

#wpcrq-quote-page .product-name a {
    color: var(--blue-900);

    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
}

#wpcrq-quote-page .product-name a:hover,
#wpcrq-quote-page .product-name a:focus-visible {
    color: var(--blue-500);
}

/* Variatie-gegevens die WooCommerce eventueel toont */
#wpcrq-quote-page .product-name dl.variation {
    margin: 0.25rem 0 0 0;

    color: var(--neutral-600);

    font-size: 0.875rem;
}


/* ---------- Verwijderen: ronde icoonknop ---------- */

#wpcrq-quote-page .product-remove a.remove {
    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 40px !important;
    height: 40px !important;

    margin: 0;

    background: transparent !important;
    border: 0;
    border-radius: var(--radius-pill) !important;

    color: var(--neutral-500) !important;

    font-size: 0 !important;
    line-height: 0;
    text-decoration: none;

    transition: background-color .2s ease, color .2s ease;
}

/* Prullenbak i.p.v. × */
#wpcrq-quote-page .product-remove a.remove::before {
    content: "";

    width: 18px;
    height: 18px;

    background: currentColor;

    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E") no-repeat center / contain;
}

#wpcrq-quote-page .product-remove a.remove:hover,
#wpcrq-quote-page .product-remove a.remove:focus-visible {
    background: var(--blue-100) !important;
    color: var(--blue-900) !important;
}

#wpcrq-quote-page .product-remove a.remove:focus-visible {
    outline: 2px solid var(--blue-400);
    outline-offset: 2px;
}


/* ========================================
   AANTAL-KIEZER
   Identiek aan de PDP (wc-pdp.css): één doos,
   140 × 48px, − en + als iconen.
======================================== */

#wpcrq-quote-page div.quantity {
    display: flex;
    align-items: stretch;

    width: 140px;
    height: 48px;

    margin: 0;

    background: var(--white);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-md);

    overflow: hidden;

    transition: border-color .2s ease;
}

#wpcrq-quote-page div.quantity:hover,
#wpcrq-quote-page div.quantity:focus-within {
    border-color: var(--blue-400);
}

#wpcrq-quote-page div.quantity .qty {
    flex: 1 1 auto;

    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;

    margin: 0;
    padding: 0;

    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;

    color: var(--blue-900);

    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;

    -moz-appearance: textfield;
    appearance: textfield;
}

#wpcrq-quote-page div.quantity .qty:focus {
    outline: none;
}

#wpcrq-quote-page div.quantity .qty::-webkit-inner-spin-button,
#wpcrq-quote-page div.quantity .qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#wpcrq-quote-page div.quantity .minus,
#wpcrq-quote-page div.quantity .plus {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;

    width: 40px;
    height: auto;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;

    font-size: 0;
    line-height: 0;
    text-decoration: none;

    cursor: pointer;

    transition: background-color .2s ease;
}

#wpcrq-quote-page div.quantity .minus {
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312334f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
}

#wpcrq-quote-page div.quantity .plus {
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312334f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
}

#wpcrq-quote-page div.quantity .minus:hover,
#wpcrq-quote-page div.quantity .plus:hover {
    background-color: var(--neutral-100);
}


/* ========================================
   "LIJST BIJWERKEN"
   Secundaire pill (outline), rechts onder de
   lijst. Zelfde vorm als de offerte-pill in de
   header.
======================================== */

#wpcrq-quote-page .wpcrq-quote-table tr:not(.wpcrq-quote-item) {
    display: block;
}

#wpcrq-quote-page .wpcrq-quote-table td.actions {
    display: flex;
    justify-content: flex-end;

    padding: 1.25rem 0 0 0;
}

#wpcrq-quote-page .wpcrq-update-quote-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;

    height: 40px;

    margin: 0 !important;
    padding: 0 18px !important;

    background: var(--white) !important;
    border: 0 !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: inset 0 0 0 1px var(--blue-200);

    color: var(--blue-900) !important;

    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;

    transition: background-color .2s ease, box-shadow .2s ease;
}

/* Ververs-icoon */
#wpcrq-quote-page .wpcrq-update-quote-btn::before {
    content: "";

    width: 16px;
    height: 16px;

    background: currentColor;

    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 0 1-15.5 6.2L3 16M3 12a9 9 0 0 1 15.5-6.2L21 8M21 3v5h-5M3 21v-5h5'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 0 1-15.5 6.2L3 16M3 12a9 9 0 0 1 15.5-6.2L21 8M21 3v5h-5M3 21v-5h5'/%3E%3C/svg%3E") no-repeat center / contain;
}

#wpcrq-quote-page .wpcrq-update-quote-btn:hover {
    background: var(--blue-100) !important;
    box-shadow: inset 0 0 0 1px var(--blue-100);
}


/* ========================================
   AANVRAAGFORMULIER
   Vlak in --blue-100 (huisstijl, zelfde wash
   als de winkelmand-pill), velden wit.
   Twee kolommen: voornaam/achternaam en
   e-mail/telefoon naast elkaar, bericht en
   knop over de volle breedte.
======================================== */

#wpcrq-quote-page .wpcrq-quote-form-wrapper {
    width: auto;

    margin: 0;
    padding: 2.25rem;

    background: var(--blue-100);
    border-radius: var(--radius-md);

    box-sizing: border-box;
}

#wpcrq-quote-page .wpcrq-quote-form-wrapper h3 {
    margin: 0 0 1.5rem 0;

    color: var(--blue-900);

    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

#wpcrq-quote-page .wpcrq-quote-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1rem;
}

#wpcrq-quote-page .wpcrq-quote-form .clear {
    display: none;
}

#wpcrq-quote-page .wpcrq-quote-form .form-row {
    float: none;

    width: auto;

    margin: 0;
    padding: 0;
}

#wpcrq-quote-page .wpcrq-quote-form .form-row-wide,
#wpcrq-quote-page .wpcrq-quote-form .form-row:not(.form-row-first):not(.form-row-last),
#wpcrq-quote-page .wpcrq-quote-form .wpcrq-form-response {
    grid-column: 1 / -1;
}

/* Labels: zelfde stijl als "Aantal" en de variatielabels op de PDP */
#wpcrq-quote-page .wpcrq-quote-form label {
    display: block;

    margin: 0 0 0.5rem 0;

    color: var(--blue-900);

    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
}

#wpcrq-quote-page .wpcrq-quote-form .required {
    color: var(--blue-500);

    text-decoration: none;
}

/* Velden: hoogte en hoek van de aantal-kiezer */
#wpcrq-quote-page .wpcrq-quote-form .input-text {
    display: block;

    width: 100%;
    height: 48px;

    margin: 0;
    padding: 0 14px;

    background: var(--white);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-md);
    box-shadow: none;

    color: var(--blue-900);

    font-family: inherit;
    font-size: 1rem;
    line-height: 1.4;

    box-sizing: border-box;

    transition: border-color .2s ease, box-shadow .2s ease;
}

#wpcrq-quote-page .wpcrq-quote-form textarea.input-text {
    height: auto;
    min-height: 140px;

    padding: 12px 14px;

    resize: vertical;
}

#wpcrq-quote-page .wpcrq-quote-form .input-text:hover {
    border-color: var(--blue-400);
}

#wpcrq-quote-page .wpcrq-quote-form .input-text:focus {
    border-color: var(--blue-400);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-400) 25%, transparent);
}


/* ---------- Verstuurknop: primaire pill ---------- */

#wpcrq-quote-page #wpcrq_submit_button,
#wpcrq-quote-page .wpcrq-empty-quote .button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;

    height: 48px;

    margin: 0.25rem 0 0 0 !important;
    padding: 0 26px !important;

    background: var(--blue-500) !important;
    border: 0 !important;
    border-radius: var(--radius-pill) !important;

    color: var(--white) !important;

    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;

    cursor: pointer;

    transition: background-color .2s ease;
}

/* Pijl achter de tekst (CTA-systeem, handout §3) */
#wpcrq-quote-page #wpcrq_submit_button::after,
#wpcrq-quote-page .wpcrq-empty-quote .button::after {
    content: "";

    width: 18px;
    height: 18px;

    background: currentColor;

    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
}

#wpcrq-quote-page #wpcrq_submit_button:hover,
#wpcrq-quote-page .wpcrq-empty-quote .button:hover {
    background: var(--blue-900) !important;
}

#wpcrq-quote-page #wpcrq_submit_button:disabled,
#wpcrq-quote-page #wpcrq_submit_button.loading {
    opacity: 0.6;
    cursor: progress;
}

#wpcrq-quote-page .wpcrq-update-quote-btn:focus-visible,
#wpcrq-quote-page #wpcrq_submit_button:focus-visible,
#wpcrq-quote-page .wpcrq-empty-quote .button:focus-visible {
    outline: 2px solid var(--blue-400);
    outline-offset: 2px;
}


/* ---------- Melding na versturen ---------- */

#wpcrq-quote-page .wpcrq-form-response {
    margin: 0;
    padding: 1rem 1.25rem;

    background: var(--white);
    border: 0;
    border-left: 4px solid var(--teal-500);
    border-radius: var(--radius-md);

    color: var(--blue-900);

    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
}

#wpcrq-quote-page .wpcrq-form-response:empty {
    display: none;
}

/* Fout: geen rood in de huisstijl — eigen, gedempte tint */
#wpcrq-quote-page .wpcrq-form-response.error {
    border-left-color: #c2410c;
}

/* Minimum/maximum-melding van de plugin (bv. te weinig stuks) */
#wpcrq-quote-page .wpcrq-quote-form-wrapper .woocommerce-error {
    margin: 0;
    padding: 1rem 1.25rem;

    background: var(--white);
    border: 0;
    border-left: 4px solid #c2410c;
    border-radius: var(--radius-md);

    color: var(--blue-900);

    list-style: none;
}

#wpcrq-quote-page .wpcrq-quote-form-wrapper .woocommerce-error::before {
    display: none;
}


/* ========================================
   LEGE OFFERTELIJST
======================================== */

#wpcrq-quote-page .wpcrq-empty-quote {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;

    max-width: 640px;

    margin: 0 auto;
    padding: 3rem 2rem;

    background: var(--neutral-50);
    border-radius: var(--radius-md);

    color: var(--blue-900);

    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}


/* ========================================
   TABLET / MOBIEL
======================================== */

@media (max-width: 1024px) {

    #wpcrq-quote-page .wpcrq-quote-page {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
    }
}

@media (max-width: 768px) {

    /* Rij: foto links, naam + verwijderen naast elkaar,
       aantal onder de naam */
    #wpcrq-quote-page .wpcrq-quote-item {
        grid-template-columns: 72px minmax(0, 1fr) 40px;
        grid-template-areas:
            "thumb name remove"
            "thumb qty  qty";
        gap: 0.75rem 1rem;
    }

    #wpcrq-quote-page .wpcrq-quote-item .product-quantity {
        align-self: start;
    }

    #wpcrq-quote-page .wpcrq-quote-form-wrapper {
        padding: 1.5rem;
    }

    #wpcrq-quote-page .wpcrq-quote-form-wrapper h3 {
        font-size: 1.375rem;
    }
}

@media (max-width: 480px) {

    #wpcrq-quote-page .wpcrq-quote-form {
        grid-template-columns: minmax(0, 1fr);
    }

    #wpcrq-quote-page #wpcrq_submit_button {
        width: 100%;
    }
}

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

    #wpcrq-quote-page * {
        transition: none !important;
    }
}