/* Generated from the original Next.js CSS Modules. */

/* ===== src/components/shared/Shared.module.css ===== */
.shared-sectionHeader {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--color-line-light);
}

.shared-sectionHeader span {
  color: var(--color-pink-dark);
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2vw, 2rem);
}

.shared-sectionHeader h2 {
  color: var(--color-brown);
  font-family: var(--font-serif);
  font-size: clamp(2.7rem, 6vw, 5.7rem);
  font-weight: 400;
  line-height: 0.95;
}

.shared-sectionHeader.shared-light {
  border-color: var(--color-line-dark);
}

.shared-sectionHeader.shared-light h2 {
  color: var(--color-cream);
}

.shared-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ===== src/components/shared/RevealOnScroll.module.css ===== */
.reveal-reveal {
  opacity: 0;

  transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);

  transition-delay: var(--reveal-delay, 0ms);

  will-change: opacity, transform;
}


/* الاتجاه من أسفل لأعلى */

.reveal-up {
  transform: translateY(65px);
}


/* الاتجاه من أعلى لأسفل */

.reveal-down {
  transform: translateY(-65px);
}


/* الاتجاه من اليسار */

.reveal-left {
  transform: translateX(-75px);
}


/* الاتجاه من اليمين */

.reveal-right {
  transform: translateX(75px);
}


/* بعد ظهور العنصر */

.reveal-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}


@media (prefers-reduced-motion: reduce) {
  .reveal-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===== src/components/shared/CustomCursor.module.css ===== */
.cursor-dot,
.cursor-ring {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  /* ========================================
     Shared Cursor Color
     Exact pink sampled from the Yalla Dough It logo
  ======================================== */

  .cursor-dot,
  .cursor-ring {
    --cursor-pink: #f183a1;
    --cursor-pink-rgb: 241, 131, 161;

    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;

    display: grid;
    place-items: center;

    pointer-events: none;
    opacity: 0;

    will-change: transform;

    transition:
      width 180ms ease,
      height 180ms ease,
      margin 180ms ease,
      opacity 180ms ease,
      color 180ms ease,
      background-color 180ms ease,
      border-color 180ms ease;
  }

  /* ========================================
     Visible State
  ======================================== */

  .cursor-visible {
    opacity: 1;
  }

  /* ========================================
     Center Dot
  ======================================== */

  .cursor-dot {
    width: 7px;
    height: 7px;

    margin-top: -3.5px;
    margin-left: -3.5px;

    border-radius: 50%;

    background-color: var(--cursor-pink);
  }

  /* ========================================
     Default Ring
  ======================================== */

  .cursor-ring {
    width: 34px;
    height: 34px;

    margin-top: -17px;
    margin-left: -17px;

    color: var(--color-brown);

    border: 1px solid rgba(var(--cursor-pink-rgb), 0.82);
    border-radius: 50%;

    background-color: transparent;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
  }

  /* ========================================
     Active Hover Ring
  ======================================== */

  .cursor-active {
    width: 56px;
    height: 56px;

    margin-top: -28px;
    margin-left: -28px;

    color: var(--color-brown);

    border-color: var(--cursor-pink);

    background-color: rgba(var(--cursor-pink-rgb), 0.26);
  }

  /* ========================================
     Cursor With Label
     OPEN / VIEW / ADD / ORDER...
  ======================================== */

  .cursor-withLabel {
    width: 72px;
    height: 72px;

    margin-top: -36px;
    margin-left: -36px;

    color: var(--color-brown);

    border-color: var(--cursor-pink);
    background-color: var(--cursor-pink);
  }

  /* ========================================
     Optional Explicit States
  ======================================== */

  .cursor-openCursor,
  .cursor-viewCursor {
    color: var(--color-brown);

    border-color: var(--cursor-pink);
    background-color: var(--cursor-pink);
  }
}

/* ===== src/components/order/FloatingOrderButton.module.css ===== */
/* ========================================
   Floating Cart

   مخفية على اللابتوب والتابلت
======================================== */

.floating-floatingCart {
  display: none;
}


/* ========================================
   Mobile Only
======================================== */

@media (max-width: 650px) {
  .floating-floatingCart {
    position: fixed;

    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));

    z-index: 9999;

    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    color: var(--color-cream, #fff8f1);
    background: var(--color-brown, #4b281d);

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;

    box-shadow:
      0 12px 30px rgba(32, 14, 9, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);

    text-decoration: none;

    transition:
      background-color 200ms ease,
      transform 200ms ease;
  }

  .floating-floatingCart:active {
    background: var(--color-pink, #ed879d);
    transform: scale(0.92);
  }


  /* ========================================
     Cart Items Count
  ======================================== */

  .floating-cartCount {
    position: absolute;
    top: -5px;
    right: -4px;

    display: grid;
    place-items: center;

    min-width: 20px;
    height: 20px;
    padding: 0 5px;

    color: #ffffff;
    background: var(--color-pink-dark, #d96380);

    border: 2px solid var(--color-cream, #fff8f1);
    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;
    line-height: 1;
  }
}