/**
 * E-Shelle Resto — Custom CSS
 * Supplemental styles on top of Tailwind CDN
 */

/* ── Scrollbar hide (horizontal scroll sections) ─────────────────────────── */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* ── Form inputs (custom class used in forms.py) ─────────────────────────── */
.form-input {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #111827;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input:focus {
  outline: none;
  border-color: #E85D26;
  box-shadow: 0 0 0 3px rgba(232, 93, 38, 0.15);
}

select.form-input {
  appearance: auto;
}

/* ── HTMX loading indicator ──────────────────────────────────────────────── */
.htmx-indicator {
  opacity: 0;
  transition: opacity 200ms ease-in;
  background: linear-gradient(90deg, #E85D26, #F5A623);
  transform-origin: left center;
  animation: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
  animation: htmx-slide 1.5s ease-in-out infinite;
}

@keyframes htmx-slide {
  0%   { width: 0; }
  50%  { width: 70%; }
  100% { width: 100%; }
}

/* ── Safe area bottom (mobile notch support) ─────────────────────────────── */
.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Line clamp ──────────────────────────────────────────────────────────── */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Skeleton loading animation ──────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: 0.5rem;
}

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

/* ── Restaurant card hover effect ────────────────────────────────────────── */
.restaurant-card img {
  transition: transform 0.3s ease;
}

.restaurant-card:hover img {
  transform: scale(1.05);
}

/* ── WhatsApp green button pulse ─────────────────────────────────────────── */
.wa-pulse {
  animation: wa-pulse 2s infinite;
}

@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  50%       { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
}

/* ── Price badge ─────────────────────────────────────────────────────────── */
.price-badge {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ── Mobile bottom nav active indicator ──────────────────────────────────── */
nav a.text-resto-primary {
  position: relative;
}

nav a.text-resto-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background-color: #E85D26;
  border-radius: 0 0 4px 4px;
}

/* ── Tailwind utilities that need explicit definition ─────────────────────── */
.bg-resto-primary  { background-color: #E85D26; }
.text-resto-primary { color: #E85D26; }
.border-resto-primary { border-color: #E85D26; }
.ring-resto-primary  { --tw-ring-color: #E85D26; }
.hover\:bg-resto-primary:hover { background-color: #E85D26; }
.hover\:text-resto-primary:hover { color: #E85D26; }

.bg-resto-secondary  { background-color: #F5A623; }
.text-resto-secondary { color: #F5A623; }

.bg-resto-dark  { background-color: #1A1A2E; }
.from-resto-dark { --tw-gradient-from: #1A1A2E; }
.via-resto-dark  { --tw-gradient-via: #1A1A2E; }