/* ═══════════════════════════════════════════════════════════════
   LUMA DUBAI — style.css
   Supplements Tailwind CDN. Mirrors the <style> blocks from
   code 1.html and code.html exactly, plus view-switching helpers.
═══════════════════════════════════════════════════════════════ */

/* ─── Skeleton loader (shown while Supabase products load) ─── */
.luma-skeleton {
  height: 540px;
  border-radius: 32px;
  background: linear-gradient(90deg, #efeeea 25%, #e4e2df 50%, #efeeea 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Product card image nav arrows (like ALDR3 createCard) ── */
.luma-img-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(251,249,246,0.9);
  border: none;
  color: #4e614e;
  font-size: 1.5rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.2s;
}
.group:hover .luma-img-arrow { opacity: 1; }
.luma-img-left  { left: 12px; }
.luma-img-right { right: 12px; }
.luma-img-counter {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(251,249,246,0.85);
  color: #4e614e;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 9999px;
  letter-spacing: 0.05em;
  opacity: 0;
  transition: opacity 0.2s;
}
.group:hover .luma-img-counter { opacity: 1; }

/* ─── Product detail image arrows ─────────────────────────── */
.luma-pd-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(251,249,246,0.92);
  border: none;
  color: #4e614e;
  font-size: 1.8rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  box-shadow: 0 4px 16px rgba(80,99,80,0.12);
  transition: background 0.2s;
}
.luma-pd-arrow:hover { background: #e1ec48; }
.luma-pd-arrow-left  { left: -22px; }
.luma-pd-arrow-right { right: -22px; }
.luma-pd-counter {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  color: #747871;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* ─── From code 1.html <style> block ──────────────────────────── */
body {
  background-color: #fbf9f6;
  color: #1b1c1a;
  -webkit-font-smoothing: antialiased;
}

.soft-card-shadow {
  box-shadow: 0 30px 60px -12px rgba(80, 99, 80, 0.05);
}

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.glass-header {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ─── From code.html <style> block ────────────────────────────── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.fill-icon {
  font-variation-settings: 'FILL' 1;
}
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d3e8d0; border-radius: 10px; }

/* ─── View switching ──────────────────────────────────────────── */
/* Views are shown/hidden via JS toggling .hidden (Tailwind) */
/* Smooth fade when a view is revealed */
#view-home,
#view-product,
#view-cart,
#view-success {
  animation: viewFadeIn 0.28s ease;
}

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

/* ─── Cart badge ──────────────────────────────────────────────── */
.cart-badge { transition: transform 0.2s; }
.cart-badge.pop { animation: badgePop 0.3s cubic-bezier(.22,.68,0,1.4); }
@keyframes badgePop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.5); }
  100% { transform: scale(1); }
}

/* ─── Toast notification ──────────────────────────────────────── */
.toast-msg {
  position: fixed;
  bottom: 90px; /* above mobile nav */
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1b1c1a;
  color: #fff;
  padding: 13px 26px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Be Vietnam Pro', sans-serif;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(.22,.68,0,1.2);
  white-space: nowrap;
  z-index: 9999;
  box-shadow: 0 10px 30px rgba(0,0,0,0.22);
  display: flex;
  align-items: center;
  gap: 8px;
}
.toast-msg.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (min-width: 768px) {
  .toast-msg { bottom: 28px; }
}

/* ─── Cart item remove animation ─────────────────────────────── */
.cart-item-removing {
  transition: opacity 0.26s ease, transform 0.26s ease;
  opacity: 0 !important;
  transform: scale(0.94) translateY(12px) !important;
}

/* ─── Spinner (for checkout submit) ──────────────────────────── */
.spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(0,0,0,0.2);
  border-top-color: #636900;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Success view ────────────────────────────────────────────── */
.success-bounce {
  animation: successBounce 0.55s cubic-bezier(.22,.68,0,1.4);
}
@keyframes successBounce {
  from { transform: scale(0) rotate(-10deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg);  opacity: 1; }
}

/* ─── Mobile nav active pill ─────────────────────────────────── */
.nav-active {
  background-color: #e1ec48 !important;
  color: #636900 !important;
}
.brand-logo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.brand-logo {
  display: block;
  width: auto;
  object-fit: contain;
}

.brand-logo-header {
  height: 38px;
  max-width: 150px;
}

.brand-logo-footer {
  height: 70px;
  max-width: 220px;
}

@media (max-width: 767px) {
  .brand-logo-header {
    height: 32px;
    max-width: 120px;
  }

  .brand-logo-footer {
    height: 56px;
    max-width: 180px;
  }
}