/* ============================================================
   Landing Page (Home) — Dark Theme Override
   Depends on: design-tokens.css (body, badges, stars, modals,
   breadcrumbs, load-more already handled there)
   ============================================================ */

/* ---------- General text overrides ---------- */
.text-black,
.text-dark,
h1, h2, h3, h4, h5, h6 {
    color: #FFFFFF !important;
}
p, li { color: rgba(255,255,255,0.70); }
a { color: rgba(255,255,255,0.70); }
a:hover { color: #D4AF37; }

/* ---------- Section headings ---------- */
.heading,
.as_heading,
.font-28,
.font-30 {
    color: #FFFFFF !important;
}

/* ---------- Hero banner ---------- */
/* Banner already has dark overlay; align the CTA accent to gold */
.cta {
    background: linear-gradient(135deg, #D4AF37, #FF6B35) !important;
    color: #000000 !important;
    box-shadow: 0 0 20px rgba(212,175,55,0.40) !important;
}
.cta:hover {
    background: linear-gradient(135deg, #FFD700, #FF8C00) !important;
    box-shadow: 0 0 30px rgba(212,175,55,0.50) !important;
    color: #000000 !important;
    text-decoration: none;
}
/* Hero banner card (glass panel) */
.banner__card {
    background: rgba(26,26,26,0.70) !important;
    border: 1px solid rgba(212,175,55,0.20) !important;
    backdrop-filter: blur(8px);
}
.banner__card h3 { color: #FFFFFF !important; }

/* ---------- Panchang card ---------- */
.panchang-card {
    background: #1A1A1A !important;
    border: 1px solid rgba(212,175,55,0.20) !important;
    border-radius: 12px;
    color: #FFFFFF !important;
}
.panchang-card h3 { color: #D4AF37 !important; }
.panchang-card p,
.panchang-card strong { color: rgba(255,255,255,0.85) !important; }
.panchang-card .time-card {
    background: rgba(0,0,0,0.40) !important;
    border: 1px solid rgba(212,175,55,0.20) !important;
    color: rgba(255,255,255,0.80) !important;
    border-radius: 8px;
}
.detailed-link {
    color: #D4AF37 !important;
    border: 1px solid rgba(212,175,55,0.35);
    border-radius: 6px;
    transition: all 0.3s ease;
}
.detailed-link:hover {
    background: rgba(212,175,55,0.10) !important;
    color: #FFD700 !important;
    text-decoration: none !important;
}

/* ---------- Kundli card ---------- */
.kundli-card {
    background: #1A1A1A !important;
    border: 1px solid rgba(212,175,55,0.20) !important;
    border-radius: 12px;
}
.kundli-card h2,
.kundli-card p { color: rgba(255,255,255,0.80) !important; }

/* ---------- Live astrologers section ---------- */
.moonastro-live-astrologers {
    background: #0A0A0A !important;
}
.moonastro-live-astrologers h2 {
    color: #FFFFFF !important;
}
.moonastro-live-astrologers p {
    color: rgba(255,255,255,0.55) !important;
}
/* "View More" button */
.view-more.colorblack {
    background: transparent !important;
    color: #D4AF37 !important;
    border: 1px solid #D4AF37 !important;
    border-radius: 8px !important;
}
.view-more.colorblack:hover {
    background: rgba(212,175,55,0.10) !important;
    color: #FFD700 !important;
    border-color: #FFD700 !important;
}

/* ---------- Horoscope section ---------- */
#redirecthoroscope {
    background: #0A0A0A !important;
}
.daily_horoscope_box {
    background: #1A1A1A !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: none !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.daily_horoscope_box:hover {
    border-color: #D4AF37 !important;
    box-shadow: 0 0 20px rgba(212,175,55,0.40) !important;
    transform: translateY(-2px);
}
.daily_horoscope_box h5 {
    color: rgba(255,255,255,0.85) !important;
}
.daily_horoscope_box img {
    border-color: rgba(212,175,55,0.30) !important;
}
.text-dark.text-decoration-none { color: rgba(255,255,255,0.85) !important; }

/* ---------- Astrologers carousel section ---------- */
.moonastro-astrologers,
.bg-astrologer-pink-light {
    background: #111111 !important;
}
.moonastro-astrologers h2 { color: #FFFFFF !important; }
.moonastro-astrologers p  { color: rgba(255,255,255,0.55) !important; }

/* Carousel astrologer cards (compact style) */
/* Override Bootstrap's .bg-white !important on the card elements */
.moonastro-astrologers .bg-white,
.moonastro-astrologers .item.bg-white {
    background-color: #1A1A1A !important;
}
.psychic-card {
    background: #1A1A1A !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
    overflow: hidden;
    position: relative;
}
.psychic-card::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,215,0,0.05), transparent);
    transition: left 0.5s ease;
}
.psychic-card:hover::after { left: 150%; }
.psychic-card:hover {
    border-color: #D4AF37 !important;
    box-shadow: 0 0 20px rgba(212,175,55,0.40) !important;
    transform: translateY(-2px);
}
.psychic-card .colorblack,
.astro-name,
.psychic-card [style*="color: #495057"],
.psychic-card [style*="color:#495057"] {
    color: #FFFFFF !important;
}
.psychic-card .font-13,
.psychic-card .exp-language {
    color: rgba(255,255,255,0.55) !important;
}
.psychic-card .exprt-price {
    color: #D4AF37 !important;
    font-weight: 700 !important;
}
.psychic-card svg { fill: #D4AF37 !important; }
.psychic-card .psyich-img img {
    border: 2px solid rgba(212,175,55,0.20) !important;
    border-radius: 50% !important;
    background: #2A2A2A;
}
.psychic-card:has(.specific-Clr-Online) .psyich-img img {
    border-color: #4ADE80 !important;
    box-shadow: 0 0 0 2px #4ADE80, 0 0 12px rgba(74,222,128,0.30) !important;
}

/* ---------- Status badges — handled by design-tokens.css ---------- */

/* ---------- CTA buttons (call/video on cards) ---------- */
.btn-audio-call {
    background: linear-gradient(135deg, #D4AF37, #FF6B35) !important;
    color: #000000 !important;
    border: none !important; border-radius: 10px !important; font-weight: 600 !important;
    transition: all 0.3s ease !important;
}
.btn-audio-call:hover {
    background: linear-gradient(135deg, #FFD700, #FF8C00) !important;
    box-shadow: 0 0 30px rgba(212,175,55,0.50) !important;
    transform: translateY(-1px) scale(1.02);
    color: #000000 !important;
}
.btn-video-call {
    background: transparent !important; color: #D4AF37 !important;
    border: 1px solid #D4AF37 !important; border-radius: 10px !important; font-weight: 600 !important;
    transition: all 0.3s ease !important;
}
.btn-video-call:hover {
    background: rgba(212,175,55,0.10) !important; color: #FFD700 !important;
    border-color: #FFD700 !important;
    box-shadow: 0 0 20px rgba(212,175,55,0.35) !important;
}
.psychic-card .btn-call:not(.btn-audio-call):not(.btn-video-call) {
    background: #2A2A2A !important; color: rgba(255,255,255,0.30) !important;
    border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 10px !important;
    cursor: not-allowed !important; pointer-events: none !important;
}

/* ---------- Stars & Load More — handled by design-tokens.css ---------- */
.psy-review-section [style*="color: gray"],
.psy-review-section [style*="color:gray"] {
    color: var(--ss-hint, #6B7280) !important; font-size: 0.75rem !important;
}

/* ---------- Stories section ---------- */
.stories-container .story img {
    border: 2px solid rgba(212,175,55,0.20) !important;
}
.stories-container .story p { color: rgba(255,255,255,0.70) !important; }
.stories-container .story.viewed img {
    border-color: rgba(255,255,255,0.20) !important;
    filter: grayscale(0.3);
}

/* ---------- Astrology Videos section ---------- */
#calculator,
section[style*="videobackground"] {
    background: #111111 !important;
}
#calculator h2 { color: #FFFFFF !important; }
.video-card {
    background: #1A1A1A !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 10px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}
.video-card:hover {
    border-color: #D4AF37 !important;
    box-shadow: 0 0 20px rgba(212,175,55,0.30) !important;
}
.video-title { color: rgba(255,255,255,0.70) !important; }

/* News section */
.backimage {
    background: #111111 !important;
}
.backimage h3 { color: #FFFFFF !important; }

/* ---------- Products section ---------- */
.vedic-card {
    background: #1A1A1A !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
    /* override inline pastel bg-colors */
    background-color: #1A1A1A !important;
}
.vedic-card:hover {
    border-color: #D4AF37 !important;
    box-shadow: 0 0 20px rgba(212,175,55,0.30) !important;
}
.vedic-card h2 { color: #FFFFFF !important; }
.vedic-card p,
.vedic-description,
.vedic-price { color: rgba(255,255,255,0.70) !important; }
.vedic-button {
    background: linear-gradient(135deg, #D4AF37, #FF6B35) !important;
    color: #000000 !important;
    border: none !important; border-radius: 10px !important; font-weight: 600 !important;
}
.vedic-button:hover {
    background: linear-gradient(135deg, #FFD700, #FF8C00) !important;
    box-shadow: 0 0 20px rgba(212,175,55,0.40) !important;
    color: #000000 !important;
}

/* See All / button-blog links */
.button-blog {
    color: #D4AF37 !important;
    border: 1px solid rgba(212,175,55,0.40) !important;
    border-radius: 8px !important;
    background: transparent !important;
    transition: all 0.3s ease !important;
}
.button-blog:hover {
    background: rgba(212,175,55,0.10) !important;
    color: #FFD700 !important;
    border-color: #FFD700 !important;
    text-decoration: none !important;
}

/* ---------- Blog section ---------- */
.bg-white.py-5,
section.py-5.bg-white { background: #0A0A0A !important; }
.product-card.parad-shivling {
    background: #1A1A1A !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.product-card.parad-shivling:hover {
    border-color: #D4AF37 !important;
    box-shadow: 0 0 20px rgba(212,175,55,0.30) !important;
}
.product-card h3 { color: #FFFFFF !important; }
.product-card .text-dark { color: rgba(255,255,255,0.60) !important; }
.read-more { color: #D4AF37 !important; }

/* ---------- FAQ / Astrology content section ---------- */
.bg-pink-light,
.bg-pink { background: #111111 !important; }
.bg-pink-light .heading,
.bg-pink .heading,
.bg-pink h2,
.bg-pink h3 { color: #FFFFFF !important; }
.bg-pink-light p,
.bg-pink-light ul li,
.bg-pink p,
.bg-pink ul li { color: rgba(255,255,255,0.65) !important; }
.bg-pink-light h3,
.bg-pink h3 { color: rgba(255,255,255,0.90) !important; }
.bg-pink-light a,
.bg-pink a { color: #D4AF37 !important; }
.bg-pink-light a:hover,
.bg-pink a:hover { color: #FFD700 !important; }
.collapse.py-4 p,
.collapse.py-4 li { color: rgba(255,255,255,0.65) !important; }
.collapse.py-4 h3 { color: rgba(255,255,255,0.90) !important; }
.color-red.fa { color: #D4AF37 !important; }

/* ---------- Modals — handled by design-tokens.css ---------- */
/* Close/danger button specific to landing page */
.modal .btn-primary#closeModalBtn {
    background: var(--ss-surface-hover, #374151) !important;
    color: var(--ss-content-tertiary, #9CA3AF) !important;
    border: 1px solid var(--ss-edge-subtle, #1F2937) !important;
    border-radius: var(--ss-radius-sm) !important;
}
.modal .btn-primary#closeModalBtn:hover {
    color: var(--ss-content, #FFFFFF) !important;
    border-color: var(--ss-edge, #374151) !important;
}

/* ---------- Card fade-in — keyframe in design-tokens.css ---------- */
.psychic-card { animation: ss-fade-in 0.5s ease-out forwards; }

/* ============================================================
   RESPONSIVE — Landing Page
   ============================================================ */

/* ── Tablet ── */
@media (max-width: 991px) {
    .panchang-card { padding: 16px; }
    .kundli-card { padding: 16px; }
    .vedic-card { margin-bottom: 12px; }
}

/* ── Mobile ── */
@media (max-width: 576px) {
    /* Hero CTA */
    .cta { padding: 10px 20px !important; font-size: 0.9rem; }

    /* Panchang card — tighter */
    .panchang-card { padding: 12px; border-radius: 8px; }
    .panchang-card h3 { font-size: 1.1rem !important; }
    .panchang-card .time-card { padding: 8px !important; font-size: 0.8rem; }
    .detailed-link { font-size: 0.8rem; padding: 6px 12px; }

    /* Kundli card */
    .kundli-card { padding: 12px; border-radius: 8px; }
    .kundli-card h2 { font-size: 1.1rem !important; }

    /* Horoscope cards */
    .daily_horoscope_box { padding: 10px; }
    .daily_horoscope_box h5 { font-size: 0.85rem !important; }

    /* Videos section */
    .video-card { border-radius: 8px; }
    .video-title { font-size: 0.8rem !important; }

    /* Products */
    .vedic-card { padding: 12px !important; border-radius: 8px !important; }
    .vedic-button { padding: 8px 16px !important; font-size: 0.85rem; }

    /* Blog cards */
    .product-card.parad-shivling { border-radius: 8px !important; }

    /* Section headings */
    .heading, .as_heading, .font-28, .font-30 { font-size: 1.25rem !important; }

    /* See All buttons */
    .button-blog { padding: 6px 14px !important; font-size: 0.8rem; }
    .view-more.colorblack { padding: 6px 14px !important; font-size: 0.8rem; }
}