/* ========================================
   GLOBAL STYLES & CSS VARIABLES
   ======================================== */
:root{
  --brand:#667eea; /* Primary Purple */
  --brand-2:#764ba2; /* Secondary Purple */
  --accent:#f093fb; /* Pink accent */
  --ink:#1e1e2d;    /* Text */
  --muted:#6b7280;  /* Muted text */
  --bg:#f7fafc;     /* Page background */
  --card:#ffffff;   /* Card background */
  --radius:1.25rem; /* Rounded */
  --shadow: 0 10px 30px rgba(102, 126, 234, 0.1);
}

body{ 
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  color: var(--ink); 
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  min-height: 100vh;
}

/* Global responsive helpers */
img, video{ max-width: 100%; height: auto; }
html, body{ overflow-x: hidden; }

/* Header Styles */
header {
  background: white !important;
  box-shadow: 0 2px 15px rgba(0,0,0,0.08);
  border-bottom: 3px solid var(--brand);
}

header a {
  color: var(--ink) !important;
  transition: color 0.3s;
}

header a:hover {
  color: var(--brand) !important;
}

.badge.bg-brand {
  background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
  padding: 8px 12px;
  font-size: 16px;
  border-radius: 10px;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
.shadow-soft{ box-shadow: var(--shadow); }
.glass{ backdrop-filter: blur(10px); background: rgba(255,255,255,.85); }
.rounded-2xl{ border-radius: var(--radius) !important; }
.btn-brand{ 
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); 
  color:#fff; 
  border:none;
  padding: 10px 20px;
  border-radius: 10px;
  transition: transform 0.2s;
}
.btn-brand:hover{ 
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
  color:#fff; 
}
.text-brand{ color:var(--brand); }
.bg-brand{ background:var(--brand) !important; }

/* ========================================
   NAVBAR
   ======================================== */
.navbar{ backdrop-filter:saturate(140%) blur(6px); padding:0.5rem 0; }
.nav-link{ font-weight:600; padding:.5rem 0.75rem !important; }
.navbar-brand{ font-size:1.1rem; }
/* Ensure hamburger icon is visible */
.navbar .navbar-toggler{ border: none; }
.navbar .navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(30,30,45,0.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ========================================
   HERO SECTION (index.html)
   ======================================== */
.hero-slide{ min-height: 60vh; display:grid; place-items:center; position:relative; }
@media (min-width: 768px){ .hero-slide{ min-height: 70vh; } }
@media (min-width: 1200px){ .hero-slide{ min-height: 75vh; } }
.hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; z-index:0; }
.hero-gradient{ position:absolute; inset:0; background:linear-gradient(115deg, rgba(108,92,231,.75), rgba(0,209,178,.65)); mix-blend-mode: multiply; }
.hero-content{ position:relative; z-index:1; color:#fff; text-align:center; max-width: 850px; padding:1rem; }
.hero-content h1, .hero-content h2{ font-size:1.5rem; line-height:1.2; }
@media (min-width: 768px){ .hero-content h1, .hero-content h2{ font-size:2.5rem; } }
@media (min-width: 1200px){ .hero-content h1, .hero-content h2{ font-size:3.5rem; } }
.hero-content .badge{ background: rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.35); font-size:.85rem; }

/* ========================================
   CAROUSEL
   ======================================== */
.carousel .carousel-item{ transition: transform .6s ease; }
.carousel .carousel-item .card{ height: 100%; }
@media (min-width: 768px){
  .carousel .carousel-item > .row > [class^="col-"]{ display:flex; }
  .carousel .carousel-item > .row{ display: flex; align-items: stretch; }
}

/* ========================================
   CATEGORY CARD (index.html)
   ======================================== */
.cat-card{ position:relative; overflow:hidden; aspect-ratio: 1; }
.cat-card img{ transition: transform .6s ease; width:100%; height:100%; object-fit:cover; display:block; }
.cat-card:hover img{ transform: scale(1.07); }
.cat-badge{ position:absolute; left:1rem; bottom:1rem; background:#fff; color:var(--ink); padding:.5rem .75rem; border-radius:999px; font-weight:700; font-size:0.8rem; }

/* ========================================
   PRODUCT CARD
   ======================================== */
.product-card{ 
  border:0; 
  border-radius:var(--radius); 
  overflow:hidden; 
  background:var(--card); 
  transition: transform .3s ease, box-shadow .3s ease; 
  height: 100%;
  display: flex;
  flex-direction: column;
}
.product-card:hover{ transform: translateY(-4px); box-shadow: 0 15px 40px rgba(24, 24, 40, .15) !important; }
.product-card .thumb{ 
  aspect-ratio: 4/3; 
  object-fit: cover; 
  width: 100%; 
  height: auto;
  display: block; 
  background: #f5f5f5;
  min-height: 200px;
  max-height: 300px;
}
.product-card .card-body{ 
  padding: 1rem; 
  flex: 1;
  display: flex;
  flex-direction: column;
}
.product-card .card-title{
  flex-shrink: 0;
  margin-bottom: 0.5rem;
}
.product-card .card-body .btn{ 
  margin-top: auto;
}
.price{ font-weight:800; font-size:1.1rem; }
.price del{ color:var(--muted); font-weight:500; margin-left:.35rem; font-size:0.9rem; }

/* ========================================
   FEATURE STRIP (index.html)
   ======================================== */
.feature-tile{ border-radius:var(--radius); background:#fff; padding:1rem !important; }
.feature-tile i{ flex-shrink:0; }
@media (max-width: 767px){ .feature-tile{ display:flex; align-items:center; gap:1rem; } }

/* ========================================
   TESTIMONIAL & AVATAR
   ======================================== */
.avatar{ width:56px; height:56px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.testi-card{ transition: transform .3s ease, box-shadow .3s ease; }
.testi-card:hover{ transform: translateY(-4px); }

/* ========================================
   NEWSLETTER
   ======================================== */
.newsletter-form{ flex-direction:column; }
@media (min-width: 768px){ .newsletter-form{ flex-direction:row; } }
.newsletter-form input{ min-height: 48px; font-size:0.95rem; }
.newsletter-form button{ min-height: 48px; font-size:0.95rem; white-space:nowrap; }

/* ========================================
   FOOTER
   ======================================== */
footer a{ text-decoration:none; color:inherit; }
footer a:hover{ color:var(--brand); }
footer ul li{ margin-bottom:0.5rem; }

/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes floaty{ 0%{ transform:translateY(0)} 50%{ transform:translateY(-6px)} 100%{ transform:translateY(0)} }
.floaty{ animation: floaty 6s ease-in-out infinite; }

/* ========================================
   FILTER SIDEBAR (product.html)
   ======================================== */
.filter-card{ background:#fff; }
.chip{ display:inline-flex; align-items:center; gap:.35rem; border-radius:999px; padding:.35rem .6rem; background:#fff; border:1px solid #e5e7eb; font-size:.85rem; }
.chip .bi{ font-size:.95em; }

.form-range::-webkit-slider-thumb{ background: var(--brand); }
.form-check-input:checked{ background-color: var(--brand); border-color: var(--brand); }

.sticky-filters{ position: sticky; top: 90px; }

/* Pagination */
.page-link{ border-radius: .75rem; }

/* ========================================
   PRODUCT GALLERY (productDetail.html)
   ======================================== */
.product-gallery{ 
  display: flex; 
  gap: 1rem; 
  align-items: flex-start;
}
.thumbnail-strip{ 
  display: flex; 
  flex-direction: column; 
  gap: 0.75rem; 
  max-width: 80px; 
  overflow-y: auto; 
  max-height: 500px;
  flex-shrink: 0;
  overscroll-behavior: contain;
  scroll-snap-type: y proximity;
  padding-right: 4px;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #bbb transparent; /* Firefox */
}
.thumbnail-strip:empty{ display: none; }
.thumbnail-strip::-webkit-scrollbar{ width: 4px; }
.thumbnail-strip::-webkit-scrollbar-track{ background: #f1f1f1; border-radius: 10px; }
.thumbnail-strip::-webkit-scrollbar-thumb{ background: #888; border-radius: 10px; }
.thumbnail-strip::-webkit-scrollbar-thumb:hover{ background: #555; }
.thumb{ 
  width: 70px; 
  height: 70px; 
  object-fit: cover; 
  border: 2px solid #e5e7eb; 
  border-radius: 0.5rem; 
  cursor: pointer; 
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; 
  background: #fff;
  padding: 2px;
  will-change: transform;
  transform-origin: center;
  scroll-snap-align: start;
}
.thumb.active{ 
  border-color: var(--brand); 
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.25);
}
.thumb:hover{ 
  border-color: var(--brand); 
  transform: scale(1.02);
}
.thumb:focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.main-image-container{ 
  flex: 1; 
  position: relative; 
  background: #fff; 
  border: 1px solid #e5e7eb; 
  border-radius: 0.75rem; 
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
  max-height: 560px;
}
.gallery-main{ 
  width: 100%; 
  height: 100%; 
  object-fit: contain; 
  transition: transform 0.3s ease;
  max-height: 600px;
}
.main-image-container:hover .gallery-main{ 
  transform: scale(1.05);
}
.image-zoom-hint{
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  display: none;
}

/* Accordions */
.accordion-button:not(.collapsed){ background:#f8fafc; color:var(--ink); }

/* ========================================
   ADMIN PORTAL (ProductListing.html)
   ======================================== */
.sidebar{ position:sticky; top:0; height:100vh; padding:1rem; background:#fff; }
.content-card{ background:#fff; }
.table thead th{ white-space:nowrap; }
.qr-tile{ 
  border:2px solid #e5e7eb; 
  padding:20px; 
  border-radius: 0.5rem; 
  background:#fff;
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.qr-tile:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-color: var(--brand);
}
.qr-label{ font-size:.85rem; }
.qr-canvas-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
  background: #fff;
  border-radius: 0.5rem;
  margin: 10px 0;
}
.qr-tile canvas{
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  border: 2px solid #000;
  background: #fff;
  padding: 8px;
}
#qrGrid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
@media (min-width: 1200px){
  #qrGrid{
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */
/* Typography scaling */
h1, h2, h3, h4, h5, h6{ line-height:1.2; }
@media (max-width: 576px){
  h1, .display-5{ font-size:1.5rem !important; }
  h2{ font-size:1.25rem !important; }
  h3{ font-size:1.1rem !important; }
  .lead{ font-size:0.95rem !important; }
  /* Larger tap targets on small screens */
  .btn{ min-height: 44px; }
  .form-control, .form-select{ min-height: 44px; }
}

/* Sections spacing */
section{ padding:1rem 0; }
@media (min-width: 768px){ section{ padding:2rem 0; } }
@media (min-width: 1200px){ section{ padding:3rem 0; } }

/* Container padding */
.container{ padding-left:1rem; padding-right:1rem; }
@media (min-width: 576px){ .container{ padding-left:1.5rem; padding-right:1.5rem; } }

/* Dropdown sizing */
.dropdown-menu{ max-width: 90vw; width: 680px; }
@media (max-width: 767px){ .dropdown-menu{ width: calc(100vw - 2rem); } }

/* Filter responsive helpers */
@media (max-width: 991px){
  .filters-desktop{ display:none; }
  .sidebar{ height:auto; position:static; }
  .product-gallery{ flex-direction: column-reverse; }
  .thumbnail-strip{ 
    flex-direction: row; 
    max-width: 100%; 
    max-height: 80px; 
    overflow-x: auto; 
    overflow-y: hidden;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    order: 2;
  }
  .thumbnail-strip:empty{ display: none !important; }
  .thumb{ flex-shrink: 0; }
  .main-image-container{ 
    min-height: 350px;
    max-height: 400px;
    order: 1;
  }
}
@media (min-width: 992px){
  .filters-mobile{ display:none; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .carousel{ animation: none !important; }
  .carousel .carousel-item{ transition: none !important; }
}

/* ========================================
   PRINT STYLES (QR Codes)
   ======================================== */
@media print{
  @page{
    size: A4;
    margin: 6mm;
  }
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  html, body{ 
    background:#fff !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
  }
  .sidebar, .navbar, .btn-group, .d-flex:has(.btn), .modal-header, .toast, [onclick*="print"], table, tbody, .content-card, .container-fluid > .row > main, .modal-footer, .btn, button, .offcanvas, .modal-backdrop{ 
    display:none !important; 
    visibility: hidden !important;
  }
  .modal{ 
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: #fff !important;
  }
  .modal-dialog, .modal-content{ 
    all: unset !important;
    display:block !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    transform: none !important;
  }
  .modal-body{ 
    all: unset !important;
    display:block !important;
    position: static !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #qrGrid{ 
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18mm 14mm !important;
    padding: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    page-break-inside: auto !important;
    align-items: start !important;
    box-sizing: border-box !important;
  }
  #qrGrid > *{
    display: block !important;
    height: auto !important;
    width: 100% !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    margin: 0 !important;
  }
  .qr-tile{
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    padding: 14mm 10mm !important;
    border: 4px solid #000 !important;
    text-align: center !important;
    background: #fff !important;
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 95mm !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    position: relative !important;
  }
  .qr-tile canvas{
    width: 260px !important;
    height: 260px !important;
    min-width: 260px !important;
    min-height: 260px !important;
    max-width: calc(100% - 16mm) !important;
    margin: 10mm auto 8mm auto !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
    image-rendering: pixelated !important;
    filter: none !important;
    -webkit-filter: none !important;
    border: 5px solid #000 !important;
    padding: 12px !important;
    background: #fff !important;
    box-sizing: border-box !important;
    display: block !important;
    page-break-inside: avoid !important;
  }
  .qr-tile .fw-semibold{ 
    font-weight: 700 !important;
    font-size: 16pt !important;
    margin-bottom: 4mm !important;
    margin-top: 0 !important;
    display: block !important;
    color: #000 !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }
  .qr-tile .text-muted{
    font-size: 11pt !important;
    color: #000 !important;
    margin-bottom: 3mm !important;
    margin-top: 0 !important;
    display: block !important;
    font-weight: 600 !important;
  }
  .qr-tile .small{
    font-size: 10pt !important;
    color: #333 !important;
    margin-bottom: 2mm !important;
    display: block !important;
  }
  .qr-label{
    display: none !important;
  }
  .qr-tile .d-grid{ 
    display:none !important; 
  }
  .qr-canvas-wrapper{
    background: #fff !important;
    padding: 0 !important;
    margin: 8mm 0 6mm 0 !important;
    border: none !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
}