/* Verberg de standaard layout */
.header, .footer, .header-menu, .header-lower, .header-upper { display: none !important; }

.master-wrapper-page, .master-wrapper-content, .master-column-wrapper, .center-1 { 
    /* margin: 0 !important; */
    padding: 0 !important; 
    max-width: 100% !important; 
    background-color: #1a1b1e !important;
}

/*body { background-color: #1a1b1e; }*/

/* Responsive root element */
.whatsorder-container { 
    background-color: #1a1b1e; 
    color: #ffffff; 
    padding: 20px; 
    padding-bottom: 90px;
    width: 100%; 
    min-height: 100vh;
    box-sizing: border-box;
    font-family: Arial, sans-serif; 
    display: flex;
    flex-direction: column;
    align-items: center; 
}

/* Gecentreerde wrapper */
.content-wrapper {
    width: 100%;
    max-width: 1050px; 
}

/* Zoekbalk Custom */
.search-container { width: 100%; margin-bottom: 20px; margin-top: 10px; display: flex; justify-content: center; }
.search-box-custom { display: flex; align-items: center; background-color: #2a2b2e; border-radius: 12px; padding: 5px 15px; width: 100%; max-width: 600px; border: 1px solid #333; transition: 0.3s; }
.search-box-custom:focus-within { border-color: #d6f2c8; }
.search-box-custom input { background: transparent; border: none; color: #fff; width: 100%; padding: 10px; font-size: 15px; outline: none; }
.search-box-custom input::placeholder { color: #888; }
.search-box-custom button { background: transparent; border: none; color: #d6f2c8; cursor: pointer; padding: 5px; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.search-box-custom button:hover { color: #bce3a8; }
.search-box-custom button svg { width: 24px; height: 24px; fill: currentColor; }

/* Categorieën horizontaal scrollbaar */
.category-scroll-container { display: flex; gap: 15px; overflow-x: auto; padding-bottom: 15px; margin-bottom: 40px; margin-top: 20px; justify-content: flex-start; scrollbar-width: none; }
.category-scroll-container::-webkit-scrollbar { display: none; }
.category-card { background-color: #000; border-radius: 12px; min-width: 140px; padding: 12px 20px; text-align: center; font-weight: bold; font-size: 13px; border: 1px solid #333; cursor: pointer; transition: 0.2s; white-space: nowrap; }
.category-card:hover { border-color: #d6f2c8; }

/* Sectietitels gecentreerd */
.section-title { color: #888; font-size: 12px; text-transform: uppercase; margin: 40px 0 15px 0; font-weight: bold; width: 100%; text-align: center; letter-spacing: 1px; }

/* Product Grid */
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; width: 100%; justify-content: center; }

/* Productkaartje */
.product-item { display: flex; align-items: center; background-color: #2a2b2e; padding: 12px 15px; border-radius: 12px; width: 100%; box-sizing: border-box; }
.product-image { width: 70px; height: 70px; background-color: #fff; border-radius: 8px; margin-right: 15px; object-fit: cover; flex-shrink: 0; }
.product-info { flex: 1; min-width: 0; }
.product-title { font-weight: bold; font-size: 15px; margin: 0 0 5px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-price { font-size: 14px; margin: 0; color: #ececec; }

/* Icoontje Winkelmand */
.btn-action-icon { background-color: #d6f2c8; color: #000; border: none; width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; flex-shrink: 0; margin-left: 10px; }
.btn-action-icon:hover { background-color: #bce3a8; }
.btn-action-icon svg { width: 22px; height: 22px; fill: currentColor; }

/* Sticky bottom winkelmandje */
.sticky-checkout { position: fixed; bottom: 0; left: 0; right: 0; background-color: #1a1b1e; padding: 15px 20px; border-top: 1px solid #333; display: flex; justify-content: center; z-index: 1000; }
.sticky-checkout .btn-checkout { background-color: #1a1b1e; color: #fff; border: 1px solid #444; width: 100%; max-width: 800px; padding: 15px; border-radius: 12px; font-weight: bold; font-size: 14px; text-transform: uppercase; cursor: pointer; transition: 0.2s; }
.sticky-checkout .btn-checkout:hover { background-color: #2a2b2e; }

/* =========================================================
   WINKELWAGEN THEMA (SHOPPING CART)
   ========================================================= */

/* Pagina achtergrond en titel */
.shopping-cart-page {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
    padding: 20px;
    padding-bottom: 120px; /* Ruimte voor mobiel scrollen */
}

.shopping-cart-page .page-title h1 {
    color: #ffffff;
    text-align: center;
    font-size: 24px;
    margin-bottom: 30px;
}

/* Verberg onnodige randen en de tabel-header (voor de app layout) */
.order-summary-content .table-wrapper {
    background: transparent;
    border: none;
}
.order-summary-content .cart {
    border: none;
    width: 100%;
}
.order-summary-content .cart thead {
    display: none; 
}

/* Verander NopCommerce Tabel-rijen in 'Cards' */
.order-summary-content .cart tbody tr { 
    display: flex; 
    align-items: center; 
    background-color: #2a2b2e; 
    border-radius: 12px; 
    margin-bottom: 15px; 
    padding: 15px; 
    flex-wrap: wrap; /* Zorgt dat elementen op mobiel mooi onder elkaar kunnen vallen */
}

.order-summary-content .cart td {
    border: none;
    padding: 5px;
}

/* Product afbeelding */
.order-summary-content .cart td.product-picture {
    width: 85px;
}
.order-summary-content .cart td.product-picture img {
    width: 75px; 
    height: 75px; 
    border-radius: 10px; 
    object-fit: cover; 
    background: #fff; 
}

/* Product naam en omschrijving */
.order-summary-content .cart td.product {
    flex: 1;
    min-width: 150px;
    text-align: left;
}
.order-summary-content .cart td.product a.product-name {
    color: #ffffff;
    font-weight: bold;
    font-size: 16px;
    text-decoration: none;
}

/* Aantal input veld */
.order-summary-content .cart td.quantity input {
    background: #1a1b1e;
    color: #ffffff;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 8px;
    width: 60px;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
}

/* Subtotaal van het product (groen thema) */
.order-summary-content .cart td.subtotal {
    font-weight: bold;
    color: #4ab2f1;
    font-size: 18px;
    text-align: right;
    width: 100px;
}

/* Blok voor prijstotalen aan de onderkant */
.cart-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
}
.totals {
    background-color: #2a2b2e;
    border-radius: 12px;
    padding: 20px;
    width: 100%;
    margin-bottom: 20px;
    color: #ececec;
}
.totals table {
    width: 100%;
}
.totals table tr td {
    padding: 10px 0;
    border-bottom: 1px solid #333;
}
.totals table tr:last-child td {
    border-bottom: none;
    font-size: 20px;
    font-weight: bold;
    color: #4ab2f1;
}
.totals table tr td.cart-total-right {
    text-align: right;
}

/* Knoppen onderkant */
.checkout-buttons {
    width: 100%;
}
.checkout-button {
    background-color: #4ab2f1;
    color: #000;
    border: none;
    width: 100%;
    padding: 15px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 16px;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.2s;
}
.checkout-button:hover {
    background-color: #bce3a8;
}

/* Update winkelkar-knop (subtieler houden) */
.update-cart-button {
    background-color: transparent;
    border: 1px solid #888;
    color: #888;
    padding: 10px 15px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
}

/* Verberg de Gift Wrapping en andere Checkout attributen op de winkelwagen pagina */
.checkout-attributes {
    display: -ms-flex:inherit;
    -webkit-flex: inherit;
    flex: inherit;
    ;
}

/* 1. De buitenste wrapper.
   LET OP: Standaard onzichtbaar the the (pointer-events: none, geen achtergrond), The The The 
   behalve THE als NopCommerce er the the een the error the The The of succes-melding the the IN The The the stopt! 
*/
#bar-notification.bar-notification-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 100000 !important;
    background-color: transparent !important; /* Standaard onzichtbaar */
    pointer-events: none !important; /* Laat the the kliks the the door the the the naar de rest the THE van the the the de site The THE the */
}

/* THE THE THE Als the the NopCommerce THE een THE `.bar-notification` block The the the the toevoegt in de the the container The the the the the:
   Dan the the veranderen the the we The de the the wrapper THE the THE in een ZWARTE the the klikbare The overlay! */
#bar-notification.bar-notification-container:has(.bar-notification) {
    background-color: rgba(0, 0, 0, 0.8) !important;
    pointer-events: all !important;
}

/* 2. De The the binnenste div (.bar-notification) The The! (Deze the the wordt the the thethe door the The NopCommerce The Toegevoegd the THE THE en verwijderd The the) */
#bar-notification .bar-notification {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background-color: #1a1b1e !important;
    color: #ffffff !important;
    border-radius: 16px !important;
    padding: 35px 25px 25px 25px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8) !important;
    width: 90% !important;
    max-width: 400px !important;
    text-align: center !important;
    border: 1px solid #333 !important;
    margin: 0 !important;
}

/* 3. Een groen of rood randje afhankelijk van succes of error */
    #bar-notification .bar-notification.success {
        border-top: 6px solid #4ab2f1 !important;
    }
#bar-notification .bar-notification.error { 
    border-top: 6px solid #ff4c4c !important; 
}

/* 4. De tekst (<p class="content">) mooier maken */
#bar-notification .content {
    margin: 0 !important;
    font-family: Arial, sans-serif !important; /* Keihard The geforceerd the the the op Arial the! */
    font-weight: 500 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #e0e0e0 !important; /* Net iets zachter wit the dat leest the lekkerder the */
    padding: 0 10px !important;
    -webkit-font-smoothing: antialiased !important;
}

/* Dikke woorden in the the notificatie The (zoals The the the het product zelf the The ) extra the the markeren */
#bar-notification .content strong {
    color: #ffffff !important;
    font-weight: bold !important;
}

/* 5. Het standaard linkje (<a href="/cart">) ombouwen tot een grote dikke knop */
#bar-notification .content a {
    display: block !important;
    background-color: #4ab2f1 !important;
    color: #000 !important;
    text-decoration: none !important;
    padding: 16px !important;
    border-radius: 12px !important;
    margin-top: 25px !important;
    font-family: Arial, sans-serif !important; /* Ook The de The knop the 100% The the the Arial the */
    font-weight: 900 !important;
    font-size: 14px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    transition: background-color 0.2s ease, transform 0.1s ease !important;
}
#bar-notification .content a:hover {
    background-color: #bce3a8 !important;
}
#bar-notification .content a:active {
    transform: scale(0.97) !important;
}

/* 6. Het Sluit-X'je in The een the mooi RONDJE the maken */
#bar-notification .close {
    position: absolute !important;
    top: -12px !important;    /* Iets the daarboven The THE of buiten the The the het kader the the the the the the the the the the the over de rand the heen laten vallen the */
    right: 0px !important;  
    background-color: #2a2b2e !important; /* The De The THE kleur van the het the the the rondje the */
    border: 2px solid #555 !important;
    border-radius: 50% !important; /* Perfect the rond the The */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    cursor: pointer !important;
    opacity: 1 !important; /* The Altijd the helder the the The the zien The, in plaats THE van 0.5 The */
    box-shadow: 0 4px 10px rgba(0,0,0,0.5) !important;
    transition: 0.2s ease !important;
    
    /* Vang the 'Close' text af */
    font-size: 0 !important; 
    color: transparent !important;
    
    /* Center the het the the SVG the the Xje the the er the direct in! */
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="%23ffffff" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>') !important;
    background-size: 16px 16px !important; /* Iets the the kleiner dan the de container the  */
    background-repeat: no-repeat !important;
    background-position: center !important;
}

#bar-notification .close:hover { 
    background-color: #3b3c40 !important; 
    border-color: #d6f2c8 !important; /* Groen the randje the bij hover */
    transform: scale(1.1) !important;
}

/* =========================================================
   CHECKOUT INHOUD & KLEUREN FIX
   ========================================================= */

/* Zorg dat alle the teksten, labels the en beschrijvingen wit/lichtgrijs the THE the the zijn the ipv zwart */
.opc .step-content, 
.opc .step-content p, 
.opc .step-content div, 
.opc .step-content span, 
.opc .step-content label {
    color: #ececec !important;
}

/* Fix voor checkboxes the en in radio-buttons (voorkom dat the the The the the the the the the the the ze 100% the the the The The the breed worden) */
.opc input[type="radio"], 
.opc input[type="checkbox"] {
    width: auto !important;
    margin-right: 15px !important;
    transform: scale(1.3) !important; /* Maak ze iets the The groter The voor The vingers (telefoon) */
    display: inline-block !important;
}

/* Lijsten the the The the the the met addresses the in the the the de the the the the the eerste The the stap */
.opc .address-item {
    background-color: #1a1b1e !important;
    border: 1px solid #444 !important;
    border-radius: 12px !important;
    padding: 15px !important;
    margin-bottom: 15px !important;
}

/* Groen accent the op de the The je the the contact the NopCommerce THE namen */
.opc .address-item .name { 
    font-weight: bold !important; 
    color: #d6f2c8 !important; 
    font-size: 16px !important; 
    margin-bottom: 10px !important; 
}

/* Knoppen the the The THE the the the the the voor the het the the THE the Selecteren the the The the the the THE the the the van een the bestaand The the The The the the The the The adres */
.opc .select-button { 
    background-color: #2a2b2e !important; 
    color: #fff !important; 
    border: 1px solid #555 !important; 
    border-radius: 8px !important; 
    padding: 8px 15px !important; 
    cursor: pointer !important; 
    margin-top: 10px !important; 
    font-weight: bold !important;
}
.opc .select-button:hover { 
    background-color: #444 !important; 
    border-color: #d6f2c8 !important;
}

/* Lijsten met Verzend- en Betaalmethodes (Method-list) opmaken als klikbare App Blocks */
.opc .method-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.opc .method-list li {
    background-color: #1a1b1e !important;
    border: 1px solid #444 !important;
    border-radius: 12px !important;
    padding: 15px !important;
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    transition: 0.2s !important;
}

.opc .method-list li:hover { 
    border-color: #d6f2c8 !important; 
}

.opc .method-name { 
    font-weight: bold !important; 
    font-size: 15px !important; 
    display: block !important; 
    color: #fff !important;
}

.opc .method-description { 
    font-size: 13px !important; 
    color: #888 !important; 
    display: block !important; 
    margin-top: 5px !important; 
}

/* Standaard Dropdown boxen fixen (bijv. Land The the The Selecteren the The the The the the The the ) */
.opc select {
    background-color: #1a1b1e !important;
    color: #fff !important;
    border: 1px solid #444 !important;
}

/* Samenvatting the the The Prijzen The in the THE THE de the The laatste The the The The The the THE The the the the stap the the the the the the the the the the the The The the (Bevestigen) Maken The the we the THE the the groen The */
.opc .order-summary-content .cart-total-right span {
    color: #d6f2c8 !important;
}

.opc .order-summary-content .cart-total-left {
    color: #ececec !important;
}

/* The loading/verwerken The spinners The in tijdens the het the the The laden in van the THE the de the the the the The the NopCommerce THE AJAX the the the stappen THE The the The  the */
.opc .please-wait {
    color: #d6f2c8 !important;
    font-weight: bold !important;
    margin-right: 15px !important;
}

/* =========================================================
   VOLLEDIGE ONE PAGE CHECKOUT THEMA (DARK MODE FORCE)
   ========================================================= */

/* Basis layout en page styling forceren! */
.checkout-page {
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 20px !important;
    padding-bottom: 60px !important;
    color: #ffffff !important;
}

.checkout-page .page-title h1 {
    color: #ffffff !important;
    text-align: center !important;
    font-size: 24px !important;
    margin-bottom: 30px !important;
}

/* Accordeon Lijst the dwingen the */
.checkout-data,
.opc {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Elk los paneel (Stap 1, Stap 2, etc.) */
.opc .tab-section {
    background-color: #2a2b2e !important;
    border-radius: 12px !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
    border: 1px solid #333 !important;
}

/* De the titelbalk the The van the the de stap the the */
.opc .step-title {
    display: flex !important;
    align-items: center !important;
    background-color: #1a1b1e !important;
    padding: 15px 20px !important;
    cursor: pointer !important;
    border-bottom: 1px solid #333 !important;
}

.opc .step-title .number {
    background-color: #444 !important;
    color: #fff !important;
    font-weight: bold !important;
    font-size: 16px !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    margin-right: 15px !important;
}

.opc .step-title h2 {
    margin: 0 !important;
    font-size: 18px !important;
    color: #888 !important;
    font-weight: bold !important;
}

/* the De ACTIEVE the the stap the highlights the */
.opc .tab-section.allow.active .step-title {
    background-color: #2a2b2e !important;
}
.opc .tab-section.allow.active .step-title .number {
    background-color: #d6f2c8 !important;
    color: #000 !important;
}
.opc .tab-section.allow.active .step-title h2 {
    color: #fff !important;
}

/* Al the the de content areas dwingen The The wit The The/grijs The the The TE zijn The */
.opc .step-content,
.opc .step-content p,
.opc .step-content div,
.opc .step-content span,
.opc .step-content label {
    color: #ececec !important;
}

.opc .step-content {
    padding: 25px 20px !important;
    background-color: #2a2b2e !important;
}

/* =======================================
   FORMULIEREN IN DE CHECKOUT 
   ======================================= */
.opc .inputs {
    margin-bottom: 15px !important;
}

.opc .inputs label {
    display: block !important;
    margin-bottom: 5px !important;
    font-weight: bold !important;
    color: #ccc !important;
}

.opc .inputs input[type="text"],
.opc .inputs input[type="email"],
.opc .inputs input[type="tel"],
.opc .inputs input[type="password"],
.opc .inputs select,
.opc .inputs textarea,
.opc select.address-select {
    width: 100% !important;
    background-color: #1a1b1e !important;
    border: 1px solid #555 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 12px !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
}

.opc input:focus, 
.opc select:focus {
    border-color: #d6f2c8 !important;
    outline: none !important;
}

/* Radiobuttons the en Checkboxes the netjes oplossen */
.opc input[type="radio"],
.opc input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin-right: 10px !important;
    display: inline-block !important;
    background-color: #1a1b1e !important;
}

/* =======================================
   ADRES BLOKKEN EN SELECTEER KAARTEN
   ======================================= */
.opc .address-item {
    background-color: #1a1b1e !important;
    border: 1px solid #444 !important;
    border-radius: 12px !important;
    padding: 15px !important;
    margin-bottom: 15px !important;
}

.opc .address-item .title strong {
    color: #d6f2c8 !important;
    font-size: 16px !important;
}

.opc .address-item input[type="button"],
.opc .address-item button {
    background-color: #333 !important;
    color: #fff !important;
    border: 1px solid #555 !important;
    padding: 8px 15px !important;
    border-radius: 8px !important;
    margin-top: 10px !important;
    cursor: pointer !important;
    font-weight: bold !important;
    transition: 0.2s !important;
}

.opc .address-item input[type="button"]:hover,
.opc .address-item button:hover {
    background-color: #d6f2c8 !important;
    color: #000 !important;
}

/* Verzend / Betaalmethode lijsten */
.opc .method-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.opc .method-list li {
    background-color: #1a1b1e !important;
    border: 1px solid #444 !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    padding: 15px !important;
    cursor: pointer !important;
    transition: 0.2s !important;
}

.opc .method-list li:hover {
    border-color: #d6f2c8 !important;
}

.opc .method-list li .method-name {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    color: #fff !important;
}

.opc .method-list li .method-name label {
    margin: 0 !important;
    font-weight: bold !important;
    color: #fff !important;
    cursor: pointer !important;
}

.opc .method-list li .method-description {
    display: block !important;
    color: #888 !important;
    font-size: 13px !important;
    margin-top: 5px !important;
    margin-left: 28px !important; 
}

/* =======================================
   KNOPPEN & ERRORS
   ======================================= */
.opc .buttons {
    margin-top: 25px !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

.opc .button-1 {
    background-color: #d6f2c8 !important;
    color: #000 !important;
    border: none !important;
    padding: 12px 25px !important;
    border-radius: 12px !important;
    font-weight: bold !important;
    font-size: 15px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: 0.2s !important;
}

.opc .button-1:hover {
    background-color: #bce3a8 !important;
}

.opc .please-wait {
    color: #d6f2c8 !important;
    font-weight: bold !important;
    margin-left: 15px !important; 
}

.opc .message-error {
    color: #ff4c4c !important;
    background-color: #3b1b1b !important;
    padding: 15px !important;
    border-radius: 8px !important;
    margin-bottom: 15px !important;
    font-weight: bold !important;
}

/* Order summary in confirm-order step */
.opc .order-summary-content .cart-total-right span {
    color: #d6f2c8 !important;
}

.opc .order-summary-content a {
    color: #d6f2c8 !important;
}