/* =========================================================
   UDAN ENTERPRISES — Shared Stylesheet
   Design tokens follow the brand brief exactly:
   Primary #1E3A8A | Secondary #2563EB | Accent #F59E0B | Bg #F8FAFC
   Signature motif: the "swing tag" — the little cardboard tag
   stitched to every bag — used as a card/badge shape throughout,
   plus a stitched dashed-thread rule as the section divider.
========================================================= */

:root{
  --primary:#1E3A8A;
  --primary-dark:#152a63;
  --secondary:#2563EB;
  --accent:#F59E0B;
  --bg:#F8FAFC;
  --ink:#0f1b3d;
  --muted:#5b6b8c;
  --canvas:#eef2fb;
  --white:#ffffff;
  --radius:18px;
  --shadow-soft:0 10px 30px -12px rgba(30,58,138,0.25);
  --shadow-lift:0 20px 45px -15px rgba(30,58,138,0.35);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,.font-display{
  font-family:'Space Grotesk','Inter',sans-serif;
  letter-spacing:-0.02em;
}

/* Woven canvas texture backdrop (subtle, used behind hero/footer) */
.canvas-weave{
  background-image:
    repeating-linear-gradient(45deg, rgba(30,58,138,0.045) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(-45deg, rgba(30,58,138,0.045) 0 2px, transparent 2px 14px);
  background-color:var(--canvas);
}

/* Stitched dashed-thread divider — the recurring signature rule */
.stitch-divider{
  position:relative;
  height:2px;
  border:none;
  background-image:linear-gradient(90deg, var(--accent) 60%, transparent 40%);
  background-size:16px 2px;
  background-repeat:repeat-x;
  opacity:0.85;
}
.stitch-divider::before,
.stitch-divider::after{
  content:'';
  position:absolute;
  top:-4px;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--primary);
}
.stitch-divider::before{left:-2px;}
.stitch-divider::after{right:-2px;}

/* Swing-tag shape used on product / category / testimonial cards */
.tag-card{
  position:relative;
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(30,58,138,0.08);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  transition:transform .35s ease, box-shadow .35s ease;
}
.tag-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lift);
}
.tag-card::before{
  /* the tag's punch-hole */
  content:'';
  position:absolute;
  top:14px; left:14px;
  width:10px;height:10px;
  border-radius:50%;
  background:var(--bg);
  border:2px dashed rgba(30,58,138,0.35);
  z-index:2;
}

/* Glass navbar */
.glass-nav{
  background:rgba(248,250,252,0.7);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(30,58,138,0.08);
}

/* Buttons */
.btn-primary{
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:#fff;
  border-radius:999px;
  padding:.75rem 1.75rem;
  font-weight:600;
  box-shadow:0 10px 25px -10px rgba(37,99,235,0.6);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
  display:inline-flex; align-items:center; gap:.5rem;
}
.btn-primary:hover{transform:translateY(-2px); filter:brightness(1.06);}
.btn-accent{
  background:var(--accent);
  color:#1a1200;
  border-radius:999px;
  padding:.75rem 1.75rem;
  font-weight:700;
  box-shadow:0 10px 25px -10px rgba(245,158,11,0.55);
  transition:transform .25s ease, filter .25s ease;
  display:inline-flex; align-items:center; gap:.5rem;
}
.btn-accent:hover{transform:translateY(-2px); filter:brightness(1.05);}
.btn-outline{
  border:1.5px solid var(--primary);
  color:var(--primary);
  border-radius:999px;
  padding:.7rem 1.6rem;
  font-weight:600;
  transition:all .25s ease;
  display:inline-flex; align-items:center; gap:.5rem;
}
.btn-outline:hover{background:var(--primary); color:#fff;}

/* Loading spinner (thread spool spin) */
.spool-loader{
  width:46px;height:46px;
  border-radius:50%;
  border:4px solid rgba(30,58,138,0.15);
  border-top-color:var(--primary);
  border-right-color:var(--accent);
  animation:spin 0.9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* Toast notifications */
#toast-root{
  position:fixed; z-index:9999; top:1.25rem; right:1.25rem;
  display:flex; flex-direction:column; gap:.6rem;
}
.toast{
  min-width:260px; max-width:340px;
  background:#fff;
  border-left:5px solid var(--secondary);
  border-radius:12px;
  box-shadow:var(--shadow-lift);
  padding:.85rem 1rem;
  font-size:.9rem;
  animation:slideIn .35s ease;
}
.toast.success{border-left-color:#16a34a;}
.toast.error{border-left-color:#dc2626;}
.toast.warn{border-left-color:var(--accent);}
@keyframes slideIn{from{opacity:0; transform:translateX(30px);} to{opacity:1; transform:translateX(0);}}

/* Status pill */
.status-pill{
  display:inline-block; padding:.25rem .85rem; border-radius:999px;
  font-size:.75rem; font-weight:700; letter-spacing:.02em;
}
.status-Pending{background:#fef3c7;color:#92400e;}
.status-Contacted{background:#dbeafe;color:#1e40af;}
.status-Confirmed{background:#e0e7ff;color:#3730a3;}
.status-Processing{background:#fae8ff;color:#86198f;}
.status-Packing{background:#dcfce7;color:#166534;}
.status-Completed{background:#bbf7d0;color:#14532d;}
.status-Cancelled{background:#fee2e2;color:#991b1b;}

/* Lazy image fade-in */
img.lazy{opacity:0; transition:opacity .5s ease;}
img.lazy.loaded{opacity:1;}

/* Skeleton shimmer for product cards while loading */
.skeleton{
  background:linear-gradient(90deg,#eef2fb 25%,#f7f9ff 37%,#eef2fb 63%);
  background-size:400% 100%;
  animation:shimmer 1.4s ease infinite;
}
@keyframes shimmer{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* Scrollbar */
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-thumb{background:var(--primary); border-radius:10px;}
::-webkit-scrollbar-track{background:var(--canvas);}

/* Mobile nav */
.mobile-panel{transition:max-height .35s ease, opacity .3s ease;}

/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
}