/* 
 * Mobiplex - Electric Indigo & Purple Color Theme Overrides
 * Design System: Ken Burns Banner Zoom, Glowing Squircles, Pulsing Actions, & Glassmorphic Modules
 */

:root,
[data-bs-theme=dark] {
    /* Primary Accent Color (Terracotta Orange) */
    --bs-primary: #ea580c !important;
    --bs-primary-rgb: 234 88 12 !important;
    
    /* Interactive States (Terracotta & Amber) */
    --bs-link-color: #ea580c !important;
    --bs-link-color-rgb: 234 88 12 !important;
    --bs-link-hover-color: #7c2d12 !important;
    --bs-link-hover-color-rgb: 124 45 18 !important;
    
    /* Text Emphasis & Subtles */
    --bs-primary-text-emphasis: #7c2d12 !important;
    --bs-primary-bg-subtle: rgba(234, 88, 12, 0.1) !important;
    --bs-primary-border-subtle: #7c2d12 !important;
    
    /* Focus Ring Customization */
    --bs-focus-ring-color: rgba(234, 88, 12, 0.25) !important;
    
    /* Theme Background Override (Warm Sand / Cream) */
    --bs-body-bg: #f5efe6 !important;
    --bs-body-bg-rgb: 245 239 230 !important;
    
    /* Text Color Enhancements */
    --bs-body-color: #2c2523 !important; /* Dark Charcoal Brown for high contrast readability */
    --bs-body-color-rgb: 44 37 35 !important;
    --bs-heading-color: #2c2523 !important;
}

/* Ambient Radial Backglows for Cinema Depth Screen Vibe */
body::before {
    content: "";
    position: fixed;
    top: -10%;
    left: -10%;
    width: 60vw;
    height: 60vh;
    background: radial-gradient(circle, rgba(234, 88, 12, 0.08) 0%, rgba(0,0,0,0) 70%);
    pointer-events: none;
    z-index: -1;
}
body::after {
    content: "";
    position: fixed;
    bottom: -10%;
    right: -10%;
    width: 60vw;
    height: 60vh;
    background: radial-gradient(circle, rgba(124, 45, 18, 0.06) 0%, rgba(0,0,0,0) 70%);
    pointer-events: none;
    z-index: -1;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}
::-webkit-scrollbar-track {
    background: #f5efe6 !important;
}
::-webkit-scrollbar-thumb {
    background: #e5d5c5 !important;
    border-radius: 10px !important;
}
::-webkit-scrollbar-thumb:hover {
    background: #ea580c !important;
}

/* Core Accent Helpers */
.text-primary {
    color: var(--bs-primary) !important;
}

.bg-primary {
    background-color: var(--bs-primary) !important;
}

.border-primary {
    border-color: var(--bs-primary) !important;
}

/* --- BANNER OVERHAUL --- */
/* --- BANNER OVERHAUL: NEON BORDERED FRAME --- */
.banner-container {
    margin: 20px 24px 30px 24px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 2px solid #7c2d12 !important; /* Glowing terracotta border */
    box-shadow: 0 0 25px rgba(234, 88, 12, 0.35), inset 0 0 15px rgba(234, 88, 12, 0.15) !important;
    position: relative !important;
    transition: all 0.4s ease !important;
}

.banner-container::after {
    display: none !important; /* Hide gradient mask overlay to prevent covering/cutting the bottom of the image */
}

@media (max-width: 768px) {
    .banner-container {
        margin: 10px 12px 20px 12px !important;
        border-radius: 10px !important;
        border-width: 1.5px !important;
    }
}

/* Slide image pan / Ken Burns transition triggers */
.banner-container .swiper-slide {
    position: relative;
    overflow: hidden !important;
    border-radius: 16px !important;
    background-color: #f5efe6 !important; /* Backing color matching the page bg */
    height: 100% !important; /* Match parent container height */
}

@media (max-width: 768px) {
    .banner-container .swiper-slide {
        border-radius: 10px !important;
    }
}

/* Force anchor slide block layout to allow contain calculations */
.banner-container .swiper-slide.slide {
    display: block !important;
    width: 100% !important;
    height: 100% !important; /* Match parent container height */
}

.banner-container .swiper-slide img {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important; /* Match parent container height */
    max-height: 100% !important;
    object-fit: cover !important; /* Fill container proportionally */
    object-position: center !important;
    border-radius: 16px !important;
}

@media (max-width: 768px) {
    .banner-container .swiper-slide img {
        border-radius: 10px !important;
    }
}

/* Banner swiper controls */
.swiper-banner-button-prev,
.swiper-banner-button-next {
    color: #ffffff !important;
    filter: drop-shadow(0 0 10px rgba(234, 88, 12, 0.6)) !important;
    z-index: 5 !important;
    transition: all 0.3s ease !important;
}

.swiper-banner-button-prev:hover,
.swiper-banner-button-next:hover {
    color: var(--bs-primary) !important;
    filter: drop-shadow(0 0 15px rgba(234, 88, 12, 0.8)) !important;
    transform: scale(1.1) !important;
}


/* --- CARD OVERHAUL --- */
/* /* Option 4: Highly Rounded Squircles & Terracotta Outlines */
.iq-card.card-hover {
    border-radius: 18px !important;
    overflow: hidden !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid rgba(234, 88, 12, 0.15) !important;
    background: rgba(255, 255, 255, 0.75) !important; /* Translucent glassmorphic white backing */
}

.iq-card.card-hover:hover {
    transform: translateY(-8px) scale(1.03) !important;
    box-shadow: 0 15px 35px rgba(234, 88, 12, 0.25) !important;
    border-color: #ea580c !important;
}

.iq-card.card-hover img {
    border-radius: 18px !important;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    border: none !important;
}

.iq-card.card-hover:hover img {
    transform: scale(1.04) !important;
}

/* --- CATEGORY OVERHAUL --- */
/* Round pods with glass blur */
.iq-card-geners {
    border-radius: 30px !important;
    overflow: hidden !important;
    background: rgba(234, 88, 12, 0.08) !important;
    border: 1px solid rgba(234, 88, 12, 0.18) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    transition: all 0.3s ease !important;
}

.iq-card-geners:hover {
    background: rgba(234, 88, 12, 0.25) !important;
    border-color: #ea580c !important;
    transform: scale(1.04) !important;
    box-shadow: 0 8px 20px rgba(234, 88, 12, 0.25) !important;
}

.iq-card-geners img {
    border-radius: 30px !important;
}

/* --- PAGE-WISE UI INTRINSICS --- */

/* 1. Header & Navigation */
header.header-default {
    background: rgba(44, 37, 35, 0.75) !important; /* Dark Charcoal Brown with glassmorphism blur */
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(234, 88, 12, 0.15) !important; /* Thin terracotta accent line */
    transition: background 0.3s ease !important;
}

header.header-default.sticky {
    background: rgba(44, 37, 35, 0.95) !important;
    border-bottom: 1px solid rgba(234, 88, 12, 0.25) !important;
}

.navbar-nav .nav-link {
    color: #ebdcd0 !important; /* Soft warm sand links */
    transition: color 0.3s ease !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: #ea580c !important; /* Terracotta orange hover */
}

/* View All Links underline animation */
.iq-view-all {
    position: relative;
    padding-bottom: 2px;
}
.iq-view-all::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1.5px;
    background-color: var(--bs-primary);
    transition: width 0.3s ease;
}
.iq-view-all:hover::after {
    width: 100%;
}

/* 2. Video Player Details */
.video-wrapper {
    box-shadow: 0 0 25px rgba(234, 88, 12, 0.2) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid rgba(234, 88, 12, 0.15) !important;
}

.back-btn {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-inline-end: 12px !important; /* Spacing that works in LTR & RTL */
}

/* Back Arrow button styled */
.back-btn a {
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border-radius: 50% !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    color: #2c2523 !important;
}

.back-btn a:hover {
    background: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 10px rgba(234, 88, 12, 0.5) !important;
    color: #ffffff !important;
    transform: scale(1.05) !important;
}

/* 3. Detail Page Backdrop & Pulsing play button */
.tv-show-detail,
.movie-banner {
    position: relative;
}

/* Pulse animation keyframe */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.6);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(234, 88, 12, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(234, 88, 12, 0);
    }
}

.block-social-info .iq-button a.btn {
    background-color: var(--bs-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(234, 88, 12, 0.3) !important;
    transition: all 0.3s ease !important;
    animation: pulse 2s infinite !important; /* Ripple effect */
}

.block-social-info .iq-button a.btn:hover {
    background-color: #7c2d12 !important;
    color: #ffffff !important;
    transform: scale(1.1) !important;
    box-shadow: 0 0 15px rgba(234, 88, 12, 0.6) !important;
}

/* 4. Pricing / Packages Card Style */
.pricing-plan-wrapper,
.pricing-details {
    background: rgba(255, 255, 255, 0.75) !important; /* Translucent white card */
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(234, 88, 12, 0.1) !important;
    border-top: 3px solid var(--bs-primary) !important; /* Top highlight border */
    border-radius: 16px !important;
    padding: 30px !important;
    transition: all 0.3s ease !important;
}

.pricing-plan-wrapper:hover {
    border-color: #ea580c !important;
    background: rgba(255, 255, 255, 0.95) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 25px rgba(234, 88, 12, 0.15) !important;
}

/* Bullet markers styling */
.pricing-plan-description ul li i {
    color: var(--bs-primary) !important;
    text-shadow: 0 0 8px rgba(234, 88, 12, 0.4) !important;
}

/* 5. Subscription call-to-actions buttons */
.btn-subs a {
    background: linear-gradient(135deg, #ea580c 0%, #7c2d12 100%) !important;
    border: none !important;
    border-radius: 30px !important;
    padding: 8px 24px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(234, 88, 12, 0.25) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.btn-subs a:hover {
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow: 0 8px 22px rgba(234, 88, 12, 0.4) !important;
    color: #ffffff !important;
}

/* Standard Buttons & Hover Animations */
.btn-primary,
.iq-button .btn {
    background: linear-gradient(135deg, #ea580c 0%, #7c2d12 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.2) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.iq-button .btn:hover,
.iq-button .btn:focus {
    background: linear-gradient(135deg, #7c2d12 0%, #ea580c 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(234, 88, 12, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* Back to Top Button */
#back-to-top .top {
    background-color: var(--bs-primary) !important;
    box-shadow: 0 4px 10px rgba(234, 88, 12, 0.3) !important;
}

#back-to-top .top:hover {
    background-color: var(--bs-link-hover-color) !important;
    box-shadow: 0 6px 15px rgba(234, 88, 12, 0.5) !important;
}

/* Inputs & Form Fields Glowing Accent */
.form-control,
.form-select {
    border-color: #ebdcd0 !important; /* Soft sand border */
    background-color: #ffffff !important; /* Solid clean white inputs */
    color: #2c2523 !important; /* Dark charcoal brown text */
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(234, 88, 12, 0.2) !important;
    background-color: #ffffff !important;
}

/* 6. Translucent Auth Card (Glassmorphism Login/Register) */
.user-login-card {
    background: rgba(255, 255, 255, 0.9) !important; /* Solid clean light card backing */
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border: 1px solid rgba(234, 88, 12, 0.15) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06) !important;
    padding: 40px !important;
}

.user-login-card .text-white,
.user-login-card p.text-white,
.user-login-card a.text-white,
.user-login-card .otp-timer,
.user-login-card label.text-white {
    color: #2c2523 !important; /* Force readable charcoal brown */
}

.user-login-card a.text-white:hover {
    color: #ea580c !important; /* Terracotta orange hover */
}

/* Accordion FAQs customization */
.accordion-item {
    background-color: #ffffff !important;
    border: 1px solid rgba(234, 88, 12, 0.1) !important;
}

.accordion-button {
    background-color: transparent !important;
    color: #2c2523 !important;
}

.accordion-button:not(.collapsed) {
    color: var(--bs-primary) !important;
    background-color: var(--bs-primary-bg-subtle) !important;
}

/* Swiper navigation sliders customization */
.swiper-button-next,
.swiper-button-prev,
.swiper-nav {
    color: var(--bs-primary) !important;
}

.swiper-pagination-bullet-active {
    background-color: var(--bs-primary) !important;
}

/* --- CATEGORIES NATIVE SCROLLER OVERRIDE --- */
.categorys .overflow-hidden {
    overflow: hidden !important; /* Revert parent clipping since scrollbar is invisible */
}

.categorys .swiper-card {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    display: block !important;
    white-space: nowrap !important;
    scrollbar-width: none !important; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none !important; /* Hide scrollbar for IE/Edge */
    padding-bottom: 0px !important; /* Reset padding space */
}

.categorys .geners-card {
    display: flex !important;
    flex-wrap: nowrap !important;
    transform: none !important;
    width: max-content !important;
}

.categorys .geners-card li {
    flex: 0 0 auto !important;
    width: 140px !important;
    margin-right: 15px !important;
}

/* Hide Scrollbar Track & Thumb for Webkit (Chrome, Safari, Opera) */
.categorys .swiper-card::-webkit-scrollbar {
    display: none !important;
}

/* --- DROPDOWN SELECT & POPUP OVERRIDES --- */
/* Enforce compliance for country select dropdowns and options */
.mobile-country-code {
    background-color: #ffffff !important;
    color: #2c2523 !important;
    border-color: #ebdcd0 !important;
}

/* Force standard select options to draw charcoal text on a white background */
select option,
.form-select option,
.form-control option {
    background-color: #ffffff !important;
    color: #2c2523 !important;
}

/* Style plugin-generated country list dropdowns (intl-tel-input) */
.iti__country-list {
    background-color: #ffffff !important;
    border: 1px solid #ebdcd0 !important;
    color: #2c2523 !important;
    z-index: 99 !important;
}

.iti__country:hover,
.iti__country.iti__highlight {
    background-color: rgba(234, 88, 12, 0.1) !important;
}

.iti__country-name,
.iti__dial-code {
    color: #2c2523 !important;
}

/* Fix browser specific hover issues in selects */
select.form-select:hover,
select.form-control:hover {
    border-color: var(--bs-primary) !important;
}

/* --- HOME BANNER ASPECT RATIO OPTIMIZATION (DESKTOP ONLY) --- */
@media (min-width: 992px) {
    .banner-container {
        aspect-ratio: 16 / 9 !important; /* Enforces exact widescreen container shape */
        height: auto !important; /* Height is calculated automatically from width */
    }

    #home-banner-slider,
    [data-swiper="home-banner-slider"] {
        height: 100% !important; /* Fill container height */
    }
    
    .banner-container .swiper-slide img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* Fits perfectly with 0% crop and 0% side bars */
        object-position: center !important; /* Align to center focus */
    }
}

/* --- DESIGN SYSTEM REFINEMENTS (WARM SAND & TERRACOTTA LIGHT MODE) --- */

/* 1. Header & Navigation Shadow */
header.header-default {
    box-shadow: 0 4px 20px rgba(124, 45, 18, 0.05) !important;
}

/* 2. Brand Footer Refinements (Widescreen Sage Frame) */
footer,
footer.footer-one,
.footer-one {
    background-color: #2c2523 !important; /* Dark Charcoal Brown background */
    background: #2c2523 !important;
    color: #ebdcd0 !important;
    border-top: 1px solid rgba(234, 88, 12, 0.15) !important;
}
footer a,
footer p,
footer span,
footer .footer-menu li a,
footer .menu li a {
    color: #ebdcd0 !important;
    transition: color 0.3s ease !important;
}
footer a:hover,
footer .footer-menu li a:hover,
footer .menu li a:hover {
    color: #ea580c !important;
}
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6, footer .widget-title {
    color: #ffffff !important;
    font-weight: 600 !important;
}
/* Social media icons inside footer */
footer .social-icons li a {
    background-color: rgba(234, 88, 12, 0.08) !important;
    color: #ebdcd0 !important;
    border: 1px solid rgba(234, 88, 12, 0.2) !important;
}
footer .social-icons li a:hover {
    background-color: #ea580c !important;
    color: #ffffff !important;
    border-color: #ea580c !important;
}

/* 3. Card Title Contrast & Details */
.iq-card.card-hover .iq-title a,
.iq-card.card-hover .iq-title,
.iq-card.card-hover h5,
.iq-card.card-hover h5 a {
    color: #2c2523 !important;
    font-weight: 600 !important;
}
.iq-card.card-hover .iq-title a:hover {
    color: #ea580c !important;
}
.iq-card.card-hover .movie-time,
.iq-card.card-hover .movie-date,
.iq-card.card-hover .text-white,
.iq-card.card-hover span,
.iq-card.card-hover p,
.iq-card.card-hover .movie-type {
    color: #374151 !important; /* Charcoal dark gray details text */
    font-weight: 500 !important;
}

/* 4. Form Labels & High Contrast Inputs */
label,
.form-label,
label.text-white,
.user-login-card label,
.profile-form label {
    color: #2c2523 !important; /* Bold charcoal brown labels */
    font-weight: 600 !important;
}

/* Placeholder colors */
::placeholder,
.form-control::placeholder {
    color: #64748b !important; /* Charcoal slate gray placeholders */
    opacity: 0.8 !important;
}

/* 5. Row Contrast & Spacing Improvements */
.main-title,
.main-title a,
h5.main-title {
    color: #2c2523 !important; /* Bold charcoal brown category row headings */
    font-weight: 600 !important;
}

.iq-view-all {
    color: #7c2d12 !important; /* High contrast terracotta */
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    letter-spacing: 0.5px !important;
}

.iq-view-all:hover {
    color: #ea580c !important; /* Warm orange on hover */
}

/* Swiper navigation next / prev controls styling */
.recommended-block .swiper-button-next,
.recommended-block .swiper-button-prev,
.categorys .swiper-button-next,
.categorys .swiper-button-prev {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(234, 88, 12, 0.2) !important;
    color: #2c2523 !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 10px rgba(124, 45, 18, 0.05) !important;
    transition: all 0.3s ease !important;
}

.recommended-block .swiper-button-next::after,
.recommended-block .swiper-button-prev::after,
.categorys .swiper-button-next::after,
.categorys .swiper-button-prev::after {
    font-size: 14px !important;
    font-weight: bold !important;
}

.recommended-block .swiper-button-next:hover,
.recommended-block .swiper-button-prev:hover,
.categorys .swiper-button-next:hover,
.categorys .swiper-button-prev:hover {
    background-color: #ea580c !important;
    color: #ffffff !important;
    border-color: #ea580c !important;
    box-shadow: 0 6px 15px rgba(234, 88, 12, 0.3) !important;
}

/* Spacing and border separators between shelf modules */
.recommended-block {
    margin-bottom: 2rem !important;
    padding-bottom: 1.5rem !important;
    border-bottom: 1px solid rgba(234, 88, 12, 0.08) !important;
}

/* 6. Search Dropdown Polish (Dark Charcoal Theme inside Header) */
.dropdown-search,
.iq-search-bar {
    background-color: #3e3532 !important; /* Slightly lighter dark charcoal */
    border: 1px solid rgba(234, 88, 12, 0.25) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}

.dropdown-search .form-control {
    background-color: rgba(0, 0, 0, 0.2) !important;
    color: #ffffff !important;
    border: 1px solid rgba(234, 88, 12, 0.15) !important;
}

.dropdown-search .form-control:focus {
    border-color: #ea580c !important;
    background-color: rgba(0, 0, 0, 0.3) !important;
}

.dropdown-search ::placeholder,
.dropdown-search .form-control::placeholder {
    color: #ebdcd0 !important; /* Light sand placeholder text */
    opacity: 0.7 !important;
}

.search-submit {
    background: transparent !important;
    color: #ebdcd0 !important;
    border: none !important;
    transition: color 0.3s ease !important;
}

.search-submit:hover {
    color: #ea580c !important;
}

/* 7. Sidebar offcanvas layout styling */
#sidemenu.offcanvas {
    background-color: #2c2523 !important; /* Dark Charcoal Brown background */
    color: #ebdcd0 !important; /* Light sand text */
    border-left: 1px solid rgba(234, 88, 12, 0.15) !important;
}

#sidemenu .offcanvas-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

#sidemenu .offcanvas-title {
    color: #ffffff !important;
    font-weight: 600 !important;
}

#sidemenu .btn-close {
    filter: invert(1) !important; /* White close button on dark */
    opacity: 0.8 !important;
    transition: opacity 0.3s ease !important;
}

#sidemenu .btn-close:hover {
    opacity: 1 !important;
}

.menu-sidebar {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.menu-sidebar li {
    margin-bottom: 10px !important;
}

.menu-sidebar li a {
    color: #ebdcd0 !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 18px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.menu-sidebar li a i {
    color: #ea580c !important; /* Terracotta icons */
    font-size: 16px !important;
    width: 20px !important;
    text-align: center !important;
    transition: transform 0.3s ease !important;
}

.menu-sidebar li a:hover {
    background-color: rgba(234, 88, 12, 0.1) !important;
    color: #ea580c !important;
    transform: translateX(4px) !important;
}

.menu-sidebar li a:hover i {
    transform: scale(1.1) !important;
}

/* 8. Static Page Database-Driven Text Overrides & Navigation Arrow visibility */
/* Force readable Charcoal Brown color for database HTML text, ignoring inline white text tags */
.iq-blog-box,
.iq-blog-box *,
.iq-blog-box h1, .iq-blog-box h2, .iq-blog-box h3, .iq-blog-box h4, .iq-blog-box h5, .iq-blog-box h6,
.iq-blog-box p, .iq-blog-box span, .iq-blog-box li, .iq-blog-box strong {
    color: #2c2523 !important; /* Force Charcoal Brown text visibility */
}

/* Retain brand terracotta orange for any active page body links */
.iq-blog-box a {
    color: #ea580c !important;
}
.iq-blog-box a:hover {
    color: #7c2d12 !important;
}

/* Darken back navigation SVG icon which is white by default */
.back-btn a img,
span.back-btn a img {
    border: none !important; /* Remove inner border circle */
    border-radius: 0 !important; /* Remove inner border radius */
    padding: 0 !important; /* Remove inner padding */
    filter: brightness(0.15) !important; /* Render dark charcoal arrow */
    width: 18px !important;
    height: 18px !important;
    transition: all 0.3s ease !important;
}

/* On button hover (orange background), make the arrow white */
.back-btn a:hover img,
span.back-btn a:hover img {
    filter: brightness(0) invert(1) !important;
}

/* Swiper Banner Navigation Button Visibility & Theme Match */
.swiper-banner-button-prev.swiper-nav,
.swiper-banner-button-next.swiper-nav {
    background-color: rgba(44, 37, 35, 0.65) !important; /* Semi-transparent charcoal backdrop */
    border: 1px solid rgba(234, 88, 12, 0.4) !important; /* Terracotta themed border */
    border-radius: 50% !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    z-index: 9999 !important; /* High z-index to ensure visibility above all slides */
}

/* Make chevron arrows white and thick enough for high contrast visibility */
.swiper-banner-button-prev.swiper-nav i::before,
.swiper-banner-button-prev.swiper-nav i::after,
.swiper-banner-button-next.swiper-nav i::before,
.swiper-banner-button-next.swiper-nav i::after {
    background: #ffffff !important; /* Solid high-contrast white arrows */
    height: 0.15rem !important; /* Slightly thicker line for better visibility */
}

/* Hide the overlapping helper progress SVG and default CSS borders to ensure a single clean circle */
.swiper-banner-button-prev.swiper-nav svg,
.swiper-banner-button-next.swiper-nav svg {
    display: none !important;
}
.swiper-banner-button-prev.swiper-nav::before,
.swiper-banner-button-prev.swiper-nav::after,
.swiper-banner-button-next.swiper-nav::before,
.swiper-banner-button-next.swiper-nav::after {
    display: none !important;
}

/* Global Swiper Buttons Override */
.swiper-button-next,
.swiper-button-prev {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(234, 88, 12, 0.2) !important;
    color: #2c2523 !important;
    transition: all 0.3s ease !important;
}

/* Episode List Card Play Button Theme Styling */
.episode-block .episode-play {
    background: rgba(234, 88, 12, 0.25) !important;
}
.episode-block .episode-play a {
    background: var(--bs-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.3) !important;
    transition: all 0.3s ease !important;
}
.episode-block .episode-play a:hover {
    background: #7c2d12 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 6px 18px rgba(234, 88, 12, 0.5) !important;
}

/* Interactive Details Card Actions Hover theme-matching */
.share-icons.music-play-lists li span {
    transition: all 0.3s ease !important;
}
.share-icons.music-play-lists li span:hover {
    background: var(--bs-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(234, 88, 12, 0.4) !important;
}

/* Swiper Card Navigation Arrows (Chevron icon visibility) */
.swiper-button-next::after,
.swiper-button-prev::after {
    color: #2c2523 !important; /* High contrast charcoal arrow color */
    font-size: 14px !important;
    font-weight: bold !important;
}

.swiper-button-next:hover::after,
.swiper-button-prev:hover::after {
    color: #ffffff !important; /* White arrow color on hover state */
}

/* --- DETAILS PAGE VISIBILITY OVERRIDES --- */
/* Force main title text visibility */
.texture-text {
    color: #2c2523 !important;
    -webkit-text-fill-color: #2c2523 !important;
    background-image: none !important;
}

/* Force metadata tags visibility */
.movie-tag li {
    color: #4b5563 !important;
}

/* Force episode list content visibility */
.description-box h4 {
    color: #2c2523 !important;
    font-weight: 600 !important;
}
.description-box p {
    color: #4b5563 !important;
}
.description-box .movie-tag.desss li {
    color: #6b7280 !important;
}