/* ============================================================
   SmartShopper Enterprise — Design Tokens
   Mirrors the original globals.css custom properties exactly.
   ============================================================ */
:root {
  --primary-dark: #075B32;
  --primary: #0B7A43;
  --primary-light: #16A35D;
  --gold: #D7A51E;
  --gold-dark: #9C6A08;
  --offer-red: #E12D39;
  --background: #F6F7F8;
  --card: #FFFFFF;
  --text-primary: #17212B;
  --text-secondary: #667085;
  --border: #E4E7EC;
  --radius: 16px;
  --radius-lg: 24px;
  --header-h: 4rem;
}

html.dark {
  --background: #0D1512;
  --card: #14201A;
  --text-primary: #F2F4F3;
  --text-secondary: #8B9D93;
  --border: #1E2D25;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--background);
  color: var(--text-primary);
  font-family: 'Cairo', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  transition: background-color .3s ease, color .3s ease;
  -webkit-font-smoothing: antialiased;
  direction: rtl;
  min-height: 100vh;
}

[dir="ltr"] { direction: ltr; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 100px; }
html.dark ::-webkit-scrollbar-thumb { background: #374151; }

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

::selection { background: rgba(11,122,67,.2); color: var(--primary); }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.line-clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.container-xl { max-width: 1520px; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 1024px) { .container-xl { padding-inline: 1.5rem; } }

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