/* ============================================
   MOBILE APP EXPERIENCE
   Organic Urban — Native App-Like Feel
   ============================================

   This CSS transforms the website into a native
   mobile app experience with:
   - Smooth page transitions
   - iOS/Android native behaviors
   - Gesture-friendly interactions
   - Skeleton loading states
   - Bottom sheet modals
   - Toast notifications
   ============================================ */

/* ============================================
   1. APP SHELL & ROOT BEHAVIORS
   ============================================ */

/* Prevent overscroll bounce — but only when scroll-locked (menu open).
   Using 'none' on html globally was blocking scroll on some mobile browsers.
   The body rule uses 'contain' which is safe for normal scrolling. */
html.menu-locked {
  overscroll-behavior: none;
}

/* iOS safe areas */
/* NOTE (2026-02-10): Removed 'overscroll-behavior-y: contain' from body.
   It was intended to prevent scroll chaining on iOS, but when combined
   with style.css it completely blocked scroll on desktop browsers.
   If scroll chaining becomes an issue on iOS, consider applying this
   rule ONLY inside a mobile-specific media query. */

/* PWA standalone mode adjustments */
@media (display-mode: standalone) {
  body {
    /* Extra padding for iOS status bar */
    padding-top: calc(var(--header-height-mobile, 60px) + env(safe-area-inset-top));
  }

  .site-header {
    padding-top: env(safe-area-inset-top);
    height: calc(var(--header-height-mobile, 60px) + env(safe-area-inset-top));
  }
}

/* ============================================
   2. PAGE TRANSITIONS (App-Like Navigation)
   ============================================ */

/* Page container for transitions */
.page-transition-container {
  position: relative;
  min-height: 100vh;
}

/* Entering page (slide in from right) */
.page-enter {
  animation: pageSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Exiting page (slide out to left) */
.page-exit {
  animation: pageSlideOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Back navigation (slide in from left) */
.page-enter-back {
  animation: pageSlideInBack 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.page-exit-back {
  animation: pageSlideOutBack 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes pageSlideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes pageSlideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to {
    transform: translateX(-30%);
    opacity: 0.5;
  }
}

@keyframes pageSlideInBack {
  from {
    transform: translateX(-30%);
    opacity: 0.5;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes pageSlideOutBack {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Fade transition for modals/overlays */
.fade-enter {
  animation: fadeIn 0.2s ease-out forwards;
}

.fade-exit {
  animation: fadeOut 0.2s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* ============================================
   3. NATIVE TOUCH BEHAVIORS
   ============================================ */

/* Smooth momentum scrolling for scrollable containers only.
   IMPORTANT: Do NOT apply -webkit-overflow-scrolling to * (all elements).
   It causes scroll-blocking bugs on iOS when set globally. */
.bottom-sheet__content,
.mobile-nav-content,
#mobile-nav {
  -webkit-overflow-scrolling: touch;
}

/* Remove tap highlight; touch-action only on small controls so document scroll isn't blocked */
button,
input,
select,
textarea,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

a {
  -webkit-tap-highlight-color: transparent;
}

/* Press state for buttons (native feel) */
.btn,
button,
[role="button"],
.product-card,
.category-card,
.nav-item {
  transition: transform 0.1s ease-out, opacity 0.1s ease-out;
  will-change: transform;
}

.btn:active,
button:active,
[role="button"]:active {
  transform: scale(0.97);
  opacity: 0.9;
}

/* Card press effect */
.product-card:active,
.category-card:active {
  transform: scale(0.98);
}

/* ============================================
   4. PULL TO REFRESH
   ============================================ */

.pull-to-refresh {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-100%);
  transition: transform 0.2s ease-out;
  z-index: var(--z-overlay, 3000);
  pointer-events: none;
}

.pull-to-refresh.pulling {
  transform: translateY(0);
}

.pull-to-refresh.refreshing {
  transform: translateY(0);
}

.pull-to-refresh__spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border-soft, #E5E0D8);
  border-top-color: var(--accent-sage, #7A9A7A);
  border-radius: 50%;
}

.pull-to-refresh.refreshing .pull-to-refresh__spinner {
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================
   5. SKELETON LOADING SCREENS
   ============================================ */

/* Base skeleton shimmer */
.skeleton {
  background: linear-gradient(90deg,
      #f0ebe3 0%,
      #f7f3ed 50%,
      #f0ebe3 100%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}

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

  100% {
    background-position: -200% 0;
  }
}

/* Skeleton variants */
.skeleton-text {
  height: 16px;
  margin-bottom: 8px;
}

.skeleton-text.short {
  width: 60%;
}

.skeleton-text.medium {
  width: 80%;
}

.skeleton-text.full {
  width: 100%;
}

.skeleton-title {
  height: 24px;
  width: 70%;
  margin-bottom: 12px;
}

.skeleton-image {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
}

.skeleton-button {
  height: 48px;
  width: 100%;
  border-radius: 12px;
}

.skeleton-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

/* Product card skeleton */
.skeleton-product-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: var(--white, #fff);
  border-radius: 16px;
}

.skeleton-product-card .skeleton-image {
  aspect-ratio: 1;
}

/* Product grid skeleton */
.skeleton-product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 16px;
}

/* ============================================
   6. BOTTOM SHEET MODALS (iOS/Android Style)
   ============================================ */

.bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 90vh;
  background: var(--white, #fff);
  border-radius: 20px 20px 0 0;
  z-index: var(--z-modal, 4000);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.bottom-sheet.open {
  transform: translateY(0);
}

/* Handle bar for dragging */
.bottom-sheet__handle {
  width: 36px;
  height: 4px;
  background: var(--border-soft, #E5E0D8);
  border-radius: 2px;
  margin: 12px auto;
  flex-shrink: 0;
}

.bottom-sheet__header {
  padding: 0 20px 16px;
  border-bottom: 1px solid var(--border-soft, #E5E0D8);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bottom-sheet__title {
  font-family: var(--font-serif, Georgia);
  font-size: 20px;
  font-weight: 500;
}

.bottom-sheet__close {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--bg-soft, #EFE9E1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.bottom-sheet__content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 20px;
}

/* Bottom sheet backdrop
   IMPORTANT: Must be display:none by default, NOT just opacity:0.
   A fixed full-screen element with display:block can intercept touch
   scrolling on mobile browsers even with pointer-events:none. */
.bottom-sheet-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: calc(var(--z-modal, 4000) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.bottom-sheet-backdrop.visible {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

/* ============================================
   7. TOAST NOTIFICATIONS
   ============================================ */

.toast-container {
  position: fixed;
  bottom: calc(var(--mobile-bottom-nav-height, 64px) + 16px + env(safe-area-inset-bottom));
  left: 16px;
  right: 16px;
  z-index: var(--z-toast, 5000);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  background: #1E1919;
  color: white;
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  transform: translateY(100px);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease;
  pointer-events: auto;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.toast.success {
  background: #166534;
}

.toast.error {
  background: #991B1B;
}

.toast.warning {
  background: #92400E;
}

.toast__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.toast__message {
  flex: 1;
}

.toast__action {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* ============================================
   8. SWIPE ACTIONS (List Items)
   ============================================ */

.swipe-container {
  position: relative;
  overflow: hidden;
}

.swipe-item {
  position: relative;
  background: var(--white, #fff);
  transition: transform 0.2s ease-out;
  z-index: 1;
}

.swipe-item.swiping {
  transition: none;
}

.swipe-actions {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: stretch;
  z-index: 0;
}

.swipe-action {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  color: white;
  font-weight: 500;
  font-size: 14px;
}

.swipe-action.delete {
  background: #DC2626;
}

.swipe-action.favorite {
  background: var(--accent-sage, #7A9A7A);
}

/* ============================================
   9. FLOATING ACTION BUTTON
   ============================================ */

.fab {
  position: fixed;
  bottom: calc(var(--mobile-bottom-nav-height, 64px) + 16px + env(safe-area-inset-bottom));
  right: 16px;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--accent-sage, #7A9A7A);
  color: white;
  border: none;
  box-shadow: 0 4px 16px rgba(122, 154, 122, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: var(--z-sticky, 2000);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fab:active {
  transform: scale(0.92);
  box-shadow: 0 2px 8px rgba(122, 154, 122, 0.3);
}

.fab svg {
  width: 24px;
  height: 24px;
}

/* ============================================
   10. IMAGE GALLERY (Swipeable)
   ============================================ */

.image-gallery {
  position: relative;
  width: 100%;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
}

.image-gallery__track {
  display: flex;
  transition: transform 0.3s ease-out;
  will-change: transform;
}

.image-gallery__track.dragging {
  transition: none;
}

.image-gallery__slide {
  flex: 0 0 100%;
  width: 100%;
}

.image-gallery__slide img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Gallery dots */
.image-gallery__dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}

.image-gallery__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.image-gallery__dot.active {
  background: white;
  transform: scale(1.3);
}

/* ============================================
   11. SEARCH (iOS-Style)
   ============================================ */

.app-search {
  background: var(--bg-soft, #EFE9E1);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-search__icon {
  width: 20px;
  height: 20px;
  color: var(--text-muted, #736C64);
  flex-shrink: 0;
}

.app-search__input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 16px;
  color: var(--text-dark, #1E1919);
  outline: none;
}

.app-search__input::placeholder {
  color: var(--text-muted, #736C64);
}

.app-search__clear {
  width: 20px;
  height: 20px;
  border: none;
  background: var(--text-muted, #736C64);
  color: var(--bg-soft, #EFE9E1);
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.app-search__input:not(:placeholder-shown)+.app-search__clear {
  display: flex;
}

/* ============================================
   12. HAPTIC FEEDBACK INDICATORS
   ============================================ */

/* Visual feedback when haptic fires */
.haptic-trigger {
  position: relative;
}

.haptic-trigger::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent-sage, #7A9A7A);
  border-radius: inherit;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}

.haptic-trigger.haptic-pulse::after {
  animation: hapticPulse 0.3s ease-out;
}

@keyframes hapticPulse {
  0% {
    opacity: 0.3;
    transform: scale(0.8);
  }

  100% {
    opacity: 0;
    transform: scale(1.1);
  }
}

/* ============================================
   13. SEGMENT CONTROL (iOS-Style Tabs)
   ============================================ */

.segment-control {
  display: flex;
  background: var(--bg-soft, #EFE9E1);
  border-radius: 10px;
  padding: 3px;
  position: relative;
}

.segment-control__item {
  flex: 1;
  padding: 10px 16px;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted, #736C64);
  cursor: pointer;
  border-radius: 8px;
  transition: color 0.2s;
  position: relative;
  z-index: 1;
}

.segment-control__item.active {
  color: var(--text-dark, #1E1919);
}

.segment-control__indicator {
  position: absolute;
  top: 3px;
  bottom: 3px;
  background: var(--white, #fff);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: left 0.2s ease-out, width 0.2s ease-out;
  z-index: 0;
}

/* ============================================
   14. ACTION SHEET (iOS-Style)
   ============================================ */

.action-sheet {
  position: fixed;
  bottom: 0;
  left: 8px;
  right: 8px;
  z-index: var(--z-modal, 4000);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}

.action-sheet.open {
  transform: translateY(0);
}

.action-sheet__group {
  background: var(--white, #fff);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 8px;
}

.action-sheet__item {
  display: block;
  width: 100%;
  padding: 16px;
  border: none;
  background: transparent;
  font-size: 18px;
  color: #007AFF;
  text-align: center;
  cursor: pointer;
  border-bottom: 1px solid var(--border-soft, #E5E0D8);
}

.action-sheet__item:last-child {
  border-bottom: none;
}

.action-sheet__item.destructive {
  color: #FF3B30;
}

.action-sheet__item.cancel {
  font-weight: 600;
}

/* ============================================
   15. BADGE (Notification Dots)
   ============================================ */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #DC2626;
  color: white;
  font-size: 11px;
  font-weight: 700;
  border-radius: 9px;
}

.badge.dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
  padding: 0;
  border-radius: 50%;
}

.badge.success {
  background: var(--accent-sage, #7A9A7A);
}

/* ============================================
   16. LOADING STATES
   ============================================ */

/* Full page loader */
.page-loader {
  position: fixed;
  inset: 0;
  background: var(--bg-light, #F7F5F2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: var(--z-critical, 99999);
}

.page-loader__logo {
  width: 80px;
  height: 80px;
  margin-bottom: 24px;
  animation: logoPulse 1.5s ease-in-out infinite;
}

@keyframes logoPulse {

  0%,
  100% {
    opacity: 0.6;
    transform: scale(0.95);
  }

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

.page-loader__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-soft, #E5E0D8);
  border-top-color: var(--accent-sage, #7A9A7A);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Inline loader */
.inline-loader {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted, #736C64);
  font-size: 14px;
}

.inline-loader__dots {
  display: flex;
  gap: 4px;
}

.inline-loader__dot {
  width: 6px;
  height: 6px;
  background: var(--accent-sage, #7A9A7A);
  border-radius: 50%;
  animation: dotPulse 1s ease-in-out infinite;
}

.inline-loader__dot:nth-child(2) {
  animation-delay: 0.2s;
}

.inline-loader__dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes dotPulse {

  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.8);
  }

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

/* ============================================
   17. SAFE AREAS & NOTCH HANDLING
   ============================================ */

@supports (padding: env(safe-area-inset-top)) {

  /* Ensure content doesn't go under notch */
  .safe-area-top {
    padding-top: env(safe-area-inset-top);
  }

  .safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .safe-area-left {
    padding-left: env(safe-area-inset-left);
  }

  .safe-area-right {
    padding-right: env(safe-area-inset-right);
  }

  /* Full bleed with safe areas */
  .safe-area-inset {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
}

/* ============================================
   18. REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .skeleton {
    animation: none;
    background: #f0ebe3;
  }
}