/**
 * Sacred Vedic Devotional Theme & Google Ads High-Converting Lead System
 * Best North Indian Pandit Ji Bangalore
 */

/* ==========================================================================
   1. Root Variables & Sacred Vedic Color Palette
   ========================================================================== */
:root {
  --vedic-saffron: #FF7A00;
  --vedic-saffron-deep: #E65100;
  --vedic-kumkum: #97112F;
  --vedic-sindoor: #B71C1C;
  --vedic-gold-light: #FFF0BD;
  --vedic-gold: #D4AF37;
  --vedic-gold-deep: #B78727;
  --vedic-cream: #FFFDF7;
  --vedic-parchment: #FFF8F0;
  --wa-green: #25D366;
  --wa-green-dark: #075E54;
  --call-orange: #FF5722;
  --call-red: #D81B60;
}

/* ==========================================================================
   2. Sacred Top Auspicious Header Strip (Global)
   ========================================================================== */
.sacred-top-bar {
  background: linear-gradient(90deg, #7A0C1E 0%, #B71C1C 35%, #D84315 70%, #E65100 100%);
  color: #FFFDF7;
  font-family: Heebo, "Noto Sans Devanagari", Arial, sans-serif;
  padding: 6px 12px;
  position: relative;
  z-index: 100001;
  border-bottom: 2px solid var(--vedic-gold);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  font-size: 13px;
}

.sacred-top-bar__inner {
  max-width: 1290px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.sacred-top-bar__shloka {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: var(--vedic-gold-light);
  letter-spacing: 0.5px;
}

.sacred-top-bar__shloka span.shloka-txt {
  color: #FFE082;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.sacred-top-bar__urgency {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 215, 0, 0.35);
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
}

.sacred-top-bar__urgency .live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00E676;
  box-shadow: 0 0 8px #00E676;
  display: inline-block;
  animation: pulse-dot 1.5s infinite;
}

.sacred-top-bar__actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.sacred-top-bar__actions a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 900;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  transition: transform 0.2s ease;
}

.sacred-top-bar__actions a.call-link {
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.sacred-top-bar__actions a.wa-link {
  background: var(--wa-green);
  color: #ffffff !important;
  border: 1px solid #1ebe5d;
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.4);
}

.sacred-top-bar__actions a:hover {
  transform: translateY(-1px);
}

@media (max-width: 767px) {
  .sacred-top-bar {
    padding: 5px 8px;
    font-size: 11.5px;
  }
  .sacred-top-bar__inner {
    justify-content: center;
    text-align: center;
  }
  .sacred-top-bar__urgency,
  .sacred-top-bar__actions {
    display: none; /* Keep clean on small mobile header, lead bar handles conversions */
  }
}

/* ==========================================================================
   3. Devotional Aesthetic Enhancements (Headings, Dividers, Badges)
   ========================================================================== */

/* Sacred Devotional Divider */
.devotional-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 20px auto;
  max-width: 500px;
}

.devotional-divider::before,
.devotional-divider::after {
  content: "";
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--vedic-gold), transparent);
}

.devotional-divider__symbol {
  color: var(--vedic-saffron);
  font-size: 18px;
  line-height: 1;
  text-shadow: 0 0 10px rgba(255, 122, 0, 0.5);
  animation: glow-pulse 3s infinite alternate;
}

/* Auspicious Shloka Badge */
.devotional-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #FFF8F0 0%, #FFF3E0 100%);
  border: 1.5px solid rgba(212, 175, 55, 0.6);
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
  border-radius: 999px;
  padding: 6px 16px;
  color: var(--vedic-kumkum);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.devotional-badge .diya-icon {
  font-size: 16px;
  line-height: 1;
}

/* Trust Pillar Chips */
.devotional-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}

.devotional-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid rgba(255, 122, 24, 0.3);
  box-shadow: 0 2px 8px rgba(81, 21, 0, 0.06);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 800;
  color: #3b0a0f;
}

.devotional-trust-pill .pill-icon {
  color: var(--vedic-saffron);
  font-size: 14px;
}

/* Enhanced Cards with Temple Gold Glow */
.puja-main,
.puja-side-card,
.puja-tile,
.puja-band,
.puja-cta,
.home-ai-hero__trust-item,
.direct-contact-cta {
  border: 1.5px solid rgba(212, 175, 55, 0.35) !important;
  box-shadow: 0 14px 40px rgba(93, 30, 10, 0.09) !important;
  background-color: rgba(255, 255, 255, 0.98) !important;
}

.puja-tile:hover,
.puja-side-card:hover {
  border-color: var(--vedic-gold) !important;
  box-shadow: 0 18px 45px rgba(212, 175, 55, 0.22) !important;
  transform: translateY(-2px);
  transition: all 0.25s ease;
}

/* ==========================================================================
   4. High-Converting 1-Tap WhatsApp Consultation Pills (Zero-Typing Funnel)
   ========================================================================== */
.whatsapp-quick-pills {
  margin: 18px 0;
  padding: 16px;
  background: linear-gradient(135deg, #FFFBF5 0%, #FFF3E4 100%);
  border: 1.5px solid rgba(255, 122, 24, 0.35);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(151, 17, 47, 0.08);
}

.whatsapp-quick-pills__title {
  margin: 0 0 10px 0;
  font-size: 14px;
  font-weight: 900;
  color: var(--vedic-kumkum);
  display: flex;
  align-items: center;
  gap: 7px;
}

.whatsapp-quick-pills__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wa-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 1.5px solid rgba(37, 211, 102, 0.45);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.15);
  color: #075E54 !important;
  text-decoration: none !important;
  font-weight: 800;
  font-size: 12.5px;
  transition: all 0.2s ease;
}

.wa-pill-btn:hover {
  background: var(--wa-green);
  color: #ffffff !important;
  border-color: var(--wa-green);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35);
}

.wa-pill-btn .wa-mini-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* ==========================================================================
   5. Google Ads Mobile Lead Bar (The Master Lead Generator)
   ========================================================================== */
@media (max-width: 767px) {
  body {
    padding-bottom: 112px !important; /* Ensure content is never cut off */
  }

  .mobile-lead-bar {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    z-index: 999999 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 24px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 248, 240, 0.96)) !important;
    border: 2px solid var(--vedic-gold) !important;
    box-shadow: 0 20px 50px rgba(59, 10, 15, 0.45), 0 0 20px rgba(255, 122, 24, 0.2) !important;
    backdrop-filter: blur(16px) !important;
  }

  .mobile-lead-bar::before {
    content: "🕉️ North Indian Pandit Ji | 🟢 Online Now | Free Muhurat Check" !important;
    position: absolute !important;
    top: -24px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: linear-gradient(90deg, #7A0C1E, #B71C1C) !important;
    color: #FFFDF7 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    padding: 3px 12px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    border: 1px solid var(--vedic-gold) !important;
    letter-spacing: 0.3px !important;
  }

  .mobile-lead-bar__btn {
    min-height: 64px !important;
    border-radius: 18px !important;
    padding: 8px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25) !important;
    text-align: left !important;
  }

  .mobile-lead-bar__call {
    background: linear-gradient(135deg, #FF6F00 0%, #D84315 50%, #B71C1C 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    animation: pulse-call 2.5s infinite !important;
  }

  .mobile-lead-bar__wa {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    animation: pulse-wa 2.5s infinite 1.25s !important;
  }

  .mobile-lead-bar__label {
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    letter-spacing: 0.2px !important;
  }

  .mobile-lead-bar__sub {
    font-size: 10px !important;
    font-weight: 800 !important;
    opacity: 0.95 !important;
    margin-top: 3px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }
}

/* ==========================================================================
   6. Floating WhatsApp Consultation Widget (Desktop & Tablet)
   ========================================================================== */
.desktop-wa-widget {
  display: none;
}

@media (min-width: 768px) {
  .desktop-wa-widget {
    position: fixed;
    right: 24px;
    bottom: 28px;
    z-index: 99990;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    padding: 8px 16px 8px 10px;
    border-radius: 999px;
    box-shadow: 0 16px 45px rgba(7, 94, 84, 0.25), 0 0 0 2px rgba(37, 211, 102, 0.3);
    border: 1.5px solid var(--wa-green);
    text-decoration: none !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  .desktop-wa-widget:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 22px 55px rgba(7, 94, 84, 0.35), 0 0 0 3px rgba(37, 211, 102, 0.5);
  }

  .desktop-wa-widget__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #25D366, #128C7E);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 900;
    font-size: 20px;
    position: relative;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
  }

  .desktop-wa-widget__avatar::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #00E676;
    border: 2px solid #ffffff;
    box-shadow: 0 0 6px #00E676;
  }

  .desktop-wa-widget__content {
    display: flex;
    flex-direction: column;
    text-align: left;
  }

  .desktop-wa-widget__title {
    font-size: 13.5px;
    font-weight: 900;
    color: #075E54;
    line-height: 1.15;
  }

  .desktop-wa-widget__sub {
    font-size: 11px;
    font-weight: 700;
    color: #555555;
    margin-top: 2px;
  }
}

/* ==========================================================================
   7. Micro-Interactions & Pulsing Animations
   ========================================================================== */
@keyframes pulse-call {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 87, 34, 0.7);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(255, 87, 34, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 87, 34, 0);
  }
}

@keyframes pulse-wa {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

@keyframes pulse-dot {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.85);
  }
}

@keyframes glow-pulse {
  from {
    text-shadow: 0 0 6px rgba(255, 122, 0, 0.4);
  }
  to {
    text-shadow: 0 0 14px rgba(255, 122, 0, 0.8), 0 0 20px rgba(212, 175, 55, 0.5);
  }
}

/* ==========================================================================
   8. Global SVG Icon Safeguards & Devotional Typography
   Prevents unconstrained SVGs from expanding full width or rendering black
   ========================================================================== */
svg:not([width]):not([height]) {
  max-width: 28px !important;
  max-height: 28px !important;
}

h1 svg, h2 svg, h3 svg, h4 svg, h5 svg, h6 svg {
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  fill: var(--vedic-saffron, #FF7A00) !important;
}

.puja-main h2 {
  border-left: 4px solid var(--vedic-saffron, #FF7A00) !important;
  padding-left: 12px !important;
  color: var(--vedic-kumkum, #97112F) !important;
  font-size: clamp(22px, 2.5vw, 28px) !important;
  line-height: 1.3 !important;
  margin-top: 32px !important;
  margin-bottom: 14px !important;
}

.puja-main h2 svg,
.puja-main h3 svg {
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  fill: var(--vedic-saffron, #FF7A00) !important;
}