/* ==========================================================
   Sri Krishna Fireworks — Bootstrap Pro Theme Layer
   Bridges Bootstrap 5 with the existing design-system tokens,
   adds professional polish + rock-solid mobile responsiveness.
   Load order: design-system.css -> style.css -> animations.css
   -> polish.css -> bootstrap-pro.css (this file, loads last)
   ========================================================== */

/* ---------- 1. Map Bootstrap variables to our design tokens ---------- */
:root{
  --bs-primary:#f59e0b;
  --bs-primary-rgb:245,158,11;
  --bs-danger:#ef4444;
  --bs-danger-rgb:239,68,68;
  --bs-success:#10b981;
  --bs-success-rgb:16,185,129;
  --bs-body-bg:transparent;
  --bs-body-color:var(--text-secondary,#e2e8f0);
  --bs-border-color:var(--border-color,rgba(255,255,255,.12));
  --bs-border-radius:var(--radius-md,10px);
  --bs-border-radius-lg:var(--radius-lg,14px);
  --bs-border-radius-pill:var(--radius-pill,999px);
  --bs-link-color:var(--primary-accent,#f59e0b);
  --bs-link-hover-color:var(--primary-accent-hover,#d97706);
  --bs-font-sans-serif:var(--font-body,'Poppins',sans-serif);
  --space-1:.25rem;--space-2:.5rem;--space-3:1rem;--space-4:1.5rem;--space-5:2.5rem;--space-6:4rem;
}

/* Bootstrap grid containers should respect the site's max width + gutters */
.container,.container-fluid,.container-nav{ --bs-gutter-x:1.5rem; }
.container{ max-width:1240px; }

/* Bootstrap buttons re-skinned to match brand */
.btn{ font-family:var(--font-heading,'Outfit',sans-serif); font-weight:600; letter-spacing:.2px; border-radius:var(--bs-border-radius-pill); transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease; }
.btn:active{ transform:translateY(0); }
.btn-primary{ background:linear-gradient(135deg,#ff4d4d 0%,#f59e0b 100%); border:none; box-shadow:0 4px 14px rgba(245,158,11,.35); color:#fff; }
.btn-primary:hover,.btn-primary:focus{ background:linear-gradient(135deg,#dc2626 0%,#d97706 100%); box-shadow:0 6px 20px rgba(245,158,11,.5); transform:translateY(-2px); color:#fff; }
.btn-outline-primary{ border:1.5px solid var(--primary-accent,#f59e0b); color:var(--primary-accent,#f59e0b); background:transparent; }
.btn-outline-primary:hover{ background:var(--primary-accent,#f59e0b); color:var(--text-inverse,#070b14); transform:translateY(-2px); }
.btn-lg{ padding:.85rem 1.75rem; font-size:1rem; }
.btn-sm{ padding:.4rem .9rem; font-size:.82rem; }

/* Bootstrap cards inherit the site's elevated surface look */
.card{ background:var(--bg-surface,#0e1726); border:var(--border-subtle,1px solid rgba(255,255,255,.12)); border-radius:var(--bs-border-radius-lg); box-shadow:var(--shadow-card,0 10px 25px -5px rgba(0,0,0,.45)); color:var(--text-secondary); transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; }
.card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -10px rgba(0,0,0,.55); border-color:rgba(245,158,11,.35); }
.card-title{ font-family:var(--font-heading,'Outfit',sans-serif); color:var(--text-primary,#fff); font-weight:700; }
.card-body{ padding:1.35rem; }

/* Forms */
.form-control,.form-select{ background:var(--bg-input,#0b111e); border:1px solid var(--border-color,rgba(255,255,255,.14)); color:var(--text-primary,#fff); border-radius:var(--bs-border-radius); padding:.65rem 1rem; }
.form-control:focus,.form-select:focus{ background:var(--bg-input,#0b111e); color:var(--text-primary,#fff); border-color:var(--primary-accent,#f59e0b); box-shadow:0 0 0 .2rem rgba(245,158,11,.2); }
.form-control::placeholder{ color:var(--text-muted,#94a3b8); }
.form-label{ font-weight:600; color:var(--text-secondary); margin-bottom:.4rem; }
[data-theme="light"] .form-control,[data-theme="light"] .form-select{ background:#fff; color:#0f172a; }

/* Badges / pills */
.badge{ font-weight:700; letter-spacing:.3px; }

/* Tables */
.table{ color:var(--text-secondary); border-color:var(--border-color); }
.table thead th{ font-family:var(--font-heading,'Outfit',sans-serif); color:var(--text-primary); border-bottom-width:2px; }
[data-theme="light"] .table{ color:#334155; }

/* ---------- 2. Global professional polish ---------- */
html{ scroll-behavior:smooth; }
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2,h3,h4,h5,h6{ letter-spacing:-.01em; }
section{ padding-block:clamp(2.5rem,5vw,4.5rem); }
::selection{ background:rgba(245,158,11,.35); color:#fff; }

/* Section headings — consistent, professional rhythm */
.section-title{ font-size:clamp(1.5rem,4vw,2.25rem); }
.section-subtitle{ color:var(--text-muted); font-size:clamp(.9rem,2vw,1.05rem); }

/* Smoother focus states for accessibility + a polished look */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--primary-accent,#f59e0b); outline-offset:2px; border-radius:4px;
}

/* Sticky header gets a touch more depth on scroll-capable surfaces */
.main-site-header,.site-header{ box-shadow:0 1px 0 rgba(255,255,255,.04); }

/* Product / price cards used across catalog + pricelist pages */
.product-card,.price-card,.category-card{ border-radius:var(--radius-lg,14px)!important; transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s ease; }
.product-card:hover,.price-card:hover,.category-card:hover{ transform:translateY(-6px); }

/* ---------- 3. Mobile-first responsive hardening ---------- */
:root{ box-sizing:border-box; }
*,*::before,*::after{ box-sizing:inherit; }

/* Prevent any element from forcing horizontal scroll on small screens */
html,body{ max-width:100%; overflow-x:hidden; }
img,svg,video,canvas{ max-width:100%; height:auto; }
table{ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* Comfortable, consistent gutters at every breakpoint */
@media (max-width:576px){
  .container,.container-nav{ padding-left:1rem; padding-right:1rem; }
  section{ padding-block:2rem; }
  h1{ font-size:1.7rem; }
  h2{ font-size:1.4rem; }
  h3{ font-size:1.15rem; }
  .btn-lg{ padding:.7rem 1.25rem; font-size:.92rem; }
}

/* Ensure every tappable control meets a 44px minimum touch target on touch devices */
@media (hover:none) and (pointer:coarse){
  .btn,.nav-item,.mobile-links-list li a,.theme-toggle-btn,.mobile-menu-toggle,.floating-btn,button{
    min-height:44px;
  }
}

/* Top utility bar: collapse to essentials on small phones so it never wraps ugly */
@media (max-width:480px){
  .top-utility-bar{ font-size:.72rem; }
  .top-utility-bar .utility-right{ gap:.5rem; }
  .upi-badge{ display:none; }
}

/* Brand lockup stays legible at the smallest widths */
@media (max-width:360px){
  .brand-sub{ display:none; }
}

/* Safe-area support for notched phones */
:root{
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
.main-site-header,.site-header{ padding-top:var(--safe-top); }
.floating-actions-left{ padding-bottom:var(--safe-bottom); }
.scroll-top-btn{ bottom:calc(1.5rem + var(--safe-bottom)); }

/* Grid helpers for pages progressively moved to Bootstrap's grid */
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
@media (max-width:991px){ .grid-4{ grid-template-columns:repeat(2,1fr);} .grid-3{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:576px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

/* Loading skeleton shimmer, reusable across catalog/pricelist while data loads */
.skeleton{ position:relative; overflow:hidden; background:var(--bg-elevated,#162032); border-radius:var(--radius-md,10px); }
.skeleton::after{ content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent); animation:shimmer 1.4s infinite; }
@keyframes shimmer{ 100%{ transform:translateX(100%);} }

/* Respect reduced-motion preferences for accessibility */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
}