@import "theme-default.css";
@import "theme-black.css";
@import "theme-charcoal.css";
@import "theme-black-glass.css";
@import "theme-dark.css";
@import "theme-dark-grey-premium.css";
@import "theme-dark-gradient.css";
@import "theme-red.css";
@import "theme-blue.css";


html{
  min-height: 100vh; 
    margin: 0;
}
body { 
min-height: 100vh; 
margin: 0;
background: var(--bg-body); 
font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif; 
padding-bottom: env(safe-area-inset-bottom);
}
.search-item.active {
    background: var(--bs-primary);
}

.search-item.active .search-select {
    color: #fff;
}
input[type="radio"],
input[type="checkbox"] {
    accent-color: #198754; /* Bootstrap success */
}
#products {
    scroll-margin-top: 125px; /* adjust to your header height */
}
#page-loader {
    display: flex; /* show by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: white; */
    background: transparent;
    z-index: 9999;

    justify-content: center;
    align-items: center;

    /* Add these */
    flex-direction: column;
    gap: 15px;
}
#loader-div{
  background: var(--bg-body);
    padding:25px 35px;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    text-align:center;
    min-width:220px;
}
#loader-message {
    font-size: 16px;
    font-weight: 500;
    color: var(--main-color);
    /*background: var(--bg-body);
    padding: 8px 16px;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);*/
}
.btn-success.dropdown-toggle-split {
    border-left: 1px solid rgba(255,255,255,.35);
}
.btn.btn-outline-success{
    border: 1px solid var(--main-color);
}
.btn.btn-outline-primary{
  border: 1px solid var(--main-color);
}

main.container {
  /*padding-top: 125px;*/ /* slightly more than header height */
}
@media (max-width: 991px) {
main.container {
  /*padding-top: 168px;*/ /* header + mobile navbar height */
}
}

.header-top {  
  background: var(--bg-header-top) !important;
top: 0;
left: 0;
width: 100%;
background: #fff; /* ensure background is opaque */
border-bottom: 1px solid var(--header-border-bottom);
}
.sticky-header{
  position:sticky;
  top: 0;
  z-index: 1030; /* higher than content so it stays on top */
}
.sidebar{ 
background: var(--bg-sidebar); 
padding:1rem; 
border-radius:8px; 
box-shadow:0 0 10px rgba(0,0,0,0.05); 
top:110px; 
min-height: 42em;
}



h1 {
font-size: 2rem;   /* smaller than default */
font-weight: 600;  /* slightly lighter */
color: var(--h1-color);
}
h2 {
font-size: 1.5rem;
font-weight: 500;
margin-top: 0.5rem;
margin-bottom: 1rem;
color: var(--h2-color);
}
.h3-custom{
    color: var(--h1-color);
}
h6{
    color: var(--h6-color);
}
p{
    color: var(--p-color);
}
ul li{
        color: var(--p-color);
}
.nav-link{
    color: var(--nav-link-color);
}
.offcanvas.offcanvas-start {
    width: 60% !important;
    max-width: none !important;
}

@media (max-width: 991.98px) {

    .navbar {
        position: relative;
    }

    #mainNav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1050;
        background: var(--bg-navbar);
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
        border-radius: 0 0 .5rem .5rem;
    }
    .offcanvas{
      background: var(--bg-header-top);
    }
    #mainNav .navbar-nav {
        width: 100%;
    }

    #mainNav:not(.show) {
        display: none;
    }

    #mainNav.show {
        display: block;
    }

}


footer{
background-color: var(--bg-footer) !important;
}
.row-bg{
    background-color: var(--bg-row);
}
.main-color{
    color: var(--main-color) !important;
}
.navbar{
    /*background-color: var(--bg-navbar) !important;*/
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:active,
.navbar-nav .nav-link.show
{
color: var(--nav-link-hover-color);
background-color: var(--bg-navbar-nav-link-hover);
border-radius: 0px;
}

.row-selected td {
    background-color: #d1ecf1 !important;
}

#heroCarousel .carousel-item {
height: 350px; /* smaller height, adjust as needed */
}
#heroCarousel .carousel-item img {
object-fit: cover; /* crops images nicely */
width: 100%;
height: 100%;
}

.brand-img{ max-height:45px; }

.navbar-nav .dropdown-menu { min-width: 720px; padding: 1rem; }
.category-link:hover, .filter-select:hover{ background:#f1f5f9; border-radius:6px; transition:0.2s; cursor:pointer; }
.product-card { background:#fff; border:1px solid #e9ecef; padding:12px; border-radius:8px; display:flex; flex-direction:column; }
.product-card img { width:100%; height:160px; object-fit:cover; border-radius:6px; }
.modal-img-wrap{ width:100%; height:360px; overflow:hidden; border-radius:8px; background:#f5f5f5; display:flex; align-items:center; justify-content:center; position:relative; }
.modal-img-wrap img { max-width:100%; max-height:100%; }
.thumbs { display:flex; gap:8px; margin-top:10px; }
.thumbs img { width:64px; height:64px; object-fit:cover; border-radius:6px; cursor:pointer; border:1px solid #ddd; }
.thumbs img.active { outline:2px solid #0d6efd; }
.zoom-container {
position: relative;
}
#zoomResult {
position: absolute;
border: 1px solid #ddd;
width: 250px;
height: 250px;
overflow: hidden;
display: none;
top: 0;
right: -260px;
border-radius: 8px;
z-index: 10;
}
#zoomResult img {
position: absolute;
}
.zoom-hint { position:absolute; right:10px; bottom:10px; background:rgba(0,0,0,0.45); color:#fff; padding:6px 8px; border-radius:6px; font-size:0.85rem; }
footer{ background:#fff; border-top:1px solid #e6e6e6; padding:20px; text-align:center; margin-top:30px; }
@media(max-width:991px){ 
.sidebar{ position:static; top:auto; margin-bottom:1rem; } 
.navbar-nav .dropdown-menu{ min-width:100%; } 
.modal-img-wrap{ height:260px; } 
#zoomResult { display:none !important; } /* hide zoom on small screens */
}
/* Make navbar-toggler visible outside navbar */
/* Make toggler visible outside navbar */
/* Force hamburger icon visibility */
.navbar-toggler-icon {
background-image: var(--bs-navbar-toggler-icon-bg);
}
/* The button border */
.navbar-toggler {
border: 1px solid black;   /* makes the button border visible */
border-radius: 0.25rem; /* same as Bootstrap default */
padding: 0.25rem 0.75rem; 
}
@media (max-width: 991px) {
.navbar-toggler {
padding: 0.5rem 1rem;  /* slightly bigger tappable area */
border-radius: 0.25rem; 
}
}
.cart-table img { width:80px; height:80px; object-fit:cover; border-radius:6px; }
.cart-summary { background:#fff; padding:1rem; border-radius:8px; box-shadow:0 0 10px rgba(0,0,0,0.05); }
.checkout-summary { background:#fff; padding:1rem; border-radius:8px; box-shadow:0 0 10px rgba(0,0,0,0.05); }
.checkout-summary h4 { font-weight:600; margin-bottom:1rem; }
.btn-place-order { width:100%; font-size:1.1rem; padding:0.75rem; }



/*For Header*/
#searchResults {
   position: absolute;
   background: #fff;
   width: 100%;
   max-height: 350px;
   overflow-y: auto;
   border: 1px solid #ddd;
   border-radius: 4px;
   display: none;
   z-index: 1000;
   }
   .search-item {
   padding: 8px 12px;
   border-bottom: 1px solid #eee;
   }
   .search-item a {
   text-decoration: none;
   color: #333;
   display: block;
   }
   .search-item:hover {
   background: #f8f9fa;
   }
   .search-heading {
   background: #f1f1f1;
   padding: 6px 12px;
   font-weight: bold;
   font-size: 13px;
   }
   /* Make Shop by Brands dropdown scrollable on mobile */
   @media (max-width: 767px) {
   .nav-item.dropdown .dropdown-menu {
   max-height: 60vh; /* 60% of viewport height */
   overflow-y: auto;
   }
   }
   /* Wishlist Heart Icon */
   .icon-with-badge {
   position: relative;
   display: inline-block;
   width: 25px;      /* match heart image size */
   height: 25px;     /* match heart image size */
   cursor: pointer;
   }
   .icon-with-badge img {
   width: 100%;
   height: 100%;
   display: block;
   }
   .icon-with-badge .badge {
   position: absolute;
   top: -5px;        /* slightly above heart */
   right: -5px;      /* slightly to the right */
   background: red;
   color: white;
   border-radius: 50%;
   padding: 2px 5px;
   font-size: 10px;   /* smaller font for small heart */
   font-weight: bold;
   line-height: 1;
   min-width: 16px;   /* ensures circle shape */
   text-align: center;
   }
   /* Show dropdown on hover (desktop only) */
@media (min-width: 992px) {
  .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
  }

  .nav-item.dropdown > .dropdown-toggle::after {
    margin-left: 6px;
  }
}
/*End For Header*/

/*For loader*/
.loader-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  /*transition: opacity 0.3s ease;*/
}

.spinner {
  /*border: 12px solid #f3f3f3;*/ /* light grey */
  border: 6px solid #f3f3f3;
  border-top: 6px solid #007bff; /* blue */
  border-radius: 50%;
  width: 56px;  /* bigger width */
  height: 56px; /* bigger height */
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}
/*End For loader*/


/*For select 2*/
/* Make Select2 match Bootstrap form-control */
.select2-container .select2-selection--single {
    height: 38px;              /* same as Bootstrap input */
    padding: 6px 12px;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px;
}

.select2-container--default .select2-selection--single:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}
.select2-container.select2-valid .select2-selection--single {
    border-color: #198754 !important;
    box-shadow: 0 0 0 .15rem rgba(25,135,84,.25);
}
.select2-container.select2-invalid .select2-selection--single {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 .15rem rgba(220,53,69,.25);
}
.select2-valid .select2-selection--single::after {
    content: "✓";
    color: #198754;
    font-weight: bold;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
}

.select2-invalid .select2-selection--single::after {
    content: "!";
    color: #dc3545;
    font-weight: bold;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
}
/*End For select 2*/