/* ============================================================
   WEBORACLE SHRINE — Glass Feel
   Skull bg + glassmorphism + animated life
   ============================================================ */

/* ── 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 */
.nav, section, footer, .admin-main, .admin-sidebar, .auth-section { position: relative; z-index: 2; }

/* ── GLASS MIXIN ── */
.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);
}

/* ── 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);
  transition: all 0.28s ease;
}

.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);
  transform: translateY(-5px);
}

/* ── SECTION BACKGROUNDS ── */
.section, .section-alt, .stats-bar, .newsletter-section, .footer {
  background: transparent !important;
}

/* Section subtle separator */
.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);
}

/* ── 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;
}

/* ── MOBILE NAV GLASS ── */
.nav-mobile {
  background: rgba(4,8,6,0.88) !important;
  backdrop-filter: blur(20px);
}

/* ── 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);
}

/* ── HERO HEAD STAGE — hide since we use bg image now ── */
.shrine-head-stage,
.shrine-head-hint {
  display: none !important;
}

/* ── SHRINE HERO WALKWAY — keep for atmosphere ── */
.shrine-walkway-lines {
  opacity: 0.4;
}

/* ── 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); }

/* ── PULSE GLOW ANIMATION on key elements ── */
@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); }
}
.product-card { animation: borderPulse 4s ease-in-out infinite; }
.cat-card     { animation: borderPulse 5s ease-in-out infinite; }

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