/*
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

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 Account page
 */
/*--------------------------------------------------------------
/** 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;
  }
}
/* 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;
}

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

.text-primary {
  color: #FF8C00;
}

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;
}

.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;
}

body {
  letter-spacing: 0.03em;
}

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

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

.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;
}

/*----------------------------------------------*/
/* 6. SITE STRUCTURE */
/*----------------------------------------------*/
/* 6.1 Header
--------------------------------------------------------------*/
/* 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 .brand-item {
  background: #fff;
  border: 1px solid #fbfbfb;
  box-shadow: 0px 5px 22px rgba(0, 0, 0, 0.04);
  border-radius: 16px;
  padding: 16px;
}
.brand-carousel .brand-item img {
  width: 100%;
  border-radius: 12px;
}
.brand-carousel .brand-item .brand-details {
  margin-left: 15px;
}
.brand-carousel .brand-item .brand-details .brand-title {
  margin: 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 {
  gap: 25px;
} */
.product-item {
  position: relative;
  padding: 16px;
  background: #FFFFFF;
  border: 1px solid #FBFBFB;
  box-shadow: 0px 5px 22px rgba(0, 0, 0, 0.04);
  border-radius: 16px;
  margin-bottom: 30px;
  transition: box-shadow 0.3s ease-out;
}

.product-item:hover {
  box-shadow: 0px 21px 44px rgba(0, 0, 0, 0.08);
}

.product-item h3 {
  display: block;
  width: 100%;
  font-weight: 600;
  font-size: 18px;
  line-height: 25px;
  text-transform: capitalize;
  color: #333333;
  margin: 0;
}

.product-item figure {
  background: #F9F9F9;
  border-radius: 12px;
  text-align: center;
}

.product-item figure img {
  max-height: 210px;
  height: auto;
}

.product-item .btn-wishlist {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #d8d8d8;
  transition: all 0.3s ease-out;
}

.product-item .btn-wishlist:hover {
  background: rgb(240, 56, 56);
  color: #fff;
}

.product-item .qty {
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #9D9D9D;
}

.product-item .rating {
  font-weight: 600;
  font-size: 13px;
  line-height: 18px;
  text-transform: capitalize;
  color: #222222;
}

.product-item .rating iconify-icon {
  color: #2CCC5C;
}

.product-item .price {
  display: block;
  width: 100%;
  font-weight: 600;
  font-size: 22px;
  line-height: 30px;
  text-transform: capitalize;
  color: #222222;
}

.product-item .product-qty {
  width: 85px;
}

.product-item .btn-link {
  text-decoration: none;
}

.product-item #quantity {
  height: auto;
  width: 28px;
  text-align: center;
  border: none;
  margin: 0;
  padding: 0;
}

.product-item .btn-number {
  width: 26px;
  height: 26px;
  line-height: 1;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid #E2E2E2;
  border-radius: 6px;
  color: #222;
  padding: 0;
}

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

/* floating image */
.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.3 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 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;
}

/* -------------------------------------------
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;
}

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