/* ====================================
   Coffee Roastery Custom CSS for Salla
   Colors: Beige (#E8D5C4) & Black (#1A1A1A)
   ==================================== */

/* Root Variables */
:root {
  --primary-beige: #E8D5C4;
  --dark-beige: #D4B5A0;
  --light-beige: #F5EDE5;
  --primary-black: #1A1A1A;
  --soft-black: #2D2D2D;
  --accent-brown: #8B6F47;
}

/* Global Styles */
body {
  font-family: 'Tajawal', 'Cairo', -apple-system, sans-serif;
  background-color: var(--light-beige);
  color: var(--primary-black);
}

/* Header Styling */
.header,
header {
  background-color: var(--primary-black) !important;
  border-bottom: 3px solid var(--primary-beige);
}

.header__logo img {
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}

.header__logo:hover img {
  filter: brightness(0) invert(0.9) sepia(0.3) saturate(1.5) hue-rotate(10deg);
}

/* Navigation */
.nav-link,
.header__menu a {
  color: var(--primary-beige) !important;
  font-weight: 500;
  transition: color 0.3s ease;
}

.nav-link:hover,
.header__menu a:hover {
  color: #fff !important;
}

/* Hero Section */
.hero,
.slider,
.banner {
  background: linear-gradient(135deg, var(--primary-black) 0%, var(--soft-black) 100%);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="2" fill="%23E8D5C4" opacity="0.1"/></svg>');
  opacity: 0.3;
}

/* Buttons */
.btn-primary,
.button--primary,
.add-to-cart,
.salla-button {
  background-color: var(--primary-beige) !important;
  color: var(--primary-black) !important;
  border: 2px solid var(--primary-beige) !important;
  font-weight: 600;
  border-radius: 0;
  padding: 12px 30px;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btn-primary:hover,
.button--primary:hover,
.add-to-cart:hover,
.salla-button:hover {
  background-color: transparent !important;
  color: var(--primary-beige) !important;
  border-color: var(--primary-beige) !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(232, 213, 196, 0.3);
}

.btn-secondary,
.button--secondary {
  background-color: var(--primary-black) !important;
  color: var(--primary-beige) !important;
  border: 2px solid var(--primary-black) !important;
}

.btn-secondary:hover,
.button--secondary:hover {
  background-color: var(--soft-black) !important;
}

/* Product Cards */
.product-card,
.product-item,
.s-product-card {
  background: #fff;
  border: 1px solid #E0E0E0;
  border-radius: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}

.product-card:hover,
.product-item:hover,
.s-product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(26, 26, 26, 0.15);
  border-color: var(--primary-beige);
}

.product-card__image,
.product-item__image,
.s-product-card__image {
  position: relative;
  overflow: hidden;
}

.product-card__image::after,
.product-item__image::after,
.s-product-card__image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(26, 26, 26, 0.3) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.product-card:hover .product-card__image::after,
.product-item:hover .product-item__image::after,
.s-product-card:hover .s-product-card__image::after {
  opacity: 1;
}

.product-card__title,
.product-item__title,
.s-product-card__title {
  color: var(--primary-black);
  font-weight: 600;
  margin: 15px 0 8px;
}

.product-card__price,
.product-item__price,
.s-product-card__price {
  color: var(--accent-brown);
  font-size: 1.2rem;
  font-weight: 700;
}

/* Category Badges */
.badge,
.product-badge,
.tag {
  background-color: var(--primary-black) !important;
  color: var(--primary-beige) !important;
  border-radius: 0;
  padding: 5px 12px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
}

/* Section Headers */
.section-title,
h1, h2, h3 {
  color: var(--primary-black);
  font-weight: 700;
  position: relative;
  padding-bottom: 15px;
  margin-bottom: 30px;
}

.section-title::after,
h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-beige) 0%, var(--accent-brown) 100%);
}

/* Footer */
.footer,
footer {
  background-color: var(--primary-black) !important;
  color: var(--primary-beige) !important;
  padding: 60px 0 30px;
  border-top: 3px solid var(--primary-beige);
}

.footer h3,
.footer h4,
footer h3,
footer h4 {
  color: var(--primary-beige) !important;
  font-weight: 600;
  margin-bottom: 20px;
}

.footer a,
footer a {
  color: var(--dark-beige) !important;
  transition: color 0.3s ease;
}

.footer a:hover,
footer a:hover {
  color: #fff !important;
}

/* Cart Badge */
.cart-badge,
.header__cart-badge {
  background-color: var(--primary-beige) !important;
  color: var(--primary-black) !important;
  font-weight: 700;
}

/* Input Fields */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select,
.form-control {
  border: 2px solid #E0E0E0;
  border-radius: 0;
  padding: 12px 15px;
  transition: border-color 0.3s ease;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: var(--primary-beige) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(232, 213, 196, 0.2);
}

/* Price Filters & Ratings */
.price-filter,
.rating {
  color: var(--accent-brown);
}

/* Sale/Discount Labels */
.sale-badge,
.discount-label {
  background-color: var(--accent-brown) !important;
  color: #fff !important;
}

/* Product Grid */
.products-grid,
.product-list {
  gap: 30px;
}

/* Testimonials */
.testimonial,
.review-card {
  background: #fff;
  border-left: 4px solid var(--primary-beige);
  padding: 25px;
  margin: 20px 0;
}

/* Coffee Bean Pattern Background for Sections */
.section--featured,
.featured-products,
.best-sellers {
  background: linear-gradient(to bottom, var(--light-beige) 0%, #fff 100%);
  padding: 60px 0;
}

/* Hover Effects for Images */
img {
  transition: transform 0.3s ease;
}

.product-card:hover img,
.product-item:hover img {
  transform: scale(1.05);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--light-beige);
}

::-webkit-scrollbar-thumb {
  background: var(--primary-beige);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--dark-beige);
}

/* Loading Spinner */
.loader,
.spinner {
  border-top-color: var(--primary-beige) !important;
}

/* Mobile Menu */
@media (max-width: 768px) {
  .mobile-menu {
    background-color: var(--primary-black) !important;
  }
  
  .mobile-menu__link {
    color: var(--primary-beige) !important;
    border-bottom: 1px solid var(--soft-black);
  }
}

/* Categories Menu (Hamburger Menu) - All Possible Selectors */
.categories-menu,
.mobile-categories,
.side-menu,
.drawer-menu,
.categories-drawer,
#mobile-menu,
.s-mobile-menu,
.mobile-menu-content,
.menu-drawer,
nav[class*="mobile"],
aside[class*="menu"],
.offcanvas,
.sidebar-menu {
  background-color: var(--light-beige) !important;
}

/* All Category Links and Menu Items */
.categories-menu__item,
.category-link,
.side-menu__link,
.drawer-menu__link,
.mobile-menu__item,
.s-mobile-menu__item,
.menu-item,
.nav-item,
#mobile-menu a,
.s-mobile-menu a,
nav[class*="mobile"] a,
aside[class*="menu"] a,
.offcanvas a,
.sidebar-menu a,
.mobile-menu-content a {
  color: var(--primary-black) !important;
  background-color: transparent !important;
  border-bottom: 1px solid var(--dark-beige) !important;
  padding: 15px 20px !important;
  transition: all 0.3s ease;
  display: block !important;
}

/* Hover States */
.categories-menu__item:hover,
.category-link:hover,
.side-menu__link:hover,
.drawer-menu__link:hover,
.mobile-menu__item:hover,
.s-mobile-menu__item:hover,
.menu-item:hover,
#mobile-menu a:hover,
.s-mobile-menu a:hover,
nav[class*="mobile"] a:hover,
aside[class*="menu"] a:hover,
.offcanvas a:hover,
.sidebar-menu a:hover,
.mobile-menu-content a:hover {
  background-color: var(--primary-beige) !important;
  color: var(--primary-black) !important;
  padding-left: 25px !important;
}

/* Categories Menu Header */
.categories-menu__header,
.side-menu__header,
.drawer-menu__header,
.mobile-menu__header,
.s-mobile-menu__header,
.offcanvas-header {
  background-color: var(--primary-black) !important;
  color: var(--primary-beige) !important;
  padding: 20px !important;
  font-weight: 600;
}

/* Close Button for Categories Menu */
.categories-menu__close,
.side-menu__close,
.drawer-menu__close,
.mobile-menu__close,
.s-mobile-menu__close,
.btn-close,
.close-menu,
button[class*="close"] {
  color: var(--primary-beige) !important;
  filter: brightness(0) invert(0.9) sepia(0.3) saturate(1.5) hue-rotate(10deg);
}

/* Menu Overlay */
.menu-overlay,
.drawer-overlay,
.modal-backdrop {
  background-color: rgba(26, 26, 26, 0.8) !important;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.product-card,
.product-item {
  animation: fadeInUp 0.6s ease forwards;
}