/* ===========================================================
   HramMarket — Glassmorphism & Atmospheric Background
   Подложки в стиле глассморфизм + фон с частицами
   hram.prosvetim.ru + market.prosvetim.ru
   =========================================================== */

/* ───── 1. CSS Variables for Glass & Background ───── */
:root {
  /* Glassmorphism — светлая тема */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.78);
  --glass-bg-card: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(184, 134, 11, 0.10);
  --glass-border-strong: rgba(184, 134, 11, 0.18);
  --glass-blur: 16px;
  --glass-blur-sm: 8px;
  --glass-blur-lg: 24px;
  --glass-shadow: 0 4px 20px rgba(44, 36, 24, 0.06);
  --glass-shadow-hover: 0 8px 32px rgba(44, 36, 24, 0.10);
  
  /* Accent glow for glass panels */
  --glass-glow: 0 0 0 1px rgba(184, 134, 11, 0.04);
  --glass-glow-hover: 0 0 0 1px rgba(184, 134, 11, 0.10), 0 0 30px rgba(184, 134, 11, 0.06);
  
  /* Background canvas */
  --bg-canvas: transparent;
}

/* Тёмная тема — глассморфизм */
[data-theme="dark"] {
  --glass-bg: rgba(20, 20, 30, 0.55);
  --glass-bg-strong: rgba(20, 20, 30, 0.78);
  --glass-bg-card: rgba(30, 30, 45, 0.60);
  --glass-border: rgba(255, 215, 0, 0.06);
  --glass-border-strong: rgba(255, 215, 0, 0.12);
  --glass-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  --glass-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.3);
  --glass-glow: 0 0 0 1px rgba(255, 215, 0, 0.04);
  --glass-glow-hover: 0 0 0 1px rgba(255, 215, 0, 0.08), 0 0 30px rgba(255, 215, 0, 0.04);
}

[data-theme="dark"] body {
  background: #0a0a12;
}

/* ───── 2. Background Canvas ───── */
#bgCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}

/* Статический фолбэк (когда canvas не загрузился / JS выключен) */
body:not(.bg-active) {
  background: linear-gradient(170deg, #faf7f2 0%, #f5f0e6 30%, #efe8da 60%, #faf7f2 100%);
}

[data-theme="dark"] body:not(.bg-active) {
  background: linear-gradient(170deg, #0a0a12 0%, #12121e 30%, #0d0d16 60%, #0a0a12 100%);
}

/* ───── 3. Glassmorphism Utility Classes ───── */

/* Базовый стеклянный блок */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-glow);
  transition: all var(--transition-base);
}

.glass:hover {
  border-color: var(--glass-border-strong);
  box-shadow: var(--glass-shadow-hover), var(--glass-glow-hover);
}

/* Сильный стеклянный блок (хедер, модалки) */
.glass-strong {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur-lg));
  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
  border: 1px solid var(--glass-border-strong);
  box-shadow: var(--glass-shadow), var(--glass-glow);
}

/* Карточка-стекло */
.glass-card {
  background: var(--glass-bg-card);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow), var(--glass-glow);
  transition: all var(--transition-base);
}

.glass-card:hover {
  border-color: var(--glass-border-strong);
  box-shadow: var(--glass-shadow-hover), var(--glass-glow-hover);
  transform: translateY(-2px);
}

/* Градиентное стекло */
.glass-accent {
  background: linear-gradient(135deg, 
    rgba(184, 134, 11, 0.06), 
    rgba(212, 160, 23, 0.03));
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border-strong);
}

/* ───── 4. Apply Glass to Existing Sections ───── */

/* Header — всегда сильное стекло */
.top-bar {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: blur(var(--glass-blur-lg)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) !important;
  border-bottom: 1px solid var(--glass-border-strong) !important;
}

/* Cards — заменяем фон на стекло */
.card {
  background: var(--glass-bg-card) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow), var(--glass-glow) !important;
}

.card:hover {
  border-color: var(--glass-border-strong) !important;
  box-shadow: var(--glass-shadow-hover), var(--glass-glow-hover) !important;
}

.card-glass {
  background: var(--glass-bg-card) !important;
  backdrop-filter: blur(var(--glass-blur-lg)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) !important;
}

/* Product cards */
.product-card {
  background: var(--glass-bg-card) !important;
  backdrop-filter: blur(var(--glass-blur-sm)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow), var(--glass-glow) !important;
}

.product-card:hover {
  border-color: var(--glass-border-strong) !important;
  box-shadow: var(--glass-shadow-hover), var(--glass-glow-hover) !important;
}

/* Church cards */
.church-card {
  background: var(--glass-bg-card) !important;
  backdrop-filter: blur(var(--glass-blur-sm)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow), var(--glass-glow) !important;
}

.church-card:hover {
  border-color: var(--glass-border-strong) !important;
  box-shadow: var(--glass-shadow-hover), var(--glass-glow-hover) !important;
}

/* Stats / stat badges */
.stat-badge {
  background: var(--glass-bg-card) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-border) !important;
}

/* Filters panel */
.filters-panel {
  background: var(--glass-bg-card) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
}

/* Hero section — subtle glass gradient */
.hero {
  position: relative;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%, 
    var(--bg-accent-soft) 0%, 
    transparent 60%);
  pointer-events: none;
}

/* Breadcrumbs */
.breadcrumbs {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  border-radius: var(--radius-sm);
  padding: 8px 16px !important;
  display: inline-flex;
  border: 1px solid var(--glass-border);
}

/* Toast */
.toast {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: blur(var(--glass-blur-lg)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) !important;
  border: 1px solid var(--glass-border-strong) !important;
}

/* Modal */
.modal-overlay {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: blur(var(--glass-blur-lg)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) !important;
  border: 1px solid var(--glass-border-strong) !important;
}

/* Luchik widget */
.luchik-widget {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: blur(var(--glass-blur-lg)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) !important;
}

/* Tabs */
.tabs {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border-strong);
}

/* Form inputs */
.form-input, .form-textarea, .form-select {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur-sm)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) !important;
}

/* Search bar */
.search-bar {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur-sm)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) !important;
}

/* Map container */
.map-container {
  background: var(--glass-bg-card) !important;
  backdrop-filter: blur(var(--glass-blur-sm)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) !important;
}

/* New message thread / email thread cards */
.thread-item, .message-item {
  background: var(--glass-bg-card) !important;
  backdrop-filter: blur(var(--glass-blur-sm)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) !important;
  border: 1px solid var(--glass-border) !important;
}

/* ───── 5. Empty state ───── */
.empty-state {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-xl);
  border: 1px solid var(--glass-border);
  margin: 24px auto;
  max-width: 400px;
}

/* ───── 6. Product detail page ───── */
.product-detail-image {
  background: var(--glass-bg-card) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-border) !important;
}

/* ───── 7. Contact section ───── */
.contact-section {
  background: var(--glass-bg-card) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-border) !important;
}

/* ───── 8. Skeleton loader ───── */
.skeleton {
  background: var(--glass-bg) !important;
}

/* ───── 9. Tags ───── */
.tag {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur-sm)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) !important;
  border: 1px solid var(--glass-border) !important;
}