/* ==========================================================================
   Saahitya.com - Neeon Index 2 Signature Blue Theme (#2962ff)
   Official Theme Styling matching https://www.radiustheme.com/demo/html/neeon/index2.html
   ========================================================================== */

:root {
    --neeon-primary: #2962ff;          /* Neeon Primary Royal Electric Blue */
    --neeon-primary-dark: #1559c2;     /* Deep Royal Blue */
    --neeon-primary-light: #5383ff;    /* Light Accent Blue */
    --neeon-accent: #FFAF25;           /* Neeon Warm Golden Amber */
    --neeon-orange: #FF3D00;           /* Neeon Sunset Orange */
    --neeon-pink: #FF3385;             /* Neeon Magenta Pink */
    --neeon-cyan: #0073FF;             /* Neeon Cyan Blue */
    --neeon-dark: #111827;             /* Charcoal Dark */
    --neeon-body: #4b5563;             /* Body Gray */
    --neeon-border: #e5e7eb;           /* Border hairline */
    --neeon-card-bg: #FFFFFF;
    --neeon-font-main: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    --neeon-font-hindi: 'Noto Sans Devanagari', 'Poppins', sans-serif;
}

[data-theme=dark] {
    --neeon-dark: #F9FAFB;
    --neeon-body: #9CA3AF;
    --neeon-border: #1F2937;
    --neeon-card-bg: #111827;
}

/* 1. Global Typography & Background */
body {
    font-family: var(--neeon-font-main) !important;
    color: var(--neeon-body) !important;
    background-color: #FAFAFA !important;
    -webkit-font-smoothing: antialiased;
}

[data-theme=dark] body {
    background-color: #0b0f19 !important;
    color: #9CA3AF !important;
}

h1, h2, h3, h4, h5, h6,
.post-title, .banner-title, .rt-section-heading {
    font-family: var(--neeon-font-main) !important;
    font-weight: 700 !important;
    color: var(--neeon-dark);
}

[data-theme=dark] h1, [data-theme=dark] h2, [data-theme=dark] h3,
[data-theme=dark] h4, [data-theme=dark] h5, [data-theme=dark] h6,
[data-theme=dark] .post-title, [data-theme=dark] .banner-title,
[data-theme=dark] .rt-section-heading {
    color: #F3F4F6 !important;
}

/* Devanagari Content Container for Hindi Poetry & Stories */
.poem-body {
    font-family: var(--neeon-font-hindi) !important;
    font-size: 1.25rem !important;
    line-height: 2.2 !important;
    color: #1F2937 !important;
    background: #FFFFFF;
    padding: 35px 40px;
    border-radius: 10px;
    border-left: 4px solid var(--neeon-primary);
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
    margin: 25px 0;
}

[data-theme=dark] .poem-body {
    background: #111827 !important;
    color: #E5E7EB !important;
    border-left-color: var(--neeon-primary);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.story-body {
    font-family: var(--neeon-font-hindi) !important;
    font-size: 1.15rem !important;
    line-height: 2.0 !important;
    color: #374151 !important;
}

[data-theme=dark] .story-body {
    color: #D1D5DB !important;
}

/* 2. Topbar */
.topbar.topbar-style-1 {
    background: #0f172a !important;
    padding: 7px 0 !important;
    border-bottom: 1px solid #1e293b;
}

.trending-title {
    background: var(--neeon-primary) !important;
    color: #FFFFFF !important;
    font-weight: 700;
    font-size: 0.78rem !important;
    letter-spacing: 0.5px;
    padding: 4px 12px !important;
    border-radius: 4px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(41, 98, 255, 0.4);
}

.trending-slide-title a {
    color: #E2E8F0 !important;
    font-size: 0.88rem;
    font-weight: 500;
}

.trending-slide-title a:hover {
    color: #FFFFFF !important;
    text-decoration: underline;
}

/* 3. Header & Brand Logo */
.header-main.navbar-wrap {
    background: #FFFFFF !important;
    border-bottom: 1px solid var(--neeon-border) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03) !important;
    padding: 12px 0 !important;
}

[data-theme=dark] .header-main.navbar-wrap {
    background: #0f172a !important;
    border-bottom: 1px solid #1e293b !important;
}

.sahitya-brand-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
}

.sahitya-brand-logo img {
    height: 48px;
    max-height: 48px;
    width: auto;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.sahitya-brand-logo:hover img {
    transform: scale(1.03);
}

.main-menu__nav ul li a {
    font-family: var(--neeon-font-main) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: var(--neeon-dark) !important;
}

[data-theme=dark] .main-menu__nav ul li a {
    color: #E2E8F0 !important;
}

.main-menu__nav ul li a:hover,
.main-menu__nav ul li.active > a {
    color: var(--neeon-primary) !important;
}

/* Write Post Button - Neeon Blue */
.btn-theme-writer,
.btn-write-post {
    background: linear-gradient(135deg, var(--neeon-primary) 0%, var(--neeon-primary-dark) 100%) !important;
    color: #FFFFFF !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    padding: 8px 20px !important;
    border-radius: 25px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    box-shadow: 0 4px 14px rgba(41, 98, 255, 0.35) !important;
    transition: all 0.2s ease !important;
    border: none !important;
}

.btn-theme-writer:hover,
.btn-write-post:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(41, 98, 255, 0.5) !important;
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #3d72ff 0%, #1d64d8 100%) !important;
}

/* 4. Section Headings */
.rt-section-heading {
    text-transform: capitalize;
}

.rt-section-heading .rt-section-dot {
    background: var(--neeon-accent) !important;
}

.rt-section-heading .rt-section-line {
    background: var(--neeon-primary) !important;
}

/* 5. Post Titles & Category Badges */
.post-title a {
    color: inherit;
    transition: color 0.2s ease;
}

.post-title a:hover {
    color: var(--neeon-primary) !important;
}

/* Clean Category Badges (Neeon Index 2 Color Palette) */
.world, .rt-cat-amber {
    background-color: var(--neeon-accent) !important;
    color: #FFFFFF !important;
}

.sports, .rt-cat-blue {
    background-color: var(--neeon-primary) !important;
    color: #FFFFFF !important;
}

.fashion, .life-style, .rt-cat-pink {
    background-color: var(--neeon-pink) !important;
    color: #FFFFFF !important;
}

.travel, .racing, .rt-cat-orange {
    background-color: var(--neeon-orange) !important;
    color: #FFFFFF !important;
}

.technology, .football, .rt-cat-cyan {
    background-color: var(--neeon-cyan) !important;
    color: #FFFFFF !important;
}

.badge.bg-danger,
.btn.btn-danger {
    background-color: var(--neeon-primary) !important;
    border-color: var(--neeon-primary) !important;
    color: #FFFFFF !important;
}

.badge.bg-danger:hover,
.btn.btn-danger:hover {
    background-color: var(--neeon-primary-dark) !important;
    border-color: var(--neeon-primary-dark) !important;
}

.text-danger {
    color: var(--neeon-primary) !important;
}

/* 6. Trending Stories Carousel (Medium Height 300px - Perfect Proportions) */
.rt-tending-slider-section {
    padding: 30px 0 20px 0;
}

.rt-post-overlay.post-trending {
    border-radius: 10px !important;
    overflow: hidden !important;
    height: 300px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

.rt-post-overlay.post-trending .post-img,
.rt-post-overlay.post-trending .post-img img {
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
}

.rt-post-overlay.post-trending .post-content {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.65) 55%, transparent 100%) !important;
    padding: 16px 14px 14px 14px !important;
}

.rt-post-overlay.post-trending .post-title,
.rt-post-overlay.post-trending .post-title a {
    color: #FFFFFF !important;
    font-size: 1.05rem !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9) !important;
    text-decoration: none !important;
}

.rt-post-overlay.post-trending .post-title a:hover {
    color: var(--neeon-accent) !important;
}

.rt-post-overlay.post-trending .post-meta .rt-meta,
.rt-post-overlay.post-trending .post-meta .rt-meta a {
    color: #E0E0E0 !important;
    font-size: 0.8rem !important;
    text-decoration: none !important;
}

/* 7. Overlay Post Cards (High Contrast White Text) */
.rt-post-overlay .post-title,
.rt-post-overlay .post-title a,
.rt-post-overlay .post-content .post-title,
.rt-post-overlay .post-content .post-title a,
.rt-post-overlay.ex-layout .post-title,
.rt-post-overlay.ex-layout .post-title a,
.rt-post-overlay.rt-post-overlay-lg .post-title,
.rt-post-overlay.rt-post-overlay-lg .post-title a,
.banner-title,
.banner-title a,
.banner-style-2 .banner-title,
.banner-style-2 .banner-title a,
.white-style .post-title,
.white-style .post-title a,
.rt-cart-item .title,
.rt-cart-item .title a {
    color: #FFFFFF !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85) !important;
}

.rt-post-overlay .post-title a:hover,
.rt-post-overlay .post-content .post-title a:hover,
.banner-title a:hover,
.white-style .post-title a:hover,
.rt-cart-item .title a:hover {
    color: var(--neeon-accent) !important;
}

.rt-post-overlay .post-meta .rt-meta,
.rt-post-overlay .post-meta .rt-meta a,
.rt-post-overlay .post-meta span,
.rt-post-overlay .post-meta li,
.banner-content .post-meta,
.banner-content .post-meta a,
.banner-content .post-meta span {
    color: #F3F4F6 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
}

/* 8. Hot Categories Widget - Neeon Blue & Charcoal Luxury Style */
.rt-categories {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.rt-categories li {
    margin-bottom: 10px !important;
}

.rt-categories a {
    min-height: 60px !important;
    padding: 12px 18px !important;
    border-radius: 8px !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background-color: #0f172a !important;
    background-size: cover !important;
    background-position: center center !important;
    border: 1px solid rgba(41, 98, 255, 0.25) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.rt-categories a::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.82) 0%, rgba(41, 98, 255, 0.75) 100%) !important;
    z-index: 1 !important;
    transition: background 0.3s ease !important;
}

.rt-categories li:hover a {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(41, 98, 255, 0.35) !important;
    border-color: rgba(41, 98, 255, 0.6) !important;
}

.rt-categories li:hover a::after {
    background: linear-gradient(135deg, rgba(41, 98, 255, 0.95) 0%, rgba(30, 64, 175, 0.9) 100%) !important;
}

.rt-categories .cat-name {
    position: relative !important;
    z-index: 2 !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    letter-spacing: 0.5px !important;
    text-transform: capitalize !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
}

.rt-categories .count {
    position: relative !important;
    z-index: 2 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: var(--neeon-primary) !important;
    background: #FFFFFF !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
    transition: transform 0.2s ease !important;
}

.rt-categories li:hover .count {
    transform: scale(1.1) !important;
    background: #FFFFFF !important;
    color: var(--neeon-primary) !important;
}

/* 9. Writer CTA Banner - High Contrast Royal Blue */
.post-banner-style-1::after,
.post-banner-style-1.writer-cta-box::after,
.post-banner-style-1::before,
.post-banner-style-1.writer-cta-box::before {
    display: none !important;
    background: none !important;
    background-image: none !important;
}

.post-banner-style-1.writer-cta-box {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 60%, #2962ff 100%) !important;
    border: 1px solid rgba(41, 98, 255, 0.45) !important;
    border-radius: 16px !important;
    padding: 38px 24px !important;
    text-align: center !important;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15) !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: 290px !important;
}

.post-banner-style-1.writer-cta-box .cta-title {
    color: #FFFFFF !important;
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    margin-bottom: 12px !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.post-banner-style-1.writer-cta-box .cta-desc {
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
    margin-bottom: 24px !important;
}

.post-banner-style-1.writer-cta-box .btn-cta-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #FFFFFF !important;
    color: #2962ff !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    padding: 12px 28px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s ease !important;
    border: none !important;
}

.post-banner-style-1.writer-cta-box .btn-cta-action:hover {
    background: #2962ff !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(41, 98, 255, 0.65) !important;
}

/* 9.1 Hero Banner & Category Carousel Spacing Fix (No Overlap) */
.rt-category-slider-style-1 {
    margin-top: 35px !important;
    margin-bottom: 45px !important;
    position: relative !important;
    z-index: 2 !important;
}

.banner.banner-style-2 {
    min-height: 650px !important;
}

.banner.banner-style-2 .banner-content.style-2 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

/* Offcanvas Drawer Genres & Nav Styling */
.offcanvas-widget ul li a {
    color: #1e293b !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: all 0.2s ease !important;
}

.offcanvas-widget ul li a:hover {
    color: var(--neeon-primary) !important;
    transform: translateX(4px) !important;
}

.offcanvas-widget ul li a i {
    color: var(--neeon-primary) !important;
}

.post-banner-style-1.writer-cta-box .btn-cta-action:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(41, 98, 255, 0.65) !important;
    background: linear-gradient(135deg, #4477ff 0%, #1e60d4 100%) !important;
    color: #FFFFFF !important;
}

/* 10. Interactive Like Button */
.btn-like-box {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 22px !important;
    border-radius: 30px !important;
    border: 2px solid var(--neeon-primary) !important;
    background: #FFFFFF !important;
    color: var(--neeon-primary) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.btn-like-box:hover, .btn-like-box.liked {
    background: #eff6ff !important;
    color: var(--neeon-primary-dark) !important;
    transform: scale(1.03);
}

[data-theme=dark] .btn-like-box {
    background: #1e293b !important;
    border-color: var(--neeon-primary) !important;
    color: #93c5fd !important;
}

/* 11. Single Post Layout */
.single-post-title {
    font-size: 2.2rem !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    margin: 14px 0 16px 0 !important;
    color: var(--neeon-dark);
}

.author-meta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid var(--neeon-border);
    border-bottom: 1px solid var(--neeon-border);
    margin-bottom: 24px;
}

/* 12. Offcanvas Drawer */
.offcanvas-content {
    background: #FFFFFF !important;
}

[data-theme=dark] .offcanvas-content {
    background: #0f172a !important;
}

.offcanvas-widget .offcanvas-widget-title {
    color: #1A1A1A !important;
    font-weight: 700 !important;
}

[data-theme=dark] .offcanvas-widget .offcanvas-widget-title {
    color: #F1F5F9 !important;
}

.offcanvas-widget p {
    color: #555555 !important;
}

[data-theme=dark] .offcanvas-widget p {
    color: #94A3B8 !important;
}

.offcanvas-widget ul li a {
    color: #1A1A1A !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    display: inline-block !important;
    padding: 4px 0 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

[data-theme=dark] .offcanvas-widget ul li a {
    color: #E2E8F0 !important;
}

.offcanvas-widget ul li a:hover {
    color: var(--neeon-primary) !important;
}

.offcanvas-widget ul li a i {
    color: var(--neeon-primary) !important;
}

/* 13. Light / Dark Mode Toggle ON DISPLAY (Styled with Neeon Blue) */
.theme-switch-box-wrap {
    position: fixed !important;
    right: 14px !important;
    top: 300px !important;
    z-index: 9999 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.theme-switch-box {
    display: grid !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: center !important;
    background: #2962ff !important;
    padding: 8px 6px !important;
    border-radius: 1.5rem !important;
    box-shadow: 0 4px 14px rgba(41, 98, 255, 0.45) !important;
}

[data-theme=dark] .theme-switch-box {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
}

.theme-switch-box__theme-status {
    color: #FFFFFF !important;
    line-height: 1 !important;
    text-align: center !important;
    font-size: 0.85rem !important;
}

.theme-switch-box__label {
    width: 18px !important;
    height: 36px !important;
    display: inline-block !important;
    position: relative !important;
    border-radius: 1.5rem !important;
    overflow: hidden !important;
    cursor: pointer !important;
}

.theme-switch-box__main {
    position: absolute !important;
    background: #0f172a !important;
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
    border-radius: 1.5rem !important;
    transition: all 0.3s ease !important;
}

[data-theme=dark] .theme-switch-box__main {
    background: #2962ff !important;
}

.theme-switch-box__main::before {
    position: absolute !important;
    content: "" !important;
    width: 12px !important;
    height: 12px !important;
    background-color: #FFFFFF !important;
    left: 50% !important;
    top: 0 !important;
    transform: translateX(-50%) translateY(3px) !important;
    border-radius: 50% !important;
    transition: 0.3s ease !important;
}

.theme-switch-box__input:checked + .theme-switch-box__main::before {
    transform: translateX(-50%) translateY(20px) !important;
}

/* 14. Footer (Natural Document Flow, Deep Charcoal) */
.footer {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    margin-top: 40px !important;
    clear: both !important;
    z-index: 10 !important;
    background: #0f1012 !important;
    color: #AAAAAA !important;
    border-top: 3px solid var(--neeon-primary) !important;
}

@media (min-width: 1400px) {
    .footer {
        position: static !important;
        bottom: auto !important;
    }
}

.footer-widget-title {
    color: #FFFFFF !important;
    font-size: 1.2rem !important;
    border-left: 3px solid var(--neeon-primary) !important;
    padding-left: 10px;
    margin-bottom: 20px !important;
}

.footer-bottom {
    background: #090909 !important;
    border-top: 1px solid #1E1E1E !important;
    padding: 16px 0 !important;
}

.footer-category-list li a:hover {
    color: var(--neeon-primary) !important;
}

.footer-category-list li a i {
    color: var(--neeon-primary) !important;
}

#main_content {
    margin-bottom: 0 !important;
    min-height: calc(100vh - 250px) !important;
}

/* 15. Auth Pages & Admin / Writer Portal Buttons */
.btn-sahitya {
    background: linear-gradient(135deg, var(--neeon-primary) 0%, var(--neeon-primary-dark) 100%) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 10px 24px !important;
    box-shadow: 0 4px 14px rgba(41, 98, 255, 0.35) !important;
    transition: all 0.2s ease !important;
    width: 100%;
}

.btn-sahitya:hover {
    background: linear-gradient(135deg, #3d72ff 0%, #1d64d8 100%) !important;
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(41, 98, 255, 0.45) !important;
}

/* Admin & Writer Sidebar */
.admin-sidebar .nav-link.active,
.admin-sidebar .nav-link:hover,
.writer-sidebar .nav-link.active,
.writer-sidebar .nav-link:hover {
    background: var(--neeon-primary) !important;
    color: #FFFFFF !important;
}

/* Breadcrumb & Main Spacing */
main {
    padding-top: 15px !important;
}