@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Noto+Sans+Arabic:wght@400;600;700&family=Noto+Sans+SC:wght@400;600;700&family=Oswald:wght@500;600;700&display=swap');

@font-face {
  font-family: 'BacherDemo';
  src: url('/assets/fonts/BacherDemo-Regular.ttf') format('truetype');
  font-display: swap;
}

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

@layer base {
  :root {
    --color-primary: 30 42 78;
    --color-primary-light: 46 64 111;
    --color-primary-dark: 16 24 46;
    --color-secondary: 94 98 112;
    --color-secondary-light: 126 132 146;
    --color-secondary-dark: 55 60 73;
    --color-accent: 231 97 59;
    --color-accent-light: 246 142 111;
    --color-accent-dark: 176 73 50;
    --color-background: 248 249 247;
    --color-background-card: 255 255 252;
    --color-background-dark: 224 228 224;
    --color-charcoal: 28 32 42;
    --color-charcoal-light: 69 73 84;
    --color-charcoal-dark: 14 18 28;
    --color-success: 54 127 101;
    --color-success-light: 83 157 128;
    --color-success-dark: 34 93 72;
    --color-warning: 184 124 54;
    --color-warning-light: 217 153 83;
    --color-warning-dark: 133 85 33;
    --color-danger: 162 70 68;
    --color-danger-light: 190 91 87;
    --color-danger-dark: 119 47 49;
  }

  [data-theme="dark"] {
    color-scheme: dark;
    --color-primary: 236 240 247;
    --color-primary-light: 255 255 255;
    --color-primary-dark: 204 214 230;
    --color-secondary: 158 165 180;
    --color-secondary-light: 196 202 214;
    --color-secondary-dark: 120 127 143;
    --color-accent: 244 130 95;
    --color-accent-light: 255 177 146;
    --color-accent-dark: 208 91 66;
    --color-background: 15 19 27;
    --color-background-card: 24 30 41;
    --color-background-dark: 56 66 84;
    --color-charcoal: 236 240 247;
    --color-charcoal-light: 205 211 222;
    --color-charcoal-dark: 255 255 255;
    --color-success: 116 181 144;
    --color-success-light: 142 211 173;
    --color-success-dark: 77 145 108;
    --color-warning: 221 163 90;
    --color-warning-light: 247 190 111;
    --color-warning-dark: 176 120 53;
    --color-danger: 223 119 111;
    --color-danger-light: 246 151 140;
    --color-danger-dark: 181 80 76;
  }

  body {
    @apply bg-background text-charcoal font-sans antialiased selection:bg-accent selection:text-white;
    overflow-x: hidden;
    transition: background-color 0.45s ease, color 0.45s ease;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-display text-primary font-semibold;
    letter-spacing: 0;
  }

  [dir="rtl"] body {
    text-align: right;
  }
}

/* Lenis smooth-scroll recommended base styles */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

@layer components {
  /* Scrollbar: hidden on phones, visible + prominent on tablet/desktop. */
  @media (max-width: 767px) {
    ::-webkit-scrollbar { width: 0; height: 0; }
    html { scrollbar-width: none; }            /* Firefox */
    body { -ms-overflow-style: none; }         /* legacy Edge */
  }

  @media (min-width: 768px) {
    ::-webkit-scrollbar { width: 12px; height: 12px; }
    ::-webkit-scrollbar-track {
      @apply bg-background-dark/30;
    }
    ::-webkit-scrollbar-thumb {
      @apply bg-secondary/45 rounded-full border-2 border-solid;
      border-color: rgb(var(--color-background) / 1);
      background-clip: padding-box;
    }
    ::-webkit-scrollbar-thumb:hover {
      @apply bg-accent/70;
      background-clip: padding-box;
    }
    html { scrollbar-width: thin; scrollbar-color: rgb(var(--color-secondary) / 0.5) transparent; }
  }

  /* Inner scroll regions (cart lists, drawers) keep a slim subtle bar. */
  [data-native-scroll]::-webkit-scrollbar { width: 6px; height: 6px; }
  [data-native-scroll]::-webkit-scrollbar-thumb { @apply bg-secondary/30 rounded-full; }

  /* Warm paper panel */
  .glass-card {
    @apply bg-background-card/90 backdrop-blur-sm border border-background-dark shadow-premium;
  }

  /* Interactive active/hover state transitions */
  .interactive-scale {
    @apply transition-all duration-300 hover:-translate-y-0.5 hover:shadow-premium-hover;
  }

  /* Inputs */
  .form-input-premium {
    @apply w-full px-4 py-3 bg-background-card border border-background-dark rounded-lg focus:outline-none focus:border-accent focus:ring-2 focus:ring-accent/10 transition-all text-charcoal placeholder:text-secondary/50;
    transition-duration: 160ms;
  }

  .section-reveal {
    opacity: 0;
    transform: translateY(18px);
    animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .button-primary {
    @apply inline-flex items-center justify-center gap-2 rounded-lg bg-primary px-5 py-3 text-sm font-bold text-background shadow-premium backdrop-blur-sm transition-all hover:bg-primary-light hover:shadow-premium-hover active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .button-accent {
    @apply inline-flex items-center justify-center gap-2 rounded-lg bg-accent px-5 py-3 text-sm font-bold text-white shadow-accent-glow backdrop-blur-sm transition-all hover:bg-accent-dark hover:shadow-premium-hover active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .button-ghost {
    @apply inline-flex items-center justify-center gap-2 rounded-lg border border-background-dark bg-background-card/90 px-5 py-3 text-sm font-bold text-primary shadow-premium backdrop-blur-sm transition-all hover:border-accent/40 hover:bg-background hover:shadow-premium-hover active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .theme-toggle {
    @apply relative inline-flex h-10 w-[76px] items-center rounded-full border border-background-dark bg-background-card/90 p-1 shadow-premium backdrop-blur-md transition-colors;
  }

  .theme-toggle-thumb {
    @apply absolute left-1 top-1 grid h-8 w-8 place-items-center rounded-full bg-accent text-white shadow-accent-glow transition-transform duration-200;
  }

  [data-theme="dark"] .theme-toggle-thumb {
    transform: translateX(36px);
  }

  /* Compact icon button variant (used for theme/lang/admin on mobile). */
  .icon-button {
    @apply grid h-11 w-11 place-items-center rounded-lg border border-background-dark bg-background-card/90 text-primary shadow-premium backdrop-blur-sm transition-all hover:text-accent hover:border-accent/40 hover:shadow-premium-hover active:scale-95;
  }

  /* Desktop top-nav links: padded pills with fill + shadow, echoing mobile nav. */
  .desktop-nav-link {
    @apply inline-flex items-center gap-2 rounded-xl px-3.5 py-2 text-sm font-semibold text-secondary transition-all hover:text-primary hover:bg-background-card hover:shadow-sm cursor-pointer;
  }
  .desktop-nav-link.is-active {
    @apply bg-accent text-white shadow-accent-glow hover:text-white hover:bg-accent;
  }

  /* Review deck (flickable, glossy cards) */
  .review-deck {
    @apply relative mx-auto w-full;
    min-height: 380px;
    touch-action: pan-y;
    perspective: 1400px;
    user-select: none;
    -webkit-user-select: none;
  }
  .review-card {
    @apply absolute inset-x-0 top-0 select-none rounded-3xl border border-background-dark p-6 md:p-8 shadow-premium overflow-hidden;
    /* Glossy glass: a soft top-left highlight layered over the card surface. */
    background:
      linear-gradient(150deg, rgb(255 255 255 / 0.16) 0%, rgb(255 255 255 / 0) 42%),
      rgb(var(--color-background-card));
    transform-origin: center bottom;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
    will-change: transform, opacity;
    -webkit-user-select: none;
  }
  [data-theme="dark"] .review-card {
    background:
      linear-gradient(150deg, rgb(255 255 255 / 0.09) 0%, rgb(255 255 255 / 0) 44%),
      rgb(var(--color-background-card));
  }
  /* Sweeping sheen that runs across the front card only. */
  .review-gloss {
    @apply pointer-events-none absolute inset-0;
    border-radius: inherit;
    background: linear-gradient(115deg, transparent 36%, rgb(255 255 255 / 0.30) 48%, transparent 60%);
    transform: translateX(-130%);
    opacity: 0;
    z-index: 2;
  }
  .review-card.is-top .review-gloss {
    animation: review-sheen 4.8s ease-in-out 0.5s infinite;
  }
  @keyframes review-sheen {
    0%   { transform: translateX(-130%); opacity: 0; }
    14%  { opacity: 0.85; }
    40%  { transform: translateX(130%); opacity: 0; }
    100% { transform: translateX(130%); opacity: 0; }
  }

  .mobile-nav-shell {
    @apply fixed bottom-3 left-3 right-3 z-40 mx-auto flex h-[70px] max-w-md items-center justify-between rounded-2xl border border-background-dark bg-background-card/95 px-2 shadow-premium backdrop-blur-md lg:hidden;
  }

  .mobile-nav-button {
    @apply flex min-h-12 min-w-12 flex-col items-center justify-center gap-0.5 rounded-xl px-2 text-[10px] font-bold text-secondary transition-all;
  }

  .mobile-nav-button.is-active {
    @apply bg-accent text-white shadow-accent-glow;
  }

  .desktop-side-rail {
    @apply hidden lg:flex fixed left-5 top-1/2 z-40 -translate-y-1/2 flex-col items-center gap-3 rounded-3xl border border-background-dark bg-background-card/90 p-3 shadow-premium backdrop-blur-xl;
  }

  .desktop-rail-button {
    @apply grid h-12 w-12 place-items-center rounded-2xl border border-transparent text-secondary shadow-sm transition-all hover:-translate-y-0.5 hover:bg-background hover:text-primary hover:shadow-premium active:scale-95;
  }

  .desktop-rail-button.is-active {
    @apply bg-accent text-white shadow-accent-glow hover:bg-accent hover:text-white;
  }

  .desktop-rail-button svg {
    pointer-events: none;
  }

  .cart-backdrop {
    @apply fixed inset-0 z-[45] bg-primary-dark/35 backdrop-blur-sm transition-opacity;
  }

  .cart-swipe-item {
    @apply bg-danger/10;
  }

  .cart-swipe-delete {
    @apply absolute left-0 top-0 bottom-0 z-0 flex w-20 items-center justify-center rounded-2xl bg-danger text-white shadow-premium transition-all;
  }

  .cart-swipe-card {
    @apply relative z-10 will-change-transform;
    touch-action: pan-y;
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease;
  }

  .cart-swipe-item.is-open .cart-swipe-card {
    @apply shadow-premium-hover;
  }

  .cart-inline-remove {
    @apply text-secondary/60 hover:text-danger p-1.5 rounded-lg hover:bg-danger/5 transition-colors cursor-pointer flex-shrink-0;
  }

  @media (max-width: 767px) {
    .cart-inline-remove {
      display: none;
    }
  }

  @media (min-width: 1024px) {
    #cart-drawer {
      top: 92px;
      right: 32px;
      bottom: auto;
      width: min(440px, calc(100vw - 64px));
      max-height: calc(100vh - 124px);
      border: 1px solid rgb(var(--color-background-dark) / 1);
      border-radius: 28px;
      overflow: hidden;
      box-shadow: 0 30px 90px -38px rgb(16 24 46 / 0.5);
      transform: translateX(0);
      opacity: 1;
      transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s ease;
    }

    #cart-drawer.translate-x-full {
      transform: translateX(calc(100% + 54px));
      opacity: 0;
      pointer-events: none;
    }

    #cart-drawer-items {
      max-height: min(52vh, 520px);
    }
  }

  .loading-skeleton-page {
    @apply mx-auto w-full max-w-7xl space-y-5 py-2;
  }

  .loading-skeleton-hero {
    @apply relative min-h-[420px] overflow-hidden rounded-3xl border border-background-dark bg-background-card shadow-premium;
  }

  .loading-skeleton-hero span {
    @apply absolute block rounded-full bg-background-dark/50;
    animation: shimmer 1.4s infinite linear;
    background: linear-gradient(90deg, rgb(var(--color-background-dark) / 0.35) 25%, rgb(var(--color-background-card) / 0.9) 50%, rgb(var(--color-background-dark) / 0.35) 75%);
    background-size: 220% 100%;
  }

  .loading-skeleton-hero span:nth-child(1) {
    left: 7%;
    top: 20%;
    width: 42%;
    height: 42px;
  }

  .loading-skeleton-hero span:nth-child(2) {
    left: 7%;
    top: 38%;
    width: 32%;
    height: 18px;
  }

  .loading-skeleton-hero span:nth-child(3) {
    right: 7%;
    top: 16%;
    width: 36%;
    height: 64%;
    border-radius: 32px;
  }

  .loading-skeleton-grid {
    @apply grid grid-cols-1 gap-4 md:grid-cols-3;
  }

  .loading-skeleton-hero,
  .loading-skeleton-grid::before,
  .loading-skeleton-grid::after,
  .loading-skeleton-grid > span {
    background:
      linear-gradient(90deg, rgb(var(--color-background-dark) / 0.35) 25%, rgb(var(--color-background-card) / 0.9) 50%, rgb(var(--color-background-dark) / 0.35) 75%),
      rgb(var(--color-background-card) / 1);
    background-size: 220% 100%;
    animation: shimmer 1.4s infinite linear;
  }

  .loading-skeleton-grid::before,
  .loading-skeleton-grid::after,
  .loading-skeleton-grid > span {
    content: "";
    min-height: 180px;
    border-radius: 24px;
    border: 1px solid rgb(var(--color-background-dark) / 1);
  }

  .loading-skeleton-grid > span {
    display: block;
  }

  .pull-refresh-indicator {
    @apply fixed left-1/2 top-3 z-[60] flex items-center gap-2 rounded-full border border-background-dark bg-background-card/95 px-4 py-2 text-xs font-bold text-primary shadow-premium backdrop-blur-xl;
    --pull-distance: 0px;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, calc(-120% + var(--pull-distance)));
    transition: opacity 0.16s ease, transform 0.16s ease;
  }

  .pull-refresh-indicator.is-visible,
  .pull-refresh-indicator.is-refreshing {
    opacity: 1;
  }

  .pull-refresh-indicator.is-ready {
    @apply border-success/50 text-success-dark;
  }

  .pull-refresh-ring {
    @apply h-4 w-4 rounded-full border-2 border-current border-t-transparent;
  }

  .pull-refresh-indicator.is-refreshing .pull-refresh-ring {
    animation: pull-spin 0.75s linear infinite;
  }

  .hero-art-stage {
    position: relative;
    min-height: 520px;
  }

  .hero-woman-frame {
    @apply absolute inset-y-0 right-6 left-16 overflow-hidden rounded-[2rem] border border-background/20 bg-background-card shadow-premium;
    transform: rotate(1.5deg);
  }

  .hero-woman-frame img,
  .hero-sticky-note img,
  .hero-sketch-note img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .hero-woman-frame img {
    filter: blur(2.4px) saturate(0.92) brightness(1.02);
    transform: scale(1.045);
  }

  .hero-sticky-note {
    @apply absolute right-0 top-8 w-[58%] rounded-2xl border border-background-dark bg-[#fffaf0] p-3 shadow-premium-hover;
    transform: rotate(-5deg);
  }

  .hero-sticky-note img {
    aspect-ratio: 4 / 3;
    border-radius: 14px;
  }

  .hero-note-tape {
    @apply absolute left-1/2 top-[-14px] h-7 w-24 -translate-x-1/2 rounded-sm bg-accent-light/70 shadow-premium;
    transform: translateX(-50%) rotate(3deg);
  }

  .hero-sketch-note {
    @apply absolute bottom-14 left-0 w-[34%] overflow-hidden rounded-2xl border border-background-dark bg-[#efe2c6] p-2 shadow-premium;
    aspect-ratio: 1 / 0.72;
    transform: rotate(7deg);
  }

  .note-card {
    @apply absolute inset-0 rounded-lg border border-background-dark bg-background-card p-6 shadow-premium;
    font-family: "Segoe Print", "Comic Sans MS", BacherDemo, cursive;
    transform-origin: center bottom;
  }

  .clean-dialog {
    @apply rounded-2xl border border-background-dark bg-background-card shadow-2xl;
  }

  .time-option-disabled {
    @apply text-secondary/45 bg-background-dark/40;
  }

  .leaflet-container {
    font-family: Inter, sans-serif;
  }

  .leaflet-control-attribution {
    font-size: 10px;
  }
}

/* Reference-style theme flash: radial curtain from the theme button. */
.theme-flip body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background:
    radial-gradient(
      circle at var(--theme-origin-x, calc(100% - 96px)) var(--theme-origin-y, 42px),
      rgb(var(--color-accent) / 0.22),
      transparent 28%
    ),
    rgb(var(--color-background) / 0.72);
  animation: theme-flash 0.64s forwards;
}

@keyframes theme-flash {
  0% {
    clip-path: circle(0 at var(--theme-origin-x, calc(100% - 96px)) var(--theme-origin-y, 42px));
    opacity: 0.9;
  }
  55% {
    clip-path: circle(145% at var(--theme-origin-x, calc(100% - 96px)) var(--theme-origin-y, 42px));
    opacity: 0.72;
  }
  100% {
    clip-path: circle(145% at var(--theme-origin-x, calc(100% - 96px)) var(--theme-origin-y, 42px));
    opacity: 0;
  }
}

/* Desktop fade-on-scroll reveal */
@media (min-width: 1024px) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
  }
}

/* Center-weighted scroll focus: the centered content breathes forward while
   surrounding content stays readable but visually quieter. */
@media (min-width: 1024px) {
  [data-scroll-focus] {
    opacity: var(--focus-opacity, 0.72);
    transform: scale(var(--focus-scale, 0.965));
    filter: saturate(var(--focus-saturate, 0.9));
    transform-origin: center;
    transition: opacity 0.18s ease-out, transform 0.18s ease-out, filter 0.18s ease-out;
    will-change: opacity, transform, filter;
  }

  [data-scroll-focus].is-scroll-centered {
    z-index: 1;
  }

  [data-reveal][data-scroll-focus]:not(.is-revealed) {
    opacity: 0;
    transform: translateY(26px) scale(var(--focus-scale, 0.965));
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-flip body::after {
    animation: none;
    opacity: 0;
  }

  [data-scroll-focus] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

#dumpling-bg-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.22;
}

[data-theme="dark"] #dumpling-bg-canvas {
  opacity: 0.12;
}

.app-shell {
  isolation: isolate;
}

/* Animations */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

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

.animate-slide-up {
  animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

.animate-fade-scroll {
  animation: fadeScroll 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.shimmer-loading {
  background: linear-gradient(90deg, #f3f3f3 25%, #ececec 50%, #f3f3f3 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}

/* Live Map Pulse Animation */
.map-pulse {
  position: relative;
}
.map-pulse::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 50%;
  @apply bg-accent/30;
  animation: pulse-ring 1.5s cubic-bezier(0.215, 0.610, 0.355, 1) infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.33);
  }
  80%, 100% {
    opacity: 0;
  }
}