/* ALLES HIERONDER IS HANDIG OM OVERAL TE HEBBEN */

.requiredstar::after {
	content: '*';
	font-family: 'Courier';
	color: red;
	font-weight: bold;
}

.error, a[remove] {
	font-weight: bold;
	color: red;
}

figure {
    margin: 0px 0px 10px 0px;
    max-width: 100%;
    height: auto;
}


figure.image-left {
    float: left;
    margin: 0px 10px 0px 0px;
}

figure.image-right {
    float: right;
    margin: 0px 0px 0px 10px;
}

figure.image-center {
    margin: 0;
}

figure.image-left img, figure.image-right img, figure.image-center img, figure img {
  -webkit-border-radius: 4px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 4px;
  -moz-background-clip: padding;
  border-radius: 4px;
  background-clip: padding-box;
}

figure.image-center img {
  max-width: 100%;
  height: auto;
}

.notransitie {
  transition: none;
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
}

    .static-prefix {
      font-size: 90px;
      font-weight: 600;
      color: #ffffff;
      white-space: nowrap;
    }

    .typing-word {
      font-size: 90px;
      font-weight: 700;
      color: #ffffff;
      white-space: nowrap;
      min-width: 2ch;
      display: inline-block;
    }

    .cursor {
      display: inline-block;
      width: 3px;
      height: 1em;
      background: #185FA5;
      margin-left: 2px;
      vertical-align: text-bottom;
      animation: blink 0.75s step-end infinite;
      border-radius: 1px;
    }

    @keyframes blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }

    .word-list {
      display: none;
    }

    .word-pill {
      display: none;
    }

    .speed-row {
      margin-top: 1.5rem;
      display: none;
      align-items: center;
      gap: 12px;
    }

    .page-nav-wrap ul li .page-numbers.active {
    background-color: var(--theme);
    color: var(--white);
}

.blog-wrapper .single-blog-post .post-content ul li::before {
    content: "\f192";
}

.ruimteaccount {
    margin: 20px 0;
}

.description-content li {
    font-size: 16px;
    text-transform: capitalize;
    color: var(--header);
    font-weight: 600;
}

.orders-list .badge {
    background-color: #7000fe;
}

.blog-wrapper .single-blog-post .post-content .shop-items .shop-image .offer-text {
    font-size: 14px;
    letter-spacing: 1px;
    background: var(--color-gradient-1);
    display: inline-block;
    font-weight: 600;
    color: var(--white);
    padding: 0 8px;
    margin-bottom: 20px;
    text-transform: uppercase;
    position: absolute;
    top: 15px;
    left: 15px;
}

.shop-items.homepage {
    background-color: #F0F5F8;
    text-align: left;
    border-radius: 20px;
    padding: 0;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

.hero-3 .hero-bg {
    height: 45%;
    z-index: -1;
}

.homepage .shop-image {
    /* max-width: 210px; */
    margin: 0 auto;
    padding: 20px 10px 0 10px;
}

.shop-items.homepage .content {
    padding: 10px;
    background-color: #ffffff;
}
.shop-items.homepage h3 {
    font-weight: normal;
    font-size: 16px;
}

.homepagetitle {
    font-size: 90px;
    text-align: center;
}

.homepageOndertitel {
    font-size: 24px;
    text-align: center;
}

.blog-wrapper .single-blog-post .post-content .shop-items .shop-image img {
    margin: 0;
}

.blog-wrapper .single-blog-post .post-content .shop-items .shop-image .product-icon li {
    line-height: 40px;
}

.blog-wrapper .single-blog-post .post-content .shop-items .shop-content,
.blog-wrapper .single-blog-post .post-content .shop-items .shop-content .price-list {
    margin-top: 0;
}

.blog-wrapper .single-blog-post .post-content .shop-items .shop-image .product-icon li,
.blog-wrapper .single-blog-post .post-content .shop-items .shop-content .price-list li {
    list-style: none;
    padding-left: 0;
}

.blog-wrapper .single-blog-post .post-content .shop-items .shop-image .product-icon li::before,
.blog-wrapper .single-blog-post .post-content .shop-items .shop-content .price-list li::before {
    content: "";
}

.shop-catagory-items ul.submenu {
    margin: 1rem;
}

.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    color: inherit;
    transition: transform 0.3s ease;
}

.category-toggle:hover {
    opacity: 0.7;
}

.category-toggle i {
    font-size: 0.875rem;
}

.categorietitel { 
    color: #ffffff; 
}

.section-padding-custom {
  padding: 20px 0;
}

.main-cart-wrapper .cart-wrapper .cart-items-wrapper table tbody .cart-item:has(+ .cart-item-data) td {
    border-bottom: none;
}

.main-cart-wrapper .cart-wrapper .cart-items-wrapper table tbody .cart-item-data .data-key {
    font-weight: bold;
}

.selectable-row {
    cursor: pointer;
    
    &:hover td {
        background-color: var(--theme);
        color: var(--white);
    }
    &.chosen td {
        background-color: black;
        color: white;
    }
}

/**
* probo product configurator settings
* Hier zie je de parts die je kan gebruiken: https://github.com/ProboConnect/product-configurator#customizing-the-configurator
*/

connect-product-configurator::part(option) {
    width: 11.5rem !important;
    border-radius: var(--bs-border-radius-xxl) !important;
    -webkit-border-radius: var(--bs-border-radius-xxl) !important;
    -moz-border-radius: var(--bs-border-radius-xxl) !important;
    -ms-border-radius: var(--bs-border-radius-xxl) !important;
    -o-border-radius: var(--bs-border-radius-xxl) !important;
}

/* Media queries */
@media (max-width: 1199px) {
    /* Styles for screens up to 1180px */
    h2.homepagetitle {
        font-size: 100px;
    }
    .static-prefix {
        min-width: 100%;
}
    .typing-hero {
        min-height: 130px;
        width: 100%;
    }   
    .typing-word {
        margin-top: 40px;
    }
}

@media (max-width: 767px) {
    /* Styles for screens up to 768px */
    h2.homepagetitle {
        font-size: 80px;
    }
    .typing-word {
        font-size: 50px;
    }
}

@media (max-width: 575px) {
    /* Styles for screens up to 400px */
    h2.homepagetitle {
        font-size: 60px;
    }
    .static-prefix {
        font-size: 60px;
    }
    .typing-word {
        font-size: 50px;
    }
}

body:has(.cart-wrp:focus-within) #header-sticky.sticky {
    display: none !important;
}

#downloads ul {
    padding-left: 1rem;
    list-style: disc;

    a {
        transition: color ease-in-out background-color ease-in-out;
        transition-duration: 150ms;
        padding: 5px;
    }
    li:hover a {
        color:white;
        background-color: var(--theme);
    }
}

#probo-uploader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: gold;
    display: none;
    z-index: 1000000;
    iframe {
        width: 100%;
        height: 100%;
    }
    &:has(iframe) {
        display: initial;
    }
}

html:has(#probo-uploader > iframe),
body:has(#probo-uploader > iframe) {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox, Safari 18.2+, Chromium 121+ */
    &::-webkit-scrollbar { 
        display: none;  /* Older Safari and Chromium */
    }
}


.theme-btn:hover {
    background-color: var(--header);
}

.theme-btn::before,
.theme-btn::after {
    height: 0;
}

.checkout-single-wrapper .checkout-single .checkout-single-form .input-single label {
    text-transform: initial;
}