/* =============================================================================
   ASTRO RASHI — COSMIC THEME VARIABLES
   Dual Light / Dark system using [data-theme] on <html>
   ============================================================================= */

/* ── DARK THEME (default / cosmic) ───────────────────────────────────────── */
:root,
html[data-theme="dark"] {
    /* Backgrounds */
    --cosmic-bg-main:        #0B0E14;     /* Deep space black */
    --cosmic-bg-secondary:   #151A22;     /* Slightly lighter space */
    --cosmic-bg-card:        rgba(21, 26, 34, 0.55);
    --cosmic-bg-header:      rgba(8, 10, 20, 0.92);
    --cosmic-bg-input:       rgba(21, 26, 34, 0.65);
    --cosmic-bg-modal:       rgba(11, 14, 20, 0.98);
    --cosmic-overlay-opacity: 0.78;       /* Body galaxy overlay strength */

    /* Accents */
    --cosmic-primary:        #F6B73C;     /* Gold / star color */
    --cosmic-primary-dim:    rgba(246, 183, 60, 0.25);
    --cosmic-primary-glow:   rgba(246, 183, 60, 0.15);
    --cosmic-secondary:      #8E2DE2;     /* Nebula purple */
    --cosmic-accent:         #4A00E0;     /* Deep blue/purple */
    --cosmic-danger:         #EE4E5E;

    /* Text */
    --cosmic-text-main:      #FFFFFF;
    --cosmic-text-secondary: #CFCFCF;
    --cosmic-text-muted:     #8A8FA8;
    --cosmic-text-light:     #CFCFCF;

    /* Borders & Shadows */
    --cosmic-border:         rgba(255, 255, 255, 0.1);
    --cosmic-border-hover:   rgba(246, 183, 60, 0.4);
    --cosmic-border-gold:    rgba(246, 183, 60, 0.25);
    --cosmic-shadow:         rgba(0, 0, 0, 0.6);

    /* Card / Glass */
    --cosmic-card-bg:        rgba(21, 26, 34, 0.55);
    --cosmic-card-border:    rgba(255, 255, 255, 0.08);

    /* Footer */
    --cosmic-footer-bg:      rgba(5, 5, 10, 0.85);
    --cosmic-footer-border:  rgba(246, 183, 60, 0.12);

    /* Breadcrumb */
    --cosmic-breadcrumb-bg:  rgba(10, 13, 25, 0.6);
    --cosmic-breadcrumb-text: rgba(255, 255, 255, 0.8);
}

/* ── LIGHT THEME ──────────────────────────────────────────────────────────── */
html[data-theme="light"] {
    /* Backgrounds */
    --cosmic-bg-main:        #FAF7F0;     /* Warm ivory */
    --cosmic-bg-secondary:   #F0EBE0;     /* Soft cream */
    --cosmic-bg-card:        rgba(255, 255, 255, 0.95);
    --cosmic-bg-header:      rgba(250, 247, 240, 0.96);
    --cosmic-bg-input:       rgba(255, 255, 255, 0.9);
    --cosmic-bg-modal:       #ffffff;
    --cosmic-overlay-opacity: 0.08;       /* Very subtle galaxy tint for light mode */

    /* Accents — warm gold works in both themes */
    --cosmic-primary:        #C9920F;     /* Deeper gold for contrast on light */
    --cosmic-primary-dim:    rgba(201, 146, 15, 0.18);
    --cosmic-primary-glow:   rgba(201, 146, 15, 0.1);
    --cosmic-secondary:      #6B21A8;
    --cosmic-accent:         #3730A3;
    --cosmic-danger:         #DC2626;

    /* Text */
    --cosmic-text-main:      #1C1C2E;     /* Deep charcoal */
    --cosmic-text-secondary: #3D3D55;
    --cosmic-text-muted:     #6B7280;
    --cosmic-text-light:     #4B5563;

    /* Borders & Shadows */
    --cosmic-border:         rgba(0, 0, 0, 0.1);
    --cosmic-border-hover:   rgba(201, 146, 15, 0.5);
    --cosmic-border-gold:    rgba(201, 146, 15, 0.3);
    --cosmic-shadow:         rgba(0, 0, 0, 0.12);

    /* Card / Glass */
    --cosmic-card-bg:        rgba(255, 255, 255, 0.95);
    --cosmic-card-border:    rgba(0, 0, 0, 0.08);

    /* Footer */
    --cosmic-footer-bg:      #2A2A3A;     /* Keep footer dark in light mode — premium feel */
    --cosmic-footer-border:  rgba(246, 183, 60, 0.2);

    /* Breadcrumb */
    --cosmic-breadcrumb-bg:  rgba(201, 146, 15, 0.08);
    --cosmic-breadcrumb-text: #1C1C2E;
}

/* =============================================================================
   BASE BODY
   ============================================================================= */

body {
    font-family: 'Poppins', sans-serif !important;
    background-color: transparent !important;
    color: var(--cosmic-text-main) !important;
    transition: color 0.2s ease, background-color 0.2s ease;
}

/* =============================================================================
   TYPOGRAPHY
   ============================================================================= */

h1, h2, h3, h4, h5, h6, .heading {
    color: var(--cosmic-text-main) !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600;
    transition: color 0.2s ease;
}

p, span, div, a, li, label {
    color: var(--cosmic-text-light);
    transition: color 0.2s ease;
}

.text-black, .text-dark, .colorblack {
    color: var(--cosmic-text-main) !important;
}

.text-muted {
    color: var(--cosmic-text-muted) !important;
}

/* Links */
a {
    color: var(--cosmic-primary);
    transition: all 0.3s ease;
}
a:hover {
    color: var(--cosmic-text-main);
    text-decoration: none;
}

/* =============================================================================
   GLASSMORPHISM CARDS
   ============================================================================= */

.card,
.psychic-card,
.white-box,
.modal-content,
.dropdown-menu,
.footer-newsletter,
.kundli-card,
.panchang-card,
.video-card,
.product-card {
    background: var(--cosmic-card-bg) !important;
    background-color: var(--cosmic-card-bg) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid var(--cosmic-card-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 30px var(--cosmic-shadow) !important;
    color: var(--cosmic-text-main) !important;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.card-header {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom: 1px solid var(--cosmic-border) !important;
}

.card-body,
.card-body p,
.card-body span,
.btn-header-link {
    color: var(--cosmic-text-light) !important;
}

.card h1, .card h2, .card h3, .card h4, .card h5, .card p, .card span {
    color: var(--cosmic-text-main) !important;
}

/* =============================================================================
   SECTION BACKGROUNDS
   ============================================================================= */

.bg-white,
.bg-light,
.bg-astrologer-pink-light,
.bg-pink,
.bg-pink-light,
.looks-1,
.bg-transparent,
.backimage,
.astroway-live-astrologers {
    background-color: transparent !important;
    background-image: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* =============================================================================
   BUTTONS — PRIMARY (gold gradient — unchanged in both themes)
   ============================================================================= */

.btn-primary,
.btn-call,
.btn-chat,
.btn-audio-call,
.btn-video-call,
.btn-success,
.btn-info,
.btn-chat-astro,
.button-blog,
.btn-theme {
    background: linear-gradient(90deg, var(--cosmic-primary), #FF9F1A) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px var(--cosmic-primary-dim) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4) !important;
}
.btn-primary:hover,
.btn-call:hover,
.btn-chat:hover,
.btn-chat-astro:hover,
.button-blog:hover,
.btn-theme:hover {
    transform: scale(1.04) !important;
    box-shadow: 0 6px 20px rgba(246, 183, 60, 0.55) !important;
    color: #ffffff !important;
}

/* =============================================================================
   BUTTONS — SECONDARY
   ============================================================================= */

.btn-secondary,
.btn-outline-primary,
.btn-light,
.btn-white {
    background: var(--cosmic-card-bg) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid var(--cosmic-border-gold) !important;
    color: var(--cosmic-primary) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}
.btn-secondary:hover,
.btn-outline-primary:hover {
    background: var(--cosmic-primary-dim) !important;
    transform: scale(1.03) !important;
    color: var(--cosmic-text-main) !important;
}

/* =============================================================================
   FORMS & INPUTS
   ============================================================================= */

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    background: var(--cosmic-bg-input) !important;
    border: 1px solid var(--cosmic-border) !important;
    color: var(--cosmic-text-main) !important;
    height: 52px;
    border-radius: 12px !important;
    padding: 10px 15px !important;
    transition: all 0.3s ease !important;
}

/* Reset Select2 inline search input from inheriting generic input box styles */
.select2-container .select2-search--inline .select2-search__field,
input.select2-search__field {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    height: 28px !important;
    min-height: unset !important;
    border-radius: 0 !important;
    padding: 0 4px !important;
    margin: 2px 0 !important;
}
.input-group-custom input,
.input-group-custom input.form-control,
.input-group-custom input[type="text"],
.input-group-custom input[type="email"],
.input-group-custom input[type="password"],
.input-group-custom .form-control {
    padding-left: 54px !important;
    padding-right: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
}
.input-group-custom input[type="password"]::placeholder {
    letter-spacing: 2px !important;
}
::placeholder {
    opacity: 1 !important;
    color: #94a3b8 !important;
}
html[data-theme="light"] ::placeholder,
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder,
html[data-theme="light"] .form-control::placeholder {
    opacity: 1 !important;
    color: #64748b !important;
}
.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    background: var(--cosmic-bg-input) !important;
    border-color: var(--cosmic-primary) !important;
    box-shadow: 0 0 0 3px var(--cosmic-primary-glow) !important;
    color: var(--cosmic-text-main) !important;
    outline: none !important;
}
.form-control::placeholder,
input::placeholder {
    color: var(--cosmic-text-muted) !important;
}

/* =============================================================================
   NAVBAR (legacy selectors — mega-menu.css handles new header)
   ============================================================================= */

.navbar,
.header,
#header,
.navbar-light,
.top-navbar,
.navbar-collapse {
    background: transparent !important;
    background-color: transparent !important;
    transition: all 0.4s ease-in-out !important;
    padding: 15px 0 !important;
    border-bottom: 1px solid transparent !important;
    z-index: 9999 !important;
    position: relative;
}

.nav-link,
.navbar-nav .nav-item .nav-link,
.navbar-light .navbar-nav .nav-link,
.menu-item a,
.top-navbar a,
.top-navbar span,
.navbar-brand {
    color: var(--cosmic-text-main) !important;
    font-weight: 500 !important;
    transition: color 0.3s ease !important;
}
.nav-link:hover,
.menu-item a:hover {
    color: var(--cosmic-primary) !important;
}

/* =============================================================================
   FOOTER
   ============================================================================= */

.footer-bg-theme {
    background: var(--cosmic-footer-bg) !important;
    border-top: 1px solid var(--cosmic-footer-border) !important;
    transition: background 0.2s ease;
}

footer,
.footer {
    background: var(--cosmic-footer-bg) !important;
    backdrop-filter: blur(15px) !important;
    border-top: 1px solid var(--cosmic-footer-border) !important;
    color: var(--cosmic-text-light) !important;
    padding: 60px 0 30px !important;
}

footer h4, footer h5,
.footer-widget-title {
    color: var(--cosmic-primary) !important;
    font-weight: 600 !important;
}
footer a {
    color: var(--cosmic-text-secondary) !important;
}
footer a:hover {
    color: #fff !important;
    text-decoration: underline !important;
}

/* =============================================================================
   UTILITIES
   ============================================================================= */

.shadow-sm { box-shadow: 0 5px 15px var(--cosmic-shadow) !important; }
.shadow    { box-shadow: 0 10px 30px var(--cosmic-shadow) !important; }
.shadow-lg { box-shadow: 0 15px 40px var(--cosmic-shadow) !important; }

/* =============================================================================
   HERO / COSMIC SECTION
   ============================================================================= */

.hero-cosmic {
    position: relative;
    width: 100%;
    min-height: 80vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 80px 0;
}
.hero-cosmic-bg {
    position: absolute;
    top: 50%; left: 50%;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto;
    transform: translateX(-50%) translateY(-50%);
    z-index: 1;
    object-fit: cover;
}
.hero-cosmic-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.65);
    z-index: 2;
}
.hero-cosmic-content {
    position: relative;
    z-index: 3;
}

/* =============================================================================
   FLOATING ANIMATION
   ============================================================================= */

.float-card, .floating-animation {
    animation: floating 4s ease-in-out infinite;
}
@keyframes floating {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* =============================================================================
   BADGE / SPONSORED
   ============================================================================= */

.must-try-badge,
.badge-warning {
    background: var(--cosmic-primary) !important;
    color: #000 !important;
    border-radius: 8px !important;
    font-weight: bold !important;
}

/* =============================================================================
   PROFILE IMAGE
   ============================================================================= */

.profile-img-wrapper {
    border: 2px solid var(--cosmic-primary);
    padding: 3px;
    border-radius: 50%;
    background: var(--cosmic-primary-glow);
}

/* =============================================================================
   PAGINATION
   ============================================================================= */

.page-item .page-link {
    background: var(--cosmic-card-bg) !important;
    border-color: var(--cosmic-border) !important;
    color: var(--cosmic-text-light) !important;
    transition: all 0.2s ease;
}
.page-item.active .page-link {
    background: var(--cosmic-primary) !important;
    color: #000 !important;
    border-color: var(--cosmic-primary) !important;
}
.page-item .page-link:hover {
    background: var(--cosmic-primary-dim) !important;
    border-color: var(--cosmic-border-gold) !important;
    color: var(--cosmic-text-main) !important;
}

/* =============================================================================
   ACCORDION CHEVRON
   ============================================================================= */

h2.heading span[aria-expanded="true"] { display: inline-block !important; }
h2.heading span .fa-chevron-down,
h2.heading span .fa-chevron-up {
    border: 2px solid var(--cosmic-primary) !important;
    border-radius: 50% !important;
    padding: 5px !important;
    font-size: 20px !important;
    color: var(--cosmic-primary) !important;
    -webkit-text-fill-color: var(--cosmic-primary) !important;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}