/* Aligned Blazor Error UI Box */
#blazor-error-ui {
    background: #FFF0E6; /* Saffron tint */
    color: #7B2D00; /* Deep saffron text */
    bottom: 0;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.15);
    display: none;
    left: 0;
    padding: 1rem 1.5rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-family: system-ui, sans-serif;
    font-size: 0.95rem;
    border-top: 2px solid #C6400A; /* Saffron border */
}

/* SweetAlert image fallback sizing for alert icons (used by AlertIcons.GetIconHtml) */
.swal2-icon .alert-icon {
    width: 36px;
    height: 36px;
    display: inline-block;
}


    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 1.25rem;
        top: 0.75rem;
        font-weight: bold;
        color: #7B2D00;
    }

/* Modernized Blazor Error Boundary */
/*
.blazor-error-boundary {
    background: #f8d7da url('data:image/svg+xml;base64,...') no-repeat 1rem center; 
    padding: 1rem 1rem 1rem 3.7rem;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-radius: 0.25rem;
    margin: 1rem 0;
    font-size: 0.95rem;
}

    .blazor-error-boundary::after {
        content: "An unexpected error has occurred. Please try again later.";
        display: block;
        font-weight: 500;
    }
*/

/* Updated Icon Buttons */
.iconButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--primary-color);
    background: transparent;
    border: none;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

    .iconButton:hover {
        background-color: var(--primary-light);
        cursor: pointer;
    }

.iconOnlyButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    border-radius: 6px;
    background-color: transparent;
    border: none;
    color: var(--primary-color);
    transition: background-color 0.2s ease;
}

    .iconOnlyButton:hover {
        background-color: var(--primary-light);
        cursor: pointer;
    }

/*
.darkmode-layer, .darkmode-toggle {
    z-index: 500 !important;
    transition: background-color 0.3s ease, color 0.3s ease;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.nav .nav-item button {
    background-color: #f5f9fd !important;
    color: #495057 !important;
    font-weight: 500;
    border-radius: 6px;
    margin-right: 0.5rem;
    transition: all 0.3s ease;
    padding: 0.5rem 1rem;
    border: 1px solid #e0e0e0;
}

    .nav .nav-item button:hover {
        background-color: #e7f3ff !important;
        color: #1877f2 !important;
        border-color: #c2e0ff;
    }


#myTabContent {
    background-color: #ffffff !important;
    border-radius: 0 0 8px 8px;
    border: 1px solid #dee2e6;
    border-top: none;
    padding: 1.5rem;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);
}

.nav .nav-item .active {
    font-weight: 600 !important;
    color: #1877f2 !important;
    background-color: #e7f3ff !important;
    border-color: #cce4ff !important;
    border-bottom: 2px solid #1877f2;
}

.btn-outline-primary:hover {
    background-color: #1877f2 !important;
    color: #ffffff !important;
    border-color: #1877f2 !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}


.btn-primary {
    background-color: #1877f2 !important;
    border-color: #1877f2 !important;
    color: #ffffff !important;
    font-weight: 600;
    border-radius: 8px;
    transition: background-color 0.3s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(24, 119, 242, 0.3);
}

    .btn-primary:hover {
        background-color: #155cc0 !important; 
        border-color: #155cc0 !important;
        box-shadow: 0 4px 10px rgba(21, 92, 192, 0.4);
    }

    .btn-primary:active {
        background-color: #124da3 !important;
        border-color: #124da3 !important;
        box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
    }

*/
/* Light Theme */

/*
.tippy-tooltip.light-theme {
    background-color: #ffffff !important;
    color: #212529;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e0e0e0;
}

.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme .tippy-arrow {
    border-top-color: #ffffff !important;
}

.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme .tippy-arrow {
    border-bottom-color: #ffffff !important;
}

.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme .tippy-arrow {
    border-left-color: #ffffff !important;
}

.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme .tippy-arrow {
    border-right-color: #ffffff !important;
}

.tippy-tooltip.light-theme .tippy-backdrop {
    background-color: #ffffff;
    opacity: 0.95;
    border-radius: 8px;
}

.tippy-tooltip.light-theme .tippy-roundarrow {
    fill: #ffffff !important;
}

.tippy-tooltip.light-theme[data-animatefill] {
    background-color: #ffffff !important;
}
*/


/* Translucent Theme */
/*
.tippy-tooltip.translucent-theme {
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: #212529;
    backdrop-filter: blur(6px);
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

    .tippy-tooltip.translucent-theme .tippy-backdrop {
        background-color: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(8px);
        border-radius: 10px;
    }

    .tippy-tooltip.translucent-theme .tippy-roundarrow {
        fill: rgba(255, 255, 255, 0.9);
    }

    .tippy-tooltip.translucent-theme[data-animatefill] {
        background-color: rgba(255, 255, 255, 0.9) !important;
    }

.tippy-popper[x-placement^=top] .tippy-tooltip.translucent-theme .tippy-arrow {
    border-top-color: rgba(255, 255, 255, 0.9);
}

.tippy-popper[x-placement^=bottom] .tippy-tooltip.translucent-theme .tippy-arrow {
    border-bottom-color: rgba(255, 255, 255, 0.9);
}

.tippy-popper[x-placement^=left] .tippy-tooltip.translucent-theme .tippy-arrow {
    border-left-color: rgba(255, 255, 255, 0.9);
}

.tippy-popper[x-placement^=right] .tippy-tooltip.translucent-theme .tippy-arrow {
    border-right-color: rgba(255, 255, 255, 0.9);
}

*/

/* BOOTSTRAP PLACEHOLDER IMAGE STYLES (UPDATED) */
/*
.bd-placeholder-img {
    font-size: 1.125rem;
    user-select: none;
    text-anchor: middle;
    fill: #adb5bd; 
    background-color: #f8f9fa; 
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6c757d; 
    width: 100%;
    height: 100%;
    border: 1px dashed #ced4da;
    font-weight: 500;
}

.bd-placeholder-img-lg {
    font-size: calc(1.475rem + 2.7vw);
    font-weight: 600;
    color: #495057;
}

*/
/* Typography */
/*
body {
    font-family: 'Lexend Deca', sans-serif; 
    font-size: 16px;
    line-height: 1.8; 
    color: #333; 
    background-color: #f9f9f9;
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Varta', sans-serif; 
    font-weight: 600;
    color: #1A237E;
    margin-bottom: 0.5rem;
    line-height: 1.4; 
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.75rem;
}

p {
    margin-bottom: 1rem;
    font-size: 1rem;
    color: #555; 
    line-height: 1.8; 
}

a {
    color: #1A73E8; 
    text-decoration: underline; 
}

a:hover, a:focus {
    text-decoration: none; 
    color: #0D47A1; 
    outline: 2px dashed #0D47A1; 
}
*/

/* Vedic Colour Palette & Bootstrap Overrides */
:root {
    /* ── Vedic Palette ── */
    --primary-color:    #C6400A;   /* Sacred Saffron */
    --primary-dark:     #A33308;   /* Deep Saffron – hover / active */
    --primary-light:    #FFF0E6;   /* Saffron tint – hover backgrounds */
    --secondary-color:  #B8860B;   /* Dark Gold – wisdom & prosperity */
    --secondary-light:  #FFF8E1;   /* Gold tint */
    --background-color: #FFFDE7;   /* Warm Cream – satvic purity */
    --surface-color:    #FFFBF0;   /* Card / surface warm white */
    --text-color:       #3E2723;   /* Warm Dark Brown */
    --text-muted-color: #6D4C41;   /* Muted warm brown */
    --light-gray:       #E0D5C5;   /* Warm border */
    --dark-gray:        #795548;   /* Warm gray */
    --success-color:    #2E7D32;   /* Auspicious Green */
    --error-color:      #B71C1C;   /* Alert Red */
    --focus-color:      #DAA520;   /* Gold – accessibility focus */
    --accent-color:     #6A0028;   /* Deep Maroon – strength */
    --border-accent:    #D4A853;   /* Golden border trim */

    /* ── Bootstrap 5 Variable Overrides ── */
    --bs-primary:           #C6400A;
    --bs-primary-rgb:       198, 64, 10;
    --bs-link-color:        #C6400A;
    --bs-link-color-rgb:    198, 64, 10;
    --bs-link-hover-color:  #A33308;
    --bs-body-bg:           #FFFDE7;
    --bs-body-color:        #3E2723;
    --bs-secondary-color:   #6D4C41;
    --bs-success:           #2E7D32;
    --bs-success-rgb:       46, 125, 50;
    --bs-danger:            #B71C1C;
    --bs-danger-rgb:        183, 28, 28;
    --bs-warning:           #E65100;
    --bs-warning-rgb:       230, 81, 0;
    --bs-border-color:      #E0D5C5;
}

/* Layout */
/*
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
}

.section {
    padding: 2rem 0;
    margin-bottom: 2rem;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: -0.5rem;
}

.col {
    flex: 1;
    padding: 0.5rem;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}
*/

/* Buttons */

/*
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background-color: var(--primary-color);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Zodiac page main title (e.g. "Aries Daily Horoscope")
   Smaller by default to save vertical real-estate, but scales up slightly on larger screens. */
.zodiac-page-title {
    font-size: 1.125rem; /* ~18px */
    line-height: 1.2;
    margin: 0 0 0.5rem 0;
    font-weight: 600;
    color: var(--text-color);
}

@media (min-width: 992px) {
    .zodiac-page-title {
        font-size: 1.25rem; /* ~20px on wider screens */
    }
}


.btn:hover, .btn:focus {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    outline: 2px dashed var(--focus-color);
}

/* Zodiac carousel component styles (moved from ZodiacCarousel.razor) */
.zodiac-carousel-container {
    display: flex;
    flex-wrap: nowrap;
}

.zodiac-card {
    flex: 0 0 auto;
    /* responsive width: allow cards to grow on larger screens but stay compact on small devices */
    min-width: 110px;
    max-width: 160px;
    width: min(14vw, 140px);
    padding: 8px;
    text-align: center;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin: 6px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.zodiac-card.active {
    border-color: var(--secondary-color);
    background-color: var(--secondary-light);
}

.zodiac-icon {
    /* responsive icon size: grows slightly on wider viewports */
    width: clamp(48px, 8vw, 88px);
    height: auto; /* keep aspect ratio */
    max-height: 88px;
    object-fit: contain;
}

.zodiac-name {
    font-weight: bold;
}

.zodiac-date {
    font-size: 0.8em;
    color: #666;
}

/* Hide the date on very small screens to save vertical space */
@media (max-width: 540px) {
    .zodiac-date { display: none; }
    .zodiac-card { min-width: 100px; margin: 4px; }
}

/* Period selector buttons (Daily / Weekly / Monthly) - compact sizing for better vertical real estate */
.zodiac-period-btn {
    font-size: 0.9rem;
    padding: 0.25rem 0.5rem;
    line-height: 1;
    min-height: 32px;
    border-radius: 6px;
}

/* Slightly more compact on very small screens */
@media (max-width: 420px) {
    .zodiac-period-btn { font-size: 0.85rem; padding: 0.2rem 0.45rem; min-height: 30px; }
}

/* Carousel scroll buttons (left/right) - larger hit target and clearer visuals */
.zodiac-scroll-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px; /* recommended minimum touch target */
    height: 44px;
    padding: 0.25rem 0.5rem;
    font-size: 1.25rem; /* larger arrow glyph */
    line-height: 1;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.08);
    background-color: #ffffff;
    color: #333;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    cursor: pointer;
    transition: transform 0.08s ease, background-color 0.12s ease, box-shadow 0.12s ease;
    touch-action: manipulation;
}

.zodiac-scroll-btn:hover {
    transform: translateY(-2px);
    background-color: var(--primary-light);
}

.zodiac-scroll-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) inset;
}

@media (max-width: 540px) {
    .zodiac-scroll-btn { min-width: 40px; height: 40px; font-size: 1.1rem; }
}

/* Right rail layout: make the page a full-height column so the right rail can stretch
   to the footer. The ad slot uses a fixed width (300px) and flexes vertically to fill
   the available space. Hidden on small screens by layout classes. */

.site-root {
    /* make the root container a column that fills the viewport */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* ensures footer sits at bottom */
}

.content-wrapper {
    /* the middle area between header and footer should flex to fill remaining space */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* Allow the left column that contains nav + main to shrink when space is limited */
.content-wrapper .flex-grow-1 {
    min-width: 0;
}

/* Top bar buttons: keep items left-aligned, prevent wrapping and enable horizontal scroll on overflow */
.topbar-buttons {
    /* keep items on a single row where possible and allow horizontal scroll on overflow */
    flex-wrap: nowrap !important; /* prefer single row */
    overflow-x: auto; /* allow horizontal scrolling when items overflow */
    -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
}

.topbar-buttons > div {
    flex: 0 0 auto; /* avoid child flex items shrinking below their content */
}

.content-row {
    /* row with main content and right rail should stretch vertically */
    flex: 1 1 auto;
    display: flex;
    gap: 1rem;
}

/* Prevent the main content from forcing the rail to wrap below on narrower desktops.
   Make the row a no-wrap flex container and allow the main content to shrink when needed. */
.content-row {
    flex-wrap: nowrap;
    align-items: stretch; /* ensure both columns match height */
}

.content-section {
    /* main content should be allowed to shrink and avoid creating overflow / wrapping */
    flex: 1 1 auto;
    min-width: 0; /* allows proper truncation/overflow handling inside flex */
}

.content-section {
    /* main content column grows and can scroll if very long */
    flex: 1 1 auto;
    min-height: 0; /* allow proper overflow handling inside flex */
}


/* Ensure the aside column stays fixed at 300px on large screens and stretches vertically */
.right-rail-container {
    /* fixed logical width for the rail; prevents content squeeze */
    flex: 0 0 300px;
    display: flex;
    align-items: flex-start;
}

.right-rail {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
}

.right-rail .ad-slot {
    /* fixed logical ad width, but height will expand to fill available space */
    width: 300px;
    max-width: 100%;
    flex: 1 1 auto; /* fill vertical space */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 250px; /* default visual size if page content is short */
}

.right-rail .ad-slot .card-body {
    width: 100%;
}

/* On medium and smaller screens hide/stack the rail as before (bootstrap utilities already apply),
   but ensure the ad slot doesn't force overflow on small viewports. */
@media (max-width: 991.98px) {
    .right-rail .ad-slot { width: 100%; min-height: 180px; }
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: #fff;
}

.btn-secondary:hover, .btn-secondary:focus {
    background-color: #FFB300; 
    outline: 2px dashed var(--focus-color); 
}
*/

/* Forms */
/*
input, textarea, select {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    border: 1px solid var(--light-gray);
    border-radius: 4px;
    background-color: #fff;
    color: var(--text-color);
    transition: border-color 0.3s ease;
}

input:focus, textarea:focus, select:focus {
    border-color: var(--primary-color);
    outline: 2px dashed var(--focus-color); 
    box-shadow: 0 0 4px rgba(26, 35, 126, 0.5);
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-color);
}

.form-group {
    margin-bottom: 1.5rem;
}

*/

/* Cards */
/*
.card {
    background-color: #fff;
    border: 1px solid var(--light-gray);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.card-header {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.card-body {
    font-size: 1rem;
    color: var(--text-color);
}
*/

/* Navigation Bar */
/*
.navbar {
    background-color: var(--primary-color);
    color: #fff;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar a {
    color: #fff;
    text-decoration: underline; 
    margin: 0 1rem;
    font-weight: 600;
}

.navbar a:hover, .navbar a:focus {
    color: var(--secondary-color);
    outline: 2px dashed var(--focus-color); 
}

.no-horizontal-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
*/

/* Notifications */
/*
.alert {
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.alert-success {
    background-color: var(--success-color);
    color: #fff;
}

.alert-error {
    background-color: var(--error-color);
    color: #fff;
}
*/

/* Footer */
/*
.footer {
    background-color: var(--primary-color);
    color: #fff;
    padding: 1.5rem;
    text-align: center;
}

.footer a {
    color: var(--secondary-color);
    text-decoration: underline; 
}

.footer a:hover, .footer a:focus {
    text-decoration: none;
    color: var(--focus-color); 
    outline: 2px dashed var(--focus-color); 
}
*/

/* Animations */
/*
.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
*/

/* Media Queries */

/*
@media (max-width: 576px) {
    body {
        font-size: 14px;
        margin: 0;
    }

    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    .container {
        padding: 0.5rem;
    }

    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .navbar a {
        margin: 0.5rem 0;
    }

    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }

    .footer {
        text-align: left;
        padding: 1rem;
    }

    .footer a {
        display: block;
        margin-bottom: 0.5rem;
    }

    .card {
        margin-bottom: 1rem;
    }
}


@media (max-width: 768px) {
    body {
        font-size: 15px;
        margin: 0;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    .container {
        padding: 1rem;
    }

    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .navbar a {
        margin: 0.5rem 0;
    }

    .btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }

    .card {
        padding: 1rem;
    }

    .footer {
        text-align: center;
    }
}


@media (max-width: 992px) {
    body {
        font-size: 16px;
        margin: 0;
        padding: 0;
    }

    h1 {
        font-size: 2.25rem;
    }

    h2 {
        font-size: 2rem;
    }

    h3 {
        font-size: 1.75rem;
    }

    .container {
        max-width: 960px;
        padding: 0.25rem;
    }

    .navbar {
        justify-content: space-between;
    }

    .btn {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }

    .card {
        padding: 1.25rem;
    }

    .footer {
        padding: 1.5rem;
    }
}


@media (max-width: 1200px) {
    body {
        font-size: 16px;
        margin: 0;
    }

    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2.25rem;
    }

    h3 {
        font-size: 2rem;
    }

    .container {
        max-width: 1140px;
        padding: 2rem;
    }

    .navbar {
        justify-content: space-between;
    }

    .btn {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }

    .card {
        padding: 1.5rem;
    }

    .footer {
        padding: 2rem;
    }
}
@media (max-width: 1400px) {
    body {
        font-size: 16px;
        margin: 0;
    }

    h1 {
        font-size: 2.75rem;
    }

    h2 {
        font-size: 2.5rem;
    }

    h3 {
        font-size: 2.25rem;
    }

    .container {
        max-width: 1320px;
        padding: 2.5rem;
    }

    .navbar {
        justify-content: space-between;
    }

    .btn {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }

    .card {
        padding: 1.75rem;
    }

    .footer {
        padding: 2.5rem;
    }
}
*/

/* Dark Mode */

.dark-mode-toggle
.dark-mode-layer {
    background-color: #121212 !important;
    color: #ffffff !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dark-mode-toggle:hover {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
}

.dark-mode-toggle:active {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
}

.dark-mode-layer {
    background-color: #121212 !important;
    color: #ffffff !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}   
.dark-mode-layer .dark-mode-toggle {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
}

.dark-mode-layer .dark-mode-toggle:hover {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
}

.dark-mode-layer .dark-mode-toggle:active {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
}

.dark-mode-layer .dark-mode-toggle:focus {
    outline: 2px dashed #DAA520 !important; /* Gold focus outline for accessibility */
}

.dark-mode-layer .dark-mode-toggle:focus-visible {
    outline: 2px dashed #DAA520 !important; /* Gold focus outline for accessibility */
}

/* Right-side ad rail styles */
.right-rail {
    position: sticky;
    top: 86px; /* adjust to clear header */
    padding-left: 1rem;
}

.right-rail .ad-slot {
    width: 300px;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

@media (max-width: 991.98px) {
    /* Hide rail on small and medium screens */
    #RightRail { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════
   VEDIC THEME – Global overrides
   Applied site-wide; cascade from :root variables above.
   ═══════════════════════════════════════════════════════════ */

/* ── Page background – warm satvic cream ── */
body, html {
    background-color: var(--background-color) !important;
}
.bg-light {
    background-color: var(--background-color) !important;
}

/* ── Vedic serif headings ── */
h1, h2, h3, h4, h5, h6 {
    font-family: Georgia, 'Times New Roman', serif;
}

/* ── Site header – deep indigo with gold accent ── */
header > div {
    background: linear-gradient(135deg, #1A237E 0%, #283593 100%) !important;
    border-bottom: 3px solid #B8860B !important;
}
header > div h1 {
    color: #FFD700 !important;   /* Gold title */
}
header > div p {
    color: rgba(255, 220, 150, 0.9) !important;  /* Warm amber subtitle */
}

/* ── Bootstrap Primary Button – Sacred Saffron ── */
.btn-primary {
    --bs-btn-bg:                 #C6400A;
    --bs-btn-border-color:       #C6400A;
    --bs-btn-hover-bg:           #A33308;
    --bs-btn-hover-border-color: #A33308;
    --bs-btn-active-bg:          #8B2A06;
    --bs-btn-active-border-color:#8B2A06;
    --bs-btn-focus-shadow-rgb:   198, 64, 10;
    box-shadow: 0 2px 8px rgba(198, 64, 10, 0.25);
}
.btn-primary:hover {
    box-shadow: 0 4px 12px rgba(198, 64, 10, 0.4);
}

/* ── Bootstrap Outline Primary Button – Sacred Saffron ── */
.btn-outline-primary {
    --bs-btn-color:               #C6400A;
    --bs-btn-border-color:        #C6400A;
    --bs-btn-hover-bg:            #C6400A;
    --bs-btn-hover-border-color:  #C6400A;
    --bs-btn-hover-color:         #ffffff;
    --bs-btn-active-bg:           #A33308;
    --bs-btn-active-border-color: #A33308;
}

/* ── SweetAlert2 – Vedic dialog theming ── */
.swal2-popup .swal2-confirm {
    background-color: #C6400A !important;
    border-color: #C6400A !important;
}
.swal2-popup .swal2-confirm:hover {
    background-color: #A33308 !important;
}
.swal2-popup .swal2-cancel {
    background-color: #795548 !important;
}
.swal2-icon.swal2-warning {
    color: #B8860B !important;
    border-color: #B8860B !important;
}
.swal2-icon.swal2-info {
    color: #C6400A !important;
    border-color: #C6400A !important;
}
.swal2-icon.swal2-question {
    color: #1A237E !important;
    border-color: #1A237E !important;
}