/* ==========================================================================
   WAY2ALLAH.COM — PREMIUM UI/UX SYSTEM (v2)
   Architecture: Dedicated load-last stylesheet, fully cascade-isolated
   Theme: Elegant Modern Islamic / Clean Modern Minimalist
   Font: Thmanyah (Thmanyah Sans)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. FONT FACE DECLARATIONS — THMANYAH SANS
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Thmanyah";
    src:
        url("../fonts/thmanyah/thmanyah-sans/woff2/thmanyahsans-Light.woff2")
            format("woff2"),
        url("../fonts/thmanyah/thmanyah-sans/otf/thmanyahsans-Light.otf")
            format("opentype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Thmanyah";
    src:
        url("../fonts/thmanyah/thmanyah-sans/woff2/thmanyahsans-Regular.woff2")
            format("woff2"),
        url("../fonts/thmanyah/thmanyah-sans/otf/thmanyahsans-Regular.otf")
            format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Thmanyah";
    src:
        url("../fonts/thmanyah/thmanyah-sans/woff2/thmanyahsans-Medium.woff2")
            format("woff2"),
        url("../fonts/thmanyah/thmanyah-sans/otf/thmanyahsans-Medium.otf")
            format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Thmanyah";
    src:
        url("../fonts/thmanyah/thmanyah-sans/woff2/thmanyahsans-Bold.woff2")
            format("woff2"),
        url("../fonts/thmanyah/thmanyah-sans/otf/thmanyahsans-Bold.otf")
            format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Thmanyah";
    src:
        url("../fonts/thmanyah/thmanyah-sans/woff2/thmanyahsans-Black.woff2")
            format("woff2"),
        url("../fonts/thmanyah/thmanyah-sans/otf/thmanyahsans-Black.otf")
            format("opentype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* Primary Font Stack */
    --w2a-font-family: "Thmanyah", Tahoma, Arial, sans-serif;

    /* Color Palette — Enhanced Contrast & Depth */
    --w2a-primary-900: #0a2942;
    --w2a-primary-800: #0e3d61;
    --w2a-primary-700: #104a75;
    --w2a-primary-600: #125688; /* Richer, higher contrast brand blue */
    --w2a-primary-500: #1d71af;
    --w2a-primary-400: #3882b6;
    --w2a-primary-300: #74a7cb;
    --w2a-primary-200: #b9d5e7;
    --w2a-primary-100: #eaf3fa;
    --w2a-primary-50: #f4f8fc;

    /* Accent — Modern Teal */
    --w2a-accent-dark: #086b66;
    --w2a-accent: #0e938c;
    --w2a-accent-light: #e6f7f6;
    --w2a-accent-100: #ccfbf1;

    /* Status — Success / Green */
    --w2a-success-700: #15803d;
    --w2a-success-600: #16a34a;
    --w2a-success-500: #22c55e;
    --w2a-success-200: #bbf7d0;
    --w2a-success-100: #dcfce7;
    --w2a-success-50: #f0fdf4;

    /* Neutral Surface & Ink Colors */
    --w2a-ink-900: #0f172a;
    --w2a-ink-800: #1e293b;
    --w2a-ink-700: #334155;
    --w2a-ink-600: #475569;
    --w2a-ink-500: #64748b;
    --w2a-ink-400: #94a3b8;
    --w2a-ink-300: #cbd5e1;

    --w2a-surface: #ffffff;
    --w2a-surface-alt: #f8fafc;
    --w2a-surface-subtle: #f1f5f9;
    --w2a-surface-muted: #f8fafc;
    --w2a-border: #e2e8f0;
    --w2a-border-dark: #cbd5e1;

    /* Spacing Scale */
    --w2a-space-1: 4px;
    --w2a-space-2: 8px;
    --w2a-space-3: 12px;
    --w2a-space-4: 16px;
    --w2a-space-5: 20px;
    --w2a-space-6: 24px;
    --w2a-space-8: 32px;

    /* Radii & Shadows */
    --w2a-radius-sm: 6px;
    --w2a-radius-md: 12px;
    --w2a-radius-lg: 16px;
    --w2a-radius-xl: 24px;
    --w2a-radius-full: 9999px;
    --w2a-radius-pill: 9999px;

    --w2a-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --w2a-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.08);
    --w2a-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.1);
    --w2a-shadow-lg: 0 10px 28px rgba(15, 23, 42, 0.14);
    --w2a-shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.18);

    /* Transitions */
    --w2a-motion-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
    --w2a-motion-normal: 250ms cubic-bezier(0.16, 1, 0.3, 1);
    --w2a-transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Global Font Stack Application & Mobile Overflow Containment */
html,
body {
    font-family: var(--w2a-font-family) !important;
    overflow-x: hidden !important;
}

body,
button,
input,
select,
textarea,
h1,
h2,
h3,
h4,
h5,
h6,
a,
span,
p,
label,
.header-navigation,
.portlet,
.page-bar,
.dropdown-menu {
    font-family: var(--w2a-font-family) !important;
}

/* Accessible Focus-Visible States for Keyboard Navigation */
:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--w2a-primary-600) !important;
    outline-offset: 3px !important;
}

/* --------------------------------------------------------------------------
   1.5 GLOBAL FLEXBOX GRID & CLEARFIX NEUTRALIZATION
   -------------------------------------------------------------------------- */

/* 1. Disable legacy micro-clearfix table pseudo-elements site-wide */
.container-fluid:before,
.container-fluid:after,
.container:before,
.container:after,
.row:before,
.row:after {
    display: none !important;
    content: none !important;
}

/* 2. Convert standard .row containers to Flexbox */
.row {
    display: flex !important;
    flex-wrap: wrap !important;
}

/* 3. Main container column alignment reset */
.main .container > .row:not(.service-box) {
    align-items: flex-start !important;
}

/* 4. Isolate JS-managed Carousel Row (.row.our-clients) to prevent height inflation overlay */
.row.our-clients {
    display: block !important;
    height: auto !important;
    max-height: 140px !important;
    overflow: hidden !important;
    position: relative !important;
}

.our-clients .caroufredsel_wrapper {
    height: auto !important;
    max-height: 120px !important;
    overflow: hidden !important;
}

/* 5. Header Container Flexbox Layout (prevents height 0px collapse caused by floated children) */
.header {
    position: relative !important;
    background-color: var(--w2a-surface) !important;
    border-bottom: 1px solid var(--w2a-border) !important;
    min-height: 76px !important;
}

.header > .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 76px !important;
    height: auto !important;
    position: relative !important;
}

.header .site-logo {
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 12px 0 !important;
}

.header .header-navigation {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}

/* 6. Remove legacy float: right / float: left from all Bootstrap column classes */
[class*="col-xs-"],
[class*="col-sm-"],
[class*="col-md-"],
[class*="col-lg-"] {
    float: none !important;
    box-sizing: border-box !important;
}

/* Mobile (< 768px) Grid Rules */
@media (max-width: 767px) {
    [class*="col-sm-"],
    [class*="col-md-"],
    [class*="col-lg-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .col-xs-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .col-xs-9 {
        flex: 0 0 75% !important;
        max-width: 75% !important;
        width: 75% !important;
    }
    .col-xs-8 {
        flex: 0 0 66.6667% !important;
        max-width: 66.6667% !important;
        width: 66.6667% !important;
    }
    .col-xs-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
    .col-xs-4 {
        flex: 0 0 33.3333% !important;
        max-width: 33.3333% !important;
        width: 33.3333% !important;
    }
    .col-xs-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        width: 25% !important;
    }
}

/* Tablet (>= 768px) Grid Rules */
@media (min-width: 768px) {
    .col-sm-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .col-sm-9 {
        flex: 0 0 75% !important;
        max-width: 75% !important;
        width: 75% !important;
    }
    .col-sm-8 {
        flex: 0 0 66.6667% !important;
        max-width: 66.6667% !important;
        width: 66.6667% !important;
    }
    .col-sm-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
    .col-sm-4 {
        flex: 0 0 33.3333% !important;
        max-width: 33.3333% !important;
        width: 33.3333% !important;
    }
    .col-sm-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        width: 25% !important;
    }
}

/* Desktop (>= 992px) Grid Rules */
@media (min-width: 992px) {
    .col-md-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .col-md-9 {
        flex: 0 0 75% !important;
        max-width: 75% !important;
        width: 75% !important;
    }
    .col-md-8 {
        flex: 0 0 66.6667% !important;
        max-width: 66.6667% !important;
        width: 66.6667% !important;
    }
    .col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
    .col-md-4 {
        flex: 0 0 33.3333% !important;
        max-width: 33.3333% !important;
        width: 33.3333% !important;
    }
    .col-md-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        width: 25% !important;
    }
    .col-md-2 {
        flex: 0 0 16.6667% !important;
        max-width: 16.6667% !important;
        width: 16.6667% !important;
    }
}

/* Large Desktop (>= 1200px) Grid Rules */
@media (min-width: 1200px) {
    .col-lg-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .col-lg-9 {
        flex: 0 0 75% !important;
        max-width: 75% !important;
        width: 75% !important;
    }
    .col-lg-8 {
        flex: 0 0 66.6667% !important;
        max-width: 66.6667% !important;
        width: 66.6667% !important;
    }
    .col-lg-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
    .col-lg-4 {
        flex: 0 0 33.3333% !important;
        max-width: 33.3333% !important;
        width: 33.3333% !important;
    }
    .col-lg-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        width: 25% !important;
    }
}

/* --------------------------------------------------------------------------
   2. GLOBAL FOUNDATION COMPONENTS
   -------------------------------------------------------------------------- */

.main {
    background: #f9ffff;
}

/* 2.1 Pre-Header Bar */
div.pre-header {
    background-color: var(--w2a-surface-alt) !important;
    border-bottom: 1px solid var(--w2a-border) !important;
    padding: var(--w2a-space-2) 0 !important;
    font-size: 13px !important;
}

div.pre-header .container .row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

div.pre-header .container .row div.social-media {
    text-align: left !important;
}

div.pre-header .container .row div ul {
    margin-bottom: 0 !important;
    float: none !important;
}

div.pre-header .list-inline > li {
    padding-left: var(--w2a-space-3) !important;
    padding-right: var(--w2a-space-3) !important;
}

div.pre-header a {
    color: var(--w2a-ink-700) !important;
    transition: color var(--w2a-motion-fast) !important;
    font-weight: 500 !important;
}

div.pre-header a:hover {
    color: var(--w2a-primary-600) !important;
    text-decoration: none !important;
}

div.pre-header .social-footer li a i.fa {
    width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    font-size: 13px !important;
    text-align: center !important;
    border-radius: var(--w2a-radius-full) !important;
    background-color: var(--w2a-surface) !important;
    color: var(--w2a-ink-400) !important;
    border: 1px solid var(--w2a-border) !important;
    transition:
        transform var(--w2a-motion-fast),
        background-color var(--w2a-motion-fast),
        color var(--w2a-motion-fast),
        border-color var(--w2a-motion-fast) !important;
}

div.pre-header .social-footer li a:hover i.fa {
    background-color: var(--w2a-primary-600) !important;
    color: #ffffff !important;
    border-color: var(--w2a-primary-600) !important;
    transform: translateY(-2px) !important;
}

/* 2.2 Main Navbar */
div.header {
    background-color: var(--w2a-surface) !important;
    box-shadow: var(--w2a-shadow-md) !important;
    border-bottom: 1px solid var(--w2a-border) !important;
    transition: box-shadow var(--w2a-motion-normal) !important;
}

.site-logo img {
    transition: transform var(--w2a-motion-normal) !important;
}
.site-logo:hover img {
    transform: scale(1.03) !important;
}

/* Mobile Toggler Tap Target Fix (>= 44px) - Only visible on mobile screens (< 992px) */
@media (max-width: 991px) {
    .header .mobi-toggler {
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: var(--w2a-radius-full) !important;
    }
}

@media (min-width: 992px) {
    .header .mobi-toggler {
        display: none !important;
    }
}

.header-navigation > ul > li > a {
    color: var(--w2a-ink-800) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 20px 18px !important;
    position: relative !important;
    transition: color var(--w2a-motion-fast) !important;
}

.header-navigation > ul > li > a:hover,
.header-navigation > ul > li.active > a {
    color: var(--w2a-primary-600) !important;
    background: transparent !important;
}

/* Nav Underline: GPU scaleX transform, inset padding alignment */
.header-navigation > ul > li > a::after {
    content: "" !important;
    position: absolute !important;
    bottom: 4px !important;
    left: 18px !important;
    right: 18px !important;
    height: 3px !important;
    width: auto !important;
    background-color: var(--w2a-primary-600) !important;
    border-radius: var(--w2a-radius-full) !important;
    border: none !important;
    transform: scaleX(0) !important;
    transform-origin: center !important;
    transition:
        transform var(--w2a-motion-normal),
        opacity var(--w2a-motion-fast) !important;
    opacity: 0 !important;
}

.header-navigation > ul > li:hover > a::after,
.header-navigation > ul > li.active > a::after {
    transform: scaleX(1) !important;
    opacity: 1 !important;
}

/* Override Metronic's legacy arrow pointer (.dropdown:hover > a:after) & suppress underline on open/hovered dropdowns */
.header-navigation > ul > li.dropdown:hover > a::after,
.header-navigation > ul > li.dropdown.open > a::after,
.header-navigation > ul > li.open > a::after {
    display: none !important;
    opacity: 0 !important;
    transform: scaleX(0) !important;
    border: none !important;
    width: 0 !important;
    height: 0 !important;
}

.header-navigation > ul > li.dropdown > ul.dropdown-menu {
    border-radius: var(--w2a-radius-md) !important;
    box-shadow: var(--w2a-shadow-lg) !important;
    border: 1px solid var(--w2a-border) !important;
    padding: var(--w2a-space-2) 0 !important;
    overflow: hidden !important;
}

.header-navigation .dropdown-menu > li > a {
    padding: 10px 18px !important;
    color: var(--w2a-ink-700) !important;
    font-weight: 500 !important;
    display: block !important;
    transition:
        transform var(--w2a-motion-fast),
        background-color var(--w2a-motion-fast),
        color var(--w2a-motion-fast) !important;
}

/* GPU transform (translateX) — zero layout reflow */
.header-navigation .dropdown-menu > li > a:hover {
    background-color: var(--w2a-primary-50) !important;
    color: var(--w2a-primary-600) !important;
    transform: translateX(-4px) !important;
}

/* 2.3 Breadcrumb / Page-Bar */
div.page-bar {
    background-color: var(--w2a-surface) !important;
    border-radius: var(--w2a-radius-md) !important;
    box-shadow: var(--w2a-shadow-sm) !important;
    border: 1px solid var(--w2a-border) !important;
    padding: var(--w2a-space-3) var(--w2a-space-5) !important;
    margin-bottom: var(--w2a-space-6) !important;
}

ul.page-breadcrumb {
    margin: 0 !important;
    padding: 0 !important;
}

ul.page-breadcrumb li {
    color: var(--w2a-ink-500) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

ul.page-breadcrumb li a {
    color: var(--w2a-primary-600) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

ul.page-breadcrumb li a:hover {
    color: var(--w2a-primary-800) !important;
    text-decoration: underline !important;
}

div.page-bar h3.page-title {
    color: var(--w2a-ink-900) !important;
    font-weight: 800 !important;
    margin-top: var(--w2a-space-2) !important;
    margin-bottom: var(--w2a-space-1) !important;
    position: relative !important;
    display: inline-block !important;
}

/* 2.4 Portlet Card System (Step 1 Redesign) */
.portlet.box {
    border-radius: 16px !important;
    box-shadow: var(--w2a-shadow-sm) !important;
    border: 1px solid var(--w2a-border) !important;
    overflow: hidden !important;
    background-color: var(--w2a-surface) !important;
    transition:
        transform var(--w2a-motion-normal),
        box-shadow var(--w2a-motion-normal) !important;
    height: 100%;
}

.portlet.box:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--w2a-shadow-md) !important;
}

.portlet.box > .portlet-title {
    background: transparent !important;
    padding: 20px 24px 12px 24px !important;
    border-bottom: none !important;
}

.portlet.box > .portlet-title > .caption {
    font-weight: 600 !important;
    font-size: 16px !important;
    color: var(--w2a-ink-900) !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    float: none !important;
}

/* Circular Icon Chip (34px diameter, var(--w2a-primary-100) fill) */
.portlet.box > .portlet-title .caption > i.fa,
.portlet.box > .portlet-title .caption > i {
    width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
    text-align: center !important;
    border-radius: 50% !important;
    background-color: var(--w2a-primary-100) !important;
    color: var(--w2a-primary-600) !important;
    font-size: 15px !important;
    margin: 0 0 0 8px !important;
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

/* Specific Override for fa-spinner in Card Headers (Replace with fa-tv glyph and disable rotation animation) */
.portlet.box > .portlet-title .caption > i.fa-spinner::before {
    content: "\f26c" !important; /* fa-tv broadcast icon */
}
.portlet.box > .portlet-title .caption > i.fa-spinner {
    animation: none !important;
    -webkit-animation: none !important;
}

/* Also format legacy title <img> tags inside caption as circular chips */
.portlet.box > .portlet-title .caption > img {
    width: 34px !important;
    height: 34px !important;
    padding: 6px !important;
    border-radius: 50% !important;
    background-color: var(--w2a-primary-100) !important;
    margin: 0 0 0 8px !important;
    object-fit: contain !important;
    float: none !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.portlet.box > .portlet-body {
    background-color: var(--w2a-surface) !important;
    padding: 24px !important;
}

/* Mobile Responsiveness for Cards (<= 480px): 16px padding on small screens to prevent cramping */
@media (max-width: 480px) {
    .portlet.box > .portlet-body,
    .portlet.box > .portlet-title,
    div.author,
    div.telawah-author > div.thumbnail,
    a.fancybox-button.channel-logo {
        padding: 16px !important;
    }
}

/* 2.5 Buttons */
.btn-primary {
    background: linear-gradient(
        135deg,
        var(--w2a-primary-700),
        var(--w2a-primary-600)
    ) !important;
    border: none !important;
    border-radius: var(--w2a-radius-sm) !important;
    box-shadow: 0 2px 6px rgba(18, 86, 136, 0.25) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 8px 18px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition:
        transform var(--w2a-motion-fast),
        background var(--w2a-motion-fast),
        box-shadow var(--w2a-motion-fast) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: linear-gradient(
        135deg,
        var(--w2a-primary-800),
        var(--w2a-primary-700)
    ) !important;
    box-shadow: 0 4px 12px rgba(18, 86, 136, 0.35) !important;
    transform: translateY(-1px) !important;
}

.btn-default {
    background-color: var(--w2a-surface-alt) !important;
    border: 1px solid var(--w2a-ink-300) !important;
    border-radius: var(--w2a-radius-sm) !important;
    color: var(--w2a-ink-800) !important;
    font-weight: 600 !important;
    padding: 8px 18px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition:
        background-color var(--w2a-motion-fast),
        border-color var(--w2a-motion-fast),
        color var(--w2a-motion-fast) !important;
}

.btn-default:hover,
.btn-default:focus {
    background-color: var(--w2a-surface-subtle) !important;
    border-color: var(--w2a-ink-400) !important;
    color: var(--w2a-ink-900) !important;
}

/* 2.6 Lists & Card Rows (Spacious Row Layout, Circular Content Images, Plain Text Footer) */
ul.vars,
ul.downloaded_list,
ul.recent_list {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

ul.vars li,
ul.downloaded_list > li,
ul.recent_list li {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--w2a-border) !important;
    border-top: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    transition: background-color var(--w2a-motion-fast) !important;
}

ul.vars li:last-child,
ul.downloaded_list > li:last-child,
ul.recent_list li:last-child {
    border-bottom: none !important;
}

ul.vars li a,
ul.downloaded_list li a,
ul.recent_list li a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    color: var(--w2a-ink-900) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: color var(--w2a-motion-fast) !important;
    padding: 0 !important;
    margin: 0 !important;
}

ul.vars li a:hover,
ul.downloaded_list li a:hover,
ul.recent_list li a:hover {
    color: var(--w2a-primary-600) !important;
}

ul.vars li a .w2a-var-copy {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* Real Content Images in Rows: Circular, fixed 38px diameter, object-fit: cover */
ul.vars img,
ul.downloaded_list img,
ul.recent_list img {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 1px solid var(--w2a-border) !important;
    margin: 0 !important;
    float: none !important;
    flex-shrink: 0 !important;
}

/* Row Typography Hierarchy */
ul.vars li a span,
ul.downloaded_list li a span,
ul.recent_list li a span {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--w2a-ink-900) !important;
    line-height: 1.4 !important;
}

ul.vars li a small,
ul.vars li span.var_time,
.tooltip2 span.middle2 {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--w2a-ink-500) !important;
    margin-top: 6px !important;
    display: block !important;
}

/* Footer "More" Link (Plain text accent link with RTL left arrow, complete reset of legacy PNGs & positioning) */
div.mooore {
    position: static !important;
    margin-top: 16px !important;
    text-align: left !important;
    clear: both !important;
    float: none !important;
}

div.mooore > a.mo {
    position: static !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    background-image: none !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    min-height: auto !important;
    color: var(--w2a-primary-600) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: color var(--w2a-motion-fast) !important;
}

div.mooore > a.rssb {
    display: none !important;
}

div.mooore > a.mo::after {
    content: "\f104" !important;
    font-family: FontAwesome !important;
    font-size: 14px !important;
    margin-right: 4px !important;
    transition: transform var(--w2a-motion-fast) !important;
}

div.mooore > a.mo:hover {
    background: transparent !important;
    background-image: none !important;
    color: var(--w2a-primary-800) !important;
    text-decoration: underline !important;
}

div.mooore > a.mo:hover::after {
    transform: translateX(-3px) !important;
}

/* Empty State Container */
.w2a-empty-state {
    padding: var(--w2a-space-8) var(--w2a-space-4) !important;
    text-align: center !important;
    color: var(--w2a-ink-500) !important;
    background-color: var(--w2a-surface-alt) !important;
    border-radius: var(--w2a-radius-md) !important;
    border: 1px dashed var(--w2a-border) !important;
}
.w2a-empty-state i.fa {
    font-size: 36px !important;
    color: var(--w2a-primary-500) !important;
    margin-bottom: var(--w2a-space-3) !important;
}

/* --------------------------------------------------------------------------
   3. PAGE-SPECIFIC ENHANCEMENTS & BUG FIXES
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   3.1 PAGE 7: RADIO (#w2a_radio)
   -------------------------------------------------------------------------- */
#w2a_radio {
    margin-top: 10px !important;
}

#w2a_radio > .player {
    background: linear-gradient(145deg, #0f172a, #1e293b) !important;
    border-radius: var(--w2a-radius-lg) !important;
    box-shadow: var(--w2a-shadow-lg) !important;
    padding: 22px !important;
    color: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#w2a_radio .title {
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 18px !important;
}

#w2a_radio .artist {
    color: var(--w2a-ink-400) !important;
    font-size: 14px !important;
    margin-bottom: 12px !important;
}

#w2a_radio .player-timer {
    color: var(--w2a-accent) !important;
    font-weight: 700 !important;
}

/* FIX: Touch Target Sizing (>= 40px x 40px) for Radio Action Buttons */
#w2a_radio .controls .play,
#w2a_radio .controls .pause,
#w2a_radio .controls .rew,
#w2a_radio .controls .fwd {
    min-width: 40px !important;
    min-height: 40px !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--w2a-radius-full) !important;
    transition:
        transform var(--w2a-motion-fast),
        opacity var(--w2a-motion-fast) !important;
    cursor: pointer !important;
}

#w2a_radio .controls .play:hover,
#w2a_radio .controls .pause:hover,
#w2a_radio .controls .rew:hover,
#w2a_radio .controls .fwd:hover {
    transform: scale(1.12) !important;
    opacity: 0.9 !important;
}

/* Radio Volume Slider — jQuery UI .ui-slider-range styling override */
#w2a_radio .volume.ui-slider,
#w2a_radio .volume {
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--w2a-radius-full) !important;
    height: 8px !important;
    border: none !important;
    overflow: visible !important;
}

#w2a_radio .volume .ui-slider-range {
    background-image: none !important;
    background: linear-gradient(90deg, var(--w2a-accent), #00a896) !important;
    height: 100% !important;
    border-radius: var(--w2a-radius-full) !important;
}

#w2a_radio .volume .ui-slider-handle {
    background: #ffffff !important;
    border: 2px solid var(--w2a-accent) !important;
    border-radius: var(--w2a-radius-full) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
    width: 16px !important;
    height: 16px !important;
    top: -4px !important;
    outline: none !important;
}

/* Seek Tracker Bar Override */
#w2a_radio .tracker {
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--w2a-radius-full) !important;
    height: 6px !important;
    border: none !important;
}

#w2a_radio .tracker .ui-slider-range {
    background-image: none !important;
    background: linear-gradient(
        90deg,
        var(--w2a-primary-600),
        var(--w2a-accent)
    ) !important;
    height: 100% !important;
    border-radius: var(--w2a-radius-full) !important;
}

#w2a_radio .tracker .ui-slider-handle {
    background: #ffffff !important;
    border: 2px solid var(--w2a-primary-600) !important;
    border-radius: var(--w2a-radius-full) !important;
    width: 14px !important;
    height: 14px !important;
    top: -4px !important;
}

/* Playlist Styling */
#w2a_radio ul.playlist {
    background-color: #ffffff !important;
    border-radius: var(--w2a-radius-md) !important;
    padding: 16px !important;
    border: 1px solid var(--w2a-border) !important;
}

#w2a_radio ul.playlist li {
    border-radius: var(--w2a-radius-sm) !important;
    padding: 10px 14px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    color: var(--w2a-ink-400) !important;
    font-weight: 500 !important;
    transition:
        transform var(--w2a-motion-fast),
        background-color var(--w2a-motion-fast),
        color var(--w2a-motion-fast) !important;
}

#w2a_radio ul.playlist li:hover,
#w2a_radio ul.playlist li.active {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}
#w2a_radio ul.playlist li:hover {
    transform: translateX(-4px) !important;
}

/* --------------------------------------------------------------------------
   3.2 PAGE 8: GALLERY (.albums_list .album-item)
   -------------------------------------------------------------------------- */
.albums_list .album-item {
    isolation: isolate !important;
    overflow: visible !important;
    position: relative !important;
    border-radius: var(--w2a-radius-lg) !important;
    border: 1px solid var(--w2a-border) !important;
    background-color: var(--w2a-surface) !important;
    box-shadow: var(--w2a-shadow-md) !important;
    padding: var(--w2a-space-4) !important;
    margin-bottom: var(--w2a-space-6) !important;
    transition:
        transform var(--w2a-motion-normal),
        box-shadow var(--w2a-motion-normal) !important;
}

/* Gallery Stacked Photo Pseudo-Elements */
.albums_list .album-item::before {
    content: "" !important;
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    right: 6px !important;
    bottom: -6px !important;
    background-color: var(--w2a-surface) !important;
    border: 1px solid var(--w2a-ink-300) !important;
    border-radius: var(--w2a-radius-lg) !important;
    z-index: -1 !important;
    box-shadow: var(--w2a-shadow-xs) !important;
}

.albums_list .album-item::after {
    content: "" !important;
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    right: 12px !important;
    bottom: -12px !important;
    background-color: var(--w2a-surface-alt) !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-lg) !important;
    z-index: -2 !important;
    opacity: 0.7 !important;
}

.albums_list .album-item:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--w2a-shadow-lg) !important;
}

.albums_list .album-item img {
    border-radius: var(--w2a-radius-md) !important;
}

.album-item a.w2a_album_title h5 {
    font-weight: 700 !important;
    color: var(--w2a-ink-900) !important;
    font-size: 15px !important;
    margin: 12px 0 6px 0 !important;
}

.album-item a.w2a_album_save {
    background: linear-gradient(
        135deg,
        var(--w2a-accent-dark),
        var(--w2a-accent)
    ) !important;
    border-radius: var(--w2a-radius-full) !important;
    padding: 6px 16px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    box-shadow: 0 2px 6px rgba(14, 147, 140, 0.3) !important;
    transition:
        transform var(--w2a-motion-fast),
        box-shadow var(--w2a-motion-fast) !important;
}

.album-item a.w2a_album_save:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(14, 147, 140, 0.4) !important;
    text-decoration: none !important;
}

/* --------------------------------------------------------------------------
   3.3 PAGE 3: PREACHERS (div.author)
   -------------------------------------------------------------------------- */
div.author {
    border-radius: 16px !important;
    border: 1px solid var(--w2a-border) !important;
    background-color: var(--w2a-surface) !important;
    padding: 24px !important;
    box-shadow: var(--w2a-shadow-sm) !important;
    margin-bottom: 24px !important;
    transition:
        transform var(--w2a-motion-normal),
        box-shadow var(--w2a-motion-normal),
        border-color var(--w2a-motion-normal) !important;
}

div.author:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--w2a-shadow-md) !important;
    border-color: var(--w2a-ink-300) !important;
}

div.author > img.pull-left {
    border-radius: var(--w2a-radius-full) !important;
    width: 64px !important;
    height: 64px !important;
    border: 2px solid var(--w2a-border) !important;
    box-shadow: var(--w2a-shadow-xs) !important;
    object-fit: cover !important;
    margin-right: 14px !important;
}

div.author .author-name a {
    font-weight: 700 !important;
    color: var(--w2a-ink-900) !important;
    font-size: 15px !important;
}

div.author span.testimonials-post {
    color: var(--w2a-ink-500) !important;
    font-size: 13px !important;
    display: block !important;
    margin-top: 4px !important;
}

/* A-Z Bar Chip Buttons: Touch Target Sizing (>= 40px x 40px) */
.abc {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: var(--w2a-space-3) 0 !important;
}

.abc a {
    min-width: 40px !important;
    min-height: 40px !important;
    line-height: 38px !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--w2a-radius-full) !important;
    background-color: var(--w2a-surface-subtle) !important;
    color: var(--w2a-ink-700) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    border: 1px solid var(--w2a-border) !important;
    transition:
        transform var(--w2a-motion-fast),
        background-color var(--w2a-motion-fast),
        color var(--w2a-motion-fast),
        border-color var(--w2a-motion-fast) !important;
}

.abc a:hover {
    background-color: var(--w2a-primary-600) !important;
    color: #ffffff !important;
    border-color: var(--w2a-primary-600) !important;
    transform: translateY(-1px) !important;
}

/* --------------------------------------------------------------------------
   3.4 PAGE 4: CHANNELS (a.channel-logo & Tooltip)
   -------------------------------------------------------------------------- */
a.fancybox-button.channel-logo {
    display: block !important;
    border-radius: 16px !important;
    padding: 24px !important;
    border: 1px solid var(--w2a-border) !important;
    background-color: var(--w2a-surface) !important;
    box-shadow: var(--w2a-shadow-sm) !important;
    transition:
        transform var(--w2a-motion-normal),
        box-shadow var(--w2a-motion-normal),
        border-color var(--w2a-motion-normal) !important;
    text-align: center !important;
    margin-bottom: 24px !important;
    position: relative !important;
}

a.fancybox-button.channel-logo:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--w2a-shadow-md) !important;
    border-color: var(--w2a-primary-600) !important;
}

a.fancybox-button.channel-logo img {
    max-height: 85px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
}

/* Channel Hover & Touch Active Tooltip (.zoomix) */
a.channel-logo .zoomix {
    border-radius: var(--w2a-radius-md) !important;
    padding: 12px 14px !important;
    box-shadow: var(--w2a-shadow-lg) !important;
    background: rgba(15, 23, 42, 0.94) !important;
    color: #f8fafc !important;
    font-size: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(6px) !important;
    line-height: 1.6 !important;
    transition:
        opacity var(--w2a-motion-fast),
        visibility var(--w2a-motion-fast) !important;
}

a.channel-logo.w2a-touch-active .zoomix,
a.channel-logo:hover .zoomix {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* --------------------------------------------------------------------------
   3.5 PAGE 6: RECITERS (div.telawah-author)
   -------------------------------------------------------------------------- */
div.telawah-author > div.thumbnail {
    border-radius: 16px !important;
    border: 1px solid var(--w2a-border) !important;
    background-color: var(--w2a-surface) !important;
    box-shadow: var(--w2a-shadow-sm) !important;
    padding: 24px !important;
    transition:
        transform var(--w2a-motion-normal),
        box-shadow var(--w2a-motion-normal) !important;
    margin-bottom: 24px !important;
}

div.telawah-author > div.thumbnail:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--w2a-shadow-md) !important;
}

.telawa-author-name {
    font-weight: 800 !important;
    color: var(--w2a-ink-900) !important;
    font-size: 16px !important;
    margin-bottom: 12px !important;
}

/* FIX: Reciter Repeated Icon fix */
.telawa-thumb,
.telawa-author-name,
.telawah-author .center-block {
    background-repeat: no-repeat !important;
    background-size: contain !important;
}

.telawa-details .list-group-item {
    border: none !important;
    border-bottom: 1px solid var(--w2a-surface-subtle) !important;
    padding: 8px 0 !important;
    font-size: 13px !important;
    color: var(--w2a-ink-700) !important;
}

.telawa-details .list-group-item span,
.telawah-group-recits span,
.telawah-group-visits span,
.table_order {
    font-weight: 700 !important;
    color: var(--w2a-primary-600) !important;
    background-color: var(--w2a-primary-50) !important;
    padding: 3px 10px !important;
    border-radius: var(--w2a-radius-full) !important;
    display: inline-block !important;
}

/* --------------------------------------------------------------------------
   3.6 PAGE 2: CATEGORIES TREE (div.list-container)
   -------------------------------------------------------------------------- */
div.list-container {
    background-color: var(--w2a-surface) !important;
    border-radius: var(--w2a-radius-lg) !important;
    border: 1px solid var(--w2a-border) !important;
    padding: 18px !important;
    box-shadow: var(--w2a-shadow-sm) !important;
}

ul.group_list li label,
ul.group_list li > a {
    padding: 8px 12px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    border-radius: var(--w2a-radius-sm) !important;
    transition:
        background-color var(--w2a-motion-fast),
        color var(--w2a-motion-fast) !important;
    font-weight: 600 !important;
    color: var(--w2a-ink-800) !important;
}

ul.group_list li label:hover,
ul.group_list li > a:hover {
    background-color: var(--w2a-primary-50) !important;
    color: var(--w2a-primary-600) !important;
}

ul.sub_group_list {
    border-right: 2px solid var(--w2a-border) !important;
    margin-right: 14px !important;
    padding-right: 12px !important;
}

/* Mobile Responsive Indent Adjustment for Deep Category Trees */
@media (max-width: 480px) {
    ul.sub_group_list {
        margin-right: 6px !important;
        padding-right: 6px !important;
    }
    ul.group_list li label,
    ul.group_list li > a {
        padding: 6px 8px !important;
        font-size: 13px !important;
    }
}

/* --------------------------------------------------------------------------
   3.7 HOMEPAGE HERO BANNER & EXTRA WIDGETS
   -------------------------------------------------------------------------- */

/* Hero Banner Treatment */
.page-slider {
    margin-top: var(--w2a-space-6) !important;
    margin-bottom: var(--w2a-space-6) !important;
    border-radius: var(--w2a-radius-lg) !important;
    overflow: hidden !important;
    box-shadow: var(--w2a-shadow-md) !important;
    border: 1px solid var(--w2a-border) !important;
    padding-left: 0;
    padding-right: 0;
}

.revolution-slider img {
    border-radius: var(--w2a-radius-lg) !important;
    transition: transform var(--w2a-motion-normal) !important;
}

div.list_carousel2 {
    padding: 12px 0 !important;
}

img.app-badge {
    transition:
        transform var(--w2a-motion-fast),
        filter var(--w2a-motion-fast) !important;
}
img.app-badge:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.06) !important;
}

a.w2a_files {
    border-radius: var(--w2a-radius-md) !important;
    box-shadow: var(--w2a-shadow-xs) !important;
    transition: box-shadow var(--w2a-motion-fast) !important;
}
a.w2a_files:hover {
    box-shadow: var(--w2a-shadow-sm) !important;
}

/* --------------------------------------------------------------------------
   3.8 BATCH 2A — FATAWA DIRECTORY, SINGLE ANSWER & ITEM DETAIL VIEWS
   -------------------------------------------------------------------------- */

/* Single Answer & Q&A Reading View (editorial card layout) */
p.answer-p {
    background-color: var(--w2a-surface-subtle) !important;
    border: 1px solid var(--w2a-border) !important;
    border-right: 4px solid var(--w2a-primary-600) !important;
    border-radius: var(--w2a-radius-md) !important;
    padding: 18px 20px !important;
    margin-top: 10px !important;
    font-size: 15px !important;
    line-height: 2.2 !important;
    color: var(--w2a-ink-900) !important;
    box-shadow: var(--w2a-shadow-xs) !important;
}

a.auther-name {
    color: var(--w2a-primary-600) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    transition: color var(--w2a-motion-fast) !important;
}
a.auther-name:hover {
    color: var(--w2a-primary-800) !important;
    text-decoration: underline !important;
}

/* Item Details Table (.mada-details) */
.mada-details table.table-striped,
.anasheed-details table.table-striped {
    background-color: var(--w2a-surface) !important;
    border-radius: var(--w2a-radius-md) !important;
    overflow: hidden !important;
    border: 1px solid var(--w2a-border) !important;
}

.mada-details th.w20,
.anasheed-details th.w20 {
    background-color: var(--w2a-surface-alt) !important;
    color: var(--w2a-ink-700) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--w2a-border) !important;
    width: 25% !important;
}

.mada-details td,
.anasheed-details td {
    color: var(--w2a-ink-900) !important;
    font-size: 14px !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--w2a-border) !important;
}

/* Action Tile Buttons Grid (jumbotron-icon for "سماع المادة" and "حفظ المادة") */
div.jumbotron-icon {
    margin-top: 20px !important;
    gap: 16px !important;
}

div.jumbotron-icon .col-md-6 > a,
div.jumbotron-icon .col-sm-6 > a,
div.jumbotron-icon .col-xs-6 > a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px 16px !important;
    background-color: var(--w2a-primary-50) !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-lg) !important;
    text-decoration: none !important;
    color: var(--w2a-primary-700) !important;
    box-shadow: var(--w2a-shadow-xs) !important;
    transition:
        transform var(--w2a-motion-normal),
        background-color var(--w2a-motion-fast),
        box-shadow var(--w2a-motion-fast) !important;
}

div.jumbotron-icon .col-md-6 > a:hover,
div.jumbotron-icon .col-sm-6 > a:hover,
div.jumbotron-icon .col-xs-6 > a:hover {
    transform: translateY(-3px) !important;
    background-color: var(--w2a-primary-100) !important;
    box-shadow: var(--w2a-shadow-md) !important;
    color: var(--w2a-primary-800) !important;
}

div.jumbotron-icon i.fa {
    font-size: 28px !important;
    margin-bottom: 8px !important;
    color: var(--w2a-primary-600) !important;
}

div.jumbotron-icon h5 {
    font-weight: 700 !important;
    font-size: 15px !important;
    margin: 0 !important;
}

/* Floating Audio/Video Player Overlay Container */
div#the_main_player {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    z-index: 2147483647 !important;
    background: rgba(15, 23, 42, 0.75) !important;
    backdrop-filter: blur(8px) !important;
}

div#the_main_player .panel {
    background: rgba(15, 23, 42, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--w2a-radius-lg) !important;
    box-shadow: var(--w2a-shadow-lg) !important;
    color: #ffffff !important;
    overflow: hidden !important;
}

div#the_main_player .panel-heading {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 12px 16px !important;
}

div#w2a_main_player {
    padding: 20px !important;
    background: transparent !important;
}

/* Presentational Utilities for Fatawa Admin Controls */
.w2a-admin-btn-15 {
    width: 15% !important;
}
.w2a-admin-btn-30 {
    width: 30% !important;
}
.w2a-admin-btn-45 {
    width: 45% !important;
}
.w2a-admin-btn-14 {
    width: 14% !important;
}

/* --------------------------------------------------------------------------
   3.9 BRAND NEW CALL-TO-ACTION (CTA) UI/UX SECTION (.quote-v1)
   -------------------------------------------------------------------------- */
.quote-v1 {
    background: linear-gradient(
        135deg,
        var(--w2a-primary-900) 0%,
        var(--w2a-primary-700) 55%,
        var(--w2a-primary-600) 100%
    ) !important;
    border-radius: var(--w2a-radius-lg) !important;
    box-shadow:
        0 10px 30px rgba(10, 41, 66, 0.22),
        var(--w2a-shadow-md) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding: 24px 32px !important;
    margin-bottom: 32px !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    color: #ffffff !important;
}

/* Subtle Glassmorphic Ambient Glow Accent */
.quote-v1::before {
    content: "" !important;
    position: absolute !important;
    top: -50% !important;
    right: -20% !important;
    width: 280px !important;
    height: 280px !important;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0) 70%
    ) !important;
    pointer-events: none !important;
}

.quote-v1 > div:first-child {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex: 1 !important;
}

/* Decorative Glowing Icon Badge */
.quote-v1 > div:first-child::before {
    content: "\f1d8" !important; /* fa-paper-plane / compass star */
    font-family: FontAwesome !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    line-height: 44px !important;
    text-align: center !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(8px) !important;
    color: #ffffff !important;
    font-size: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.quote-v1 span {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: -0.2px !important;
    line-height: 1.4 !important;
    display: block !important;
}

/* Button CTA Styling (.btn-transparent) */
.quote-v1 .btn-transparent {
    background: #ffffff !important;
    color: var(--w2a-primary-900) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 12px 26px !important;
    border-radius: var(--w2a-radius-full) !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition:
        transform var(--w2a-motion-fast),
        box-shadow var(--w2a-motion-fast),
        background-color var(--w2a-motion-fast) !important;
}

.quote-v1 .btn-transparent:hover,
.quote-v1 .btn-transparent:focus {
    background: #f8fafc !important;
    color: var(--w2a-primary-800) !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow:
        0 8px 24px rgba(255, 255, 255, 0.3),
        0 4px 16px rgba(0, 0, 0, 0.2) !important;
    text-decoration: none !important;
}

.quote-v1 .btn-transparent i.fa {
    font-size: 16px !important;
    color: var(--w2a-primary-600) !important;
    transition: transform var(--w2a-motion-fast) !important;
}

.quote-v1 .btn-transparent:hover i.fa {
    transform: translateX(-3px) translateY(-2px) !important;
}

/* Mobile Responsiveness for CTA Banner */
@media (max-width: 767px) {
    .quote-v1 {
        flex-direction: column !important;
        text-align: center !important;
        padding: 24px 20px !important;
    }
    .quote-v1 > div:first-child {
        flex-direction: column !important;
        text-align: center !important;
    }
    .quote-v1 .text-right {
        text-align: center !important;
        width: 100% !important;
    }
    .quote-v1 .btn-transparent {
        width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   3.10 BRAND NEW POLLS WIDGET UI/UX SECTION (.w2a_polls)
   -------------------------------------------------------------------------- */
.w2a_polls .portlet-body {
    padding: 20px !important;
}

.w2a-poll-title,
.w2a_polls #title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--w2a-ink-900) !important;
    margin-bottom: 16px !important;
    line-height: 1.5 !important;
    text-align: right !important;
}

.w2a-poll-title a,
.w2a_polls #title a {
    color: var(--w2a-ink-900) !important;
    text-decoration: none !important;
    transition: color var(--w2a-motion-fast) !important;
}

.w2a-poll-title a:hover,
.w2a_polls #title a:hover {
    color: var(--w2a-primary-600) !important;
}

ul.w2a-poll-options,
.w2a_polls ul.homecss {
    list-style: none !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

ul.w2a-poll-options li,
.w2a_polls ul.homecss li {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

label.w2a-poll-label,
.w2a_polls ul.homecss li a,
.w2a_polls ul.homecss li label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 10px 14px !important;
    border-radius: var(--w2a-radius-md) !important;
    background-color: var(--w2a-surface-subtle) !important;
    border: 1px solid var(--w2a-border) !important;
    color: var(--w2a-ink-800) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition:
        background-color var(--w2a-motion-fast),
        border-color var(--w2a-motion-fast),
        color var(--w2a-motion-fast),
        transform var(--w2a-motion-fast) !important;
    margin: 0 !important;
}

label.w2a-poll-label:hover,
.w2a_polls ul.homecss li label:hover {
    background-color: var(--w2a-primary-50) !important;
    border-color: var(--w2a-primary-500) !important;
    color: var(--w2a-primary-900) !important;
    transform: translateX(-2px) !important;
}

label.w2a-poll-label:has(input:checked),
.w2a_polls ul.homecss li label:has(input:checked) {
    background-color: var(--w2a-primary-100) !important;
    border-color: var(--w2a-primary-600) !important;
    color: var(--w2a-primary-900) !important;
    font-weight: 700 !important;
}

input.w2a-poll-radio,
.w2a_polls input[type="radio"] {
    accent-color: var(--w2a-primary-600) !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    cursor: pointer !important;
}

div.w2a-poll-action {
    margin-top: 14px !important;
    margin-bottom: 14px !important;
}

.w2a-poll-form {
    display: flex;
    height: 100%;
    flex-direction: column;
}

.w2a-poll-submit-btn,
.w2a_polls input.w2a_submit {
    width: 100% !important;
    height: 42px !important;
    background: linear-gradient(
        135deg,
        var(--w2a-primary-700),
        var(--w2a-primary-600)
    ) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    border: none !important;
    border-radius: var(--w2a-radius-full) !important;
    box-shadow: 0 4px 12px rgba(18, 86, 136, 0.25) !important;
    cursor: pointer !important;
    transition:
        transform var(--w2a-motion-fast),
        box-shadow var(--w2a-motion-fast),
        background var(--w2a-motion-fast) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.w2a-poll-submit-btn:hover,
.w2a_polls input.w2a_submit:hover {
    background: linear-gradient(
        135deg,
        var(--w2a-primary-800),
        var(--w2a-primary-700)
    ) !important;
    box-shadow: 0 6px 16px rgba(18, 86, 136, 0.35) !important;
    transform: translateY(-2px) !important;
}

div.w2a-poll-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--w2a-border) !important;
    font-size: 12px !important;
    color: var(--w2a-ink-500) !important;
    font-weight: 500 !important;
}

div.w2a-poll-meta span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background-color: var(--w2a-surface-alt) !important;
    padding: 4px 10px !important;
    border-radius: var(--w2a-radius-full) !important;
    border: 1px solid var(--w2a-border) !important;
}

div.w2a-poll-meta i.fa {
    color: var(--w2a-primary-600) !important;
    font-size: 12px !important;
}

/* --------------------------------------------------------------------------
   3.11 BRAND NEW SERVICE BOXES UI/UX SECTION (.service-box)
   -------------------------------------------------------------------------- */

.row.service-box:before {
    display: none !important;
}
.row.service-box:after {
    display: none !important;
}
.row.service-box {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    margin-bottom: 32px !important;
    row-gap: 32px !important;
}

.row.service-box.top-section-card {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    margin-bottom: 32px !important;
    row-gap: 32px !important;
}

.row.service-box.top-section-card .service-box-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background-color: var(--w2a-surface) !important;
    border-radius: var(--w2a-radius-lg) !important;
    border: 1px solid var(--w2a-border) !important;
    border-top: 3px solid var(--w2a-primary-600) !important;
    padding: 24px !important;
    box-shadow: var(--w2a-shadow-sm) !important;
    transition:
        transform var(--w2a-motion-normal),
        box-shadow var(--w2a-motion-normal),
        border-color var(--w2a-motion-normal) !important;
    height: 100% !important;
}

.row.service-box .portlet {
    height: 100% !important;
}

.row.service-box .portlet,
.row.service-box .portlet-body,
.row.service-box ul.homecss,
.row.service-box ul.vars,
.row.service-box .w2a-polls-wrap {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    width: 100% !important;
}

.row.service-box .mooore {
    margin-top: auto !important;
    padding-top: 8px !important;
}

@media (min-width: 768px) {
    .row.service-box.top-section-card > div.col-md-4,
    .row.service-box.top-section-card > div.col-sm-4 {
        flex: 1 1 calc(33.333% - 11px) !important;
        max-width: calc(33.333% - 11px) !important;
        width: calc(33.333% - 11px) !important;
        margin-bottom: 0 !important;
    }

    .row.service-box.top-section-card > div.col-md-6,
    .row.service-box.top-section-card > div.col-sm-6 {
        flex: 1 1 calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
        width: calc(50% - 8px) !important;
        margin-bottom: 0 !important;
    }
}

@media (max-width: 767px) {
    .row.service-box.top-section-card > div[class*="col-"] {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 0 !important;
    }
}

.row.service-box.top-section-card div.service-box-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--w2a-shadow-md) !important;
    border-color: var(--w2a-primary-500) !important;
}

.service-box-heading {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--w2a-border) !important;
}

.service-box-heading em {
    font-style: normal !important;
    display: inline-flex !important;
}

.service-box-heading em i.fa {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    line-height: 42px !important;
    text-align: center !important;
    border-radius: 50% !important;
    background-color: var(--w2a-primary-100) !important;
    color: var(--w2a-primary-600) !important;
    font-size: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(18, 86, 136, 0.12) !important;
}

.service-box-heading span {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--w2a-ink-900) !important;
}

.row.service-box.top-section-card p {
    font-size: 14px !important;
    line-height: 1.8 !important;
    color: var(--w2a-ink-800) !important;
    font-weight: 500 !important;
    margin: 0 !important;
    background-color: var(--w2a-surface-alt) !important;
    padding: 16px !important;
    border-radius: var(--w2a-radius-md) !important;
    border-right: 3px solid var(--w2a-primary-500) !important;
    flex: 1 !important;
}

/* --------------------------------------------------------------------------
   3.12 BRAND NEW NOW WATCHING MEDIA RAIL (.w2a-now-watching)
   -------------------------------------------------------------------------- */
.row.w2a-now-watching {
    background-color: var(--w2a-surface) !important;
    border-radius: var(--w2a-radius-lg) !important;
    border: 1px solid var(--w2a-border) !important;
    box-shadow: var(--w2a-shadow-md) !important;
    padding: 24px !important;
    align-items: center !important;
    gap: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

.w2a-now-watching-header {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-left: 20px !important;
    border-left: 1px solid var(--w2a-border) !important;
}

.w2a-now-watching-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
    border: 1px solid #fecaca !important;
    padding: 4px 12px !important;
    border-radius: var(--w2a-radius-full) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
    width: fit-content !important;
}

.w2a-live-dot {
    width: 8px !important;
    height: 8px !important;
    background-color: #dc2626 !important;
    border-radius: 50% !important;
    display: inline-block !important;
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7) !important;
    animation: w2a-pulse 1.8s infinite !important;
}

@keyframes w2a-pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(220, 38, 38, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
    }
}

.w2a-now-watching-header h2 {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--w2a-ink-900) !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
}

.w2a-now-watching-header p {
    font-size: 13px !important;
    color: var(--w2a-ink-500) !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
}

.w2a-rail-nav {
    margin-top: 12px !important;
    display: flex !important;
    gap: 10px !important;
}

.w2a-rail-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background-color: var(--w2a-surface-subtle) !important;
    border: 1px solid var(--w2a-border) !important;
    color: var(--w2a-ink-700) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition:
        background-color var(--w2a-motion-fast),
        color var(--w2a-motion-fast),
        border-color var(--w2a-motion-fast),
        transform var(--w2a-motion-fast) !important;
}

.w2a-rail-btn:hover {
    background-color: var(--w2a-primary-600) !important;
    color: #ffffff !important;
    border-color: var(--w2a-primary-600) !important;
    transform: scale(1.05) !important;
}

.w2a-now-watching-body {
    overflow: visible !important;
    min-width: 0 !important; /* Critical for Flexbox scroll container calculations! */
    width: 100% !important;
}

.w2a-now-watching-rail {
    display: flex !important;
    gap: 16px !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity !important;
    scroll-behavior: smooth !important;
    padding: 4px 2px 12px 2px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    cursor: grab !important;
}

.w2a-now-watching-rail.w2a-dragging {
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    cursor: grabbing !important;
    user-select: none !important;
}

.w2a-now-watching-rail::-webkit-scrollbar {
    display: none !important;
}

.w2a-watching-card {
    flex: 0 0 240px !important;
    min-width: 240px !important;
    scroll-snap-align: start !important;
    background-color: var(--w2a-surface) !important;
    border-radius: var(--w2a-radius-md) !important;
    border: 1px solid var(--w2a-border) !important;
    overflow: hidden !important;
    box-shadow: var(--w2a-shadow-xs) !important;
    transition:
        transform var(--w2a-motion-normal),
        box-shadow var(--w2a-motion-normal),
        border-color var(--w2a-motion-normal) !important;
}

.w2a-watching-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--w2a-shadow-md) !important;
    border-color: var(--w2a-primary-500) !important;
}

.w2a-watching-thumb-link,
.w2a-watching-thumb-wrap img {
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
    user-drag: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.w2a-watching-thumb-link {
    text-decoration: none !important;
    color: inherit !important;
    display: block !important;
}

.w2a-watching-thumb-wrap {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    padding-top: 56.25% !important;
    overflow: hidden !important;
    background-color: var(--w2a-ink-900) !important;
}

.w2a-watching-thumb-wrap img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform var(--w2a-motion-normal) !important;
}

.w2a-watching-card:hover .w2a-watching-thumb-wrap img {
    transform: scale(1.06) !important;
}

.w2a-watching-play-badge {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.9) !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(18, 86, 136, 0.85) !important;
    backdrop-filter: blur(4px) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    opacity: 0.9 !important;
    transition:
        transform var(--w2a-motion-fast),
        background var(--w2a-motion-fast),
        opacity var(--w2a-motion-fast) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.w2a-watching-card:hover .w2a-watching-play-badge {
    transform: translate(-50%, -50%) scale(1.1) !important;
    background: var(--w2a-primary-600) !important;
    opacity: 1 !important;
}

.w2a-watching-info {
    padding: 12px 14px !important;
}

.w2a-watching-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--w2a-ink-800) !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 38px !important;
    transition: color var(--w2a-motion-fast) !important;
}

.w2a-watching-card:hover .w2a-watching-title {
    color: var(--w2a-primary-600) !important;
}

@media (max-width: 991px) {
    .w2a-now-watching-header {
        border-left: none !important;
        border-bottom: 1px solid var(--w2a-border) !important;
        padding-left: 0 !important;
        padding-bottom: 16px !important;
        margin-bottom: 16px !important;
    }
}

@media (max-width: 480px) {
    .w2a-watching-card {
        flex: 0 0 200px !important;
        min-width: 200px !important;
    }
}

/* --------------------------------------------------------------------------
   3.13 BRAND NEW HOMECSS LIST CARDS UI/UX (ul.homecss)
   -------------------------------------------------------------------------- */
ul.homecss {
    list-style: none !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

ul.homecss > li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

ul.homecss a.w2a-homecss-item,
ul.homecss li a,
ul.homecss > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    background-color: var(--w2a-surface-subtle) !important;
    background-image: none !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-md) !important;
    color: var(--w2a-ink-900) !important;
    text-decoration: none !important;
    position: relative !important;
    height: auto !important;
    line-height: 1.4 !important;
    transition:
        background-color var(--w2a-motion-fast),
        border-color var(--w2a-motion-fast),
        box-shadow var(--w2a-motion-fast),
        transform var(--w2a-motion-fast) !important;
}

ul.homecss a.w2a-homecss-item:hover,
ul.homecss a.w2a-homecss-item:active,
ul.homecss a.w2a-homecss-item:focus,
ul.homecss a.w2a-homecss-item.w2a-hover-test,
ul.homecss li a:hover,
ul.homecss li a:active,
ul.homecss li a:focus,
ul.homecss li a.w2a-hover-test,
ul.homecss > li > a:hover,
ul.homecss > li > a.w2a-hover-test {
    background-color: #ffffff !important;
    background-image: none !important;
    border-color: var(--w2a-primary-500) !important;
    box-shadow: 0 4px 14px rgba(18, 86, 136, 0.12) !important;
    transform: translateX(-4px) !important;
}

div.w2a-homecss-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    background-color: var(--w2a-primary-100) !important;
    color: var(--w2a-primary-600) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    transition:
        transform var(--w2a-motion-fast),
        background-color var(--w2a-motion-fast),
        color var(--w2a-motion-fast) !important;
}

ul.homecss a.w2a-homecss-item:hover div.w2a-homecss-icon,
ul.homecss a.w2a-homecss-item.w2a-hover-test div.w2a-homecss-icon,
ul.homecss > li > a:hover div.w2a-homecss-icon,
ul.homecss > li > a.w2a-hover-test div.w2a-homecss-icon {
    background-color: var(--w2a-primary-600) !important;
    color: #ffffff !important;
    transform: scale(1.08) !important;
}

div.w2a-homecss-text {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

ul.homecss span.top_video {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--w2a-ink-900) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transition: color var(--w2a-motion-fast) !important;
}

ul.homecss a.w2a-homecss-item:hover span.top_video,
ul.homecss a.w2a-homecss-item.w2a-hover-test span.top_video,
ul.homecss > li > a:hover span.top_video,
ul.homecss > li > a.w2a-hover-test span.top_video {
    color: var(--w2a-primary-600) !important;
}

span.w2a-homecss-sub {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--w2a-ink-500) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    margin-top: 6px !important;
}

span.w2a-homecss-sub i.fa {
    font-size: 11px !important;
    color: var(--w2a-primary-500) !important;
}

span.w2a-homecss-arrow {
    font-size: 12px !important;
    color: var(--w2a-ink-400) !important;
    transition:
        transform var(--w2a-motion-fast),
        color var(--w2a-motion-fast) !important;
}

ul.homecss a.w2a-homecss-item:hover span.w2a-homecss-arrow,
ul.homecss a.w2a-homecss-item.w2a-hover-test span.w2a-homecss-arrow,
ul.homecss > li > a:hover span.w2a-homecss-arrow,
ul.homecss > li > a.w2a-hover-test span.w2a-homecss-arrow {
    color: var(--w2a-primary-600) !important;
    transform: translateX(-4px) !important;
}

/* Completely remove and disable any floating tooltip overlays */
ul.homecss .tooltip2,
a.tt2 .tooltip2,
.top2,
.bottom2,
.middle2 {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* --------------------------------------------------------------------------
   3.14 BRAND NEW HERO BANNER SLIDER UI/UX (.page-slider)
   -------------------------------------------------------------------------- */
.page-slider.container {
    margin-top: 32px !important;
    margin-bottom: 32px !important;
}

.w2a-hero-slider-wrap {
    position: relative !important;
    width: 100% !important;
    border-radius: var(--w2a-radius-lg) !important;
    border: 1px solid var(--w2a-border) !important;
    overflow: hidden !important;
    box-shadow: var(--w2a-shadow-md) !important;
    background-color: var(--w2a-ink-900) !important;
}

.w2a-hero-slider-track {
    position: relative !important;
    width: 100% !important;
    height: 400px !important;
    overflow: hidden !important;
}

@media (max-width: 991px) {
    .w2a-hero-slider-track {
        height: 300px !important;
    }
}

@media (max-width: 575px) {
    .w2a-hero-slider-track {
        height: 220px !important;
    }
}

.w2a-hero-slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition:
        opacity 0.6s ease-in-out,
        visibility 0.6s ease-in-out !important;
    z-index: 1 !important;
}

.w2a-hero-slide.active {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2 !important;
}

.w2a-hero-slide-link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    text-decoration: none !important;
}

.w2a-hero-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transition: transform 6s ease !important;
}

.w2a-hero-slide.active img {
    transform: scale(1.04) !important;
}

.w2a-hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
        0deg,
        rgba(15, 23, 42, 0.85) 0%,
        rgba(15, 23, 42, 0.35) 50%,
        rgba(15, 23, 42, 0.05) 100%
    ) !important;
    display: flex !important;
    align-items: flex-end !important;
    padding: 32px 40px !important;
}

@media (max-width: 575px) {
    .w2a-hero-overlay {
        padding: 16px 20px !important;
    }
}

.w2a-hero-caption {
    max-width: 650px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    color: #ffffff !important;
    transform: translateY(12px) !important;
    opacity: 0 !important;
    transition:
        transform 0.5s ease 0.2s,
        opacity 0.5s ease 0.2s !important;
}

.w2a-hero-slide.active .w2a-hero-caption {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

.w2a-hero-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(18, 86, 136, 0.85) !important;
    backdrop-filter: blur(4px) !important;
    color: #ffffff !important;
    padding: 4px 12px !important;
    border-radius: var(--w2a-radius-full) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    width: fit-content !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.w2a-hero-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

@media (max-width: 575px) {
    .w2a-hero-title {
        font-size: 16px !important;
    }
}

.w2a-hero-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background-color: var(--w2a-primary-600) !important;
    padding: 6px 16px !important;
    border-radius: var(--w2a-radius-full) !important;
    width: fit-content !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    transition:
        background-color var(--w2a-motion-fast),
        transform var(--w2a-motion-fast) !important;
}

.w2a-hero-slide-link:hover .w2a-hero-cta {
    background-color: var(--w2a-primary-700) !important;
    transform: translateX(-3px) !important;
}

/* Arrow Navigation */
.w2a-hero-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10 !important;
    font-size: 15px !important;
    transition:
        background var(--w2a-motion-fast),
        transform var(--w2a-motion-fast),
        opacity var(--w2a-motion-fast) !important;
    opacity: 0.85 !important;
}

.w2a-hero-prev {
    right: 16px !important;
}

.w2a-hero-next {
    left: 16px !important;
}

.w2a-hero-arrow:hover {
    background: var(--w2a-primary-600) !important;
    opacity: 1 !important;
}

/* Dots Indicators */
.w2a-hero-dots {
    position: absolute !important;
    bottom: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    z-index: 10 !important;
    background: rgba(15, 23, 42, 0.5) !important;
    backdrop-filter: blur(4px) !important;
    padding: 6px 12px !important;
    border-radius: var(--w2a-radius-full) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.w2a-hero-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.4) !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition:
        width 0.3s ease,
        background-color 0.3s ease,
        border-radius 0.3s ease !important;
}

.w2a-hero-dot.active {
    width: 22px !important;
    border-radius: 4px !important;
    background-color: var(--w2a-primary-500) !important;
}

/* --------------------------------------------------------------------------
   3.15 HEADER NAVIGATION OVERFLOW DROPDOWN & GLASSMORPHIC SEARCH MODAL
   -------------------------------------------------------------------------- */

/* Header Navigation Flex Layout & Single Line Lock */
.header-navigation {
    display: flex !important;
    align-items: center !important;
    max-width: 100% !important;
}

.header-navigation > ul {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.header-navigation > ul > li {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    position: relative !important;
}

/* Fix for dropdown menus disappearing before mouse cursor reaches them */
.header-navigation .dropdown-menu {
    margin-top: 0 !important;
    top: 100% !important;
}

/* Invisible hover bridge pseudo-element connecting menu item to dropdown */
.header-navigation li.dropdown:hover::after,
.header-navigation .dropdown:hover::after,
.header-navigation .w2a-more-menu:hover::after {
    content: "" !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    height: 20px !important;
    display: block !important;
    z-index: 9999 !important;
}

/* "More / ..." Dropdown Item (.w2a-more-menu) */
.header-navigation > ul > li.w2a-more-menu {
    position: relative !important;
}

.header-navigation > ul > li.w2a-more-menu > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-weight: 700 !important;
    color: var(--w2a-primary-700) !important;
    background-color: var(--w2a-primary-50) !important;
    padding: 8px 14px !important;
    border-radius: var(--w2a-radius-md) !important;
    border: 1px solid var(--w2a-primary-200) !important;
    transition: all var(--w2a-motion-fast) !important;
}

.header-navigation > ul > li.w2a-more-menu:hover > a {
    background-color: var(--w2a-primary-600) !important;
    color: #ffffff !important;
    border-color: var(--w2a-primary-600) !important;
}

.header-navigation > ul > li.w2a-more-menu > ul.w2a-more-dropdown {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    min-width: 220px !important;
    background-color: #ffffff !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-md) !important;
    box-shadow: var(--w2a-shadow-lg) !important;
    padding: 8px 0 !important;
    margin-top: 6px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(10px) !important;
    transition: all var(--w2a-motion-fast) !important;
    z-index: 1000 !important;
}

.header-navigation > ul > li.w2a-more-menu:hover > ul.w2a-more-dropdown,
.header-navigation > ul > li.w2a-more-menu.open > ul.w2a-more-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.header-navigation > ul > li.w2a-more-menu > ul.w2a-more-dropdown > li > a {
    display: block !important;
    padding: 10px 18px !important;
    color: var(--w2a-ink-800) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition:
        background-color var(--w2a-motion-fast),
        color var(--w2a-motion-fast) !important;
}

.header-navigation
    > ul
    > li.w2a-more-menu
    > ul.w2a-more-dropdown
    > li
    > a:hover {
    background-color: var(--w2a-surface-subtle) !important;
    color: var(--w2a-primary-600) !important;
}

/* Glassmorphic Search Modal Container (.search-box) */
.header .menu-search {
    position: relative !important;
}

.header .w2a-search-trigger-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--w2a-primary-50) !important;
    border: 1px solid var(--w2a-primary-200) !important;
    color: var(--w2a-primary-700) !important;
    padding: 8px 16px !important;
    border-radius: var(--w2a-radius-full) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: all var(--w2a-motion-fast) !important;
}

.header .w2a-search-trigger-btn i.fa-search.search-btn {
    color: var(--w2a-primary-700) !important;
}

.header .w2a-search-trigger-btn:hover i.fa-search.search-btn {
    color: #ffffff !important;
}

.header .w2a-search-trigger-btn:hover {
    background: var(--w2a-primary-600) !important;
    color: #ffffff !important;
    border-color: var(--w2a-primary-600) !important;
    box-shadow: 0 4px 12px rgba(18, 86, 136, 0.2) !important;
}

.search-box[role="dialog"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease !important;
    padding: 24px !important;
    box-sizing: border-box !important;
}

.search-box[role="dialog"].w2a-modal-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Glassmorphic Search Modal Card (.w2a-search-modal-card) */
.w2a-search-modal-card {
    width: 100% !important;
    max-width: 680px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-radius: var(--w2a-radius-xl) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.35) !important;
    overflow: hidden !important;
    transform: scale(0.92) translateY(15px) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.search-box[role="dialog"].w2a-modal-open .w2a-search-modal-card {
    transform: scale(1) translateY(0) !important;
}

.w2a-search-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: linear-gradient(
        135deg,
        var(--w2a-primary-700) 0%,
        var(--w2a-primary-600) 100%
    ) !important;
    padding: 20px 24px !important;
    color: #ffffff !important;
}

.w2a-search-modal-title {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.w2a-search-modal-title i {
    font-size: 24px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.w2a-search-modal-title i.fa-search {
    color: #ffffff !important;
}

.header-navigation li.menu-search i {
    top: auto !important;
}

.header-navigation li.menu-search i.fa-search {
    color: #ffffff !important;
}

.w2a-search-modal-title h3 {
    margin: 0 !important;
    margin-bottom: 8px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
}

.w2a-search-modal-title p {
    margin: 2px 0 0 0 !important;
    font-size: 13px !important;
    opacity: 0.85 !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.w2a-search-close-btn {
    background: rgba(255, 255, 255, 0.15) !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 24px !important;
    height: 40px !important;
    width: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    line-height: 1 !important;
}

.w2a-search-close-btn:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}

.w2a-search-modal-body {
    padding: 24px !important;
}

.w2a-search-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
}

@media (max-width: 600px) {
    .w2a-search-grid {
        grid-template-columns: 1fr !important;
    }
}

.w2a-search-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.w2a-search-fullwidth {
    grid-column: 1 / -1 !important;
}

.w2a-search-field label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--w2a-ink-800) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
}

.w2a-search-field label i {
    color: var(--w2a-primary-600) !important;
}

.w2a-search-field .form-control {
    width: 100% !important;
    height: 44px !important;
    border-radius: var(--w2a-radius-md) !important;
    border: 1px solid var(--w2a-border) !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    background-color: var(--w2a-surface-subtle) !important;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease !important;
}

.w2a-search-field .form-control:focus {
    border-color: var(--w2a-primary-500) !important;
    box-shadow: 0 0 0 3px rgba(18, 86, 136, 0.15) !important;
    background-color: #ffffff !important;
}

.w2a-date-range {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.w2a-date-sep {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--w2a-ink-500) !important;
}

.w2a-search-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    margin-top: 20px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--w2a-border) !important;
}

.w2a-search-submit-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: var(--w2a-primary-600) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 10px 24px !important;
    border-radius: var(--w2a-radius-md) !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(18, 86, 136, 0.25) !important;
    transition:
        background 0.2s ease,
        transform 0.2s ease !important;
}

.w2a-search-submit-btn:hover {
    background: var(--w2a-primary-700) !important;
    transform: translateY(-1px) !important;
}

.w2a-search-cancel-btn {
    background: transparent !important;
    color: var(--w2a-ink-600) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 10px 18px !important;
    border-radius: var(--w2a-radius-md) !important;
    border: 1px solid var(--w2a-border) !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

.w2a-search-cancel-btn:hover {
    background: var(--w2a-surface-subtle) !important;
    color: var(--w2a-ink-900) !important;
}

/* --------------------------------------------------------------------------
   3.16 BRAND NEW BACK-TO-TOP BUTTON UI/UX (#topcontrol)
   -------------------------------------------------------------------------- */
#topcontrol {
    position: fixed !important;
    bottom: 28px !important;
    right: 28px !important;
    left: auto !important;
    top: auto !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: var(--w2a-radius-full) !important;
    background: rgba(18, 86, 136, 0.9) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.25) !important;
    cursor: pointer !important;
    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease !important;
}

#topcontrol img {
    display: none !important;
}

#topcontrol::before {
    content: "\f077" !important; /* FontAwesome fa-chevron-up */
    font-family: FontAwesome !important;
    font-size: 18px !important;
    color: #ffffff !important;
    line-height: 1 !important;
    transition: transform 0.2s ease !important;
}

#topcontrol:hover {
    background: var(--w2a-primary-600) !important;
    transform: translateY(-4px) scale(1.08) !important;
    box-shadow: 0 10px 28px rgba(18, 86, 136, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}

#topcontrol:hover::before {
    transform: translateY(-2px) !important;
}

@media (max-width: 575px) {
    #topcontrol {
        bottom: 20px !important;
        right: 20px !important;
        width: 42px !important;
        height: 42px !important;
    }
    #topcontrol::before {
        font-size: 16px !important;
    }
}

/* Laravel accessibility adaptations. */
.w2a-skip-link {
    position: fixed !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 100000 !important;
    padding: 10px 16px !important;
    border-radius: var(--w2a-radius-sm) !important;
    color: #ffffff !important;
    background: var(--w2a-primary-900) !important;
    transform: translateY(-150%) !important;
    transition: transform var(--w2a-motion-fast) !important;
}

.w2a-skip-link:focus {
    transform: translateY(0) !important;
}

button.mobi-toggler {
    border: 0 !important;
    background: transparent !important;
}

.w2a-search-label {
    display: block !important;
    margin-bottom: 7px !important;
    color: var(--w2a-ink-700) !important;
    font-weight: 700 !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* --------------------------------------------------------------------------
   3.17 BRAND NEW CATEGORY TREE VIEW UI/UX (.w2a-tree-container)
   -------------------------------------------------------------------------- */
.w2a-tree-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    background: var(--w2a-surface-subtle) !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-lg) !important;
    padding: 16px 20px !important;
    margin-bottom: 20px !important;
}

.w2a-tree-search-wrap {
    position: relative !important;
    flex: 1 1 300px !important;
    max-width: 420px !important;
}

.w2a-tree-search-icon {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--w2a-ink-400) !important;
    font-size: 15px !important;
    pointer-events: none !important;
}

.w2a-tree-search-input {
    width: 100% !important;
    height: 42px !important;
    padding: 0 40px 0 36px !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-md) !important;
    font-size: 14px !important;
    background-color: #ffffff !important;
    color: var(--w2a-ink-900) !important;
    transition:
        border-color var(--w2a-motion-fast),
        box-shadow var(--w2a-motion-fast) !important;
}

.w2a-tree-search-input:focus {
    border-color: var(--w2a-primary-500) !important;
    box-shadow: 0 0 0 3px rgba(18, 86, 136, 0.12) !important;
    outline: none !important;
}

.w2a-tree-search-clear {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    border: none !important;
    color: var(--w2a-ink-400) !important;
    cursor: pointer !important;
    font-size: 14px !important;
    padding: 4px !important;
}

.w2a-tree-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.w2a-tree-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background-color: #ffffff !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-md) !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--w2a-ink-700) !important;
    cursor: pointer !important;
    transition: all var(--w2a-motion-fast) !important;
}

.w2a-tree-btn:hover {
    background-color: var(--w2a-primary-50) !important;
    color: var(--w2a-primary-600) !important;
    border-color: var(--w2a-primary-300) !important;
}

.w2a-tree-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background-color: var(--w2a-primary-100) !important;
    color: var(--w2a-primary-700) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 6px 14px !important;
    border-radius: var(--w2a-radius-full) !important;
}

.w2a-tree-container {
    background-color: #ffffff !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-lg) !important;
    padding: 20px !important;
    box-shadow: var(--w2a-shadow-sm) !important;
}

.w2a-tree-root,
.w2a-tree-sub-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.w2a-tree-sub-list {
    padding-right: 24px !important;
    display: none;
    border-right: 2px dashed var(--w2a-primary-200) !important;
    margin-right: 14px !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

.w2a-tree-node.expanded > .w2a-tree-sub-list {
    display: block !important;
}

.w2a-tree-node {
    margin: 4px 0 !important;
    list-style: none !important;
}

.w2a-tree-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    border-radius: var(--w2a-radius-md) !important;
    transition: background-color var(--w2a-motion-fast) !important;
    background-color: transparent !important;
}

.w2a-tree-item:hover {
    background-color: var(--w2a-surface-subtle) !important;
}

.w2a-tree-toggle {
    background: none !important;
    border: none !important;
    padding: 4px 8px !important;
    cursor: pointer !important;
    color: var(--w2a-ink-500) !important;
    border-radius: var(--w2a-radius-sm) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color var(--w2a-motion-fast) !important;
}

.w2a-tree-toggle:hover {
    background-color: var(--w2a-primary-100) !important;
    color: var(--w2a-primary-600) !important;
}

.w2a-tree-arrow {
    transition: transform var(--w2a-motion-normal) ease !important;
    font-size: 12px !important;
}

.w2a-tree-node.expanded > .w2a-tree-item .w2a-tree-arrow {
    transform: rotate(-90deg) !important;
}

.w2a-tree-node.expanded > .w2a-tree-item .folder-icon:before {
    content: "\f07c" !important; /* fa-folder-open */
}

.w2a-tree-spacer {
    width: 24px !important;
    display: inline-block !important;
}

.w2a-tree-icon {
    font-size: 16px !important;
    color: var(--w2a-primary-500) !important;
}

.w2a-tree-icon.file-icon {
    color: var(--w2a-ink-400) !important;
}

.w2a-tree-link {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--w2a-ink-900) !important;
    text-decoration: none !important;
    transition: color var(--w2a-motion-fast) !important;
}

.w2a-tree-link:hover {
    color: var(--w2a-primary-600) !important;
    text-decoration: none !important;
}

.w2a-tree-sub-count {
    font-size: 11px !important;
    font-weight: 700 !important;
    background-color: var(--w2a-primary-50) !important;
    color: var(--w2a-primary-600) !important;
    border: 1px solid var(--w2a-primary-200) !important;
    padding: 2px 8px !important;
    border-radius: var(--w2a-radius-full) !important;
    margin-right: auto !important;
}

/* Tree Search Filter States */
.w2a-tree-node.search-hidden {
    display: none !important;
}

.w2a-tree-node.search-matched > .w2a-tree-item {
    background-color: #fef9c3 !important;
    border-radius: var(--w2a-radius-md) !important;
}

/* --------------------------------------------------------------------------
   3.18 BRAND NEW PREACHERS LIST & AUTHOR CARDS UI/UX (.w2a-preachers-wrap)
   -------------------------------------------------------------------------- */
.w2a-preachers-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    background: var(--w2a-surface-subtle) !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-lg) !important;
    padding: 16px 20px !important;
    margin-bottom: 24px !important;
}

.w2a-preachers-search-wrap {
    position: relative !important;
    flex: 1 1 300px !important;
    max-width: 420px !important;
}

.w2a-preachers-search-icon {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--w2a-ink-400) !important;
    font-size: 15px !important;
    pointer-events: none !important;
}

.w2a-preachers-search-input {
    width: 100% !important;
    height: 42px !important;
    padding: 0 40px 0 36px !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-md) !important;
    font-size: 14px !important;
    background-color: #ffffff !important;
    color: var(--w2a-ink-900) !important;
    transition:
        border-color var(--w2a-motion-fast),
        box-shadow var(--w2a-motion-fast) !important;
}

.w2a-preachers-search-input:focus {
    border-color: var(--w2a-primary-500) !important;
    box-shadow: 0 0 0 3px rgba(18, 86, 136, 0.12) !important;
    outline: none !important;
}

.w2a-preachers-search-clear {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    border: none !important;
    color: var(--w2a-ink-400) !important;
    cursor: pointer !important;
    font-size: 14px !important;
    padding: 4px !important;
}

.w2a-alphabet-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: center !important;
    padding: 14px 18px !important;
    background: #ffffff !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-lg) !important;
    margin-bottom: 28px !important;
    box-shadow: var(--w2a-shadow-xs) !important;
}

.w2a-alphabet-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 8px !important;
    border-radius: var(--w2a-radius-md) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--w2a-primary-700) !important;
    background-color: var(--w2a-surface-subtle) !important;
    border: 1px solid var(--w2a-border) !important;
    text-decoration: none !important;
    transition: all var(--w2a-motion-fast) !important;
}

.w2a-alphabet-link:hover,
.w2a-alphabet-link.active {
    background-color: var(--w2a-primary-600) !important;
    color: #ffffff !important;
    border-color: var(--w2a-primary-600) !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
}

.w2a-letter-section {
    margin-bottom: 36px !important;
}

.w2a-letter-section.search-hidden {
    display: none !important;
}

.w2a-letter-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding-bottom: 12px !important;
    margin-bottom: 20px !important;
    border-bottom: 2px solid var(--w2a-primary-100) !important;
}

.w2a-letter-badge {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: var(--w2a-primary-600) !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(18, 86, 136, 0.25) !important;
}

.w2a-letter-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--w2a-ink-900) !important;
    margin: 0 !important;
}

.w2a-preachers-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

@media (max-width: 991px) {
    .w2a-preachers-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575px) {
    .w2a-preachers-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

.w2a-preacher-card {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    background-color: #ffffff !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-lg) !important;
    padding: 16px !important;
    text-decoration: none !important;
    box-shadow: var(--w2a-shadow-sm) !important;
    transition: all var(--w2a-motion-normal) !important;
    position: relative !important;
}

.w2a-preacher-card.search-hidden {
    display: none !important;
}

.w2a-preacher-card:hover {
    transform: translateY(-3px) !important;
    border-color: var(--w2a-primary-500) !important;
    box-shadow: var(--w2a-shadow-md) !important;
    text-decoration: none !important;
}

.w2a-preacher-avatar-wrap {
    position: relative !important;
    flex-shrink: 0 !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 2px solid var(--w2a-primary-200) !important;
    background-color: var(--w2a-primary-50) !important;
}

.w2a-preacher-avatar {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.w2a-preacher-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.w2a-preacher-name {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--w2a-ink-900) !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: color var(--w2a-motion-fast) !important;
    line-height: 1.5 !important;
}

.w2a-preacher-card:hover .w2a-preacher-name {
    color: var(--w2a-primary-600) !important;
}

.w2a-preacher-count {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--w2a-primary-700) !important;
    background-color: var(--w2a-primary-50) !important;
    border: 1px solid var(--w2a-primary-200) !important;
    padding: 4px 10px !important;
    border-radius: var(--w2a-radius-full) !important;
    width: fit-content !important;
}

.w2a-preacher-arrow {
    color: var(--w2a-ink-400) !important;
    font-size: 14px !important;
    transition:
        transform var(--w2a-motion-fast),
        color var(--w2a-motion-fast) !important;
}

.w2a-preacher-card:hover .w2a-preacher-arrow {
    transform: translateX(-4px) !important;
    color: var(--w2a-primary-600) !important;
}

/* --------------------------------------------------------------------------
   3.19 BRAND NEW SATELLITE CHANNELS GRID & CARDS UI/UX (.w2a-channels-wrap)
   -------------------------------------------------------------------------- */
.w2a-channels-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    background: var(--w2a-surface-subtle) !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-lg) !important;
    padding: 16px 20px !important;
    margin-bottom: 24px !important;
}

.w2a-channels-search-wrap {
    position: relative !important;
    flex: 1 1 300px !important;
    max-width: 420px !important;
}

.w2a-channels-search-icon {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--w2a-ink-400) !important;
    font-size: 15px !important;
    pointer-events: none !important;
}

.w2a-channels-search-input {
    width: 100% !important;
    height: 42px !important;
    padding: 0 40px 0 36px !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-md) !important;
    font-size: 14px !important;
    background-color: #ffffff !important;
    color: var(--w2a-ink-900) !important;
    transition:
        border-color var(--w2a-motion-fast),
        box-shadow var(--w2a-motion-fast) !important;
}

.w2a-channels-search-input:focus {
    border-color: var(--w2a-primary-500) !important;
    box-shadow: 0 0 0 3px rgba(18, 86, 136, 0.12) !important;
    outline: none !important;
}

.w2a-channels-search-clear {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    border: none !important;
    color: var(--w2a-ink-400) !important;
    cursor: pointer !important;
    font-size: 14px !important;
    padding: 4px !important;
}

.w2a-channels-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
}

@media (max-width: 1199px) {
    .w2a-channels-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 767px) {
    .w2a-channels-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .w2a-channels-grid {
        grid-template-columns: 1fr !important;
    }
}

.w2a-channel-card {
    display: flex !important;
    flex-direction: column !important;
    background-color: #ffffff !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-lg) !important;
    overflow: hidden !important;
    text-decoration: none !important;
    box-shadow: var(--w2a-shadow-sm) !important;
    transition: all var(--w2a-motion-normal) !important;
}

.w2a-channel-card.search-hidden {
    display: none !important;
}

.w2a-channel-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--w2a-primary-500) !important;
    box-shadow: var(--w2a-shadow-md) !important;
    text-decoration: none !important;
}

.w2a-channel-logo-wrap {
    position: relative !important;
    width: 100% !important;
    height: 120px !important;
    background-color: var(--w2a-surface-subtle) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    border-bottom: 1px solid var(--w2a-border) !important;
}

.w2a-channel-logo {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    transition: transform var(--w2a-motion-fast) !important;
}

.w2a-channel-card:hover .w2a-channel-logo {
    transform: scale(1.06) !important;
}

.w2a-channel-body {
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    gap: 12px !important;
}

.w2a-channel-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
}

.w2a-channel-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--w2a-ink-900) !important;
    margin: 0 !important;
    transition: color var(--w2a-motion-fast) !important;
}

.w2a-channel-card:hover .w2a-channel-title {
    color: var(--w2a-primary-600) !important;
}

.w2a-channel-count-badge {
    font-size: 11px !important;
    font-weight: 700 !important;
    background-color: var(--w2a-primary-50) !important;
    color: var(--w2a-primary-700) !important;
    border: 1px solid var(--w2a-primary-200) !important;
    padding: 3px 8px !important;
    border-radius: var(--w2a-radius-full) !important;
    white-space: nowrap !important;
}

.w2a-channel-specs {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    background-color: var(--w2a-surface-subtle) !important;
    padding: 10px 12px !important;
    border-radius: var(--w2a-radius-md) !important;
    font-size: 12px !important;
    color: var(--w2a-ink-700) !important;
}

.w2a-channel-spec-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.w2a-channel-spec-label {
    font-weight: 600 !important;
    color: var(--w2a-ink-500) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.w2a-channel-spec-val {
    font-weight: 700 !important;
    color: var(--w2a-ink-900) !important;
}

.w2a-channel-cta {
    margin-top: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--w2a-primary-600) !important;
    background-color: var(--w2a-primary-50) !important;
    padding: 8px 12px !important;
    border-radius: var(--w2a-radius-md) !important;
    transition: all var(--w2a-motion-fast) !important;
}

.w2a-channel-card:hover .w2a-channel-cta {
    background-color: var(--w2a-primary-600) !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   3.20 BRAND NEW DATE ARCHIVE & HISTORY BROWSER UI/UX (.w2a-date-archive-wrap)
   -------------------------------------------------------------------------- */
.w2a-date-banner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    background: var(--w2a-surface-subtle) !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-lg) !important;
    padding: 20px 24px !important;
    margin-bottom: 24px !important;
    box-shadow: var(--w2a-shadow-xs) !important;
}

.w2a-date-banner-info {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.w2a-date-banner-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background-color: var(--w2a-primary-100) !important;
    color: var(--w2a-primary-600) !important;
    font-size: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(18, 86, 136, 0.15) !important;
}

.w2a-date-banner-text h2 {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--w2a-ink-900) !important;
    margin: 0 0 12px 0 !important;
}

.w2a-date-banner-text p {
    font-size: 13px !important;
    color: var(--w2a-ink-500) !important;
    margin: 0 !important;
}

.w2a-date-picker-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 4px 0 !important;
}

.w2a-date-picker-input {
    width: 100% !important;
    height: 42px !important;
    padding: 0 14px !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-md) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--w2a-ink-900) !important;
    background-color: var(--w2a-surface-subtle) !important;
    transition: all var(--w2a-motion-fast) !important;
}

.w2a-date-picker-input:focus {
    border-color: var(--w2a-primary-500) !important;
    box-shadow: 0 0 0 3px rgba(18, 86, 136, 0.12) !important;
    background-color: #ffffff !important;
    outline: none !important;
}

.w2a-date-picker-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    height: 42px !important;
    background: var(--w2a-primary-600) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    border-radius: var(--w2a-radius-md) !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(18, 86, 136, 0.25) !important;
    transition: all var(--w2a-motion-fast) !important;
}

.w2a-date-picker-submit:hover {
    background: var(--w2a-primary-700) !important;
    transform: translateY(-1px) !important;
}

.w2a-date-presets {
    display: flex !important;
    gap: 8px !important;
    margin-top: 4px !important;
}

.w2a-date-preset-btn {
    flex: 1 !important;
    text-align: center !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--w2a-primary-700) !important;
    background-color: var(--w2a-primary-50) !important;
    border: 1px solid var(--w2a-primary-200) !important;
    border-radius: var(--w2a-radius-sm) !important;
    text-decoration: none !important;
    transition: all var(--w2a-motion-fast) !important;
}

.w2a-date-preset-btn:hover {
    background-color: var(--w2a-primary-600) !important;
    color: #ffffff !important;
    border-color: var(--w2a-primary-600) !important;
    text-decoration: none !important;
}

/* Item List Stream Cards (.w2a-items-list-wrap) */
.w2a-items-list-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.w2a-item-card-row {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    background-color: #ffffff !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-lg) !important;
    padding: 16px 20px !important;
    box-shadow: var(--w2a-shadow-xs) !important;
    transition: all var(--w2a-motion-normal) !important;
}

.w2a-item-card-row:hover {
    transform: translateY(-2px) !important;
    border-color: var(--w2a-primary-500) !important;
    box-shadow: var(--w2a-shadow-md) !important;
}

.w2a-item-icon-badge {
    width: 44px !important;
    height: 44px !important;
    border-radius: var(--w2a-radius-md) !important;
    background-color: var(--w2a-primary-50) !important;
    color: var(--w2a-primary-600) !important;
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: all var(--w2a-motion-fast) !important;
}

.w2a-item-card-row:hover .w2a-item-icon-badge {
    background-color: var(--w2a-primary-600) !important;
    color: #ffffff !important;
}

.w2a-item-card-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.w2a-item-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: start !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}

.w2a-item-card-title {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--w2a-ink-900) !important;
    text-decoration: none !important;
    transition: color var(--w2a-motion-fast) !important;
    line-height: 1.4 !important;
}

.w2a-item-card-title:hover {
    color: var(--w2a-primary-600) !important;
    text-decoration: none !important;
}

.w2a-item-card-author {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--w2a-primary-700) !important;
    background-color: var(--w2a-primary-50) !important;
    border: 1px solid var(--w2a-primary-200) !important;
    padding: 4px 10px !important;
    border-radius: var(--w2a-radius-full) !important;
    text-decoration: none !important;
    transition: all var(--w2a-motion-fast) !important;
}

.w2a-item-card-author:hover {
    background-color: var(--w2a-primary-600) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.w2a-item-card-meta {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.w2a-meta-pill {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--w2a-ink-600) !important;
    background-color: var(--w2a-surface-subtle) !important;
    padding: 3px 10px !important;
    border-radius: var(--w2a-radius-sm) !important;
    text-decoration: none !important;
}

.w2a-meta-pill i {
    color: var(--w2a-primary-500) !important;
}

.w2a-item-action-btn {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--w2a-primary-600) !important;
    background-color: var(--w2a-primary-50) !important;
    padding: 8px 14px !important;
    border-radius: var(--w2a-radius-md) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: all var(--w2a-motion-fast) !important;
    flex-shrink: 0 !important;
}

.w2a-item-card-row:hover .w2a-item-action-btn {
    background-color: var(--w2a-primary-600) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Sidebar Top Items List (.w2a-top-item) */
.w2a-top-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--w2a-border) !important;
    margin: 0 !important;
}

.w2a-top-item-thumb-link {
    flex-shrink: 0 !important;
}

.w2a-top-item-thumb {
    width: 54px !important;
    height: 40px !important;
    object-fit: cover !important;
    border-radius: var(--w2a-radius-md) !important;
    border: 1px solid var(--w2a-border) !important;
    transition: transform var(--w2a-motion-fast) !important;
}

.w2a-top-item:hover .w2a-top-item-thumb {
    transform: scale(1.05) !important;
}

.w2a-top-item-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.w2a-top-item-title-link {
    text-decoration: none !important;
}

.w2a-top-item-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--w2a-ink-900) !important;
    margin: 0 !important;
    line-height: 1.7 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transition: color var(--w2a-motion-fast) !important;
}

.w2a-top-item:hover .w2a-top-item-title {
    color: var(--w2a-primary-600) !important;
}

.w2a-top-item-badge {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--w2a-primary-700) !important;
    background-color: var(--w2a-primary-50) !important;
    padding: 2px 8px !important;
    border-radius: var(--w2a-radius-full) !important;
    width: fit-content !important;
}

/* --------------------------------------------------------------------------
   3.21 BRAND NEW QURAN RECITERS LIST UI/UX (.w2a-reciters-wrap)
   -------------------------------------------------------------------------- */
.w2a-reciters-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    background: var(--w2a-surface-subtle) !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-lg) !important;
    padding: 16px 20px !important;
    margin-bottom: 20px !important;
}

.w2a-reciters-search-wrap {
    position: relative !important;
    flex: 1 1 300px !important;
    max-width: 420px !important;
}

.w2a-reciters-search-icon {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--w2a-ink-400) !important;
    font-size: 15px !important;
    pointer-events: none !important;
}

.w2a-reciters-search-input {
    width: 100% !important;
    height: 42px !important;
    padding: 0 40px 0 36px !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-md) !important;
    font-size: 14px !important;
    background-color: #ffffff !important;
    color: var(--w2a-ink-900) !important;
    transition:
        border-color var(--w2a-motion-fast),
        box-shadow var(--w2a-motion-fast) !important;
}

.w2a-reciters-search-input:focus {
    border-color: var(--w2a-primary-500) !important;
    box-shadow: 0 0 0 3px rgba(18, 86, 136, 0.12) !important;
    outline: none !important;
}

.w2a-reciters-search-clear {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    border: none !important;
    color: var(--w2a-ink-400) !important;
    cursor: pointer !important;
    font-size: 14px !important;
    padding: 4px !important;
}

.w2a-reciters-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}

@media (max-width: 991px) {
    .w2a-reciters-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 575px) {
    .w2a-reciters-grid {
        grid-template-columns: 1fr !important;
    }
}

.w2a-reciter-card {
    display: flex !important;
    flex-direction: column !important;
    background-color: #ffffff !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-lg) !important;
    padding: 20px !important;
    text-decoration: none !important;
    box-shadow: var(--w2a-shadow-sm) !important;
    transition: all var(--w2a-motion-normal) !important;
    position: relative !important;
}

.w2a-reciter-card.search-hidden {
    display: none !important;
}

.w2a-reciter-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--w2a-primary-500) !important;
    box-shadow: var(--w2a-shadow-md) !important;
    text-decoration: none !important;
}

.w2a-reciter-card-top {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 14px !important;
}

.w2a-reciter-avatar-wrap {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    background: var(--w2a-primary-50) !important;
    border: 2px solid var(--w2a-primary-200) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    transition: transform var(--w2a-motion-fast) !important;
}

.w2a-reciter-card:hover .w2a-reciter-avatar-wrap {
    transform: scale(1.05) !important;
    border-color: var(--w2a-primary-500) !important;
}

.w2a-reciter-avatar {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.w2a-reciter-info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.w2a-reciter-name {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--w2a-ink-900) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    transition: color var(--w2a-motion-fast) !important;
}

.w2a-reciter-card:hover .w2a-reciter-name {
    color: var(--w2a-primary-600) !important;
}

.w2a-reciter-count-badge {
    font-size: 11px !important;
    font-weight: 700 !important;
    background-color: var(--w2a-primary-50) !important;
    color: var(--w2a-primary-700) !important;
    border: 1px solid var(--w2a-primary-200) !important;
    padding: 3px 10px !important;
    border-radius: var(--w2a-radius-full) !important;
    width: fit-content !important;
}

.w2a-reciter-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background-color: var(--w2a-surface-subtle) !important;
    padding: 10px 14px !important;
    border-radius: var(--w2a-radius-md) !important;
    margin-bottom: 12px !important;
    font-size: 12px !important;
}

.w2a-reciter-meta-item {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: var(--w2a-ink-600) !important;
    font-weight: 600 !important;
}

.w2a-reciter-meta-item i {
    color: var(--w2a-primary-500) !important;
}

.w2a-reciter-comment {
    font-size: 12px !important;
    color: var(--w2a-ink-500) !important;
    line-height: 1.5 !important;
    margin-bottom: 14px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.w2a-reciter-cta {
    margin-top: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--w2a-primary-600) !important;
    background-color: var(--w2a-primary-50) !important;
    padding: 8px 14px !important;
    border-radius: var(--w2a-radius-md) !important;
    transition: all var(--w2a-motion-fast) !important;
}

.w2a-reciter-card:hover .w2a-reciter-cta {
    background-color: var(--w2a-primary-600) !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   3.22 BRAND NEW ANASHEED & MULTIMEDIA GROUP UI/UX (.w2a-anasheed-wrap)
   -------------------------------------------------------------------------- */
/* Subgroups Cards Grid */
.w2a-subgroups-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}

@media (max-width: 991px) {
    .w2a-subgroups-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 575px) {
    .w2a-subgroups-grid {
        grid-template-columns: 1fr !important;
    }
}

.w2a-subgroup-card {
    display: flex !important;
    flex-direction: column !important;
    background-color: #ffffff !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-lg) !important;
    padding: 18px !important;
    text-decoration: none !important;
    box-shadow: var(--w2a-shadow-sm) !important;
    transition: all var(--w2a-motion-normal) !important;
}

.w2a-subgroup-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--w2a-primary-500) !important;
    box-shadow: var(--w2a-shadow-md) !important;
    text-decoration: none !important;
}

.w2a-subgroup-card-top {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 12px !important;
}

.w2a-subgroup-icon-wrap {
    width: 48px !important;
    height: 48px !important;
    border-radius: var(--w2a-radius-md) !important;
    background: var(--w2a-primary-50) !important;
    color: var(--w2a-primary-600) !important;
    font-size: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: all var(--w2a-motion-fast) !important;
}

.w2a-subgroup-card:hover .w2a-subgroup-icon-wrap {
    background: var(--w2a-primary-600) !important;
    color: #ffffff !important;
}

.w2a-subgroup-info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.w2a-subgroup-title {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--w2a-ink-900) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    transition: color var(--w2a-motion-fast) !important;
}

.w2a-subgroup-card:hover .w2a-subgroup-title {
    color: var(--w2a-primary-600) !important;
}

.w2a-subgroup-count {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--w2a-primary-700) !important;
    background-color: var(--w2a-primary-50) !important;
    padding: 2px 8px !important;
    border-radius: var(--w2a-radius-full) !important;
    width: fit-content !important;
}

/* Bulk Series Download Banner */
.w2a-series-download-banner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    background: var(--w2a-surface-subtle) !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-lg) !important;
    padding: 18px 22px !important;
    margin-bottom: 24px !important;
}

.w2a-series-download-info {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex: 1 1 300px !important;
}

.w2a-series-download-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    background-color: var(--w2a-primary-100) !important;
    color: var(--w2a-primary-600) !important;
    font-size: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.w2a-series-download-text h4 {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--w2a-ink-900) !important;
    margin: 0 0 4px 0 !important;
}

.w2a-series-download-text p {
    font-size: 12px !important;
    color: var(--w2a-ink-500) !important;
    margin: 0 !important;
}

.w2a-series-download-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.w2a-series-download-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background-color: var(--w2a-primary-600) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 10px 18px !important;
    border-radius: var(--w2a-radius-md) !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(18, 86, 136, 0.25) !important;
    transition: all var(--w2a-motion-fast) !important;
}

.w2a-series-download-btn:hover {
    background-color: var(--w2a-primary-700) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    text-decoration: none !important;
}

/* Media Items Cards Grid */
.w2a-media-items-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
}

@media (max-width: 1199px) {
    .w2a-media-items-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 767px) {
    .w2a-media-items-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .w2a-media-items-grid {
        grid-template-columns: 1fr !important;
    }
}

.w2a-media-item-card {
    display: flex !important;
    flex-direction: column !important;
    background-color: #ffffff !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-lg) !important;
    overflow: hidden !important;
    text-decoration: none !important;
    box-shadow: var(--w2a-shadow-sm) !important;
    transition: all var(--w2a-motion-normal) !important;
}

.w2a-media-item-card.search-hidden {
    display: none !important;
}

.w2a-media-item-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--w2a-primary-500) !important;
    box-shadow: var(--w2a-shadow-md) !important;
    text-decoration: none !important;
}

.w2a-media-thumb-wrap {
    position: relative !important;
    width: 100% !important;
    height: 130px !important;
    background-color: var(--w2a-surface-subtle) !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.w2a-media-thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform var(--w2a-motion-fast) !important;
}

.w2a-media-item-card:hover .w2a-media-thumb {
    transform: scale(1.06) !important;
}

.w2a-media-play-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(18, 86, 136, 0.4) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: opacity var(--w2a-motion-fast) !important;
}

.w2a-media-item-card:hover .w2a-media-play-overlay {
    opacity: 1 !important;
}

.w2a-media-play-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    color: var(--w2a-primary-600) !important;
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    transform: scale(0.8) !important;
    transition: transform var(--w2a-motion-fast) !important;
}

.w2a-media-item-card:hover .w2a-media-play-icon {
    transform: scale(1) !important;
}

.w2a-media-item-body {
    padding: 14px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    gap: 10px !important;
}

.w2a-media-item-title {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--w2a-ink-900) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transition: color var(--w2a-motion-fast) !important;
}

.w2a-media-item-card:hover .w2a-media-item-title {
    color: var(--w2a-primary-600) !important;
}

.w2a-media-item-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 12px !important;
    color: var(--w2a-ink-500) !important;
    margin-top: auto !important;
}

.w2a-media-item-hits {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-weight: 600 !important;
}

.w2a-media-item-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--w2a-primary-600) !important;
    background-color: var(--w2a-primary-50) !important;
    padding: 7px 12px !important;
    border-radius: var(--w2a-radius-md) !important;
    transition: all var(--w2a-motion-fast) !important;
}

.w2a-media-item-card:hover .w2a-media-item-cta {
    background-color: var(--w2a-primary-600) !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   3.23 BRAND NEW ONLINE RADIO STATION UI/UX (.w2a-radio-wrap)
   -------------------------------------------------------------------------- */
.w2a-radio-banner {
    background: linear-gradient(
        135deg,
        var(--w2a-primary-900) 0%,
        var(--w2a-primary-700) 100%
    ) !important;
    color: #ffffff !important;
    border-radius: var(--w2a-radius-lg) !important;
    padding: 24px 28px !important;
    margin-bottom: 24px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: var(--w2a-shadow-md) !important;
}

.w2a-radio-banner-content {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}

.w2a-radio-status-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(8px) !important;
    padding: 6px 14px !important;
    border-radius: var(--w2a-radius-full) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

.w2a-radio-pulse {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background-color: #10b981 !important;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7) !important;
    animation: w2aPulse 2s infinite !important;
}

@keyframes w2aPulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

.w2a-radio-card {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%) !important;
    border-radius: var(--w2a-radius-xl) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 28px !important;
    margin-bottom: 24px !important;
    box-shadow: var(--w2a-shadow-xl) !important;
    color: #ffffff !important;
    position: relative !important;
}

#w2a_radio .player {
    background: none !important;
    height: auto !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.w2a-radio-player-top {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
}

.w2a-radio-disc-wrap {
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, #334155 0%, #0f172a 100%) !important;
    border: 3px solid rgba(255, 255, 255, 0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4) !important;
}

.w2a-radio-disc-icon {
    font-size: 28px !important;
    color: var(--w2a-primary-400) !important;
}

.w2a-radio-track-info {
    flex: 1 !important;
    overflow: hidden !important;
}

.artist-wrapper {
    display: flex;
    justify-content: flex-start;
    direction: rtl;
}

#w2a_radio .title {
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    height: auto !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.3 !important;
    text-align: right !important;
}

#w2a_radio .artist {
    color: #f59e0b !important;
    background: #263a5d !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    text-align: right !important;
    padding: 4px 12px !important;
    border-radius: var(--w2a-radius-full) !important;
}

.page-bar .page-breadcrumb li:first-child i:first-child {
    display: inline-block;
    margin-inline-end: 4px;
}

/* Tracker & Timer */
.w2a-radio-tracker-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    padding: 12px 18px !important;
    border-radius: var(--w2a-radius-md) !important;
}

#w2a_radio .tracker {
    flex: 1 !important;
    height: 8px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: none !important;
    border-radius: var(--w2a-radius-full) !important;
    cursor: pointer !important;
}

#w2a_radio .tracker .ui-slider-range {
    background: linear-gradient(
        90deg,
        var(--w2a-primary-500),
        #38bdf8
    ) !important;
    border-radius: var(--w2a-radius-full) !important;
}

#w2a_radio .tracker .ui-slider-handle {
    width: 16px !important;
    height: 16px !important;
    top: -4px !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    border: 2px solid var(--w2a-primary-500) !important;
    outline: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

#w2a_radio .player-timer {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    font-family: monospace !important;
    white-space: nowrap !important;
}

/* Controls & Volume */
.w2a-radio-controls-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
}

#w2a_radio .controls {
    height: auto !important;
    width: auto !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

#w2a_radio .controls .play,
#w2a_radio .controls .pause,
#w2a_radio .controls .rew,
#w2a_radio .controls .fwd {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 18px !important;
    transition: all var(--w2a-motion-fast) !important;
    cursor: pointer !important;
}

#w2a_radio .controls .play:hover,
#w2a_radio .controls .pause:hover,
#w2a_radio .controls .rew:hover,
#w2a_radio .controls .fwd:hover {
    background: var(--w2a-primary-500) !important;
    transform: scale(1.08) !important;
}

#w2a_radio .controls .play::before {
    content: "\f04b";
    font-family: FontAwesome;
}
#w2a_radio .controls .pause::before {
    content: "\f04c";
    font-family: FontAwesome;
}
#w2a_radio .controls .rew::before {
    content: "\f04a";
    font-family: FontAwesome;
}
#w2a_radio .controls .fwd::before {
    content: "\f04e";
    font-family: FontAwesome;
}

#w2a_radio .volume-cont {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 180px !important;
}

#w2a_radio .vol-icon {
    width: 24px !important;
    height: 24px !important;
    color: #94a3b8 !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: none !important;
}

#w2a_radio .vol-icon::before {
    content: "\f028";
    font-family: FontAwesome;
}

#w2a_radio .volume {
    flex: 1 !important;
    height: 6px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: none !important;
    border-radius: var(--w2a-radius-full) !important;
}

#w2a_radio .volume .ui-slider-range {
    background: #38bdf8 !important;
    border-radius: var(--w2a-radius-full) !important;
}

#w2a_radio .volume .ui-slider-handle {
    width: 12px !important;
    height: 12px !important;
    top: -3px !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    border: none !important;
}

/* Playlist Container & Search Toolbar */
.w2a-playlist-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.w2a-playlist-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    background-color: var(--w2a-surface-subtle) !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-md) !important;
    padding: 10px 14px !important;
}

.w2a-playlist-search-wrap {
    position: relative !important;
    flex: 1 !important;
}

.w2a-playlist-search-icon {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--w2a-ink-400) !important;
    font-size: 13px !important;
    pointer-events: none !important;
}

.w2a-playlist-search-input {
    width: 100% !important;
    height: 36px !important;
    padding: 0 34px 0 30px !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-md) !important;
    font-size: 13px !important;
    background-color: #ffffff !important;
    color: var(--w2a-ink-900) !important;
    transition: border-color var(--w2a-motion-fast) !important;
}

.w2a-playlist-search-input:focus {
    border-color: var(--w2a-primary-500) !important;
    outline: none !important;
}

.w2a-playlist-search-clear {
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    border: none !important;
    color: var(--w2a-ink-400) !important;
    cursor: pointer !important;
    font-size: 13px !important;
}

.w2a-playlist-count {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--w2a-primary-700) !important;
    background-color: var(--w2a-primary-50) !important;
    padding: 4px 10px !important;
    border-radius: var(--w2a-radius-full) !important;
    white-space: nowrap !important;
}

/* Redesigned ul.playlist */
#w2a_radio ul.playlist {
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

/* Custom Scrollbar for Playlist */
#w2a_radio ul.playlist::-webkit-scrollbar {
    width: 6px !important;
}

#w2a_radio ul.playlist::-webkit-scrollbar-track {
    background: var(--w2a-surface-subtle) !important;
    border-radius: var(--w2a-radius-full) !important;
}

#w2a_radio ul.playlist::-webkit-scrollbar-thumb {
    background: var(--w2a-border-dark) !important;
    border-radius: var(--w2a-radius-full) !important;
}

#w2a_radio ul.playlist::-webkit-scrollbar-thumb:hover {
    background: var(--w2a-primary-400) !important;
}

#w2a_radio ul.playlist li {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background-color: #ffffff !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-lg) !important;
    padding: 12px 16px !important;
    cursor: pointer !important;
    transition: all var(--w2a-motion-normal) !important;
    box-shadow: var(--w2a-shadow-sm) !important;
    position: relative !important;
    height: auto;
}

#w2a_radio ul.playlist li.search-hidden {
    display: none !important;
}

#w2a_radio ul.playlist li:hover {
    transform: translateX(-4px) !important;
    border-color: var(--w2a-primary-300) !important;
    box-shadow: var(--w2a-shadow-md) !important;
    background-color: var(--w2a-primary-50) !important;
}

.w2a-pl-item-left {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex: 1 !important;
    overflow: hidden !important;
}

.w2a-pl-num {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background-color: var(--w2a-surface-subtle) !important;
    color: var(--w2a-ink-600) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.w2a-pl-playing-icon {
    display: none !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.w2a-pl-details {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    overflow: hidden !important;
}

.w2a-pl-title {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--w2a-ink-900) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: color var(--w2a-motion-fast) !important;
}

.w2a-pl-author {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--w2a-ink-500) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.w2a-pl-action {
    flex-shrink: 0 !important;
    margin-right: 12px !important;
}

.w2a-pl-play-btn {
    font-size: 22px !important;
    color: var(--w2a-primary-500) !important;
    transition:
        transform var(--w2a-motion-fast),
        color var(--w2a-motion-fast) !important;
}

#w2a_radio ul.playlist li:hover .w2a-pl-play-btn {
    transform: scale(1.15) !important;
    color: var(--w2a-primary-600) !important;
}

/* Active Item State */
#w2a_radio ul.playlist li.active {
    background: linear-gradient(
        135deg,
        var(--w2a-primary-700) 0%,
        var(--w2a-primary-900) 100%
    ) !important;
    border-color: var(--w2a-primary-700) !important;
    box-shadow: 0 6px 16px rgba(18, 86, 136, 0.3) !important;
    color: #ffffff !important;
}

#w2a_radio ul.playlist li.active .w2a-pl-num {
    display: none !important;
}

#w2a_radio ul.playlist li.active .w2a-pl-playing-icon {
    display: flex !important;
    animation: w2aPulse 2s infinite !important;
}

#w2a_radio ul.playlist li.active .w2a-pl-title {
    color: #ffffff !important;
}

#w2a_radio ul.playlist li.active .w2a-pl-author {
    color: #f59e0b !important;
}

#w2a_radio ul.playlist li.active .w2a-pl-play-btn {
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   3.24 BRAND NEW DAWAH GALLERY ALBUMS UI/UX (.w2a-gallery-wrap)
   -------------------------------------------------------------------------- */
.w2a-gallery-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    background: var(--w2a-surface-subtle) !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-lg) !important;
    padding: 16px 20px !important;
    margin-bottom: 24px !important;
}

.w2a-gallery-search-wrap {
    position: relative !important;
    flex: 1 1 300px !important;
    max-width: 420px !important;
}

.w2a-gallery-search-icon {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--w2a-ink-400) !important;
    font-size: 15px !important;
    pointer-events: none !important;
}

.w2a-gallery-search-input {
    width: 100% !important;
    height: 42px !important;
    padding: 0 40px 0 36px !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-md) !important;
    font-size: 14px !important;
    background-color: #ffffff !important;
    color: var(--w2a-ink-900) !important;
    transition:
        border-color var(--w2a-motion-fast),
        box-shadow var(--w2a-motion-fast) !important;
}

.w2a-gallery-search-input:focus {
    border-color: var(--w2a-primary-500) !important;
    box-shadow: 0 0 0 3px rgba(18, 86, 136, 0.12) !important;
    outline: none !important;
}

.w2a-gallery-search-clear {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    border: none !important;
    color: var(--w2a-ink-400) !important;
    cursor: pointer !important;
    font-size: 14px !important;
    padding: 4px !important;
}

/* Albums Grid */
.w2a-albums-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
}

@media (max-width: 991px) {
    .w2a-albums-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 575px) {
    .w2a-albums-grid {
        grid-template-columns: 1fr !important;
    }
}

.w2a-album-card {
    display: flex !important;
    flex-direction: column !important;
    background-color: #ffffff !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-lg) !important;
    overflow: hidden !important;
    box-shadow: var(--w2a-shadow-sm) !important;
    transition: all var(--w2a-motion-normal) !important;
    text-decoration: none !important;
}

.w2a-album-card.search-hidden {
    display: none !important;
}

.w2a-album-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--w2a-primary-500) !important;
    box-shadow: var(--w2a-shadow-md) !important;
    text-decoration: none !important;
}

.w2a-album-cover-wrap {
    position: relative !important;
    width: 100% !important;
    height: 200px !important;
    background-color: var(--w2a-surface-subtle) !important;
    overflow: hidden !important;
}

.w2a-album-cover {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform var(--w2a-motion-fast) !important;
}

.w2a-album-card:hover .w2a-album-cover {
    transform: scale(1.06) !important;
}

.w2a-album-count-badge {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    background: rgba(15, 23, 42, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: var(--w2a-radius-full) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.w2a-album-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(18, 86, 136, 0.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: opacity var(--w2a-motion-fast) !important;
}

.w2a-album-card:hover .w2a-album-overlay {
    opacity: 1 !important;
}

.w2a-album-overlay-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    color: var(--w2a-primary-600) !important;
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    transform: scale(0.8) !important;
    transition: transform var(--w2a-motion-fast) !important;
}

.w2a-album-card:hover .w2a-album-overlay-icon {
    transform: scale(1) !important;
}

.w2a-album-body {
    padding: 16px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    gap: 10px !important;
}

.w2a-album-card-title {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--w2a-ink-900) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transition: color var(--w2a-motion-fast) !important;
}

.w2a-album-card:hover .w2a-album-card-title {
    color: var(--w2a-primary-600) !important;
}

.w2a-album-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 12px !important;
    color: var(--w2a-ink-500) !important;
    margin-top: auto !important;
}

.w2a-album-date {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-weight: 600 !important;
}

.w2a-album-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 6px !important;
}

.w2a-album-btn-view {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--w2a-primary-600) !important;
    background-color: var(--w2a-primary-50) !important;
    padding: 8px 12px !important;
    border-radius: var(--w2a-radius-md) !important;
    transition: all var(--w2a-motion-fast) !important;
    text-decoration: none !important;
}

.w2a-album-card:hover .w2a-album-btn-view {
    background-color: var(--w2a-primary-600) !important;
    color: #ffffff !important;
}

.w2a-album-btn-download {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--w2a-success-700) !important;
    background-color: var(--w2a-success-50) !important;
    border: 1px solid var(--w2a-success-200) !important;
    padding: 8px 12px !important;
    border-radius: var(--w2a-radius-md) !important;
    transition: all var(--w2a-motion-fast) !important;
    text-decoration: none !important;
}

.w2a-album-btn-download:hover {
    background-color: var(--w2a-success-600) !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   3.25 BRAND NEW EXCLUSIVE SHOWS UI/UX (.w2a-exclusive-shows-wrap)
   -------------------------------------------------------------------------- */
.w2a-exclusive-shows-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
}

@media (max-width: 1199px) {
    .w2a-exclusive-shows-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 767px) {
    .w2a-exclusive-shows-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .w2a-exclusive-shows-grid {
        grid-template-columns: 1fr !important;
    }
}

.w2a-exclusive-card {
    display: flex !important;
    flex-direction: column !important;
    background-color: #ffffff !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-lg) !important;
    overflow: hidden !important;
    text-decoration: none !important;
    box-shadow: var(--w2a-shadow-sm) !important;
    transition: all var(--w2a-motion-normal) !important;
    position: relative !important;
}

.w2a-exclusive-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--w2a-primary-500) !important;
    box-shadow: var(--w2a-shadow-md) !important;
    text-decoration: none !important;
}

.w2a-exclusive-banner-wrap {
    position: relative !important;
    width: 100% !important;
    height: 160px !important;
    background: linear-gradient(
        135deg,
        var(--w2a-primary-900),
        var(--w2a-primary-700)
    ) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 16px !important;
}

.w2a-exclusive-banner-img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    transition: transform var(--w2a-motion-fast) !important;
}

.w2a-exclusive-card:hover .w2a-exclusive-banner-img {
    transform: scale(1.08) !important;
}

.w2a-exclusive-badge {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    background: rgba(18, 86, 136, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: var(--w2a-radius-full) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.w2a-exclusive-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(18, 86, 136, 0.4) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: opacity var(--w2a-motion-fast) !important;
}

.w2a-exclusive-card:hover .w2a-exclusive-overlay {
    opacity: 1 !important;
}

.w2a-exclusive-overlay-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    color: var(--w2a-primary-600) !important;
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    transform: scale(0.8) !important;
    transition: transform var(--w2a-motion-fast) !important;
}

.w2a-exclusive-card:hover .w2a-exclusive-overlay-icon {
    transform: scale(1) !important;
}

.w2a-exclusive-body {
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    gap: 10px !important;
}

.w2a-exclusive-title {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--w2a-ink-900) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    transition: color var(--w2a-motion-fast) !important;
    text-align: center !important;
}

.w2a-exclusive-card:hover .w2a-exclusive-title {
    color: var(--w2a-primary-600) !important;
}

.w2a-exclusive-cta {
    margin-top: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--w2a-primary-600) !important;
    background-color: var(--w2a-primary-50) !important;
    padding: 8px 14px !important;
    border-radius: var(--w2a-radius-md) !important;
    transition: all var(--w2a-motion-fast) !important;
}

.w2a-exclusive-card:hover .w2a-exclusive-cta {
    background-color: var(--w2a-primary-600) !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   3.26 BRAND NEW FEATURED ITEM, SERIES LIST & MEDIA ITEMS UI/UX
   -------------------------------------------------------------------------- */

/* 1. Featured Item Sidebar Card (.w2a-featured-item-card) */
.w2a-featured-item-card {
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-lg) !important;
    overflow: hidden !important;
    box-shadow: var(--w2a-shadow-sm) !important;
    transition: all var(--w2a-motion-normal) !important;
    margin-bottom: 20px !important;
}

.w2a-featured-item-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--w2a-shadow-md) !important;
    border-color: var(--w2a-primary-500) !important;
}

.w2a-featured-img-wrap {
    position: relative !important;
    width: 100% !important;
    height: 180px !important;
    background: linear-gradient(
        135deg,
        var(--w2a-primary-900),
        var(--w2a-primary-700)
    ) !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.w2a-featured-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform var(--w2a-motion-fast) !important;
}

.w2a-featured-item-card:hover .w2a-featured-img {
    transform: scale(1.06) !important;
}

.w2a-featured-badge {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    background: rgba(18, 86, 136, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: var(--w2a-radius-full) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.w2a-featured-body {
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.w2a-featured-author {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--w2a-primary-600) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.w2a-featured-title {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--w2a-ink-900) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    transition: color var(--w2a-motion-fast) !important;
}

.w2a-featured-title:hover {
    color: var(--w2a-primary-600) !important;
    text-decoration: none !important;
}

.w2a-featured-btn {
    margin-top: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--w2a-primary-600) !important;
    background-color: var(--w2a-primary-50) !important;
    padding: 8px 12px !important;
    border-radius: var(--w2a-radius-md) !important;
    text-decoration: none !important;
    transition: all var(--w2a-motion-fast) !important;
}

.w2a-featured-item-card:hover .w2a-featured-btn {
    background-color: var(--w2a-primary-600) !important;
    color: #ffffff !important;
}

/* 2. Series List Grid (.w2a-cat-series-grid) */
.w2a-cat-series-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    margin-bottom: 24px !important;
}

@media (max-width: 991px) {
    .w2a-cat-series-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 575px) {
    .w2a-cat-series-grid {
        grid-template-columns: 1fr !important;
    }
}

.w2a-cat-series-card {
    display: flex !important;
    flex-direction: column !important;
    background-color: #ffffff !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-lg) !important;
    overflow: hidden !important;
    box-shadow: var(--w2a-shadow-sm) !important;
    transition: all var(--w2a-motion-normal) !important;
    text-decoration: none !important;
}

.w2a-cat-series-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--w2a-primary-500) !important;
    box-shadow: var(--w2a-shadow-md) !important;
    text-decoration: none !important;
}

.w2a-cat-series-header {
    position: relative !important;
    height: 120px !important;
    background: linear-gradient(
        135deg,
        var(--w2a-primary-800),
        var(--w2a-primary-600)
    ) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
}

.w2a-cat-series-icon-wrap {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(8px) !important;
    color: #ffffff !important;
    font-size: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    transition: transform var(--w2a-motion-fast) !important;
}

.w2a-cat-series-card:hover .w2a-cat-series-icon-wrap {
    transform: scale(1.1) !important;
}

.w2a-cat-series-count {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    background: rgba(15, 23, 42, 0.75) !important;
    backdrop-filter: blur(6px) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: var(--w2a-radius-full) !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.w2a-cat-series-body {
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    gap: 8px !important;
}

.w2a-cat-series-title {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--w2a-ink-900) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transition: color var(--w2a-motion-fast) !important;
}

.w2a-cat-series-card:hover .w2a-cat-series-title {
    color: var(--w2a-primary-600) !important;
}

.w2a-cat-series-author {
    font-size: 12px !important;
    color: var(--w2a-primary-600) !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.w2a-cat-series-cta {
    margin-top: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--w2a-primary-600) !important;
    background-color: var(--w2a-primary-50) !important;
    padding: 8px 12px !important;
    border-radius: var(--w2a-radius-md) !important;
    transition: all var(--w2a-motion-fast) !important;
}

.w2a-cat-series-card:hover .w2a-cat-series-cta {
    background-color: var(--w2a-primary-600) !important;
    color: #ffffff !important;
}

/* 3. Media Items List Grid (.w2a-cat-items-wrap) */
.w2a-cat-items-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.w2a-cat-items-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    background: var(--w2a-surface-subtle) !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-lg) !important;
    padding: 12px 16px !important;
    margin-bottom: 16px !important;
}

.w2a-cat-items-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
}

@media (max-width: 767px) {
    .w2a-cat-items-grid {
        grid-template-columns: 1fr !important;
    }
}

.w2a-cat-media-card {
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-lg) !important;
    padding: 16px !important;
    box-shadow: var(--w2a-shadow-sm) !important;
    transition: all var(--w2a-motion-normal) !important;
    gap: 10px !important;
    text-decoration: none !important;
}

.w2a-cat-media-card.search-hidden {
    display: none !important;
}

.w2a-cat-media-card:hover {
    transform: translateY(-3px) !important;
    border-color: var(--w2a-primary-500) !important;
    box-shadow: var(--w2a-shadow-md) !important;
}

.w2a-cat-media-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
}

.w2a-cat-media-author {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--w2a-primary-600) !important;
    background-color: var(--w2a-primary-50) !important;
    padding: 3px 10px !important;
    border-radius: var(--w2a-radius-full) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.w2a-cat-media-title {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--w2a-ink-900) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    transition: color var(--w2a-motion-fast) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.w2a-cat-media-card:hover .w2a-cat-media-title {
    color: var(--w2a-primary-600) !important;
}

.w2a-cat-media-meta {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    font-size: 12px !important;
    color: var(--w2a-ink-500) !important;
    margin-top: auto !important;
    padding-top: 8px !important;
    border-top: 1px dashed var(--w2a-border) !important;
}

.w2a-cat-media-meta-item {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.w2a-cat-media-action {
    margin-right: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--w2a-primary-600) !important;
}

/* --------------------------------------------------------------------------
   3.27 RECORDED CHAT-ROOM CONTENT
   -------------------------------------------------------------------------- */

.w2a-chat-authors-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin: 12px 0 24px !important;
}

.w2a-chat-author-card {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 74px !important;
    padding: 12px 14px !important;
    color: inherit !important;
    background: var(--w2a-surface) !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-lg) !important;
    box-shadow: var(--w2a-shadow-sm) !important;
    text-decoration: none !important;
    transition:
        transform var(--w2a-motion-normal),
        box-shadow var(--w2a-motion-normal),
        border-color var(--w2a-motion-normal) !important;
}

.w2a-chat-author-card:hover,
.w2a-chat-author-card:focus-visible {
    transform: translateY(-2px) !important;
    border-color: var(--w2a-primary-300) !important;
    box-shadow: var(--w2a-shadow-md) !important;
}

.w2a-chat-author-card:focus-visible,
.w2a-chat-sidebar-item:focus-visible {
    outline: 3px solid var(--w2a-primary-300) !important;
    outline-offset: 2px !important;
}

.w2a-chat-author-avatar-wrap {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    overflow: hidden !important;
    border: 2px solid var(--w2a-primary-200) !important;
    border-radius: var(--w2a-radius-full) !important;
    box-shadow: var(--w2a-shadow-sm) !important;
}

.w2a-chat-author-avatar-wrap img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.w2a-chat-author-info {
    display: flex !important;
    min-width: 0 !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.w2a-chat-author-name {
    overflow: hidden !important;
    color: var(--w2a-ink-900) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.w2a-chat-author-card:hover .w2a-chat-author-name,
.w2a-chat-author-card:focus-visible .w2a-chat-author-name {
    color: var(--w2a-primary-600) !important;
}

.w2a-chat-author-count {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: var(--w2a-ink-500) !important;
    font-size: 12px !important;
}

.w2a-chat-sidebar-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 10px 0 20px !important;
    padding: 0 !important;
    list-style: none !important;
}

.w2a-chat-sidebar-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 48px !important;
    padding: 8px 10px !important;
    background: var(--w2a-surface) !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-md) !important;
    text-decoration: none !important;
    transition:
        transform var(--w2a-motion-normal),
        background-color var(--w2a-motion-normal),
        border-color var(--w2a-motion-normal) !important;
}

.w2a-chat-sidebar-item:hover,
.w2a-chat-sidebar-item:focus-visible {
    transform: translateX(-3px) !important;
    background: var(--w2a-surface-muted) !important;
    border-color: var(--w2a-primary-300) !important;
}

.w2a-chat-sidebar-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    color: var(--w2a-primary-600) !important;
    background: var(--w2a-primary-50) !important;
    border-radius: var(--w2a-radius-sm) !important;
    font-size: 14px !important;
}

.w2a-chat-sidebar-item:hover .w2a-chat-sidebar-icon,
.w2a-chat-sidebar-item:focus-visible .w2a-chat-sidebar-icon {
    color: #ffffff !important;
    background: var(--w2a-primary-600) !important;
}

.w2a-chat-sidebar-title {
    display: -webkit-box !important;
    overflow: hidden !important;
    color: var(--w2a-ink-800) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
}

.w2a-chat-sidebar-copy {
    display: flex !important;
    min-width: 0 !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.w2a-chat-sidebar-copy small {
    color: var(--w2a-ink-500) !important;
    font-size: 12px !important;
}

.w2a-chat-sidebar-item:hover .w2a-chat-sidebar-title,
.w2a-chat-sidebar-item:focus-visible .w2a-chat-sidebar-title {
    color: var(--w2a-primary-700) !important;
}

@media (max-width: 991px) {
    .w2a-chat-authors-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575px) {
    .w2a-chat-authors-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* --------------------------------------------------------------------------
   3.28 MEDIA DETAILS, ACTIONS, QUALITIES, AND PLAYER
   -------------------------------------------------------------------------- */

.w2a-item-details-card {
    margin-bottom: 24px !important;
    padding: 24px !important;
    background: var(--w2a-surface) !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-xl) !important;
    box-shadow: var(--w2a-shadow-md) !important;
}

.w2a-item-header {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 20px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid var(--w2a-border) !important;
}

.w2a-item-header-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px !important;
    color: #ffffff !important;
    background: linear-gradient(
        135deg,
        var(--w2a-primary-600),
        var(--w2a-primary-800)
    ) !important;
    border-radius: var(--w2a-radius-lg) !important;
    box-shadow: 0 6px 16px rgba(18, 86, 136, 0.25) !important;
    font-size: 22px !important;
}

.w2a-item-header-title {
    margin: 0 !important;
    color: var(--w2a-ink-900) !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
}

.w2a-item-desc-box {
    margin-bottom: 20px !important;
    padding: 14px 18px !important;
    color: var(--w2a-ink-700) !important;
    background: var(--w2a-surface-subtle) !important;
    border-right: 4px solid var(--w2a-primary-500) !important;
    border-radius: var(--w2a-radius-md) 0 0 var(--w2a-radius-md) !important;
    line-height: 1.8 !important;
}

.w2a-item-meta-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 14px !important;
    margin-bottom: 24px !important;
}

.w2a-meta-pill {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    padding: 12px 16px !important;
    background: var(--w2a-surface-alt) !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-lg) !important;
}

.w2a-meta-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    color: var(--w2a-primary-600) !important;
    background: var(--w2a-primary-50) !important;
    border-radius: var(--w2a-radius-md) !important;
}

.w2a-meta-info {
    display: flex !important;
    min-width: 0 !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.w2a-meta-label {
    color: var(--w2a-ink-500) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

.w2a-meta-value {
    overflow-wrap: anywhere !important;
    color: var(--w2a-ink-900) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

.w2a-item-actions-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
    gap: 12px !important;
}

.w2a-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 52px !important;
    gap: 8px !important;
    padding: 12px !important;
    border: 1px solid transparent !important;
    border-radius: var(--w2a-radius-lg) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition:
        transform var(--w2a-motion-normal),
        background-color var(--w2a-motion-normal),
        border-color var(--w2a-motion-normal),
        box-shadow var(--w2a-motion-normal) !important;
}

.w2a-action-btn:hover,
.w2a-action-btn:focus-visible {
    transform: translateY(-2px) !important;
}

.w2a-action-btn:focus-visible,
.w2a-quality-play-btn:focus-visible,
.w2a-quality-down-btn:focus-visible,
.w2a-player-close-btn:focus-visible {
    outline: 3px solid var(--w2a-primary-300) !important;
    outline-offset: 2px !important;
}

.w2a-action-play {
    color: #ffffff !important;
    background: linear-gradient(
        135deg,
        var(--w2a-primary-600),
        var(--w2a-primary-800)
    ) !important;
    box-shadow: 0 4px 14px rgba(18, 86, 136, 0.3) !important;
}

.w2a-action-download {
    color: var(--w2a-primary-700) !important;
    background: var(--w2a-surface-alt) !important;
    border-color: var(--w2a-primary-200) !important;
}

.w2a-action-pdf {
    color: #b91c1c !important;
    background: #fef2f2 !important;
    border-color: #fecaca !important;
}

.w2a-action-comment {
    color: #1d4ed8 !important;
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
}

.w2a-action-share {
    color: #6d28d9 !important;
    background: #f5f3ff !important;
    border-color: #ddd6fe !important;
}

.w2a-qualities-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.w2a-quality-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 16px 20px !important;
    background: var(--w2a-surface) !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-lg) !important;
    transition:
        transform var(--w2a-motion-normal),
        border-color var(--w2a-motion-normal),
        box-shadow var(--w2a-motion-normal) !important;
}

.w2a-quality-card:hover {
    transform: translateX(-4px) !important;
    border-color: var(--w2a-primary-400) !important;
    box-shadow: var(--w2a-shadow-md) !important;
}

.w2a-quality-meta {
    display: flex !important;
    align-items: center !important;
    min-width: 240px !important;
    flex: 1 1 320px !important;
    gap: 14px !important;
}

.w2a-quality-num {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    color: var(--w2a-primary-700) !important;
    background: var(--w2a-primary-100) !important;
    border-radius: var(--w2a-radius-full) !important;
    font-weight: 700 !important;
}

.w2a-quality-title-wrap {
    display: flex !important;
    min-width: 0 !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.w2a-quality-title {
    color: var(--w2a-ink-900) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.w2a-quality-badges,
.w2a-quality-actions {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.w2a-quality-badges {
    color: var(--w2a-ink-500) !important;
    font-size: 12px !important;
}

.w2a-quality-badge-fmt {
    padding: 2px 8px !important;
    color: var(--w2a-primary-700) !important;
    background: var(--w2a-surface-alt) !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-sm) !important;
    font-weight: 700 !important;
}

.w2a-quality-play-btn,
.w2a-quality-down-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    gap: 8px !important;
    padding: 9px 16px !important;
    border-radius: var(--w2a-radius-md) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.w2a-quality-play-btn {
    color: #ffffff !important;
    background: linear-gradient(
        135deg,
        var(--w2a-primary-600),
        var(--w2a-primary-700)
    ) !important;
    border: 0 !important;
}

.w2a-quality-down-btn {
    color: var(--w2a-ink-900) !important;
    background: var(--w2a-surface-alt) !important;
    border: 1px solid var(--w2a-border) !important;
}

#the_main_player {
    display: none;
    margin-bottom: 24px !important;
}

.w2a-player-panel {
    overflow: hidden !important;
    color: #ffffff !important;
    background: #0f172a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--w2a-radius-xl) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
}

.w2a-player-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 20px !important;
    background: rgba(30, 41, 59, 0.85) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.w2a-player-header-title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #7dd3fc !important;
    font-weight: 700 !important;
}

.w2a-player-live-dot {
    width: 8px !important;
    height: 8px !important;
    background: #10b981 !important;
    border-radius: var(--w2a-radius-full) !important;
    box-shadow: 0 0 10px #10b981 !important;
    animation: w2a-pulse 1.8s infinite !important;
    display: none;
}

.w2a-player-close-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    color: #cbd5e1 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 0 !important;
    border-radius: var(--w2a-radius-full) !important;
    cursor: pointer !important;
}

.w2a-player-close-btn:hover {
    color: #ffffff !important;
    background: #dc2626 !important;
}

.w2a-player-body {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 120px !important;
    padding: 24px !important;
}

.w2a-audio-player-wrapper {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 650px !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.w2a-audio-player-wrapper h4 {
    margin: 0 !important;
    color: #f8fafc !important;
    font-weight: 700 !important;
    text-align: center !important;
}

.w2a-audio-anim-bars {
    display: flex !important;
    align-items: flex-end !important;
    height: 36px !important;
    gap: 5px !important;
}

.w2a-audio-anim-bar {
    width: 4px !important;
    height: 70% !important;
    background: linear-gradient(to top, #10b981, #34d399) !important;
    border-radius: 2px !important;
    animation: w2a-sound-wave 1.2s infinite ease-in-out alternate !important;
}

.w2a-audio-anim-bar:nth-child(2n) {
    animation-delay: 0.2s !important;
}
.w2a-audio-anim-bar:nth-child(3n) {
    animation-delay: 0.4s !important;
}

@keyframes w2a-sound-wave {
    from {
        height: 20%;
    }
    to {
        height: 100%;
    }
}

.w2a-player-body audio,
.w2a-player-body iframe,
.w2a-video-player-wrapper,
.w2a-video-player-wrapper video {
    display: block !important;
    width: 100% !important;
}

.w2a-video-player-wrapper {
    overflow: hidden !important;
    background: #000000 !important;
    border-radius: var(--w2a-radius-lg) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.w2a-video-player-wrapper video {
    max-height: 520px !important;
}

@media (max-width: 575px) {
    .w2a-item-details-card,
    .w2a-player-body,
    .w2a-quality-card {
        padding: 16px !important;
    }

    .w2a-quality-actions,
    .w2a-quality-play-btn,
    .w2a-quality-down-btn {
        width: 100% !important;
    }
}

/* Final v1 UI migration: equal-height content rows */
.row.service-box.w2a-equal-height-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}

.row.service-box.w2a-equal-height-row > [class*="col-"],
.row.service-box.top-section-card > [class*="col-"] {
    display: flex !important;
    flex-direction: column !important;
}

.row.service-box.w2a-equal-height-row .portlet,
.row.service-box.w2a-equal-height-row .portlet-body,
.row.service-box.w2a-equal-height-row ul.homecss,
.row.service-box.w2a-equal-height-row ul.vars,
.row.service-box.w2a-equal-height-row .w2a-polls-wrap,
.row.service-box.w2a-equal-height-row .w2a-dump-files-list,
.row.service-box.w2a-equal-height-row .w2a-latest-telawat-list {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
}

.row.service-box.w2a-equal-height-row .mooore {
    margin-top: auto !important;
    padding-top: 12px !important;
}

.w2a-radio-banner-content p {
    color: #ffffff !important;
}

.w2a-meta-series {
    color: var(--w2a-primary-700) !important;
    background: var(--w2a-primary-50) !important;
    border-color: var(--w2a-primary-200) !important;
}

.w2a-item-action-btn.w2a-btn-pdf {
    color: #ffffff !important;
    background: linear-gradient(135deg, #dc2626, #991b1b) !important;
    border-color: transparent !important;
}

/* Gallery album detail */
.w2a-gallery-album-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    padding: 24px 28px !important;
    margin-bottom: 28px !important;
    background: linear-gradient(
        135deg,
        rgba(18, 86, 136, 0.08),
        rgba(18, 86, 136, 0.03)
    ) !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-xl) !important;
    flex-wrap: wrap !important;
}

.w2a-gallery-album-info {
    display: flex !important;
    flex: 1 1 300px !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.w2a-gallery-album-title {
    margin: 0 !important;
    color: var(--w2a-ink-900) !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
}

.w2a-gallery-album-desc {
    margin: 0 !important;
    color: var(--w2a-ink-600) !important;
    line-height: 1.7 !important;
}

.w2a-gallery-album-stats {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 4px !important;
    flex-wrap: wrap !important;
}

.w2a-gallery-album-stats span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 36px !important;
    padding: 6px 14px !important;
    color: var(--w2a-primary-700) !important;
    background: var(--w2a-surface) !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-full) !important;
    font-weight: 600 !important;
    gap: 6px !important;
}

.w2a-gallery-download-zip-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 12px 24px !important;
    color: #ffffff !important;
    background: linear-gradient(
        135deg,
        var(--w2a-primary-600),
        var(--w2a-primary-800)
    ) !important;
    border: 0 !important;
    border-radius: var(--w2a-radius-lg) !important;
    box-shadow: 0 4px 14px rgba(18, 86, 136, 0.28) !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    gap: 8px !important;
}

.w2a-gallery-download-zip-btn:hover,
.w2a-gallery-download-zip-btn:focus-visible {
    color: #ffffff !important;
    box-shadow: 0 7px 20px rgba(18, 86, 136, 0.36) !important;
    transform: translateY(-2px) !important;
}

.w2a-gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 20px !important;
    padding: 8px 0 !important;
}

.w2a-gallery-item-card {
    display: flex !important;
    overflow: hidden !important;
    flex-direction: column !important;
    background: var(--w2a-surface) !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-lg) !important;
    box-shadow: var(--w2a-shadow-sm) !important;
    transition:
        transform var(--w2a-motion-normal),
        box-shadow var(--w2a-motion-normal),
        border-color var(--w2a-motion-normal) !important;
}

.w2a-gallery-item-card:hover,
.w2a-gallery-item-card:focus-within {
    border-color: var(--w2a-primary-300) !important;
    box-shadow: var(--w2a-shadow-lg) !important;
    transform: translateY(-4px) !important;
}

.w2a-gallery-thumb-wrap {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    background: var(--w2a-surface-alt) !important;
}

.w2a-gallery-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.4s ease !important;
}

.w2a-gallery-item-card:hover .w2a-gallery-img,
.w2a-gallery-item-card:focus-within .w2a-gallery-img {
    transform: scale(1.06) !important;
}

.w2a-gallery-overlay {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    opacity: 0 !important;
    background: rgba(15, 23, 42, 0.68) !important;
    transition: opacity var(--w2a-motion-normal) !important;
}

.w2a-gallery-item-card:hover .w2a-gallery-overlay,
.w2a-gallery-item-card:focus-within .w2a-gallery-overlay {
    opacity: 1 !important;
}

.w2a-gallery-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 8px 16px !important;
    color: var(--w2a-ink-900) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border-radius: var(--w2a-radius-md) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    gap: 6px !important;
}

.w2a-gallery-action-btn.w2a-download {
    color: #ffffff !important;
    background: var(--w2a-primary-700) !important;
}

.w2a-gallery-card-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    background: var(--w2a-surface) !important;
    border-top: 1px solid var(--w2a-border) !important;
}

.w2a-gallery-photo-num {
    color: var(--w2a-ink-500) !important;
    font-weight: 700 !important;
}

.w2a-gallery-quick-down {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
    color: var(--w2a-primary-700) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    gap: 5px !important;
}

/* Visitor comments */
.w2a-comments-wrap,
.w2a-comments-list {
    display: flex !important;
    width: 100% !important;
    flex-direction: column !important;
}

.w2a-comments-wrap {
    margin-top: 12px !important;
    gap: 20px !important;
}

.w2a-comments-list {
    gap: 16px !important;
}

.w2a-comments-header-bar {
    display: flex !important;
    align-items: center !important;
    padding: 16px 20px !important;
    background: linear-gradient(
        135deg,
        rgba(18, 86, 136, 0.08),
        rgba(18, 86, 136, 0.03)
    ) !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-lg) !important;
}

.w2a-comments-count-pill {
    display: inline-flex !important;
    align-items: center !important;
    color: var(--w2a-primary-700) !important;
    font-weight: 700 !important;
    gap: 8px !important;
}

.w2a-comment-card {
    position: relative !important;
    display: flex !important;
    overflow: hidden !important;
    flex-direction: column !important;
    padding: 20px 22px !important;
    background: var(--w2a-surface) !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-lg) !important;
    box-shadow: var(--w2a-shadow-sm) !important;
}

.w2a-comment-card::before {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 4px !important;
    background: linear-gradient(
        var(--w2a-primary-500),
        var(--w2a-primary-700)
    ) !important;
    content: "" !important;
}

.w2a-comment-header,
.w2a-comment-user-info,
.w2a-comment-author,
.w2a-comment-date,
.w2a-comment-mod-badge {
    display: flex !important;
    align-items: center !important;
}

.w2a-comment-header {
    justify-content: space-between !important;
    margin-bottom: 14px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px dashed var(--w2a-border) !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.w2a-comment-user-info {
    gap: 12px !important;
}

.w2a-comment-avatar-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    width: 42px !important;
    height: 42px !important;
    background: var(--w2a-primary-50) !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-full) !important;
    flex-shrink: 0 !important;
}

.w2a-comment-flag {
    width: 28px !important;
    height: 20px !important;
    object-fit: contain !important;
}

.w2a-comment-avatar-fallback,
.w2a-comment-footer-icon {
    color: var(--w2a-primary-500) !important;
}

.w2a-comment-author {
    color: var(--w2a-ink-900) !important;
    font-weight: 700 !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.w2a-comment-mod-badge {
    padding: 3px 9px !important;
    color: var(--w2a-primary-700) !important;
    background: var(--w2a-primary-50) !important;
    border: 1px solid var(--w2a-primary-200) !important;
    border-radius: var(--w2a-radius-full) !important;
    font-weight: 600 !important;
    gap: 4px !important;
}

.w2a-comment-date {
    color: var(--w2a-ink-500) !important;
    gap: 6px !important;
}

.w2a-comment-body {
    margin: 0 !important;
    color: var(--w2a-ink-700) !important;
    line-height: 1.8 !important;
    overflow-wrap: anywhere !important;
}

.w2a-comment-footer-icon {
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 10px !important;
    opacity: 0.55 !important;
}

/* Recorded lesson speaker and previous/next navigation */
.w2a-item-speaker-badge {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 36px !important;
    padding: 6px 14px !important;
    margin-bottom: 20px !important;
    color: var(--w2a-primary-700) !important;
    background: var(--w2a-primary-50) !important;
    border: 1px solid var(--w2a-primary-200) !important;
    border-radius: var(--w2a-radius-full) !important;
    font-weight: 700 !important;
    gap: 8px !important;
}

.w2a-nav-prev-next {
    display: flex !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 24px 0 !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}

.w2a-nav-item {
    display: flex !important;
    align-items: center !important;
    min-height: 72px !important;
    padding: 14px 18px !important;
    color: var(--w2a-ink-900) !important;
    background: var(--w2a-surface) !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-lg) !important;
    box-shadow: var(--w2a-shadow-sm) !important;
    text-decoration: none !important;
    flex: 1 1 240px !important;
    gap: 14px !important;
}

.w2a-nav-item:hover,
.w2a-nav-item:focus-visible {
    border-color: var(--w2a-primary-300) !important;
    box-shadow: var(--w2a-shadow-md) !important;
    transform: translateY(-2px) !important;
}

.w2a-nav-item > i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    color: var(--w2a-primary-700) !important;
    background: var(--w2a-primary-50) !important;
    border-radius: var(--w2a-radius-full) !important;
    flex-shrink: 0 !important;
}

.w2a-nav-next {
    justify-content: flex-end !important;
}

.w2a-nav-text {
    display: flex !important;
    min-width: 0 !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.w2a-nav-label {
    color: var(--w2a-ink-500) !important;
    font-weight: 600 !important;
}

.w2a-nav-title {
    overflow: hidden !important;
    color: var(--w2a-ink-900) !important;
    font-weight: 700 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* --------------------------------------------------------------------------
   5.6 SHARED PAGINATION
   One public-site paginator for directories, search results, and comments.
   -------------------------------------------------------------------------- */
.w2a-refresh-pagination {
    clear: both !important;
    padding-top: 24px !important;
}

.w2a-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 24px 0 !important;
    padding: 16px !important;
    border: 1px solid var(--w2a-border) !important;
    border-radius: var(--w2a-radius-lg) !important;
    background: linear-gradient(
        135deg,
        var(--w2a-surface-alt),
        #ffffff
    ) !important;
    box-shadow: var(--w2a-shadow-sm) !important;
    gap: 20px !important;
}

.w2a-pagination__summary {
    margin: 0 !important;
    color: var(--w2a-ink-500) !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    white-space: nowrap !important;
}

.w2a-pagination__summary strong {
    color: var(--w2a-ink-800) !important;
    font-weight: 800 !important;
}

.w2a-pagination__list {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.w2a-pagination__list > li {
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
}

.w2a-pagination__control,
.w2a-pagination__page,
.w2a-pagination__ellipsis {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 10px !important;
    color: var(--w2a-ink-700) !important;
    background: #ffffff !important;
    border: 1px solid var(--w2a-border-dark) !important;
    border-radius: var(--w2a-radius-md) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-decoration: none !important;
}

.w2a-pagination__control {
    padding: 0 14px !important;
    gap: 8px !important;
}

a.w2a-pagination__control,
a.w2a-pagination__page {
    box-shadow: var(--w2a-shadow-xs) !important;
    transition:
        color var(--w2a-motion-fast),
        background-color var(--w2a-motion-fast),
        border-color var(--w2a-motion-fast),
        box-shadow var(--w2a-motion-fast),
        transform var(--w2a-motion-fast) !important;
}

a.w2a-pagination__control:hover,
a.w2a-pagination__control:focus-visible,
a.w2a-pagination__page:hover,
a.w2a-pagination__page:focus-visible {
    color: var(--w2a-primary-700) !important;
    background: var(--w2a-primary-50) !important;
    border-color: var(--w2a-primary-300) !important;
    box-shadow: var(--w2a-shadow-sm) !important;
    transform: translateY(-2px) !important;
}

.w2a-pagination__page.is-current {
    color: #ffffff !important;
    background: linear-gradient(
        135deg,
        var(--w2a-primary-700),
        var(--w2a-primary-500)
    ) !important;
    border-color: var(--w2a-primary-700) !important;
    box-shadow: 0 8px 18px rgba(17, 96, 151, 0.22) !important;
}

.w2a-pagination__control.is-disabled {
    color: var(--w2a-ink-400) !important;
    background: var(--w2a-surface-alt) !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

.w2a-pagination__ellipsis {
    background: transparent !important;
    border-color: transparent !important;
}

/* --------------------------------------------------------------------------
   5.7 PREMIUM BOOTSTRAP DIALOGS
   -------------------------------------------------------------------------- */
body.modal-open {
    overflow: hidden !important;
}

.modal {
    z-index: 2000000 !important;
    padding: 16px !important;
}

.modal-backdrop {
    z-index: 1999990 !important;
    background-color: #0f172a !important;
}

.modal-backdrop.in {
    opacity: 0.68 !important;
}

.modal .modal-dialog {
    display: flex !important;
    align-items: center !important;
    width: min(640px, 100%) !important;
    min-height: calc(100dvh - 32px) !important;
    margin: 0 auto !important;
}

.modal .modal-content {
    overflow: hidden !important;
    width: 100% !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: var(--w2a-radius-xl) !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.34) !important;
}

.modal .modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px 22px !important;
    color: #ffffff !important;
    background: linear-gradient(
        135deg,
        var(--w2a-primary-800),
        var(--w2a-primary-600)
    ) !important;
    border: 0 !important;
    flex-direction: row-reverse !important;
    gap: 16px !important;
}

.modal .modal-title {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1.65 !important;
    overflow-wrap: anywhere !important;
}

.modal .modal-header .close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: var(--w2a-radius-full) !important;
    font-size: 28px !important;
    line-height: 1 !important;
    text-shadow: none !important;
    opacity: 1 !important;
    text-indent: 0 !important;
}

.modal .modal-header .close:hover,
.modal .modal-header .close:focus-visible {
    background: rgba(255, 255, 255, 0.25) !important;
}

.modal .modal-body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: calc(100dvh - 220px) !important;
    padding: 22px !important;
    color: var(--w2a-ink-700) !important;
}

.modal .form-group {
    margin-bottom: 18px !important;
}

.modal .form-group > label {
    margin-bottom: 8px !important;
    color: var(--w2a-ink-800) !important;
    font-weight: 700 !important;
}

.modal .form-control {
    min-height: 48px !important;
    padding: 10px 14px !important;
    color: var(--w2a-ink-800) !important;
    background: var(--w2a-surface-subtle) !important;
    border: 1px solid var(--w2a-border-dark) !important;
    border-radius: var(--w2a-radius-md) !important;
    box-shadow: none !important;
}

.modal textarea.form-control {
    min-height: 130px !important;
    resize: vertical !important;
}

.modal .form-control:focus {
    background: #ffffff !important;
    border-color: var(--w2a-primary-500) !important;
    box-shadow: 0 0 0 3px rgba(18, 86, 136, 0.14) !important;
}

.modal .alert {
    border-radius: var(--w2a-radius-md) !important;
}

.modal .modal-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 16px 22px 20px !important;
    background: var(--w2a-surface-alt) !important;
    border-top: 1px solid var(--w2a-border) !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.modal .modal-footer .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 10px 20px !important;
    margin: 0 !important;
    border-radius: var(--w2a-radius-md) !important;
    font-weight: 800 !important;
}

.modal .modal-footer .btn-primary {
    color: #ffffff !important;
    background: linear-gradient(
        135deg,
        var(--w2a-primary-700),
        var(--w2a-primary-500)
    ) !important;
    border-color: var(--w2a-primary-700) !important;
    box-shadow: 0 8px 18px rgba(17, 96, 151, 0.2) !important;
}

.modal .modal-footer .btn-default {
    color: var(--w2a-ink-700) !important;
    background: #ffffff !important;
    border-color: var(--w2a-border-dark) !important;
}

body.modal-open #w2a_main_player,
body.modal-open .w2a_main_player {
    z-index: 1000 !important;
}

/* Local footer art must never fall back to the retired HTTP origin. */
.w2a-footer {
    background-image: url("images/way_bottom_content_bg.png") !important;
}

.pre-footer {
    background-image: url("images/way_footer_bg.jpg") !important;
}

/* --------------------------------------------------------------------------
   5.8 TABLET AND MOBILE HEADER
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .header > .container {
        min-height: 70px !important;
        padding-right: 15px !important;
        padding-left: 15px !important;
        flex-wrap: wrap !important;
    }

    .header .site-logo {
        padding: 8px 0 !important;
    }

    .header .site-logo img {
        width: auto !important;
        max-width: 86px !important;
        max-height: 54px !important;
    }

    .header .mobi-toggler {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        padding: 0 !important;
        margin: 0 !important;
        color: var(--w2a-primary-700) !important;
        background: var(--w2a-primary-50) !important;
        border: 1px solid var(--w2a-primary-200) !important;
        border-radius: var(--w2a-radius-md) !important;
    }

    .header .mobi-toggler i {
        color: inherit !important;
        font-size: 19px !important;
    }

    .header .header-navigation {
        display: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        width: 100% !important;
        max-height: calc(100dvh - 86px) !important;
        padding: 10px !important;
        margin: 0 0 14px !important;
        background: #ffffff !important;
        border: 1px solid var(--w2a-border) !important;
        border-radius: var(--w2a-radius-lg) !important;
        box-shadow: var(--w2a-shadow-lg) !important;
        flex: 0 0 100% !important;
        order: 3 !important;
    }

    .header .header-navigation.is-open {
        display: block !important;
    }

    .header-navigation > ul {
        display: block !important;
        width: 100% !important;
    }

    .header-navigation > ul > li:not(.w2a-more-menu) {
        display: block !important;
        width: 100% !important;
        border-bottom: 1px solid var(--w2a-border) !important;
        white-space: normal !important;
    }

    .header-navigation > ul > li:last-child {
        border-bottom: 0 !important;
    }

    .header-navigation > ul > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 48px !important;
        padding: 12px 14px !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .header-navigation > ul > li > a::after,
    .header-navigation li.dropdown:hover::after,
    .header-navigation .dropdown:hover::after,
    .header-navigation .w2a-more-menu:hover::after {
        display: none !important;
    }

    .header-navigation > ul > li.dropdown > ul.dropdown-menu {
        position: static !important;
        width: 100% !important;
        padding: 6px !important;
        margin: 0 0 8px !important;
        background: var(--w2a-surface-alt) !important;
        border: 1px solid var(--w2a-border) !important;
        border-radius: var(--w2a-radius-md) !important;
        box-shadow: none !important;
    }

    .header-navigation .dropdown-menu > li > a {
        min-height: 44px !important;
        padding: 11px 14px !important;
        border-radius: var(--w2a-radius-sm) !important;
    }

    .header .menu-search {
        padding: 10px 0 !important;
    }

    .header .w2a-search-trigger-btn {
        width: 100% !important;
        min-height: 46px !important;
        border-radius: var(--w2a-radius-md) !important;
    }
}

@media (min-width: 1025px) {
    .header .mobi-toggler {
        display: none !important;
    }
}

@media (max-width: 767px) {
    div.pre-header {
        display: none !important;
    }

    .modal {
        padding: 8px !important;
    }

    .modal .modal-dialog {
        width: 100% !important;
        min-height: calc(100dvh - 16px) !important;
    }

    .modal .modal-header,
    .modal .modal-body,
    .modal .modal-footer {
        padding-right: 16px !important;
        padding-left: 16px !important;
    }

    .modal .modal-footer .btn {
        width: 100% !important;
    }

    .w2a-pagination {
        align-items: stretch !important;
        flex-direction: column !important;
        padding: 14px !important;
    }

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

    .w2a-pagination__list {
        gap: 6px !important;
    }

    .w2a-pagination__control {
        width: 44px !important;
        padding: 0 !important;
    }

    .w2a-pagination__control > span {
        position: absolute !important;
        overflow: hidden !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        border: 0 !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 640px) {
    .w2a-gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
        gap: 12px !important;
    }

    .w2a-gallery-album-header,
    .w2a-comment-header,
    .w2a-nav-prev-next {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .w2a-gallery-download-zip-btn,
    .w2a-nav-item {
        width: 100% !important;
    }

    .w2a-comment-card {
        padding: 16px !important;
    }
}

/* ==========================================================================
   END — UI ENHANCEMENT v2 (PREMIUM UI SYSTEM)
   ========================================================================== */

/* Mobile QA: a shared, viewport-bound media dialog, independent of legacy panels. */
body.w2a-player-open {
    overflow: hidden !important;
}

div#the_main_player {
    display: none !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: max(16px, env(safe-area-inset-top))
        max(16px, env(safe-area-inset-right))
        max(16px, env(safe-area-inset-bottom))
        max(16px, env(safe-area-inset-left)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    align-items: safe center;
    justify-content: center;
}

div#the_main_player.is-open {
    display: flex !important;
}

#the_main_player .w2a-player-panel {
    width: 100%;
    max-width: 900px;
    max-height: 100%;
    overflow-y: auto !important;
    flex: 0 1 900px;
}

#the_main_player .w2a-player-header {
    position: sticky;
    top: 0;
    z-index: 1;
}

#the_main_player .w2a-player-close-btn {
    position: static !important;
    margin: 0 !important;
    flex: 0 0 44px;
}

#the_main_player #w2a_main_player {
    height: auto !important;
    padding: 16px !important;
    min-width: 0;
}

#the_main_player video {
    max-height: calc(100dvh - 150px) !important;
    aspect-ratio: 16 / 9;
    object-fit: contain;
}

.w2a-player-status {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 16px;
    text-align: center;
    color: #f8fafc;
    line-height: 1.8;
}

.w2a-player-status p {
    margin: 0;
}

.w2a-audio-anim-bars:not(.is-playing) .w2a-audio-anim-bar {
    animation-play-state: paused !important;
}

.w2a-fatwa-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.w2a-fatwa-actions .w2a-action-btn {
    min-width: 0;
    white-space: normal;
    line-height: 1.7;
}

/* The fixed minimum metadata width also overflows narrow tablet columns. */
.w2a-quality-card {
    flex-wrap: wrap !important;
}

.w2a-quality-meta {
    min-width: 0 !important;
}

.w2a-quality-title {
    overflow-wrap: anywhere;
}

.w2a-quality-actions {
    flex: 0 0 auto;
}

@media (max-width: 767px) {
    .w2a-media-layout.row {
        row-gap: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .w2a-media-layout > [class*="col-"],
    .w2a-media-layout > [class*="col-"] > [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        float: none !important;
    }

    .w2a-media-layout .portlet.box {
        height: auto !important;
        flex: none !important;
        margin-bottom: 20px !important;
    }

    .w2a-media-layout .flex.flex-column.gap-5 .portlet.box {
        margin-bottom: 0 !important;
    }

    .w2a-media-layout .portlet.box > .portlet-title {
        padding: 16px 16px 8px !important;
        margin-bottom: 0 !important;
        min-height: 0 !important;
    }

    .w2a-media-layout .portlet.box > .portlet-body {
        padding: 8px 16px 16px !important;
        flex: none !important;
    }

    .w2a-media-layout .portlet-title .caption {
        font-size: 15px !important;
        line-height: 1.7;
        min-width: 0;
    }

    .w2a-media-layout .portlet-body > ul {
        margin-top: 0 !important;
    }

    .w2a-media-layout .w2a-item-details-card {
        padding: 12px !important;
    }

    .w2a-media-layout .w2a-chat-sidebar-title,
    .w2a-media-layout ul.vars a,
    .w2a-media-layout ul.homecss a {
        line-height: 1.8 !important;
        overflow-wrap: anywhere;
    }

    .w2a-media-layout .w2a-top-item-title,
    .w2a-media-layout .w2a-chat-sidebar-title {
        display: block !important;
        -webkit-line-clamp: unset !important;
        font-size: 14px !important;
        line-height: 1.8 !important;
        overflow-wrap: anywhere;
    }

    .w2a-media-layout .w2a-top-item-body {
        min-width: 0;
        gap: 6px !important;
    }

    .w2a-media-layout .w2a-top-item-badge {
        font-size: 12px !important;
        line-height: 1.7;
    }

    .w2a-media-layout .w2a-chat-sidebar-copy small {
        display: block;
        margin-top: 4px;
        line-height: 1.6;
    }

    .page-bar ul.page-breadcrumb {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 10px;
        float: none !important;
        line-height: 1.8;
    }

    .page-bar ul.page-breadcrumb li {
        display: inline-flex !important;
        align-items: baseline;
        gap: 6px;
        max-width: 100%;
        float: none !important;
        padding: 0 !important;
        line-height: 1.8 !important;
        overflow-wrap: anywhere;
    }

    .page-bar ul.page-breadcrumb li a {
        min-width: 0;
    }

    .page-bar ul.page-breadcrumb li > i {
        flex-shrink: 0;
    }

    .w2a-quality-card {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 14px !important;
    }

    .w2a-quality-meta {
        flex: none !important;
    }

    .w2a-quality-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100% !important;
    }

    .w2a-quality-actions > * {
        width: 100% !important;
        min-width: 0;
        min-height: 44px;
        justify-content: center;
        white-space: normal;
    }

    .w2a-fatwa-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .w2a-fatwa-actions > :first-child {
        grid-column: 1 / -1;
    }

    .w2a-media-layout .mada-details .table th {
        width: 32% !important;
    }

    .w2a-media-layout .mada-details .table td,
    .w2a-media-layout .mada-details .table th {
        line-height: 1.8 !important;
        padding: 10px 8px !important;
    }

    .pre-footer > .row {
        margin: 0 !important;
    }

    .pre-footer .footer-container {
        width: 100% !important;
        padding: 20px 16px !important;
        margin: 0 !important;
    }

    .pre-footer .app-promo {
        width: 100%;
        margin: 0 auto !important;
        text-align: center;
    }

    .pre-footer .app-buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 12px;
    }

    .pre-footer .app-badge {
        display: block;
        margin: 0 !important;
    }
}

/* Keep all banner artwork visible; place captions and navigation below it. */
@media (max-width: 575px) {
    .page-slider.container {
        width: calc(100% - 32px) !important;
        padding: 0 !important;
        margin-top: 20px !important;
        margin-bottom: 24px !important;
    }

    .w2a-hero-slider-wrap {
        background: var(--w2a-ink-900) !important;
    }

    .w2a-hero-slider-track {
        height: auto !important;
    }

    .w2a-hero-slide.active {
        position: relative !important;
    }

    .w2a-hero-slide-link {
        display: flex !important;
        flex-direction: column;
        height: auto !important;
    }

    .w2a-hero-slider-track .w2a-hero-slide img {
        height: auto !important;
        aspect-ratio: 1600 / 349;
        object-fit: contain !important;
        transform: none !important;
    }

    .w2a-hero-overlay {
        position: static !important;
        flex: 1;
        min-height: 112px;
        padding: 12px 16px 48px !important;
        background: none !important;
        align-items: center !important;
    }

    .w2a-hero-caption {
        flex-direction: row !important;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 12px !important;
    }

    .w2a-hero-title {
        font-size: 15px !important;
        line-height: 1.7 !important;
        text-shadow: none !important;
    }

    .w2a-hero-cta {
        flex-shrink: 0;
        padding: 8px 12px !important;
    }

    .w2a-hero-arrow {
        top: auto !important;
        bottom: 2px;
        transform: none !important;
        background: transparent !important;
        border: 0 !important;
    }

    .w2a-hero-prev {
        right: 8px !important;
    }

    .w2a-hero-next {
        left: 8px !important;
    }

    .w2a-hero-dots {
        width: calc(100% - 112px);
        bottom: 2px !important;
        gap: 0 !important;
        padding: 0 4px !important;
        border: 0 !important;
        background: none !important;
        max-width: 100%;
    }

    .w2a-hero-dot,
    .w2a-hero-dot.active {
        width: 24px !important;
        flex: 1 1 24px;
        height: 44px !important;
        border-radius: 0 !important;
        background: transparent !important;
        display: grid;
        place-items: center;
    }

    .w2a-hero-dot::after {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
    }

    .w2a-hero-dot.active::after {
        width: 18px;
        border-radius: 4px;
        background: var(--w2a-primary-500);
    }
}

@media (hover: none), (prefers-reduced-motion: reduce) {
    .w2a-quality-card:hover,
    .w2a-media-layout .portlet.box:hover {
        transform: none !important;
    }
}

/* Mobile audit: search must remain reachable above the header in short viewports. */
.search-box[role="dialog"] {
    width: 100% !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: max(12px, env(safe-area-inset-top))
        max(12px, env(safe-area-inset-right))
        max(12px, env(safe-area-inset-bottom))
        max(12px, env(safe-area-inset-left)) !important;
    overflow: auto !important;
}

.search-box[role="dialog"] .w2a-search-modal-card {
    max-height: 100%;
    display: flex;
    flex-direction: column;
}

.w2a-search-modal-header {
    flex: 0 0 auto;
    gap: 12px;
}

.w2a-search-modal-title {
    min-width: 0;
}

.w2a-search-modal-title > i {
    flex-shrink: 0;
}

.w2a-search-modal-header > .w2a-search-close-btn {
    flex: 0 0 44px;
    width: 44px !important;
    height: 44px !important;
}

.w2a-search-modal-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.w2a-search-field,
.w2a-date-range > .form-control {
    min-width: 0;
}

.w2a-search-submit-btn,
.w2a-search-cancel-btn {
    min-height: 44px;
}

.w2a-search-cancel-btn {
    width: auto !important;
    height: auto !important;
}

.w2a-preacher-card,
.w2a-item-card-content {
    min-width: 0;
}

.w2a-meta-pill {
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Intrinsic banner dimensions are for the downloadable artwork, not the viewport. */
.share img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    .w2a-preacher-name {
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .w2a-item-card-row {
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr);
        padding: 14px !important;
        gap: 12px !important;
        align-items: start !important;
    }

    .w2a-item-card-content {
        display: contents !important;
    }

    .w2a-item-card-meta,
    .w2a-item-action-btn {
        grid-column: 1 / -1;
    }

    .w2a-item-card-title {
        line-height: 1.8 !important;
        overflow-wrap: anywhere;
    }

    .w2a-item-action-btn {
        flex: 0 0 100%;
        justify-content: center;
        min-height: 44px;
        white-space: normal !important;
    }

    .w2a-search-modal-header,
    .w2a-search-modal-body {
        padding: 16px !important;
    }

    .w2a-search-modal-title h3 {
        font-size: 16px !important;
        line-height: 1.6;
    }

    .w2a-search-field .form-control,
    main input:not([type="checkbox"]):not([type="radio"]),
    main select,
    main textarea {
        font-size: 16px !important;
    }

    .w2a-date-range {
        flex-wrap: wrap;
    }

    .w2a-date-range > .form-control {
        flex: 1 1 150px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .search-box[role="dialog"],
    .w2a-search-modal-card {
        transition: none !important;
    }
}

.w2a-search-results {
    min-width: 0;
    overflow-wrap: anywhere;
}

.w2a-search-results > h1 {
    font-size: 24px;
    line-height: 1.6;
}

.w2a-results-search-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid var(--w2a-border);
    border-radius: var(--w2a-radius-lg);
    background: var(--w2a-surface);
}

.w2a-results-search-form .form-group {
    margin: 0;
    min-width: 0;
}

.w2a-results-search-form label {
    display: block;
    margin: 8px 0;
}

.w2a-results-search-form .form-control {
    width: 100%;
    min-width: 0;
    min-height: 44px;
}

.w2a-results-search-form > button {
    align-self: end;
}

.w2a-search-results section > ul {
    list-style: none;
    padding: 0;
}

.w2a-search-results section > ul > li {
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid var(--w2a-border);
    border-radius: var(--w2a-radius-md);
    background: #fff;
    line-height: 1.8;
}

.w2a-search-results section img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    .w2a-chat-layout .row {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .w2a-chat-layout .row > [class*="col-"] {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .w2a-ramadan-schedule.row {
        margin: 0 0 24px !important;
    }

    .w2a-ramadan-schedule .row {
        margin: 0 !important;
        row-gap: 8px !important;
    }

    .w2a-ramadan-schedule h4 {
        padding: 12px;
        line-height: 1.8;
    }

    .w2a-ramadan-schedule .table {
        table-layout: fixed;
        width: 100%;
    }

    .w2a-ramadan-schedule td {
        padding: 12px 8px !important;
        line-height: 1.8;
        overflow-wrap: anywhere;
    }

    .w2a-ramadan-schedule .page-header {
        padding-top: 10px;
        display: flex;
        flex-wrap: wrap;
    }

    .w2a-ramadan-schedule .page-header > div {
        float: none;
        flex: 1 1 120px;
    }

    .w2a-results-search-form {
        grid-template-columns: minmax(0, 1fr);
        padding: 16px;
    }
}

.w2a-pagination > form {
    min-width: 0;
    margin: 0;
}

.w2a-pagination button {
    font-family: inherit;
    cursor: pointer;
}