/* ==========================================================================
   KissKH - Theme System
   ========================================================================== */

/* CSS Variables - Default Theme (Deep Purple & Amber) - Purple background, White content */
:root {
    --loading: rgba(0, 0, 0, .4);
    --placeholder: rgba(255, 255, 255, .5);
    --menu-backdrop: rgba(0, 0, 0, .5);
    --draw-bg: rgba(33, 33, 33, .98);
    --primary-color: #673ab7;
    --accent-color: #ffd740;
    --text-color: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --card-bg: #673ab7;
    --border-color: rgba(255, 255, 255, 0.12);
    --background-color: #673ab7;
    --content-bg: #ffffff;
    --navbar-bg: #673ab7;
    --navbar-text: #ffffff;
}

/* Theme 1: Deep Purple & Amber - Purple background, White content */
body.deeppurple-amber-theme {
    --primary-color: #673ab7;
    --accent-color: #ffd740;
    --text-color: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --card-bg: #673ab7;
    --border-color: rgba(255, 255, 255, 0.12);
    --background-color: #673ab7;
    --content-bg: #ffffff;
    --navbar-bg: #673ab7;
    --navbar-text: #ffffff;
}

/* Theme 2: Indigo Pink - Blue background, White content */
body.indigo-pink-theme {
    --primary-color: #3f51b5;
    --accent-color: #e91e63;
    --text-color: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --card-bg: #3f51b5;
    --border-color: rgba(255, 255, 255, 0.12);
    --background-color: #3f51b5;
    --content-bg: #ffffff;
    --navbar-bg: #3f51b5;
    --navbar-text: #ffffff;
}

/* Theme 3: Pink Blue Grey - Pink background, Grey content */
body.pink-bluegrey-theme {
    --primary-color: #e91e63;
    --accent-color: #607d8b;
    --text-color: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --card-bg: #e91e63;
    --border-color: rgba(255, 255, 255, 0.12);
    --background-color: #e91e63;
    --content-bg: #303030;
    --navbar-bg: #e91e63;
    --navbar-text: #ffffff;
}

/* Theme 4: Purple Green - Grey background, Grey content */
body.purple-green-theme {
    --primary-color: #9c27b0;
    --accent-color: #4caf50;
    --text-color: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --card-bg: #607d8b;
    --border-color: rgba(255, 255, 255, 0.12);
    --background-color: #303030;
    --content-bg: #303030;
    --navbar-bg: #303030;
    --navbar-text: #ffffff;
}

/* ==========================================================================
   Theme Menu - Material Design Style
   ========================================================================== */

.theme-menu {
    position: absolute;
    top: 80%;
    right: 230px;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
}

.theme-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mat-menu-panel {
    overflow: hidden;
    max-height: calc(100vh - 48px);
    border-radius: 4px;
    outline: 0;
    min-height: 64px;
    background: var(--content-bg) !important;
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.mat-menu-content:not(:empty) {
    padding-top: 8px;
    padding-bottom: 8px;
}

.mat-menu-item {
    user-select: none;
    cursor: pointer;
    outline: none;
    border: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    line-height: 48px;
    height: 48px;
    padding: 0 16px;
    text-align: left;
    text-decoration: none;
    max-width: 100%;
    position: relative;
    background: transparent;
    color: rgba(0, 0, 0, 0.87);
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-size: 14px;
    font-weight: 400;
    width: 100%;
}

.mat-menu-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

.mat-menu-item.active {
    background: var(--primary-color) !important;
    color: #ffffff !important;
}

.mat-menu-item.active .theme-name {
    color: #ffffff !important;
}

.mat-menu-item.active .material-icons {
    color: #ffffff !important;
}

.mat-menu-item:focus {
    background: rgba(0, 0, 0, 0.04);
    outline: none;
}

/* Material Radio Button Styles */
.mat-radio-container {
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-right: 8px;
}

.mat-radio-outer-circle {
    box-sizing: border-box;
    display: block;
    height: 20px;
    left: 0;
    position: absolute;
    top: 0;
    transition: border-color ease 280ms;
    width: 20px;
    border-width: 2px;
    border-style: solid;
    border-radius: 50%;
    border-color: rgba(0, 0, 0, 0.54);
}

.mat-radio-inner-circle {
    border-radius: 50%;
    box-sizing: border-box;
    display: block;
    height: 20px;
    left: 0;
    position: absolute;
    top: 0;
    width: 20px;
    transition: transform ease 280ms, background-color ease 280ms;
    transform: scale(0.001);
    background-color: var(--primary-color);
}

.mat-menu-item.active .mat-radio-outer-circle {
    border-color: #ffffff !important;
}

.mat-menu-item.active .mat-radio-inner-circle {
    transform: scale(0.5);
    background-color: #ffffff !important;
}

.mat-radio-input {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    cursor: inherit;
    z-index: -1;
}

.mat-radio-label-content {
    user-select: auto;
    display: inline-block;
    order: 0;
    line-height: inherit;
    padding-left: 8px;
    padding-right: 0;
}

.theme-name {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.87);
}

.theme-left {
    display: flex;
    align-items: center;
}

.theme-icons {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 16px;
}

.theme-icons .material-icons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    line-height: 1;
}

/* Material Menu Ripple Effect */
.mat-menu-item {
    position: relative;
    overflow: hidden;
}

.mat-menu-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
    background-size: 0 0;
    transition: background-size 0.6s;
    pointer-events: none;
}

.mat-menu-item:active::before {
    background-size: 200px 200px;
}

/* ==========================================================================
   Apply Theme Colors to Components
   ========================================================================== */

/* Navigation Bar */
.top-toolbar {
    background: var(--navbar-bg) !important;
    color: var(--navbar-text) !important;
}

/* Main Background */
body {
    background: #673ab7 !important; /* Default theme background */
}

/* Theme-specific backgrounds */
body.deeppurple-amber-theme {
    background: #673ab7 !important; /* Purple background */
}

body.indigo-pink-theme {
    background: #3f51b5 !important; /* Blue background */
}

body.pink-bluegrey-theme {
    background: #e91e63 !important; /* Pink background */
}

body.purple-green-theme {
    background: #303030 !important; /* Dark grey background */
}

/* Content Areas - White background for main content */
.page-content,
.home-page,
main {
    background: var(--content-bg) !important;
}

/* Cards - White background with dark text */
.mat-card,
.custom-card {
    background: var(--content-bg) !important;
}

/* Carousel - Keep original background */
.carousel,
.mat-carousel-wrapper {
    background: transparent !important;
}

/* Latest Update Section - White background - Updated for new classes */
.drama-section {
    background: var(--content-bg) !important;
}

.section-title {
    background: var(--content-bg) !important;
}

/* Drama Cards Text - Dark text on white cards */
.drama-title,
.mat-card-title,
.custom-card-title,
.drama-card-title {
    color: #333333 !important;
}

/* Custom Cards */
.custom-card,
.drama-card-wrapper {
    background: var(--content-bg) !important;
}

/* Drama Card Title Area - Dark themes */
body.pink-bluegrey-theme .drama-card-title-area,
body.purple-green-theme .drama-card-title-area {
    background: #424242 !important;
}

/* Icon Buttons */
.custom-icon-button,
.btn-icon {
    color: var(--navbar-text) !important;
}

/* Icon Buttons for light themes - Updated for new classes */
body.deeppurple-amber-theme .custom-icon-button,
body.deeppurple-amber-theme .btn-icon,
body.deeppurple-amber-theme .nav-arrow,
body.indigo-pink-theme .custom-icon-button,
body.indigo-pink-theme .btn-icon,
body.indigo-pink-theme .nav-arrow,
:root .custom-icon-button,
:root .btn-icon,
:root .nav-arrow {
    color: #333333 !important;
}

/* Icon Buttons for dark themes - Updated for new classes */
body.pink-bluegrey-theme .custom-icon-button,
body.pink-bluegrey-theme .btn-icon,
body.pink-bluegrey-theme .nav-arrow,
body.purple-green-theme .custom-icon-button,
body.purple-green-theme .btn-icon,
body.purple-green-theme .nav-arrow {
    color: #ffffff !important;
}

/* Drama Page Elements - Light themes */
body.deeppurple-amber-theme .custom-card-title,
body.deeppurple-amber-theme .custom-card-subtitle,
body.deeppurple-amber-theme .custom-list-item-content,
body.deeppurple-amber-theme .custom-expansion-panel-header-title,
body.deeppurple-amber-theme .custom-button-wrapper,
body.deeppurple-amber-theme .drama-cc-icon,
body.deeppurple-amber-theme .custom-icon,
body.deeppurple-amber-theme small,
body.indigo-pink-theme .custom-card-title,
body.indigo-pink-theme .custom-card-subtitle,
body.indigo-pink-theme .custom-list-item-content,
body.indigo-pink-theme .custom-expansion-panel-header-title,
body.indigo-pink-theme .custom-button-wrapper,
body.indigo-pink-theme .drama-cc-icon,
body.indigo-pink-theme .custom-icon,
body.indigo-pink-theme small,
:root .custom-card-title,
:root .custom-card-subtitle,
:root .custom-list-item-content,
:root .custom-expansion-panel-header-title,
:root .custom-button-wrapper,
:root .drama-cc-icon,
:root .custom-icon,
:root small {
    color: #333333 !important;
}

/* Drama Page Elements - Dark themes */
body.pink-bluegrey-theme .custom-card-title,
body.pink-bluegrey-theme .custom-card-subtitle,
body.pink-bluegrey-theme .custom-list-item-content,
body.pink-bluegrey-theme .custom-expansion-panel-header-title,
body.pink-bluegrey-theme .custom-button-wrapper,
body.pink-bluegrey-theme .drama-cc-icon,
body.pink-bluegrey-theme .custom-icon,
body.pink-bluegrey-theme small,
body.purple-green-theme .custom-card-title,
body.purple-green-theme .custom-card-subtitle,
body.purple-green-theme .custom-list-item-content,
body.purple-green-theme .custom-expansion-panel-header-title,
body.purple-green-theme .custom-button-wrapper,
body.purple-green-theme .drama-cc-icon,
body.purple-green-theme .custom-icon,
body.purple-green-theme small {
    color: #ffffff !important;
}

/* Episode buttons for dark themes */
body.pink-bluegrey-theme .custom-raised-button,
body.purple-green-theme .custom-raised-button,
body.pink-bluegrey-theme .episode-btn,
body.purple-green-theme .episode-btn {
    color: rgb(255, 255, 255) !important;
    background-color: rgb(66, 66, 66) !important;
}

body.pink-bluegrey-theme .custom-raised-button .custom-button-wrapper,
body.pink-bluegrey-theme .custom-raised-button .drama-cc-icon,
body.purple-green-theme .custom-raised-button .custom-button-wrapper,
body.purple-green-theme .custom-raised-button .drama-cc-icon,
body.pink-bluegrey-theme .episode-btn .material-icons,
body.purple-green-theme .episode-btn .material-icons {
    color: rgb(255, 255, 255) !important;
}

/* Description text for dark themes */
body.pink-bluegrey-theme .custom-expansion-panel-body,
body.pink-bluegrey-theme .custom-expansion-panel-body p,
body.purple-green-theme .custom-expansion-panel-body,
body.purple-green-theme .custom-expansion-panel-body p {
    color: rgb(255, 255, 255) !important;
}

/* Report Modal styling for dark themes */
body.pink-bluegrey-theme .modal-container,
body.purple-green-theme .modal-container {
    background: #424242 !important;
    color: #ffffff !important;
}

body.pink-bluegrey-theme .modal-title,
body.purple-green-theme .modal-title {
    color: #ffffff !important;
}

body.pink-bluegrey-theme .modal-text,
body.purple-green-theme .modal-text {
    color: #ffffff !important;
}

body.pink-bluegrey-theme .modal-close,
body.purple-green-theme .modal-close {
    color: #ffffff !important;
}

body.pink-bluegrey-theme .modal-close:hover,
body.purple-green-theme .modal-close:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

body.pink-bluegrey-theme .modal-link-button,
body.purple-green-theme .modal-link-button {
    background: #616161 !important;
    color: #ffffff !important;
    border-color: #757575 !important;
}

body.pink-bluegrey-theme .modal-link-button:hover,
body.purple-green-theme .modal-link-button:hover {
    background: #757575 !important;
}

body.pink-bluegrey-theme .link-text,
body.purple-green-theme .link-text {
    color: #ffffff !important;
}

body.pink-bluegrey-theme .modal-link-button .material-icons,
body.purple-green-theme .modal-link-button .material-icons {
    color: #ffffff !important;
}

body.pink-bluegrey-theme .loading-bar-container,
body.purple-green-theme .loading-bar-container {
    background: #616161 !important;
}

body.pink-bluegrey-theme .loading-bar,
body.purple-green-theme .loading-bar {
    background: linear-gradient(90deg, #e91e63, #f06292) !important;
}

body.purple-green-theme .loading-bar {
    background: linear-gradient(90deg, #69f0ae, #4caf50) !important;
}

/* Share Modal styling for dark themes */
body.pink-bluegrey-theme .share-modal-container,
body.purple-green-theme .share-modal-container {
    background: #424242 !important;
    color: #ffffff !important;
}

body.pink-bluegrey-theme .share-modal-header h2,
body.purple-green-theme .share-modal-header h2 {
    color: #ffffff !important;
}

body.pink-bluegrey-theme .share-modal-header .modal-close,
body.purple-green-theme .share-modal-header .modal-close {
    color: #ffffff !important;
}

body.pink-bluegrey-theme .share-modal-header .modal-close:hover,
body.purple-green-theme .share-modal-header .modal-close:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

body.pink-bluegrey-theme .share-action-label,
body.purple-green-theme .share-action-label {
    color: #ffffff !important;
}

body.pink-bluegrey-theme .share-fab-button,
body.purple-green-theme .share-fab-button {
    background: #616161 !important;
}

/* Keep original colors for social media icons in dark themes */
body.pink-bluegrey-theme .share-fab-button svg,
body.purple-green-theme .share-fab-button svg {
    color: inherit;
}

/* Specific colors for each social platform in dark themes */
body.pink-bluegrey-theme .facebook-share-btn,
body.purple-green-theme .facebook-share-btn {
    background: #1877f2 !important;
    color: #ffffff !important;
}

body.pink-bluegrey-theme .messenger-share-btn,
body.purple-green-theme .messenger-share-btn {
    background: #0084ff !important;
    color: #ffffff !important;
}

body.pink-bluegrey-theme .twitter-share-btn,
body.purple-green-theme .twitter-share-btn {
    background: #1da1f2 !important;
    color: #ffffff !important;
}

body.pink-bluegrey-theme .reddit-share-btn,
body.purple-green-theme .reddit-share-btn {
    background: #ff4500 !important;
    color: #ffffff !important;
}

body.pink-bluegrey-theme .pinterest-share-btn,
body.purple-green-theme .pinterest-share-btn {
    background: #bd081c !important;
    color: #ffffff !important;
}

body.pink-bluegrey-theme .telegram-share-btn,
body.purple-green-theme .telegram-share-btn {
    background: #0088cc !important;
    color: #ffffff !important;
}

body.pink-bluegrey-theme .sms-share-btn,
body.purple-green-theme .sms-share-btn {
    background: #34c759 !important;
    color: #ffffff !important;
}

body.pink-bluegrey-theme .email-share-btn,
body.purple-green-theme .email-share-btn {
    background: #007aff !important;
    color: #ffffff !important;
}

body.pink-bluegrey-theme .line-share-btn,
body.purple-green-theme .line-share-btn {
    background: #00c300 !important;
    color: #ffffff !important;
}

body.pink-bluegrey-theme .whatsapp-share-btn,
body.purple-green-theme .whatsapp-share-btn {
    background: #25d366 !important;
    color: #ffffff !important;
}

/* Copy Link and More buttons keep the gray background */
body.pink-bluegrey-theme .copy-link-btn,
body.purple-green-theme .copy-link-btn {
    background: #616161 !important;
    color: #ffffff !important;
}

body.pink-bluegrey-theme .more-btn,
body.purple-green-theme .more-btn {
    background: #616161 !important;
    color: #ffffff !important;
}

/* Hover effects for social media buttons in dark themes */
body.pink-bluegrey-theme .facebook-share-btn:hover,
body.purple-green-theme .facebook-share-btn:hover {
    background: #166fe5 !important;
}

body.pink-bluegrey-theme .messenger-share-btn:hover,
body.purple-green-theme .messenger-share-btn:hover {
    background: #0073e6 !important;
}

body.pink-bluegrey-theme .twitter-share-btn:hover,
body.purple-green-theme .twitter-share-btn:hover {
    background: #1991da !important;
}

body.pink-bluegrey-theme .reddit-share-btn:hover,
body.purple-green-theme .reddit-share-btn:hover {
    background: #e03d00 !important;
}

body.pink-bluegrey-theme .pinterest-share-btn:hover,
body.purple-green-theme .pinterest-share-btn:hover {
    background: #a50719 !important;
}

body.pink-bluegrey-theme .telegram-share-btn:hover,
body.purple-green-theme .telegram-share-btn:hover {
    background: #0077b3 !important;
}

body.pink-bluegrey-theme .sms-share-btn:hover,
body.purple-green-theme .sms-share-btn:hover {
    background: #30b34d !important;
}

body.pink-bluegrey-theme .email-share-btn:hover,
body.purple-green-theme .email-share-btn:hover {
    background: #0056cc !important;
}

body.pink-bluegrey-theme .line-share-btn:hover,
body.purple-green-theme .line-share-btn:hover {
    background: #00a000 !important;
}

body.pink-bluegrey-theme .whatsapp-share-btn:hover,
body.purple-green-theme .whatsapp-share-btn:hover {
    background: #20b954 !important;
}

/* Copy Link and More buttons hover */
body.pink-bluegrey-theme .copy-link-btn:hover,
body.purple-green-theme .copy-link-btn:hover,
body.pink-bluegrey-theme .more-btn:hover,
body.purple-green-theme .more-btn:hover {
    background: #757575 !important;
}

body.pink-bluegrey-theme .share-divider,
body.purple-green-theme .share-divider {
    background: #616161 !important;
}

/* ========================================================================== */
/* Sidenav Dark Theme Styles */
/* ========================================================================== */

/* Pink Blue Grey Theme - Sidenav */
body.pink-bluegrey-theme .sidenav-content {
    background: #424242 !important;
    color: #ffffff !important;
}

body.pink-bluegrey-theme .sidenav-header {
    background: #424242 !important;
    border-bottom-color: #616161 !important;
}

body.pink-bluegrey-theme .sidenav-header-content .menu-close-btn {
    color: #ffffff !important;
}

body.pink-bluegrey-theme .sidenav-header-content .menu-close-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

body.pink-bluegrey-theme .sidenav-header-content .logo-btn {
    color: #ffffff !important;
}

body.pink-bluegrey-theme .sidenav-divider {
    background: #616161 !important;
}

body.pink-bluegrey-theme .menu-item .menu-button {
    color: #ffffff !important;
}


body.pink-bluegrey-theme .menu-item.active .menu-button {
    color: #ffffff !important;
}

body.pink-bluegrey-theme .menu-item .mat-button-wrapper {
    color: #ffffff !important;
}

body.pink-bluegrey-theme .menu-item .material-icons {
    color: #ffffff !important;
}

/* Purple Green Theme - Sidenav */
body.purple-green-theme .sidenav-content {
    background: #212121 !important;
    color: #ffffff !important;
}

body.purple-green-theme .sidenav-header {
    background: #212121 !important;
    border-bottom-color: #616161 !important;
}

body.purple-green-theme .sidenav-header-content .menu-close-btn {
    color: #ffffff !important;
}

body.purple-green-theme .sidenav-header-content .menu-close-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

body.purple-green-theme .sidenav-header-content .logo-btn {
    color: #ffffff !important;
}

body.purple-green-theme .sidenav-divider {
    background: #616161 !important;
}

body.purple-green-theme .menu-item .menu-button {
    color: #ffffff !important;
}

body.purple-green-theme .menu-item .menu-button:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

body.purple-green-theme .menu-item.active .menu-button {
    background: #424242 !important;
    color: #ffffff !important;
}

body.purple-green-theme .menu-item.active .mat-button-wrapper {
    color: #ffffff !important;
}

body.purple-green-theme .menu-item.active .material-icons {
    color: #ffffff !important;
}

body.purple-green-theme .menu-item .mat-button-wrapper {
    color: #ffffff !important;
}

body.purple-green-theme .menu-item .material-icons {
    color: #ffffff !important;
}

/* ========================================================================== */
/* Active Menu Item Icons - Ensure icons match text color */
/* ========================================================================== */

/* Default themes - Active item icons */
.menu-item.active .material-icons {
    color: inherit !important;
}

.menu-item.active .mat-button-wrapper .material-icons {
    color: inherit !important;
}

/* Pink Blue Grey Theme - Active item icons (white text = white icons) */
body.pink-bluegrey-theme .menu-item.active .material-icons {
    color: #ffffff !important;
}

body.pink-bluegrey-theme .menu-item.active .mat-button-wrapper .material-icons {
    color: #ffffff !important;
}

/* Purple Green Theme - Active item icons (white text = white icons) */
body.purple-green-theme .menu-item.active .material-icons {
    color: #ffffff !important;
}

body.purple-green-theme .menu-item.active .mat-button-wrapper .material-icons {
    color: #ffffff !important;
}

/* ========================================================================== */
/* Mobile Theme Menu Styles */
/* ========================================================================== */

/* Mobile Theme Menu Overlay */
.mobile-theme-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-theme-menu-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* Mobile Theme Menu Container */
.mobile-theme-menu-container {
    background: var(--content-bg);
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    max-width: 280px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.mobile-theme-menu-overlay.show .mobile-theme-menu-container {
    transform: scale(1);
}


/* Mobile Theme Menu Content */
.mobile-theme-menu-content {
    padding: 0;
    max-height: 60vh;
    overflow-y: auto;
    box-sizing: border-box !important;
}

/* Mobile Theme Options */
.mobile-theme-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 16px;
    border: none;
    background: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-align: left;
    min-height: 48px;
}

.mobile-theme-option:hover {
    background: rgba(0, 0, 0, 0.08);
}

.mobile-theme-option.active {
    background: var(--primary-color);
    color: #ffffff;
}

.mobile-theme-option .theme-left {
    display: flex;
    align-items: center;
    flex: 1;
}

.mobile-theme-option .mat-radio-container {
    display: flex;
    align-items: center;
    position: relative;
    width: 20px;
    height: 20px;
}

.mobile-theme-option .theme-name {
    font-size: 14px;
    color: var(--text-color);
    font-weight: 400;
}

.mobile-theme-option .theme-icons .material-icons {
    font-size: 20px;
}

/* Active state for mobile theme options - Same as Desktop */
.mobile-theme-option.active .theme-name {
    color: #ffffff !important;
}

.mobile-theme-option.active .material-icons {
    color: #ffffff !important;
}

.mobile-theme-option.active .mat-radio-outer-circle {
    border-color: #ffffff !important;
}

.mobile-theme-option.active .mat-radio-inner-circle {
    transform: scale(0.5);
    background-color: #ffffff !important;
}

/* Mobile Theme Menu - Theme-specific Colors (Same as Desktop) */

/* Dark Themes - Pink Blue Grey & Purple Green */
body.pink-bluegrey-theme .mobile-theme-menu-container,
body.purple-green-theme .mobile-theme-menu-container {
    background: #424242 !important;
}

body.pink-bluegrey-theme .mobile-theme-option,
body.purple-green-theme .mobile-theme-option {
    color: #ffffff !important;
}

body.pink-bluegrey-theme .mobile-theme-option .theme-name,
body.purple-green-theme .mobile-theme-option .theme-name {
    color: #ffffff !important;
}

body.pink-bluegrey-theme .mobile-theme-option:hover,
body.purple-green-theme .mobile-theme-option:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

body.pink-bluegrey-theme .mobile-theme-option .mat-radio-outer-circle,
body.purple-green-theme .mobile-theme-option .mat-radio-outer-circle {
    border-color: rgba(255, 255, 255, 0.7) !important;
}

/* Purple Green Theme Specific */
body.purple-green-theme .mobile-theme-menu-container {
    background: #212121 !important;
}


body.deeppurple-amber-theme .mobile-theme-option .theme-name,
body.indigo-pink-theme .mobile-theme-option .theme-name {
    color: #333333 !important;
}

/* Light Themes - Active state theme name should be white */
body.deeppurple-amber-theme .mobile-theme-option.active .theme-name,
body.indigo-pink-theme .mobile-theme-option.active .theme-name {
    color: #ffffff !important;
}

body.deeppurple-amber-theme .mobile-theme-option .mat-radio-outer-circle,
body.indigo-pink-theme .mobile-theme-option .mat-radio-outer-circle {
    border-color: rgba(0, 0, 0, 0.54) !important;
}

body.deeppurple-amber-theme .mobile-theme-option:hover,
body.indigo-pink-theme .mobile-theme-option:hover {
    background: rgba(0, 0, 0, 0.04) !important;
}

/* Active state overrides for specific themes */
body.pink-bluegrey-theme .mobile-theme-option.active .mat-radio-outer-circle,
body.purple-green-theme .mobile-theme-option.active .mat-radio-outer-circle {
    border-color: #ffffff !important;
}

body.pink-bluegrey-theme .mobile-theme-option.active .mat-radio-inner-circle,
body.purple-green-theme .mobile-theme-option.active .mat-radio-inner-circle {
    background-color: #ffffff !important;
}

body.deeppurple-amber-theme .mobile-theme-option.active .mat-radio-outer-circle,
body.indigo-pink-theme .mobile-theme-option.active .mat-radio-outer-circle {
    border-color: #ffffff !important;
}

body.deeppurple-amber-theme .mobile-theme-option.active .mat-radio-inner-circle,
body.indigo-pink-theme .mobile-theme-option.active .mat-radio-inner-circle {
    background-color: #ffffff !important;
}

/* Continue watching and Latest Update titles - White text */
.home-page > div:first-child h2,
.home-page > div h2,
h2,
.mt-3 > .mat-card-title .btn {
    color: #ffffff !important;
}

/* Buttons */
.btn,
.custom-button {
    color: var(--primary-color) !important;
}

/* Navigation Buttons */
.nav-btn {
    color: var(--navbar-text) !important;
}

.nav-btn.active,
.nav-btn.current-menu-item,
.current-menu-item .nav-btn,
.current_page_item .nav-btn,
.menu-item-home .nav-btn {
    color: var(--background-color) !important;
    background: var(--accent-color) !important;
    border-radius: 4px !important;
}

/* Sidenav */
.sidenav {
    background: var(--content-bg) !important;
}

.menu-button {
    color: #333333 !important;
}

.menu-item.active .menu-button {
    color: var(--primary-color) !important;
}

.menu-button .material-icons {
    color: #333333 !important;
}

/* Footer */
.app-footer {
    background: #f5f5f5 !important;
    color: #333333 !important;
}

/* Footer for dark themes */
body.pink-bluegrey-theme .app-footer,
body.purple-green-theme .app-footer {
    background: #212121 !important;
    color: #ffffff !important;
}

/* Latest Update button colors for each theme - Updated for new classes */
/* Theme 1: Deep Purple & Amber */
body.deeppurple-amber-theme .mat-button-wrapper,
body.deeppurple-amber-theme .btn-content,
body.deeppurple-amber-theme .title-btn,
:root .mat-button-wrapper,
:root .btn-content,
:root .title-btn {
    color: #333333 !important;
}

/* Theme 2: Indigo Pink */
body.indigo-pink-theme .mat-button-wrapper,
body.indigo-pink-theme .btn-content,
body.indigo-pink-theme .title-btn {
    color: #333333 !important;
}

/* Theme 3: Pink Blue Grey */
body.pink-bluegrey-theme .mat-button-wrapper,
body.pink-bluegrey-theme .btn-content,
body.pink-bluegrey-theme .title-btn {
    color: #ffffff !important;
}

/* Theme 4: Purple Green */
body.purple-green-theme .mat-button-wrapper,
body.purple-green-theme .btn-content,
body.purple-green-theme .title-btn {
    color: #ffffff !important;
}

/* Material icons inherit the same color - Updated for new classes */
body.deeppurple-amber-theme .mat-button-wrapper .material-icons,
body.deeppurple-amber-theme .btn-content .material-icons,
body.deeppurple-amber-theme .title-btn .material-icons,
:root .mat-button-wrapper .material-icons,
:root .btn-content .material-icons,
:root .title-btn .material-icons {
    color: #333333 !important;
}

body.indigo-pink-theme .mat-button-wrapper .material-icons,
body.indigo-pink-theme .btn-content .material-icons,
body.indigo-pink-theme .title-btn .material-icons {
    color: #333333 !important;
}

body.pink-bluegrey-theme .mat-button-wrapper .material-icons,
body.pink-bluegrey-theme .btn-content .material-icons,
body.pink-bluegrey-theme .title-btn .material-icons {
    color: #ffffff !important;
}

body.purple-green-theme .mat-button-wrapper .material-icons,
body.purple-green-theme .btn-content .material-icons,
body.purple-green-theme .title-btn .material-icons {
    color: #ffffff !important;
}

/* Carousel Indicators Colors for Themes */
/* Theme 3: Pink Blue Grey - dots color */
body.pink-bluegrey-theme .carousel-indicator {
    background: #b0bec5 !important;
}

body.pink-bluegrey-theme .carousel-indicator.active {
    background: rgba(255,255,255,.12) !important;
}

/* Theme 4: Purple Green - dots color */
body.purple-green-theme .carousel-indicator {
    background: #ffffff !important;
}

body.purple-green-theme .carousel-indicator.active {
    background: rgba(255,255,255,.12) !important;
}

/* Active nav button for pink-bluegrey theme */
body.pink-bluegrey-theme .nav-btn.active {
    color: #ffffff !important;
    background: #424242 !important;
}

/* Active nav button for purple-green theme */
body.purple-green-theme .nav-btn.active {
    color: #ffffff !important;
    background: #424242 !important;
}

/* Theme Menu */
.theme-menu .mat-menu-panel {
    background: var(--content-bg) !important;
}

/* Theme menu for dark themes */
body.pink-bluegrey-theme .mat-menu-panel,
body.pink-bluegrey-theme .theme-menu .mat-menu-panel,
body.purple-green-theme .mat-menu-panel,
body.purple-green-theme .theme-menu .mat-menu-panel {
    background: #424242 !important;
}

body.pink-bluegrey-theme .mat-menu-item,
body.pink-bluegrey-theme .theme-option,
body.purple-green-theme .mat-menu-item,
body.purple-green-theme .theme-option {
    color: #ffffff !important;
}

body.pink-bluegrey-theme .theme-name,
body.purple-green-theme .theme-name {
    color: #ffffff !important;
}

body.pink-bluegrey-theme .mat-radio-outer-circle,
body.purple-green-theme .mat-radio-outer-circle {
    border-color: rgba(255, 255, 255, 0.7) !important;
}

body.pink-bluegrey-theme .mat-menu-item:hover,
body.purple-green-theme .mat-menu-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

.mat-menu-item {
    color: #333333 !important;
}

/* Sign In Menu */
.custom-menu-content {
    background: var(--content-bg) !important;
}

.custom-menu-item {
    color: #333333 !important;
}

/* Privacy Policy and Terms links - White text */
.row.px-3 a {
    color: #ffffff !important;
}
/* Theme 3: Pink Blue Grey - Grey content areas need white text */
body.pink-bluegrey-theme .drama-title,
body.pink-bluegrey-theme .mat-card-title {
    color: #ffffff !important;
}

body.pink-bluegrey-theme .mat-menu-item,
body.pink-bluegrey-theme .custom-menu-item {
    color: #ffffff !important;
}

body.pink-bluegrey-theme .menu-button {
    color: #ffffff !important;
}

body.pink-bluegrey-theme .menu-button .material-icons {
    color: #ffffff !important;
}

body.pink-bluegrey-theme .menu-item.active .menu-button {
    color: var(--accent-color) !important;
}
/* Theme 4: Purple Green - Grey content areas need white text */
body.purple-green-theme .drama-title,
body.purple-green-theme .mat-card-title {
    color: #ffffff !important;
}

body.purple-green-theme .mat-menu-item,
body.purple-green-theme .custom-menu-item {
    color: #ffffff !important;
}

body.purple-green-theme .menu-button {
    color: #ffffff !important;
}

body.purple-green-theme .menu-button .material-icons {
    color: #ffffff !important;
}

body.purple-green-theme .menu-item.active .menu-button {
    color: var(--accent-color) !important;
}

/* Continue watching text - White on colored background */
.home-page > div:first-child,
.mt-3:first-child {
    color: #ffffff !important;
}

/* Latest Update button text - White - Updated for new classes */
.drama-section .section-title button,
.drama-section .title-btn {
    color: #ffffff !important;
}

/* Sign in text in navbar - White */
.nav-btn.signin-btn span {
    color: #ffffff !important;
}

/* Ensure all main headings are white on colored backgrounds */
main > div:first-child h1:not(.faq-main-title),
main > div:first-child h2:not(.faq-main-title),
main > div:first-child h3:not(.post-block-info h3),
.home-page > div:first-child h1,
.home-page > div:first-child h2,
.home-page > div:first-child h3 {
    color: #ffffff ;
}

/* Latest Update section heading - Updated for new classes */
.drama-section > .section-title {
    color: #ffffff !important;
}

.section-title .title-btn {
    color: #ffffff !important;
}


/* Make sure card titles in Latest Update are dark on white cards - Updated for new classes */
.drama-section .drama-card .drama-title,
.drama-section .drama-card .mat-card-title,
.drama-section .drama-card .drama-card-title {
    color: #333333 !important;
}

/* Override for grey themes - card titles should be white on grey - Updated for new classes */
body.pink-bluegrey-theme .drama-section .drama-card .drama-title,
body.pink-bluegrey-theme .drama-section .drama-card .mat-card-title,
body.pink-bluegrey-theme .drama-section .drama-card .custom-card-title,
body.pink-bluegrey-theme .drama-section .drama-card .drama-card-title,
body.purple-green-theme .drama-section .drama-card .drama-title,
body.purple-green-theme .drama-section .drama-card .mat-card-title,
body.purple-green-theme .drama-section .drama-card .custom-card-title,
body.purple-green-theme .drama-section .drama-card .drama-card-title {
    color: #ffffff !important;
}

/* ========================================================================== */
/* Expansion Indicator Colors for Each Theme */
/* ========================================================================== */

/* Default and Light Themes - Dark indicator */
.custom-expansion-indicator {
    color: #333333 !important;
}

/* Theme 1: Deep Purple & Amber */
body.deeppurple-amber-theme .custom-expansion-indicator,
:root .custom-expansion-indicator {
    color: #333333 !important;
}

/* Theme 2: Indigo Pink */
body.indigo-pink-theme .custom-expansion-indicator {
    color: #333333 !important;
}

/* Theme 3: Pink Blue Grey - White indicator */
body.pink-bluegrey-theme .custom-expansion-indicator {
    color: #ffffff !important;
}

/* Theme 4: Purple Green - White indicator */
body.purple-green-theme .custom-expansion-indicator {
    color: #ffffff !important;
}

/* ========================================================================== */
/* Footer Links Background Colors for Each Theme */
/* ========================================================================== */

/* Default and Light Themes - Light gray background */
.footer-links {
    background: #f5f5f5 !important;
}

/* Theme 1: Deep Purple & Amber - Light gray background */
body.deeppurple-amber-theme .footer-links,
:root .footer-links {
    background: #f5f5f5 !important;
}

/* Theme 2: Indigo Pink - Light gray background */
body.indigo-pink-theme .footer-links {
    background: #f5f5f5 !important;
}

/* Theme 3: Pink Blue Grey - Content background */
body.pink-bluegrey-theme .footer-links {
    background: var(--content-bg) !important;
}

/* Theme 4: Purple Green - Content background */
body.purple-green-theme .footer-links {
    background: var(--content-bg) !important;
}

/* ========================================================================== */
/* Footer Links Text Colors for Each Theme */
/* ========================================================================== */

/* Default and Light Themes - Dark text */
.footer-links a  small{
    color: #333333 !important;
}

/* Theme 1: Deep Purple & Amber - Dark text */
body.deeppurple-amber-theme .footer-links a small,
:root .footer-links a small {
    color: #333333 !important;
}

/* Theme 2: Indigo Pink - Dark text */
body.indigo-pink-theme .footer-links a small {
    color: #333333 !important;
}

/* Theme 3: Pink Blue Grey - White text */
body.pink-bluegrey-theme .footer-links a small {
    color: #ffffff !important;
}

/* Theme 4: Purple Green - White text */
body.purple-green-theme .footer-links a small {
    color: #ffffff !important;
}

/* ========================================================================== */
/* Drama Card Title Colors for Each Theme */
/* ========================================================================== */

/* Default and Light Themes - Dark text */
.drama-card-title {
    color: #333333 !important;
}

/* Theme 1: Deep Purple & Amber - Dark text */
body.deeppurple-amber-theme .drama-card-title,
:root .drama-card-title {
    color: #333333 !important;
}

/* Theme 2: Indigo Pink - Dark text */
body.indigo-pink-theme .drama-card-title {
    color: #333333 !important;
}

/* Theme 3: Pink Blue Grey - White text */
body.pink-bluegrey-theme .drama-card-title {
    color: #ffffff !important;
}

/* Theme 4: Purple Green - White text */
body.purple-green-theme .drama-card-title {
    color: #ffffff !important;
}

/* ========================================================================== */
/* Episode Button Active States for Each Theme */
/* ========================================================================== */

/* Default and Theme 1: Deep Purple & Amber - Amber background with dark text */
.episode-btn.active {
    background: #ffd740 !important;
    color: #333333 !important;
}

body.deeppurple-amber-theme .episode-btn.active,
:root .episode-btn.active {
    background: #ffd740 !important;
    color: #333333 !important;
}

/* Theme 2: Indigo Pink - Pink background with white text */
body.indigo-pink-theme .episode-btn.active {
    background: #ff4081 !important;
    color: #ffffff !important;
}

/* Theme 3: Pink Blue Grey - Blue Grey background with dark text */
body.pink-bluegrey-theme .episode-btn.active {
    background: #b0bec5 !important;
    color: #333333 !important;
}

/* Theme 4: Purple Green - White background with dark text */
body.purple-green-theme .episode-btn.active {
    background: #ffffff !important;
    color: #333333 !important;
}

/* Episode Button Active Icons - Match text color */
.episode-btn.active .material-icons {
    color: inherit !important;
}

body.deeppurple-amber-theme .episode-btn.active .material-icons,
:root .episode-btn.active .material-icons {
    color: #333333 !important;
}

body.indigo-pink-theme .episode-btn.active .material-icons {
    color: #ffffff !important;
}

body.pink-bluegrey-theme .episode-btn.active .material-icons {
    color: #333333 !important;
}

body.purple-green-theme .episode-btn.active .material-icons {
    color: #333333 !important;
}