/*
 * ========================================
 * OFFERTE
 * Cart, checkout en PDP.
 * ========================================
 *
 * Tokens van het thema. Knoppen: zelfde hoogte (48px),
 * hoek (--radius-md) en lettermaat als "In winkelwagen"
 * op de PDP. Volgorde overal: eerst bestellen, dan offerte.
 */


/* ========================================
   MELDINGEN (cart + checkout)
   Markup van de WooCommerce-blokken; hier
   alleen ruimte en tokens.
======================================== */

.wce-quote-notice {
    margin: 0 0 24px 0 !important;

    border-radius: var(--radius-md);

    color: var(--blue-900);
}

.wce-quote-notice a {
    color: var(--blue-500);

    font-weight: 600;
}

.wce-quote-notice a:hover {
    color: var(--blue-900);
}


/* ========================================
   CART: KNOPPEN "AFREKENEN" — OF — "OFFERTE"
   Zelfde vorm als "In winkelwagen" op de PDP:
   48px hoog, --radius-md, 1rem/700, icoon vóór
   de tekst.
   - Gewoon: afrekenen gevuld (--blue-500,
     winkelwagen-icoon via mask, want de tekst
     komt uit React), "of", offerte outline.
   - ?offerte=1 (.wce-quote-cart): omgedraaid,
     offerte gevuld bovenaan, afrekenen outline.
     Alleen order + kleuren, zelfde markup.
   !important: buttons.css zet op alle knoppen
   eigen achtergrond, padding en hoek.
======================================== */

.wp-block-woocommerce-cart .wc-block-cart__submit-container:not(.wc-block-cart__submit-container--sticky) {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Afrekenen */
.wp-block-woocommerce-cart .wc-block-cart__submit-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: 100%;
    min-height: 48px;

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

    background: var(--blue-500) !important;
    border: 0 !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;

    color: var(--white) !important;

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

    transition: background-color .2s ease;
}

.wp-block-woocommerce-cart .wc-block-cart__submit-button::before {
    content: "";

    flex: 0 0 auto;

    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%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 2-1.58l1.65-7.42H5.12'/%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%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 2-1.58l1.65-7.42H5.12'/%3E%3C/svg%3E") no-repeat center / contain;
}

.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover {
    background: var(--blue-900) !important;

    color: var(--white) !important;
}

.wp-block-woocommerce-cart .wc-block-cart__submit-button:focus-visible {
    outline: 2px solid var(--blue-400);
    outline-offset: 2px;
}

.wp-block-woocommerce-cart .wc-block-cart__submit-button .wc-block-components-button__text {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* Offerte aanvragen */
.wce-quote-cart-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: 100%;
    min-height: 48px;

    padding: 0 20px;

    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: inset 0 0 0 1px var(--blue-500);

    color: var(--blue-500);

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

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

.wce-quote-cart-button:hover {
    background: var(--blue-100);

    color: var(--blue-900);
    text-decoration: none;
}

.wce-quote-cart-button:focus-visible {
    outline: 2px solid var(--blue-400);
    outline-offset: 2px;
}

.wce-quote-cart-button__icon {
    flex: 0 0 auto;

    width: 18px;
    height: 18px;
}

/* "of": lijntje — woord — lijntje */
.wce-quote-or {
    display: flex;
    align-items: center;
    gap: 12px;

    color: var(--neutral-500);

    font-size: 0.875rem;
    line-height: 1;
}

.wce-quote-or::before,
.wce-quote-or::after {
    content: "";

    flex: 1 1 auto;

    height: 1px;

    background: var(--neutral-200);
}


/* ----------------------------------------
   OFFERTEMODUS (?offerte=1): OMGEDRAAID
---------------------------------------- */

.wce-quote-cart .wce-quote-cart-button {
    order: -1;

    background: var(--blue-500);
    box-shadow: none;

    color: var(--white);
}

.wce-quote-cart .wce-quote-cart-button:hover {
    background: var(--blue-900);

    color: var(--white);
}

.wce-quote-cart .wce-quote-or {
    order: 0;
}

.wce-quote-cart .wc-block-cart__submit-container:not(.wc-block-cart__submit-container--sticky) .wc-block-cart__submit-button {
    order: 1;

    background: var(--white) !important;
    box-shadow: inset 0 0 0 1px var(--blue-500) !important;

    color: var(--blue-500) !important;
}

.wce-quote-cart .wc-block-cart__submit-container:not(.wc-block-cart__submit-container--sticky) .wc-block-cart__submit-button:hover {
    background: var(--blue-100) !important;

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


/* ========================================
   PDP: TEKSTREGEL
   Onder de kooprij, vóór de link naar de
   aanleverspecificaties. Klein en rustig:
   "In winkelwagen" blijft de actie die
   opvalt.
======================================== */

.wce-quote-pdp {
    display: flex;
    align-items: flex-start;
    gap: 8px;

    margin: 16px 0 0 0;

    color: var(--neutral-600);

    font-size: 0.875rem;
    line-height: 1.45;
}

.wce-quote-pdp__icon {
    flex: 0 0 auto;

    width: 18px;
    height: 18px;

    margin-top: 1px;

    color: var(--blue-400);
}


/* ========================================
   BEDANKPAGINA: "OFFERTE ACCEPTEREN EN BETALEN"
   Zelfde vorm als de knoppen in de cart.
======================================== */

.wce-quote-thankyou {
    margin: 0 0 32px 0;
}

.wce-quote-pay-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;

    padding: 0 24px;

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

    color: var(--white);

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

    transition: background-color .2s ease;
}

.wce-quote-pay-button:hover,
.wce-quote-pay-button:focus {
    background: var(--blue-900);

    color: var(--white);
    text-decoration: none;
}

.wce-quote-pay-button:focus-visible {
    outline: 2px solid var(--blue-400);
    outline-offset: 2px;
}