/**
 * TV Channels Frontend Styles
 * Responsive accordion interface for TV channel packages
 */

/* ==========================================================================
   TV Channels Container
   ========================================================================== */

.ao-tv-channels {
    max-width: var(--ao-tv-full-width, 1200px);
    margin: 0 auto;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ==========================================================================
   Package Statistics Header
   ========================================================================== */

.ao-tv-stats-header {
    margin-bottom: 30px;
}

.ao-tv-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--ao-gap-size, 20px);
    margin-bottom: 20px;
}

.ao-tv-stat-item {
    text-align: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
    cursor: pointer;
}

.ao-tv-stat-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    border-color: #1976d2;
}

.ao-tv-stat-item.active {
    background: #e3f2fd !important;
    border-color: #1976d2 !important;
    box-shadow: 0 4px 15px rgba(25, 118, 210, 0.3) !important;
}

.ao-tv-stat-item.active .ao-package-name {
    color: #1976d2 !important;
}

.ao-package-name {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 10px 0;
}

.ao-package-description {
    font-size: 14px;
    color: #6c757d;
    margin: 0;
    line-height: 1.4;
}

/* ==========================================================================
   Package Switcher Tabs
   ========================================================================== */

.ao-tv-package-switcher {
    /* Shown as fallback when stats header is hidden */
    margin-bottom: 30px;
}

.ao-package-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px;
    background: #f1f3f4;
    border-radius: 10px;
    margin-bottom: 20px;
}

.ao-package-tab {
    flex: 1;
    min-width: 120px;
    max-width: 200px;
    padding: 12px 20px;
    border: none;
    background: transparent;
    color: #5f6368;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s ease;
}

.ao-package-tab:hover {
    background: #e8eaed;
    color: #3c4043;
}

.ao-package-tab.active {
    background: #1a73e8;
    color: white;
    box-shadow: 0 2px 8px rgba(26, 115, 232, 0.3);
}

/* ==========================================================================
   Package Content Areas
   ========================================================================== */

.ao-tv-packages-content {
    position: relative;
}

.ao-tv-package-content {
    display: none;
    animation: fadeIn 0.4s ease;
}

.ao-tv-package-content.active {
    display: block;
}

@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(10px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* ==========================================================================
   Accordion Structure
   ========================================================================== */

.ao-tv-accordion {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.ao-category-section {
    border-bottom: 1px solid #e9ecef;
    background: white;
}

.ao-category-section:last-child {
    border-bottom: none;
}

/* ==========================================================================
   Category Headers
   ========================================================================== */

.ao-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    background: #ffffff;
    border-bottom: 1px solid #e9ecef;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ao-category-header:hover {
    background: #f8f9fa;
}

.ao-category-section.expanded .ao-category-header {
    background: #e3f2fd;
    border-bottom-color: #bbdefb;
}

.ao-category-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Modern Blue Icons - Inspired by Lucide + Tailwind Design */
.ao-category-icon {
    width: 40px;
    height: 40px;
    background: #2563eb; /* blue-600 */
    border-radius: 12px;
    border: 1px solid #1d4ed8; /* blue-700 */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    position: relative;
    min-width: 40px;
    flex-shrink: 0;
}

.ao-category-icon::before {
    content: '';
    width: 24px;
    height: 24px;
    background-color: white;
    transition: all 0.3s ease;
}

/* Hover Effects */
.ao-category-header:hover .ao-category-icon {
    background: #1d4ed8; /* blue-700 */
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.ao-category-header:hover .ao-category-icon::before {
    transform: scale(1.1);
}

/* Icon Masks - Lucide SVG Icons */
.ao-category-icon.general::before,
.ao-category-icon.ogolne::before {
    mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLW1vbml0b3ItcGxheS1pY29uIGx1Y2lkZS1tb25pdG9yLXBsYXkiPjxwYXRoIGQ9Ik0xNS4wMzMgOS40NGEuNjQ3LjY0NyAwIDAgMSAwIDEuMTJsLTQuMDY1IDIuMzUyYS42NDUuNjQ1IDAgMCAxLS45NjgtLjU2VjcuNjQ4YS42NDUuNjQ1IDAgMCAxIC45NjctLjU2eiIvPjxwYXRoIGQ9Ik0xMiAxN3Y0Ii8+PHBhdGggZD0iTTggMjFoOCIvPjxyZWN0IHg9IjIiIHk9IjMiIHdpZHRoPSIyMCIgaGVpZ2h0PSIxNCIgcng9IjIiLz48L3N2Zz4=") no-repeat center;
    mask-size: contain;
}

.ao-category-icon.rozrywka::before {
    mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWRyYW1hLWljb24gbHVjaWRlLWRyYW1hIj48cGF0aCBkPSJNMTAgMTFoLjAxIi8+PHBhdGggZD0iTTE0IDZoLjAxIi8+PHBhdGggZD0iTTE4IDZoLjAxIi8+PHBhdGggZD0iTTYuNSAxMy4xaC4wMSIvPjxwYXRoIGQ9Ik0yMiA1YzAgOS00IDEyLTYgMTJzLTYtMy02LTEyYzAtMiAyLTMgNi0zczYgMSA2IDMiLz48cGF0aCBkPSJNMTcuNCA5LjljLS44LjgtMiAuOC0yLjggMCIvPjxwYXRoIGQ9Ik0xMC4xIDcuMUM5IDcuMiA3LjcgNy43IDYgOC42Yy0zLjUgMi00LjcgMy45LTMuNyA1LjYgNC41IDcuOCA5LjUgOC40IDExLjIgNy40LjktLjUgMS45LTIuMSAxLjktNC43Ii8+PHBhdGggZD0iTTkuMSAxNi41Yy4zLTEuMSAxLjQtMS43IDIuNC0xLjQiLz48L3N2Zz4=") no-repeat center;
    mask-size: contain;
}

.ao-category-icon.sport::before {
    mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXZvbGxleWJhbGwtaWNvbiBsdWNpZGUtdm9sbGV5YmFsbCI+PHBhdGggZD0iTTExLjEgNy4xYTE2LjU1IDE2LjU1IDAgMCAxIDEwLjkgNCIvPjxwYXRoIGQ9Ik0xMiAxMmExMi42IDEyLjYgMCAwIDEtOC43IDUiLz48cGF0aCBkPSJNMTYuOCAxMy42YTE2LjU1IDE2LjU1IDAgMCAxLTkgNy41Ii8+PHBhdGggZD0iTTIwLjcgMTdhMTIuOCAxMi44IDAgMCAwLTguNy01IDEzLjMgMTMuMyAwIDAgMSAwLTEwIi8+PHBhdGggZD0iTTYuMyAzLjhhMTYuNTUgMTYuNTUgMCAwIDAgMS45IDExLjUiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjwvc3ZnPg==") no-repeat center;
    mask-size: contain;
}

.ao-category-icon.filmy::before {
    mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNsYXBwZXJib2FyZC1pY29uIGx1Y2lkZS1jbGFwcGVyYm9hcmQiPjxwYXRoIGQ9Ik0yMC4yIDYgMyAxMWwtLjktMi40Yy0uMy0xLjEuMy0yLjIgMS4zLTIuNWwxMy41LTRjMS4xLS4zIDIuMi4zIDIuNSAxLjNaIi8+PHBhdGggZD0ibTYuMiA1LjMgMy4xIDMuOSIvPjxwYXRoIGQ9Im0xMi40IDMuNCAzLjEgNCIvPjxwYXRoIGQ9Ik0zIDExaDE4djhhMiAyIDAgMCAxLTIgMkg1YTIgMiAwIDAgMS0yLTJaIi8+PC9zdmc+") no-repeat center;
    mask-size: contain;
}

.ao-category-icon.dzieci::before {
    mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWJhYnktaWNvbiBsdWNpZGUtYmFieSI+PHBhdGggZD0iTTEwIDE2Yy41LjMgMS4yLjUgMiAuNXMxLjUtLjIgMi0uNSIvPjxwYXRoIGQ9Ik0xNSAxMmguMDEiLz48cGF0aCBkPSJNMTkuMzggNi44MTNBOSA5IDAgMCAxIDIwLjggMTAuMmEyIDIgMCAwIDEgMCAzLjYgOSA5IDAgMCAxLTE3LjYgMCAyIDIgMCAwIDEgMC0zLjZBOSA5IDAgMCAxIDEyIDNjMiAwIDMuNSAxLjEgMy41IDIuNXMtLjkgMi41LTIgMi41Yy0uOCAwLTEuNS0uNC0xLjUtMSIvPjxwYXRoIGQ9Ik05IDEyaC4wMSIvPjwvc3ZnPg==") no-repeat center;
    mask-size: contain;
}

.ao-category-icon.nauka::before {
    mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWF0b20taWNvbiBsdWNpZGUtYXRvbSI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMSIvPjxwYXRoIGQ9Ik0yMC4yIDIwLjJjMi4wNC0yLjAzLjAyLTcuMzYtNC41LTExLjktNC41NC00LjUyLTkuODctNi41NC0xMS45LTQuNS0yLjA0IDIuMDMtLjAyIDcuMzYgNC41IDExLjkgNC41NCA0LjUyIDkuODcgNi41NCAxMS45IDQuNVoiLz48cGF0aCBkPSJNMTUuNyAxNS43YzQuNTItNC41NCA2LjU0LTkuODcgNC41LTExLjktMi4wMy0yLjA0LTcuMzYtLjAyLTExLjkgNC41LTQuNTIgNC41NC02LjU0IDkuODctNC41IDExLjkgMi4wMyAyLjA0IDcuMzYuMDIgMTEuOS00LjVaIi8+PC9zdmc+") no-repeat center;
    mask-size: contain;
}

.ao-category-icon.muzyka::before {
    mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLW11c2ljNC1pY29uIGx1Y2lkZS1tdXNpYy00Ij48cGF0aCBkPSJNOSAxOFY1bDEyLTJ2MTMiLz48cGF0aCBkPSJtOSA5IDEyLTIiLz48Y2lyY2xlIGN4PSI2IiBjeT0iMTgiIHI9IjMiLz48Y2lyY2xlIGN4PSIxOCIgY3k9IjE2IiByPSIzIi8+PC9zdmc+") no-repeat center;
    mask-size: contain;
}

.ao-category-icon.premium::before {
    mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXN0YXItaWNvbiBsdWNpZGUtc3RhciI+PHBhdGggZD0iTTExLjUyNSAyLjI5NWEuNTMuNTMgMCAwIDEgLjk1IDBsMi4zMSA0LjY3OWEyLjEyMyAyLjEyMyAwIDAgMCAxLjU5NSAxLjE2bDUuMTY2Ljc1NmEuNTMuNTMgMCAwIDEgLjI5NC45MDRsLTMuNzM2IDMuNjM4YTIuMTIzIDIuMTIzIDAgMCAwLS42MTEgMS44NzhsLjg4MiA1LjE0YS41My41MyAwIDAgMS0uNzcxLjU2bC00LjYxOC0yLjQyOGEyLjEyMiAyLjEyMiAwIDAgMC0xLjk3MyAwTDYuMzk2IDIxLjAxYS41My41MyAwIDAgMS0uNzctLjU2bC44ODEtNS4xMzlhMi4xMjIgMi4xMjIgMCAwIDAtLjYxMS0xLjg3OUwyLjE2IDkuNzk1YS41My41MyAwIDAgMSAuMjk0LS45MDZsNS4xNjUtLjc1NWEyLjEyMiAyLjEyMiAwIDAgMCAxLjU5Ny0xLjE2eiIvPjwvc3ZnPg==") no-repeat center;
    mask-size: contain;
}

.ao-category-icon.news::before,
.ao-category-icon.informacje::before {
    mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLW5ld3NwYXBlci1pY29uIGx1Y2lkZS1uZXdzcGFwZXIiPjxwYXRoIGQ9Ik00IDIyaDEyYTQgNCAwIDAgMCA0LTRWNGE0IDQgMCAwIDAtNC00SDZhNCA0IDAgMCAwLTQgNHYxIi8+PHBhdGggZD0iTTcgMTBoMTEiLz48cGF0aCBkPSJNNyAxNGgxMSIvPjxwYXRoIGQ9Ik03IDE4aDExIi8+PHBhdGggZD0iTTMgNmExIDEgMCAwIDEgMS0xaDEiLz48cGF0aCBkPSJNMTcgNGExIDEgMCAwIDEgMSAxdjMiLz48L3N2Zz4=") no-repeat center;
    mask-size: contain;
}

.ao-category-icon.regional::before,
.ao-category-icon.regionalne::before {
    mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLW1hcC1waW4tY2hlY2staWNvbiBsdWNpZGUtbWFwLXBpbi1jaGVjayI+PHBhdGggZD0iTTIwIDEwYzAgNC45LTggMTQtOCAxNFMgNCAxNC45IDQgMTBhOCA4IDAgMCAxIDE2IDAiLz48cGF0aCBkPSJtOSAxMCAyIDIgNC00Ii8+PC9zdmc+") no-repeat center;
    mask-size: contain;
}

.ao-category-name {
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
}

.ao-category-meta {
    display: flex;
    align-items: center;
    gap: 15px;
}

.ao-category-count {
    background: #e9ecef;
    color: #495057;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    min-width: 30px;
    text-align: center;
}

.ao-category-section.expanded .ao-category-count {
    background: #1976d2;
    color: white;
}

.ao-category-toggle {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    color: #6c757d;
    transition: transform 0.3s ease;
}

.ao-category-section .ao-toggle-minus {
    display: none;
}

.ao-category-section.expanded .ao-toggle-plus {
    display: none;
}

.ao-category-section.expanded .ao-toggle-minus {
    display: block;
}

.ao-category-section.expanded .ao-category-toggle {
    transform: rotate(0deg);
    color: #1976d2;
}

/* ==========================================================================
   Channels Container & Grid
   ========================================================================== */

.ao-channels-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.ao-category-section.expanded .ao-channels-container {
    max-height: 2000px; /* Large enough value */
    padding: 24px;
    background: #fafafa;
}

.ao-channels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
    position: relative;
}

/* Show all channels functionality */
.ao-channels-grid.show-all .ao-channels-hidden {
    display: contents;
}

.ao-channels-hidden {
    display: none;
}

/* ==========================================================================
   Individual Channel Items
   ========================================================================== */

.ao-channel-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: default;
    min-height: 120px;
}

.ao-channel-item:hover {
    border-color: #1976d2;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.ao-channel-logo-container {
    position: relative;
    width: 60px;
    height: 40px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ao-channel-logo {
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px;
    object-fit: contain;
}

.ao-channel-quality {
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: 9px;
    font-weight: bold;
    padding: 2px 4px;
    border-radius: 3px;
    line-height: 1;
}

.ao-quality-sd {
    background: #6c757d;
    color: white;
}

.ao-quality-hd {
    background: #28a745;
    color: white;
}

.ao-quality-4k {
    background: #dc3545;
    color: white;
}

.ao-channel-name {
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    color: #2c3e50;
    line-height: 1.3;
    margin-bottom: 4px;
}

.ao-channel-position {
    font-size: 10px;
    color: #6c757d;
    background: #f8f9fa;
    padding: 2px 6px;
    border-radius: 10px;
}

/* ==========================================================================
   Channel More/Show All
   ========================================================================== */

.ao-channel-more {
    grid-column: 1 / -1;
    text-align: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 2px dashed #dee2e6;
}

.ao-more-text {
    display: block;
    color: #6c757d;
    font-size: 14px;
    margin-bottom: 10px;
}

.ao-show-all-btn {
    background: #1976d2;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.ao-show-all-btn:hover {
    background: #1565c0;
}

/* ==========================================================================
   No Content States
   ========================================================================== */

.ao-tv-no-packages,
.ao-tv-no-categories,
.ao-no-channels {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
    .ao-tv-channels {
        padding: 15px;
    }
    
    .ao-tv-stats-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .ao-package-tabs {
        flex-direction: column;
        gap: 4px;
    }
    
    .ao-package-tab {
        max-width: none;
    }
    
    .ao-category-header {
        padding: 15px 16px;
    }
    
    .ao-category-info {
        gap: 8px;
    }
    
    .ao-category-name {
        font-size: 15px;
    }
    
    .ao-channels-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 12px;
    }
    
    .ao-category-section.expanded .ao-channels-container {
        padding: 16px;
    }
    
    .ao-channel-item {
        padding: 10px;
        min-height: 100px;
    }
    
    .ao-channel-logo-container {
        width: 50px;
        height: 35px;
    }
}

@media (max-width: 480px) {
    .ao-tv-channels {
        padding: 10px;
    }
    
    .ao-channels-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 10px;
    }
    
    .ao-channel-name {
        font-size: 11px;
    }
    
    .ao-category-meta {
        gap: 10px;
    }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.ao-category-header:focus {
    outline: 2px solid #1976d2;
    outline-offset: -2px;
}

.ao-package-tab:focus {
    outline: 2px solid #1976d2;
    outline-offset: -2px;
}

.ao-show-all-btn:focus {
    outline: 2px solid #1976d2;
    outline-offset: 2px;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .ao-tv-package-content,
    .ao-channels-container,
    .ao-category-toggle,
    .ao-channel-item,
    .ao-category-header {
        transition: none;
    }
    
    .ao-tv-package-content {
        animation: none;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .ao-tv-channels {
        box-shadow: none;
    }
    
    .ao-category-section {
        break-inside: avoid;
    }
    
    .ao-channels-container {
        max-height: none !important;
    }
    
    .ao-channels-hidden {
        display: contents !important;
    }
    
    .ao-channel-more {
        display: none;
    }
}