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

/* ================================================ */
/*  GLOBAL: remove all bold text across the site    */
/*  (keep icons / svgs unaffected)                  */
/* ================================================ */
*,
*::before,
*::after {
  font-weight: 400 !important;
}
strong,
b,
th,
h1, h2, h3, h4, h5, h6,
.font-bold,
.font-semibold,
.font-extrabold,
.font-black,
.font-medium {
  font-weight: 400 !important;
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222 47% 11%;
    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;
    --popover: 0 0% 100%;
    --popover-foreground: 222 47% 11%;
    --primary: 148 80% 24%;
    --primary-foreground: 0 0% 100%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222 47% 11%;
    --muted: 210 40% 96%;
    --muted-foreground: 215 16% 47%;
    --accent: 48 100% 48%;
    --accent-foreground: 222 47% 11%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;
    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 148 80% 24%;
    --radius: 0.75rem;
  }

  * {
    @apply border-border;
  }
  html, body {
    @apply bg-background text-foreground;
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 12.6px; /* 90% of 14px — body default */
    line-height: 1.6;
  }

  /* -------------------------------------------------------------------------
   * GLOBAL SCROLL BEHAVIOUR
   *
   * 1. `html` / `body` must own the page scroll — NO inner container is
   *    allowed to trap the wheel. This prevents the double-scrollbar bug
   *    seen on long-form pages (Privacy Center, Service Terms, Refund
   *    Policy) when the sticky Table-of-Contents sidebar was previously
   *    fighting the native scroll.
   * 2. `scroll-behavior: smooth` makes every in-page anchor jump (TOC
   *    clicks, "back to top" buttons) animate instead of snapping.
   * 3. `scroll-padding-top` reserves space for the fixed site header so
   *    the target heading is never hidden behind it.
   * 4. `#root` explicitly does NOT set `overflow` or a fixed height so
   *    the document flow scrolls naturally.
   * ---------------------------------------------------------------------- */
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px; /* matches sticky header height (~80-96px) */
  }
  /* Long-form anchor targets get the same offset so a direct deep-link
     (e.g. /privacy-center#cookies) lands below the header, not under it. */
  [id] {
    scroll-margin-top: 96px;
  }
  #root {
    min-height: 100vh;
  }
}

/* Unified navigation / footer link typography (matches CLIENT AREA button scale) */
.site-nav-link {
  font-size: 13px;
  letter-spacing: 0.02em;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
footer a, footer li, footer p, footer span {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

@layer utilities {
  .brand-green { color: #0b6e3e; }
  .bg-brand-green { background-color: #0b6e3e; }
  .bg-brand-green-dark { background-color: #063019; }
  .bg-brand-gold { background-color: #f5c400; }
  .text-brand-gold { color: #f5c400; }
  .hero-gradient {
    background:
      radial-gradient(1200px 500px at 70% 30%, rgba(16,122,69,0.45), transparent 60%),
      radial-gradient(800px 400px at 20% 70%, rgba(11,110,62,0.35), transparent 60%),
      linear-gradient(180deg, #052217 0%, #063019 60%, #07361d 100%);
  }
  .glass-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(8px);
  }
  .section-wave {
    background-image: linear-gradient(180deg, #0a8048 0%, #0b6e3e 100%);
  }

  /* -------------------------------------------------------------------------
   * GLASS-SOFT CARD — light, premium SaaS card style
   *
   * Uses a translucent white background with subtle blur, a hairline
   * border that replaces hard borders, and a layered "smoke white"
   * shadow for soft depth. On hover, the card rises slightly and the
   * shadow becomes stronger for an interactive feel.
   * ---------------------------------------------------------------------- */
  .glass-soft {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(226, 232, 240, 0.6);
    box-shadow:
      0 1px 2px rgba(15, 23, 42, 0.04),
      0 4px 12px rgba(15, 23, 42, 0.06),
      0 12px 32px rgba(15, 23, 42, 0.05);
    transition:
      transform 0.35s ease,
      box-shadow 0.35s ease,
      border-color 0.35s ease;
  }
  .glass-soft:hover {
    transform: translateY(-4px);
    border-color: rgba(203, 213, 225, 0.9);
    box-shadow:
      0 2px 4px rgba(15, 23, 42, 0.05),
      0 10px 24px rgba(15, 23, 42, 0.08),
      0 24px 56px rgba(15, 23, 42, 0.08);
  }

  /* Smoke-white multi-layer shadow, usable on any element */
  .shadow-smoke {
    box-shadow:
      0 1px 2px rgba(15, 23, 42, 0.04),
      0 4px 12px rgba(15, 23, 42, 0.06),
      0 12px 32px rgba(15, 23, 42, 0.05);
  }
  .shadow-smoke-lg {
    box-shadow:
      0 2px 4px rgba(15, 23, 42, 0.05),
      0 10px 24px rgba(15, 23, 42, 0.08),
      0 24px 56px rgba(15, 23, 42, 0.08);
  }

  /* Fluid container that scales gracefully on ultra-wide displays (3200x2000, 4K, 5K) */
  .container-fluid {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    max-width: 1280px;
  }
  @media (min-width: 1280px) {
    .container-fluid { max-width: 1280px; padding-left: 2rem; padding-right: 2rem; }
  }
  @media (min-width: 1536px) {
    .container-fluid { max-width: 1440px; }
  }
  @media (min-width: 1792px) {
    .container-fluid { max-width: 1680px; }
  }
  @media (min-width: 2240px) {
    .container-fluid { max-width: 2000px; }
  }
  @media (min-width: 2880px) {
    .container-fluid { max-width: 2400px; }
  }
}

/* ================================================ */
/*  FLUID TYPOGRAPHY — scales with viewport on      */
/*  ultra-wide displays without breaking small ones */
/*  Base reduced to 90% for global site scale-down  */
/* ================================================ */
html {
  font-size: 14.4px; /* 90% of 16px — global site scale */
}
@media (min-width: 1536px) {
  html { font-size: 15.3px; } /* 90% of 17px */
}
@media (min-width: 1792px) {
  html { font-size: 16.2px; } /* 90% of 18px */
}
@media (min-width: 2240px) {
  html { font-size: 18px; }   /* 90% of 20px */
}
@media (min-width: 2880px) {
  html { font-size: 19.8px; } /* 90% of 22px */
}

/* ================================================ */
/*  ULTRA-WIDE / 4K+ SPECIFIC LAYOUT TUNING         */
/* ================================================ */
@media (min-width: 1792px) {
  /* Give the content a bit more breathing room on huge screens */
  .onepage-section { padding-left: 2rem; padding-right: 2rem; }
}

@media (min-width: 2560px) {
  /* 1440p / 4K UHD / 3200x2000 band */
  .onepage-section { padding-left: 4rem; padding-right: 4rem; }
}

/* Ensure full-width background elements (hero video, gradients) always fill
   even the tallest ultra-wide viewports. */
video, .hero-gradient {
  max-width: 100%;
}

/* ============================================ */
/*  DUAL-HANDLE PRICE RANGE SLIDER              */
/*  Used by Shop catalog price filter           */
/* ============================================ */
input[type="range"].range-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  outline: none;
  height: 100%;
  margin: 0;
}
/* Hide the native track so our custom track shows through */
input[type="range"].range-thumb::-webkit-slider-runnable-track {
  background: transparent;
  height: 100%;
  border: none;
}
input[type="range"].range-thumb::-moz-range-track {
  background: transparent;
  height: 100%;
  border: none;
}
/* Thumb — WebKit */
input[type="range"].range-thumb::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background: #ffffff;
  border: 2px solid #0b6e3e;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
  cursor: grab;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  margin-top: 0;
}
input[type="range"].range-thumb::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 10px rgba(11, 110, 62, 0.35);
}
input[type="range"].range-thumb::-webkit-slider-thumb:active {
  cursor: grabbing;
  background: #f5c400;
}
/* Thumb — Firefox */
input[type="range"].range-thumb::-moz-range-thumb {
  pointer-events: auto;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background: #ffffff;
  border: 2px solid #0b6e3e;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
  cursor: grab;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
input[type="range"].range-thumb::-moz-range-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 10px rgba(11, 110, 62, 0.35);
}
input[type="range"].range-thumb::-moz-range-thumb:active {
  cursor: grabbing;
  background: #f5c400;
}

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

/* ============================================ */
/*  ONE-PAGE (FULLPAGE) SNAP SCROLL ON HOMEPAGE */
/* ============================================ */
html.onepage-mode,
body.onepage-mode {
  /* `proximity` (not `mandatory`) lets the user scroll freely through
     long sections; the browser only snaps when they're already close to
     a section boundary. This fixes the "jerky / trapped scroll" feel. */
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
  scroll-padding-top: 0;
  overscroll-behavior-y: contain;
}

/* Deliberately NOT setting `html.onepage-mode { height: 100% }` anymore.
   Locking the root element to viewport height was causing the page to
   become unscrollable if the `onepage-mode` class ever leaked onto a
   non-homepage route (e.g. during a SPA navigation race). The natural
   document height works fine with scroll-snap on modern browsers. */

.onepage-section {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
}

/* Disable mandatory snap on small screens / for users who prefer reduced motion
   to keep long-content sections (plans, comparison, managing services) readable */
@media (max-width: 767px) {
  html.onepage-mode,
  body.onepage-mode {
    scroll-snap-type: y proximity;
  }
  .onepage-section {
    min-height: auto;
    justify-content: flex-start;
  }
  .onepage-section:first-child {
    min-height: 100dvh;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.onepage-mode,
  body.onepage-mode {
    scroll-snap-type: none;
    scroll-behavior: auto;
  }
}

/* ================================================ */
/*  RTL SUPPORT (Arabic)                            */
/*                                                   */
/*  Most of the site is authored in Tailwind, whose  */
/*  modern utilities are already logical (ps-/pe-,   */
/*  start/end, ltr:/rtl: variants). The rules below  */
/*  are a safety net for any remaining left/right-   */
/*  specific layout so Arabic mode mirrors properly  */
/*  without having to rewrite every component.       */
/* ================================================ */
html[dir="rtl"] body {
  font-family: 'Cairo', 'Tajawal', 'Inter', ui-sans-serif, system-ui,
    -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Mirror simple left/right margins & paddings so LTR-authored spacing
   still feels balanced in RTL. Tailwind utilities win over these thanks
   to their higher specificity / later order, so this is purely a fallback. */
html[dir="rtl"] .rtl-mirror {
  transform: scaleX(-1);
}

/* Keep decorative icons that represent direction (arrows, chevrons used
   as "next") visually flipped in RTL. Opt-in via the `rtl-flip` class. */
html[dir="rtl"] .rtl-flip {
  transform: scaleX(-1);
}

/* Force-preserve LTR rendering for numbers, currency amounts, code blocks,
   email addresses and URLs so they stay readable inside Arabic paragraphs. */
html[dir="rtl"] .keep-ltr,
html[dir="rtl"] code,
html[dir="rtl"] pre,
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] time,
html[dir="rtl"] .font-mono,
html[dir="rtl"] [data-price],
html[dir="rtl"] [data-numeric] {
  direction: ltr;
  unicode-bidi: embed;
  text-align: start;
}

/* --------------------------------------------------------------------------
 * RTL SAFETY NET — automatic mirroring of common LTR-authored utilities.
 *
 * Most of the codebase was written with Tailwind directional utilities like
 * `ml-*`, `mr-*`, `pl-*`, `pr-*`, `left-*`, `right-*`, `rounded-l-*`,
 * `border-l`, `space-x-reverse`, etc. The following rules flip the effect
 * of those utilities when the document is in RTL mode, without having to
 * rewrite every component. Components that need exact, non-mirrored layout
 * can opt out with the `keep-ltr` / `no-flip` classes.
 * ----------------------------------------------------------------------- */

/* Opt-out helper: put .no-flip on an element that must keep its LTR layout
   even when the document is RTL (e.g. dashboards showing numeric data). */
html[dir="rtl"] .no-flip,
html[dir="rtl"] .no-flip * {
  direction: ltr;
}

/* -------------------------------------------------------------------------
 * Arrow & chevron auto-flipping
 *
 * Lucide icons are inline SVGs rendered as `<svg class="lucide-chevron-right ...">`
 * etc. We mirror the ones that carry directional meaning ("next", "prev",
 * "continue", "back") so they visually point the right way in Arabic.
 * Decorative icons (stars, check marks, logos) are never matched because
 * they don't carry `right`/`left` in their class name.
 * ---------------------------------------------------------------------- */
html[dir="rtl"] svg.lucide-chevron-right,
html[dir="rtl"] svg.lucide-chevron-left,
html[dir="rtl"] svg.lucide-arrow-right,
html[dir="rtl"] svg.lucide-arrow-left,
html[dir="rtl"] svg.lucide-arrow-big-right,
html[dir="rtl"] svg.lucide-arrow-big-left,
html[dir="rtl"] svg.lucide-arrow-up-right,
html[dir="rtl"] svg.lucide-arrow-up-left,
html[dir="rtl"] svg.lucide-arrow-down-right,
html[dir="rtl"] svg.lucide-arrow-down-left,
html[dir="rtl"] svg.lucide-chevrons-right,
html[dir="rtl"] svg.lucide-chevrons-left,
html[dir="rtl"] svg.lucide-move-right,
html[dir="rtl"] svg.lucide-move-left,
html[dir="rtl"] svg.lucide-corner-up-right,
html[dir="rtl"] svg.lucide-corner-up-left,
html[dir="rtl"] svg.lucide-corner-down-right,
html[dir="rtl"] svg.lucide-corner-down-left,
html[dir="rtl"] svg.lucide-log-out,
html[dir="rtl"] svg.lucide-log-in,
html[dir="rtl"] svg.lucide-send,
html[dir="rtl"] svg[data-lucide="chevron-right"],
html[dir="rtl"] svg[data-lucide="chevron-left"],
html[dir="rtl"] svg[data-lucide="arrow-right"],
html[dir="rtl"] svg[data-lucide="arrow-left"] {
  transform: scaleX(-1);
}

/* Explicit opt-out if a specific arrow should not flip (e.g. a brand logo
   that happens to use a chevron shape). */
html[dir="rtl"] svg.no-flip,
html[dir="rtl"] .no-flip svg {
  transform: none !important;
}

/* -------------------------------------------------------------------------
 * Space-between helpers
 *
 * Tailwind's `space-x-*` adds a directional margin between children. In RTL,
 * the author expects the spacing to come from the start side instead of the
 * end. Tailwind provides `.space-x-reverse`, but we apply the same effect
 * automatically for common `space-x-*` sizes so existing code just works.
 * ---------------------------------------------------------------------- */
html[dir="rtl"] .space-x-0 > :not([hidden]) ~ :not([hidden]),
html[dir="rtl"] .space-x-1 > :not([hidden]) ~ :not([hidden]),
html[dir="rtl"] .space-x-1\.5 > :not([hidden]) ~ :not([hidden]),
html[dir="rtl"] .space-x-2 > :not([hidden]) ~ :not([hidden]),
html[dir="rtl"] .space-x-2\.5 > :not([hidden]) ~ :not([hidden]),
html[dir="rtl"] .space-x-3 > :not([hidden]) ~ :not([hidden]),
html[dir="rtl"] .space-x-3\.5 > :not([hidden]) ~ :not([hidden]),
html[dir="rtl"] .space-x-4 > :not([hidden]) ~ :not([hidden]),
html[dir="rtl"] .space-x-5 > :not([hidden]) ~ :not([hidden]),
html[dir="rtl"] .space-x-6 > :not([hidden]) ~ :not([hidden]),
html[dir="rtl"] .space-x-8 > :not([hidden]) ~ :not([hidden]),
html[dir="rtl"] .space-x-10 > :not([hidden]) ~ :not([hidden]),
html[dir="rtl"] .space-x-12 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 1;
}

/* -------------------------------------------------------------------------
 * Numeric content preservation (prices, quantities, phone numbers, dates)
 *
 * Even without an explicit `keep-ltr` class, short numeric spans inside
 * Arabic copy should keep their Western digit order so prices read left-
 * to-right. This is achieved with `unicode-bidi: isolate` which tells the
 * browser to treat the element as an isolated LTR run.
 * ---------------------------------------------------------------------- */
html[dir="rtl"] .price,
html[dir="rtl"] .amount,
html[dir="rtl"] .tabular-nums,
html[dir="rtl"] [class*="text-"][class*="currency"] {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* -------------------------------------------------------------------------
 * Carousel / swiper navigation
 *
 * Next/prev buttons on carousels are typically pinned with `left-*` /
 * `right-*`. In RTL, the "previous" button should live on the right side
 * and the "next" on the left. We target common patterns via data-attribute
 * hooks so page-level code can opt in simply by tagging the buttons with
 * `data-carousel-nav="prev|next"`.
 * ---------------------------------------------------------------------- */
html[dir="rtl"] [data-carousel-nav="prev"] svg,
html[dir="rtl"] [data-carousel-nav="next"] svg {
  transform: scaleX(-1);
}

/* -------------------------------------------------------------------------
 * Header dropdown / account menu
 *
 * The account menu and LanguageSwitcher anchor themselves to the right edge
 * on LTR (`right-0`). In RTL they should anchor to the left edge. The
 * `ltr:`/`rtl:` variants cover most cases; this rule catches any plain
 * `right-0` absolute dropdowns that weren't migrated yet.
 * ---------------------------------------------------------------------- */
html[dir="rtl"] .rtl-anchor-flip.right-0 {
  right: auto;
  left: 0;
}
html[dir="rtl"] .rtl-anchor-flip.left-0 {
  left: auto;
  right: 0;
}

/* -------------------------------------------------------------------------
 * Form elements & inline icons
 *
 * Inputs with a leading icon are typically laid out with `pl-10` + absolute
 * `left-3` for the icon. In RTL the icon should sit on the right side with
 * the padding mirrored. The `logical:` / `ps-*` utilities do this for new
 * code, but for existing markup we flip via `.rtl-input-flip`.
 * ---------------------------------------------------------------------- */
html[dir="rtl"] .rtl-input-flip .pl-10 {
  padding-left: 0.75rem;
  padding-right: 2.5rem;
}
html[dir="rtl"] .rtl-input-flip .left-3 {
  left: auto;
  right: 0.75rem;
}

/* -------------------------------------------------------------------------
 * Text alignment helpers
 *
 * Long-form copy written with `text-left` in English reads wrong in Arabic.
 * Paragraphs that should follow the document direction can use the
 * `rtl-auto-align` helper (or rely on the default inherited behaviour).
 * ---------------------------------------------------------------------- */
html[dir="rtl"] .rtl-auto-align.text-left {
  text-align: right;
}
html[dir="rtl"] .rtl-auto-align.text-right {
  text-align: left;
}

/* -------------------------------------------------------------------------
 * Mobile drawer & fixed-side panels
 *
 * The mobile navigation drawer slides in from the right on LTR. In RTL, we
 * flip it to slide in from the left by negating its translate direction.
 * This is opt-in via `.rtl-drawer` because some drawers are deliberately
 * on one side (e.g. cart drawer docked to the end edge).
 * ---------------------------------------------------------------------- */
html[dir="rtl"] .rtl-drawer.translate-x-full {
  transform: translateX(-100%);
}

/* -------------------------------------------------------------------------
 * Cart flying-image animations
 *
 * Two related pieces of feedback are defined here:
 *   1. `.cart-icon-pulse` — a brief scale + color pulse applied to the
 *      header cart icon when a product arrives after the flyToCart helper.
 *   2. `.cart-line-enter` — a fade-and-slide animation used by the cart
 *      drawer to introduce a newly added line smoothly.
 *
 * Both are disabled under `prefers-reduced-motion`.
 * ---------------------------------------------------------------------- */
@keyframes cart-icon-pulse-kf {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(11, 110, 62, 0.45);
  }
  40% {
    transform: scale(1.18);
    box-shadow: 0 0 0 10px rgba(11, 110, 62, 0);
  }
  70% {
    transform: scale(0.94);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(11, 110, 62, 0);
  }
}
.cart-icon-pulse {
  animation: cart-icon-pulse-kf 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes cart-line-enter-kf {
  0% {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
    background-color: rgba(11, 110, 62, 0.08);
  }
  60% {
    opacity: 1;
    transform: translateY(0) scale(1);
    background-color: rgba(11, 110, 62, 0.08);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    background-color: transparent;
  }
}
.cart-line-enter {
  animation: cart-line-enter-kf 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .cart-icon-pulse,
  .cart-line-enter {
    animation: none !important;
  }
}