/* ─── Premium Typography (Variable Font) ─────────────────────────────────── */
/* Brand-agnostic: swap /assets/fonts/brand-font.woff2 per client — no code edit needed */
@font-face {
  font-family: 'BrandFont';
  src: url('/assets/fonts/brand-font.woff2') format('woff2-variations'),
    url('/assets/fonts/brand-font.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ═══ THEME TOKENS — per-client theming happens HERE only ═══ */
  /* ── Pick&Buy: Blue & White — সাদা ক্যানভাস, নীল interaction, কমলা deals ── */

  /* Brand blue ramp (primary, CTA, links) */
  --brand-50: #e8f1fe;
  --brand-100: #c5dbfc;
  --brand-300: #6ba3f5;
  --brand-500: #0d6efd;
  --brand-600: #0a58ca;
  --brand-800: #063a85;

  /* Accent deal ramp (sale, offer, savings — কমলা) */
  --accent-50: #fff4e5;
  --accent-500: #ff8a00;
  --accent-600: #e67300;

  /* Core Colors */
  --bg-color: #ffffff;
  /* pure white page bg */
  --surface: #ffffff;
  /* cards / panels */
  --text-color: #14181f;
  /* cool near-black ink */
  --accent-color: #0d6efd;
  /* CTA/highlight = brand blue */
  --text-muted: #5f6673;
  /* cool gray subtext */
  --border-color: #e5e8ee;
  --border-light: #eff1f5;

  /* RGB channels — for rgba() overlays/shadows so they follow the brand */
  --ink-rgb: 20, 24, 31;
  --paper-rgb: 255, 255, 255;

  /* Ink ramp (text/graphics, dark → light, cool neutral) */
  --ink-900: #14181f;
  --ink-800: #232936;
  --ink-700: #39404e;
  --ink-600: #4c5462;
  --ink-500: #5f6673;
  --ink-380: #737b89;
  --ink-350: #828a98;
  --ink-300: #959daa;
  --ink-250: #a9b0bc;
  --ink-200: #bfc5cf;

  /* Line ramp (borders/dividers, cool) */
  --line-300: #d4d9e1;
  --line-250: #dde1e8;
  --line-200: #e3e7ed;
  --line-120: #eaedf2;
  --line-110: #edf0f4;
  --line-80: #f2f4f7;

  /* Surface ramp (light backgrounds, cool white) */
  --surface-300: #eef1f6;
  --surface-200: #f2f4f8;
  --surface-150: #f5f7fa;
  --surface-140: #f7f8fb;
  --surface-100: #f9fafc;
  --surface-50: #fbfcfd;

  /* Status colors (order timeline, alerts) */
  --status-success: #16a34a;
  /* success green */
  --status-success-alt: #10b981;
  /* discount/success accent (emerald) */
  --status-info: #3b82f6;
  --status-warning: #e8a53c;
  --status-processing: #ff8a00;
  --status-shipped: #8b5cf6;
  --status-danger: #dc2626;
  --status-danger-soft: #d23b28;
  --status-danger-deep: #b91c1c;
  --surface-alt: #f6f8fb;
  /* neutral cancel/secondary button bg */
  --brand-google: #4285f4;
  /* Google sign-in blue (fixed brand) */
  --status-success-deep: #15803d;
  /* discount text (deep green) */
  --slate-heading: #1f2733;
  /* spec-table heading text */

  /* Sale price — কমলা (নীল CTA থেকে আলাদা) */
  --sale-color: #e67300;

  /* Status soft backgrounds (order status pills) */
  --status-warning-bg: #fdf4e3;
  --status-info-bg: #eff6ff;
  --status-processing-bg: #fff4e5;
  --status-shipped-bg: #f5f3ff;
  --status-success-bg: #eaf7ef;
  --status-danger-bg: #fdecec;

  --status-success-alt-bg: #e7f6ee;
  /* coupon/discount badge bg (light green) */

  /* Promo badge gradient (Free Delivery — brand blue) */
  --promo-from: #3b82f6;
  --promo-to: #0d6efd;

  /* Skeleton loader (cool) */
  --skeleton-base: #e8ebf0;
  --skeleton-sheen: #f2f4f8;

  /* Elevation (soft) */
  --shadow-sm: 0 1px 3px rgba(var(--ink-rgb), 0.06);
  --shadow-md: 0 4px 16px rgba(var(--ink-rgb), 0.08);
  --shadow-lg: 0 12px 32px rgba(var(--ink-rgb), 0.12);

  /* Typography */
  --font-primary: 'BrandFont', sans-serif;
  --font-heading: 'BrandHeading', 'BrandFont', sans-serif;

  /* Shapes — SHARP standard: zero radius everywhere (Cloco-style).
     Circles/pills (50%, --radius-pill) stay round for swatches/toggles/tags. */
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-pill: 999px;
  --radius-none: 0px;

  /* Spacing System */
  --gap-section: 64px;
  /* Large gaps between major sections */
  --gap-section-sm: 40px;
  /* Mobile section gap */
  --gap-element-lg: 32px;
  /* Large element gap (e.g., between form sections) */
  --gap-element: 24px;
  /* Standard element gap (e.g., below section titles) */
  --gap-element-sm: 16px;
  /* Small element gap (e.g., between form inputs) */
  --gap-element-xs: 8px;
  /* Extra small gap (e.g., between labels and inputs) */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-primary);
  background-color: var(--bg-color);
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Crisp text on macOS */
  line-height: 1.6;
  /* Better readability */
  text-rendering: optimizeLegibility;
}

/* ─── Typography Refinements (Premium Look) ────────────────────────────── */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  line-height: 1.2;
  letter-spacing: -0.01em;
  /* Friendly-modern tracking for a fresh agro brand */
  font-weight: 600;
  color: var(--text-color);
}

a {
  text-decoration: none;
  color: var(--text-color);
}

ul {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font-primary);
  color: var(--text-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

input,
select,
textarea,
button {
  font-family: inherit;
  font-size: 100%;
  /* Prevent iOS zoom */
}

/* ─── Mobile Form Resets (iOS/Safari Fixes) ────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
select,
textarea {
  appearance: none;
  -webkit-appearance: none;
  border-radius: var(--radius-sm);
  background-color: var(--bg-color);
}

/* ─── Touch & Selection ──────────────────────────────────────────────────── */
a,
button,
label,
[onclick],
[role="button"] {
  user-select: none;
  -webkit-touch-callout: none;
}

img {
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  /* NOTE: do NOT set `pointer-events: auto` here. `auto` is already the default,
     and this blanket rule overrode `pointer-events: none` on hidden overlay
     parents (e.g. the closed product lightbox), leaving an invisible image
     sitting fixed in the middle of the viewport that swallowed taps and killed
     touch-scroll. It was covering 21% of the Add to Cart button. */
}

@media (max-width: 768px) {
  body {
    /* Prevent the fixed mobile bottom bar from overlapping content at the very bottom */
    padding-bottom: 70px;
  }
}

/* Global Select Options Styling - Override default blue highlight with black */
select option {
  background-color: var(--bg-color);
  color: var(--ink-900);
  padding: 8px 12px;
}

select option:hover,
select option:focus,
select option:active,
select option:checked {
  background-color: var(--ink-900) !important;
  background: var(--ink-900) !important;
  color: var(--bg-color) !important;
  cursor: pointer;
}

/* Inset shadow trick to override default blue selection color on Chrome/Edge/Firefox where supported */
select option:checked {
  box-shadow: 0 0 10px 100px var(--ink-900) inset !important;
  -webkit-box-shadow: 0 0 10px 100px var(--ink-900) inset !important;
  color: var(--bg-color) !important;
}

/* ─── Bootstrap Icons optical centering ───────────────────────────────────
   Body line-height is 1.6 which makes bi-* glyphs visually off-center inside
   flex buttons/circles. Setting line-height:1 removes the extra space above
   and below the glyph so flex align-items:center works correctly.           */
i[class*="bi-"] {
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}