/*
Theme Name: PONCK | The Web Company Child
Template: Impreza
Version: 1.0
Author:	PONCK | The Web Company
Theme URI: https://ponck.nl
Author URI: https://ponck.nl
*/

/*Add your own styles here:*/

/* homepage hero buttons*/
.button-container {
  display: flex;
  gap: 50px; /* Ruimte tussen de knoppen */
}

.custom-button {
  flex: 1; /* Knoppen krijgen gelijke breedte */
  text-decoration: none;
  background-color: #F5F5F7;
  color: #333; /* Tekstkleur */
  padding: 20px;
  border-radius: 0 5px 0 5px;
  box-shadow: inset 0px 4px 8px rgba(0, 0, 0, 0.2); /* Innershadow */
  transition: background-color 0.5s ease;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.custom-button h3 {
  margin: 0;
  font-size: 1.0em;
}

.custom-button p {
  margin: 5px 0 0;
  font-size: 0.7em;
  color: #393939; /* Kleur van de broodtekst */
}

.custom-button:hover {
  background-color: #e0e0e5; /* Hover-kleur */
}

/* Desktop layout */
.button-container {
  display: flex;
  gap: 50px; /* Ruimte tussen de knoppen */
  align-items: stretch; /* Knoppen krijgen dezelfde hoogte */
}

/* Mobile layout */
@media (max-width: 768px) {
  .button-container {
    display: flex;
    justify-content: center; /* Knoppen horizontaal centreren */
    align-items: stretch; /* Knoppen blijven dezelfde hoogte */
    gap: 10px; /* Minder ruimte tussen de knoppen op mobiel */
    padding: 0 10px; /* Ruimte aan de zijkanten */
    width: 100%; /* Volledige breedte */
    box-sizing: border-box;
  }

  .custom-button {
    padding: 15px; /* Kleinere padding op mobiel */
    font-size: 0.9em; /* Verklein tekst iets om ruimte te besparen */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centraal uitlijnen van inhoud */
    align-items: center;
  }

  .custom-button h3 {
    font-size: 0.9em; /* Kleiner lettertype voor titel op mobiel */
  }

  .custom-button p {
    font-size: 0.7em; /* Kleiner lettertype voor broodtekst op mobiel */
  }
}

/* padding hoofdmenu */
/* Standaard padding op desktop */
  .l-subheader-h {
    display:flex;
    align-items:center;
    position:relative;
    margin:0 auto;
    max-width:1350px !important;
    height:inherit
  }

/* Verwijder padding op mobiel */
@media (max-width: 1028px) {
  .l-subheader.width_full {
    padding-left: 1rem !important; /* Eventueel kleinere padding op mobiel */
    padding-right: 1rem !important;
  }
}

/* image hover overlay voor homepage */
.image-hover-effect {
    position: relative;
    display: inline-block;
    border-radius: 20px;
    overflow: hidden; /* Zorgt ervoor dat de overlay binnen de randen blijft */
}

.image-hover-effect img {
    display: block;
    width: 100%;
    border-radius: 20px; /* Zelfde radius als de container */
}

.image-hover-effect::after {
    content: "";
    position: absolute;
    top: 0;
    left: 10px;
    right: 10px;
    bottom: 0;
    background-color: var(--color-content-primary-grad);
    opacity: 0;
    transition: opacity 0.5s ease;
    border-radius: 20px; /* Zelfde radius als de container */
}

.image-hover-effect:hover::after {
    opacity: 0.6;
}

/* class voor carousel logo's */
.bw-carousel img {
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

/* Optioneel voor kleurherstel bij hover */
.bw-carousel img:hover {
    filter: grayscale(0%);
}

/* BTW naar volgende regel*/
.w-post-elm.product_field .woocommerce-price-suffix {
    display: block;
    margin-top: 0px; /* Aanpassen voor meer ruimte indien gewenst */
}

/* label verbergen colorswatches*/
.woocommerce .variations .label label,
.woocommerce .variations .label .woo-selected-variation-item-name {
    display: none !important; /* Verberg het label en de tekst die erbij hoort */
}

/* Colorswatches opmaak */
/* Styling voor de prijs, alleen afgeronde hoeken onder */
.woocommerce-variation-price {
    background-color: #ffffff !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
    padding: 20px !important;
    margin: 0 !important;
	margin-bottom: 30px !important;
    width: 100%;
}

/* Styling voor de omschrijving, alleen afgeronde hoeken boven */
.woocommerce-variation-description {
    background-color: #ffffff !important;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    padding: 20px !important;
    margin-bottom: -30px !important; /* Zorgt ervoor dat er geen zichtbare ruimte tussen de elementen is */
    width: 100%;
}

/* Voeg de gezamenlijke schaduw toe aan de beschrijving met een pseudo-element */
.woocommerce-variation-description:before {
    content: "";
    position: absolute;
    top: -20px; /* Zorgt ervoor dat de schaduw ook bovenaan zichtbaar is */
    left: 0;
    right: 0;
    bottom: -80px; /* Vergroot het bereik naar beneden zodat de schaduw onderaan zichtbaar is */
    background-color: #ffffff;
    border-radius: 20px; /* Afgeronde hoeken */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Slagschaduw */
    z-index: -1; /* Schaduw onder de content */
}

/* Positionering voor beschrijving en prijs */
.woocommerce-variation-description,
.woocommerce-variation-price {
    position: relative; /* Houd de positie vast voor het pseudo-element */
    z-index: 1;
}

.price {
  font-size:1.5rem !important;
  font-weight:500 !important;
  color:#393939 !important;
}

.woo-variation-swatches .variable-items-wrapper {
margin-bottom: 20px !important;
margin-left: 1px !important;
}

/* Huur/koop knoppen opmaak */
.custom-lease-knop {
    background-color: #008000; /* Groen voor Leasen */
    color: white;
    padding: 15px 30px; /* Grotere knopafmetingen */
    text-transform: uppercase; /* All caps */
    text-decoration: none;
    border-radius: 0em 0.5em; /* Rondingen linksonder en rechtsboven */
    font-weight: bold;
    font-family: 'Lato', sans-serif; /* Font Lato */
    font-size: 14px; /* Kleinere tekstgrootte */
    display: inline-block;
    border: 2px solid transparent; /* Transparante border */
}

.custom-koop-knop {
    background-color: #28419B; /* Blauw voor Kopen */
    color: white;
    padding: 15px 30px; /* Grotere knopafmetingen */
    text-transform: uppercase; /* All caps */
    text-decoration: none;
    border-radius: 0em 0.5em; /* Rondingen linksonder en rechtsboven */
    font-weight: bold;
    font-family: 'Lato', sans-serif; /* Font Lato */
    font-size: 14px; /* Kleinere tekstgrootte */
    display: inline-block;
    border: 2px solid transparent; /* Transparante border */
}

.custom-lease-knop:hover,
.custom-koop-knop:hover {
    background-color: #393939; /* Grijs bij hover voor beide knoppen */
    color: white !important; /* Tekst blijft wit */
    border: 2px solid transparent; /* Transparante border bij hover */
}

@media (max-width: 768px) {
    a.custom-lease-knop,
    a.custom-koop-knop {
        padding: 8px 16px !important; /* Kleinere afmetingen */
        font-size: 12px !important;   /* Kleinere tekstgrootte */
        border-radius: 0em 0.3em !important;
    }
}


/* totalen weghalen in winkelmand*/
.cart_totals {
    display: none;
}

.woocommerce-checkout-review-order-table .cart-subtotal th,
.woocommerce-checkout-review-order-table .cart-subtotal td,
.woocommerce-checkout-review-order-table .tax-total,
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
    display: none;
}

/* afrekenpagina opmaken */
.woocommerce-checkout-review-order-table .product-total {
    display: none;
}
.woocommerce-checkout-review-order-table .shipping {
    display: none;
}

.woocommerce-mini-cart__buttons .button.checkout {
    display: none !important;
}

.woocommerce-checkout-review-order-table .product-quantity {
    display: none !important;
}

/* styling order recieved pagina */
.woocommerce-order-received .entry-title {
    display: none;
}

/* toytaal weg halen uit mini shoping cart */
.woocommerce-mini-cart__total {
    display: none;
}

/* class voor bounce animatie*/
@keyframes bounce-simpel {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-1px);
    }
}

.bounce-simpel {
    animation: bounce-simpel 1s infinite linear;
}