:root {
  --bordeaux: #7c1a22; 
  --bordeaux-dark: #5a1117;
  --orange: #e65c00;   
  --orange-text: #c44d00; /* Tonalità ottimizzata per il contrasto visivo WCAG AA del testo */
  --orange-hover: #cc5200;
  --bg-color: #f8f9fa;
}

body { background-color: var(--bg-color); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

.text-bordeaux { color: var(--bordeaux) !important; }
.text-orange { color: var(--orange-text) !important; }
.bg-bordeaux { background-color: var(--bordeaux) !important; color: white; }

.btn-bordeaux { background-color: var(--bordeaux); color: white; border: none; transition: 0.3s; }
.btn-bordeaux:hover { background-color: var(--bordeaux-dark); color: white; }
.btn-orange { background-color: var(--orange); color: white; border: none; transition: 0.3s; }
.btn-orange:hover { background-color: var(--orange-hover); color: white; }
.btn-outline-bordeaux { border: 2px solid var(--bordeaux); color: var(--bordeaux); font-weight: bold; transition: 0.3s; }
.btn-outline-bordeaux:hover { background-color: var(--bordeaux); color: white; }

.center-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 20px; }

.auth-card, .full-page-card { 
  width: 100%; padding: 2.5rem; 
  border-radius: 12px; background: white; 
  box-shadow: 0 10px 30px rgba(124, 26, 34, 0.1); 
  border-top: 6px solid var(--bordeaux);
  margin: 0 auto;
}
.auth-card { max-width: 500px; }

.product-card { margin-bottom: 25px; }
.product-card .card { 
  border: none; border-bottom: 4px solid var(--orange); 
  border-radius: 10px; transition: transform 0.2s, box-shadow 0.2s; height: 100%;
}
.product-card .card:hover { 
  transform: translateY(-5px); box-shadow: 0 12px 25px rgba(124, 26, 34, 0.15) !important; 
}

.product-img-click { cursor: pointer; transition: opacity 0.2s; }
.product-img-click:hover { opacity: 0.85; }
.product-title-click { cursor: pointer; }
.product-title-click:hover { color: var(--orange-text) !important; }

/* BARRA FILTRI STICKY IN ALTO DURANTE LO SCROLL */
.sticky-filter-bar {
  position: sticky;
  top: 60px;
  z-index: 1020;
  background-color: #ffffff !important;
  border-color: #f0e6e6 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
  transition: top 0.2s ease;
}

@media (max-width: 767px) {
  .sticky-filter-bar {
    top: 55px;
    padding: 10px !important;
  }
}

.cart-sticky { 
  position: sticky; bottom: 0; left: 0; width: 100%; z-index: 1000; 
  box-shadow: 0 -5px 20px rgba(0,0,0,0.08); border-top: 3px solid var(--bordeaux); 
}

.cart-pill-btn {
  background: linear-gradient(135deg, #ffffff 0%, #fff5f2 100%);
  color: var(--bordeaux);
  border: 1px solid rgba(124, 26, 34, 0.15);
  box-shadow: 0 8px 18px rgba(124, 26, 34, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cart-pill-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(124, 26, 34, 0.18);
}

.cart-pill-btn .cart-icon {
  color: var(--orange);
  font-size: 1rem;
}

.back-to-top {
  position: fixed;
  right: 16px;
  bottom: 84px;
  z-index: 1100;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--bordeaux), var(--orange));
  color: white;
  box-shadow: 0 8px 18px rgba(124, 26, 34, 0.25);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.back-to-top.show {
  display: flex;
}

.cart-item { border-bottom: 1px solid #f0e6e6; padding: 10px 0 12px; margin-bottom: 10px; border-radius: 10px; transition: background-color 0.2s ease; }

.cart-item:hover { background-color: #fffaf7; }
.riepilogo-riga { display: flex; justify-content: space-between; font-size: 0.95rem; margin-bottom: 5px; color: #6c757d; }

.top-nav { background-color: var(--bordeaux); padding: 15px 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 1030;}
.btn-hamburger { border: none; font-size: 1.6rem; padding: 0 10px; color: white; background: transparent; line-height: 1; }

.sidebar-menu .list-group-item {
    border: none; border-radius: 8px !important; margin-bottom: 5px; transition: 0.2s ease-in-out; cursor: pointer;
}
.sidebar-menu .list-group-item:hover:not(.active) { background-color: #f1eaea; color: var(--bordeaux) !important; }
.sidebar-menu .list-group-item.active { background-color: var(--bordeaux); color: white !important; box-shadow: 0 4px 10px rgba(124, 26, 34, 0.3); }

.order-card { border-left: 5px solid var(--bordeaux) !important; transition: 0.2s; }
.order-card:hover { transform: translateX(5px); box-shadow: 0 5px 15px rgba(0,0,0,0.08); }

.categoria-header {
    border-bottom: 3px solid #f0e6e6;
    margin-bottom: 20px;
    padding-bottom: 10px;
    text-align: left;
}
.categoria-header h4 {
    color: var(--bordeaux);
    font-weight: 800;
    margin: 0;
    display: inline-block;
    border-bottom: 3px solid var(--orange);
    padding-bottom: 8px;
    margin-bottom: -13px; 
}

.eye-btn { cursor: pointer; background-color: #f8f9fa; border-color: #dee2e6; }

.nav-pills .nav-link { color: #6c757d; font-weight: 600; border-radius: 8px; padding: 10px 20px; transition: 0.3s; cursor: pointer; border: 1px solid transparent; }
.nav-pills .nav-link:hover:not(.active) { background-color: #f8f9fa; border-color: #dee2e6; }
.nav-pills .nav-link.active { background-color: var(--bordeaux) !important; color: white !important; box-shadow: 0 4px 10px rgba(124, 26, 34, 0.2); }

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

input[type=number] { 
  -moz-appearance: textfield; 
  appearance: textfield; 
}

/* HOME PAGE STILE GROCERY */
.promo-section { 
    padding: 10px 0 20px; 
    overflow-x: auto; 
    white-space: nowrap; 
    scrollbar-width: none; 
}
.promo-section::-webkit-scrollbar { display: none; }

.promo-card {
    display: inline-block; 
    width: 300px; 
    height: 140px; 
    border-radius: 16px; 
    margin-right: 15px; 
    padding: 22px; 
    color: white; 
    position: relative; 
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s;
}
.promo-card:hover { transform: translateY(-3px); }

.promo-card.bordeaux-grad { background: linear-gradient(135deg, var(--bordeaux), #b52c38); }
.promo-card.orange-grad { background: linear-gradient(135deg, var(--orange), #ff8c42); }

.promo-card h3 { font-size: 1.25rem; margin-bottom: 6px; font-weight: 800; }
.promo-card p { font-size: 0.9rem; opacity: 0.95; white-space: normal; line-height: 1.3; font-weight: 500; }
.promo-card i { position: absolute; right: -5px; bottom: -20px; font-size: 6rem; opacity: 0.15; }

.home-section-title { 
    font-size: 1.15rem; 
    font-weight: 800; 
    color: var(--bordeaux); 
    margin: 20px 0 15px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}
.home-section-title a { color: var(--orange-text); font-size: 0.9rem; text-decoration: none; font-weight: 700; transition: 0.2s; }
.home-section-title a:hover { color: var(--bordeaux); }

.promo-slider-home {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
}

.promo-slider-home::-webkit-scrollbar {
    display: none;
}

.promo-card-home {
    min-width: 280px;
    max-width: 320px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #f2e7e7;
}

.promo-card-home:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(124, 26, 34, 0.12) !important;
}

.promo-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 100%);
}

.promo-card-content {
    z-index: 2;
}

.cookie-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 1200;
    display: none;
}

.cookie-banner .card {
    border: none;
    box-shadow: 0 12px 34px rgba(0,0,0,0.18);
}

.privacy-link {
    color: var(--orange-text);
    text-decoration: none;
    font-weight: 600;
}

.privacy-link:hover {
    color: var(--bordeaux);
}

body.a11y-large-text {
    font-size: 1.05rem;
}

body.a11y-high-contrast {
    background: #111;
    color: #fff;
}

body.a11y-high-contrast .card,
body.a11y-high-contrast .auth-card,
body.a11y-high-contrast .full-page-card,
body.a11y-high-contrast .modal-content,
body.a11y-high-contrast .bottom-nav {
    background: #1c1c1c !important;
    color: #fff !important;
    border-color: #666 !important;
}

body.a11y-high-contrast .btn,
body.a11y-high-contrast .form-control,
body.a11y-high-contrast .form-select {
    border-color: #888;
}

body.a11y-reduced-motion * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
}

.fidelity-qr svg {
    width: 120px;
    height: 120px;
    display: block;
    margin: 0 auto;
}

.fidelity-card {
    background: linear-gradient(135deg, var(--bordeaux) 0%, #b73b46 100%);
    color: white;
}

.category-slider { 
    display: flex; 
    gap: 15px; 
    overflow-x: auto; 
    scrollbar-width: none; 
    padding-bottom: 10px; 
}
.category-slider::-webkit-scrollbar { display: none; }

.cat-slide-item { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 8px; 
    min-width: 85px; 
    cursor: pointer; 
}
.cat-slide-icon { 
    width: 70px; 
    height: 70px; 
    background: white; 
    border-radius: 18px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 1.8rem; 
    color: var(--bordeaux); 
    box-shadow: 0 4px 10px rgba(124, 26, 34, 0.08); 
    border: 1px solid #f0e6e6; 
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
}
.cat-slide-item:hover .cat-slide-icon { 
    transform: translateY(-5px); 
    box-shadow: 0 8px 15px rgba(230, 92, 0, 0.15); 
    border-color: var(--orange); 
    color: var(--orange-text); 
}
.cat-slide-item span { font-size: 0.85rem; font-weight: 700; color: #495057; }

/* BOTTOM NAVIGATION (MOBILE) */
.bottom-nav {
    position: fixed; 
    bottom: 0; 
    left: 0;
    width: 100%; 
    background: white; 
    display: flex; 
    justify-content: space-around; 
    align-items: center;
    padding: 8px 0; 
    border-top: 1px solid #f0e6e6; 
    z-index: 1050;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.05);
}

.nav-item { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    color: #6c757d; 
    text-decoration: none; 
    font-size: 0.72rem; 
    gap: 3px; 
    transition: color 0.2s;
    flex: 1;
}

.nav-item.active { color: var(--bordeaux); font-weight: bold; }
.nav-item i { font-size: 1.25rem; }

.bottom-nav .nav-scanner-center {
    position: relative;
    top: -16px;
    background: linear-gradient(135deg, var(--orange), var(--bordeaux));
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(124, 26, 34, 0.4);
    border: 3px solid #ffffff;
    transition: transform 0.2s ease;
    margin: 0 -5px;
}

.bottom-nav .nav-scanner-center:active {
    transform: scale(0.92) translateY(-2px);
}

.bottom-nav .nav-scanner-center i {
    font-size: 1.3rem;
    margin-bottom: 0;
}

.bottom-nav .nav-scanner-center span {
    font-size: 0.62rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* SKELETON LOADERS */
.skeleton-box {
  background: #e9ecef;
  background: linear-gradient(90deg, #e9ecef 0%, #f8f9fa 50%, #e9ecef 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton-card-img { height: 160px; width: 100%; border-radius: 10px 10px 0 0; }
.skeleton-title { height: 18px; width: 80%; margin-bottom: 8px; }
.skeleton-sub { height: 14px; width: 50%; margin-bottom: 12px; }
.skeleton-price { height: 24px; width: 40%; margin-bottom: 12px; }
.skeleton-btn { height: 38px; width: 100%; border-radius: 20px; }

@media (max-width: 767px) {
    body { padding-bottom: 75px; }
    .cart-sticky { bottom: 65px; }
    .back-to-top { bottom: 96px; right: 12px; }
}
/* GRIGLIA ADATTIVA CATEGORIE SU DESKTOP */
@media (min-width: 768px) {
  .category-slider {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    overflow-x: visible !important;
  }

  .cat-slide-item {
    width: 100% !important;
    background: #ffffff;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid #f0e6e6;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .cat-slide-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(124, 26, 34, 0.12) !important;
  }

  .cat-slide-icon {
    width: 80px !important;
    height: 80px !important;
    font-size: 2.2rem !important;
  }

  .cat-slide-item span {
    font-size: 1rem !important;
    margin-top: 4px;
  }
}