/* ============================================
   Kuzey Market – Türkischer Bakkal
   Custom Styles (Tailwind + Shop Ergänzungen)
   ============================================ */

:root {
  --accent: #B45309; /* amber-700 – warm terracotta / oriental accent */
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Navbar active link – warm amber / oriental accent */
.nav-link {
  position: relative;
  transition: color 0.2s ease;
}

.nav-link:after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #B45309;
  transition: width 0.2s ease;
}

.nav-link:hover:after,
.nav-link.active:after {
  width: 100%;
}

/* Product cards */
.product-card {
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.product-card:hover {
  transform: translateY(-2px);
  border-color: #B4530930;
}

/* Subtle oriental warmth for buttons and accents */
.btn-warm {
  transition: all 0.2s ease;
}

/* Filter buttons */
.filter-btn {
  transition: all 0.15s ease;
}

.filter-btn.active {
  background-color: #B45309;
  color: white;
  border-color: #D97706;
  box-shadow: 0 1px 2px rgb(180 83 9 / 0.3);
}

/* Offer cards accent */
.offer-badge {
  background-color: #dc2626;
}

/* Shopping list / cart floating button */
#floating-cart-btn {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
}

/* Mobile menu */
#mobile-menu {
  transition: max-height 0.3s ease-out, opacity 0.3s ease;
}

/* Footer */
footer {
  border-top: 1px solid #27272a;
}

/* Accessibility */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #B45309;
  outline-offset: 2px;
}

/* Small utility for strike price */
.strike {
  text-decoration: line-through;
  color: #52525b;
}

/* Language switcher (top right) */
.lang-btn {
  transition: all 0.15s ease;
  color: #a1a1aa;
  background-color: transparent;
}

.lang-btn.active {
  background-color: #B45309;
  color: white;
}

.lang-btn:hover:not(.active) {
  background-color: #27272a;
  color: #e4e4e7;
}

/* Toast animation */
@keyframes toastPop {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Background image + strong dark overlay is set inline on the body tag in index.html
   (images/background.jpg). The high opacity gradient ensures good readability over the beige image. */
body {
  background-color: #0a0a0a; /* fallback */
}

/* Hero can have a slightly stronger overlay if wanted */
#hero {
  position: relative;
}

/* Print */
@media print {
  .no-print {
    display: none !important;
  }
}