/**
 * WooCommerce Custom CSS for Some Supply
 */

/* Verberg prijskolom en alle totalen (footer) in tabellen */
.shop_table .product-total, 
.shop_table td.product-total,
.woocommerce-checkout-review-order-table tfoot,
.woocommerce-order-details .product-total, 
.woocommerce-order-details .woocommerce-table__product-total,
.woocommerce-order-details tfoot {
    display: none !important;
}

/* Verberg prijs-gerelateerde teksten in checkout en mandje */
.cart-subtotal, 
.order-total, 
.cart_totals tr.shipping,
.elementor-menu-cart__subtotal, 
.woocommerce-mini-cart__total,
.elementor-menu-cart__product-price.product-price,
.woocommerce-mini-cart-item .quantity {
    display: none !important;
}

/* Side-cart afbeelding styling */
.elementor-menu-cart__product-image {
    width: 40px !important;
    height: auto !important;
}

/* Verberg het 'Bestelling Totaal' blokje in de bovenste rij van het overzicht */
.woocommerce-order-overview__total.total {
    display: none !important;
}

/* Verwijder de verticale streep na het e-mail blokje in de kop */
.woocommerce-order-overview .email,
.woocommerce-order-overview li:last-child {
    border-right: none !important;
}

/* Menu toggle visibility fix */
.elementor-menu-cart__container.elementor-lightbox {
    position: fixed !important;
    width: 100vw !important;
    height: 100vh !important;
}

/* --- Winkelwagen Pagina Optimalisatie --- */

/* Verberg prijs, aantal en subtotaal kolommen */
.woocommerce-cart-form th.product-price, 
.woocommerce-cart-form td.product-price,
.woocommerce-cart-form th.product-quantity,
.woocommerce-cart-form td.product-quantity,
.woocommerce-cart-form th.product-subtotal,
.woocommerce-cart-form td.product-subtotal {
    display: none !important;
}

/* Verbeter de uitlijning van de overgebleven kolommen */
.woocommerce-cart-form table.shop_table {
    border-collapse: collapse;
    width: 100%;
}

/* Zorg dat de productnaam kolom links uitlijnt en ruimte krijgt */
.woocommerce-cart-form td.product-name, 
.woocommerce-cart-form th.product-name {
    text-align: left !important;
    padding-left: 20px !important;
}

/* De kolom met het kruisje en de afbeelding mag compact blijven */
.woocommerce-cart-form td.product-thumbnail {
    width: 100px;
}

.woocommerce-cart-form td.product-remove {
    width: 50px;
}

/* Verberg de totalen-box aan de rechterkant volledig (alleen de knop is al genoeg) */
.cart-collaterals .cart_totals tr.cart-subtotal,
.cart-collaterals .cart_totals tr.order-total,
.cart-collaterals .cart_totals h2 {
    display: none !important;
}

/* Zorg dat de "Offertelijst" box geen loze witte ruimte heeft nu de prijzen weg zijn */
.cart-collaterals .cart_totals {
    padding: 0 !important;
}

/* Fix voor mobiel: voorkom dat labels door elkaar lopen */
@media (max-width: 768px) {
    .woocommerce-cart-form td.product-name::before {
        content: "" !important; /* Verwijder het label "Product:" op mobiel */
    }
    .woocommerce-cart-form td {
        text-align: left !important;
    }
}

/* --- MOBIELE WINKELWAGEN: FORCEER LAYOUT --- */
@media (max-width: 767px) {
    /* Rij instellingen */
    .woocommerce-cart-form tr.cart_item {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        position: relative !important; /* Nodig om het kruisje te positioneren */
        padding: 15px 40px 15px 10px !important; /* Extra ruimte rechts voor het kruisje */
        border-bottom: 1px solid #eee !important;
    }

    /* 1. Afbeelding: Klein en links */
    .woocommerce-cart-form td.product-thumbnail {
        display: block !important;
        width: 60px !important;
        min-width: 60px !important;
        padding: 0 !important;
        margin-right: 15px !important;
        border: none !important;
    }

    .woocommerce-cart-form td.product-thumbnail img {
        width: 60px !important;
        height: 60px !important;
        object-fit: cover !important;
    }

    /* 2. Titel: Naast de afbeelding */
    .woocommerce-cart-form td.product-name {
        display: block !important;
        padding: 0 !important;
        border: none !important;
        text-align: left !important;
    }

    .woocommerce-cart-form td.product-name a {
        font-size: 14px !important;
    }

    /* 3. Kruisje: Rechtsboven in de hoek van de rij */
    .woocommerce-cart-form td.product-remove {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        width: 25px !important;
        height: 25px !important;
        padding: 0 !important;
        border: none !important;
        z-index: 10;
    }

    /* 4. VERWIJDER ALLE TEKSTEN DIE DE BOEL VERSCHUIVEN */
    .woocommerce-cart-form td::before {
        content: none !important;
        display: none !important;
    }

    /* Verberg headers en lege kolommen */
    .woocommerce-cart-form thead,
    .woocommerce-cart-form td.product-price,
    .woocommerce-cart-form td.product-quantity,
    .woocommerce-cart-form td.product-subtotal {
        display: none !important;
    }
}

/* --- ADD TO CART Loop Template aanpassingen --- */

/* Verberg de 'Bekijk winkelwagen' link na het toevoegen in de shop/grid */
.added_to_cart.wc-forward {
    display: none !important;
}

/* Optioneel: Verberg ook het vinkje dat sommige plugins/thema's tonen */
.woocommerce-selection__badge, 
.added::after {
    display: none !important;
    content: none !important;
}

/* --- Aantal m2 styling --- */
input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], select, textarea {
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: .5rem 1rem;
    transition: all .3s;
    width: 100%;
}

/* --- Transformeer de standaard WooCommerce melding naar een Toast rechtsonder --- */
.woocommerce-error, 
.woocommerce-message, 
.woocommerce-info {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    left: auto !important;
    top: auto !important;
    width: 380px !important; /* Iets breder voor een mooiere tekstloop */
    max-width: calc(100vw - 60px) !important;
    z-index: 999999 !important;
    
    /* Moderne Flexbox uitlijning */
    display: flex !important;
    align-items: center !important;
    
    /* Extra padding aan de linkerkant om ruimte te maken voor het icoon */
    padding: 20px 25px 20px 55px !important; 
    
    background-color: #ffffff !important;
    color: #333333 !important;
    border: none !important;
    border-left: 4px solid #E65A2B !important; /* Matcht je SomeSupply huiskleur */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
    border-radius: 4px !important;
    
    animation: slideInToast 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

/* Zorg dat het WooCommerce icoontje netjes links in de padding zweeft */
.woocommerce-error::before, 
.woocommerce-message::before, 
.woocommerce-info::before {
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    color: #E65A2B !important; /* Geeft het icoontje ook de SomeSupply kleur */
}

/* Tekst styling binnen de toast */
.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-family: inherit !important;
    text-align: left !important;
}

/* Fade/Slide-in animatie */
@keyframes slideInToast {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Legpatroon Toggle */
.htmedia-ewf {
  --ss-field-radius: 8px;
  --ss-field-height: 44px;
  --ss-field-border: #bebebe;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px 24px;
  align-items: start;
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f6f6f6;
  border: 1px solid #e1e6ed;
  border-radius: 8px;
}

.htmedia-ewf .htmedia-ewf-field {
  min-width: 0;
  margin-bottom: 0;
}

.htmedia-ewf .htmedia-ewf-label {
  display: block;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: #1a1a1a;
}

.htmedia-ewf .htmedia-ewf-label .required {
  display: none;
}

.htmedia-ewf .htmedia-ewf-toggle {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  height: var(--ss-field-height);
  padding: 3px;
  background-color: #fff;
  border: 1px solid var(--ss-field-border);
  border-radius: var(--ss-field-radius);
}

.htmedia-ewf .htmedia-ewf-toggle-option {
  flex: 1 1 0;
  min-width: 0;
}

.htmedia-ewf .htmedia-ewf-toggle-option span {
  display: block;
  height: 100%;
  padding: 0 12px;
  line-height: calc(var(--ss-field-height) - 8px);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: calc(var(--ss-field-radius) - 3px);
}

.htmedia-ewf .htmedia-ewf-number-wrap {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: none;
  height: var(--ss-field-height);
  overflow: hidden;
  background-color: #fff;
  border: 1px solid var(--ss-field-border);
  border-radius: var(--ss-field-radius);
  transition: border-color .2s ease;
}

.htmedia-ewf .htmedia-ewf-number-wrap:focus-within {
  border-color: #1a1a1a;
}

.htmedia-ewf .htmedia-ewf-number-wrap .htmedia-ewf-number {
  flex: 1;
  min-width: 0;
  width: auto !important;
  max-width: none;
  height: 100% !important;
  padding: 0 14px !important;
  font-size: 15px !important;
  color: #1a202c !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

.htmedia-ewf .htmedia-ewf-unit {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 500;
  color: #495057;
  background-color: #e9ecef;
  border-left: 1px solid #cbd5e1;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product .variation {
  display: block;
  margin: 8px 0 0;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product .variation dt {
  float: left;
  clear: left;
  margin: 0 4px 0 0;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product .variation dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product .variation dd p {
  margin: 0;
}