/* ============================================================
   WEBORACLE SHRINE — Glass Feel
   Skull bg + glassmorphism + animated life.
   Refactored: duplicates removed, structural nav rules (position,
   z-index, display, animation) intentionally left to style.css so
   the two files never fight over the mobile menu. This file only
   adds the glass "skin" on top.
   ============================================================ */

/* ── SITE BACKGROUND ── */
html { min-height: 100%; }
body {
  background:
    linear-gradient(135deg, rgba(0,0,0,0.82) 0%, rgba(6,20,10,0.88) 100%),
    url('/assets/img/skull-bg.jpg') center center / cover fixed;
  background-color: #060a0e;
  min-height: 100vh;
}

/* Green tint overlay on skull */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 60% 40%, rgba(29,158,117,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 20% 80%, rgba(29,158,117,0.10) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Animated scan line across whole page */
body::after {
  content: '';
  position: fixed;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(94,239,192,0.35), transparent);
  animation: scanPage 8s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes scanPage {
  0%   { top: -2px; opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { top: 100vh; opacity: 0; }
}

/* Everything sits above bg layers */
section, footer, .admin-main, .admin-sidebar, .auth-section { position: relative; z-index: 2; }
/* .nav keeps its own stacking context (position: sticky; z-index: 1000) from
   style.css untouched — it must always outrank page sections and their
   glass/blur layers, or the mobile dropdown renders behind the page. */

/* ── NAV GLASS SKIN (cosmetic only — layout lives in style.css) ── */
.nav {
  background: rgba(6,10,14,0.55) !important;
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid rgba(29,158,117,0.25) !important;
  box-shadow: 0 4px 32px rgba(0,0,0,0.4);
}

/* ── MOBILE NAV GLASS SKIN ── */
.nav-mobile {
  background: rgba(4,8,6,.96) !important;
  border-top: 1px solid rgba(29,158,117,.25);
  border-bottom: 1px solid rgba(29,158,117,.25);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.nav-mobile a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); }
.nav-mobile a:hover { background: rgba(29,158,117,.08); color: var(--green); }

/* ── GLASS CARDS ── */
.product-card,
.cat-card,
.step,
.payment-card,
.order-card,
.order-summary,
.product-info-card,
.admin-form-card,
.admin-table-card,
.auth-card,
.admin-login-card,
.stats-card {
  background: rgba(6,12,10,0.52) !important;
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(29,158,117,0.22) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(94,239,192,0.08);
  animation: borderPulse 4.5s ease-in-out infinite;
}

.product-card:hover,
.cat-card:hover {
  background: rgba(10,22,16,0.65) !important;
  border-color: rgba(29,158,117,0.55) !important;
  box-shadow: 0 12px 48px rgba(29,158,117,0.18), inset 0 1px 0 rgba(94,239,192,0.15);
}

@keyframes borderPulse {
  0%, 100% { border-color: rgba(29,158,117,0.22); box-shadow: 0 8px 32px rgba(0,0,0,0.35); }
  50% { border-color: rgba(94,239,192,0.38); box-shadow: 0 8px 40px rgba(29,158,117,0.12); }
}

/* ── SECTION BACKGROUNDS ── */
.section, .section-alt, .stats-bar, .newsletter-section, .footer {
  background: transparent !important;
}
.section-alt {
  background: rgba(0,0,0,0.18) !important;
  backdrop-filter: blur(2px);
}

/* ── HERO GLASS PANEL ── */
.shrine-hero { background: transparent !important; min-height: 100vh; }
.shrine-content {
  background: rgba(6,12,10,0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(29,158,117,0.18);
  border-radius: 24px;
  padding: 48px 40px 40px;
  max-width: 720px;
  margin: 0 auto;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5), inset 0 1px 0 rgba(94,239,192,0.10);
}
/* Hero head stage is hidden in favor of the skull background image */
.shrine-head-stage,
.shrine-head-hint { display: none !important; }
.shrine-walkway-lines { opacity: 0.4; }

/* ── SEARCH BAR GLASS ── */
.search-bar {
  background: rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(29,158,117,0.35) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(94,239,192,0.08);
}
.search-bar:focus-within {
  border-color: rgba(94,239,192,0.6) !important;
  box-shadow: 0 0 0 3px rgba(29,158,117,0.15), 0 4px 24px rgba(0,0,0,0.3);
}

/* ── FOOTER GLASS ── */
.footer {
  background: rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(29,158,117,0.2) !important;
}

/* ── FORM INPUTS GLASS ── */
.form-group input,
.form-group select,
.form-group textarea {
  background: rgba(0,0,0,0.4) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(29,158,117,0.28) !important;
  color: #fff !important;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: rgba(94,239,192,0.6) !important;
  box-shadow: 0 0 0 3px rgba(29,158,117,0.15);
  background: rgba(0,0,0,0.55) !important;
}

/* ── ADMIN GLASS ── */
.admin-sidebar {
  background: rgba(4,8,6,0.75) !important;
  backdrop-filter: blur(20px);
  border-right: 1px solid rgba(29,158,117,0.2) !important;
}
.admin-topbar {
  background: rgba(6,10,8,0.65) !important;
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(29,158,117,0.18) !important;
}

/* ── PAYMENT METHOD OPTIONS ── */
.payment-method-option {
  background: rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(29,158,117,0.22) !important;
}
.payment-method-option.selected,
.payment-method-option:hover {
  background: rgba(29,158,117,0.15) !important;
  border-color: rgba(94,239,192,0.5) !important;
}

/* ── PAYMENT DETAILS BOX ── */
.payment-details-box {
  background: rgba(0,0,0,0.40) !important;
  border: 1px solid rgba(29,158,117,0.25) !important;
  backdrop-filter: blur(10px);
}

/* ── ANIMATED PARTICLE CANVAS (site-wide) ── */
#siteParticles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
}

/* ── GLOWING TEXT ── */
.logo strong,
.gradient-text,
.product-price,
.stat strong {
  text-shadow: 0 0 20px rgba(29,158,117,0.5);
}

/* ── FILTER BUTTONS GLASS ── */
.filter-btn {
  background: rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(29,158,117,0.22) !important;
}
.filter-btn:hover,
.filter-btn.active {
  background: rgba(29,158,117,0.25) !important;
  border-color: rgba(94,239,192,0.5) !important;
}

/* ── STATUS BADGES ── */
.status-badge.pending  { background: rgba(251,191,36,0.15);  border: 1px solid rgba(251,191,36,0.3); }
.status-badge.approved { background: rgba(29,158,117,0.15); border: 1px solid rgba(29,158,117,0.3); }
.status-badge.rejected { background: rgba(239,68,68,0.15);  border: 1px solid rgba(239,68,68,0.3); }

/* ── BREADCRUMB ── */
.breadcrumb { color: rgba(255,255,255,0.45); }

/* ── TABLE ROWS ── */
td { border-bottom: 1px solid rgba(29,158,117,0.08) !important; }
tr:hover td { background: rgba(29,158,117,0.06) !important; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }
::-webkit-scrollbar-thumb { background: rgba(29,158,117,0.5); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(94,239,192,0.7); }

/* ── MOBILE ── */
@media (max-width: 768px) {
  .shrine-content { padding: 32px 20px 28px; }
  body { background-attachment: scroll; }
}