/* ==========================================================================
   Shree Krishna Fashion — Tailwind theme tokens + custom utilities.
   This file supplements the Tailwind Play CDN loaded in header.php. It
   guarantees the design system renders even if the CDN is slow/unavailable.

   IMPORTANT: The Tailwind Play CDN (cdn.tailwindcss.com) is configured in
   header.php with the same theme values so utility classes like
   `bg-primary-navy`, `text-primary-gold`, `font-serif` work out of the box.
   ========================================================================== */

/* Font imports (also loaded via <link> in header.php for reliability) */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100..900;1,100..900&display=swap');

/* ---- Design tokens: mirror src/index.css @theme block exactly ---- */
:root {
  --color-primary-gold:   #FABD20;
  --color-primary-navy:   #0A1931;
  --color-warm-ivory:     #FCF8F2;
  --color-almost-black:   #121212;
  --color-dark-grey:      #4A4A4A;
  --color-soft-gold:      #D4AF37;
  --font-serif: "Playfair Display", Georgia, serif;
  --font-sans:  "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---- Font family utilities (fallback when Play CDN not active) ---- */
.font-serif { font-family: "Playfair Display", Georgia, serif; }
.font-sans  { font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

/* ---- Brand color utilities (fallback) ---- */
.bg-primary-navy   { background-color: #0A1931; }
.bg-primary-gold   { background-color: #FABD20; }
.bg-soft-gold      { background-color: #D4AF37; }
.bg-warm-ivory     { background-color: #FCF8F2; }
.text-primary-navy { color: #0A1931; }
.text-primary-gold { color: #FABD20; }
.text-soft-gold    { color: #D4AF37; }
.border-primary-navy { border-color: #0A1931; }
.border-primary-gold { border-color: #FABD20; }
.border-soft-gold    { border-color: #D4AF37; }
.fill-primary-gold { fill: #FABD20; }
.fill-soft-gold    { fill: #D4AF37; }
.fill-red-500      { fill: #EF4444; }
.ring-primary-gold { box-shadow: 0 0 0 2px rgba(250, 189, 32, 0.4); }

/* Opacity variants used across templates */
.bg-primary-navy\/95 { background-color: rgba(10, 25, 49, 0.95); }
.bg-primary-navy\/90 { background-color: rgba(10, 25, 49, 0.90); }
.bg-primary-navy\/80 { background-color: rgba(10, 25, 49, 0.80); }
.bg-primary-navy\/20 { background-color: rgba(10, 25, 49, 0.20); }
.bg-primary-gold\/10 { background-color: rgba(250, 189, 32, 0.10); }
.bg-primary-gold\/30 { background-color: rgba(250, 189, 32, 0.30); }
.text-primary-navy\/80 { color: rgba(10, 25, 49, 0.80); }
.text-primary-navy\/70 { color: rgba(10, 25, 49, 0.70); }
.hover\:bg-primary-navy\/95:hover { background-color: rgba(10, 25, 49, 0.95); }

/* Hardcoded palette literals used directly in JSX (e.g. text-[#0A1931]) —
   Tailwind Play CDN handles these; nothing extra needed here. */

/* ---- Reusable card surface tokens ---- */
.skf-card {
  background-color: #FFFFFF;
  border: 1px solid #F3EDE2;
  border-radius: 24px;
  box-shadow: 0 4px 24px rgba(10, 25, 49, 0.02);
}
.skf-card-cream { background-color: #FAF8F5; }
.skf-border-cream { border-color: #F3EDE2; }

/* Indian floral pattern overlay (also defined in style.css — kept here too
   for cascade order when Play CDN resets base styles) */
.indian-floral-pattern { position: relative; }
.indian-floral-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.03;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23FABD20' fill-rule='evenodd'%3E%3Ccircle cx='60' cy='60' r='3'/%3E%3Ccircle cx='30' cy='30' r='1.5'/%3E%3Ccircle cx='90' cy='30' r='1.5'/%3E%3Ccircle cx='30' cy='90' r='1.5'/%3E%3Ccircle cx='90' cy='90' r='1.5'/%3E%3Ccircle cx='60' cy='10' r='2'/%3E%3Ccircle cx='60' cy='110' r='2'/%3E%3Ccircle cx='10' cy='60' r='2'/%3E%3Ccircle cx='110' cy='60' r='2'/%3E%3Cpath d='M60 35c8 5 12 12 12 25s-4 20-12 25c-8-5-12-12-12-25s4-20 12-25z' opacity='.6'/%3E%3Cpath d='M35 60c5-8 12-12 25-12s20 4 25 12c-5 8-12 12-25 12s-20-4-25-12z' opacity='.4'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
}

.underline-animation { position: relative; display: inline-block; }
.underline-animation::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 1.5px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}
.underline-animation:hover::after { transform: scaleX(1); transform-origin: bottom left; }

/* Hide scrollbar (reels scroller) */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Line clamps */
.line-clamp-1, .line-clamp-2, .line-clamp-3 {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.line-clamp-1 { -webkit-line-clamp: 1; }
.line-clamp-2 { -webkit-line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; }

/* Custom scale-102 used in ProductView (Tailwind doesn't ship it) */
.scale-102 { transform: scale(1.02); }
.active\:scale-95:active { transform: scale(0.95); }
.active\:scale-90:active { transform: scale(0.90); }

/* Aspect ratios for product image containers (Play CDN handles aspect-[x/y]) */
.aspect-3-4 { aspect-ratio: 3 / 4; }
.aspect-4-5 { aspect-ratio: 4 / 5; }
.aspect-9-16 { aspect-ratio: 9 / 16; }
.aspect-21-9 { aspect-ratio: 21 / 9; }
.aspect-4-3 { aspect-ratio: 4 / 3; }
.aspect-16-9 { aspect-ratio: 16 / 9; }
.aspect-square { aspect-ratio: 1 / 1; }

/* WooCommerce image reset — ensure responsive */
.woocommerce-product-gallery img,
.woocommerce div.product div.images img { max-width: 100%; height: auto; }

/* WooCommerce form input normalisation (forms inherit Tailwind body reset) */
.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row input[type="tel"],
.woocommerce form .form-row input[type="password"],
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  background-color: #FFFFFF;
}
.woocommerce form .form-row label { font-size: 12px; font-weight: 600; color: #6B7280; }

/* Remove default WC link underlines inside product listings */
.woocommerce ul.products li.product a,
.woocommerce-LoopProduct-link { text-decoration: none; }