@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* New Balmy Design Tokens */
    /* White & Light Grays */
    --color-white: #FFFFFF;
    --color-light-gray: #ECECEC;
    --color-light-gray-2: #E1E1E1;
    --color-light-gray-3: #C5C5C5;
    --color-light-gray-4: #B5B5B5;
    --color-light-gray-5: #AEAEAE;
    --color-light-gray-6: #9C9C9C;

    /* Medium Grays */
    --color-medium-gray: #707070;
    --color-medium-gray-2: #6B6B6B;

    /* Dark Grays & Blacks */
    --color-black: #000000;
    --color-black-2: #040000;
    --color-black-3: #020202;
    --color-black-4: #010101;
    --color-dark-gray: #242424;
    --color-dark-gray-2: #3A3A3A;
    --color-dark-gray-3: #292929;
    --color-dark-gray-4: #2A2A2A;
    --color-dark-gray-5: #090808;
    --color-dark-blue-gray: #16181D;
    --color-dark-blue-gray-2: #27292D;

    /* Reds */
    --color-red: #FF0000;
    --color-red-2: #F52626;
    --color-red-3: #E12626;
    --color-red-4: #F90000;
    --color-red-5: #EB001B;

    /* Blues */
    --color-blue: #1434CB;
    --color-blue-2: #259BD6;
    --color-blue-3: #146CB5;
    --color-blue-4: #2B2E69;
    --color-blue-5: #2A4B8F;
    --color-blue-6: #1D9BF0;

    /* Greens */
    --color-green: #84B740;
    --color-green-2: #5AFEAE;
    --color-green-3: #045C4D;

    /* Oranges & Yellows */
    --color-orange: #FF5F00;
    --color-orange-2: #F79E1B;
    --color-yellow: #F9C316;

    /* Purples */
    --color-purple: #75348A;
    --color-purple-2: #532D7B;
    --color-purple-3: #59529F;

    /* Browns/Golds */
    --color-gold: #C5992C;

    /* Original design tokens */
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 0 0% 0%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  html,
  body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  body {
    @apply bg-background text-foreground;
  }

  /* ─── Direction-aware typography ─── */

  /* RTL (Arabic) — heavier stroke fonts need lighter weight values */
  html.rtl body {
    font-family: var(--font-cairo), system-ui, sans-serif !important;
    line-height: 1.8;
    letter-spacing: 0;
    word-spacing: 0;
  }

  html.rtl {
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 400;
    --fw-semibold: 500;
    --fw-bold: 600;
    --fw-heavy: 700;
    --font-primary: var(--font-cairo), system-ui, sans-serif;
    --letter-spacing-base: 0;
    --line-height-base: 1.8;
    --line-height-heading: 1.5;
  }

  /* LTR (English) — standard weight values */
  /* Cairo included as fallback so Arabic backend text renders correctly in EN mode */
  html.ltr body {
    font-family: var(--font-inter), var(--font-cairo), system-ui, sans-serif !important;
    line-height: 1.5;
    letter-spacing: -0.01em;
  }

  html.ltr {
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-heavy: 800;
    --font-primary: var(--font-inter), system-ui, sans-serif;
    --letter-spacing-base: -0.01em;
    --line-height-base: 1.5;
    --line-height-heading: 1.2;
  }

  /* ─── Script-aware text utilities ─── */
  /* Use on elements that render backend Arabic text in LTR pages */
  .text-arabic {
    font-family: var(--font-cairo), var(--font-tajawal), system-ui, sans-serif !important;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0 !important;
    word-spacing: 0;
  }

  .text-arabic.fw-bold,
  .text-arabic strong,
  h1.text-arabic, h2.text-arabic, h3.text-arabic {
    font-weight: 600;
  }

  .text-latin {
    font-family: var(--font-inter), system-ui, sans-serif !important;
    line-height: 1.5;
    letter-spacing: -0.01em;
  }

  /* ─── Element-specific weight rules ─── */
  h1, h2 {
    font-weight: var(--fw-bold);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-base);
  }

  h3, h4 {
    font-weight: var(--fw-semibold);
  }

  nav a {
    font-weight: var(--fw-medium);
    letter-spacing: var(--letter-spacing-base);
  }

  p, li, td {
    font-weight: var(--fw-regular);
    line-height: var(--line-height-base);
  }

  button, .btn {
    font-weight: var(--fw-medium);
    letter-spacing: var(--letter-spacing-base);
  }

  /* Prices always render LTR */
  .price {
    font-weight: var(--fw-semibold);
    direction: ltr;
    unicode-bidi: embed;
  }
}


/* Icon styling fixes */
svg {
  fill: currentColor;
  color: currentColor;
}

/* Ensure lucide-react icons inherit color */
.lucide {
  color: currentColor !important;
  fill: none !important;
  stroke: currentColor !important;
}

/* Allow favourite heart to override the global fill:none rule */
.lucide[data-favourite-active="true"] {
  fill: #ef4444 !important;
  stroke: #ef4444 !important;
}

/* Ensure icons are visible */
.react-icons {
  color: inherit !important;
  opacity: 1 !important;
}

/* Fix transparent icons */
[class*="react-icons"] {
  opacity: 1 !important;
  color: currentColor !important;
  fill: currentColor !important;
}

/* Ensure proper icon colors */
.icon-gray-700 {
  color: #374151 !important;
}

.icon-white {
  color: white !important;
}

.icon-gray-600 {
  color: #4b5563 !important;
}

/* Specific icon fixes */
.text-xl {
  color: currentColor !important;
}

.text-gray-700 {
  color: #374151 !important;
}

.text-gray-600 {
  color: #4b5563 !important;
}

.text-white {
  color: white !important;
}

.rating-color {
  color: #fead20 !important;
}

/* Custom color utilities */

/* RTL and LTR text direction utilities */
.rtl {
  direction: rtl;
  text-align: right;
}

.ltr {
  direction: ltr;
  text-align: left;
}

/* RTL input and select styling */
.rtl input,
.rtl select {
  text-align: right;
}

.ltr input,
.ltr select {
  text-align: left;
}

/* RTL form layout support */
.rtl .grid {
  direction: rtl;
}

.rtl .space-y-6>*+* {
  margin-top: 1.5rem;
}

/* RTL button alignment */
.rtl .flex.justify-center {
  justify-content: center;
}

/* RTL select dropdown alignment */
.rtl [data-radix-popper-content-wrapper] {
  direction: rtl;
}

.bg-navy-blue-color {
  background-color: var(--navy-blue-color);
}

.text-orange-color {
  color: var(--orange-color);
}

.bg-orange-color {
  background-color: var(--orange-color);
}

/* RTL: Arabic font */
html.rtl body {
  font-family: var(--font-cairo), system-ui, sans-serif;
}

/* LTR: Latin font */
html.ltr body {
  font-family: var(--font-inter), system-ui, sans-serif;
}

.font-cairo {
  font-family: var(--font-cairo), system-ui, sans-serif;
}

.font-inter {
  font-family: var(--font-inter), system-ui, sans-serif;
}

.hero {
  width: 100%;
  aspect-ratio: 0.75/0.8;
  max-height: 85vh;
}

.hero img {
  object-fit: cover;
}

.swiper-slide .fade-item {
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.swiper-slide .fade-item {
  transition-delay: 0.4s;
}

.swiper-slide .fade-item.fade-item-1 {
  transition-delay: 0.5s;
}

.swiper-slide .fade-item.fade-item-2 {
  transition-delay: 0.6s;
}

.swiper-slide .fade-item.fade-item-3 {
  transition-delay: 0.7s;
}

.swiper-slide .fade-item.fade-item-4 {
  transition-delay: 0.8s;
}

.swiper-slide-active .fade-item {
  transform: translateY(0px);
  opacity: 1;
  visibility: visible;
}

.swiper-initialized {
  width: 100% !important;
}

.swiper-pagination-bullet {
  background-color: white !important;
  opacity: 0.9 !important;
}

.swiper-pagination-bullet-active {
  outline: 1px solid white !important;
  outline-offset: 5px !important;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  background-color: white !important;
  padding: 3px !important;
  margin-inline: 15px !important;
}

.swiper-pagination {
  display: flex !important;
  justify-content: center !important;
  bottom: 30px !important;
}

@media only screen and (max-width: 768px) {
  .swiper-pagination {
    bottom: 20px !important;
  }
}

.categories-carousel {
  position: relative !important;
}

.categories-carousel .swiper-wrapper {
  padding-block: 10px !important;
  padding-inline: 0 !important;
}

/* ryhal icon */
@font-face {
  font-family: "icomoon";
  src: url("/fonts/icomoon.eot?c3ysj7");
  src: url("/fonts/icomoon.eot?c3ysj7#iefix") format("embedded-opentype"),
    url("/fonts/icomoon.ttf?c3ysj7") format("truetype"),
    url("/fonts/icomoon.woff?c3ysj7") format("woff"),
    url("/fonts/icomoon.svg?c3ysj7#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-rial:before {
  content: "\e900";
  font-family: "IcoMoon";
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin-inline: 10px !important;
}

.swiper-button-prev:after,
.swiper-button-next:after {
  font-size: 18px !important;
  color: black !important;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background-color: rgba(211, 211, 211, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
}

.categories-carousel .swiper-autoheight .swiper-wrapper {
  padding-top: 0 !important;
}

/* English (LTR) */
.categories-carousel.ltr .swiper-button-next {
  left: auto !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
}

.categories-carousel.ltr .swiper-button-prev {
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  right: auto !important;
  z-index: 10 !important;
}

/* Arabic (RTL) */
.categories-carousel.rtl .swiper-button-next {
  right: auto !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
}

.categories-carousel.rtl .swiper-button-prev {
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  left: auto !important;
  z-index: 10 !important;
}

@keyframes heartbeat {

  0%,
  100% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.2);
  }

  50% {
    transform: scale(1);
  }

  75% {
    transform: scale(1.2);
  }
}

.animate-heartbeat {
  animation: heartbeat 0.8s ease-in-out infinite;
}

/* Cart badge bounce — triggered by key={cartCount} remount */
@keyframes badge-bounce {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }

  50% {
    transform: scale(1.4);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Disable all custom animations for reduced-motion users */
@media (prefers-reduced-motion: reduce) {

  .animate-heartbeat,
  .animate-\[badge-bounce_0\.3s_ease-out\] {
    animation: none !important;
  }
}

.data-\[state\=active\]\:bg-background[data-state="active"] {
  background-color: transparent !important;
  color: rgb(56 102 223) !important;
  padding-block: 10px !important;
  border-radius: 0px !important;
  border-bottom: 2px solid rgb(56 102 223) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

@media screen and (max-width: 768px) {
  .data-\[state\=active\]\:bg-background[data-state="active"] {
    padding-block: 5px !important;
  }
}

/* Input base styles removed to prevent conflicts with component-level styles */
/*
form input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
textarea {
  border: 1.5px solid rgba(156, 163, 175, 0.4) !important;
  outline: none !important;
  outline-offset: 0 !important;
  border-radius: 6px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background-color: transparent !important;
}
*/
/* ... other input styles commented out ... */