@charset "UTF-8";
/*
Theme Name: Windels green & deco resin
Theme URI: https://Webcrafters.be/
Author: Gielen Matthias
Author URI: https://Webcrafters.be/
Description: Windels green & deco resin is specially designed product packaged for eCommerce store websites.
Version: 1.1
*/
/*--------------------------------------------------------------
This is main CSS file that contains custom style rules used in this template
--------------------------------------------------------------*/
/*------------------------------------*\
    Table of contents
\*------------------------------------*/
/*------------------------------------------------

CSS STRUCTURE:

1. VARIABLES

2. GENERAL TYPOGRAPHY
  2.1 General Styles
  2.2 Floating & Alignment
  2.3 Forms
  2.4 Lists
  2.5 Code
  2.6 Tables
  2.7 Spacing
  2.8 Utilities
  2.9 Misc
    - Row Border
    - Zoom Effect
  2.10 Buttons
    - Button Sizes
    - Button Shapes
    - Button Color Scheme
    - Button Aligns
  2.11 Section
    - Hero Section
    - Section Title
    - Section Paddings
    - Section Margins
    - Section Bg Colors
    - Content Colors
    - Content Borders
  2.12 Colors
    - Standard colors

3. EXTENDED TYPOGRAPHY
  3.1 Blockquote / Pullquote
  3.2 Text Highlights

4. CONTENT ELEMENTS
  4.1 Tabs
  4.2 Accordions
  4.3 Brand Carousel
  4.4 Category Carousel

5. BLOG STYLES
  5.1 Blog Single Post
  5.2 About Author
  5.3 Comments List
  5.4 Comments Form3

6. SITE STRUCTURE
  6.1 Header
    - Header Menu
    - Nav Sidebar
  6.2 Billboard
  6.3 About Us Section
  6.4 Video Section
  6.5 Selling Products Section
  6.6 Quotation Section
  6.7 Latest Blogs Section
  6.8 Newsletter Section
  6.9 Instagram Section
  6.10 Footer
    - Footer Top
    - Footer Bottom

7. OTHER PAGES
  7.1 Product detail
  7.2 Shop page
  7.3 Shopping cart
  7.4 Account page
  7.4.1 Orders page
  7.5 admin/deal of the week
  7.6 Myparcel
  7.7 Klant detail pages
  7.8 Admin klantenpagina
  7.9 Import customer
 */
/*--------------------------------------------------------------
/** 1. VARIABLES
--------------------------------------------------------------*/
:root {
  /* widths for rows and containers
   */
  --header-height: 160px;
  --header-height-min: 80px;
}

/* on mobile devices below 600px
 */
@media screen and (max-width: 600px) {
  :root {
    --header-height: 100px;
    --header-height-min: 80px;
  }
}
body {
  letter-spacing: 0.03em;
}

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
  font-weight: 700;
}

.breadcrumb.text-white {
  --bs-breadcrumb-divider-color: #fff;
  --bs-breadcrumb-item-active-color: var(--bs-primary);
}

.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--bs-primary);
}

.nav-pills .nav-link {
  --bs-nav-pills-link-active-color: #111;
  --bs-nav-pills-link-active-bg: #f1f1f1;
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  --bs-gutter-x: 3rem;
}

/*----------------------------------------------*/
/* 2 GENERAL TYPOGRAPHY */
/*----------------------------------------------*/
/* Fonts */
:root {
  --body-font: "Nunito", sans-serif;
  --heading-font: "Nunito", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  color: var(--dark-color);
  font-weight: 700;
}

/*----------------------------------------------*/
/* 2.12 COLORS */
/*----------------------------------------------*/
/* Theme Colors */
:root {
  --accent-color: #2CCC5C;
  --dark-color: #222222;
  --light-dark-color: #727272;
  --light-color: #fff;
  --grey-color: #dbdbdb;
  --light-grey-color: #fafafa;
  --primary-color: #6995B1;
  --light-primary-color: #eef1f3;
}

.text-primary {
  color: #FF8C00;
}

.text-red {
  color: #ff0000;
}

.mr-2 {
  margin-right: 0.5rem;
}

body {
  --bs-link-color: #333;
  --bs-link-hover-color:#333;
  --bs-link-color-rgb: 40,40,40;
  --bs-link-hover-color-rgb: 0,0,0;
  /* --bs-link-color: #2CCC5C;
  --bs-link-hover-color: #2CCC5C; */
  --bs-light-rgb: 248, 248, 248;
  --bs-font-sans-serif: "Open Sans", sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 2;
  --bs-body-color: #747474;
  --bs-primary: #2CCC5C;
  --bs-primary-rgb: 255, 196, 63;
  --bs-success: #a3be4c;
  --bs-success-rgb: 163, 190, 76;
  --bs-primary-bg-subtle: #FFF9EB;
  --bs-success-bg-subtle: #eef5e5;
  --bs-border-color: #F7F7F7;
  --bs-secondary-rgb: 230, 243, 251;
  /* --bs-success-rgb: 238, 245, 228; */
  --bs-danger-rgb: 249, 235, 231;
  --bs-warning-rgb: 255, 249, 235;
  --bs-info-rgb: 230, 243, 250;
}

.category-thumbnail {
  max-height: 80px;
  max-width: 80px;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #2CCC5C;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #f7a422;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #2CCC5C;
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #d3d7dd;
  --bs-btn-disabled-border-color: transparent;
  transition: all 0.3s ease-in-out;
  transform: scale(1);
}
.btn-primary:hover {
  transform: scale(1.1);
}

.btn-outline-primary {
  --bs-btn-color: #2CCC5C;
  --bs-btn-border-color: #2CCC5C;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #2CCC5C;
  --bs-btn-hover-border-color: #2CCC5C;
  --bs-btn-focus-shadow-rgb: 13,110,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #2CCC5C;
  --bs-btn-active-border-color: #2CCC5C;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff3cd;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #fff3cd;
  --bs-gradient: none;
}

.btn-outline-light {
  --bs-btn-color: #747474;
  --bs-btn-border-color: #EFEFEF;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #EFEFEF;
  --bs-btn-hover-border-color: #EFEFEF;
  --bs-btn-focus-shadow-rgb: 248,249,250;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #EFEFEF;
  --bs-btn-active-border-color: #EFEFEF;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #EFEFEF;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #EFEFEF;
  --bs-gradient: none;
}

.btn-warning {
  --bs-btn-color: #747474;
  --bs-btn-bg: #FCF7EB;
  --bs-btn-border-color: #FCF7EB;
  --bs-btn-hover-color: #747474;
  --bs-btn-hover-bg: #FFECBE;
  --bs-btn-hover-border-color: #FFECBE;
  --bs-btn-focus-shadow-rgb: 217,164,6;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #FFECBE;
  --bs-btn-active-border-color: #FFECBE;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #FCF7EB;
  --bs-btn-disabled-border-color: #FCF7EB;
}

.btn-success {
  --bs-btn-color: #222;
  --bs-btn-bg: #EEF5E4;
  --bs-btn-border-color: #EEF5E4;
  --bs-btn-hover-color: #222;
  --bs-btn-hover-bg: #9de3c2;
  --bs-btn-hover-border-color: #9de3c2;
  --bs-btn-focus-shadow-rgb: 60,153,110;
  --bs-btn-active-color: #222;
  --bs-btn-active-bg: #9de3c2;
  --bs-btn-active-border-color: #9de3c2;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #222;
  --bs-btn-disabled-bg: #EEF5E4;
  --bs-btn-disabled-border-color: #EEF5E4;
}

.btn-danger {
  --bs-btn-color: #222;
  --bs-btn-bg: #FFEADA;
  --bs-btn-border-color: #FFEADA;
  --bs-btn-hover-color: #222;
  --bs-btn-hover-bg: #ecc9af;
  --bs-btn-hover-border-color: #ecc9af;
  --bs-btn-focus-shadow-rgb: 60,153,110;
  --bs-btn-active-color: #222;
  --bs-btn-active-bg: #ecc9af;
  --bs-btn-active-border-color: #ecc9af;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #222;
  --bs-btn-disabled-bg: #FFEADA;
  --bs-btn-disabled-border-color: #FFEADA;
}

.error {
  color: white;
  background: red;
}

.success {
  color: white;
  background: green;
}

.bg-red {
  background-color: #FF5758;
  color: #fff;
}

.bg-orange {
  background-color: #FFDE59;
  color: #fff;
}

.bg-green {
  background-color: #2CCC5C;
  color: #fff;
}

/*----------------------------------------------*/
/* 6. SITE STRUCTURE */
/*----------------------------------------------*/
/* 6.1 Header
--------------------------------------------------------------*/
/* Header */
header #search-suggesties {
  max-height: 300px;
  overflow-y: auto;
  background-color: #fff;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
header #search-suggesties a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: #333;
}
header #search-suggesties a:hover {
  background-color: #f8f9fa;
}
header #search-suggesties a img {
  border-radius: 4px;
}

/* Preloader */
.preloader-wrapper {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 111;
  background: #fff;
}

.preloader-wrapper .preloader {
  margin: 20% auto 0;
  transform: translateZ(0);
}

.preloader:before,
.preloader:after {
  content: "";
  position: absolute;
  top: 0;
}

.preloader:before,
.preloader:after,
.preloader {
  border-radius: 50%;
  width: 2em;
  height: 2em;
  animation: animation 1.2s infinite ease-in-out;
}

.preloader {
  animation-delay: -0.16s;
}

.preloader:before {
  left: -3.5em;
  animation-delay: -0.32s;
}

.preloader:after {
  left: 3.5em;
}

@keyframes animation {
  0%, 80%, 100% {
    box-shadow: 0 2em 0 -1em var(--accent-color);
  }
  40% {
    box-shadow: 0 2em 0 0 var(--accent-color);
  }
}
.container-fluid {
  max-width: 1600px;
}

.banner-blocks {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 2rem;
}

.block-1 {
  grid-area: 1/1/3/8;
}

.block-2 {
  grid-area: 1/8/2/13;
}

.block-3 {
  grid-area: 2/8/3/13;
}

@media screen and (max-width: 1140px) {
  .banner-blocks {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
  }
  .block-1 {
    grid-area: 1/1/3/2;
  }
  .block-2 {
    grid-area: 3/1/4/2;
  }
  .block-3 {
    grid-area: 4/1/5/2;
  }
}
/* Algemene stijlen */
.banner-ad {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  z-index: 999;
}
.banner-ad html > body > div.container > form#unsubscribe-form[onsubmit="submitUnsubscribeForm(event)"] {
  display: block !important;
}
.banner-ad-section {
  background-image: url("/images/background-pattern.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
.banner-ad.blue {
  background: #e6f3fb;
}
.banner-ad .swiper-pagination {
  bottom: 40px;
  left: 0;
  right: 0;
}
.banner-ad .swiper-pagination .swiper-pagination-bullet {
  width: 16px;
  height: 16px;
  margin: 4px;
  background: #fff;
  opacity: 1;
  transition: background 0.3s ease-out;
}
.banner-ad .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #2ccc5c;
}
.banner-ad .swiper-slide {
  min-height: 630px;
  display: flex;
}
.banner-ad .banner-content .categories {
  font-family: "Garamond", sans-serif;
  font-size: 37px;
  text-transform: capitalize;
  color: var(--dark-color);
}
.banner-ad .banner-content .categories.sale {
  position: relative;
  display: inline-block;
}
.banner-ad .banner-content .banner-title {
  letter-spacing: 0.02em;
  font-size: 33px;
}
.banner-ad .banner-content.large {
  padding: 90px;
}
.banner-ad .banner-content.large .categories {
  color: var(--accent-color);
}
.banner-ad .banner-content.large .banner-title {
  font-size: 54px;
}
.banner-ad .banner-content .nav-link:hover {
  color: var(--accent-color);
}

/* Swiper carousel */
.swiper-prev,
.swiper-next {
  width: 38px;
  height: 38px;
  line-height: 38px;
  background: #f1f1f1;
  color: #222222;
  padding: 0;
  text-align: center;
  border-radius: 10px;
  --bs-btn-border-color: transparent;
  --bs-btn-active-bg: #ec9b22;
  --bs-btn-active-border-color: transparent;
  --bs-btn-hover-bg: #2ccc5c;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-disabled-color: #ccc;
  --bs-btn-disabled-bg: #eaeaea;
  --bs-btn-disabled-border-color: #eaeaea;
}
.swiper-prev:hover,
.swiper-next:hover {
  background: #2ccc5c;
}

.btn-link {
  margin-right: 30px;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  text-align: right;
  text-transform: capitalize;
  color: #787878;
}

/* Category carousel */
.category-carousel .category-item {
  background: #fff;
  border: 1px solid #fbfbfb;
  box-shadow: 0px 5px 22px rgba(0, 0, 0, 0.04);
  border-radius: 16px;
  text-align: center;
  padding: 60px 20px;
  margin: 20px 0;
  transition: box-shadow 0.3s ease-out, transform 0.3s ease-out;
}
.category-carousel .category-item:hover {
  transform: translate3d(0, -10px, 0);
  box-shadow: 0px 21px 44px rgba(0, 0, 0, 0.08);
}
.category-carousel .category-item .category-title {
  font-weight: 600;
  font-size: 20px;
  line-height: 27px;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  color: #222222;
  margin-top: 20px;
}

/* Brand carousel */
.brand-carousel {
  width: 100%;
}
.brand-carousel .swiper-slide {
  padding: 1em 0;
}
.brand-carousel .swiper-slide .card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  scale: 1;
  transition-duration: 0.3s;
}
.brand-carousel .swiper-slide .card:hover {
  scale: 1.1;
}
.brand-carousel .swiper-slide .card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 0.5rem;
}
.brand-carousel .swiper-slide .card .card-title {
  font-size: 1rem;
  line-height: 1.3;
  min-height: 2.6rem;
  max-height: 2.6rem;
  margin: 0 0 0.5rem;
}
.brand-carousel .swiper-slide .card p {
  margin-bottom: 0;
}

/* Product tabs */
.product-tabs .nav-tabs {
  justify-content: flex-end;
  border: none;
  --bs-nav-link-hover-color: #111;
  --bs-nav-link-color: #555;
  --bs-nav-tabs-link-border-color: #fff;
  --bs-nav-tabs-link-hover-border-color: transparent;
  --bs-nav-tabs-link-active-border-color: #fff;
}
.product-tabs .nav-tabs .nav-link.active, .product-tabs .nav-tabs .nav-link.show {
  border-bottom: 3px solid var(--accent-color);
}

/* product-grid */
.product-grid .product-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  scale: 1;
  transition-duration: 0.3s;
}
.product-grid .product-item figure {
  width: 100%;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
}
.product-grid .product-item figure img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
}
@media (max-width: 576px) {
  .product-grid .product-item figure img {
    height: auto;
    aspect-ratio: 1/1;
  }
}
.product-grid .product-item .product-body {
  padding: 1rem;
}
.product-grid .product-item .product-body h3 {
  font-size: 1rem;
  line-height: 1.3;
  min-height: 2.6rem;
  max-height: 2.6rem;
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-grid .product-item .product-body .price {
  font-weight: 600;
  font-size: 1.1rem;
  color: #222;
}

.cart .product-qty {
  min-width: 130px;
}

.image-float {
  margin-top: -140px;
  margin-bottom: -140px;
}

@media screen and (max-width: 991px) {
  .image-float {
    margin: 0;
  }
  .w-sm-80 {
    width: 80%;
  }
  .d-sm-none {
    display: none;
  }
}
/* post item */
.post-item .post-meta {
  font-size: 0.8rem;
  line-height: 1;
}

.post-item .post-meta svg {
  margin-right: 5px;
}

@media screen and (max-width: 991px) {
  /* offcanvas menu */
  .offcanvas-body .nav-item {
    font-weight: 700;
    border-bottom: 1px solid #d1d1d1;
  }
  .offcanvas-body .filter-categories {
    width: 100%;
    margin-bottom: 20px !important;
    border: 1px solid #d1d1d1 !important;
    padding: 14px;
    border-radius: 8px;
  }
  /* dropdown-menu */
  .dropdown-menu {
    padding: 0;
    border: none;
    line-height: 1.4;
    font-size: 0.9em;
  }
  .dropdown-menu a {
    padding-left: 0;
  }
  .dropdown-toggle::after {
    position: absolute;
    right: 0;
    top: 21px;
  }
}
/* single product */
/* product-thumbnail-slider */
.product-thumbnail-slider {
  height: 740px;
}

@media screen and (max-width: 992px) {
  .product-thumbnail-slider {
    margin-top: 20px;
    height: auto;
  }
}
@media screen and (min-width: 992px) {
  .product-thumbnail-slider {
    height: 520px;
  }
}
@media screen and (min-width: 1200px) {
  .product-thumbnail-slider {
    height: 740px;
  }
}
.best-selling-swiper-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Flexibele grid */
  gap: 20px; /* Ruimte tussen de items */
}

.best-selling-item {
  background-color: #f9f9f9;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.best-selling-item:hover {
  transform: translateY(-5px); /* Kleine hover-effect */
}

.best-selling-item figure img {
  width: 100%; /* Zorgt ervoor dat de afbeelding de breedte van de container inneemt */
  height: 200px; /* Of stel een vaste hoogte in die je wilt */
  object-fit: contain; /* Zorgt ervoor dat de afbeelding proportioneel wordt geschaald */
  border-radius: 5px; /* Optioneel: rond de hoeken af */
}

.badge.bg-success {
  font-size: 0.9rem;
  padding: 5px 10px;
  position: absolute;
  top: 10px;
  left: 10px;
}

.price {
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
}

.bg-404 {
  background: url("/images/errorDocs/404.png") no-repeat center center;
  background-size: contain;
  height: 50vh;
  display: flex;
}

.radius-1 {
  border-radius: 1em;
}

footer {
  color: #333;
  padding: 50px 0;
}
footer h3 {
  color: #333;
  font-size: 1em;
  margin-bottom: 15px;
  border-bottom: 2px solid #333;
  padding-bottom: 5px;
}
footer .opening-hours {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}
footer .opening-hours th, footer .opening-hours td {
  text-align: left;
  padding: 8px 10px;
  font-size: 1rem;
  color: #333;
}
footer .opening-hours th {
  font-weight: bold;
}
footer .opening-hours tr:nth-child(odd) {
  background-color: rgba(255, 255, 255, 0.1);
}
footer .opening-hours tr:nth-child(odd):hover {
  background-color: rgba(236, 219, 186, 0.3);
}
footer .special .note {
  color: #f1c40f;
  font-size: 0.9rem;
}
footer .social-links a {
  margin: 0 5px;
  color: #2CCC5C;
  transition: color 0.3s ease;
}
footer .social-links a:hover {
  color: #f39c12;
  background: #1a1d20;
}
footer .credit-link a {
  color: #333;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}
footer .credit-link a:hover {
  color: #f39c12;
}

/*---------------------
  AI-integration
-------------------------*/
#chatbot-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 320px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  font-family: Arial, sans-serif;
  overflow: hidden;
  z-index: 999;
}
#chatbot-container.minimized {
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
}
#chatbot-container #collapseButton {
  position: absolute;
  top: 0;
  right: 0;
  background: #2CCC5C;
  color: white;
  padding: 5px 10px;
  border-radius: 0 10px 0 0;
  cursor: pointer;
}
#chatbot-container #chat-header {
  background: #2CCC5C;
  color: white;
  padding: 10px;
  text-align: center;
  font-weight: bold;
}
#chatbot-container #chat-box {
  height: 250px;
  overflow-y: auto;
  padding: 10px;
  background: #f9f9f9;
}
#chatbot-container #chat-input-area {
  display: flex;
  padding: 10px;
  background: white;
}
#chatbot-container #chat-input-area #user-input {
  flex: 1;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
#chatbot-container #chat-input-area #send-btn,
#chatbot-container #chat-input-area #emoji-btn {
  padding: 5px 10px;
  background: #2CCC5C;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 5px;
}
#chatbot-container #chat-input-area #send-btn {
  font-size: larger;
  padding: 0;
  margin: 0;
  background: none;
}
#chatbot-container .message {
  padding: 8px;
  margin: 5px 0;
  border-radius: 5px;
  max-width: 80%;
}
#chatbot-container .message.user {
  background: #FFDE59;
  color: black;
  align-self: flex-end;
}
#chatbot-container .message.bot {
  background: #eee;
  align-self: flex-start;
}

#chatbot-icon {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #2CCC5C;
  color: white;
  padding: 10px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 24px;
  transition: opacity 0.3s ease-in-out;
  z-index: 999;
}
#chatbot-icon:hover {
  background: rgb(34.9516129032, 162.0483870968, 73.0806451613);
}

.collapsed {
  display: none;
}

#newsletter-form input,
#newsletter-form select {
  border-radius: 8px;
  padding: 15px;
  font-size: 1.1rem;
}

#newsletter-form .form-check-input {
  transform: scale(1.2);
}

#newsletter-form .form-check-label {
  font-size: 1.1rem;
}

#newsletter-form .d-grid {
  margin-top: 15px;
}

#response-message {
  font-size: 1.2rem;
  color: green;
  font-weight: bold;
}

.bg-pattern-2 {
  background: url("/images/bg-pattern-2.png") no-repeat;
  background-size: contain;
}

/* ------------------------------------------------------
    7.2 shop
------------------------------------------------------ */
.badge {
  font-size: 0.75rem;
  padding: 0.4em 0.6em;
  border-radius: 0.4em;
  font-weight: bold;
}
.badge.bg-red {
  background-color: #FF5758;
  color: #fff;
}
.badge.bg-orange {
  background-color: #FFDE59;
  color: #fff;
}
.badge.bg-green {
  background-color: #2CCC5C;
  color: #fff;
}

.shop .product-wrapper a img {
  min-height: 80%;
  max-height: 80%;
}
.shop .product-wrapper .product-description p, .shop .product-wrapper .product-description div {
  max-height: 4.5em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------
    7.3 shopping cart
------------------------------------------------------ */
#shopping-cart-page h1 {
  text-align: center;
  margin-bottom: 2rem;
}
#shopping-cart-page .list-group {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
}
#shopping-cart-page .list-group .list-group-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 1rem;
}
#shopping-cart-page .list-group .list-group-item img {
  width: 80px;
  height: auto;
  border-radius: 0.5rem;
  margin-right: 1rem;
}
#shopping-cart-page .list-group .list-group-item h5 {
  font-weight: 700;
  margin-bottom: 0.25rem;
}
#shopping-cart-page .list-group .list-group-item small {
  color: #666;
}
#shopping-cart-page select.form-select {
  border-color: #0d6efd;
  font-size: 1rem;
  margin-bottom: 1rem;
}
#shopping-cart-page input.form-control {
  font-size: 1rem;
  margin-bottom: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
}
#shopping-cart-page #shipping_methods_container h4 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}
#shopping-cart-page #shipping_methods_container .form-check {
  margin-bottom: 0.5rem;
}
#shopping-cart-page #shipping_methods_container .form-check input[type=radio] {
  transform: scale(1.3);
  margin-right: 0.5rem;
  cursor: pointer;
}
#shopping-cart-page #shipping_methods_container .form-check label {
  cursor: pointer;
}
#shopping-cart-page #total_price {
  font-size: 1.5rem;
  font-weight: 600;
  color: #28a745;
  text-align: center;
  margin-top: 1rem;
}
#shopping-cart-page #checkoutButton {
  display: block;
  margin: 1.5rem auto;
  padding: 0.75rem 2.5rem;
  font-size: 1.2rem;
  border-radius: 0.5rem;
  background-color: #198754;
  color: #fff;
  border: none;
  transition: background-color 0.3s;
}
#shopping-cart-page #checkoutButton:hover {
  background-color: #157347;
}
@media (max-width: 576px) {
  #shopping-cart-page .list-group-item {
    flex-direction: column;
    align-items: flex-start;
  }
  #shopping-cart-page .list-group-item img {
    margin-bottom: 0.5rem;
    margin-right: 0;
  }
  #shopping-cart-page #checkoutButton {
    width: 100%;
  }
}

/* ------------------------------------------------------
    7.4 account page
------------------------------------------------------ */
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #f4f4f4;
}
.login-container h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}
.login-container form {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 400px;
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.login-container form label {
  font-weight: bold;
  margin-bottom: 0.5rem;
}
.login-container form input {
  padding: 10px;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
  width: 100%;
}
.login-container form button {
  background: #007bff;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
}
.login-container form button:hover {
  background: #0056b3;
}
.login-container p {
  margin-top: 1rem;
}
.login-container p a {
  color: #007bff;
  text-decoration: none;
}
.login-container p a:hover {
  text-decoration: underline;
}
.login-container .social-login {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.login-container .social-login button {
  background: #4267B2;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
  width: 100%;
  max-width: 250px;
}
.login-container .social-login button.facebook {
  background: #3b5998;
}
.login-container .social-login button.google {
  background: #DB4437;
}
.login-container .social-login button:hover {
  filter: brightness(90%);
}

.register-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #f4f4f4;
}
.register-container h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}
.register-container form {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 400px;
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.register-container form label {
  font-weight: bold;
  margin-bottom: 0.5rem;
}
.register-container form input {
  padding: 10px;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
  width: 100%;
}
.register-container form .g-recaptcha {
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
}
.register-container form button {
  background: #28a745;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
}
.register-container form button:hover {
  background: #218838;
}
.register-container p {
  margin-top: 1rem;
}
.register-container p a {
  color: #007bff;
  text-decoration: none;
}
.register-container p a:hover {
  text-decoration: underline;
}

.account-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.account-container .profile-photo-wrapper {
  width: 80px;
  height: 80px;
  position: relative;
}
.account-container .profile-photo-wrapper .profile-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 2px solid #ddd;
  border-radius: 50%;
}
.account-container .profile-photo-wrapper .upload-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
  font-size: 14px;
}
.account-container .profile-photo-wrapper .upload-overlay i {
  font-size: 20px;
  margin-right: 5px;
}
.account-container h2 {
  text-align: center;
  margin-bottom: 20px;
}
.account-container .nav-tabs {
  display: flex;
  justify-content: center;
  border-bottom: 2px solid #ddd;
}
.account-container .nav-tabs .nav-item .nav-link {
  padding: 10px 15px;
  color: #555;
  border: none;
}
.account-container .nav-tabs .nav-item .nav-link:hover, .account-container .nav-tabs .nav-item .nav-link.active {
  background: #007bff;
  color: white;
  border-radius: 5px 5px 0 0;
}
.account-container .tab-content {
  padding: 20px;
  background: #f9f9f9;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}
.account-container form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.account-container form label {
  font-weight: bold;
}
.account-container form input, .account-container form select, .account-container form textarea {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.account-container form button {
  background: #28a745;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.account-container form button:hover {
  background: #218838;
}
.account-container .order-list, .account-container .notification-list {
  list-style: none;
  padding: 0;
}
.account-container .order-list li, .account-container .notification-list li {
  background: #fff;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.account-container .order-list li .order-status, .account-container .notification-list li .order-status {
  font-weight: bold;
  color: #28a745;
}

@media (min-width: 800px) {
  .account-container {
    max-width: 100%;
  }
}
@media (min-width: 1200px) {
  .account-container {
    max-width: 80%;
  }
  .account-container .tab-content #dashboard .dashboard-actions {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
  }
  .account-container .tab-content #dashboard .dashboard-actions a {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: center;
  }
}
.alert {
  padding: 15px;
  background-color: #ffcc00;
  color: #333;
  border-radius: 5px;
  text-align: center;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: bold;
}

.orders-container {
  min-height: 100vh;
}

/* -------------------------------------------
recaptcha
------------------------------------------- */
/* Move reCAPTCHA v3 badge to the left */
.grecaptcha-badge {
  width: 70px !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  left: 4px !important;
}

.grecaptcha-badge:hover {
  width: 256px !important;
}

.chat-container {
  width: 100%;
  max-width: 600px;
  height: 500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.chat-header {
  background-color: green;
  color: white;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 400px; /* Stel de vaste hoogte in */
  overflow-y: auto;
}

.chat-avatar {
  border-radius: 50%;
  margin-right: 10px;
}

.chat-status {
  font-size: 0.9em;
  color: white;
  font-weight: bold;
}

.chat-window {
  height: 400px; /* Stel de vaste hoogte in */
  overflow-y: auto; /* Voeg een verticale scrollbalk toe indien nodig */
  border: 1px solid #ddd;
  padding: 10px;
  background-color: #ffe8d0;
}

/* Chatbubbels */
.chat-bubble {
  max-width: 75%;
  margin-bottom: 10px;
  padding: 10px 15px;
  border-radius: 20px;
  font-size: 14px;
  line-height: 1.4;
  position: relative;
  word-wrap: break-word;
}

/* Berichten van andere gebruikers aan de linkerkant */
.chat-bubble.you {
  background-color: #e9f5ff;
  align-self: flex-start; /* Links uitlijnen */
  border-bottom-left-radius: 0; /* Verwijder onderste linkerhoek voor stijl */
  margin-right: auto; /* Zorg ervoor dat het bericht links blijft */
}

/* Berichten van de gebruiker zelf aan de rechterkant */
.chat-bubble.me {
  background-color: green;
  color: white;
  align-self: flex-end; /* Rechts uitlijnen */
  border-bottom-right-radius: 0; /* Verwijder onderste rechterhoek voor stijl */
  margin-left: auto; /* Zorg ervoor dat het bericht rechts blijft */
  text-align: right; /* Tekst rechts uitlijnen */
}

.chat-footer {
  display: flex;
  padding: 10px;
  background-color: white;
  border-top: 1px solid #ddd;
}

.message-input {
  display: flex;
  align-items: center;
}

.chat-input {
  flex: 1; /* Neemt alle beschikbare ruimte in */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

.chat-send-btn {
  background-color: #28a745; /* Groene knop */
  color: white;
  border: none;
  padding: 10px 20px;
  margin-left: 10px; /* Ruimte tussen invoerveld en knop */
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.chat-send-btn:hover {
  background-color: #218838; /* Donkergroen bij hover */
}

.typing-status {
  font-size: 0.9em;
  color: #999;
  padding: 5px;
  margin-top: -10px;
}

/* Tijdstempel styling */
.chat-bubble.me .chat-time {
  display: block;
  font-size: 0.75em;
  color: #fff;
  margin-top: 5px;
  text-align: right; /* Tijd rechts voor je eigen berichten */
}

/* Tijdstempel styling */
.chat-bubble.you .chat-time {
  display: block;
  font-size: 0.75em;
  color: #999;
  margin-top: 5px;
  text-align: right; /* Tijd rechts voor je eigen berichten */
}

/* Overschrijven van de Bootstrap active class voor list-group-items */
.list-group-item.active {
  background-color: #28a745 !important; /* Groene achtergrondkleur met !important */
  color: white !important; /* Witte tekst voor contrast met !important */
  border-color: #28a745 !important; /* Optioneel: verander ook de randkleur */
}

/* Normale list-group-item */
.list-group-item {
  background-color: white; /* Witte achtergrond voor niet-actieve items */
  color: black; /* Zwarte tekstkleur */
}

/* Hover-effect voor niet-geactiveerde gebruikers */
.list-group-item:hover {
  background-color: #f1f1f1; /* Lichtgrijze achtergrondkleur bij hover */
}

@media (max-width: 768px) {
  .chat-container {
    max-width: 100%;
    height: 400px;
  }
}
/* -----------------------------------
ADMIN
----------------------------------- */
.add-products-container form label {
  font-weight: 600;
  color: #212529;
  margin-bottom: 0.4rem;
}
.add-products-container form input,
.add-products-container form select,
.add-products-container form textarea {
  border: 1px solid #ced4da;
  border-radius: 0.4rem;
  padding: 0.6rem 0.75rem;
  font-size: 1rem;
  transition: all 0.2s ease;
}
.add-products-container form input:focus,
.add-products-container form select:focus,
.add-products-container form textarea:focus {
  border-color: #198754;
  box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
  outline: none;
}
.add-products-container form textarea {
  resize: vertical;
  min-height: 120px;
}
.add-products-container form .form-group,
.add-products-container form .mb-3 {
  margin-bottom: 1.25rem;
}
.add-products-container form .btn-outline-secondary {
  font-weight: 500;
  border-color: #6c757d;
}
.add-products-container form .btn-outline-secondary:hover {
  background-color: #6c757d;
  color: #fff;
}
.add-products-container form #selectedImage {
  display: block;
  margin-top: 0.5rem;
  border: 2px dashed #dee2e6;
  padding: 0.25rem;
  border-radius: 0.25rem;
  max-width: 100px;
  background-color: #f8f9fa;
}
.add-products-container form .btn-success {
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  border-radius: 0.4rem;
}
.add-products-container form .btn-outline-secondary {
  padding: 0.6rem 1.2rem;
  border-radius: 0.4rem;
}
.add-products-container form .d-flex {
  gap: 1rem;
  flex-wrap: wrap;
}

.admin-container {
  max-width: 650px;
  margin: 40px auto;
  padding: 30px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.admin-container h2 {
  text-align: center;
  margin-bottom: 25px;
  color: #333;
}
.admin-container .deal-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.admin-container .deal-form label {
  font-weight: 600;
  color: #555;
}
.admin-container .deal-form input,
.admin-container .deal-form textarea,
.admin-container .deal-form select {
  padding: 10px 15px;
  border-radius: 6px;
  border: 1px solid #ccc;
  transition: border-color 0.3s ease;
}
.admin-container .deal-form input:focus,
.admin-container .deal-form textarea:focus,
.admin-container .deal-form select:focus {
  border-color: #007bff;
  box-shadow: 0 0 6px rgba(0, 123, 255, 0.25);
  outline: none;
}
.admin-container .deal-form textarea {
  resize: vertical;
  min-height: 80px;
}
.admin-container .deal-form .date-fields {
  display: flex;
  flex-direction: row;
  gap: 15px;
}
.admin-container .deal-form .date-fields label {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.admin-container .deal-form .date-fields label input {
  width: 100%;
}
.admin-container .deal-form .btn-submit {
  padding: 12px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.admin-container .deal-form .btn-submit:hover {
  background-color: rgb(0, 98.4, 204);
}

.privacy-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem;
  background-color: #fffaf6;
  border-radius: 1rem;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
  animation: fadeInUp 0.6s ease-out both;
}
.privacy-container h1 {
  text-align: center;
  color: #4b2e2e;
  font-size: 2.4rem;
  margin-bottom: 2rem;
}
.privacy-container h2 {
  font-size: 1.4rem;
  color: #a36643;
  border-left: 5px solid #e1b48a;
  padding-left: 1rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.privacy-container p, .privacy-container li {
  font-size: 1rem;
  color: #3f3f3f;
  line-height: 1.7;
  margin-bottom: 0.8rem;
}
.privacy-container ul {
  list-style: square inside;
  padding-left: 0.5rem;
}
.privacy-container a {
  color: #a36643;
  text-decoration: underline;
}
.privacy-container a:hover {
  text-decoration: none;
  color: rgb(126.8565217391, 79.3826086957, 52.1434782609);
}

.section {
  padding: 1.5rem 1rem;
  margin-bottom: 2rem;
  background: #fff;
  border-left: 4px solid #e8c5a0;
  border-radius: 0.5rem;
  transition: transform 0.3s ease;
}
.section:hover {
  transform: scale(1.01);
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*------------------------------------------

          // 7.6 Myparcel

----------------------------------------- */
.myparcel-dashboard-container {
  padding: 2rem;
}
.myparcel-dashboard-container h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}
.myparcel-dashboard-container .myparcel-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}
.myparcel-dashboard-container .myparcel-controls button {
  background-color: #2d8fdd;
  color: white;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.myparcel-dashboard-container .myparcel-controls button:hover {
  background-color: rgb(29.9590163934, 116.3114754098, 185.0409836066);
}
.myparcel-dashboard-container .myparcel-shipping-calc {
  margin-bottom: 2rem;
}
.myparcel-dashboard-container .myparcel-shipping-calc h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.myparcel-dashboard-container .myparcel-shipping-calc input {
  padding: 0.5rem;
  margin-right: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.myparcel-dashboard-container .myparcel-shipping-calc button {
  background-color: #198754;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.myparcel-dashboard-container .myparcel-shipping-calc button:hover {
  background-color: rgb(17.03125, 91.96875, 57.225);
}
.myparcel-dashboard-container .myparcel-shipping-calc #shipping-cost-result {
  margin-top: 1rem;
  font-weight: bold;
}
.myparcel-dashboard-container #shipment-list {
  background-color: #f1f1f1;
  border-radius: 10px;
  padding: 1rem;
}
.myparcel-dashboard-container #shipment-list .shipment {
  padding: 1rem;
  border-bottom: 1px solid #ddd;
}
.myparcel-dashboard-container #shipment-list .shipment:last-child {
  border-bottom: none;
}
.myparcel-dashboard-container #shipment-list .shipment .status {
  margin-top: 0.25rem;
  font-style: italic;
}
.myparcel-dashboard-container #shipment-list .shipment button.download-label {
  margin-top: 0.5rem;
  background-color: #6c63ff;
  color: white;
  border: none;
  padding: 0.4rem 0.8rem;
  border-radius: 5px;
}
.myparcel-dashboard-container #shipment-list .shipment button.download-label:hover {
  background-color: rgb(59.9423076923, 48, 255);
}

.klant-detail-pagina {
  padding: 2rem;
}
.klant-detail-pagina .btn-terug {
  display: inline-block;
  margin-bottom: 1rem;
  background: #ccc;
  padding: 0.4rem 1rem;
  border-radius: 8px;
  text-decoration: none;
}
.klant-detail-pagina .btn-terug:hover {
  background: #bbb;
}
.klant-detail-pagina h2 {
  margin-bottom: 1.5rem;
}
.klant-detail-pagina .klant-info {
  width: 100%;
  max-width: 600px;
  border-collapse: collapse;
}
.klant-detail-pagina .klant-info th, .klant-detail-pagina .klant-info td {
  text-align: left;
  padding: 0.6rem;
  border-bottom: 1px solid #eee;
}
.klant-detail-pagina .klant-info th {
  width: 180px;
  font-weight: bold;
  background: #f9f9f9;
}
.klant-detail-pagina .orders-tabel {
  width: 80%;
  margin: 0 auto;
}
.klant-detail-pagina .orders-tabel td a {
  color: #2196f3;
  text-decoration: none;
}
.klant-detail-pagina .orders-tabel td a:hover {
  text-decoration: underline;
}
.klant-detail-pagina .orders-tabel .btn-small {
  padding: 0.35rem 0.75rem;
  background: #2196f3;
  color: white;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.85rem;
  display: inline-block;
}
.klant-detail-pagina .orders-tabel .btn-small:hover {
  background: #1976d2;
}

.import-customers {
  margin: 1rem 0;
}
.import-customers .import-customers-button {
  background: #2196f3;
  color: white;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.import-customers .import-customers-button:hover {
  background: #1976d2;
}
.import-customers #import-feedback {
  font-size: 0.9rem;
  color: #333;
}

.admin-klanten-pagina {
  padding: 2rem;
}
.admin-klanten-pagina h1 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.admin-klanten-pagina h1::before {
  content: "🧍";
}
.admin-klanten-pagina .zoekbalk {
  margin-bottom: 1rem;
}
.admin-klanten-pagina .zoekbalk input {
  width: 100%;
  max-width: 400px;
  padding: 0.5rem 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
  transition: 0.2s ease;
}
.admin-klanten-pagina .zoekbalk input:focus {
  outline: none;
  border-color: #2196f3;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}
.admin-klanten-pagina .import-customers {
  margin-bottom: 1.5rem;
}
.admin-klanten-pagina .import-customers .import-customer {
  display: inline-block;
}
.admin-klanten-pagina .import-customers .import-customer .import-customers-button {
  background-color: #2196f3;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.admin-klanten-pagina .import-customers .import-customer .import-customers-button:hover {
  background-color: #1976d2;
}
.admin-klanten-pagina table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.admin-klanten-pagina table thead {
  background-color: #f5f5f5;
}
.admin-klanten-pagina table thead th {
  text-align: left;
  padding: 0.75rem;
  font-weight: bold;
  border-bottom: 2px solid #ddd;
}
.admin-klanten-pagina table tbody tr {
  border-bottom: 1px solid #eee;
  transition: background 0.2s;
}
.admin-klanten-pagina table tbody tr:hover {
  background-color: #f9f9f9;
}
.admin-klanten-pagina table tbody tr td {
  padding: 0.7rem;
  vertical-align: middle;
}
.admin-klanten-pagina table tbody tr a {
  text-decoration: none;
  color: #2196f3;
}
.admin-klanten-pagina table tbody tr a:hover {
  text-decoration: underline;
}
.admin-klanten-pagina #import-feedback {
  margin-top: 1rem;
  color: #333;
  font-size: 0.9rem;
}

/*# sourceMappingURL=styles.css.map */