:root, [data-theme="light"]{
    --module-padding: 40px;
    --link-underline-color: gray;
    --theme-pink:rgb(248, 215, 218);
   
    --primary-color: var(--theme-pink);
    --body-bg: var(--theme-pink);
    --body-color: #fff;
    --bg-secondary: var(--bs-white);
    --secondary-color: var(--bs-gray-900);
    --btn-bg: black;
    --btn-hover-bg: #fff;
    --btn-active-bg:var(--bs-gray-700);
    --btn-color: #fff;
    --btn-hover-color: #000;
    --btn-active-color: #fff;

    --header-bg: var(--bs-white);
    --header-color: var(--bs-black);

    --breadcrumb-color: var(--bs-white);
    --breadcrumb-hover: var(--primary-color);
    --content-padding: 100px;
    
    --page-bg: var(--bs-white);
    --page-color: var(--bs-gray-900);
    --page-hover-color: var(--bs-gray-500);

    --footer-color: #000;
    
    --bg-image: ;
    --bs-link-color-rgb: #000;

}

html[data-theme="dark"]{
    --link-underline-color: gray;

    --header-bg: var(--bs-white);
    --header-color: var(--bs-black);

    --breadcrumb-color: var(--bs-orange);
    --breadcrumb-hover: white;

    --primary-color: var(--bs-orange);
    --body-bg: transparent;
    --body-color: white;
    --bg-secondary:var(--bs-white);
    --secondary-color:var(--bs-gray-900);
    --btn-bg: var(--bs-orange);
    --btn-hover-bg: #fff;
    --btn-active-bg: #c88628;
    --btn-color: #fff;
    --btn-hover-color: var(--bs-orange);
    --btn-active-color: #fff;

    --page-bg: transparent;

    --bg-image: url('/image/main-bg.jpg');
}

@font-face {
  font-family: 'Figtree';
  src: url("../fonts/Figtree-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; 
}

body{
    color: var(--body-color);
    font-family: "Figtree", sans-serif;
    font-size: 16px;
    background: var(--body-bg) var(--bg-image);
    /* background: var(--body-bg); */
}

.list-group-item.active{
    background-color: var(--btn-active-bg);
    border-color: var(--btn-active-color);
}

.list-group-item.active:hover{
    background-color: var(--btn-bg);
    border-color: var(--btn-color);
}

/* override */
.btn-primary{
    --bs-btn-bg: var(--btn-bg);
    --bs-btn-border-color: var(--btn-bg);
    --bs-btn-hover-bg: var(--btn-hover-bg);
    --bs-btn-hover-border-color: var(--btn-hover-bg);
    --bs-btn-active-bg: var(--btn-active-bg);
    --bs-btn-active-border-color: var(--btn-active-bg);
    --bs-btn-active-color: var(--btn-active-color);
    --bs-btn-hover-color: var(--btn-hover-color);
}
.btn-primary:hover {
    color: var(--btn-hover-color);
    background-color: var(--btn-hover-bg);
    border-color: var(--btn-hover-color);
}

#alert {
  z-index: 9999;
  position: fixed;
  top: 30%;
  left: 50%;
  width: 400px;
  margin-left: -200px;
}
@media (min-width: 992px) {
  #alert {
    width: 600px;
    margin-left: -300px;
  }
}
@media (min-width: 1140px) {
  #alert {
    width: 600px;
    margin-left: -300px;
  }
}
@media (min-width: 1320px) {
  #alert {
    width: 600px;
    margin-left: -300px;
  }
}
#alert .alert {
  margin-bottom: 15px;
}
#alert .alert-primary {
  box-shadow: 0 0 0 5px rgb(var(--bs-primary-rgb), 0.1);
}
#alert .alert-secondary {
  box-shadow: 0 0 0 5px rgb(var(--bs-secondary-rgb), 0.1);
}
#alert .alert-success {
  box-shadow: 0 0 0 5px rgb(var(--bs-success-rgb), 0.1);
}
#alert .alert-warning {
  box-shadow: 0 0 0 5px rgb(var(--bs-warning-rgb), 0.1);
}
#alert .alert-danger {
  box-shadow: 0 0 0 5px rgb(var(--bs-danger-rgb), 0.1);
}
#alert .alert-info {
  box-shadow: 0 0 0 5px rgb(var(--bs-info-rgb), 0.1);
}
#alert .alert-light {
  box-shadow: 0 0 0 5px rgb(var(--bs-light-rgb), 0.1);
}
#alert .alert-dark {
  box-shadow: 0 0 0 5px rgb(var(--bs-dark-rgb), 0.1);
}

/* top */
#top {
    /* background-color: var(--bs-tertiary-bg); */
    border-bottom: 1px solid var(--bs-border-color);
    position: relative;
}

#top ul {
    margin-bottom: 0;
}

#top > a, #top .dropdown > a {
    font-size: 1.1em;
    color: var(--bs-white);
    line-height: 40px;
    vertical-align: middle;
    /* padding: 10px 0px 10px 0px; */
}

#top .dropdown-menu{
    z-index: 1023;
}

header{
    /* --bs-navbar-color: var(--header-color); */
    background-color: var(--header-bg);
    /* border-bottom: 1px solid #ddd; */
}

#logo img {
    max-width: 200px;
}

.nav-link{
    color: var(--header-color);
}

.hero-banner {
    background: #f8f9fa;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.product-grid img {
    max-width: 100%;
    height: auto;
}

/* Styles for the hidden subcategory content templates */
.subcategory-template {
    display: none; /* Always keep these hidden, they are just for content */
}

/* Styles for the single, visible full-width dropdown container */
#fullWidthDropdownContainer {
    display: none; /* Hidden by default, shown by JS */
    position: absolute; /* Positions the element relative to its first positioned ancestor (e.g., body) */
    left: 0; /* Aligns to the left edge of the viewport */
    width: 100vw; /* Spans the full viewport width */
    background-color: white;
    border-top: 1px solid #ddd;
    z-index: 1000; /* Ensures it appears on top */
    padding: 20px;
    /* box-shadow: 0 4px 6px rgba(0,0,0,0.1); */
}

#fullWidthDropdownContainer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-around;
}

#brand-list{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap:20px;
}

@keyframes moveRight {
    0% { transform: translateX(0); opacity: 1; }
    80% { transform: translateX(17px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
    
}

@keyframes moveLeft {
    0% { transform: translateX(0); opacity: 1; }
    80% { transform: translateX(-17px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
    
}

#btn-next,#btn-previous{
    transition: all 0.15s ease-out;
}

#btn-next i{
    transition: all 0.15s ease-out;

}

#btn-next:hover i{
    animation: moveRight 0.5s ease;
}

#btn-previous:hover i{
    animation: moveLeft 0.5s ease;
}

.module{
    background-color: white;
    padding: var(--module-padding);
    color: var(--page-color);
}

footer{
    color: var(--footer-color);

}

#footer-top{
    padding: var(--module-padding);
}

#footer-middle{
    color: var(--secondary-color);
    padding: var(--module-padding);
}

#cart-items{
    max-height: 45vh;
    overflow-y: scroll;
}

#cart-item input{
    text-align: center;
}

.button-group {
    display: flex;
    /* border-top: 1px solid #ddd; */
    background-color: #eee;
}

.button-group button {
    flex: 33%;
    border-radius: 0;
    display: inline-block;
    border: none;
    background-color: #eee;
    /* color: #888; */
    line-height: 38px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
}

.button-group button:hover {
    color: var(--bs-gray-600);
    /* background-color: #ddd; */
    text-decoration: none;
    cursor: pointer;
}

.link-hover {
    /* This is crucial for positioning the pseudo-element */
    position: relative;
    white-space: nowrap;
    
    /* Standard link styling */
    text-decoration: none;
    /* color: #333; */
    padding-bottom: 1px; /* Adds a small space for the underline */
}

/* This is the pseudo-element that will become the underline */
.link-hover::after {
  
    content: '';
    position: absolute;
    
    /* Position it at the bottom-left */
    bottom: 0;
    left: 0;
    
    /* Set the width to 0% initially */
    width: 0%;
    height: 1px; /* This is the underline thickness */
    background-color: var(--link-underline-color); /* Underline color */
    
    /* Add the transition for a smooth animation */
    transition: width 0.3s ease-in-out;
  
}

/* On hover, change the width to 100% */
.link-hover:hover::after {
    width: 100%;
}

.menu-item{
    font-weight: 550;
}

/* pages */
.page-container{
    background-color: var(--page-bg);
    border-top: 1px solid #ddd;
    padding-bottom: 1rem;
    --bs-breadcrumb-divider: '>';
    color: var(--page-color);
}

.page-container a{
    color: var(--page-color);
}

.page-container .btn-primary{
    color: var(--btn-color);
}

.page-container .btn-danger{
    color: var(--btn-color);
}

.page-container .btn-primary:hover{
    color: var(--btn-hover-color);
    background-color: var(--btn-hover-bg);
}

.page-container .breadcrumb{
    padding-top: 1rem;
    --bs-breadcrumb-divider-color: var(--breadcrumb-color);
}

.page-container .breadcrumb a{
    color: var(--breadcrumb-color);
}

.page-container .breadcrumb a:hover{
    color: var(--breadcrumb-hover);
}

/* category page */
#product-category .breadcrumb{
    --bs-breadcrumb-divider-color: var(--breadcrumb-color);
}

#product-category .breadcrumb-container,#product-category .breadcrumb-item a{
    color: var(--breadcrumb-color);
}

#product-category .breadcrumb-item a:hover{
    color: var(--breadcrumb-hover);
}

.category-banner{
    padding-top: 15px;
    min-height: 270px;
    background-color: var(--bs-black);
}

.product-thumb :first-child{
    display: block;
    /* opacity: 1; */
}

.product-thumb :last-child{
    display: none;
}

.product-thumb:hover :first-child{
    display: none;
}

.product-thumb:hover :last-child{
    display:block;
} 

@media screen {
    #page-content{
        padding: 20px var(--content-padding);
    }
}

#banner{
  background-color: white;
}

.carousel{
  background-color: white;
  border: none;
  margin-bottom: 0;
}

.carousel-indicators{
  bottom: 0;
}

#blog-module a{
    color: var(--page-color);
}

/* Custom radio and checkbox for product page */
.option-group{
    position: relative;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: -4px;
}

.option-item{
    --option-actived-color: rgb(248, 0, 0);
    --option-hover-color: rgba(248, 0, 0, .6);
}

.option-item input:checked + .option-label{
    color: var(--option-actived-color);
    border: 1px solid var(--option-actived-color);
}

.option-item label{
    display: block;
}

.option-label{
    border: 1px solid var(--btn-bg);
    padding: 0.4rem 1rem;
    border-radius: 5px;
    box-shadow: inset 0 0 0 2px RGBA(var(--btn-bg) .25);;
}

.option-label:hover{
    color: var(--option-hover-color);
    border: 1px solid var(--option-hover-color);
}