/*
Theme Name: Quran.tv
Author: tarabot
Description: Theme for Quran.tv
Version: 1.0.1
Text Domain: quran-tv
*/

/* Reset & Basics */
:root {
    --primary-color: #0d4632;
    /* Deep Islamic Green */
    --secondary-color: #f7f1e3;
    /* Cream/Beige */
    --accent-color: #27ae60;
    --text-color: #333;
    --font-family: 'Cairo', system-ui, -apple-system, sans-serif;
    --border-color: #e5e5e5;
}

* {
    box-sizing: border-box;
    font-family: 'Cairo', sans-serif;
}

body {
    font-family: var(--font-family);
    margin: 0;
    padding: 0;
    color: var(--text-color);
    direction: rtl;
    /* Enforce RTL */
    background: #fdfdfd;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Header Styling */
.site-header {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 0;
    height: 70px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #E5E1D8
}

.header-container {
    max-width: 1352px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* In RTL, default row start is Right. Branding->Nav->Actions = Right->Center->Left. */
}

/* Branding (Right in RTL) */
.site-branding {
    display: flex;
    align-items: center;
}

.site-branding .logo-link {
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
    letter-spacing: -0.5px;
}

.logo-icon,
.logo-placeholder {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--secondary-color);
    border: 1px solid #d4d4d4;
    display: block;
}

/* Navigation (Center) */
.main-navigation {
    flex: 1;
    display: flex;
    justify-content: center;
}

.nav-menu {
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
    height: 100%;
}

.nav-menu li {
    list-style: none;
    display: flex;
    align-items: center;
    position: relative;
    height: 70px;
    /* Match header height */
}

.nav-menu li a {
    font-size: 18px;
    font-weight: 700;
    color: #45556C;
    font-family: 'Cairo', sans-serif;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
    /* Changed from display:flex/height:100% to wrap text exactly */
    position: relative;
}

.nav-menu li a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    /* Exactly under the text */
    right: 0;
    /* Start from right in RTL */
    width: 0;
    height: 2px;
    background-color: #1E7F5C;
    transition: width 0.3s ease;
}

.nav-menu li a:hover,
.nav-menu li[class*="current-"]>a,
.nav-menu li[class*="current_"]>a,
.nav-menu li a[aria-current="page"] {
    color: #1E7F5C;
}

.nav-menu li a:hover::after,
.nav-menu li[class*="current-"]>a::after,
.nav-menu li[class*="current_"]>a::after,
.nav-menu li a[aria-current="page"]::after {
    width: 100%;
    /* Matches the exact width of the text/anchor */
}

/* Active state indicator if needed, though not in screenshot */

/* Actions (Left in RTL) */
.header-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.btn-listen-now {
    background-color: #FEF5E4;
    color: #146D3B;
    padding: 8px 32px;
    border-radius: 6px;
    font-weight: 700;
    text-align: center;
    font-size: 16px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0px 4px 6px -4px #4CAF9333, 0px 10px 15px -3px #4CAF9333;
}

.btn-listen-now:hover {
    background-color: #edeec9;
    transform: translateY(-1px);
}

/* Mobile */
@media (max-width: 768px) {
    .header-container {
        padding: 0 20px;
    }

    .nav-menu {
        display: none;
        /* Hide for now on small screens */
    }
}


/* Hero Section */
.qurantv-hero {
    height: 720px;
    background-image: url('assets/images/backgroundhero.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
    background-color: #fdfdfd;
    /* Fallback */
}

.hero-container {
    max-width: 800px;
    margin: 0 auto;
}

.hero-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.4;
    color: #000;
    margin-bottom: 20px;
}

.hero-title .highlight {
    color: var(--primary-color);
}

.hero-description {
    font-size: 18px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-search-wrapper {
    margin-bottom: 30px;
    position: relative;
    max-width: 600px;
    /* Limit width */
    margin: 0 auto 30px;
}

.hero-search-form {
    display: flex;
    background: #fff;
    border-radius: 50px;
    /* Pill shape */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    /* Soft shadow */
    padding: 8px;
    align-items: center;
    position: relative;
}

.hero-search-field {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 20px;
    font-size: 16px;
    font-family: inherit;
    outline: none;
    color: #333;
    text-align: right;
    /* RTL placeholder */
}

/* Placeholder specific fix if needed, though RTL usually handles it */
.hero-search-input::-webkit-input-placeholder {
    color: #aaa;
}

.hero-search-submit {
    background-color: #1a5c45;
    /* Dark Green Button */
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap;
}

.hero-search-submit:hover {
    background-color: #144a37;
}

.search-icon {
    margin-left: 15px;
    color: #aaa;
    font-size: 20px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* In HTML .hero-search-form structure: button input icon */
/* But visual order: Icon (Right), Input (Center), Button (Left) */
/* Flex logic RTL: Start is Right. */
/* HTML Order: button | input | icon  --> Display: button(Right/Start) input icon(Left/End) */
/* Wait, in RTL: Flex Start is Right. */
/* If form has flex-direction row (default): */
/* Order in HTML: Button, Input, Icon. */
/* Render: Button (Right), Input (Center), Icon (Left). */
/* This matches typical RTL form where submit is often left in English but right in Arabic? */
/* Actually usually the button is on the FAR END of the input. In RTL, End is Left. So button should be last in visual order (End). */
/* So HTML order: Icon, Input, Button. */
/* Let's adjust HTML order in next step if necessary. Current HTML: Button, Input, Icon. */
/* Result: Button (Start/Right), Input, Icon (End/Left). */
/* This is reverse of usual search bar which has button on the "end" (Left in RTL). */
/* Let's fix HTML or use order property. Let's use order property here. */












.header-search {
    background-color: #FDFBF7;
    border-radius: 12px;
    padding: 16px;
    width: 256px;
    height: 40px;
}

.header-search::after {
    content: url('assets/images/search.svg');
    width: 24px;
    height: 24px;
}




.hero-search-submit {
    order: 3;
    /* Last item visually (Left) */
}

.hero-search-field {
    order: 2;
}

.search-icon {
    order: 1;
    /* First item visually (Right) */
    margin-left: 0;
    margin-right: 15px;
}

.hero-features {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    color: #1a5c45;
    /* Green text */
    font-size: 14px;
    font-weight: 600;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.feature-icon {
    font-size: 16px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid currentColor;
    /* Circle checkmark style if needed, or just icon */
    display: flex;
    /* Center icon */
    align-items: center;
    justify-content: center;
    padding: 2px;
    /* Small padding */
}

/* Featured Reciters Section */
.featured-reciters-section {
    height: 556px;
    padding: 0;
    /* Remove padding as requested fixed height handles layout */
    background-color: #fffcf5;
    display: flex;
    /* Center the container vertically */
    flex-direction: column;
    justify-content: center;
}

.featured-reciters-section .container {
    width: 1312px;
    height: 396px;
    /* Explicit height for content block */
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    /* Removing padding as width IS the content width now */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Space out header and carousel */
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;
    /* Let flex justify-content handle spacing */
    height: 40px;
    /* Dedicate some height for header within the 396px total */
}

.section-title {
    font-size: 30px;
    font-weight: 700;
    color: #072615;
    position: relative;
    padding-right: 15px;
    /* Space for the bar */
    margin: 0;
}

.section-title::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 32px;
    background-color: #1a5c45;
    border-radius: 8px;
}

.view-all-link {
    font-size: 14px;
    color: #666;
    text-decoration: none;
    font-weight: 600;
}

.view-all-link:hover {
    color: var(--primary-color);
}

.reciters-carousel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    /* Matches parent container width */
    height: auto;
    /* Let it fill remaining space naturally */
    flex: 1;
    /* Take up remaining height in flex container */
    margin: 0;

}


.reciter-item {
    width: 176px;
    /* Match avatar width for exact alignment */
    text-align: center;
}

.reciter-link {
    text-decoration: none;
    display: block;
    color: inherit;
}

.reciter-avatar-wrapper {
    position: relative;
    width: 192px;
    height: 192px;
    margin: 0 auto 15px;
    border-radius: 50%;
    /* Using 50% for perfect circle, equivalent to huge pixel value */
    padding: 0;
    border: 4px solid #FFFFFF;
    background: #fff;
    box-shadow: 0px 8px 10px -6px #0000001A, 0px 20px 25px -5px #0000001A;
    /* overflow: hidden; Removed to allow play icon to be visible if it overlaps edge */
}

.reciter-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.play-icon-overlay {
    position: absolute;
    bottom: 10px;
    left: 0px;
    width: 50px;
    height: 50px;
    background: #FFFFFF;
    border: 1px solid #F3F4F6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    color: #1a5c45;
    z-index: 10;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.reciter-link:hover .play-icon-overlay {
    transform: scale(1.1);
    background-color: #146D3B;
    border-color: #146D3B;
}

.play-icon-overlay svg {
    width: 35px;
    height: 35px;
    fill: none;
    stroke: #146D3B;
    stroke-width: 5;
    margin-left: 2px;
    transition: stroke 0.2s ease, fill 0.2s ease;
}

.reciter-link:hover .play-icon-overlay svg {
    stroke: #FEF5E4;
    fill: #FEF5E4;
    /* Fill the triangle with the same color */
}

.reciter-name {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin: 5px 0;
}

.reciter-subtitle {
    display: block;
    font-size: 12px;
    color: #888;
}

/* Responsive adjustment */
@media (max-width: 600px) {
    .qurantv-hero {
        height: 538px;
    }

    .hero-title {
        font-size: 32px;
    }

    .hero-description {
        font-size: 14px;
    }

    .hero-search-submit {
        font-size: 12px;
        padding: 10px 26px;
    }

    .hero-search-field {
        padding: 10px 20px;
        font-size: 14px;
    }

    .hero-search-form {
        padding: 6px;
    }

    .featured-reciters-section {
        height: 500px;
    }

    .reciters-carousel {
        /* Implement scrolling or tighter grid */
        display: flex;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        gap: 15px;
        padding-bottom: 10px;
        justify-content: flex-start;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Firefox */
    }

    .reciters-carousel::-webkit-scrollbar {
        display: none;
        /* Chrome/Safari */
    }

    .reciter-item {
        width: 120px;
        flex-shrink: 0;
        scroll-snap-align: center;
    }

    .reciter-avatar-wrapper {
        width: 150px;
        height: 150px;
    }

    .reciter-name {
        font-size: 14px;
    }

    .reciter-subtitle {
        font-size: 10px;
    }
}

/* Home Categories Section */
.home-categories-section {
    height: 100%;
    min-height: 445px;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    direction: rtl;
}

.home-categories-section .section-header {
    width: 1312px;
    height: 36px !important;
    justify-content: space-between;
    margin: 0 auto 40px;
    /* Center horizontally */
    max-width: 100%;
    /* Responsive safeguard */
    display: flex;
    /* Ensure it uses flex */
    align-items: center;
    /* Vertically center items */
    padding: 0 10px;
    /* Slight padding for edges */
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    width: 100%;
    max-width: 1312px;
    margin: 40px auto 0;
    padding: 0 20px;
    /* Ensure padding on container */
}

.category-card {
    flex: 1;
    background: #fff;
    border-radius: 40px;
    padding: 40px;
    text-align: center;
    text-decoration: none;
    color: #333;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    height: 272px;
    position: relative;
    overflow: hidden;
}

/* Responsive: Reset fixed dimensions on smaller screens */
/* Responsive: Screen adjustment if needed (Tablet) */
@media (max-width: 1350px) and (min-width: 769px) {
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns for tablets */
    }
}

/* Responsive: Mobile Scroll (Carousel) */
@media (max-width: 768px) {
    .home-categories-section {
        min-height: 350px;
    }

    .categories-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding: 10px 20px 30px;
        /* Bottom padding for shadow */
        width: 100%;
        max-width: 100%;
        height: auto;
        gap: 15px;
        margin-top: 0px;
        -webkit-overflow-scrolling: touch;
        /* Smooth scroll iOS */
        scroll-snap-type: x mandatory;
        scroll-padding-inline-start: 20px;
    }

    .categories-grid::-webkit-scrollbar {
        display: none;
        /* Hide scrollbar for cleaner look */
    }

    .category-card {
        flex: 0 0 75%;
        min-width: 75%;
        margin-bottom: 0;
        height: 229px;
        scroll-snap-align: start;
    }

    .section-header {
        width: 100% !important;
        max-width: 100%;
        padding: 20px 20px;
        margin-bottom: 0px;
        height: auto !important;
        box-sizing: border-box;
    }

    .section-title {
        font-size: 18px;
    }

    .view-all-link {
        font-size: 14px;
    }

    .home-categories-section .section-header {
        width: 100% !important;
        /* Force override of fixed width */
        max-width: 100%;
        padding: 20px 20px;
        margin-bottom: 0px;
        height: auto !important;
        box-sizing: border-box;
    }

    .play-icon-overlay {
        width: 40px;
        height: 40px;
        bottom: 0px;
    }

    button.filter-btn.btn-dropdown-toggle {
        min-width: auto;
    }





}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    background-image: url('assets/images/hover-catogery.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    background-size: cover;
}

.category-card:hover .card-content h3,
.category-card:hover .card-content p {
    color: #fff;
}

.category-card:hover .card-icon svg,
.category-card:hover .card-icon svg path {
    fill: #fff !important;
}

.category-card:hover .card-icon {
    background-color: #FFFFFF33;
}

.card-icon {
    color: var(--primary-color);
    background-color: #1463440D;
    /* Background color with opacity */
    width: 64px;
    height: 64px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-icon svg {
    width: 40px;
    /* Updated icon size */
    height: 40px;
    fill: var(--primary-color) !important;
    transition: fill 0.3s ease;
}

.card-icon svg path {
    fill: var(--primary-color) !important;
    stroke: none !important;
    transition: fill 0.3s ease;
}



.card-content h3 {
    font-size: 30px;
    margin: 0 0 10px;
    font-weight: 900;
    display: flex;
    transition: color 0.3s ease;
}

.card-content p {
    font-size: 18px;
    color: #6A7282;
    margin: 0;
    line-height: 1.6;
    transition: color 0.3s ease;
    text-align: right;
}

/* Featured Green Card Style (Reciters) */
.category-card.featured-card {
    background: #146D3B;
    /* Updated to user's preferred color */
    color: #fff;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
    display: flex;
    align-items: flex-start;
}

.title-and-description {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #FFFFFF;
    height: 156px;
}


.category-card.featured-card .card-content p {
    color: rgba(255, 255, 255, 0.8);
}

.arrow-icon {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 24px;
    opacity: 0.7;
    transition: transform 0.3s ease;
}

.category-card.featured-card:hover .arrow-icon {
    transform: translate(-5px, -5px);
    opacity: 1;
}

/* Home CTA / Recently Listened Section */
.home-cta-section {
    height: 476.75px;
    background-color: #FFFCF7;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    direction: rtl;
}


.cta-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto 60px;
    width: 1312px;
    max-width: 100%;
}

.cta-section-title {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

.cta-view-all {
    font-size: 16px;
    color: #777;
    text-decoration: none;
    font-weight: 500;
}

.cta-content-wrapper {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 40px;
    padding-right: 10px;
    padding-left: 10px;
}

.main-cta-title {
    font-size: 32px;
    font-weight: 700;
    color: #000;
    margin-bottom: 15px;
}

.main-cta-title .highlight {
    color: #146D3B;
    /* Brand Green */
}

.cta-description {
    font-size: 16px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-action-btn {
    display: inline-block;
    padding: 12px 40px;
    background-color: #F8F5EB;
    /* Light beige button background */
    color: #146D3B;
    /* Green text */
    font-weight: 700;
    text-decoration: none;
    border-radius: 12px;
    transition: background 0.3s ease, transform 0.2s ease;
    font-size: 16px;
}

.cta-action-btn:hover {
    background-color: #ECE7D9;
    transform: translateY(-2px);
}

@media (max-width: 768px) {


    .cta-view-all {
        align-self: flex-end;
    }

}


/* Single Reciter Page Styles */
.single-reciter-page .reciter-hero {
    position: relative;
    background-size: cover;
    background-position: center top 20%;
    /*  Focus on face */
    background-repeat: no-repeat;
    height: 650px;
    /* Taller hero */
    display: flex;
    align-items: center;
    color: #fff;
    overflow: visible;
    /* Allow stats box to stick out if needed, though overlap handles it */
    margin-bottom: 0;
    padding-bottom: 120px;
    /* Space for overlap */
}

/* Gradient Overlay - Complex to match image */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: linear-gradient(to bottom, rgb(20 109 59 / 0%), rgb(20 109 59 / 0%) 60%, #fdfdfd 100%),
        /* Vertical fade to page bg */
        linear-gradient(to left, rgba(0, 0, 0, 0.1), rgb(20 109 59 / 0%));
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1352px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}



.reciter-badges {
    margin-bottom: 15px;
    display: flex;
    gap: 10px;
    justify-content: flex-start;
}

.badge {
    padding: 6px 14px;
    border-radius: 30px;
    font-family: Cairo;
    font-weight: 700;
    font-size: 14px;
}

.badge-green {
    background-color: #146D3B;
    color: #fff;
}

.badge-white {
    background-color: #FEF5E4;
    color: #146D3B;
}

.reciter-title {
    font-family: 'Cairo', sans-serif;
    font-weight: 900;
    color: #0F172A;
    font-size: 40px;
    line-height: 72px;
    text-align: right;
}

.reciter-bio {
    background: #FFFFFF4D;
    backdrop-filter: blur(8px);
    padding: 20px;
    border-radius: 16px;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.7;
    margin-bottom: 30px;
    color: #314158;
    border: 1px solid #FFFFFF80;
    max-width: 768px;
    margin-left: auto;
}

.reciter-actions {
    display: flex;
    gap: 15px;
    align-items: center;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 16px;
    font-weight: 900;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    border: none;
    white-space: nowrap;
}

.btn-primary {
    background-color: #146344;
    color: #fff;
    box-shadow: 0 4px 15px rgba(20, 109, 59, 0.3);
}

.btn-primary:hover {
    background-color: #0f522c;
    transform: translateY(-2px);
}

.btn-outline {
    background-color: #fff;
    color: #146D3B;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.btn-outline:hover {
    background-color: #f8fafc;
    color: #0f522c;
    border-color: #cbd5e1;
}

.btn-favorite.active {
    background-color: #E3F6EC;
    color: #146D3B;
    border-color: #146D3B;
}

.btn-favorite.active svg {
    fill: #146D3B;
}

.btn-link {
    background: #E3F6EC;
    /* Light green pill */
    color: #146D3B;
    padding: 12px 20px;
}

.btn-link:hover {
    background: #d1fae5;
}


/* Stats Box */
.reciter-stats-box {
    background: #FFFFFF01;
    backdrop-filter: blur(12px);
    border: 1px solid #FFFFFF;
    width: 338.5px;
    height: 102px;
    border-radius: 24px;
    box-shadow: 0px 8px 10px -6px #0000001A, 0px 20px 25px -5px #0000001A;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    bottom: 50px;
    left: 20px;
    z-index: 10;
    box-sizing: border-box;
    padding: 0 10px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 60px;
}

.stat-value {
    font-family: 'Cairo', sans-serif;
    font-weight: 900;
    font-size: 30px;
    line-height: 36px;
    color: #146D3B;
    text-align: center;
    margin-bottom: 2px;
}

.stat-label {
    font-family: 'Cairo', sans-serif;
    font-size: 12px;
    color: #62748E;
    font-weight: 700;
}

/* Recitations List Section */
.recitations-section {
    padding-top: 0;
    padding-bottom: 80px;
    direction: rtl;
    margin-top: -138px;
    position: relative;
    z-index: 5;
}

.recitations-container {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0px 8px 10px -6px #0000001A, 0px 20px 25px -5px #0000001A;
    max-width: 1352px;
    margin: 0 auto;
    border: 1px solid #E5E1D8;
    overflow: hidden;
}

.recitations-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32px;
    margin-bottom: 30px;
    border-bottom: none;
    /* Removed border */
    padding-bottom: 0;
}

.recitations-title {
    font-family: 'Cairo', sans-serif;
    font-weight: 900;
    font-size: 30px;
    color: #0F172B;
    margin: 0;
}

.search-box {
    position: relative;
    width: 320px;
    height: 64px;
}

.search-box input {
    width: 100%;
    height: 100%;
    padding: 13px 48px 14px 16px;
    border: 2px solid #E5E1D8;
    border-radius: 16px;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #0F172B;
    line-height: 100%;
    background: #fff;
    transition: all 0.2s;
    box-sizing: border-box;
    text-align: right;
}

.search-box input::placeholder {
    color: #90A1B9;
}

.search-box input:focus {
    border-color: #146D3B;
    outline: none;
}

.search-box svg {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    color: #90A1B9;
    pointer-events: none;
}

/* Table Styles */
.recitations-table-wrapper {
    overflow-x: auto;
}

.recitations-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
    table-layout: fixed;
}

.recitations-table th {
    text-align: right;
    padding: 15px 20px;
    color: #64748b;
    font-weight: 900;
    font-size: 18px;
    background: #F9F7F2;
    border: none;
    box-sizing: border-box;
}

.recitations-table th:nth-child(1) {
    width: 86.25px;
    text-align: center;
}

.recitations-table th:nth-child(2) {
    width: 320.02px;
}

.recitations-table th:nth-child(3) {
    width: 180.09px;
}

.recitations-table th:nth-child(4) {
    width: 165.05px;
    text-align: center;
}

.recitations-table th:nth-child(5) {
    width: 298.59px;
    text-align: center;
}

.recitations-table th:nth-child(6) {
    width: 160px;
}

.recitations-table th:first-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.recitations-table th:last-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.recitations-table td {
    padding: 20px;
    vertical-align: middle;
    height: 98px;
    border-bottom: 1px solid #E5E1D8;
    background: #fff;
    color: #334155;
    font-size: 15px;
    font-weight: 600;
    box-sizing: border-box;
    overflow: hidden;
}

.surah-info {
    width: 320.02px;
}

.actions-cell {
    width: 160px;
}


.surah-number {
    font-family: 'Cairo', sans-serif;
    font-weight: 700 !important;
    font-size: 20px !important;
    line-height: 28px !important;
    color: #90A1B9 !important;
    text-align: center !important;
    vertical-align: middle !important;
    width: 86.25px;
    height: 97px;
    padding: 34px 32px 35px 32px !important;
    box-sizing: border-box;
}

.surah-name-wrapper {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
    width: 320.02px;
    height: 48px;
    box-sizing: border-box;
}

.surah-name {
    font-weight: 700;
    color: #0F172B;
    font-size: 24px;
}

.type-cell {
    width: 180.09px;
    height: 97px;
    padding: 31.5px 32px 31.5px 0 !important;
    box-sizing: border-box;
}

.ayah-cell {
    font-family: 'Cairo', sans-serif;
    font-weight: 700 !important;
    font-size: 18px !important;
    line-height: 28px !important;
    color: #45556C !important;
    text-align: center !important;
    vertical-align: middle !important;
    width: 165.05px;
    height: 97px;
    padding: 34px 32px 35px 0px !important;
    box-sizing: border-box;
}

.duration-cell {
    font-family: 'Cairo', sans-serif;
    font-weight: 700 !important;
    font-size: 18px !important;
    line-height: 28px !important;
    color: #62748E !important;
    text-align: center !important;
    vertical-align: middle !important;
    width: 298.59px;
    height: 97px;
    padding: 34px 32px 35px 32px !important;
    box-sizing: border-box;
}

.badge-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 16px;
    border-radius: 20px;
    font-family: 'Cairo', sans-serif;
    font-weight: 700 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #45556C !important;
    text-align: center !important;
}

.badge-type.meccan {
    background: #f1f5f9;
    color: #64748b;
}

.badge-type.medinan {
    background: #E3F6EC;
    color: #146D3B;
}

/* Active Row */
tr.active-row td {
    background-color: #F0FDF4;
    /* Very light green highlight */
    border-color: #dcfce7;
}

tr.active-row .surah-name {
    color: #146D3B;
}

.playing-indicator {
    display: block;
    font-size: 11px;
    color: #146D3B;
    margin-top: 4px;
    font-weight: 600;
}

/* Actions */
.action-buttons,
.surah-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    width: 160px;
    height: 48px;
}

.btn-icon,
.btn-action-icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.btn-icon:hover,
.btn-action-icon:hover {
    background: #f1f5f9;
    color: #146D3B;
}

.btn-like.active svg {
    fill: #f43f5e;
    stroke: #f43f5e;
}

.btn-play {
    width: 48px;
    height: 48px;
    background-color: #F1F5F9;
    border: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1E7F5C;
    padding: 0;
}

.btn-play svg {
    width: 30px;
    height: 30px;
    top: 3px;
    left: 5px;
    color: #1E7F5C;
}

.btn-play.active {
    background: #1E7F5C;
    color: #fff;
    border-color: #1E7F5C;
}

.js-play-audio {
    cursor: pointer;
}

.recitations-footer {
    background: #F9F7F2;
    text-align: center;
    padding: 32px;
    overflow: hidden;
}

svg.icon-pause {
    color: #ffff;
}

.btn-outline-green {
    color: #146D3B;
    background: #FEF5E4;
    padding: 12px 36px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    font-family: Cairo;
    font-size: 18px;
    text-align: center;
    vertical-align: middle;
    box-shadow: 0px 4px 6px -4px #4CAF9333, 0px 10px 15px -3px #4CAF9333;

}

.btn-outline-green:hover {
    color: #146D3B;
    background: #FEF5E4;
}

.no-recitations {
    text-align: center;
    padding: 40px;
    color: #888;
}

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

/* Pagination */
.hidden-surah {
    display: none !important;
}

.playing-indicator {
    display: none;
    font-size: 11px;
    color: var(--primary-color);
    margin-right: 10px;
    background: rgba(26, 174, 159, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
}

.active-row .playing-indicator {
    display: inline-block;
}

.active-row {
    background-color: rgba(26, 174, 159, 0.05) !important;
}

.active-row .surah-name {
    color: var(--primary-color);
    font-weight: 600;
}


.adhkar-list {
    margin-top: 40px;
}

.adhkar-header,
.wishlist-header {
    margin-bottom: 0;
    height: 156px;
    background: #ffffff;
    display: flex;
    align-items: center;
    width: 100%;
}

.adhkar-content-container,
.wishlist-header .title-and-description {
    width: 100%;
    max-width: 1312px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

/* Specific text wrapper styling */
.header-content,
.title-and-description-content {
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.adhkar-header h1,
.adhkar-header .page-title,
.wishlist-header h1 {
    font-family: 'Cairo', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #072615;
    margin-bottom: 10px;
    margin-top: 0;
    /* Reset */
    line-height: 1.2;
}

.adhkar-header p,
.adhkar-header .page-description,
.wishlist-header p {
    font-family: 'Cairo', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #62748E;
    margin: 0;
    line-height: 1.5;
}


.adhkar-tabs-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}

.adhkar-tabs {
    display: inline-flex;
    background: #fff;
    border-radius: 24px;
    border: 1px solid #E5E1D8;
    padding: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    gap: 10px;
}

.adhkar-tab {
    padding: 10px 30px;
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: Cairo;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0px;
    text-align: center;
    vertical-align: middle;
    color: #62748E;
}

.adhkar-tab:hover {
    color: #FFFFFF;
    background: #1E7F5C;
    border-radius: 16px;
}

.adhkar-tab.active {
    background: #146D3B;
    color: #fff;
    box-shadow: 0 4px 12px rgba(20, 109, 59, 0.2);
}

.dhikr-card {
    background: #fff;
    border-radius: 32px;
    border: 2px solid #E5E1D8;
    box-shadow: 0px 1px 2px -1px #0000001A, 0px 1px 3px 0px #0000001A;
    padding: 30px;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    position: relative;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Card Header */
.dhikr-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
}

.dhikr-actions-left {
    display: flex;
    gap: 16px;
    align-items: center;
}

.dhikr-actions-right {
    display: flex;
    /* Visually Right */
    gap: 10px;
    align-items: center;
}

.badge-repetition {
    border: 1px solid #1E7F5C33;
    background: #1E7F5C1A;
    color: #1E7F5C;
    padding: 6px 16px;
    border-radius: 50px;
    font-weight: 900;
    font-size: 14px;
}

.btn-audio {
    background: #1E7F5C;
    color: #FFFFFF;
    border: none;
    padding: 8px 18px;
    border-radius: 78px;
    font-size: 14px;
    font-weight: 900;
    display: flex;
    flex-direction: row-reverse;
    /* Put Icon on Right visually in RTL */
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: 0.2s;
    box-shadow:
        0px 8px 10px 0px #0000001A,
        0px 20px 25px 0px #0000001A;
}

.btn-audio svg {
    width: 24px;
    height: 24px;
}

.btn-audio:hover {
    background: #0f522c;
}

.play-audio {
    width: 24px;
    height: 24px;
    transition: stroke 0.2s ease, fill 0.2s ease;
}



.btn-icon {
    background: #F1F5F9;
    border: none;
    padding: 0;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 14px;
    gap: 5px;
}

.btn-icon svg {
    flex-shrink: 0;
}

.btn-fav.active svg path {
    fill: #1e7f5c;
    stroke: #1e7f5c;
}

.btn-icon:hover {
    color: #146D3B;
}

/* Card Body Layout */
.dhikr-body {
    display: flex;
    gap: 40px;
    align-items: center;
    /* Center vertically mostly */
}

/* Counter */
.dhikr-counter-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    min-width: 140px;
}

.circular-counter {
    width: 160px;
    height: 160px;
    position: relative;
    cursor: pointer;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 10px 25px rgba(20, 109, 59, 0.1);
    transition: transform 0.1s;
}

.circular-counter:active {
    transform: scale(0.95);
}

.circular-chart {
    display: block;
    margin: 0;
    /* Changed from 10px auto */
    max-width: 100%;
    max-height: 100%;
}

.circle-bg {
    fill: none;
    stroke: #E3F6EC;
    stroke-width: 2.5;
}

.circle {
    fill: #146D3B;
    /* Fill the center */
    stroke: #146D3B;
    stroke-width: 2.5;
    stroke-linecap: round;
    animation: progress 1s ease-out forwards;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
    /* Start from top */
    /* Override logic: design shows fill circle. */
    /* Actually design shows FILLED GREEN CIRCLE with white text. */
    /* Let's adjust SVG. */
}

.circular-counter {
    background: #1E7F5C;
    border: none;
    /* layers: 6px white space, then 1.5px green outer ring */
    box-shadow: 0 0 0 6px #ffffff, 0 0 0 7.5px #1E7F5C33;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
}

.circular-chart {
    display: none;
    /* Hide SVG if simple circle */
}

.counter-text {
    text-align: center;
    pointer-events: none;
}

.count-value {
    font-size: 48px;
    font-weight: 900;
    line-height: 1;
    display: block;
}

.count-label {
    font-size: 14px;
    font-weight: 700;
    opacity: 0.9;
}

.btn-reset {
    font-size: 18px;
    color: #1E7F5C;
    background: transparent;
    border: none;
    cursor: pointer;
    font-weight: 700;
}

/* Content Text */
.dhikr-content {
    flex: 1;
    text-align: right;
    /* RTL */
}

.dhikr-text {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.8;
    color: #0F172B;
    margin-bottom: 20px;
}

.dhikr-footer-controls {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-top: 20px;
    gap: 4%;
}

.dhikr-source {
    font-size: 18px;
    color: #90A1B9;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: normal;
}

.dhikr-source svg,
.dhikr-source i,
.dhikr-source .dashicons {
    position: relative;
    top: -1px;
    /* Slight adjustment for visual center */
}

.dhikr-source::before {
    display: flex;
    /* Use flex for internal alignment of the SVG */
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    transform: translateY(4px);
    /* Lift the icon slightly to match Arabic text baseline */
    content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM11 12H13V16H11V12ZM11 8H13V10H11V8Z' fill='%2394a3b8'/%3E%3C/svg%3E");
}

.font-controls {
    width: 113px;
    display: flex;
    gap: 5px;
    background-color: #F1F5F9;
    padding: 3px;
    border-radius: 16px;
    border: 1px solid #E5E1D8;
    height: 54px;
}

.font-btn {
    background: #f1f5f9;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    padding: 13px 14px;
    font-size: 18px;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    line-height: 1;
}

.font-btn:hover,
.font-btn.active {
    background: #FFFFFF;
    color: #1E7F5C;
    box-shadow: 0px 1px 2px -1px #0000001A, 0px 1px 3px 0px #0000001A;
}

/* Responsive Dhikr Card */
@media (max-width: 768px) {
    .adhkar-list {
        padding: 0;
    }

    .dhikr-card {
        padding: 20px 15px !important;
    }



    .dhikr-actions-right {
        width: 100%;
    }

    .dhikr-actions-left {
        width: 100%;
        display: flex;
        justify-content: space-between;
        gap: 10px;
    }

    .btn-audio {
        flex: 1;
        justify-content: center;
        width: 115px;
        font-size: 10px;
        gap: 1px;
        padding: 8px 5px;
    }

    .btn-audio svg {
        width: 16px;
        height: 15px;
    }

    .dhikr-source {
        font-size: 14px;
    }

    .dhikr-body {
        flex-direction: column;
        gap: 30px;
        align-items: center;
        margin-top: 20px;
    }

    .dhikr-content {
        text-align: center;
        width: 100%;
    }

    .dhikr-text {
        font-size: 20px;
        text-align: center;
        line-height: 1.6;
    }

    .dhikr-footer-controls {
        justify-content: center;
        padding-top: 20px;
        width: 100%;
        gap: 20px;
    }

    .dhikr-counter-section {
        width: 100%;
        border-top: 1px dashed #e2e8f0;
        padding-top: 30px;
    }
}


/* Reciter Archive Page */
.archive-header {
    text-align: right;
    margin-bottom: 40px;
}

.archive-header .page-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.archive-header p {
    color: #666;
    font-size: 18px;
    margin: 0;
}

.filters-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}

.filter-btn {
    background: #F9F9F9;
    border: 1px solid #E5E5E5;
    padding: 10px 20px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.filter-btn:hover {
    background: #f0f0f0;
    border-color: #d0d0d0;
}

.reciters-grid-archive {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: flex-start;
}

.reciters-grid-archive .reciter-item {
    width: calc(16.666% - 34px);
    min-width: 160px;
    margin-bottom: 20px;
    text-align: center;
}

.reciters-grid-archive .reciter-avatar-wrapper {
    width: 192px;
    height: 192px;
    border: 4px solid #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    margin: 0 auto 15px;
    position: relative;
    border-radius: 50%;
    /* Ensure avatar wrapper is circular and has white border */
}

.reciters-grid-archive .reciter-name {
    font-size: 18px;
    margin-top: 15px;
    color: #333;
    font-weight: 700;
}

.reciters-grid-archive .reciter-subtitle {
    font-size: 13px;
    color: #888;
    display: block;
}

.load-more-container {
    text-align: center;
    margin-top: 60px;
    margin-bottom: 40px;
}

.btn-load-more {
    display: inline-block;
    background: #F8F5EB;
    color: #146D3B;
    border: none;
    padding: 12px 40px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-load-more:hover {
    background: #ECE7D9;
    transform: translateY(-2px);
}

@media (max-width: 1200px) {
    .reciters-grid-archive .reciter-item {
        width: calc(25% - 30px);
    }
}

@media (max-width: 900px) {
    .reciters-grid-archive .reciter-item {
        width: calc(33.333% - 27px);
    }
}

@media (max-width: 600px) {
    .reciters-grid-archive .reciter-item {
        width: calc(50% - 20px);
    }

    .filters-toolbar {
        flex-wrap: wrap;
        justify-content: center;
    }

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

    .archive-header .page-title {
        font-size: 28px;
    }
}


.btn-like {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    color: #94A3B8 !important;
    /* Neutral gray */
    padding: 0 !important;
    transition: all 0.2s ease !important;
}

.btn-like.active {
    color: #f43f5e !important;
    /* Premium red */
}

.btn-like.active svg {
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* Global Audio Player Styles */
/* Global Audio Player Styles */
.quran-player-bar {
    position: fixed;
    bottom: -100px;
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: bottom 0.3s ease-in-out;
}

.quran-player-bar.visible {
    bottom: 0;
}

/* Adjust body padding when player is active */
body.player-active {
    padding-bottom: 110px !important;
}

@media (max-width: 900px) {
    body.player-active {
        padding-bottom: 180px !important;
    }
}

/* Wishlist Page Styling */
body.page-template-wishlist-user,
body.page-template-wishlist-user .site,
body.page-template-wishlist-user .site-content,
body.page-template-quarantv-chapters,
body.page-template-quarantv-chapters .site,
body.page-template-quarantv-chapters .site-content {
    background-color: #fffcf7;
}

/* Chapters Page Header */
.chapters-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 0;
    flex-wrap: wrap;
    gap: 20px;
}

.chapters-title-section h1 {
    font-size: 24px;
    font-weight: 800;
    color: #1a2e35;
    margin-bottom: 5px;
}

@media (max-width: 768px) {
    .chapters-title-section h1 {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .chapters-header-container {
        padding: 20px 0;
        text-align: center;
        flex-direction: column;
    }

    .chapters-title-section h1 {
        font-size: 18px;
    }

    .chapters-title-section p {
        font-size: 12px;
    }
}

.chapters-title-section p {
    color: #888;
    margin: 0;
    font-size: 14px;
}

.chapters-filters {
    display: flex;
    gap: 15px;
}

#chapters-filter-form {
    display: flex;
    gap: 15px;
    align-items: center;
}

/* Custom Select Container */
.custom-select-wrapper {
    position: relative;
    width: 144px;
    /* Fixed width as requested */
    user-select: none;
    z-index: 100;
}

/* Hide native select when custom is active */
.chapters-filter-select.custom-hidden {
    display: none !important;
}

.custom-select-trigger {
    background-color: #FDFBF7;
    border: 2px solid #FEF5E4;
    border-radius: 12px;
    height: 52px;
    padding: 0 38px 0 14px;
    /* Increased right padding for the icon */
    font-size: 16px;
    font-weight: 700;
    color: #45556C;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.custom-select-trigger:after {
    content: "";
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E7F5C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    right: 12px;
    /* Moved to right (before word in Arabic) */
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.custom-select-wrapper.open .custom-select-trigger:after {
    transform: translateY(-50%) rotate(180deg);
}

.custom-select-wrapper.open .custom-select-trigger {
    border-color: #1E7F5C;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* The Dropdown List */
.custom-options {
    position: absolute;
    top: calc(100% + 5px);
    top: calc(100% + 5px);
    left: 50%;
    right: auto;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #FEF5E4;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 101;
    overflow: hidden;
    width: 250px;
    /* Wider list for better readability */
    min-width: 100%;
}

.custom-select-wrapper.open .custom-options {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.custom-options-list {
    max-height: 280px;
    /* Height constraint as requested */
    overflow-y: auto;
    padding: 8px;
    scrollbar-width: thin;
    scrollbar-color: #1E7F5C #FDFBF7;
}

/* Premium Scrollbar */
.custom-options-list::-webkit-scrollbar {
    width: 6px;
    background-color: transparent;
}

.custom-options-list::-webkit-scrollbar-button {
    display: none;
    height: 0;
    width: 0;
}

.custom-options-list::-webkit-scrollbar-track {
    background: transparent;
    /* No background for a cleaner look */
    border-radius: 10px;
}

.custom-options-list::-webkit-scrollbar-thumb {
    background: #146D3B;
    /* Exact primary green */
    border-radius: 10px;
}

/* Individual Option */
.custom-option {
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #45556C;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: right;
    margin-bottom: 2px;
}

.custom-option:hover {
    background-color: #F0FDF4;
    color: #1E7F5C;
    padding-right: 18px;
    /* Subtle movement effect */
}

.custom-option.selected {
    background-color: #1E7F5C;
    color: #fff;
}

.custom-option.is-placeholder {
    font-style: italic;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 6px;
    pointer-events: none;
}

@media (max-width: 768px) {
    #chapters-filter-form {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .custom-select-wrapper {
        width: 100% !important;
    }

    .custom-select-trigger {
        width: 100%;
        height: 52px;
        font-size: 15px;
    }

    .custom-options {
        width: 100% !important;
        left: 0 !important;
        transform: translateY(-8px) !important;
    }

    .custom-select-wrapper.open .custom-options {
        transform: translateY(0) !important;
    }
}

@media (max-width: 480px) {
    #chapters-filter-form {
        gap: 10px;
    }

    .custom-select-trigger {
        height: 48px;
        font-size: 14px;
        padding: 0 32px 0 10px;
        /* Reduced padding for mobile */
    }

    .custom-select-trigger:after {
        right: 10px;
        /* Keep icon in place but tighter */
        width: 12px;
        height: 12px;
    }

    .custom-option {
        padding: 10px 12px;
        font-size: 13px;
    }

    .custom-options-list {
        max-height: 240px;
        /* Slightly shorter for small mobile screens */
    }
}


.surah-list-container {
    border: 1px solid #E5E1D8;
    background: #fff;
    border-radius: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    box-shadow:
        0px 8px 10px -6px #0000001A,
        0px 20px 25px -5px #0000001A;
    overflow: hidden;
    /* This clips the active background of the first item to fit the rounded corners */
}

.surah-list-container.is-scrollable {
    max-height: 600px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #146D3B #f1f3f5;
}

.hidden-surah,
.search-hidden {
    display: none !important;
}

/* Custom Scrollbar for Surah List */
.surah-list-container::-webkit-scrollbar {
    width: 6px;
}

.surah-list-container::-webkit-scrollbar-track {
    background: #f1f3f5;
    border-radius: 10px;
}

.surah-list-container::-webkit-scrollbar-thumb {
    background: #146D3B;
    border-radius: 10px;
}

.surah-list-container::-webkit-scrollbar-thumb:hover {
    background: #1e7f5c;
}

/* Surah List Item */
.surah-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px;
    border-bottom: 1px solid #E5E1D8;
    transition: background-color 0.2s;
    position: relative;
}

@media (max-width: 768px) {
    .surah-item {
        padding: 15px 20px;
    }
}

@media (max-width: 480px) {
    .surah-item {
        padding: 12px 15px;
        gap: 10px;
    }
}

.surah-item:last-child {
    border-bottom: none;
}

.surah-item:hover {
    background-color: #fcfcfc;
}

.surah-item.active {
    background-color: #f0fdf4;
    /* Light green for active */
}

/* Surah Item - Right Side (Icon + Text) */
.surah-item-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.surah-number-box {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #F1F5F9;
    border: 2px solid #E5E1D8;
    color: #64748b;
    font-weight: 900;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
}

.surah-item.active .surah-number-box,
.surah-item:hover .surah-number-box {
    background-color: #146D3B;
    border-color: #146D3B;
    color: #fff;
}

/* Show play icon on hover or active */
.surah-number-box .icon-play-state {
    display: none;
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.surah-number-box .text-number {
    display: block;
}

.surah-item:hover .surah-number-box .text-number,
.surah-item.active .surah-number-box .text-number {
    display: none;
}

.surah-item:hover .surah-number-box .icon-play-state,
.surah-item.active .surah-number-box .icon-play-state {
    display: block;
}


.surah-info h3 {
    margin: 0 0 5px;
    font-size: 30px;
    font-weight: 900;
    color: #0f172a;
}

@media (max-width: 768px) {
    .surah-info h3 {
        font-size: 24px;
    }

    .surah-number-box {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .surah-item-right {
        gap: 15px;
    }
}

@media (max-width: 480px) {
    .surah-info h3 {
        font-size: 18px;
        margin-bottom: 2px;
    }

    .surah-meta {
        font-size: 11px;
        font-weight: 600;
        gap: 5px;
    }

    .surah-number-box {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }

    .surah-item-right {
        gap: 10px;
    }
}

.surah-item.active .surah-info h3 {
    color: #146D3B;
}

.surah-meta {
    font-size: 16px;
    font-weight: 700;
    color: #62748E;
    display: flex;
    align-items: center;
    gap: 10px;
    width: max-content;
}

@media (max-width: 480px) {

    .meta-reciter.display-reciter-name,
    .meta-verses+.meta-separator {
        display: none !important;
    }

    .meta-type {
        font-size: 10px;
        white-space: nowrap;
    }

    .surah-meta {
        font-size: 10px;
    }
}

.surah-meta span.type-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    /* Generic icon placeholder or svg */
}

/* Surah Item - Left Side (Actions) */
.surah-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: center;
}

.btn-action-icon {
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    padding: 5px;
    transition: color 0.2s;
}

.btn-action-icon:hover {
    color: #146D3B;
}

.btn-action-icon svg {
    width: 24px;
    height: 24px;
}

@media (max-width: 480px) {
    .surah-actions {
        gap: 8px;
    }

    .btn-action-icon svg {
        width: 20px;
        height: 20px;
    }
}




.load-more-container {
    background-color: #F9F7F2;
    text-align: center;
    padding: 30px 20px;
    margin: 0;
    border-bottom-left-radius: 32px;
    border-bottom-right-radius: 32px;
}


.load-more-container-reciter {
    text-align: center;
    padding: 30px 20px;

}

.js-view-chapters-btn {
    background-color: #FEF5E4;
    color: #146D3B;
    border: none;
    padding: 10px 35px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    font-size: 18px;
    box-shadow:
        0px 4px 6px -4px #4CAF9333,
        0px 10px 15px -3px #4CAF9333;
    transition: all 0.2s ease;
}

.js-view-chapters-btn:hover {
    background-color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.06);
}

.js-view-chapters-btn:active {
    transform: translateY(0);
}

.quran-player-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #FFFFFF;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
    z-index: 9999;
    padding: 10px 20px;
    height: 90px;
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}

.player-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1312px;
    margin: 0 auto;
    gap: 20px;
    direction: rtl;
}

/* Right Section: Info */
.player-info {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 300px;
}

.player-cover {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    background: #f0f0f0;
    flex-shrink: 0;
}

.player-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.player-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#player-surah-name {
    font-size: 16px;
    font-weight: 800;
    margin: 0;
    color: #0F172A;
    line-height: 1.4;
}

#player-reciter-name {
    font-size: 12px;
    color: #64748B;
}

.btn-like-player {
    background: transparent;
    border: none;
    color: #94A3B8;
    cursor: pointer;
    margin-right: 10px;
    padding: 5px;
}

.btn-like-player:hover {
    color: #f43f5e;
}

/* Center Section: Controls */
.player-controls-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    max-width: 600px;
}

.player-controls {
    display: flex;
    align-items: center;
    gap: 20px;
}

.player-btn {
    background: transparent;
    border: none;
    color: #334155;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 5px;
}

.player-btn:hover {
    color: #146D3B;
}

.btn-play-main {
    width: 48px;
    height: 48px;
    background: #198155;
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(25, 129, 85, 0.3);
    padding: 0;
}

.btn-play-main svg {
    fill: currentColor;
}

.btn-play-main:hover {
    background: #146D3B;
    transform: scale(1.05);
    color: #fff;
}

.player-progress {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 15px;
    font-size: 11px;
    color: #64748B;
    font-family: monospace;
}

/* Range Input Styling */
/* Range Input Styling */
input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: linear-gradient(to right, #146D3B 0%, #146D3B 0%, #E5E7EB 0%, #E5E7EB 100%);
    height: 4px;
    border-radius: 2px;
    cursor: pointer;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: #146D3B;
    margin-top: -4px;
    /* Center on track */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: transparent;
    /* Changed from color to allow input background */
    border-radius: 2px;
}

/* Left Section: Extras */
.player-extras {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 300px;
    justify-content: flex-end;
}

.volume-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.volume-slider-wrapper {
    width: 80px;
    display: flex;
    align-items: center;
}

.player-btn.active,
.btn-like-player.active {
    color: #f43f5e !important;
    transform: scale(1.1);
}

.btn-like-player svg {
    transition: all 0.3s ease;
}

.btn-like-player.active svg {
    fill: #f43f5e !important;
    stroke: #f43f5e !important;
}

.btn-like-player:hover svg {
    transform: scale(1.2);
    color: #f43f5e;
}

.player-btn.active-one {
    color: #146D3B !important;
    position: relative;
}

.player-btn.active-one::after {
    content: '1';
    position: absolute;
    top: 0;
    right: 0;
    font-size: 9px;
    background: #146D3B;
    color: #fff;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* Expanded Player */
.quran-player-bar.player-expanded {
    height: 100vh;
    bottom: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.quran-player-bar.player-expanded .player-container {
    flex-direction: column;
    max-width: 600px;
    height: auto;
    gap: 40px;
    padding: 20px;
}

.quran-player-bar.player-expanded .player-info {
    flex-direction: column;
    width: 100%;
    text-align: center;
    gap: 20px;
}

.quran-player-bar.player-expanded .player-cover {
    width: 280px;
    height: 280px;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.quran-player-bar.player-expanded .player-details h4 {
    font-size: 24px;
}

.quran-player-bar.player-expanded .player-details span {
    font-size: 16px;
}

.quran-player-bar.player-expanded .player-controls-wrapper {
    width: 100%;
}

.quran-player-bar.player-expanded .player-progress {
    margin-top: 20px;
}

.quran-player-bar.player-expanded .player-extras {
    width: 100%;
    justify-content: center;
}

body.player-open-expanded {
    overflow: hidden;
}

/* Close button for expanded mode (reusing expand icon or adding separate) */
.player-expanded .btn-expand {
    transform: rotate(180deg);
}

@media (max-width: 900px) {
    .quran-player-bar {
        height: auto;
        padding: 15px 20px 25px;
        /* Extra bottom padding for safe area */
        bottom: 0;
        align-items: flex-start;
    }

    .player-container {
        flex-direction: column;
        gap: 15px;
        position: relative;
        width: 100%;
    }

    .player-info {
        width: 100%;
        justify-content: flex-start;
        /* Avatar - Text */
    }

    .player-details {
        flex: 1;
        text-align: right;
    }

    .player-extras {
        display: none;
    }

    .player-controls-wrapper {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .player-controls {
        justify-content: center;
        gap: 30px;
        margin-bottom: 5px;
    }

    .btn-play-main {
        width: 56px;
        height: 56px;
        box-shadow: 0 4px 15px rgba(20, 109, 59, 0.3);
    }

    /* Progress Bar Tweaks mobile */
    .player-progress {
        margin-top: 5px;
    }

    input[type=range] {
        height: 6px;
        /* Thicker for touch */
    }

    input[type=range]::-webkit-slider-thumb {
        height: 16px;
        width: 16px;
        margin-top: -5px;
    }
}

/* Quran Parts (Juz) Page Styles */
.parts-page-container {
    padding-bottom: 60px !important;
}

.parts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 335px);
    gap: 32px;
    margin-top: 40px;
    max-width: 1436px;
    margin-left: auto;
    margin-right: auto;
}

.part-card {
    background: #fff;
    border: 2px solid #f8fafc;
    border-radius: 24px;
    padding: 30px 25px;
    position: relative;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01), 0 2px 4px -1px rgba(0, 0, 0, 0.01);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    /* Better for 356px height */
    width: 335px;
    height: 356px;
}

.part-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.01);
    border-color: #f1f5f9;
}

.part-card.active {
    border-color: #146D3B;
    background-color: #ecfdf5;
    /* Light green tint */
}

/* Number in Circle */
.part-number-circle {
    width: 44px;
    height: 44px;
    background-color: #f8fafc;
    color: #1e293b;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 800;
    font-size: 18px;
    top: 25px;
    left: 25px;
    /* LTR/RTL flip check: In RTL it should be LEFT if we want it opposite to start, or RIGHT? */
    /* Let's follow the image provided. If 'Juz 1', number '1' is on the Left side inside the card in the screenshot? No, it's on the Right side in the screenshot? 
        Screenshot shows: '1' is on the RIGHT. 'Juz One' text is indented.
        Let's try RIGHT: 25px;
     */
    right: 25px;
    left: auto;
}

.part-card.active .part-number-circle {
    background-color: #146D3B;
    color: #fff;
}

.part-content h3 {
    font-size: 30px;
    font-weight: 700;
    color: #101828;
    margin-bottom: 8px;
    margin-top: 50px;
    /* Space for number */
}

.part-content p {
    font-size: 20px;
    font-weight: 500;
    color: #64748b;
    margin-bottom: 0;
    font-weight: 500;
}

.part-card.active .part-content p {
    color: #166534;
    font-weight: 600;
}

/* Play Button */
.btn-play-part {
    width: 52px;
    height: 52px;
    background-color: #146D3B;
    color: #fff;
    border: none;
    border-radius: 16px;
    /* Rounded Square */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    margin: 0 auto;
    /* Center button */
    box-shadow: 0 4px 6px -1px rgba(20, 109, 59, 0.2);
}

.btn-play-part:hover {
    transform: scale(1.05);
    background-color: #105c31;
    box-shadow: 0 10px 15px -3px rgba(20, 109, 59, 0.3);
}

.playing-status {
    display: none;
}

.part-card.active .playing-status {
    display: block;
}



/* Parts Filter Button */
.btn-filter-parts {
    background-color: #FDFBF7;
    border: 2px solid #FEF5E4;
    border-radius: 12px;
    padding: 10px 20px;
    color: #1e293b;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    transition: all 0.2s;
}

.btn-filter-parts:hover {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
}

.parts-filter-dropdown a:hover {
    background-color: #f8fafc;
    color: #146D3B !important;
}

/* History / Recently Listened */
.history-grid-active {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.history-item-card {
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
    transition: all 0.2s;
}

.history-item-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

.history-info h4 {
    font-size: 15px;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 5px;
}

.history-info p {
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
}

.history-play-btn {
    width: 44px;
    height: 44px;
    background-color: #ecfdf5;
    /* Very light green */
    color: #15803d;
    /* Icon color */
    border: 1px solid #dcfce7;
    border-radius: 10px;
    /* Rounded square */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
}

.history-play-btn:hover {
    background-color: #15803d;
    color: #fff;
    border-color: #15803d;
}

.history-play-btn svg {
    width: 20px;
    height: 20px;
}

/* Active state if currently playing */
.history-play-btn.active {
    background-color: #15803d;
    color: #fff;
    border-color: #15803d;
}

.cta-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    margin: 0 auto 20px;
    width: 100%;
    max-width: 1312px;
    /* Standardize max-width matching other sections */
    /* padding: 0 20px; */
    /* Base padding */
    box-sizing: border-box;
}

.cta-section-title {
    font-size: 24px;
    font-weight: 800;
    color: #1e293b;
    margin: 0;
    position: relative;
    /* padding-right: 15px; */
    /* Space for line */
    display: flex;
    align-items: center;
}

/* Green Line Indicator */


.cta-view-all {
    font-size: 14px;
    color: #64748b;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s;
}

.cta-view-all:hover {
    color: #146D3B;
}

/* Player Avatar */
.player-avatar-text {
    width: 100%;
    height: 100%;
    background-color: #ecfdf5;
    color: #146D3B;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: 800;
    text-transform: uppercase;
}

/* CTA Section Container */
.home-cta-section {
    width: 100%;
    /* overflow-x: hidden; Removed as requested, fixed layout instead */
    padding: 20px 0;
    box-sizing: border-box;
    /* Ensure padding doesn't overflow width */
}

/* History Grid Layout */
/* History Grid Layout */
/* History Grid Layout */
.history-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px auto 30px;
    box-sizing: border-box;
    max-width: 1312px;
    width: 100%;
    justify-content: center;
    /* Center cards for a premium feel */
}

.history-item-card {
    background: #fff;
    border: 1px solid #E5E1D8;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    transition: transform 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    width: 310px;
    /* Fixed width as requested */
    max-width: 100%;
}

.history-item-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.history-info {
    text-align: right;
    padding: 9px;
    flex: 1;
    min-width: 0;
    /* Important for ellipsis in flex */
}

.history-info h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    font-family: 'Cairo', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-info p {
    font-size: 16px;
    font-weight: 400;
    color: #64748b;
    font-family: 'Cairo', sans-serif;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-play-btn {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: #1E7F5C1A;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #146D3B;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}

.history-play-btn:hover {
    background: #146D3B;
    color: #fff;
}

.history-play-btn svg {
    width: 37px;
    height: 37px;
    stroke-width: 5;
    fill: none;
}

/* Mobile Scroll for History Section */
@media (max-width: 768px) {
    .home-cta-section {
        padding-bottom: 40px;
        padding-top: 40px;
        height: auto;
    }

    .cta-header {
        padding: unset;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        width: 100%;
        /* Force full width within parent */
        box-sizing: border-box;
        margin: 0 0 20px 0;
    }

    .cta-section-title {
        font-size: 18px;
    }

    .cta-view-all {
        font-size: 13px;
        white-space: nowrap;
    }

    .history-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start !important;
        /* Fixed: Prevents centering from hiding first items */
        scroll-snap-type: x mandatory;
        padding: 10px 20px 30px;
        width: 100%;
        max-width: 100%;
        gap: 15px;
        -webkit-overflow-scrolling: touch;
        scroll-padding-inline-start: 20px;
        box-sizing: border-box;
    }

    .history-grid::-webkit-scrollbar {
        display: none;
    }

    .history-item-card {
        min-width: 70%;
        flex: 0 0 70%;
        /* Shows 1 full card + ~45% of the next card (card and a half) */
        width: 70%;
        scroll-snap-align: start;
        margin-bottom: 0;
        height: auto;
        box-sizing: border-box;
    }

    .home-cta-section .container {
        width: 100%;
        box-sizing: border-box;
    }
}

/* Mobile Menu Core Styles */
.menu-toggle,
.menu-close {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 0;
}

@media (max-width: 768px) {

    /* Show Burger Menu */
    .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        z-index: 100;
        order: 2;
        /* In RTL flex, 1 is right, 2 is left if only 2 items */
        margin-right: auto;
        /* Push to far left */
    }

    .site-branding {
        order: 1;
    }

    .header-actions {
        display: none !important;
        /* Hide on mobile as requested */
    }

    /* Popup Navigation - Redesigned for Premium Feel */
    .main-navigation {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        z-index: 9999;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        visibility: hidden;
        opacity: 0;
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        padding: 40px;
    }

    .main-navigation.toggled {
        visibility: visible;
        opacity: 1;
    }

    /* Premium Close Button */
    .menu-close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 30px;
        right: 25px;
        /* RTL top right */
        width: 50px;
        height: 50px;
        background: #F8FAFC;
        border-radius: 50%;
        border: 1px solid #E2E8F0;
        transition: all 0.2s;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .menu-close:active {
        transform: scale(0.9);
    }

    .menu-close svg path {
        stroke: #1E7F5C;
        stroke-width: 2.5;
    }

    /* Styling Menu Items in Popup */
    .main-navigation ul {
        display: flex;
        flex-direction: column;
        gap: 8px;
        text-align: center;
        padding: 0;
        list-style: none;
        justify-content: center;
    }

    .main-navigation ul li {
        display: block;
        margin: 0;
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .card-icon svg {
        width: 24px;
        height: 24px;
    }

    .card-icon {
        width: 56px;
        height: 56px;
    }

    .main-navigation.toggled ul li {
        opacity: 1;
        transform: translateY(0);
    }

    /* Staggered animation */
    .main-navigation.toggled ul li:nth-child(1) {
        transition-delay: 0.1s;
    }

    .main-navigation.toggled ul li:nth-child(2) {
        transition-delay: 0.15s;
    }

    .main-navigation.toggled ul li:nth-child(3) {
        transition-delay: 0.2s;
    }

    .main-navigation.toggled ul li:nth-child(4) {
        transition-delay: 0.25s;
    }

    .main-navigation.toggled ul li:nth-child(5) {
        transition-delay: 0.3s;
    }

    .main-navigation.toggled ul li:nth-child(6) {
        transition-delay: 0.35s;
    }

    .main-navigation ul li a {
        font-size: 26px;
        font-weight: 800;
        color: #072615;
        text-decoration: none;
        font-family: 'Cairo', sans-serif;
        transition: all 0.3s;
        display: inline-block;
        /* Changed from block to fit content */
        position: relative;
    }

    /* Active link style in Mobile Menu */
    .main-navigation ul li a.manual-active {
        color: #1E7F5C !important;
    }

    .main-navigation ul li a.manual-active::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 100%;
        height: 4px;
        background: #1E7F5C;
        border-radius: 10px;
    }

    /* Header Padding/Alignment */
    .header-container {
        justify-content: space-between;
        padding: 0 20px;
    }

    /* Lock body scroll */
    body.menu-open {
        overflow: hidden;
    }

    /* Header Font Sizes Mobile */
    .adhkar-header h1,
    .adhkar-header .page-title,
    .wishlist-header h1 {
        font-size: 30px;
    }

    .adhkar-header p,
    .adhkar-header .page-description,
    .wishlist-header p {
        font-size: 15px;
    }


    .cta-header {
        width: 100% !important;
        max-width: 100%;
        padding: 20px 20px;
        margin-bottom: 0px;
        height: auto !important;
        box-sizing: border-box;
    }


    .reciters-grid-archive {
        gap: 20px;
    }


    .history-info p {
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .history-info h4 {
        font-size: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .history-play-btn {
        width: 55px;
        height: 55px;
    }

    .history-info {
        text-align: right;
        padding: 0 9px;
        flex: 1;
        min-width: 0;
    }


}


.parts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 335px);
    gap: 32px;
    direction: rtl;
    max-width: 1436px;
    margin-left: auto;
    margin-right: auto;
}

.part-card {
    background: #fff;
    border: 2px solid #00000000;
    border-radius: 40px;
    padding: 32px;
    position: relative;
    transition: all 0.3s ease;
    width: 335px;
    height: 356px;
    display: flex;
    flex-direction: column;
}

.part-card.active {
    border: 2px solid #146344;
    box-shadow: 0px 25px 50px -12px #00000040;
}

.part-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.part-card-inner {
    height: 100%;
    width: 100%;
}

.part-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    /* Right in RTL */
    text-align: right !important;
    gap: 3px;
    height: 100%;
    width: 100%;
}

.part-number-circle {
    width: 96px;
    height: 96px;
    background: #1463440D;
    color: var(--primary-color);
    font-weight: 900;
    font-size: 36px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 !important;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.part-card.active .part-number-circle {
    background: #146344;
    color: #FFFFFF;
}

.part-title {
    font-size: 20px;
    font-weight: 800;
    color: #0F172A;
    margin: 0 !important;
    text-align: right;
}

.part-subtitle {
    font-size: 14px;
    color: #64748b;
    font-weight: 600;
    margin: 0 !important;
    text-align: right;
    transition: all 0.3s ease;
}

.part-card.active .part-subtitle {
    font-family: 'Cairo', sans-serif;
    font-weight: 900;
    /* Black weight */
    font-size: 20px;
    color: #146344 !important;
}

.part-actions {
    display: none;
}

.btn-play-part {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    border: none;
    background: #146344;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: auto !important;
    /* Push to bottom */
    margin-right: 0 !important;
    margin-left: 0;
}

.btn-play-part:hover {
    background: var(--primary-color);
    opacity: 0.9;
    transform: scale(1.05);
}

.btn-play-part svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    stroke: none;
}

/* Mobile Layout for Parts */
@media (max-width: 768px) {
    .parts-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .part-card {
        padding: 20px;
        border-radius: 20px;
        width: 100% !important;
        /* Allow it to fit grid */
        height: auto !important;
        /* Allow height to adjust */
    }

    .part-number-circle {
        width: 70px;
        height: 70px;
        font-size: 28px;
    }

    .part-title {
        font-size: 24px !important;
        margin-top: 10px !important;
    }

    .part-subtitle {
        font-size: 16px !important;
    }

    .btn-play-part {
        width: 56px;
        height: 56px;
    }
}

@media (max-width: 480px) {
    .parts-page-container {
        padding: 40px 15px !important;
    }

    .parts-header-centered {
        margin-bottom: 30px !important;
    }

    .parts-header-centered h2 {
        font-size: 30px !important;
    }

    .parts-header-centered p {
        font-size: 16px !important;
    }

    .parts-icon-container {
        width: 60px !important;
        height: 60px !important;
        margin-bottom: 15px !important;
    }

    .parts-icon-container svg {
        width: 30px;
        height: 30px;
    }

    .parts-search-wrapper {
        max-width: 100% !important;
        margin-bottom: 40px !important;
    }

    #parts-search-input {
        height: 64px !important;
        font-size: 18px !important;
        padding-right: 50px !important;
    }

    .parts-search-wrapper .search-icon {
        width: 22px !important;
        height: 22px !important;
    }

    .parts-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 20px !important;
        padding-bottom: 30px !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none;
        margin-right: -15px !important;
        /* Pull to edge */
        margin-left: -15px !important;
        padding-right: 15px !important;
        padding-left: 15px !important;
    }

    .parts-grid::-webkit-scrollbar {
        display: none;
    }

    .part-card {
        flex: 0 0 280px !important;
        scroll-snap-align: start !important;
        padding: 24px;
        border-radius: 32px;
        height: auto !important;
    }

    .part-number-circle {
        width: 80px;
        height: 80px;
        font-size: 30px;
    }

    .part-title {
        font-size: 26px !important;
    }

    .part-subtitle {
        font-size: 18px !important;
    }

    .btn-play-part {
        width: 60px;
        height: 60px;
    }

    .btn-filter-parts {
        padding: 8px 16px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
    }

    .btn-filter-parts .dashicons {
        font-size: 16px !important;
        margin-left: 6px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .parts-filter-dropdown {
        width: 150px !important;
    }

    .parts-filter-dropdown .filter-option {
        font-size: 13px !important;
        padding: 10px 15px !important;
    }
}

/* Mobile Layout for Chapters Header */
@media (max-width: 768px) {
    .adhkar-content-container {
        flex-direction: row !important;
        /* Side-by-side */
        align-items: center !important;
        justify-content: space-between !important;
        gap: 15px;
        padding: 20px 15px !important;
    }

    .header-content {
        text-align: right;
        width: 50%;
        flex-shrink: 0;
    }

    .adhkar-header h1,
    .adhkar-header .page-title {
        font-size: 18px !important;
        margin-bottom: 5px;
    }

    .adhkar-header p,
    .adhkar-header .page-description {
        font-size: 11px !important;
        line-height: 1.3;
        margin: 0;
    }

    .filters-toolbar {
        width: 45%;
        margin-top: 0;
    }

    #chapters-filter-form {
        flex-direction: column !important;
        /* Stack filters vertically */
        width: 100%;
        gap: 8px !important;
    }

    .chapters-filter-select {
        width: 100% !important;
        max-width: 100% !important;
        padding: 6px 10px !important;
        font-size: 11px;
        height: auto;
    }
}

/* Responsive Adhkar Tabs */
@media (max-width: 768px) {
    .adhkar-tabs-wrapper {
        padding: 0 10px;
        margin-bottom: 20px;
    }

    .adhkar-tabs {
        width: 100%;
        display: flex;
        padding: 5px;
        gap: 5px;
    }

    .adhkar-tab {
        flex: 1;
        font-size: 14px;
        padding: 8px 5px;
        border-radius: 40px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Small Mobile Fix for Reciters Gap */
@media (max-width: 450px) {

    /* 2. Reciters Archive (Page) - 2 Columns Grid */
    .reciters-grid-archive {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px !important;
        /* Reduced Gap further for safety */
        justify-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Common Size Fixes for Archive */
    .reciters-grid-archive .reciter-item {
        width: 100% !important;
        margin: 0 !important;
        /* Zero margins */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Resize Avatar for 2-column layout to fit small screens */
    .reciters-grid-archive .reciter-avatar-wrapper {
        width: 150px !important;
        height: 150px !important;
        margin-bottom: 8px !important;
    }

    .reciters-grid-archive .reciter-name {
        font-size: 13px !important;
        margin-bottom: 2px !important;
    }

    .reciters-grid-archive .reciter-subtitle {
        font-size: 11px !important;
    }
}

/* =========================================
   Responsive Single Reciter Page 
   ========================================= */

/* Tablet & Mobile Hero Adjustments */
@media (max-width: 900px) {
    .reciter-hero {
        height: auto !important;
        /* Allow dynamic height */
        padding: 60px 0 40px;
        background-position: center top;
        text-align: center;
    }

    .reciter-hero .hero-content {
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }

    .reciter-info {
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .reciter-bio {
        text-align: center;
        margin: 0 auto 20px;
    }

    .reciter-actions {
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
        width: 100%;
    }

    .btn-download-all {
        width: 100%;
        /* Make full width on mobile */
        justify-content: center;
    }

    .reciter-stats-box {
        width: 100%;
        max-width: 400px;
        /* Limit width */
        justify-content: space-around;
        margin-top: 10px;
    }

    .recitations-header {
        flex-direction: column;
        gap: 15px;
        align-items: stretch !important;
    }

    .recitations-header .search-box {
        width: 100%;
        max-width: 100%;
    }
}

/* Mobile Recitations List (Card View) */
@media (max-width: 768px) {
    .recitations-table-wrapper {
        overflow-x: hidden;
        /* No scroll, we stack them */
    }

    .recitations-table thead {
        display: none;
        /* Hide standard header */
    }

    .recitations-table,
    .recitations-table tbody,
    .recitations-table tr,
    .recitations-table td {
        display: block;
        width: 100%;
    }




    .surah-name-wrapper {
        justify-content: space-between;
        flex-direction: row-reverse;
        width: 100%;
    }

    /* Other cells */
    .recitations-table td {
        padding: 5px 0;
        border: none !important;
        display: flex;
        /* Flex to show label if needed */
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        color: #64748b;
    }

    /* Hide empty cells or irrelevant on mobile */
    .surah-number {
        display: none;
    }



    .action-buttons {
        width: 100%;
        justify-content: space-around;
        /* Spread buttons */
    }

    .btn-icon {
        width: 22px !important;
        height: 22px !important;
        flex: 0 0 44px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn-icon svg {
        width: 30px !important;
        height: 30px !important;
    }

    .badge-repetition {
        font-size: 11px;
    }

}

/* Fix Tablet Layout (768px - 1024px) */
@media (max-width: 1024px) {
    .featured-reciters-section {
        height: auto !important;
        padding-bottom: 60px !important;
        /* Extra padding to avoid overlap */
    }

    .featured-reciters-section .container {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .reciters-carousel {
        justify-content: center !important;
        gap: 30px !important;
        margin-top: 30px;
        flex-wrap: wrap !important;
    }

    /* Force 3 items per row approx */
    .reciter-item {
        width: 30% !important;
        min-width: 176px;
        margin-bottom: 30px !important;
    }
}


@media (max-width: 1100px) {

    /* Hero */
    .single-reciter-page .reciter-hero {
        height: auto !important;
        min-height: 500px;
        padding-bottom: 60px;
        background-position: center top !important;
    }

    .hero-content {
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        padding: 28px 20px;
        text-align: center;
    }

    .reciter-info {
        width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .reciter-badges {
        justify-content: center;
    }

    .reciter-title {
        text-align: center;
        font-size: 32px;
        line-height: 1.2;
    }

    .reciter-bio {
        margin: 20px auto;
        font-size: 15px;
        padding: 20px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 12px;
        max-width: 700px;
        /* Readability */
    }

    .reciter-actions {
        justify-content: center;
        flex-wrap: nowrap;
        /* Force single row on tablets */
        width: 100%;
        gap: 8px;
        /* Reduce gap */
    }

    .reciter-actions .btn {
        width: auto;
        flex: 1;
        /* Equal width */
        min-width: 0;
        /* Allow shrinking */
        margin-bottom: 0;
        font-size: 13px;
        /* Smaller font */
        padding: 10px 5px;
        /* Minimal padding */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .reciter-actions .btn svg {
        width: 18px;
        /* Smaller icons */
        height: 18px;
    }

    /* Stats Box - No longer absolute on tablets */
    .reciter-stats-box {
        position: relative;
        bottom: auto;
        left: auto;
        margin-top: 40px;
        width: 100%;
        max-width: 600px;
        justify-content: space-around;
        padding: 20px;
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid #eee;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    }

    .recitations-header {
        flex-direction: column;
        align-items: stretch !important;
        gap: 20px;
    }

    .search-box {
        width: 100%;
        max-width: 100%;
    }

    .recitations-section {
        margin-top: -20px;
        padding-right: 20px;
        padding-left: 20px;
        /* Fix overlap on tablets */

    }
}

/* Mobile Devices */
@media (max-width: 768px) {

    .reciter-stats-box {
        padding: 15px;
        margin-top: 25px;
    }

    /* Recitations List to Cards */
    .recitations-section {
        margin-top: 0;
        padding-top: 20px;
    }

    .recitations-container {
        padding: 15px;
        border-radius: 20px;
        box-shadow: none;
        background: transparent;
        border: none;
    }

    .recitations-table thead {
        display: none;
    }

    .recitations-table,
    .recitations-table tbody,
    .recitations-table tr,
    .recitations-table td {
        display: block;
        width: 100%;
    }

    .recitations-table tr {

        position: relative;

    }

    .recitations-table td {
        text-align: right;
        padding: 5px 0;
        border: none !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        color: #64748b;
    }



    .surah-name-wrapper {
        width: 100%;
        justify-content: space-between;
        flex-direction: row-reverse;
    }

    .surah-name {
        font-size: 16px;
        font-weight: 800;
        margin-right: 10px;
    }

    /* Row 2: Type as Badge (Absolute) */
    .recitations-table td:nth-child(3) {
        position: absolute;
        top: 63px;
        left: 173px;
    }

    .badge-type {
        font-size: 11px;
        padding: 4px 12px;
    }





    .action-buttons {
        width: 100%;
        display: flex;
        gap: 10px;
        justify-content: center;
    }

    .action-buttons .btn-icon {
        flex: 1 !important;
        width: auto !important;
        background: #f8fafc;
        border-radius: 8px;
        height: 40px !important;
    }

    .surah-number {
        display: none;
    }
}

/* Small Phones Optimization */
@media (max-width: 480px) {
    .reciter-title {
        font-size: 26px;
    }

    .reciter-badges .badge {
        font-size: 12px;
        padding: 4px 10px;
    }

    .reciter-bio {
        font-size: 13px;
        padding: 15px;
    }

    .recitions-container {
        padding: 10px;
    }

    .recitations-table tr {
        padding: 12px;
    }

    .stat-value {
        font-size: 20px;
    }

    .stat-label {
        font-size: 11px;
    }
}

/* Scrollable Recitations Table - Activated after clicking Load More */
.recitations-table-wrapper.scrollable-active {
    max-height: 600px;
    overflow-y: auto;
    position: relative;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    background: #fff;
    margin-bottom: 30px;
    /* Custom Scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #146D3B #f1f5f9;
}

.recitations-table-wrapper.scrollable-active::-webkit-scrollbar {
    width: 6px;
}

.recitations-table-wrapper.scrollable-active::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}

.recitations-table-wrapper.scrollable-active::-webkit-scrollbar-thumb {
    background: #146D3B;
    border-radius: 10px;
}

.recitations-table-wrapper.scrollable-active thead th {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    box-shadow: 0 1px 0 #f1f5f9;
}

.recitations-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

/* Specific Stacking for Phones */
@media (max-width: 600px) {
    .reciter-actions {
        flex-wrap: wrap;
    }

    .reciter-actions .btn {
        width: 100%;
        flex: none;
    }

    .recitations-table-wrapper.scrollable-active {
        max-height: 450px;
        /* Slightly shorter on mobile */
    }
}

/* Live Broadcast Page Styles */
.live-streams-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 50px;
    align-items: start;
}

.live-stream-card {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    border: 1px solid #E5E1D8;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.live-stream-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
}

.player-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    /* 16:9 Aspect Ratio */
    background: #000;
}

.live-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.live-indicator {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #FF0000;
    color: #fff;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(255, 0, 0, 0.3);
}

.live-indicator::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    display: block;
    animation: pulse-live 1.5s infinite;
}

@keyframes pulse-live {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.stream-info {
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.stream-icon {
    width: 60px;
    height: 60px;
    background: #f8fafc;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.stream-icon img {
    width: 100%;
    height: 100%;
}

.stream-text {
    flex: 1;
}

.stream-text h3 {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 800;
    color: #072615;
}

.stream-text p {
    margin: 0;
    color: #62748E;
    font-size: 14px;
}

.btn-play-live {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #146D3B;
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(20, 109, 59, 0.2);
}

.btn-play-live:hover {
    background: #0f522c;
    transform: scale(1.05);
}

.btn-fullscreen-live {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #146D3B;
    border: 1px solid #E5E1D8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-fullscreen-live:hover {
    background: #e2e8f0;
    color: #0f522c;
    transform: scale(1.05);
}

/* Radio Grid Styles */
.radio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.radio-card {
    background: #fff;
    padding: 20px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1px solid #E5E1D8;
    transition: all 0.2s;
}

.radio-card:hover {
    border-color: #146D3B;
    background: #f0fdf4;
}

.radio-icon {
    width: 48px;
    height: 48px;
    background: rgba(20, 109, 59, 0.1);
    color: #146D3B;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.radio-info {
    flex: 1;
}

.radio-info h4 {
    margin: 0 0 2px;
    font-size: 16px;
    font-weight: 700;
    color: #072615;
}

.radio-info p {
    margin: 0;
    font-size: 13px;
    color: #62748E;
}

.btn-audio-live {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #F1F5F9;
    color: #146D3B;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-audio-live:hover {
    background: #146D3B;
    color: #fff;
}

/* Responsive adjustments */
@media (max-width: 992px) {

    .live-streams-grid,
    .radio-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .stream-info {
        flex-direction: column;
        text-align: center;
    }

    .btn-play-live {
        margin-top: 10px;
    }
}

/* Wishlist Page Tabs */
.wishlist-tabs-container {
    width: 100%;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
}

.wishlist-tabs-wrapper {
    width: 826px;
    height: 78px;
    background: #FFFFFF;
    border: 1px solid #E5E1D8;
    border-radius: 24px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0px 1px 2px -1px #0000001A, 0px 1px 3px 0px #0000001A;
}

.wishlist-tab-item {
    border: none;
    background: transparent;
    padding: 0 40px;
    height: 100%;
    font-size: 20px;
    font-weight: 900;
    color: #62748E;
    cursor: pointer;
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--font-family);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.wishlist-tab-item:hover {
    color: #1E7F5C;
    background: rgba(20, 109, 59, 0.05);
    box-shadow:
        0px 4px 6px -4px #0000001A,
        0px 10px 15px -3px #0000001A;
}

.wishlist-tab-item.active {
    background-color: #1E7F5C;
    color: #FFFFFF;
    box-shadow: 0px 8px 20px rgba(30, 127, 92, 0.3);
}

@media (max-width: 768px) {
    .wishlist-tabs-wrapper {
        width: 100%;
        overflow-x: auto;
        justify-content: flex-start;
        padding: 6px;
        gap: 6px;
        border-radius: 15px;
    }

    .wishlist-tab-item {
        padding: 10px 20px;
        font-size: 15px;
        flex: 1;
        white-space: nowrap;
        min-width: 80px;
    }
}

/* Add Reciter Button Styles */
.add-reciter-btn {
    text-decoration: none;
    display: block;
    transition: all 0.3s ease;
}

.add-reciter-circle {
    width: 192px;
    height: 192px;
    border: 4px dashed #E5E7EB;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: all 0.3s ease;
    margin: 0 auto;
}

.add-reciter-btn:hover .add-reciter-circle {
    border-color: #1E7F5C;
    background: rgba(30, 127, 92, 0.05);
}

.add-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
    color: #99A1AF;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.add-icon svg {
    width: 40px;
    height: 40px;
}

.add-reciter-btn:hover .add-icon {
    color: #1E7F5C;
    transform: rotate(90deg);
}

.add-text {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #99A1AF;
    font-family: 'Cairo', sans-serif;
    text-align: center;
    transition: all 0.3s ease;
}

.add-reciter-btn:hover .add-text {
    color: #1E7F5C;
}

/* Custom Modal Styles - Optimized for Performance */
.qurantv-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.qurantv-modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background: #fff;
    width: 100%;
    max-width: 450px;
    border-radius: 20px;
    padding: 30px;
    position: relative;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
}

.qurantv-modal.active .modal-content {
    transform: scale(1);
}

.modal-icon {
    margin-bottom: 20px;
}

.modal-title {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #1a1a1a;
    margin-bottom: 12px;
}

.modal-body p {
    font-family: 'Cairo', sans-serif;
    font-size: 16px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 25px;
}

.modal-footer {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal-btn {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: block;
    border: none;
}

.btn-primary.modal-btn {
    background: #1E7F5C;
    color: #fff;
}

.btn-primary.modal-btn:hover {
    background: #146D3B;
    transform: translateY(-2px);
}

.btn-secondary.modal-btn {
    background: #F1F5F9;
    color: #64748b;
}

.btn-secondary.modal-btn:hover {
    background: #E11D48;
    color: #fff;
    box-shadow: 0 4px 10px rgba(225, 29, 72, 0.2);
}

/* Premium Wishlist Surahs Redesign - Optimized */
.premium-wishlist-surahs .recitations-table tr {
    transition: all 0.2s ease;
}

.premium-wishlist-surahs .recitations-table tr:hover {
    background: #f8fafc !important;
}

.surah-play-index {
    width: 48px;
    height: 48px;
    background: #1463441A;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    margin: 0 auto;
    z-index: 5;
}

.index-box-num {
    font-weight: 900;
    font-size: 16px;
    color: #146344;
    transition: all 0.2s ease;
    z-index: 1;
}

.index-box-play {
    position: absolute;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.2s ease;
    color: #1e7f5c;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* Hover States */
.fav-surah-row:hover .surah-play-index {
    background: #1E7F5C;
    box-shadow: 0 4px 12px rgba(30, 127, 92, 0.2);
}

.fav-surah-row:hover .index-box-num,
.surah-play-index.active .index-box-num {
    opacity: 0;
    transform: scale(0.5);
}

.fav-surah-row:hover .index-box-play,
.surah-play-index.active .index-box-play {
    opacity: 1;
    transform: scale(1);
    color: #fff !important;
}

/* Active State (When playing) */
.surah-play-index.active {
    background: #1E7F5C !important;
}

/* Add Surah Button Styles */
.btn-add-surah {
    width: 164px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 12px;
    padding: 10px 20px;
    background: #FEF5E4;
    box-shadow: 0px 4px 6px -4px rgba(76, 175, 147, 0.2), 0px 10px 15px -3px rgba(76, 175, 147, 0.2);
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #146D3B;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-add-surah:hover {
    background: #fdf0d5;
    transform: translateY(-2px);
    box-shadow: 0px 10px 20px rgba(76, 175, 147, 0.3);
}

/* Wishlist Mobile Fixes */
@media (max-width: 768px) {
    .wishlist-header {
        height: auto !important;
        padding: 40px 0 !important;
        margin-bottom: 30px !important;
    }

    .wishlist-header .title-and-description {
        flex-direction: column !important;
        text-align: center !important;
        gap: 25px !important;
        padding: 0 20px !important;
    }

    .title-and-description-content {
        text-align: center !important;
        align-items: center !important;
    }

    .wishlist-header h1 {
        font-size: 26px !important;
        margin-bottom: 8px !important;
    }

    .wishlist-header p {
        font-size: 14px !important;
        max-width: 100% !important;
    }

    .wishlist-tabs-container {
        margin-bottom: 30px !important;
    }

    .wishlist-tabs-wrapper {
        height: auto !important;
        padding: 6px !important;
        gap: 8px !important;
    }

    .wishlist-tab-item {
        padding: 10px 15px !important;
        font-size: 14px !important;
        min-width: unset !important;
    }

    .reciters-grid-archive {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 30px 20px !important;
        overflow-x: visible !important;
        padding-bottom: 20px !important;
        margin-right: 0 !important;
    }

    .reciters-grid-archive::-webkit-scrollbar {
        display: none;
    }

    .reciter-item {
        flex: 0 0 calc(50% - 15px) !important;
        width: calc(50% - 15px) !important;
        min-width: 140px !important;
        margin-bottom: 10px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .reciters-grid-archive .reciter-avatar-wrapper {
        width: 140px !important;
        height: 140px !important;
        border-width: 3px !important;
    }

    .reciter-name {
        font-size: 14px !important;
        margin-top: 10px !important;
    }

    .add-reciter-circle {
        width: 150px !important;
        aspect-ratio: 1 !important;
        height: auto !important;
        min-height: 120px !important;
    }

    .add-icon svg {
        width: 24px !important;
        height: 24px !important;
    }

    .add-text {
        font-size: 12px !important;
    }



    .premium-wishlist-surahs td {
        display: block !important;
        padding: 0 !important;
        width: 100% !important;
        text-align: right !important;
        border: none !important;
        background: transparent !important;
    }

    .premium-wishlist-surahs .index-cell {
        position: absolute !important;
        right: 15px !important;
        top: 15px !important;
        width: 40px !important;
        z-index: 10 !important;
    }

    .premium-wishlist-surahs .surah-play-index {
        width: 40px !important;
        height: 40px !important;
        border-radius: 10px !important;
    }

    .premium-wishlist-surahs .info-cell {
        padding-right: 65px !important;
        padding-left: 20px !important;
        padding-bottom: 5px !important;
        width: auto !important;
    }

    .premium-wishlist-surahs .surah-title-bold {
        font-size: 19px !important;
        margin-bottom: 4px !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
    }

    .premium-wishlist-surahs .surah-subtitle-author {
        font-size: 14px !important;
        color: #64748B !important;
        line-height: 1.4 !important;
    }

    .premium-wishlist-surahs .duration-cell {
        display: none !important;
    }

    .premium-wishlist-surahs .surah-duration {
        font-size: 13px !important;
        color: #94A3B8 !important;
        font-weight: 600 !important;
    }

    .premium-wishlist-surahs .like-cell {
        position: absolute !important;
        left: 15px !important;
        top: 20px !important;
        width: 36px !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .premium-wishlist-surahs .btn-like svg {
        width: 20px !important;
        height: 20px !important;
    }

    .premium-wishlist-surahs .btn-add-surah {
        width: 140px !important;
        height: 48px !important;
        font-size: 14px !important;
    }

    .play-all-button {
        width: 100% !important;
    }

    .btn-play-all {
        font-size: 18px !important;
    }

    .card-content h3 {
        font-size: 20px;
        font-weight: 700;
    }

    .card-content p {
        font-size: 14px;
    }

    .card-icon svg {
        width: 24px;
        height: 24px;
    }


    /* Homepage Reciters Carousel Fix (Mobile) */
    .reciters-carousel {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        justify-content: flex-start !important;
    }

    .reciters-carousel::-webkit-scrollbar {
        display: none !important;
    }

    .reciters-carousel .reciter-item {
        flex: 0 0 45% !important;
        width: 45% !important;
        min-width: 140px !important;
        margin: 0 !important;
        scroll-snap-align: start;
    }
}

/* Single Reciter Responsive Redesign */

/* Tablet Optimized */
@media (max-width: 1200px) {
    .reciter-header {
        height: auto !important;
        min-height: 500px !important;
        padding-top: 120px !important;
        padding-bottom: 50px !important;
    }



    /* Table adjustments for tablets */
    .recitations-table {
        table-layout: auto !important;
        /* Allow columns to shrink naturally on tablets */
    }

    .recitations-table th,
    .recitations-table td {
        padding: 15px 10px !important;
    }

    .surah-name-wrapper {
        width: auto !important;
        min-width: 200px !important;
    }

    .reciter-stats-box {
        bottom: 30px !important;
        transform: none !important;
    }
}

/* Mobile Optimized - Card-based for better organization */
@media (max-width: 768px) {
    .reciter-header {
        height: auto !important;
        min-height: 450px !important;
        padding-top: 80px !important;
        padding-bottom: 120px !important;
        text-align: center !important;
    }

    .hero-content {
        flex-direction: column !important;
        padding: 0 20px !important;
        align-items: center !important;
    }

    .reciter-title {
        font-size: 28px !important;
        line-height: 1.4 !important;
        text-align: center !important;
        margin-bottom: 15px !important;
    }

    .reciter-bio {
        font-size: 15px !important;
        line-height: 1.6 !important;
        max-width: 100% !important;
        padding: 15px !important;
    }

    .stat-value {
        font-size: 22px !important;
        line-height: 28px !important;
    }

    .stat-label {
        font-size: 11px !important;
    }

    .recitations-section {
        margin-top: -30px !important;
        padding: 0 10px !important;
    }

    .recitations-container {
        border-radius: 20px !important;
        width: 100% !important;
        margin: 0 !important;
        box-shadow: none !important;
        /* Cleaner on mobile */
        border: none !important;
    }

    .recitations-header {
        padding: 24px 15px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
        margin-bottom: 20px !important;
    }

    /* Convert Table to Cards */
    .recitations-table-wrapper {
        overflow-x: hidden !important;
    }

    .recitations-table,
    .recitations-table thead,
    .recitations-table tbody,
    .recitations-table tr,
    .recitations-table td {
        display: flex !important;
        flex-wrap: wrap !important;
        box-sizing: border-box !important;
    }

    .recitations-table thead {
        display: none !important;
    }

    .recitations-container .recitations-table tr {
        display: grid !important;
        grid-template-areas:
            "number info type"
            "ayahs duration actions" !important;
        grid-template-columns: 38px 1fr 100px !important;
        grid-template-rows: auto auto !important;
        background: #FFFFFF !important;
        border: 1px solid #E5E1D8 !important;
        border-radius: 16px !important;
        margin-bottom: 12px !important;
        padding: 18px 15px !important;
        width: 100% !important;
        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.03) !important;
        box-sizing: border-box !important;
        direction: rtl !important;
        overflow: visible !important;
        gap: 0 !important;
        position: relative !important;
    }

    .recitations-table td {
        display: flex !important;
        align-items: center !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        overflow: visible !important;
        height: auto !important;
    }

    /* Row 1 Areas */
    .recitations-container .recitations-table .surah-number {
        grid-area: number;
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #94A3B8 !important;
        justify-content: flex-start !important;
    }

    .surah-info {
        grid-area: info;
        margin: 0 !important;
        padding: 0 5px !important;
        overflow: visible !important;
    }

    .surah-name-wrapper {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        direction: rtl !important;
        overflow: visible !important;
        justify-content: flex-start;
    }

    .surah-name {
        font-size: 17px !important;
        font-weight: 700 !important;
        color: #0F172B !important;
        white-space: nowrap !important;
        /* Keep it on one line if possible */
        line-height: 1.3 !important;
    }

    .btn-play {
        width: 42px !important;
        height: 42px !important;
        background: #F1F5F9 !important;
        border-radius: 12px !important;
        color: #1E7F5C !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: none !important;
    }

    .btn-play svg {
        width: 24px !important;
        height: 24px !important;
    }

    .btn-play.active {
        background: #1E7F5C !important;
        color: #FFFFFF !important;
    }

    .recitations-container .recitations-table .type-cell {
        grid-area: type;
        justify-content: flex-end !important;
    }

    .badge-type {
        font-size: 11px !important;
        padding: 4px 10px !important;
        border-radius: 6px !important;
        white-space: nowrap !important;
    }

    /* Row 2 Areas - Separator Line */
    .ayah-cell,
    .duration-cell,
    .actions-cell {
        margin-top: 15px !important;
        padding-top: 15px !important;
        border-top: 1px solid #F1F5F9 !important;
    }

    .recitations-container .recitations-table .ayah-cell {
        grid-area: ayahs;
        font-size: 14px !important;
        color: #64748B !important;
        font-weight: 600 !important;
        justify-content: flex-start !important;
    }

    .recitations-container .recitations-table .duration-cell {
        grid-area: duration;
        font-size: 14px !important;
        color: #64748B !important;
        font-weight: 600 !important;
        justify-content: flex-start !important;
        padding-right: 15px !important;
    }

    .recitations-container .recitations-table .actions-cell {
        grid-area: actions;
        justify-content: flex-end !important;
    }

    .surah-actions {
        display: flex !important;
        position: absolute;
        left: 37px;
        justify-content: flex-end;
    }

    .btn-action-icon {
        width: 36px !important;
        height: 36px !important;
        background: #F8FAFC !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 10px !important;
        color: #64748B !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .btn-action-icon svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* Load more & Hidden handling */
    .recitations-container .recitations-table tr.hidden-surah,
    .recitations-container .recitations-table tr.search-hidden {
        display: none !important;
    }

    .recitations-footer {
        padding: 24px 0 !important;
        width: 100% !important;
    }

    .btn-outline-green {
        width: 100% !important;
        padding: 14px !important;
        font-size: 16px !important;
        border-radius: 14px !important;
    }
}

/* Chapters Filter Styling Restoration */
.chapters-filter-select {
    background-color: #FDFBF7;
    border: 2px solid #FEF5E4;
    border-radius: 12px;
    height: 52px;
    padding: 0 15px;
    font-size: 16px;
    font-weight: 700;
    color: #45556C;
    cursor: pointer;
    min-width: 180px;
    transition: all 0.3s ease;
}

.chapters-filter-select:focus {
    outline: none;
    border-color: #1E7F5C;
    background-color: #fff;
}

/* Ensure custom select parts are styled if they exist */
.custom-options {
    background: #fff;
    border: 2px solid #FEF5E4;
    border-radius: 12px;
    margin-top: 5px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.custom-option {
    padding: 12px 15px;
    font-weight: 600;
    transition: background 0.2s;
}

.custom-option:hover {
    background: #f1f8f4;
    color: #1E7F5C;
}