:root{
  /* Colors */
  --color-background:  #f5f7fb;
  --color-gray-50: rgb(250, 250, 250);

  /* Fonts */
  --font-size-vsm: 12px;
  --font-size-xlg: 24px;
}

body{
background-color: var(--color-background);
}

/* setion 1 */
.section-wrapper {
display: flex;
gap: 20px;
align-items: flex-start;
padding: 20px;
}

.categories-container {
min-width: 280px;
display: flex;
flex-direction: column;
align-self: stretch;
background-color: var(--color-white);
border-radius: 12px;
border: 1px solid var(--color-gray-100);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.categories-header {
padding-bottom: 8px; 
}

.category-title {
font-size: 22px;
font-weight: bold;
margin: 0;
color: var(--color-primary-text);
font-family: 'Montserrat', sans-serif;
}

.categories-grid {
height: 100%;
padding: 20px; 
}

.category-item {
display: flex;
align-items: center;
gap: 20px; 
padding: 15px; 
margin-bottom: 15px; 
border-radius: 8px;
font-size: var(--font-size-base);
color: var(--color-secondary-text);
cursor: pointer;
transition: all 0.3s ease;
font-weight: 600;
border-bottom: 1px solid var(--color-gray-200);
}

.category-item:last-child {
margin-bottom: 0;
}

.category-item:hover {
background-color: var(--color-gray-200);
transform: translateX(5px);
}

.icon {
font-size: 36px; 
color: var(--color-primary);
display: inline-block;
width: 36px; 
height: 36px; 
text-align: center;
line-height: 36px; 
}

.banner-box {
flex-grow: 1;
position: relative;
overflow: hidden;
border-radius: 12px;
}

.slider {
position: relative;
width: 100%;
height: 100%;
}

.slide {
display: none;
width: 100%;
height: auto; 
object-fit: cover; 
border-radius: 12px;
}

.slide.active {
display: block;
}

.dots {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
}

.dot {
height: 10px;
width: 10px;
background-color: var(--color-gray-300);
border-radius: 50%;
display: inline-block;
cursor: pointer;
}

.dot.active {
background-color: var(--color-primary);
}
/* section 2 */
.features {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  margin: 30px auto;
  max-width: 1200px;
  scale: 1.05;
}

.feature {
  display: flex;
  align-items: center;
  padding: 0 20px;
  position: relative;
  width: 25%;
}

.feature:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 70%;
  width: 1.5px;
  background-color: var(--color-gray-300);
}

.feature-icon {
  margin-right: 15px;
  flex-shrink: 0;
}

.feature-icon img {
  width: 45px;
  height:45px;
  opacity: 0.8;
}

.feature-text {
  text-align: left;
}

.feature-text strong {
  display: inline; 
  font-size: var(--font-size-base);
  color: var(--color-primary-text);
  white-space: nowrap; 
}

.feature-text span {
  display: block; 
  font-size: var(--font-size-sm);
  color: var(--color-secondary-text);
  margin-top: 3px;
}

/* section 3 */
.featured-brands {
  padding: 30px 0;
  overflow: hidden;
}

.featured-brands-title {
  font-family: var(--font-family);
  font-size: var(--font-size-lg);
  color: var(--color-primary-text);
  text-align: left;
  margin-left: 15px;
  margin-bottom: 20px;
}

.brand-slider {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.brands-track {
  display: flex;
  gap: 40px;
  animation: scrollBrands 30s linear infinite;
  width: fit-content;
}

.brands-track img {
  height: 150px;
  background-color: var(--color-white);
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--color-gray-300);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.brands-track img:hover {
  transform: scale(1.05);
}

@keyframes scrollBrands {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
/* section 4*/
.categories-section {
  padding: 80px 20px;
  background-color: var(--color-white);
  display: flex;
  justify-content: center;
  gap: 30px;
  height: auto;
}

.category-card {
  background-color: var(--color-gray-100);
  border-radius: 16px;
  width: 300px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.3s ease;
  scale: 1.04;
}

.category-card:hover {
  transform: translateY(-4px);
}

.category-card h3 {
  font-size: var(--font-size-lg);
  color: var(--color-primary-text);
  margin: 0;
  padding: 16px 16px 0 16px;
}

.category-header {
  padding: 16px;
  height: 150px;
}

.category-header img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
}

.category-items {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px;
  justify-content: center;
}

.category-items .item {
  width: 80px;
  text-align: center;
  flex: 1 1 40%;
  cursor: pointer;
}

.category-items .item img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: var(--color-white);
  padding: 10px;
  object-fit: contain;
  border: 2px solid transparent;
  transition: all 0.3s;
}

.category-items .item p {
  margin-top: 8px;
  font-size: var(--font-size-sm);
  color: var(--color-secondary-text);
}

.category-items .item:hover img {
  border-color: var(--color-primary);
}

.category-items .item:hover p {
  color: var(--color-primary);
}


/* section5*/
.container {
margin: 0 auto;
padding: 20px 60px;
background-color:var(--color-gray-50);
}

.hot-sales-section {
margin: 40px 0;
}
.section-title {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
color: var(--color-secondary-text);
font-family: var(--font-family);
display: flex;
align-items: center;
}

.fire-icon {
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 10px;
font-size: 28px;
background: linear-gradient(45deg, #ff4500, #ff9900, #ffd700);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: glow 1.5s ease-in-out infinite;
filter: drop-shadow(0 0 4px rgba(255, 100, 0, 0.5));
}

@keyframes glow {
0% {
  filter: drop-shadow(0 0 4px rgba(255, 100, 0, 0.4));
}
50% {
  filter: drop-shadow(0 0 10px rgba(255, 150, 0, 0.8));
}
100% {
  filter: drop-shadow(0 0 4px rgba(255, 100, 0, 0.4));
}
}
.products-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}

.product-card {
flex: 1 0 200px;
max-width: 250px;
background-color:var(--color-white);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
padding: 15px; 
position: relative;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.product-badge {
position: absolute;
top: 10px;
left: 10px;
padding: 4px 8px;
border-radius: 4px;
font-size: var(--font-size-sm);
font-weight: 500;
z-index: 1;
}

.badge-sale {
background-color: var(--color-primary);
color: var(--color-white);
}

.badge-new {
background-color: #2196f3;
color: var(--color-white);
}

.badge-out {
background-color: #f44336;
color: var(--color-white);
}

.product-image {
height: 170px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
/* margin: -20px; */
margin-bottom: 5px; 
}

.product-image img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
border-radius: 8px 8px 0 0;

}

.edit-icon {
position: absolute;
top: 0px;
right: -10px;
background-color: var(--color-gray-100);
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 2;
transition: all 0.3s ease;
}
.edit-icon:hover {
background-color: var(--color-gray-200);
scale: 1.1;
}

.edit-icon svg {
width: 16px;
height: 16px;
fill: var(--color-primary-text);
}

.product-info {
margin-bottom: 5px; 
}

.product-category {
font-size: var(--font-size-sm);
color: var(--color-secondary-text);
margin-bottom: 30px;
margin-top: 10px;
transition: all 0.3s ease;
}

.product-category:hover {
font-size: var(--font-size-base);
color: var(--color-primary-text);
font-weight: 600;
}

.product-title {
font-size: var(--font-size-lg);
font-weight: 600;
margin-bottom: 3px;
margin-top: 10px;
color: var(--color-primary-text);
}

.product-price {
display: flex;
align-items: center;
margin-bottom: 3px; 
}

.current-price {
font-size: var(--font-size-xlg);
font-weight: bold;
color: #e53935;
margin-right: 3px;
}

.original-price {
font-size: var(--font-size-sm);
color: var(--color-secondary-text);
text-decoration: line-through;
}

.product-status {
font-size: var(--font-size-sm);
display: inline-block;
padding: 2px 6px;
border-radius: 4px;
margin: 4px 0; 
font-weight: 600;
}

.status-in-stock {
background-color: #e8f5e9;
color: #2e7d32;
}

.status-out-of-stock {
background-color: #ffebee;
color: #c62828;
}

.add-to-cart {
display: block;
width: 100%;
padding: 6px 14px; 
background-color: var(--color-primary);
color: var(--color-white);
border: none;
border-radius: 8px;
font-size: var(--font-size-base);
font-weight: 500;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 6px; 
}

.add-to-cart:hover {
background-color: var(--color-primary-hover);
}

.add-to-cart:disabled {
background-color: var(--color-gray-300);
cursor: not-allowed;
}


/*  CART STYLES */
.cart-sidebar {
position: fixed;
top: 0;
right: -400px;
width: 380px;
max-width: 90vw;
height: 100vh;
background-color: var(--color-white);
box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
z-index: 1001;
transition: right 0.3s ease;
display: flex;
flex-direction: column;
font-family: var(--font-family);
}

.cart-sidebar.open {
right: 0;
}

.cart-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease;
}

body.cart-open .cart-overlay {
visibility: visible;
opacity: 1;
}

.cart-header {
padding: 15px;
border-bottom: 1px solid var(--color-gray-100);
display: flex;
justify-content: space-between;
align-items: center;
}

.cart-header h2 {
margin: 0;
font-size: 1.2rem;
font-family: var(--font-family);
color: var(--color-primary-text);
}

.close-cart {
background: none;
border: none;
font-size: 1.2rem;
cursor: pointer;
color: var(--color-secondary-text);
}

.cart-items {
flex: 1;
overflow-y: auto;
padding: 15px;
}

.cart-item {
display: flex;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid var(--color-gray-200);
}

.cart-item-img {
width: 80px;
height: 80px;
object-fit: cover;
margin-right: 15px;
border-radius: 4px;
}

.cart-item-details {
flex: 1;
}

.cart-item-details h4 {
margin: 0 0 5px 0;
font-size: 1rem;
font-family: var(--font-family);
color: var(--color-primary-text);
}

.cart-item-price {
font-weight: bold;
margin-bottom: 10px;
color: var(--color-primary-text);
}

.cart-item-discount {
text-decoration: line-through;
color: var(--color-gray-300);
font-size: 0.9em;
margin-left: 5px;
font-weight: normal;
}

.cart-item-actions {
display: flex;
justify-content: space-between;
align-items: center;
}

.quantity-control {
display: flex;
align-items: center;
border: 1px solid var(--color-gray-200);
border-radius: 4px;
overflow: hidden;
}

.quantity-btn {
background: var(--color-gray-100);
border: none;
width: 28px;
height: 28px;
font-weight: bold;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}

.quantity-btn:hover {
background: var(--color-gray-200);
}

.quantity {
padding: 0 10px;
display: inline-block;
min-width: 30px;
text-align: center;
}

.remove-btn {
background: none;
border: none;
color: var(--color-primary);
cursor: pointer;
font-size: 1rem;
padding: 5px;
}

.remove-btn:hover {
color: var(--color-primary-hover);
}

.cart-footer {
padding: 15px;
border-top: 1px solid var(--color-gray-100);
}

.cart-total {
display: flex;
justify-content: space-between;
font-weight: bold;
margin-bottom: 15px;
font-size: 1.1rem;
color: var(--color-primary-text);
}

.checkout-btn {
width: 100%;
padding: 12px;
background-color: var(--color-primary);
color: var(--color-white);
border: none;
border-radius: 4px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s;
font-family: var(--font-family);
}

.checkout-btn:hover {
background-color: var(--color-primary-hover);
}

.empty-cart {
text-align: center;
padding: 30px 0;
color: var(--color-gray-300);
}

.empty-cart i {
font-size: 3rem;
margin-top: 10px;
color: var(--color-gray-200);
}

/* For RTL support */
html[dir="rtl"] .cart-sidebar {
right: auto;
left: -400px;
}

html[dir="rtl"] .cart-sidebar.open {
right: auto;
left: 0;
}

html[dir="rtl"] .cart-item-img {
margin-right: 0;
margin-left: 15px;
}

html[dir="rtl"] .cart-item-discount {
margin-left: 0;
margin-right: 5px;
}

@media (max-width: 960px) {
.categories-section {
  flex-wrap: wrap;
}
}

@media (max-width: 768px) {
.section-wrapper{
  flex-direction: column-reverse;
}
.features {
  scale: 0.9;
  flex-wrap: wrap;
}

.feature {
  width: 100%;
  margin-bottom: 15px;
  padding: 10px 0;
}

.feature:not(:last-child)::after {
  display: none;
}
}

@media (max-width: 480px) {
.cart-sidebar {
  width: 100%;
  max-width: 100%;
}

.cart-item-img {
  width: 60px;
  height: 60px;
}
}
/* ===================== /
/    Dark-Blue Theme    /
/ ===================== */

[data-theme="dark-blue"] .section-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  }

  [data-theme="dark-blue"] .banner-box {
  width: 100%;
  margin-bottom: 20px;
  order: -1; /*banner before categories*/
  }

  [data-theme="dark-blue"] .categories-container {
  box-shadow: var(--page-shadow);
  border-radius: 12px 12px 12px 12px; 
  order: 1; /* after banner*/
  }

[data-theme="dark-blue"] .categories-header {
  margin-bottom: 15px;
  padding: 20px 20px 0;
}
  /* 3 categories in same line */
  [data-theme="dark-blue"] .categories-grid {
  display: flex;
  justify-content: space-between;
  padding: 0 20px 20px;
  }

  [data-theme="dark-blue"] .category-item {
  flex: 1;
  margin: 0 10px;
  max-width: calc(33.33% - 20px); /* same area */
  }

  [data-theme="dark-blue"] .category-item:first-child {
  margin-left: 0;
  }

  [data-theme="dark-blue"] .category-item:last-child {
  margin-right: 0;
  }

  [data-theme="dark-blue"] .category-item:hover {
  background-color: rgba(25, 150, 252, 0.1);
  border-color: var(--color-primary);
  }

  [data-theme="dark-blue"] .icon {
  text-shadow: 0 0 10px rgba(25, 150, 252, 0.3);
  }

  /* banneeer */
  [data-theme="dark-blue"] .slide {
    width: 100%;
     }

  [data-theme="dark-blue"] .slide.active {
    display: block;
  }

  [data-theme="dark-blue"] .slide {
    content: none !important;
  }

  /* hot sale */
  [data-theme="dark-blue"] .add-to-cart,
  [data-theme="dark-blue"] .product-badge {
    color: var(--color-black);
  }
  
  /* cart */
  [data-theme="dark-blue"] .checkout-btn {
    color: var(--color-black);
  }

  /* responsive */
  @media (max-width: 768px) {
  [data-theme="dark-blue"] .categories-grid {
    flex-direction: column;
  }

  [data-theme="dark-blue"] .category-item {
    margin: 0 0 15px 0;
    max-width: 100%;
  }
}