/**
 * Spring Green Custom Styles & Design Tokens
 * Matches Next.js globals.css and Tailwind theme specifications
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

:root {
  color-scheme: light;
  --background: #ffffff;
  --foreground: #2b2b2b;
  --card: #ffffff;
  --card-foreground: #2b2b2b;
  --popover: #ffffff;
  --popover-foreground: #2b2b2b;
  --primary: #4a6b3a;
  --primary-foreground: #ffffff;
  --secondary: #faf6ec;
  --secondary-foreground: #2b2b2b;
  --muted: #f3f6ef;
  --muted-foreground: #6b6b63;
  --accent: #f4a825;
  --accent-foreground: #2b2b2b;
  --destructive: #d6262c;
  --border: #e8e6dc;
  --input: #e2dfd3;
  --ring: #4a6b3a;
  --brand-dark: #2f4626;
  --radius: 0.75rem;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --shadow-soft: 0 8px 30px -12px rgba(47, 70, 38, 0.18);
  --shadow-lift: 0 18px 40px -16px rgba(47, 70, 38, 0.28);
}

html {
  scroll-behavior: smooth;
  font-family: var(--font-sans);
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: var(--font-heading);
}

/* Custom Design Shadows */
.shadow-soft {
  box-shadow: var(--shadow-soft) !important;
}

.shadow-lift {
  box-shadow: var(--shadow-lift) !important;
}

/* Custom Color Utilities Matching Theme Tokens */
.bg-brand-dark { background-color: var(--brand-dark); }
.text-brand-dark { color: var(--brand-dark); }
.border-brand-dark { border-color: var(--brand-dark); }

.bg-primary { background-color: var(--primary); }
.text-primary { color: var(--primary); }
.border-primary { border-color: var(--primary); }

.bg-primary-foreground { background-color: var(--primary-foreground); }
.text-primary-foreground { color: var(--primary-foreground); }

.bg-secondary { background-color: var(--secondary); }
.text-secondary { color: var(--secondary); }
.border-secondary { border-color: var(--secondary); }

.bg-accent { background-color: var(--accent); }
.text-accent { color: var(--accent); }
.border-accent { border-color: var(--accent); }

.bg-muted { background-color: var(--muted); }
.text-muted { color: var(--muted); }
.text-muted-foreground { color: var(--muted-foreground); }
.border-border { border-color: var(--border); }

/* Animation Keyframes */
@keyframes wa-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); }
  70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

@keyframes badge-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.animate-wa-pulse {
  animation: wa-pulse 2.2s ease-out infinite;
}

.animate-badge-pop {
  animation: badge-pop 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .animate-wa-pulse, .animate-badge-pop { animation: none; }
}

/* WooCommerce Overrides & Integrations */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  margin: 0 0 2rem 0 !important;
  padding: 0 !important;
}
@media (min-width: 640px) {
  .woocommerce ul.products {
    gap: 1.5rem !important;
  }
}
@media (min-width: 1024px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
.woocommerce ul.products li.product {
  margin: 0 !important;
  width: 100% !important;
  float: none !important;
  clear: none !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none !important;
}

.woocommerce .woocommerce-breadcrumb {
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.woocommerce .woocommerce-breadcrumb a {
  color: var(--foreground);
  transition: color 0.2s ease;
}
.woocommerce .woocommerce-breadcrumb a:hover {
  color: var(--primary);
}

.woocommerce span.onsale {
  background-color: var(--accent) !important;
  color: var(--foreground) !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
  padding: 4px 10px !important;
  font-size: 0.75rem !important;
  line-height: 1 !important;
  min-height: auto !important;
  min-width: auto !important;
}

.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.button.alt,
.woocommerce #respond input#submit.alt {
  background-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border-radius: 9999px !important;
  padding: 12px 28px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
  background-color: var(--brand-dark) !important;
  transform: translateY(-2px);
}

/* WooCommerce Cart & Checkout Elements */
.woocommerce table.shop_table {
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  border-collapse: separate !important;
  overflow: hidden;
  background-color: #fff;
}
.woocommerce table.shop_table th {
  background-color: #f8faf5;
  color: var(--foreground);
  font-weight: 600;
  padding: 12px 16px !important;
}
.woocommerce table.shop_table td {
  padding: 14px 16px !important;
  border-top: 1px solid var(--border) !important;
}
.woocommerce-cart .cart-collaterals .cart_totals {
  background-color: #fbfbf9;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  border: 1px solid var(--input);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(74, 107, 58, 0.15);
}
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: 8px !important;
}

/* Screen reader text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Lahore-Only Checkout Styles */
.woocommerce #billing_country_field.spring-green-hide-country,
.woocommerce #shipping_country_field.spring-green-hide-country,
#billing_country_field.spring-green-hide-country,
#shipping_country_field.spring-green-hide-country {
  display: none !important;
}

.spring-green-city-notice {
  display: flex !important;
  align-items: center;
  gap: 6px;
  background-color: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  color: #15803d !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
  line-height: 1.4 !important;
}

/* Yellow Notice Box for Chopped / Pre-Cut Vegetables */
.spring-green-chopped-veg-notice {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  background-color: #fefce8 !important;
  border: 1px solid #fde047 !important;
  border-left: 4px solid #eab308 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  margin: 16px 0 !important;
  color: #854d0e !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  box-shadow: 0 1px 3px rgba(234, 179, 8, 0.15) !important;
}

.spring-green-chopped-veg-notice .notice-icon {
  font-size: 18px !important;
  line-height: 1.2 !important;
  flex-shrink: 0 !important;
}

.spring-green-chopped-veg-notice .notice-text {
  flex: 1 !important;
}