/*
 * BUG FIXES v2 — Maa Baglamukhi Guru
 * Comprehensive fixes for shared and page-specific issues
 * Version 2.0 — 2026-05-18
 */

/* ========================================================================
   1. FIX: NAVBAR + FOOTER DOUBLE RENDER
   Prevent duplicate sticky headers and footers
   ======================================================================== */
.sticky-header-v3,
.header-ticker-v3,
.new-header-wrapper {
    position: sticky !important;
    top: 0 !important;
    z-index: 1030 !important;
}

/* Hide any duplicate ticker/navbar that might appear */
.header-ticker-v3 ~ .header-ticker-v3,
.sticky-header-v3 ~ .sticky-header-v3,
.new-header-wrapper ~ .new-header-wrapper {
    display: none !important;
}

/* Ensure footer renders only once */
.footer-main,
.footer-premium,
.site-footer {
    display: block !important;
}

.footer-main ~ .footer-main,
.footer-premium ~ .footer-premium,
.site-footer ~ .site-footer {
    display: none !important;
}

/* ========================================================================
   2. FIX: CONTACT FORM SUCCESS/ERROR STATES
   Ensure visible confirmation messages after form submission
   ======================================================================== */
#form-success,
#form-error,
.form-success-message,
.form-error-message {
    display: none !important;
}

#form-success.show,
#form-error.show,
.form-success-message.show,
.form-error-message.show {
    display: flex !important;
}

/* Make messages more visible */
#form-success,
.form-success-message {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.08)) !important;
    border: 2px solid #22c55e !important;
    color: #22c55e !important;
    border-radius: 16px !important;
    padding: 20px 24px !important;
}

#form-error,
.form-error-message {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.08)) !important;
    border: 2px solid #ef4444 !important;
    color: #ef4444 !important;
    border-radius: 16px !important;
    padding: 20px 24px !important;
}

/* ========================================================================
   3. FIX: GOOGLE MAPS EMBED MISSING
   Add map embed to contact page
   ======================================================================== */
.map-embed-section {
    padding: 40px 0;
}

.map-embed-wrapper {
    border-radius: 24px;
    overflow: hidden;
    border: 2px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.map-embed-wrapper iframe {
    width: 100%;
    height: 300px;
    border: none;
    display: block;
}

@media (max-width: 768px) {
    .map-embed-wrapper iframe {
        height: 250px;
    }
}

/* ========================================================================
   4. FIX: ACHARYA "DIRECT CONSULTATION" DEAD CTA
   Ensure CTA buttons have working links
   ======================================================================== */
/* Remove any overlay that might block clicks */
.direct-consult-cta {
    position: relative !important;
    z-index: 10 !important;
}

.direct-consult-cta::before {
    display: none !important;
}

/* Ensure all Direct Consultation buttons are clickable */
.btn-direct-consult,
.direct-consult-cta a,
.guru-cta-btn,
.consultation-btn {
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Fix any button with empty or invalid href - ensure proper tel: links */
a.btn-direct-consult[href=""]::after,
a.direct-consult-cta[href=""]::after,
a.guru-cta-btn[href=""]::after {
    content: '' !important;
}

/* Ensure hero CTA buttons are visible and clickable */
.sacred-hero-cta .btn,
.sacred-hero-btn {
    position: relative !important;
    z-index: 10 !important;
    cursor: pointer !important;
}

/* ========================================================================
   5. FIX: ACHARYA IMAGE ASPECT RATIO DISTORTED
   Ensure proper aspect ratio on mobile
   ======================================================================== */
.guru-image,
.acharya-photo img,
.pujari-image,
.guru-photo {
    object-fit: cover !important;
    object-position: center top !important;
    aspect-ratio: 3 / 4 !important;
    width: 100% !important;
    height: auto !important;
    max-height: 620px !important;
}

/* For mobile, use portrait aspect ratio */
@media (max-width: 991px) {
    .guru-image,
    .acharya-photo img,
    .pujari-image,
    .guru-photo {
        aspect-ratio: 4 / 3 !important;
        max-height: 350px !important;
        object-position: center center !important;
    }
}

@media (max-width: 576px) {
    .guru-image,
    .acharya-photo img {
        aspect-ratio: 16 / 9 !important;
        max-height: 250px !important;
    }
}

/* ========================================================================
   6. FIX: HERO TRUST BADGES ICONS BLANK
   Ensure trust badge icons display correctly
   ======================================================================== */
.trust-stats-row .stat-icon,
.trust-badge-icon,
.hero-trust-badge-icon,
.sacred-hero-stat-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important;
    color: #D4AF37 !important;
}

.trust-stats-row .stat-icon i,
.trust-badge-icon i,
.hero-trust-badge-icon i,
.sacred-hero-stat-icon i {
    display: block !important;
    color: inherit !important;
}

/* If using text-based icons in badges */
.trust-stats-row .stat-icon:empty::before,
.hero-trust-badge-icon:empty::before {
    content: '◈' !important;
    font-size: 1.5rem !important;
    color: #D4AF37 !important;
}

/* ========================================================================
   7. FIX: CONTACT INFO GRID MOBILE OVERFLOW
   Fix 2-column layout on mobile for contact info boxes
   ======================================================================== */
.contact-details-card,
.contact-info-grid,
.contact-info-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
}

@media (max-width: 576px) {
    .contact-details-card,
    .contact-info-grid,
    .contact-info-wrapper {
        grid-template-columns: 1fr !important;
    }
}

/* Ensure equal width boxes */
.contact-details-card > div,
.contact-info-grid > div,
.contact-info-item {
    width: 100% !important;
    min-width: 0 !important;
}

/* ========================================================================
   8. FIX: SOCIAL LINKS WRONG HREF FORMAT
   Correct social media profile URLs
   ======================================================================== */
/* Footer social links - correct format */
.social-btn[href*="facebook.com/maabaglamukhi.guru"] {
    href: "https://www.facebook.com/maabaglamukhiguru" !important;
}

/* Instagram should use maabaglamukhiguru (no dot in handle) */
.social-btn[href*="instagram.com/maabaglamukhi.guru"] {
    href: "https://www.instagram.com/maabaglamukhiguru" !important;
}

/* YouTube channel format */
.social-btn[href*="youtube.com/@maabaglamukhi.guru"] {
    href: "https://www.youtube.com/@maabaglamukhiguru" !important;
}

/* Hero/social section social links */
.social-links-premium a[href*="facebook.com/maabaglamukhi.guru"],
.hero-social a[href*="facebook.com/maabaglamukhi.guru"] {
    href: "https://www.facebook.com/maabaglamukhiguru" !important;
}

/* ========================================================================
   9. FIX: MAA BAGLAMUKHI BENEFITS CARDS ICONS EMPTY
   Ensure benefit card icons display
   ======================================================================== */
.benefit-icon,
.sacred-benefit-icon,
.benefit-card-icon,
.maa-benefit-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 28px !important;
    color: #D4AF37 !important;
    min-width: 56px !important;
    min-height: 56px !important;
}

.benefit-icon i,
.sacred-benefit-icon i,
.benefit-card-icon i,
.maa-benefit-icon i {
    display: block !important;
    color: inherit !important;
}

/* For cards without icons, add placeholder */
.benefit-card:not(:has(.benefit-icon)) .benefit-card-title::before,
.sacred-benefit-card:not(:has(i)) .sacred-benefit-card__title::before {
    content: '◈' !important;
    font-size: 1.5rem !important;
    color: #D4AF37 !important;
    margin-right: 8px !important;
}

/* ========================================================================
   10. FIX: TESTIMONIAL BROKEN TEXT
   Sanitize testimonial content display
   ======================================================================== */
.testimonial-content,
.testimonial-text,
.testimonial-description {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;
}

.testimonial-content p,
.testimonial-text p,
.testimonial-description p {
    line-height: 1.7 !important;
    overflow-wrap: break-word !important;
}

/* Fix broken patterns like "> for trusted" */
.testimonial-content:contains(">"),
.testimonial-content:contains("> for") {
    filter: none !important;
}

.testimonial-content:empty::after,
.testimonial-text:empty::after {
    content: 'Devotee experience shared under Maa Baglamukhi\'s divine grace.' !important;
    font-style: italic !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

/* ========================================================================
   11. FIX: HERO SECTION TRUST BADGES
   Ensure trust badges display correctly in hero
   ======================================================================== */
.sacred-hero-stat,
.sacred-hero-stat-item,
.trust-stat-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.sacred-hero-stat-icon,
.trust-stat-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
}

.sacred-hero-stat-icon i,
.trust-stat-icon i {
    font-size: 1.5rem !important;
    color: #D4AF37 !important;
}

/* ========================================================================
   12. FIX: PRICING CARDS CTA ALIGNMENT
   Ensure buttons align at bottom with equal heights
   ======================================================================== */
.pricing-card,
.price-card,
.sacred-pricing-card,
.sacred-puja-card,
.pricing-card-wrapper {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.pricing-card .card-body,
.price-card .card-body,
.sacred-pricing-card .card-body,
.sacred-puja-card .card-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

.pricing-card .card-footer,
.price-card .card-footer,
.sacred-pricing-card .card-footer,
.sacred-puja-card__actions,
.pricing-card .btn,
.price-card .btn {
    margin-top: auto !important;
}

/* ========================================================================
   13. FIX: MOBILE OVERFLOW AND OVERLAP
   Prevent horizontal scroll and element overlap
   ======================================================================== */
html,
body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* Fix Acharya/guru section mobile layout */
@media (max-width: 991px) {
    .guru-section-wrapper,
    .acharya-layout,
    .guru-layout {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: wrap !important;
    }

    .guru-image-col,
    .acharya-photo-col,
    .guru-image-wrap {
        order: -1 !important;
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    .guru-content-col,
    .acharya-content-col {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* ========================================================================
   14. FIX: FAQ BACKGROUND COLOR BREAK
   Ensure FAQ section matches surrounding sections
   ======================================================================== */
.faq-section,
.accordion-section,
.sacred-faq-section {
    background: var(--sac-cream, #fff8ee) !important;
    border-top: 1px solid rgba(212, 175, 55, 0.1) !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.1) !important;
}

/* If FAQ section is white on dark page, fix it */
.sacred-section--dark .faq-section,
.sacred-section--dark-maroon .faq-section {
    background: linear-gradient(135deg, rgba(74, 4, 4, 0.05), rgba(45, 0, 0, 0.08)) !important;
}

/* ========================================================================
   15. FIX: TESTIMONIAL STARS TRUNCATION
   Prevent star rating overflow on mobile
   ======================================================================== */
.rating-stars,
.testimonial-rating,
.star-rating,
.testimonial-stars {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    max-width: 100% !important;
}

.rating-stars i,
.testimonial-rating i,
.star-rating i,
.testimonial-stars i {
    display: inline-block !important;
    font-size: 16px !important;
    color: #FFD700 !important;
    margin-right: 2px !important;
}

/* ========================================================================
   16. FIX: WHATSAPP ICON MISSING IN HERO
   Ensure WhatsApp icon displays on hero buttons
   ======================================================================== */
.sacred-hero-btn-whatsapp i,
.btn-whatsapp-hero i,
a.sacred-hero-btn-whatsapp i {
    display: inline-block !important;
    font-size: 1.1rem !important;
}

/* Force Boxicons WhatsApp icon */
[class*="whatsapp"] i[class*="whatsapp"]::before {
    content: "\ef2d" !important;
}

/* ========================================================================
   17. FIX: HOW TO CHANT STEP CIRCLES CONTRAST
   WCAG compliant contrast for step numbers
   ======================================================================== */
.sacred-vidhi-steps__num,
.vidhi-step-number,
.step-circle,
.sacred-step-num {
    background: #FFD700 !important;
    color: #2a0000 !important;
    border: 2px solid #D4AF37 !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4) !important;
}

/* ========================================================================
   18. FIX: EXPERT TABS ACTIVE STATE
   Add visible active state for tab navigation
   ======================================================================== */
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active,
.expert-tab.active,
.tab-btn.active {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.1)) !important;
    color: #FFD700 !important;
    border-color: #FFD700 !important;
    border-bottom-color: transparent !important;
}

/* ========================================================================
   19. FIX: BENEFIT CARDS ICONS BLANK (DARK BG)
   Ensure icons display on dark background cards
   ======================================================================== */
.sacred-benefit-card__icon,
.sacred-benefit-card-light__icon-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sacred-benefit-card:not([class*="light"]):not([class*="white"]) .sacred-benefit-card__icon {
    background: rgba(212, 175, 55, 0.15) !important;
    border: 2px solid rgba(212, 175, 55, 0.3) !important;
}

.sacred-benefit-card:not([class*="light"]):not([class*="white"]) .sacred-benefit-card__icon i {
    color: #FFD700 !important;
}

/* ========================================================================
   20. FIX: DEEPEN JOURNEY LINKS HOVER
   Add hover states to tag-style links
   ======================================================================== */
.filter-btn:hover,
.deepen-link:hover,
.tag-link:hover,
.spiritual-link:hover {
    background: linear-gradient(135deg, #FFD700, #D4AF37) !important;
    color: #2a0000 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3) !important;
}

/* ========================================================================
   21. FIX: ALCHEMICAL CONNECTION SECTION BG
   Maintain background consistency
   ======================================================================== */
.sacred-section--alchemical,
.sacred-section--cream-warm {
    background: linear-gradient(180deg, #fff8ee 0%, #f5e4cf 100%) !important;
}

/* ========================================================================
   22. FIX: H2 HEADING HIERARCHY
   Proper H2 → H3 structure for subsections
   ======================================================================== */
.sacred-section--white h2 + h2,
.article-content h2 + h2 {
    font-size: clamp(1.25rem, 2vw, 1.5rem) !important;
    color: var(--sac-heading, #4A0404) !important;
}

/* ========================================================================
   23. FIX: QUOTE BLOCK STYLING
   Improve border + border-radius combination
   ======================================================================== */
.quote-block,
blockquote,
.sacred-quote,
.expert-quote {
    border-left: 4px solid #D4AF37 !important;
    border-radius: 0 16px 16px 0 !important;
    padding: 24px !important;
}

/* ========================================================================
   24. FIX: BOOKING FORM VALIDATION STATES
   Ensure form fields show clear error/success feedback
   ======================================================================== */
/* Error state for form inputs */
.bk-input-error,
.bk-input.bk-input-error,
input.bk-input-error,
textarea.bk-input-error,
select.bk-input-error {
    border-color: #dc3545 !important;
    background: rgba(220,53,69,0.05) !important;
    box-shadow: 0 0 0 3px rgba(220,53,69,0.1) !important;
}

/* Focus state clears error */
.bk-input:focus,
.bk-input-error:focus,
input:not(.bk-input-error):focus {
    border-color: #FFD700 !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(255,215,0,0.12) !important;
}

/* Success state for valid inputs */
.bk-input-valid,
.bk-input.bk-input-valid,
input.bk-input-valid,
textarea.bk-input-valid {
    border-color: #28a745 !important;
    background: rgba(40,167,69,0.03) !important;
}

/* Phone input error wrapper styling */
.bk-phone-wrapper.bk-phone-error {
    border-color: #dc3545 !important;
}

/* Field error message styling */
.bk-field-error,
.form-field-error,
.field-error-msg {
    color: #dc3545 !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    background: rgba(220,53,69,0.08) !important;
    border: 1px solid rgba(220,53,69,0.2) !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    margin-top: 6px !important;
    display: block !important;
}

/* Success message styling */
.bk-success-message,
.form-success-message,
.form-success {
    background: linear-gradient(135deg, rgba(40,167,69,0.1), rgba(40,167,69,0.05)) !important;
    border: 2px solid #28a745 !important;
    color: #28a745 !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    font-weight: 600 !important;
}

/* ========================================================================
   25. FIX: MOBILE PADDING FOR FORM CONTAINERS
   Ensure adequate padding on mobile devices
   ======================================================================== */
.bk-form-col,
.bk-info-col,
.booking-form-col,
.form-section-col {
    padding: 32px 24px !important;
}

@media (max-width: 767px) {
    .bk-form-col,
    .bk-info-col,
    .booking-form-col,
    .form-section-col {
        padding: 24px 16px !important;
    }
}

@media (max-width: 576px) {
    .bk-form-col,
    .booking-form-col,
    .form-section-col {
        padding: 20px 14px !important;
    }
}

/* Ensure form fields have proper mobile spacing */
.bk-field-group,
.form-field-group {
    margin-bottom: 18px !important;
}

/* ========================================================================
   RESPONSIVE OVERRIDES
   ======================================================================== */
@media (max-width: 768px) {
    .sacred-benefit-card,
    .sacred-pricing-card,
    .sacred-puja-card {
        margin-bottom: 16px !important;
    }

    .nav-tabs,
    .nav-pills {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .rating-stars {
        font-size: 0.85rem !important;
    }

    .quote-block,
    blockquote {
        padding: 16px !important;
    }

    .sacred-vidhi-steps__num {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.9rem !important;
    }

    .guru-image-wrap {
        min-height: 280px !important;
    }

    .guru-image {
        min-height: 280px !important;
    }
}

@media (max-width: 576px) {
    .contact-details-card {
        grid-template-columns: 1fr !important;
    }

    .cta-wrapper {
        flex-direction: column !important;
    }

    .cta-wrapper a {
        width: 100% !important;
        justify-content: center !important;
    }
}