/* 
Theme Name: Compass Digital Theme
Theme URI: https://compassdigital.nl/
Description: Compass Digital Child Theme
Author: Compass Digital
Author URI: https://compassdigital.nl/
Template: hello-elementor
Version: 1.0
Text Domain: compass-digital-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/* =========================
   0. Kleuren
   ========================= */

:root {
	--primary: #00676F;
	--secondary: #008DB2;
	--text:	#0A0A0A;
	--accent: #3AC273;
	--rood: #DD7878;
	--wit: #FFFFFF;
	--zwart: #333;
	--lichtgrijs: #F9F9F9;
	--stars: #EFBD12;
	--lichtblauw: #ECF1F4;
	--lijnen: #D9E2E5;
	--lichtgroen: #F4FFE7;
	--oranje: #FF8254;

	--main-font: "Poppins", sans-serif;
    --secondary-font: "Roboto Slab", serif;
    --text-font: "Roboto", sans-serif;
    --accent-font: "Roboto", sans-serif;
	--light-weight: 300;
	--regular-weight: 400;
	--medium-weight: 500;
    --bold-weight: 600;
}

/* =========================
   1. Algemene stijlen
   ========================= */
body {
    font-family: var(--text-font), sans-serif;
    color: var(--text);
    background-color: var(--wit);
    margin: 0;
    padding: 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* =========================
   2. Typografie
   ========================= */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--main-font);
    color: var(--primary);
    font-weight: var(--bold-weight);
}

h1 { font-size: 30px; }
h2 { font-size: 26px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
h5, h6 { font-size: 16px; }

p {
    font-size: 16px;
    line-height: 1.6;
}

/* =========================
   3. Navigatie
   ========================= */
.navbar {
    background-color: var(--primary);
    padding: 10px;
}

.navbar a {
    color: var(--text);
    text-decoration: none;
    padding: 10px 15px;
    display: inline-block;
}

.navbar a:hover {
    color: var(--accent);
}

/* =========================
   4. Knoppen
   ========================= */
button, .elementor-button {
    background-color: var(--accent);
    border: none;
    color: white;
    padding: 12px 24px;
    border-radius: 5px;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out;
    font-weight: var(--bold-weight);
}

button:hover, .elementor-button:hover {
    background-color: var(--primary);
}

[type=button], [type=submit], button {
    background-color: var(--accent);
    border: none;
    color: white;
    padding: 12px 24px;
    border-radius: 5px;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out;
    font-weight: var(--bold-weight);
}

[type=button]:hover, [type=submit]:hover, button:hover {
	 background-color: var(--primary);
}
	
/* =========================
   5. WooCommerce Stijlen
   ========================= */
.woocommerce-page .product-title {
    font-size: 1.5rem;
    font-weight: var(--bold-weight);
}

.woocommerce .woocommerce-cart-form,
.woocommerce .woocommerce-checkout {
    background-color: var(--lichtgrijs);
    padding: 20px;
}

.woocommerce .price {
    font-size: 18px;
    font-weight: var(--bold-weight);
    color: var(--primary);
}

/* =========================
   6. Responsieve stijlen (Media Queries)
   ========================= */
@media (max-width: 768px) {
    .navbar {
        text-align: center;
    }
    .navbar a {
        display: block;
        padding: 10px;
    }
}

/* Accordeon Mobile Menu */
#e-n-accordion-item-1720 {
	display: none;
}

/* Kennisartikelen */
summary {
    display: flex;
    align-items: center;
}

.details {
	margin: 10px 0;
	padding: 20px;
    background: var(--lichtgrijs);
    width: 100%;
    border-radius: 30px;
}

details summary {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Plaatst marker aan de rechterkant */
    cursor: pointer;
    list-style: none; /* Verwijdert standaard marker */
}

details[open] summary::before {
    content: "−"; /* Min-teken voor open */
    font-size: 1.5em;
    order: 2; /* Plaatst marker rechts */
}

details summary::before {
    content: "+"; /* Plus-teken voor gesloten */
    font-size: 1.5em;
    order: 2; /* Plaatst marker rechts */
}

.summary-title {
    display: inline; /* Houdt de marker naast de H2-tekst */
    font-size: 1.5em;
    font-weight: var(--bold-weight);
    line-height: 1.5em;
}

.wp-block-woocommerce-checkout-order-summary-block {
	position: sticky;
	top: 60px;
}

.elementor-add-to-cart .stock {
	display: block!important;
	margin-bottom: 20px!important;
}

.available-on-backorder {
	color: var(--oranje)!important;
}

.in-stock {
	color: var(--accent)!important;
}

/* Tags */
.tagged_as {
	display: none!important;
}

/* Read More */
/* READ MORE met fade-out effect */
/* Beperk de tekst tot 3 regels en voeg fade-out effect toe */
.woocommerce-product-details__short-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* Toon standaard 3 regels */
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5em;
  max-height: calc(1.5em * 3); /* Zorg dat alleen 3 regels zichtbaar zijn */
  position: relative; /* Nodig voor het pseudo-element */
  transition: max-height 0.5s ease-in-out;
}

/* Fade-out effect onderaan de tekst */
.woocommerce-product-details__short-description::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2em; /* Hoogte van de fade-out */
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}

/* Maak de volledige tekst zichtbaar bij klikken op 'Lees meer' */
.woocommerce-product-details__short-description.volledige-tekst {
  -webkit-line-clamp: unset;
  max-height: none; /* Verwijder max-height beperking */
}

/* Verberg het fade-out effect zodra de volledige tekst zichtbaar is */
.woocommerce-product-details__short-description.volledige-tekst::after {
  opacity: 0;
  visibility: hidden;
}

/* Stijl de 'Lees meer' knop */
.lees-meer-knop {
  display: inline-block;
  margin-top: 10px;
  cursor: pointer;
  color: blue; /* Pas aan naar wens */
  transition: opacity 0.3s ease-in-out;
}

/* Responsieve weergave voor mobiele apparaten */
@media only screen and (max-width: 768px) {
  .woocommerce-product-details__short-description {
    -webkit-line-clamp: 3; /* Toon 5 regels op mobiel */
    max-height: calc(1.5em * 3);
  }
}

/* Search icon */
.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
	background: va(--accent)!important;
}

.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
	font-size: 12px;
}

/* PRICE */
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price, .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price {
	color: var(--text);
}

.woocommerce-variation-add-to-cart {
	margin-top: 20px;
}

/* WOOCOMMERCE NOTICES */
.woocommerce-error, .woocommerce-info, .woocommerce-message {
	background: var(--lichtblauw);
	margin: 0;
    padding: 1em 2em 1em 3.5em;
    position: relative;
    color: var(--primary);
    border-top: 3px solid var(--primary);
    list-style: none outside;
    width: auto;
    word-wrap: break-word;
	line-height: 2.5em;
}

.woocommerce-message::before {
	color: background: var(--accent);
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button {
	background: var(--accent);
	color: var(--wit);
	padding: 15px 45px 15px 45px;
	border-radius: 30px;
}

/* SMARTCRAWL */
.smartcrawl-breadcrumbs, .smartcrawl-breadcrumbs a {
	color: var(--primary)!important;
	font-size: 14px!important;
	font-family: var(--text-font);
}

/* WISHLIST */
.tinvwl_add_to_wishlist_button {
	border: 1px solid var(--lijnen);
  border-radius: 30px;
  padding: 10px 20px;
	background: var(--lichtblauw);
    width: 100%!important;
}

.tinvwl_add_to_wishlist-text {
	color: var(--text);
}

.tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart-plus:before {
	color: var(--secondary);
}

.tinv-wraper.tinv-wishlist.tinvwl-above_thumb-add-to-cart {
	z-index: 1;
}

/* Mini Cart */
.elementor-menu-cart__main {
	width: 450px;
}

/* SALE FLASH */
.woocommerce span.onsale {
	z-index: 1;
}

/* TABS */
.woocommerce div.product .woocommerce-tabs ul.tabs, .woocommerce-Reviews-title {
	display: none;
}

.woocommerce div.product.elementor .woocommerce-tabs .panel {
	border-top: none!important;
	padding: 0!important;
}

/* WOOCOMMERCE ADDITIONAL INFORMATION */
.woocommerce table.shop_attributes {
	padding: 5px 0!important;
}

.woocommerce table.shop_attributes th {
	text-align: left;
	width: 50%;
}

.woocommerce table.shop_attributes td {
	font-style: normal;
}

.woocommerce table.shop_attributes tr:nth-child(even) td, .woocommerce table.shop_attributes tr:nth-child(even) th, table tbody>tr:nth-child(odd)>td, table tbody>tr:nth-child(odd)>th {
	background: transparent;
}

.woocommerce table.shop_attributes td, .woocommerce table.shop_attributes, .woocommerce table.shop_attributes th {
	border: 0;
}

.woocommerce table.shop_attributes td {
	vertical-align: inherit;
}

.posted_in {
	display: none!important;
}

.woocommerce table.shop_attributes th  {
	padding: 5px 0;
}

.woocommerce table.shop_attributes td p {
	padding: 0;
}

/* CART TABLE */
.woocommerce table.cart td {
	padding: 5px 0!important;
}

/* VARIATIONS TABLE */
.woocommerce div.product form.cart .variations {
	text-align: left;
}

form.cart .variations {
	width: 100%!important;
}

.variations th  {
	padding: 0 10px 0 0;
}

.variations .label {
	vertical-align: middle!important;
}

/* Quantity Plus Minus */
.minus {
	padding: 10px!important;
	background: var(--lichtblauw)!important;
	color: var(--secondary)!important;
	max-width: 2em;
	border-radius: 30px 0 0 30px!important;
	border: 1px solid var(--lijnen)!important;
	border-right: none!important;
}

.plus {
	padding: 10px!important;
	background: var(--lichtblauw)!important;
	color: var(--secondary)!important;
	max-width: 2em;
	margin-left: 0!important;
	border-radius: 0 30px 30px 0!important;
	border: 1px solid var(--lijnen)!important;
	border-left: none!important;
}


/* Disable input arrows Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* FILTERS */
.product-categories, .woocommerce-widget-layered-nav-list, .count {
	padding: 0;
	font-size: 13px;
}

.mobile-nav {
	color: var(--wit)!important;
}

.mobile-nav a {
	font-size: 16px!important;
	color: var(--wit)!important;
}

.count {
	float: right;
}

.product-categories a, .woocommerce-widget-layered-nav-list a {
	color: var(--text);
}

.product-categories a:hover, .woocommerce-widget-layered-nav-list a:hover {
	font-weight: var(--bold-weight);
}

.widget_product_categories .product-categories ::marker {
	color: transparent;
}

/* TI WISHLIST */
.wishlist_item {
	font-size: 12px;
}

.wishlist_item a {
	font-size: 12px;
	color: var(--zwart);
}

.tinvwl-table-manage-list {
	font-size: 16px;
	text-align: left;
	color: var(--zwart);
}

.tinv-wishlist.woocommerce table .quantity .qty {
	width: 80px;
	text-align: center;
}

.tinv-wishlist .tinvwl-table-manage-list .product-stock {
	width: 100px;
}

.tinvwl-item-sku {
	font-size: 12px;
	font-weight: var(--medium-weight);
}

.tinv-wraper.tinv-wishlist.tinvwl-above_thumb-add-to-cart {
	border-radius: 30px;
}

.tinvwl_add_to_wishlist-text {
	color: #027FA0;
}

.tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart-plus:before, .woocommerce ul.products li.product a.tinvwl-button.tinvwl_add_to_wishlist_button.tinvwl-icon-heart-plus:before, .woocommerce-page ul.products li.product a.tinvwl-button.tinvwl_add_to_wishlist_button.tinvwl-icon-heart-plus:before, a.wishlist_products_counter.top_wishlist-heart-plus:before, span.wishlist_products_counter.top_wishlist-heart-plus:before, a.sidr-class-wishlist_products_counter.sidr-class-top_wishlist-heart-plus:before, .tinvwl_cart_to_wishlist_button.tinvwl-icon-heart-plus:before, .tinvwl_all_cart_to_wishlist_button.tinvwl-icon-heart-plus:before {
	color: #c36;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button.alt {
	background: var(--primary);
}

.tinv-wraper.tinv-wishlist.tinvwl-above_thumb-add-to-cart {
	z-index: 1;
}

.wishlist-name, .wishlist-date {
	text-align: left;
}

/* WHOLESALE FORM */
#wwlc-registration-form label {
	display: none;
}

/* CHECKOUT */
.woocommerce form p.form-row input[type=number] {
	background-color: var(--wit)!important;
	border-radius: 30px!important;
}

/* CARTFLOWS */
#order_review_heading {
	width: 30%!important;
}

#order_review {
	width: 30%!important;
	float: left!important;
}

.iti__selected-country button {
	background: var(--lichtgrijs)!important;
}

/* IMAGE PRODUDCT ARCHIVE */
.woocommerce ul.products li.product a img {
	padding: 20px!important;
}

/* ORDER FORM */
[class^="ant-table"] [class^="ant-table"] {
	background: var(--wit)!important;
}

:where(.css-eq3tly).ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
	height: auto!important;
	padding: 6px!important;
}

/* Image vergrootglas */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
    display: none;
}

/* WooCommerce Registratieformulier */
form.woocommerce-form-register {
  height: auto !important;
}

/* SEARCH ICON */
.elementor-search-form__submit {
	display: none!important;
}

.b2bking_information_table {
	display: none;
}

.b2bking_bulkorder_form_container_indigo.b2bking_bulkorder_form_container_cream {
	padding: 10px;
}

.group_table a {
    color: #0a0a0a;
}

.woocommerce div.product form.cart .group_table td {
    vertical-align: middle;
}

/* Quantity horizontaal + nette uitlijning (ook voor gegroepeerde producten) */
.woocommerce div.product form.cart .group_table td:first-child {
    width: auto;
}

/* Quantity: layout + knoppen in het veld */
.woocommerce .quantity {
  position: relative;
  display: inline-block;
  width: 110px; /* pas aan naar wens */
}

.woocommerce .quantity input.qty {
  width: 100%;
  text-align: center;
  padding-left: 34px;   /* ruimte voor − knop */
  padding-right: 34px;  /* ruimte voor + knop */
  box-sizing: border-box;
}

/* Verberg de native spinners (Chrome/Edge/Safari) */
.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.woocommerce .quantity input.qty[type=number] { -moz-appearance: textfield; }

/* Stijlen voor de knoppen die we injecteren */
.woocommerce .quantity .qty-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  border: 1px solid #d6d6d6;
  border-radius: 6px;
  background: #fff;
  line-height: 24px;
  text-align: center;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.woocommerce .quantity .qty-minus { left: 4px; }
.woocommerce .quantity .qty-plus  { right: 4px; }

.woocommerce .quantity .qty-btn:active { transform: translateY(-50%) scale(0.98); }

table td, table th {
    padding: 5px;
}