/* =====================================================================
   Mobile Optimizations (max-width: 767px only)
   These rules are additive. They do NOT alter the desktop appearance.
   Goal: premium native-app feel on phones while preserving visual identity.
   ===================================================================== */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --bottom-nav-h: 64px;
}

/* Smooth momentum scrolling on iOS everywhere */
html { -webkit-text-size-adjust: 100%; }

@media (max-width: 767px) {
  html, body {
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    scroll-behavior: smooth;
  }

  /* Reserve room for the bottom nav so nothing hides behind it */
  body {
    padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom));
  }

  /* Prevent accidental horizontal overflow from wide sections */
  section, main, header, footer { max-width: 100vw; }
  img, video, svg { max-width: 100%; height: auto; }

  /* --------------------------------------------------------------
     Sticky header w/ safe-area padding — keeps existing look
     -------------------------------------------------------------- */
  #header-sticky,
  .tp-header-10-main,
  .header-area {
    padding-top: var(--safe-top);
  }

  /* --------------------------------------------------------------
     Touch targets — enforce 44x44 minimum without altering visuals
     -------------------------------------------------------------- */
  a, button,
  .tp-btn, .tp-btn-login, .nav-icon-link,
  input[type="button"], input[type="submit"] {
    min-height: 44px;
  }
  .nav-icon-link,
  .hamburger-btn,
  .tp-offcanvas-open-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Comfortable form inputs (prevent iOS zoom on focus) */
  input, select, textarea {
    font-size: 16px !important;
    min-height: 44px;
  }

  /* --------------------------------------------------------------
     Horizontal marquees / logo strips → native-feel snap scroll
     -------------------------------------------------------------- */
  .logo-marquee, .brand-strip, .partners-strip,
  .swiper.logo-swiper, .swiper-logos {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .logo-marquee::-webkit-scrollbar,
  .brand-strip::-webkit-scrollbar { display: none; }
  .logo-marquee > *, .brand-strip > * { scroll-snap-align: center; }

  /* --------------------------------------------------------------
     Cards — equal height, tap-friendly, edge-comfortable
     -------------------------------------------------------------- */
  .card, .tp-card, .cert-card, .feature-card {
    border-radius: 18px;
  }
  .card + .card, .tp-card + .tp-card { margin-top: 14px; }

  /* Bump grid items to full-width on the smallest screens */
  .row > [class*="col-"] { margin-bottom: 12px; }

  /* --------------------------------------------------------------
     Buttons: comfortable padding, no tap-highlight flash
     -------------------------------------------------------------- */
  a, button { -webkit-tap-highlight-color: transparent; }
  .tp-btn, .btn { padding-inline: 20px; }

  /* --------------------------------------------------------------
     Hero — prevent overflow & improve stacking rhythm
     -------------------------------------------------------------- */
  .hero1-section-area,
  .tp-hero,
  .hero-area {
    padding-left: 16px;
    padding-right: 16px;
  }
  .hero-title, .hero1-title, .tp-hero-title {
    line-height: 1.15;
    word-break: break-word;
  }

  /* --------------------------------------------------------------
     Native-feel transitions
     -------------------------------------------------------------- */
  .card, .tp-btn, a, button {
    transition-duration: 180ms;
    transition-timing-function: cubic-bezier(.2,.8,.2,1);
  }
}

/* =====================================================================
   Bottom Bar Navigation (mobile only) — FAB stack
   Collapsed: one blurple primary button. Expanded (tap/hover): white
   circular secondary buttons rise above it with staggered delays.
   ===================================================================== */
.bottom-bar__list,
.em-floating-nav,
.em-bottom-nav { display: none; }

@media (max-width: 767px) {
  :root { --bottom-nav-h: 0px; }

  .bottom-bar__list {
    --bb-accent: #f7ab24;
    --bb-ink: #2D3436;

    position: fixed;
    right: 20px;
    left: auto;
    bottom: calc(24px + var(--safe-bottom));
    z-index: 99990;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 8px;
    width: auto;
    padding: 0;
    margin: 0;
    list-style: none;
    direction: ltr;
    background: none;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font-family: 'IBM Plex Sans Arabic', 'Tajawal', 'Cairo', sans-serif;
    overflow: visible;
  }

  /* Legacy sliding puck no longer used in the FAB layout */
  .bottom-bar__active-indicator { display: none !important; }

  .bottom-bar__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 40px;
    height: 40px;
    background: #ffffff;
    color: var(--bb-accent);
    border: 1px solid var(--bb-accent);
    border-radius: 50%;
    opacity: 0;
    transform: translate(0, 100%);
    transition: all 400ms;
    pointer-events: none;
  }
  .bottom-bar__item:nth-child(1) { z-index: 99; }
  .bottom-bar__item:nth-child(2) { z-index: 98; }
  .bottom-bar__item:nth-child(3) { z-index: 97; }
  .bottom-bar__item:nth-child(4) { z-index: 96; }
  .bottom-bar__item:nth-child(5) { z-index: 95; }
  .bottom-bar__item:nth-child(6) { z-index: 94; }

  /* Primary FAB — the first tab (home) */
  .bottom-bar__item:first-of-type {
    width: 64px;
    height: 64px;
    margin: 0;
    background: transparent;
    border: 0;
    color: #fff;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    box-shadow: 0 2px 16px rgba(247, 171, 36, 0.45);
    z-index: 100;
  }
  .bottom-bar__item:first-of-type .bottom-bar__icon {
    width: 40px;
    height: 40px;
    filter: drop-shadow(0 0 1.5px rgba(255,255,255,0.95));
    transform: scale(1.08);
  }
  .bottom-bar__item:first-of-type .bottom-bar__icon lord-icon,
  .bottom-bar__item:first-of-type .bottom-bar__icon svg {
    width: 40px;
    height: 40px;
  }
  .bottom-bar__item:first-of-type::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bb-accent);
    border-radius: 50%;
    z-index: -1;
    transition: all 400ms;
    transform: scale(1);
  }
  .bottom-bar__item:first-of-type:hover::after { transform: scale(1.1); }

  /* Wavy shimmer ripple around the primary FAB */
  .bottom-bar__item:first-of-type::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: conic-gradient(
      from 0deg,
      transparent 0deg,
      rgba(247, 171, 36, 0.65) 40deg,
      rgba(255, 200, 80, 0.85) 90deg,
      transparent 140deg,
      rgba(247, 171, 36, 0.55) 190deg,
      rgba(255, 200, 80, 0.75) 250deg,
      transparent 300deg,
      rgba(247, 171, 36, 0.65) 360deg
    );
    z-index: -2;
    animation: fab-wave-shimmer 2.4s linear infinite;
    mask: radial-gradient(circle, transparent 56%, black 60%, black 70%, transparent 76%);
    -webkit-mask: radial-gradient(circle, transparent 56%, black 60%, black 70%, transparent 76%);
    filter: blur(1.5px) saturate(1.2);
    opacity: 0.95;
  }

  /* Outward travelling wave rings */
  .bottom-bar__item:first-of-type .bottom-bar__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(247, 171, 36, 0.55);
    z-index: -3;
    animation: fab-wave-ring 2.4s ease-out infinite;
    pointer-events: none;
  }

  @keyframes fab-wave-shimmer {
    0%   { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(180deg) scale(1.08); }
    100% { transform: rotate(360deg) scale(1); }
  }

  @keyframes fab-wave-ring {
    0%   { transform: scale(1); opacity: 0.8; border-width: 2px; }
    100% { transform: scale(2.2); opacity: 0; border-width: 0px; }
  }

  /* Expanded state — only after tapping the primary FAB */
  .bottom-bar__list.is-open .bottom-bar__item {
    opacity: 1;
    transform: translate(0, 0);
    pointer-events: auto;
  }
  .bottom-bar__list.is-open .bottom-bar__item:nth-child(2) { transition-delay: 50ms; }
  .bottom-bar__list.is-open .bottom-bar__item:nth-child(3) { transition-delay: 100ms; }
  .bottom-bar__list.is-open .bottom-bar__item:nth-child(4) { transition-delay: 150ms; }
  .bottom-bar__list.is-open .bottom-bar__item:nth-child(5) { transition-delay: 200ms; }
  .bottom-bar__list.is-open .bottom-bar__item:nth-child(6) { transition-delay: 250ms; }

  /* Primary FAB icon swaps to a close (X) icon while the stack is open */
  .bottom-bar__item:first-of-type .bb-fab-close { display: none; }
  .bottom-bar__list.is-open .bottom-bar__item:first-of-type .bottom-bar__icon svg:not(.bb-fab-close),
  .bottom-bar__list.is-open .bottom-bar__item:first-of-type .bottom-bar__icon lord-icon { display: none !important; }
  .bottom-bar__list.is-open .bottom-bar__item:first-of-type .bb-fab-close {
    display: block !important;
    width: 34px;
    height: 34px;
    color: #fff;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
  }

  .bottom-bar__item:not(:first-of-type):hover {
    background: #fff5d6;
    transition-delay: 0ms !important;
  }

  .bottom-bar__link {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    text-decoration: none;
    border-radius: 50%;
    transition: transform .18s ease;
    position: relative;
    overflow: visible;
  }
  .bottom-bar__link:active { transform: scale(.94); }

  .bottom-bar__icon {
    position: relative;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
  }
  .bottom-bar__icon svg { width: 22px; height: 22px; }
  .bottom-bar__icon lord-icon { width: 24px; height: 24px; }
  .bottom-bar__icon lord-icon { pointer-events: none; }

  /* Tooltip label to the left of each button (FAB sits on the right edge) */
  .bottom-bar__label {
    position: absolute;
    right: calc(100% + 16px);
    left: auto;
    top: 50%;
    background: linear-gradient(135deg, #2D3436 0%, #1a1a1a 100%);
    white-space: nowrap;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    opacity: 0;
    transform: translate(8px, -50%) scale(0.92);
    transform-origin: right center;
    transition:
      opacity 350ms cubic-bezier(.2,.8,.2,1),
      transform 350ms cubic-bezier(.34,1.56,.64,1),
      box-shadow 350ms ease;
    pointer-events: none;
    direction: rtl;
    font-family: 'Mazaj', 'IBM Plex Sans Arabic', 'Tajawal', 'Cairo', sans-serif;
    box-shadow:
      0 4px 14px rgba(0,0,0,0.22),
      0 0 0 1px rgba(255,255,255,0.08) inset;
    letter-spacing: 0.01em;
  }
  .bottom-bar__label::before {
    content: '';
    position: absolute;
    left: auto;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid #2D3436;
  }
  /* Labels appear automatically as soon as the dock opens (no hover on touch) */
  .bottom-bar__list.is-open .bottom-bar__item:not(:first-of-type) .bottom-bar__label,
  .bottom-bar__item:hover .bottom-bar__label {
    opacity: 1;
    transform: translate(0, -50%) scale(1);
    box-shadow:
      0 6px 20px rgba(0,0,0,0.28),
      0 0 18px rgba(247, 171, 36, 0.18),
      0 0 0 1px rgba(255,255,255,0.1) inset;
  }
  .bottom-bar__list.is-open .bottom-bar__item:nth-child(2) .bottom-bar__label { transition-delay: 90ms; }
  .bottom-bar__list.is-open .bottom-bar__item:nth-child(3) .bottom-bar__label { transition-delay: 140ms; }
  .bottom-bar__list.is-open .bottom-bar__item:nth-child(4) .bottom-bar__label { transition-delay: 190ms; }
  .bottom-bar__list.is-open .bottom-bar__item:nth-child(5) .bottom-bar__label { transition-delay: 240ms; }
  .bottom-bar__list.is-open .bottom-bar__item:nth-child(6) .bottom-bar__label { transition-delay: 290ms; }
  .bottom-bar__item:hover .bottom-bar__label::before {
    border-left-color: #2D3436;
  }

  .bottom-bar__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--bb-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 4;
  }
  .bottom-bar__badge.has-items { display: inline-flex; }
}


/* =====================================================================
   Premium Motion System (progressive enhancement — all breakpoints)
   Additive only. Respects prefers-reduced-motion.
   ===================================================================== */

/* Page transition — subtle fade + rise on route change */
.app-page {
  animation: app-page-in .34s cubic-bezier(.2,.8,.2,1) both;
  will-change: opacity, transform;
}
@keyframes app-page-in {
  0%   { opacity: 0; transform: translate3d(0, 8px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Reveal-on-scroll — attach data-reveal to any element */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity .6s cubic-bezier(.2,.8,.2,1),
    transform .6s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
[data-reveal].is-inview {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Tap-scale feedback — universal, cheap, GPU-only */
@media (hover: none) and (pointer: coarse) {
  a:active, button:active,
  .tp-btn:active, .btn:active,
  .card:active, .tp-card:active {
    transform: scale(.975);
    transition: transform .12s cubic-bezier(.2,.8,.2,1);
  }
}

/* Header elevation on scroll (mobile) */
@media (max-width: 767px) {
  #header-sticky,
  .tp-header-10-main,
  .header-area {
    transition: background-color .28s ease, box-shadow .28s ease, backdrop-filter .28s ease;
  }
  body.is-scrolled #header-sticky,
  body.is-scrolled .tp-header-10-main,
  body.is-scrolled .header-area {
    background: rgba(255,255,255,0.92);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    box-shadow: 0 6px 24px -12px rgba(15,23,42,0.18);
  }
}

/* Native scroll polish */
html { scroll-behavior: smooth; }
* { -webkit-tap-highlight-color: transparent; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .app-page,
  [data-reveal] { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
  .em-bottom-nav__item::before { transition: none !important; }
  html { scroll-behavior: auto; }
}

/* =====================================================================
   Mobile-only compaction of internal-page site header + cart stepper
   Additive: does NOT change desktop. Bottom nav already covers cart/nav.
   ===================================================================== */
@media (max-width: 767px) {
  /* Hide redundant header cart button on mobile — bottom nav has cart */
  .em-cart-btn { display: none !important; }

  /* Compact login CTA so hamburger never wraps */
  .tp-btn-login {
    padding: 8px 12px !important;
    font-size: 12px !important;
    margin-left: 6px !important;
    white-space: nowrap;
  }
  .tp-btn-login::before { width: 30px !important; height: 30px !important; }
  .tp-btn-login svg { width: 14px !important; height: 14px !important; }

  /* Keep the top-right cluster on ONE row */
  .tp-header-10-right {
    flex-wrap: nowrap !important;
    gap: 6px;
  }
  .tp-header-10-right > * { flex-shrink: 0; }

  /* Cart stepper — native horizontal snap-scroll instead of wrap */
  .stepper-bar { overflow: hidden; }
  .stepper {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start !important;
    padding-inline: 16px !important;
  }
  .stepper::-webkit-scrollbar { display: none; }
  .step { scroll-snap-align: center; flex-shrink: 0; }
  .step-connector { flex-shrink: 0; }

  /* Sticky mobile checkout CTA if a page opts in with .mobile-sticky-cta */
  .mobile-sticky-cta {
    position: sticky;
    bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 8px);
    z-index: 20;
  }
}