/* =========================================
   Vedic Serenity — Design System Styles
   =========================================
   Brand: SattvaSewa
   Style: Modern Minimalist with Tactile Accents
   ========================================= */


/* ---------- ICON FONT ---------- */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.material-symbols-outlined.fill {
  font-variation-settings: 'FILL' 1;
}


/* ---------- SELECTION ---------- */
::selection {
  background: #ff9933;          /* primary-container */
  color: #693800;               /* on-primary-container */
}


/* ---------- SCROLLBAR HIDE ---------- */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { scrollbar-width: none; -ms-overflow-style: none; }


/* ---------- BACKGROUND PATTERNS ---------- */

/* Dot pattern — use on sections that need subtle texture */
.bg-pattern {
  background-image: url('data:image/svg+xml,%3Csvg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23dbc2b0" fill-opacity="0.2" fill-rule="evenodd"%3E%3Ccircle cx="3" cy="3" r="3"/%3E%3Ccircle cx="13" cy="13" r="3"/%3E%3C/g%3E%3C/svg%3E');
}

/* Linen texture — use on Donation CTA blocks at 5% opacity */
.bg-linen {
  background-image: url('https://www.transparenttextures.com/patterns/subtle-white-feathers.png');
}


/* ---------- GLASSMORPHISM ---------- */
.glass-panel {
  background: rgba(255, 254, 242, 0.85);   /* surface-cream-light at 85% */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid #dbc2b0;                /* outline-variant */
}


/* ---------- ELEVATION ---------- */

/* Ambient shadow — soft, grounded, not floating */
.ambient-shadow {
  box-shadow: 0 8px 30px rgba(194, 178, 128, 0.15);
}

/* Card shadow — lighter variant for product cards */
.card-shadow {
  box-shadow: 0 4px 12px rgba(194, 178, 128, 0.15);
}

/* Lifted shadow — for hover states */
.lifted-shadow {
  box-shadow: 0 8px 30px rgba(194, 178, 128, 0.25);
}


/* ---------- MAP OVERLAY ---------- */
.map-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(254, 252, 207, 0.4);     /* background at 40% */
  pointer-events: none;
  z-index: 10;
}


/* ---------- TOAST ---------- */
#toast.show {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
  pointer-events: auto;
}


/* ---------- TRANSITIONS ---------- */
.transition-smooth {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ---------- PANCHANG HIGHLIGHT ---------- */
/* Active day: saffron left border per design spec */
.panchang-active {
  border-left: 4px solid #E67E22;            /* saffron-deep */
  padding-left: 14px;
}


/* ---------- INPUT FOCUS (warm glow) ---------- */
input:focus,
textarea:focus,
select:focus {
  border-color: #E67E22 !important;          /* saffron-deep */
  box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.15);
  outline: none;
}


/* ---------- IMAGE SAFFRON OVERLAY ---------- */
/* 5% saffron overlay to unify disparate photos */
.img-saffron-overlay {
  position: relative;
}
.img-saffron-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(143, 78, 0, 0.05);       /* primary at 5% */
  pointer-events: none;
}


/* ---------- RESPONSIVE HELPERS ---------- */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}