/* ----- GLOBAL: VERWIJDER ALLE BORDER-RADIUS ----- */
.wc-block-checkout *,
.wc-block-checkout *::before,
.wc-block-checkout *::after {
    border-radius: 0 !important;
}

/* ----- H2 TITELS ----- */
.wc-block-checkout h2,
.wc-block-components-title,
.wc-block-components-checkout-step__title,
.wc-block-components-checkout-order-summary__title-text {
    font-family: 'DM Sans', Helvetica, Arial, Lucida, sans-serif !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
    color: #1a1a1a !important;
}

/* ----- FORM FIELDS ----- */
.wc-block-components-text-input input,
.wc-blocks-components-select__select,
.wc-blocks-components-select__container,
.wc-block-components-textarea textarea,
.wc-block-components-combobox .components-form-token-field__input-container,
#afleveropties-section input,
#afleveropties-section select {
    border: 1px solid #d4d4d4 !important;
    background-color: #fff !important;
    font-family: 'DM Sans', Helvetica, Arial, Lucida, sans-serif !important;
}

.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus,
.wc-block-components-textarea textarea:focus {
    border-color: #1a5a3a !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ----- SIDEBAR / ORDER SUMMARY ----- */
.wc-block-checkout__sidebar,
.wp-block-woocommerce-checkout-totals-block {
    background: transparent !important;
    padding: 0 !important;
}

/* Main container with border */
.wp-block-woocommerce-checkout-order-summary-block {
    background: #fff !important;
    border: 1px solid #d9d9d9 !important;
    padding: 0 !important;
}

/* Order summary title */
.wc-block-components-checkout-order-summary__title {
    padding: 12px 20px !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

.wc-block-components-checkout-order-summary__title-text {
    font-family: 'DM Sans', Helvetica, Arial, Lucida, sans-serif !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
    color: #1a1a1a !important;
	margin: 0 !important;
}

/* Hide price and icon in header */
.wc-block-components-checkout-order-summary__title-price,
.wc-block-components-checkout-order-summary__title-icon {
    display: none !important;
}

/* Always keep the order summary expanded (not collapsible on mobile) */
.wc-block-components-checkout-order-summary__content {
    padding: 0 !important;
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Title is no longer a working toggle, make it non-interactive */
.wc-block-components-checkout-order-summary__title {
    pointer-events: none !important;
    cursor: default !important;
}

/* ----- PRODUCT ITEMS ----- */
.wp-block-woocommerce-checkout-order-summary-cart-items-block {
    padding: 0 20px 20px 20px !important;
    border: none !important;
}

.wc-block-components-order-summary {
    border: none !important;
}

/* Hide "Type levering" on block-based checkout */
.wc-block-components-product-details__type-levering {
    display: none !important;
}

.wc-block-components-order-summary-item {
    padding: 10px !important;
    margin: 0 0 15px 0 !important;
    border: none !important;
    display: grid !important;
    grid-template-columns: 25px 1fr auto !important;
    gap: 5px 10px !important;
    align-items: start !important;
}

.wc-block-components-order-summary-item:last-child {
    margin-bottom: 0 !important;
}

/* Product image - shown above the title (middle column, row 1) */
.wc-block-components-order-summary-item__image {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    margin: 0 0 8px 0 !important;
    position: relative !important;
}

.wc-block-components-order-summary-item__image img {
    width: 100px !important;
    max-width: 100px !important;
    height: auto !important;
    display: block !important;
    border-radius: 4px !important;
}

/* Hide original quantity element (badge over the image) */
.wc-block-components-order-summary-item__quantity {
    display: none !important;
}

/* New quantity display via JS - centered vertically over the full row */
.product-quantity-display {
    font-family: 'DM Sans', Helvetica, Arial, Lucida, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #1a1a1a !important;
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
    line-height: 1.5 !important;
    padding-top: 0 !important;
}

/* Product description - middle column, row 2 (below the image) */
.wc-block-components-order-summary-item__description {
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
	padding: 0px 0px 0px 0px !important;
}

/* Product name */
.wc-block-components-product-name {
    font-family: 'Bebas Neue', sans-serif !important;
    font-weight: 400 !important;
    font-size: 20px !important;
    text-transform: uppercase !important;
    color: #1a1a1a !important;
    display: block !important;
    margin: 0 0 0px 0 !important;
    padding-bottom: 0px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.5px !important;
}

/* Hide product description */
.wc-block-components-product-metadata__description {
    display: none !important;
}

/* Hide individual price under product name */
.wc-block-components-order-summary-item__individual-prices {
    display: none !important;
}

/* Product variations / attributes */
.wc-block-components-product-details {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    color: #1a1a1a !important;
    font-family: 'DM Sans', Helvetica, Arial, Lucida, sans-serif !important;
    line-height: 1.6 !important;
}

.wc-block-components-product-details li {
    margin: 0 0 2px 0 !important;
    line-height: 1.6 !important;
}

.wc-block-components-product-details__name {
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

.wc-block-components-product-details__name::after {
    content: " " !important;
}

.wc-block-components-product-details__value {
    font-weight: 400 !important;
    color: #1a1a1a !important;
}

/* Price - right column, aligned with the title (row 2) */
.wc-block-components-order-summary-item__total-price {
    font-family: 'DM Sans', Helvetica, Arial, Lucida, sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    text-align: right !important;
    color: #1a1a1a !important;
    grid-column: 3 !important;
    grid-row: 2 !important;
}

/* ----- COUPON / VOUCHER - HIDDEN ----- */
.wp-block-woocommerce-checkout-order-summary-coupon-form-block {
    display: none !important;
}

/* Verberg de "Levering"-regel in het besteloverzicht.
   Bezorging zit al in de productprijs; de verzendmethode staat op € 0 en
   blijft alleen bestaan zodat het afrekenen blijft werken. */
.wp-block-woocommerce-checkout-order-summary-shipping-block {
    display: none !important;
}

/* Verberg het native fee-blok: de bezorgkosten (zand/grind) tonen we zelf
   als aparte regel(s) excl. btw tussen subtotaal en de BTW-regel (via JS). */
.wp-block-woocommerce-checkout-order-summary-fee-block {
    display: none !important;
}

/* Verberg de native "Inclusief € X BTW"-subtitel onder het totaal via CSS,
   zodat de JS er niet aan hoeft te schrijven (voorkomt re-render/flikker). */
.wc-block-components-totals-footer-item-tax {
    display: none !important;
}

/* Transport-regel(s) in het besteloverzicht - zelfde opmaak als de totalen */
.custom-transport-line .wc-block-components-totals-item__label {
    padding-right: 10px !important;
}

/* ----- TOTALS ----- */
.wp-block-woocommerce-checkout-order-summary-totals-block {
    border-top: 1px solid #d9d9d9 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
}

.wc-block-components-totals-wrapper {
    padding: 0 !important;
    margin: 0 !important;
}

/* Individual totals items */
.wc-block-components-totals-item {
    padding: 12px 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 0 !important;
    gap: 0px !important;
}

.wc-block-components-totals-item__label {
    font-family: 'DM Sans', Helvetica, Arial, Lucida, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    text-transform: uppercase !important;
}

.wc-block-components-totals-item__value {
    font-family: 'DM Sans', Helvetica, Arial, Lucida, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #1a1a1a !important;
}

/* Change subtotal label to TOTAALBEDRAG EXCL. BTW */
.wp-block-woocommerce-checkout-order-summary-subtotal-block .wc-block-components-totals-item__label {
    font-size: 0 !important;
}
.wp-block-woocommerce-checkout-order-summary-subtotal-block .wc-block-components-totals-item__label::before {
    content: "TOTAALBEDRAG EXCL. BTW";
    font-size: 14px !important;
    font-family: 'DM Sans', Helvetica, Arial, Lucida, sans-serif !important;
    font-weight: 700 !important;
}

/* VAT row */
.wc-block-components-totals-taxes .wc-block-components-totals-item__label {
    text-transform: none !important;
    font-weight: 700 !important;
}

/* TOTAL footer - TOTAALBEDRAG INCL. BTW */
.wc-block-components-totals-footer-item {
    background: transparent !important;
    border-bottom: none !important;
    margin: 0 !important;
    padding: 12px 20px !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-size: 0 !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label::before {
    content: "TOTAALBEDRAG INCL. BTW";
    font-size: 14px !important;
    font-family: 'DM Sans', Helvetica, Arial, Lucida, sans-serif !important;
    font-weight: 700 !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item-tax-value {
    font-family: 'DM Sans', Helvetica, Arial, Lucida, sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    color: #1a1a1a !important;
}

/* ----- CHECKBOXES STYLING ----- */
.wc-block-components-checkbox input[type="checkbox"],
.wc-block-checkout input[type="checkbox"],
.checkout-moved-elements input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    border: 1px solid #d9d9d9 !important;
    background: #fff !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.wc-block-components-checkbox input[type="checkbox"]:checked,
.wc-block-checkout input[type="checkbox"]:checked,
.checkout-moved-elements input[type="checkbox"]:checked {
    background-color: #d9d9d9 !important;
    border-color: #d9d9d9 !important;
}

.wc-block-components-checkbox input[type="checkbox"]:checked::after,
.wc-block-checkout input[type="checkbox"]:checked::after,
.checkout-moved-elements input[type="checkbox"]:checked::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    top: 45% !important;
    width: 5px !important;
    height: 9px !important;
    background: none !important;
    border: solid #1a1a1a !important;
    border-width: 0 2.5px 2.5px 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) rotate(45deg) !important;
}

/* Hide WooCommerce's own SVG checkmark */
.wc-block-components-checkbox__mark {
    display: none !important;
}

/* Checkbox label styling */
.wc-block-components-checkbox label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    font-family: 'DM Sans', Helvetica, Arial, Lucida, sans-serif !important;
    font-size: 14px !important;
    color: #1a1a1a !important;
}

.wc-block-components-checkbox__label {
    font-family: 'DM Sans', Helvetica, Arial, Lucida, sans-serif !important;
    font-size: 14px !important;
    color: #1a1a1a !important;
}

/* ----- HIDE ORIGINAL ELEMENTS LEFT ----- */
.wp-block-woocommerce-checkout-fields-block .wp-block-woocommerce-checkout-order-note-block,
.wp-block-woocommerce-checkout-fields-block .wp-block-woocommerce-checkout-terms-block,
.wp-block-woocommerce-checkout-fields-block .wp-block-woocommerce-checkout-actions-block {
    display: none !important;
}

/* ----- MOVED ELEMENTS RIGHT ----- */
.checkout-moved-elements {
    margin-top: 20px;
    padding-top: 0;
    border-top: none;
}

/* ----- NOTE FIELD ----- */
.checkout-note-moved {
    margin-bottom: 20px !important;
    padding: 0 !important;
    border-bottom: none !important;
}

.checkout-note-moved .note-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.checkout-note-moved input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    border: 1px solid #d9d9d9 !important;
    background: #fff !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

.checkout-note-moved input[type="checkbox"]:checked {
    background-color: #d9d9d9 !important;
    border-color: #d9d9d9 !important;
}

.checkout-note-moved input[type="checkbox"]:checked::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 45% !important;
    width: 5px !important;
    height: 9px !important;
    border: solid #1a1a1a !important;
    border-width: 0 2.5px 2.5px 0 !important;
    transform: translate(-50%, -50%) rotate(45deg) !important;
}

.checkout-note-label {
    font-family: 'DM Sans', Helvetica, Arial, Lucida, sans-serif !important;
    font-size: 14px !important;
    color: #1a1a1a !important;
    cursor: pointer !important;
    margin: 0 !important;
}

.checkout-note-moved textarea {
    width: 100%;
    border: 1px solid #d4d4d4 !important;
    padding: 12px;
    font-size: 14px;
    font-family: 'DM Sans', Helvetica, Arial, Lucida, sans-serif !important;
    min-height: 80px;
    resize: vertical;
    display: none;
    margin-top: 12px;
}

.checkout-note-moved textarea.visible {
    display: block;
}

.checkout-note-moved textarea::placeholder {
    color: #999;
}

/* ----- TERMS TEXT ----- */
.checkout-terms-moved {
    font-family: 'DM Sans', Helvetica, Arial, Lucida, sans-serif !important;
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin: 20px 0;
}

.checkout-terms-moved a {
    color: #1a5a3a;
    text-decoration: none;
}

.checkout-terms-moved a:hover {
    text-decoration: underline;
}

/* ----- ORDER AND PAY BUTTON ----- */
.checkout-actions-moved {
    margin-top: 15px;
}

.checkout-submit-button {
    background-color: #1a1a1a !important;
    color: #fff !important;
    border: none !important;
    padding: 16px 32px !important;
    font-size: 24px !important;
    font-family: 'Bebas Neue', sans-serif !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
    display: inline-block !important;
    width: auto !important;
}

.checkout-submit-button:hover {
    background-color: #424242 !important;
}

/* ----- RESPONSIVE ----- */
@media (max-width: 768px) {
    .checkout-submit-button {
        width: 100% !important;
    }
    
    /* Mobile: 2-column grid, image above title, price overlays metadata cell */
    .wc-block-components-order-summary-item {
        grid-template-columns: 25px 1fr !important;
        grid-template-areas:
            "qty image"
            "qty title"
            "qty content"
            "qty ship" !important;
        gap: 5px 10px !important;
        align-items: start !important;
    }

    /* Quantity: vertically centered over the full row */
    .product-quantity-display {
        grid-column: unset !important;
        grid-row: unset !important;
        grid-area: qty !important;
        align-self: center !important;
        padding-top: 0 !important;
    }

    /* Image above the title */
    .wc-block-components-order-summary-item__image {
        grid-column: unset !important;
        grid-row: unset !important;
        grid-area: image !important;
        margin: 0 0 8px 0 !important;
    }

    /* Let description children participate in the parent grid */
    .wc-block-components-order-summary-item__description {
        display: contents !important;
    }

    /* Title sits in the attributes column (not over qty) */
    .wc-block-components-order-summary-item__description .wc-block-components-product-name {
        grid-area: title !important;
        padding: 0 !important;
        margin: 0 0 5px 0 !important;
    }
    
    /* Metadata fills the content cell */
    .wc-block-components-order-summary-item__description .wc-block-components-product-metadata {
        grid-area: content !important;
        padding: 0 !important;
    }
    
    /* Shipping note below on its own row */
    .wc-block-components-order-summary-item__description .shipping-included-note {
        grid-area: ship !important;
        padding: 0 !important;
    }
    
    /* Hide empty price wrapper div (would otherwise grab grid auto-placement) */
    .wc-block-components-order-summary-item .wc-block-cart-item__prices {
        display: none !important;
    }
    
    /* Price: overlaid in bottom-right of the metadata cell */
    .wc-block-components-order-summary-item__total-price {
        grid-column: unset !important;
        grid-row: unset !important;
        grid-area: content !important;
        justify-self: end !important;
        align-self: end !important;
        white-space: nowrap !important;
    }
    
    /* Stack each attribute on its own line */
    .wc-block-components-product-details {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
    }
    
    .wc-block-components-product-details > span {
        display: block !important;
    }
    
    /* Hide the " / " separators between attributes on mobile */
    .wc-block-components-product-details > span > span[aria-hidden="true"] {
        display: none !important;
    }

    .checkout-usps-divi h4 {
        line-height: 1.1em !important;
    }

    #afleveropties-section {
        padding: 0px !important;
    }

    .page-afrekenen h1 {
        font-size: 35px !important;
    }
}

@media (max-width: 981px) {
    .page-afrekenen h1 {
        font-size: 50px !important;
    }

    .page-afrekenen .et_pb_section_0  {
        padding-top: 0px;
        padding-bottom: 30px;
    }

    /* Remove right padding on the main checkout column at this breakpoint */
    .wc-block-components-sidebar-layout .wc-block-components-main {
        padding-right: 0 !important;
    }
}

/* ----- PAYMENT OPTIONS - styled like the billing checkbox (square + tick) ----- */
.wc-block-components-radio-control__input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    border: 1px solid #d9d9d9 !important;
    border-radius: 0 !important;
    background-color: #fff !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.wc-block-components-radio-control__input[type="radio"]:checked {
    background-color: #d9d9d9 !important;
    border-color: #d9d9d9 !important;
    box-shadow: none !important;
}

/* Hide WooCommerce's own black dot (::before) so only our tick shows */
.wc-block-components-radio-control__input[type="radio"]::before,
.wc-block-components-radio-control__input[type="radio"]:checked::before {
    display: none !important;
    content: none !important;
}

.wc-block-components-radio-control__input[type="radio"]:checked::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    top: 45% !important;
    width: 5px !important;
    height: 9px !important;
    background: none !important;
    border: solid #1a1a1a !important;
    border-width: 0 2.5px 2.5px 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) rotate(45deg) !important;
}