/**
 * ReservaYa Theme CSS
 * Generated from: src/cljc/reservaya/ui/theme.cljc
 * DO NOT EDIT DIRECTLY - Run: clj -M:dev -m theme-css
 */

/* =============================================================================
   CSS Custom Properties (Design Tokens)
   ============================================================================= */

:root {
  /* Colors - Primary */
  --color-primary: #0251D5;
  --color-primary-light: #EBF0FF;
  --color-primary-dark: #013EA3;

  /* Colors - Secondary & Background */
  --color-secondary: #1A1A2E;
  --color-background: #F5F1EC;

  /* Colors - Semantic */
  --color-success: #10B981;
  --color-warning: #FBBF24;
  --color-error: #EF4444;
  --color-info: #3b82f6;
  --color-star: #FBBF24;
  --color-celeste: #79DEFF;
  --color-pink: #F472B6;

  /* Shadows */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.15);

  /* Fonts */
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, system-ui, sans-serif;
  --font-display: 'Plus Jakarta Sans', Inter, -apple-system, system-ui, sans-serif;
  --font-serif: Georgia, Cambria, Times New Roman, serif;
}

/* =============================================================================
   Color Utility Classes
   ============================================================================= */

.bg-primary { background-color: var(--color-primary); }
.bg-primary-light { background-color: var(--color-primary-light); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-background { background-color: var(--color-background); }

.text-primary { color: var(--color-primary); }
.text-primary-light { color: var(--color-primary-light); }
.text-secondary { color: var(--color-secondary); }

.border-primary { border-color: var(--color-primary); }
.border-secondary { border-color: var(--color-secondary); }

/* =============================================================================
   Shadow Utility Classes
   ============================================================================= */

.shadow-card { box-shadow: var(--shadow-card); }
.shadow-card-hover { box-shadow: var(--shadow-card-hover); }
.shadow-dropdown { box-shadow: var(--shadow-dropdown); }

/* =============================================================================
   Custom Component Styles
   ============================================================================= */

/* Price level indicator */
.price-filled { color: var(--color-primary); }
.price-empty { color: #d1d5db; }

/* Time slot buttons */
.time-slot {
  border: 1px solid #e5e7eb;
  transition: all 0.2s;
}
.time-slot:hover {
  border-color: var(--color-primary);
  background-color: var(--color-primary-light);
}

/* =============================================================================
   Animations
   ============================================================================= */

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

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

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animate-spin { animation: spin 1s linear infinite; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fadeInUp { animation: fadeInUp 0.6s ease-out forwards; }

@keyframes slideIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-slide-in { animation: slideIn 0.3s ease-out forwards; }

/* Scroll-triggered reveal animations using IntersectionObserver-free CSS */
@keyframes revealUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Scroll-triggered reveal */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Reveal from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Reveal from right */
.reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Reveal with scale (for stats, CTAs) */
.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* Staggered children within a revealed parent */
.reveal-on-scroll.revealed > :nth-child(1) { transition-delay: 0s; }
.reveal-on-scroll.revealed > :nth-child(2) { transition-delay: 0.05s; }
.reveal-on-scroll.revealed > :nth-child(3) { transition-delay: 0.1s; }
.reveal-on-scroll.revealed > :nth-child(4) { transition-delay: 0.15s; }
.reveal-on-scroll.revealed > :nth-child(5) { transition-delay: 0.2s; }
.reveal-on-scroll.revealed > :nth-child(6) { transition-delay: 0.25s; }

/* Carousel arrows — only show on hover when content overflows (desktop only) */
@media (min-width: 768px) {
  .carousel-wrapper.carousel-scrollable:hover .carousel-arrow-left,
  .carousel-wrapper.carousel-scrollable:hover .carousel-arrow-right {
    display: flex !important;
    opacity: 1;
  }
  .carousel-wrapper .carousel-arrow-left,
  .carousel-wrapper .carousel-arrow-right {
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .carousel-wrapper .carousel-arrow-left:hover,
  .carousel-wrapper .carousel-arrow-right:hover {
    background: #F5F5F7 !important;
  }
}


/* Bottom tab bar — glassmorphism + compact on scroll */
.tab-glass {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12), 0 1px 0 rgba(255,255,255,0.8) inset !important;
  transition: height 0.26s cubic-bezier(0.32, 0.72, 0, 1), padding 0.26s cubic-bezier(0.32, 0.72, 0, 1);
}
.tab-label {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.tab-icon {
  transition: transform 0.2s ease;
}

/* Compact state: still readable labels, just denser */
.tab-compact .tab-glass {
  height: 54px !important;
}
.tab-compact .tab-label {
  opacity: 0.9;
  transform: translateY(0.5px) scale(0.9);
}
.tab-compact .tab-icon {
  transform: scale(0.94);
}

/* Header always light — no scroll color swap needed */

/* Desktop-only reservation column */
.desktop-only { display: none; }
@media (min-width: 1024px) { .desktop-only { display: block; } }
.mobile-only { display: block; }
@media (min-width: 1024px) { .mobile-only { display: none; } }

/* Timezone notice — right-aligned on desktop */
@media (min-width: 768px) {
  .tz-notice {
    left: auto !important;
    right: 16px !important;
    transform: none !important;
  }
}

/* Scroll-to-top button — shown via JS */
.scroll-top-btn.scroll-top-visible {
  opacity: 1 !important;
  transform: scale(1) !important;
  pointer-events: auto !important;
}

/* =============================================================================
   Card Hover Effect
   ============================================================================= */

.card-hover {
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.card-hover:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

/* =============================================================================
   Friends Badge Tooltip (hover on desktop, click on mobile)
   ============================================================================= */

.ry-friends-badge:hover .ry-friends-tooltip,
.ry-friends-badge.tooltip-open .ry-friends-tooltip {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* =============================================================================
   Filter Chip Active Microinteraction
   ============================================================================= */

.filter-chip-active {
  transform: scale(0.97);
}

/* =============================================================================
   Skeleton-to-Content Transition
   ============================================================================= */

.skeleton-fade-in {
  animation: skeletonReveal 0.35s ease-out both;
}

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

/* =============================================================================
   Mobile Store Compliance (App Store / Google Play)
   Only applies below the lg breakpoint (< 1024px) — desktop is untouched.
   ============================================================================= */

@media (max-width: 1023px) {

  /* --- 1. Touch Targets: minimum 44×44px (Apple HIG) ---
     Instead of forcing min-height/min-width (which breaks compact UI),
     we expand the tap area with an invisible ::after pseudo-element.
     This ensures a 44×44px hit area without changing visual layout. */
  button,
  a,
  select,
  input[type="checkbox"],
  input[type="radio"],
  [role="button"],
  [tabindex] {
    position: relative;
  }
  button::after,
  a::after,
  select::after,
  input[type="checkbox"]::after,
  input[type="radio"]::after,
  [role="button"]::after,
  [tabindex]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 44px;
    min-height: 44px;
    width: 100%;
    height: 100%;
  }

  /* Inputs and textareas: min-height is safe here — it just makes
     the field slightly taller, which is fine for usability. */
  input:not([type="checkbox"]):not([type="radio"]),
  textarea {
    min-height: 44px;
  }

  /* --- 2. Text Sizes: minimum 11px (Apple requirement) ---
     Override any text below 11px. Using !important because inline
     styles from ClojureScript have higher specificity. */
  .tab-label {
    font-size: 0.6875rem !important; /* 11px — was 9px */
  }

  /* --- 3. Input Font Size: minimum 16px (prevents iOS auto-zoom) ---
     iOS Safari zooms the viewport when focusing inputs < 16px.
     This is the single most annoying UX bug on iOS. */
  input,
  select,
  textarea {
    font-size: 1rem !important; /* 16px */
  }
}