/* ============================================================
   EAGLE EYE CCTV — MAIN CSS DESIGN SYSTEM
   Version: 1.0 | 2026
   ============================================================ */

/* ============================================================
   1. GOOGLE FONTS IMPORT
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* ============================================================
   2. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================================ */
:root {

  /* ---- Brand Colors (Matches Reference Image) ---- */
  --color-primary:          #2563EB;
  --color-primary-dark:     #1D4ED8;
  --color-primary-hover:    #3B82F6;
  --color-primary-light:    #EFF6FF;
  --color-primary-lighter:  #F0F7FF;
  --color-accent:           #F59E0B;
  --color-accent-light:     rgba(245, 158, 11, 0.12);
  --color-secondary:        #EF4444;
  --color-secondary-light:  rgba(239, 68, 68, 0.08);
  --color-silver:           #6B7280;
  --color-silver-dark:      #4B5563;

  /* ---- Neutrals (cool slate) ---- */
  --color-white:    #FFFFFF;
  --color-gray-50:  #F8FAFC;
  --color-gray-100: #F1F5F9;
  --color-gray-200: #E4E8F0;
  --color-gray-300: #D3D9E3;
  --color-gray-400: #A4ADBD;
  --color-gray-500: #78849A;
  --color-gray-600: #57647A;
  --color-gray-700: #3D4759;
  --color-gray-800: #232B3D;
  --color-gray-900: #0D1220;

  /* ---- Text Colors ---- */
  --color-text-primary:   #0D1526;
  --color-text-secondary: #4C5670;
  --color-text-light:     #7C88A0;
  --color-text-inverse:   #FFFFFF;
  --color-text-muted:     #97A2B8;

  /* ---- Background ---- */
  --bg-body:    #F6F7FB;
  --bg-surface: #FFFFFF;
  --bg-elevated:#FFFFFF;
  --bg-card:    #FFFFFF;
  --bg-glass:   rgba(255, 255, 255, 0.92);
  --bg-overlay: rgba(6, 9, 20, 0.6);
  --bg-overlay-light: rgba(6, 9, 20, 0.35);
  --color-success:        #17845A;
  --color-success-light:  #E7F7F0;
  --color-success-border: #A6E4CB;
  --color-error:          #D93B4A;
  --color-error-light:    #FDECEE;
  --color-error-border:   #F3AEB6;
  --color-warning:        #C9750E;
  --color-warning-light:  #FEF6E7;
  --color-warning-border: #F6D999;
  --color-info:           #1B5EAE;
  --color-info-light:     #E9F2FC;
  --color-info-border:    #A7CDF0;

  /* ---- WhatsApp ---- */
  --color-whatsapp:       #25D366;
  --color-whatsapp-dark:  #128C7E;

  /* ---- Shadows (soft, cool-tinted) ---- */
  --shadow-xs: 0 1px 2px rgba(13, 21, 38, 0.04);
  --shadow-sm: 0 2px 6px rgba(13, 21, 38, 0.06);
  --shadow-md: 0 8px 24px rgba(13, 21, 38, 0.08);
  --shadow-lg: 0 16px 40px rgba(13, 21, 38, 0.10);
  --shadow-xl: 0 28px 64px rgba(13, 21, 38, 0.14);
  --shadow-primary:  0 8px 24px rgba(46, 63, 232, 0.22);
  --shadow-primary-lg: 0 14px 40px rgba(46, 63, 232, 0.28);
  --shadow-glow:     0 0 24px rgba(0, 216, 224, 0.25);
  --shadow-inset: inset 0 2px 4px rgba(13, 21, 38, 0.06);
  --shadow-card:  0 1px 2px rgba(13, 21, 38, 0.04), 0 6px 20px rgba(13, 21, 38, 0.06);

  /* ---- Border Radius (softer, more modern) ---- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  36px;
  --radius-full: 9999px;

  /* ---- Spacing Scale (4px base unit) ---- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ---- Typography ---- */
  --font-arabic:  'Cairo', 'Segoe UI Arabic', Arial, sans-serif;
  --font-english: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif;
  --font-brand:   'Plus Jakarta Sans', 'Cairo', sans-serif;
  --font-mono:    'Courier New', Courier, monospace;
  --font-base:    var(--font-arabic);

  /* Font Sizes */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  36px;
  --text-5xl:  48px;
  --text-6xl:  60px;

  /* Font Weights */
  --font-light:     300;
  --font-regular:   400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;
  --font-black:     900;

  /* Line Heights */
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   2;

  /* Letter Spacing */
  --tracking-tight:  -0.025em;
  --tracking-normal: 0;
  --tracking-wide:   0.025em;
  --tracking-wider:  0.05em;

  /* ---- Transitions ---- */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Z-index Scale ---- */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-floating:  50;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-top:      600;
  --z-fab:      150;

  /* ---- Container Widths ---- */
  --container-xs:  480px;
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1536px;

  /* ---- Header ---- */
  --header-top:    36px;
  --header-main:   72px;
  --header-total:  108px;

  /* ---- Border Widths ---- */
  --border-thin:   1px;
  --border-medium: 2px;
  --border-thick:  4px;

  /* ---- Common border ---- */
  --border-default: 1px solid rgba(255, 255, 255, 0.06);
  --border-subtle:  1px solid rgba(255, 255, 255, 0.08);
  --border-glow:    1px solid rgba(46, 63, 232, 0.25);
  --border-focus:   2px solid var(--color-primary);
}

/* ============================================================
   3. CSS RESET & NORMALIZE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
  scroll-padding-top: var(--header-total);
}

body {
  font-family: var(--font-arabic);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background-color: var(--bg-body);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

[lang='en'] body,
[lang='en-US'] body,
.lang-en {
  font-family: var(--font-english);
}

main { min-height: 60vh; }

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

img {
  image-rendering: -webkit-optimize-contrast;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  line-height: inherit;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

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

a:hover {
  color: var(--color-primary-dark);
}

a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

ul, ol { list-style: none; }

table { border-collapse: collapse; width: 100%; }

hr {
  border: none;
  border-top: var(--border-default);
  margin: var(--space-6) 0;
  opacity: 1;
}

blockquote {
  border-inline-start: 4px solid var(--color-primary);
  padding-inline-start: var(--space-4);
  padding-block: var(--space-2);
  color: var(--color-text-secondary);
  font-style: italic;
  background: var(--color-primary-light);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

pre {
  overflow-x: auto;
  background: var(--color-gray-100);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  border: var(--border-default);
}

code {
  background: var(--color-gray-100);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  color: var(--color-error);
}

svg { overflow: hidden; flex-shrink: 0; }

fieldset { border: var(--border-default); border-radius: var(--radius-sm); padding: var(--space-4); }
legend { padding-inline: var(--space-2); font-weight: var(--font-semibold); }

summary { cursor: pointer; font-weight: var(--font-medium); }
details[open] summary { margin-bottom: var(--space-3); }

/* ============================================================
   4. BASE TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

p {
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

p:last-child { margin-bottom: 0; }

strong, b { font-weight: var(--font-bold); }
em, i     { font-style: italic; }
small     { font-size: var(--text-sm); }
mark      { background: var(--color-warning-light); color: inherit; padding: 1px 4px; border-radius: 2px; }
del       { color: var(--color-text-muted); text-decoration: line-through; }
ins       { color: var(--color-success); text-decoration: underline; }
sup       { font-size: 0.75em; vertical-align: super; }
sub       { font-size: 0.75em; vertical-align: sub; }
abbr[title] { text-decoration: underline dotted; cursor: help; }

/* Responsive Typography */
@media (max-width: 1024px) {
  h1 { font-size: var(--text-4xl); }
}
@media (max-width: 768px) {
  h1 { font-size: calc(var(--text-3xl) + 4px); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-2xl); }
  h4 { font-size: var(--text-xl); }
  h5 { font-size: var(--text-lg); }
  h6 { font-size: var(--text-base); }
}
@media (max-width: 480px) {
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }
}

/* ============================================================
   5. LAYOUT — CONTAINER & GRID
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (min-width: 640px)  { .container { padding-inline: var(--space-6); } }
@media (min-width: 1024px) { .container { padding-inline: var(--space-8); } }
@media (min-width: 1280px) { .container { padding-inline: var(--space-10); } }
@media (min-width: 1536px) { .container { padding-inline: var(--space-12); } }

.container-sm  { max-width: var(--container-sm);  margin-inline: auto; padding-inline: var(--space-4); }
.container-md  { max-width: var(--container-md);  margin-inline: auto; padding-inline: var(--space-4); }
.container-lg  { max-width: var(--container-lg);  margin-inline: auto; padding-inline: var(--space-4); }
.container-xl  { max-width: var(--container-xl);  margin-inline: auto; padding-inline: var(--space-4); }
.container-2xl { max-width: var(--container-2xl); margin-inline: auto; padding-inline: var(--space-4); }
.container-full{ max-width: 100%; padding-inline: var(--space-4); }

/* Grid System */
.grid { display: grid; gap: var(--space-6); }

.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

.grid-cols-auto-sm { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
.grid-cols-auto-md { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.grid-cols-auto-lg { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.grid-cols-auto-xl { grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); }

.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-full   { grid-column: 1 / -1; }

.row-span-2 { grid-row: span 2; }
.row-span-3 { grid-row: span 3; }

/* Gaps */
.gap-0  { gap: 0; }
.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-5  { gap: var(--space-5); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }
.gap-10 { gap: var(--space-10); }
.gap-12 { gap: var(--space-12); }

.gap-x-4 { column-gap: var(--space-4); }
.gap-x-6 { column-gap: var(--space-6); }
.gap-x-8 { column-gap: var(--space-8); }
.gap-y-4 { row-gap: var(--space-4); }
.gap-y-6 { row-gap: var(--space-6); }
.gap-y-8 { row-gap: var(--space-8); }

/* Flex Utilities */
.flex          { display: flex; }
.inline-flex   { display: inline-flex; }
.flex-col      { flex-direction: column; }
.flex-col-rev  { flex-direction: column-reverse; }
.flex-row      { flex-direction: row; }
.flex-row-rev  { flex-direction: row-reverse; }
.flex-wrap     { flex-wrap: wrap; }
.flex-nowrap   { flex-wrap: nowrap; }
.flex-1        { flex: 1 1 0%; }
.flex-auto     { flex: 1 1 auto; }
.flex-none     { flex: none; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-grow     { flex-grow: 1; }

.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.items-center   { align-items: center; }
.items-stretch  { align-items: stretch; }
.items-baseline { align-items: baseline; }

.justify-start   { justify-content: flex-start; }
.justify-end     { justify-content: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }
.justify-evenly  { justify-content: space-evenly; }

.self-auto   { align-self: auto; }
.self-start  { align-self: flex-start; }
.self-end    { align-self: flex-end; }
.self-center { align-self: center; }
.self-stretch{ align-self: stretch; }

/* ============================================================
   6. UTILITY CLASSES
   ============================================================ */

/* --- Display --- */
.block        { display: block; }
.inline-block { display: inline-block; }
.inline       { display: inline; }
.grid-display { display: grid; }
.hidden       { display: none !important; }
.invisible    { visibility: hidden; }

.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;
}

/* --- Position --- */
.static   { position: static; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }
.inset-0  { inset: 0; }
.top-0    { top: 0; }
.bottom-0 { bottom: 0; }
.start-0  { inset-inline-start: 0; }
.end-0    { inset-inline-end: 0; }

/* --- Overflow --- */
.overflow-hidden   { overflow: hidden; }
.overflow-auto     { overflow: auto; }
.overflow-scroll   { overflow: scroll; }
.overflow-x-auto   { overflow-x: auto; }
.overflow-y-auto   { overflow-y: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-hidden { overflow-y: hidden; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whitespace-nowrap  { white-space: nowrap; }
.whitespace-normal  { white-space: normal; }
.break-words        { overflow-wrap: break-word; word-break: break-word; }
.break-all          { word-break: break-all; }

.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.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; }
.line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* --- Sizing --- */
.w-full    { width: 100%; }
.w-auto    { width: auto; }
.w-screen  { width: 100vw; }
.w-fit     { width: fit-content; }
.h-full    { height: 100%; }
.h-screen  { height: 100vh; }
.h-auto    { height: auto; }
.h-fit     { height: fit-content; }
.min-h-0   { min-height: 0; }
.min-h-screen { min-height: 100vh; }
.max-w-full   { max-width: 100%; }
.max-w-none   { max-width: none; }

/* --- Text Alignment --- */
.text-start   { text-align: start; }
.text-end     { text-align: end; }
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }
.text-justify { text-align: justify; }

/* --- Font Sizes --- */
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }
.text-4xl  { font-size: var(--text-4xl); }
.text-5xl  { font-size: var(--text-5xl); }
.text-6xl  { font-size: var(--text-6xl); }

/* --- Font Weights --- */
.font-light     { font-weight: var(--font-light); }
.font-regular   { font-weight: var(--font-regular); }
.font-medium    { font-weight: var(--font-medium); }
.font-semibold  { font-weight: var(--font-semibold); }
.font-bold      { font-weight: var(--font-bold); }
.font-extrabold { font-weight: var(--font-extrabold); }
.font-black     { font-weight: var(--font-black); }

/* --- Line Heights --- */
.leading-tight   { line-height: var(--leading-tight); }
.leading-snug    { line-height: var(--leading-snug); }
.leading-normal  { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }
.leading-loose   { line-height: var(--leading-loose); }

/* --- Text Colors --- */
.text-primary         { color: var(--color-primary); }
.text-primary-dark    { color: var(--color-primary-dark); }
.text-accent          { color: var(--color-accent); }
.text-secondary       { color: var(--color-text-secondary); }
.text-light-color     { color: var(--color-text-light); }
.text-white           { color: var(--color-white); }
.text-success         { color: var(--color-success); }
.text-error           { color: var(--color-error); }
.text-warning         { color: var(--color-warning); }
.text-muted           { color: var(--color-text-muted); }
.text-body            { color: var(--color-text-primary); }

/* --- Background Colors --- */
.bg-white         { background-color: var(--color-white); }
.bg-body          { background-color: var(--bg-body); }
.bg-gray-50       { background-color: var(--color-gray-50); }
.bg-gray-100      { background-color: var(--color-gray-100); }
.bg-gray-200      { background-color: var(--color-gray-200); }
.bg-primary       { background-color: var(--color-primary); }
.bg-primary-dark  { background-color: var(--color-primary-dark); }
.bg-primary-light { background-color: var(--color-primary-light); }
.bg-accent        { background-color: var(--color-accent); }
.bg-success       { background-color: var(--color-success); }
.bg-success-light { background-color: var(--color-success-light); }
.bg-error         { background-color: var(--color-error); }
.bg-error-light   { background-color: var(--color-error-light); }
.bg-warning-light { background-color: var(--color-warning-light); }

/* --- Gradients --- */
.bg-gradient-primary {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-accent) 100%);
}
.bg-gradient-light {
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-gray-50) 100%);
}
.bg-gradient-blue {
  background: linear-gradient(135deg, #0D47A1 0%, #1565C0 40%, #0288D1 100%);
}

/* --- Borders --- */
.border        { border: var(--border-default); }
.border-t      { border-top: var(--border-default); }
.border-b      { border-bottom: var(--border-default); }
.border-s      { border-inline-start: var(--border-default); }
.border-e      { border-inline-end: var(--border-default); }
.border-primary   { border-color: var(--color-primary) !important; }
.border-error     { border-color: var(--color-error) !important; }
.border-success   { border-color: var(--color-success) !important; }
.border-none      { border: none !important; }
.border-0         { border-width: 0; }
.border-2         { border-width: 2px; }

/* --- Border Radius --- */
.rounded-none { border-radius: 0; }
.rounded-xs   { border-radius: var(--radius-xs); }
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-2xl  { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }
.rounded-t-md { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
.rounded-b-md { border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }

/* --- Shadows --- */
.shadow-xs   { box-shadow: var(--shadow-xs); }
.shadow-sm   { box-shadow: var(--shadow-sm); }
.shadow-md   { box-shadow: var(--shadow-md); }
.shadow-lg   { box-shadow: var(--shadow-lg); }
.shadow-xl   { box-shadow: var(--shadow-xl); }
.shadow-none { box-shadow: none !important; }
.shadow-primary { box-shadow: var(--shadow-primary); }

/* --- Opacity --- */
.opacity-0   { opacity: 0; }
.opacity-25  { opacity: 0.25; }
.opacity-50  { opacity: 0.5; }
.opacity-75  { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* --- Pointer & Cursor --- */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }
.cursor-pointer  { cursor: pointer; }
.cursor-default  { cursor: default; }
.cursor-text     { cursor: text; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-grab     { cursor: grab; }
.select-none     { user-select: none; }
.select-text     { user-select: text; }
.select-all      { user-select: all; }

/* --- Margins --- */
.m-auto  { margin: auto; }
.mx-auto { margin-inline: auto; }
.my-auto { margin-block: auto; }
.ms-auto { margin-inline-start: auto; }
.me-auto { margin-inline-end: auto; }

.m-0  { margin: 0; }
.m-1  { margin: var(--space-1); }
.m-2  { margin: var(--space-2); }
.m-3  { margin: var(--space-3); }
.m-4  { margin: var(--space-4); }
.m-6  { margin: var(--space-6); }
.m-8  { margin: var(--space-8); }

.mt-0  { margin-top: 0; }
.mt-1  { margin-top: var(--space-1); }
.mt-2  { margin-top: var(--space-2); }
.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-5  { margin-top: var(--space-5); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }

.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: var(--space-1); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-3  { margin-bottom: var(--space-3); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-5  { margin-bottom: var(--space-5); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }

.ms-0  { margin-inline-start: 0; }
.ms-1  { margin-inline-start: var(--space-1); }
.ms-2  { margin-inline-start: var(--space-2); }
.ms-3  { margin-inline-start: var(--space-3); }
.ms-4  { margin-inline-start: var(--space-4); }
.ms-6  { margin-inline-start: var(--space-6); }
.ms-8  { margin-inline-start: var(--space-8); }

.me-0  { margin-inline-end: 0; }
.me-1  { margin-inline-end: var(--space-1); }
.me-2  { margin-inline-end: var(--space-2); }
.me-3  { margin-inline-end: var(--space-3); }
.me-4  { margin-inline-end: var(--space-4); }
.me-6  { margin-inline-end: var(--space-6); }
.me-8  { margin-inline-end: var(--space-8); }

.mx-0  { margin-inline: 0; }
.mx-2  { margin-inline: var(--space-2); }
.mx-4  { margin-inline: var(--space-4); }
.mx-6  { margin-inline: var(--space-6); }
.my-2  { margin-block: var(--space-2); }
.my-4  { margin-block: var(--space-4); }
.my-6  { margin-block: var(--space-6); }
.my-8  { margin-block: var(--space-8); }

/* --- Paddings --- */
.p-0  { padding: 0; }
.p-1  { padding: var(--space-1); }
.p-2  { padding: var(--space-2); }
.p-3  { padding: var(--space-3); }
.p-4  { padding: var(--space-4); }
.p-5  { padding: var(--space-5); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }
.p-10 { padding: var(--space-10); }
.p-12 { padding: var(--space-12); }

.px-0  { padding-inline: 0; }
.px-2  { padding-inline: var(--space-2); }
.px-3  { padding-inline: var(--space-3); }
.px-4  { padding-inline: var(--space-4); }
.px-5  { padding-inline: var(--space-5); }
.px-6  { padding-inline: var(--space-6); }
.px-8  { padding-inline: var(--space-8); }
.px-10 { padding-inline: var(--space-10); }

.py-0  { padding-block: 0; }
.py-1  { padding-block: var(--space-1); }
.py-2  { padding-block: var(--space-2); }
.py-3  { padding-block: var(--space-3); }
.py-4  { padding-block: var(--space-4); }
.py-5  { padding-block: var(--space-5); }
.py-6  { padding-block: var(--space-6); }
.py-8  { padding-block: var(--space-8); }
.py-10 { padding-block: var(--space-10); }
.py-12 { padding-block: var(--space-12); }
.py-16 { padding-block: var(--space-16); }
.py-20 { padding-block: var(--space-20); }
.py-24 { padding-block: var(--space-24); }

.pt-0  { padding-top: 0; }
.pt-2  { padding-top: var(--space-2); }
.pt-4  { padding-top: var(--space-4); }
.pt-6  { padding-top: var(--space-6); }
.pt-8  { padding-top: var(--space-8); }
.pb-0  { padding-bottom: 0; }
.pb-2  { padding-bottom: var(--space-2); }
.pb-4  { padding-bottom: var(--space-4); }
.pb-6  { padding-bottom: var(--space-6); }
.pb-8  { padding-bottom: var(--space-8); }
.ps-0  { padding-inline-start: 0; }
.ps-4  { padding-inline-start: var(--space-4); }
.ps-6  { padding-inline-start: var(--space-6); }
.pe-0  { padding-inline-end: 0; }
.pe-4  { padding-inline-end: var(--space-4); }
.pe-6  { padding-inline-end: var(--space-6); }

/* --- Section Spacing --- */
.section    { padding-block: var(--space-20); }
.section-sm { padding-block: var(--space-12); }
.section-lg { padding-block: var(--space-24); }
.section-xl { padding-block: var(--space-32); }

/* --- Object Fit --- */
.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-fill    { object-fit: fill; }
.object-center  { object-position: center; }
.object-top     { object-position: top; }

/* --- Aspect Ratios --- */
.aspect-square  { aspect-ratio: 1 / 1; }
.aspect-video   { aspect-ratio: 16 / 9; }
.aspect-4-3     { aspect-ratio: 4 / 3; }
.aspect-3-2     { aspect-ratio: 3 / 2; }
.aspect-3-4     { aspect-ratio: 3 / 4; }

/* --- List Styles --- */
.list-disc { list-style: disc; padding-inline-start: var(--space-5); }
.list-decimal { list-style: decimal; padding-inline-start: var(--space-5); }
.list-none { list-style: none; }

/* ============================================================
   7. ANIMATIONS & KEYFRAMES
   ============================================================ */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-100%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideOutRight {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(100%); }
}

@keyframes slideOutLeft {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-100%); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.06); opacity: 0.9; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }
  40%           { transform: scale(1); }
}

@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes marqueeRtl {
  0%   { transform: translateX(0); }
  100% { transform: translateX(50%); }
}

@keyframes pulseRing {
  0%       { transform: scale(0.85); opacity: 0.8; }
  80%, 100% { transform: scale(2.2); opacity: 0; }
}

@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes progressFill {
  from { width: 0; }
  to   { width: var(--progress-width, 100%); }
}

/* Animation utility classes */
.animate-fade-in    { animation: fadeIn var(--transition-slow) ease both; }
.animate-fade-out   { animation: fadeOut var(--transition-base) ease both; }
.animate-slide-up   { animation: slideUp var(--transition-slow) ease both; }
.animate-slide-down { animation: slideDown var(--transition-base) ease both; }
.animate-scale-in   { animation: scaleIn var(--transition-base) ease both; }
.animate-spin       { animation: spin 0.75s linear infinite; }
.animate-pulse      { animation: pulse 2s ease-in-out infinite; }

.delay-100  { animation-delay: 0.1s; }
.delay-150  { animation-delay: 0.15s; }
.delay-200  { animation-delay: 0.2s; }
.delay-300  { animation-delay: 0.3s; }
.delay-400  { animation-delay: 0.4s; }
.delay-500  { animation-delay: 0.5s; }
.delay-600  { animation-delay: 0.6s; }
.delay-700  { animation-delay: 0.7s; }
.delay-800  { animation-delay: 0.8s; }

/* Scroll-triggered reveal (JS adds .is-visible class) */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   8. SKELETON LOADING
   ============================================================ */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-gray-200) 25%,
    var(--color-gray-100) 50%,
    var(--color-gray-200) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}

.skeleton * { visibility: hidden; }

.skeleton-text {
  height: 1em;
  border-radius: var(--radius-xs);
  margin-bottom: var(--space-2);
  display: block;
}

.skeleton-text.w-3-4 { width: 75%; }
.skeleton-text.w-1-2 { width: 50%; }
.skeleton-text.w-2-3 { width: 66%; }

.skeleton-title {
  height: 1.5em;
  width: 55%;
  border-radius: var(--radius-xs);
  margin-bottom: var(--space-3);
  display: block;
}

.skeleton-image {
  width: 100%;
  height: 200px;
  border-radius: var(--radius-md);
  display: block;
}

.skeleton-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-white);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  display: block;
  flex-shrink: 0;
}

.skeleton-btn {
  height: 44px;
  width: 120px;
  border-radius: var(--radius-sm);
  display: block;
}

/* ============================================================
   9. CUSTOM SCROLLBAR
   ============================================================ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-gray-100);
}

::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: var(--radius-full);
  transition: background var(--transition-fast);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

::-webkit-scrollbar-corner {
  background: var(--color-gray-100);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-300) var(--color-gray-100);
}

/* ============================================================
   10. LOADING STATES
   ============================================================ */
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: currentColor;
  border-radius: var(--radius-full);
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

.spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.spinner-md { width: 28px; height: 28px; border-width: 3px; }
.spinner-lg { width: 44px; height: 44px; border-width: 3px; }
.spinner-xl { width: 60px; height: 60px; border-width: 4px; }

.spinner-primary {
  border-color: var(--color-primary-light);
  border-top-color: var(--color-primary);
}

.spinner-white {
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
}

.page-loader {
  position: fixed;
  inset: 0;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease, visibility 0.5s;
}

.page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-loader__logo {
  width: 120px;
  margin-bottom: var(--space-6);
}

.loading-dots {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.loading-dots span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  animation: bounce 1.4s ease-in-out infinite both;
}

.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
.loading-dots span:nth-child(3) { animation-delay: 0s; }

.loading-dots.dots-sm span { width: 5px; height: 5px; }
.loading-dots.dots-white span { background: #fff; }

/* ============================================================
   11. FOCUS & ACCESSIBILITY
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.focus-ring:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.25);
}

/* ============================================================
   12. DIVIDERS & DECORATIVE
   ============================================================ */
.divider {
  width: 56px;
  height: 4px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  margin: var(--space-4) auto;
}

.divider-start { margin-inline-start: 0; }
.divider-end   { margin-inline-end: 0; }

.divider-gradient {
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}

.text-gradient {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   13. HOVER EFFECTS
   ============================================================ */
.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.hover-scale {
  transition: transform var(--transition-base);
}

.hover-scale:hover {
  transform: scale(1.02);
}

.hover-shadow {
  transition: box-shadow var(--transition-base);
}

.hover-shadow:hover {
  box-shadow: var(--shadow-xl);
}

.hover-primary:hover {
  color: var(--color-white);
  background-color: var(--color-primary);
}

/* ============================================================
   14. RESPONSIVE BREAKPOINT SHOW/HIDE
   ============================================================ */

/* xs only (< 480px) */
@media (min-width: 480px) { .show-xs-only { display: none !important; } }
@media (max-width: 479px) { .hide-xs      { display: none !important; } }

/* sm (< 640px) */
@media (min-width: 640px) { .show-sm-only { display: none !important; } }
@media (max-width: 639px) { .hide-sm      { display: none !important; } }

/* md (< 768px) */
@media (min-width: 768px) { .show-md-only { display: none !important; } }
@media (max-width: 767px) { .hide-md      { display: none !important; } }

/* lg (< 1024px) */
@media (min-width: 1024px) { .hide-lg { display: none !important; } }
@media (max-width: 1023px) { .show-lg-only { display: none !important; } }

/* xl (< 1280px) */
@media (min-width: 1280px) { .hide-xl { display: none !important; } }
@media (max-width: 1279px) { .show-xl-only { display: none !important; } }

/* Responsive grid overrides */
@media (max-width: 1279px) {
  .grid-cols-4 { grid-template-columns: repeat(3, 1fr); }
  .grid-cols-5 { grid-template-columns: repeat(3, 1fr); }
  .grid-cols-6 { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1023px) {
  .grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-5 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-6 { grid-template-columns: repeat(3, 1fr); }
  .col-span-2  { grid-column: span 1; }
  .col-span-3  { grid-column: span 2; }
  .col-span-4  { grid-column: span 2; }
  .section     { padding-block: var(--space-16); }
  .section-lg  { padding-block: var(--space-20); }
}

@media (max-width: 767px) {
  .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-6 { grid-template-columns: repeat(3, 1fr); }
  .col-span-3  { grid-column: span 1; }
  .col-span-4  { grid-column: span 1; }
  .gap-6       { gap: var(--space-4); }
  .gap-8       { gap: var(--space-6); }
  .section     { padding-block: var(--space-12); }
  .section-lg  { padding-block: var(--space-16); }
}

@media (max-width: 479px) {
  .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-3 { grid-template-columns: 1fr; }
  .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-6 { grid-template-columns: repeat(2, 1fr); }
  .gap-4       { gap: var(--space-3); }
  .gap-6       { gap: var(--space-4); }
  .section     { padding-block: var(--space-10); }
  .section-sm  { padding-block: var(--space-8); }
}

@media (min-width: 2560px) {
  .container { max-width: 2200px; }
  :root {
    --text-base: 18px;
    --text-5xl: 56px;
    --text-6xl: 72px;
  }
}

/* ============================================================
   14b. EXTRA UTILITIES (templates)
   ============================================================ */
.text-gray-500 { color: var(--color-gray-500); }
.text-gray-600 { color: var(--color-gray-600); }
.text-gray-700 { color: var(--color-gray-700); }
.text-gray-800 { color: var(--color-gray-800); }
.text-blue-500 { color: #3b82f6; }
.text-red-500  { color: #ef4444; }

.border-gray-100 { border-color: var(--color-gray-100) !important; }
.border-gray-200 { border-color: var(--color-gray-200) !important; }

.bg-blue-50  { background-color: #eff6ff; }
.bg-red-50   { background-color: #fef2f2; }

.w-12 { width: 3rem; }
.h-12 { height: 3rem; }
.w-20 { width: 5rem; }
.h-20 { height: 5rem; }

.top-24 { top: 6rem; }

.font-mono { font-family: var(--font-mono); }

.transition-colors { transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast); }

.space-y-1 > * + * { margin-top: var(--space-1); }
.space-y-6 > * + * { margin-top: var(--space-6); }

.divide-y > * + * { border-top: 1px solid var(--color-gray-200); }
.divide-gray-100 > * + * { border-color: var(--color-gray-100); }

.max-w-2xl { max-width: 42rem; }

.hover\:bg-gray-50:hover { background-color: var(--color-gray-50); }
.hover\:text-primary:hover { color: var(--color-primary); }
.hover\:bg-error\/10:hover { background-color: rgba(217, 59, 74, 0.1); }

@media (min-width: 640px) {
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:col-span-1 { grid-column: span 1; }
  .md\:col-span-3 { grid-column: span 3; }
}

@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
  }

  a[href]::after { content: ' (' attr(href) ')'; }
  abbr[title]::after { content: ' (' attr(title) ')'; }
  a[href^='#']::after,
  a[href^='javascript:']::after { content: ''; }

  pre, blockquote { border: 1px solid #ccc; page-break-inside: avoid; }
  pre { white-space: pre-wrap !important; }

  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }

  .header,
  .footer,
  .nav-mobile,
  .cart-sidebar,
  .whatsapp-fab,
  .toast-container,
  .no-print,
  .header-top,
  .filter-sidebar,
  .btn { display: none !important; }

  .product-card { break-inside: avoid; }

  @page {
    margin: 1.5cm;
  }
}

/* ============================================================
   16. MISCELLANEOUS HELPERS
   ============================================================ */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.transition-all   { transition: all var(--transition-base); }
.transition-fast  { transition: all var(--transition-fast); }
.transition-slow  { transition: all var(--transition-slow); }
.transition-none  { transition: none !important; }
.transition-color { transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast); }

.z-0        { z-index: 0; }
.z-10       { z-index: 10; }
.z-20       { z-index: 20; }
.z-dropdown { z-index: var(--z-dropdown); }
.z-sticky   { z-index: var(--z-sticky); }
.z-modal    { z-index: var(--z-modal); }
.z-toast    { z-index: var(--z-toast); }
.z-fab      { z-index: var(--z-fab); }

.not-selectable { user-select: none; }

/* Overlay */
.overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  z-index: var(--z-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* Backdrop blur support */
@supports (backdrop-filter: blur(8px)) {
  .backdrop-blur {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

/* ============================================================
   END OF main.css
   ============================================================ */