.elementor-555 .elementor-element.elementor-element-858d465{--display:flex;}.elementor-555 .elementor-element.elementor-element-4cb2927{--display:flex;--min-height:0px;--flex-direction:row-reverse;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap-reverse;--justify-content:flex-end;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-555 .elementor-element.elementor-element-8fe57f8{width:100%;max-width:100%;z-index:2;text-align:end;}.elementor-555 .elementor-element.elementor-element-8fe57f8 img{width:60%;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-555 .elementor-element.elementor-element-2b2e75d{width:100%;max-width:100%;}.elementor-555 .elementor-element.elementor-element-2b2e75d .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:56px;font-weight:600;color:var( --e-global-color-5baddca );}.elementor-555 .elementor-element.elementor-element-f099939{--confirmation-message-display:block;--order-details-titles-totals-color:var( --e-global-color-5baddca );}:root{--page-title-display:none;}@media(max-width:767px){.elementor-555 .elementor-element.elementor-element-4cb2927{--justify-content:center;--flex-wrap:nowrap;--padding-top:0em;--padding-bottom:0em;--padding-left:2em;--padding-right:2em;}.elementor-555 .elementor-element.elementor-element-8fe57f8{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0em 0em 0em 0em;text-align:center;}.elementor-555 .elementor-element.elementor-element-8fe57f8 img{width:100%;}.elementor-555 .elementor-element.elementor-element-2b2e75d .elementor-heading-title{font-size:22px;}.elementor-555 .elementor-element.elementor-element-f099939{--sections-spacing:9px;--payment-details-space-between:45px;}}/* Start custom CSS for woocommerce-purchase-summary, class: .elementor-element-f099939 *//* =========================================
   WOOCOMMERCE SIMPEL & MOBILE FIRST
   ========================================= */

/* 1. Algemene container netjes maken */
.woocommerce-order {
    max-width: 600px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #333;
}

/* 2. Het groene succes bericht */
.woocommerce-notice.woocommerce-thankyou-order-received {
    background-color: #e8f5e9;
    color: #2e7d32;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    margin-bottom: 25px;
    border: 1px solid #c8e6c9;
    width: 100%;
    box-sizing: border-box;
}

/* 3. Bovenste lijstje (Bestelnummer, Datum, etc) */
ul.woocommerce-order-overview {
    display: flex;
    flex-direction: column; /* Onder elkaar op mobiel */
    padding: 0;
    margin: 0 0 30px 0;
    list-style: none;
    gap: 10px;
}

/* De blokjes in de lijst */
ul.woocommerce-order-overview li {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 6px;
    border: none !important; /* Forceer geen lijnen van thema */
    margin: 0 !important;
    display: flex;
    justify-content: space-between; /* Links tekst, Rechts waarde */
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
}

ul.woocommerce-order-overview li strong {
    font-weight: 700;
    color: #000;
}

/* 4. Bestelgegevens (De Tabel) - MOBILE FIRST RESET */
.woocommerce-table--order-details {
    width: 100%;
    border: none;
    border-collapse: collapse;
    margin-top: 20px;
}

/* Maak van alle tabel elementen blokken zodat we ze kunnen plaatsen */
.woocommerce-table--order-details,
.woocommerce-table--order-details tbody,
.woocommerce-table--order-details tfoot,
.woocommerce-table--order-details tr,
.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* Verberg de koprij (Product / Totaal) want dat is lelijk op mobiel */
.woocommerce-table--order-details thead {
    display: none;
}

/* --- PRODUCT GEDEELTE --- */
.woocommerce-table--order-details tbody tr {
    border-bottom: 2px solid #eee;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.woocommerce-table--order-details tbody td {
    padding: 5px 0;
    text-align: left;
    border: none;
}

/* Product naam groot */
.woocommerce-table--order-details .product-name a {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
    text-decoration: none;
}

/* Metadata blokje (datum en details) */
.wc-item-meta {
    margin-top: 10px;
    padding: 10px;
    background: #f4f4f4;
    border-radius: 4px;
    font-size: 0.9em;
    list-style: none;
}
.wc-item-meta li {
    margin-bottom: 5px;
}
.wc-item-meta p {
    margin: 0;
    display: inline;
}

/* --- TOTALEN (FOOTER) - DE CRUCIALE STAP --- */
/* Hier zorgen we dat LABEL links staat en PRIJS rechts */

.woocommerce-table--order-details tfoot tr {
    display: flex !important; /* Forceer flexbox */
    justify-content: space-between; /* Duw ze uit elkaar */
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.woocommerce-table--order-details tfoot th {
    text-align: left;
    width: auto; /* Niet 100% breedte */
    font-weight: normal;
    color: #666;
    padding: 0;
}

.woocommerce-table--order-details tfoot td {
    text-align: right;
    width: auto; /* Niet 100% breedte */
    font-weight: bold;
    color: #333;
    padding: 0;
}

/* De allerlaatste rij (Totaalbedrag) iets groter */
.woocommerce-table--order-details tfoot tr:last-of-type th,
.woocommerce-table--order-details tfoot tr:last-of-type td {
    font-size: 1.1em;
    color: #000;
    font-weight: 800;
    border-bottom: none;
    margin-top: 10px;
}

/* =========================================
   DESKTOP (Vanaf 768px)
   ========================================= */
@media (min-width: 768px) {
    /* Lijstje bovenaan naast elkaar op desktop */
    ul.woocommerce-order-overview {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    ul.woocommerce-order-overview li {
        width: 48%; /* 2 naast elkaar */
        margin-bottom: 0 !important;
    }
}/* End custom CSS */