/* ── ChannelList Frontend v1.2 ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* Default CSS variables — overridden by inline style from PHP settings */
.cl-app {
    --cl-primary:   #8b5cf6;
    --cl-primary2:  #7c3aed;
    --cl-bg:        #13111c;
    --cl-surface:   #1a1725;
    --cl-card:      #211e2e;
    --cl-border:    #2e2a42;
    --cl-text:      #ffffff;
    --cl-muted:     #6b7280;
    --cl-accent:    #a78bfa;
    --cl-radius:    8px;

    display: block;
    width: 100%;
    background: var(--cl-bg);
    border-radius: 12px;
    overflow: visible;
    font-family: 'Inter', -apple-system, sans-serif;
    color: var(--cl-text);
    padding: 0;
    margin: 0;
}
.cl-app *, .cl-app *::before, .cl-app *::after {
    box-sizing: border-box;
    font-family: inherit;
}

/* Force our styles to win over theme — use high specificity but NOT !important on colors */
#cl-app-wrap .cl-app,
.cl-app { isolation: isolate; }

/* ── TOP ROW ── */
.cl-app .cl-toprow {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 24px !important;
    background: var(--cl-surface) !important;
    border-bottom: 1px solid var(--cl-border) !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
}
.cl-app .cl-brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.cl-app .cl-brand-icon { font-size: 22px !important; line-height: 1 !important; }
.cl-app .cl-brand-text {
    font-size: 20px !important; font-weight: 800 !important;
    color: var(--cl-text) !important; letter-spacing: 1px !important;
    text-transform: uppercase !important; margin: 0 !important; padding: 0 !important;
}

/* ── RADIO BUTTONS ── */
.cl-app .cl-type-radios {
    display: flex !important; align-items: center !important; gap: 6px !important; flex-wrap: wrap !important;
}
.cl-app .cl-radio-label {
    display: inline-flex !important; align-items: center !important; gap: 8px !important;
    padding: 8px 18px !important; border-radius: 99px !important; cursor: pointer !important;
    font-size: 13px !important; font-weight: 700 !important; letter-spacing: .5px !important;
    border: 2px solid var(--cl-border) !important; color: var(--cl-muted) !important;
    background: transparent !important; transition: all .15s !important;
    white-space: nowrap !important; user-select: none !important; margin: 0 !important;
}
.cl-app .cl-radio-label input[type="radio"] {
    display: none !important; width: 0 !important; height: 0 !important;
    position: absolute !important; opacity: 0 !important;
}
.cl-app .cl-radio-dot {
    display: inline-block !important; width: 10px !important; height: 10px !important;
    border-radius: 50% !important; border: 2px solid #555 !important;
    flex-shrink: 0 !important; background: transparent !important; transition: all .15s !important;
}
.cl-app .cl-radio-label.active {
    border-color: var(--cl-primary) !important;
    color: var(--cl-text) !important;
    background: rgba(var(--cl-primary-rgb, 139,92,246), .15) !important;
}
.cl-app .cl-radio-label.active .cl-radio-dot {
    background: var(--cl-primary) !important;
    border-color: var(--cl-primary) !important;
    box-shadow: 0 0 6px var(--cl-primary) !important;
}

/* ── SPECIAL SEARCH BUTTON ── */
.cl-app .cl-special-search-btn {
    display: inline-flex !important; align-items: center !important;
    background: var(--cl-primary) !important; border: none !important;
    color: #fff !important; padding: 10px 20px !important; border-radius: 8px !important;
    font-size: 13px !important; font-weight: 700 !important; cursor: pointer !important;
    letter-spacing: .5px !important; white-space: nowrap !important; transition: all .15s !important;
    text-decoration: none !important; box-shadow: none !important;
}
.cl-app .cl-special-search-btn:hover {
    filter: brightness(0.85) !important; color: #fff !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.3) !important;
}

.cl-app .cl-divider { height: 1px !important; background: var(--cl-border) !important; margin: 0 !important; }

/* ── CATEGORY TABS ── */
.cl-app .cl-cats-row {
    display: flex !important; align-items: center !important; flex-wrap: wrap !important;
    gap: 6px !important; padding: 14px 24px !important;
    background: var(--cl-surface) !important; border-bottom: 1px solid var(--cl-border) !important;
    margin: 0 !important; list-style: none !important;
}
.cl-app .cl-cat-tab {
    display: inline-flex !important; align-items: center !important;
    padding: 7px 16px !important; border-radius: 99px !important;
    border: 1px solid var(--cl-border) !important; background: transparent !important;
    color: var(--cl-muted) !important; font-size: 11px !important; font-weight: 600 !important;
    cursor: pointer !important; transition: all .15s !important; white-space: nowrap !important;
    text-transform: uppercase !important; letter-spacing: .4px !important;
    text-decoration: none !important; box-shadow: none !important; outline: none !important; margin: 0 !important;
}
.cl-app .cl-cat-tab:hover {
    color: var(--cl-text) !important; border-color: #555 !important;
    background: rgba(255,255,255,.05) !important;
}
.cl-app .cl-cat-tab.active {
    background: var(--cl-primary) !important; border-color: var(--cl-primary) !important;
    color: #fff !important; box-shadow: 0 2px 10px rgba(0,0,0,.3) !important;
}

/* More dropdown */
.cl-app .cl-more-wrap { position: relative !important; display: inline-block !important; }
.cl-app .cl-more-btn {
    display: inline-flex !important; align-items: center !important;
    padding: 7px 14px !important; border-radius: 99px !important;
    border: 1px solid var(--cl-primary) !important; background: var(--cl-primary) !important;
    color: #fff !important; font-size: 11px !important; font-weight: 700 !important;
    cursor: pointer !important; letter-spacing: .4px !important; text-transform: uppercase !important;
}
.cl-app .cl-more-dropdown {
    position: absolute !important; top: calc(100% + 6px) !important; left: 0 !important;
    background: var(--cl-card) !important; border: 1px solid var(--cl-border) !important;
    border-radius: 8px !important; min-width: 200px !important; z-index: 99999 !important;
    padding: 6px !important; box-shadow: 0 8px 24px rgba(0,0,0,.6) !important;
    max-height: 280px !important; overflow-y: auto !important;
}
.cl-app .cl-more-item { display: block !important; width: 100% !important; text-align: left !important; padding: 8px 12px !important; border-radius: 5px !important; margin-bottom: 2px !important; }

/* ── SEARCH ROW ── */
.cl-app .cl-search-row {
    padding: 20px 24px !important; background: var(--cl-surface) !important;
    border-bottom: 1px solid var(--cl-border) !important; text-align: center !important; margin: 0 !important;
}
.cl-app .cl-search-wrap {
    display: inline-flex !important; align-items: stretch !important;
    max-width: 600px !important; width: 100% !important;
    border-radius: 8px !important; overflow: hidden !important;
    border: 2px solid var(--cl-primary) !important;
}
.cl-app .cl-search-input {
    flex: 1 !important; padding: 12px 18px !important; background: #fff !important;
    border: none !important; outline: none !important; color: #111 !important;
    font-size: 14px !important; min-width: 0 !important; height: auto !important; box-shadow: none !important; border-radius: 0 !important;
}
.cl-app .cl-search-input::placeholder { color: #aaa !important; }
.cl-app .cl-search-btn {
    padding: 12px 24px !important; background: var(--cl-primary) !important;
    border: none !important; color: #fff !important; font-size: 13px !important;
    font-weight: 700 !important; cursor: pointer !important; white-space: nowrap !important;
    border-radius: 0 !important; transition: background .15s !important;
    letter-spacing: .5px !important; flex-shrink: 0 !important;
}
.cl-app .cl-search-btn:hover { filter: brightness(0.85) !important; }

/* Search results header */
.cl-app .cl-search-results-header {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    padding: 10px 24px !important; background: rgba(255,255,255,.04) !important;
    border-bottom: 1px solid var(--cl-border) !important; flex-wrap: wrap !important; gap: 8px !important;
}
.cl-app .cl-search-results-label { font-size: 13px !important; color: var(--cl-accent) !important; }
.cl-app .cl-search-results-label strong { color: var(--cl-text) !important; font-weight: 700 !important; }
.cl-app .cl-clear-search-btn {
    background: rgba(255,255,255,.08) !important; border: 1px solid var(--cl-border) !important;
    color: var(--cl-accent) !important; padding: 5px 12px !important; border-radius: 99px !important;
    font-size: 12px !important; font-weight: 600 !important; cursor: pointer !important; transition: all .15s !important;
}
.cl-app .cl-clear-search-btn:hover { background: var(--cl-primary) !important; color: #fff !important; border-color: var(--cl-primary) !important; }

/* ── GRID ── */
.cl-app .cl-grid-wrap { padding: 24px !important; background: var(--cl-bg) !important; margin: 0 !important; }
.cl-app .cl-cards-grid {
    display: grid !important; grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important; margin-bottom: 24px !important; list-style: none !important; padding: 0 !important;
}
@media (max-width: 960px) { .cl-app .cl-cards-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px) { .cl-app .cl-cards-grid { grid-template-columns: 1fr !important; } }

/* ── CHANNEL CARD ── */
.cl-app .cl-channel-card {
    display: flex !important; flex-direction: column !important;
    background: var(--cl-card) !important; border: 1px solid var(--cl-border) !important;
    border-radius: 10px !important; overflow: hidden !important;
    transition: all .2s !important; cursor: default !important;
    margin: 0 !important; padding: 0 !important; list-style: none !important;
}
.cl-app .cl-channel-card:hover {
    border-color: var(--cl-primary) !important; transform: translateY(-3px) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.4) !important;
}
.cl-app .cl-card-top {
    display: flex !important; align-items: center !important; gap: 12px !important;
    padding: 16px !important; flex: 1 !important; background: var(--cl-card) !important; min-height: 100px !important;
}
.cl-app .cl-card-logo {
    width: 56px !important; height: 56px !important; border-radius: 8px !important;
    object-fit: contain !important; background: rgba(255,255,255,.06) !important;
    padding: 7px !important; border: 1px solid rgba(255,255,255,.08) !important;
    flex-shrink: 0 !important; display: block !important;
}
.cl-app .cl-card-logo-placeholder {
    width: 56px !important; height: 56px !important; border-radius: 8px !important; flex-shrink: 0 !important;
    background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.07) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 9px !important; color: #555 !important; font-weight: 600 !important;
    text-align: center !important; line-height: 1.3 !important; padding: 6px !important;
}
.cl-app .cl-card-logo-placeholder.cl-no-img {
    background: #3a0a0a !important; border: 1px solid #7f1d1d !important;
    color: #f87171 !important; font-size: 8px !important; font-weight: 700 !important;
    letter-spacing: .3px !important; text-transform: uppercase !important;
}
.cl-app .cl-card-info { flex: 1 !important; overflow: hidden !important; min-width: 0 !important; }
.cl-app .cl-card-name {
    font-size: 13px !important; font-weight: 600 !important; color: var(--cl-text) !important;
    display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
    overflow: hidden !important; line-height: 1.4 !important; margin: 0 0 8px 0 !important;
    padding: 0 !important; text-decoration: none !important;
}
.cl-app .cl-card-badge {
    display: inline-block !important; font-size: 10px !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: .5px !important;
    padding: 3px 10px !important; border-radius: 4px !important;
    background: rgba(255,255,255,.1) !important; color: var(--cl-accent) !important;
    border: 1px solid rgba(255,255,255,.1) !important; margin: 0 !important;
}
.cl-app .cl-card-bottom {
    padding: 12px 16px !important; border-top: 1px solid var(--cl-border) !important;
    background: rgba(0,0,0,.25) !important; margin: 0 !important;
}
/* Watch Now button — uses primary color */
.cl-app .cl-watch-btn {
    display: flex !important; align-items: center !important; justify-content: center !important;
    gap: 8px !important; width: 100% !important; padding: 11px !important;
    border: none !important; border-radius: 7px !important;
    background: var(--cl-primary) !important; color: #fff !important;
    font-size: 13px !important; font-weight: 700 !important; letter-spacing: .5px !important;
    cursor: pointer !important; transition: all .2s !important; text-transform: uppercase !important;
    text-decoration: none !important; box-shadow: none !important; outline: none !important; margin: 0 !important;
}
.cl-app .cl-watch-btn:hover {
    filter: brightness(0.85) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.4) !important; color: #fff !important;
}

/* ── LOADING ── */
.cl-app .cl-loading-state {
    grid-column: 1 / -1 !important; display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    padding: 80px 20px !important; gap: 14px !important;
}
.cl-app .cl-spinner {
    width: 36px !important; height: 36px !important;
    border: 3px solid rgba(255,255,255,.1) !important;
    border-top-color: var(--cl-primary) !important;
    border-radius: 50% !important; animation: cl_spin .7s linear infinite !important; display: block !important;
}
@keyframes cl_spin { to { transform: rotate(360deg); } }
.cl-app .cl-loading-state p { font-size: 13px !important; color: var(--cl-muted) !important; margin: 0 !important; }
.cl-app .cl-no-results { grid-column: 1 / -1 !important; text-align: center !important; padding: 60px !important; color: var(--cl-muted) !important; font-size: 14px !important; }

/* ── PAGINATION ── */
.cl-app .cl-pagination {
    display: flex !important; align-items: center !important; justify-content: center !important;
    flex-wrap: wrap !important; gap: 6px !important; padding: 8px 0 4px !important;
    list-style: none !important; margin: 0 !important;
}
.cl-app .cl-page-btn {
    width: 36px !important; height: 36px !important; border-radius: 99px !important;
    border: 2px solid var(--cl-border) !important; background: var(--cl-card) !important;
    color: var(--cl-muted) !important; cursor: pointer !important; font-size: 13px !important;
    font-weight: 700 !important; transition: all .15s !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    padding: 0 !important; margin: 0 !important; text-decoration: none !important;
}
.cl-app .cl-page-btn:hover { border-color: var(--cl-primary) !important; color: var(--cl-primary) !important; }
.cl-app .cl-page-btn.active {
    background: var(--cl-primary) !important; border-color: var(--cl-primary) !important;
    color: #fff !important; box-shadow: 0 2px 12px rgba(0,0,0,.3) !important;
}
.cl-app .cl-page-dots { color: var(--cl-muted) !important; padding: 0 4px !important; font-size: 14px !important; line-height: 36px !important; }

/* ── MODAL ── */
.cl-app .cl-modal-overlay { display: none; }
.cl-app .cl-modal-overlay.cl-is-open {
    position: fixed !important; inset: 0 !important; background: rgba(0,0,0,.8) !important;
    z-index: 999999 !important; display: flex !important; align-items: center !important;
    justify-content: center !important; padding: 20px !important;
}
.cl-app .cl-modal-box {
    background: var(--cl-surface) !important; border: 1px solid var(--cl-border) !important;
    border-radius: 12px !important; width: 100% !important; max-width: 700px !important;
    max-height: 80vh !important; display: flex !important; flex-direction: column !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.7) !important; overflow: hidden !important;
}
.cl-app .cl-modal-header {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    padding: 18px 22px !important; border-bottom: 1px solid var(--cl-border) !important; flex-shrink: 0 !important;
}
.cl-app .cl-modal-header h3 { font-size: 16px !important; font-weight: 700 !important; color: var(--cl-text) !important; margin: 0 !important; padding: 0 !important; }
.cl-app .cl-modal-close {
    background: none !important; border: none !important; color: var(--cl-muted) !important;
    font-size: 20px !important; cursor: pointer !important; padding: 4px 8px !important;
    border-radius: 4px !important; line-height: 1 !important; transition: all .15s !important;
}
.cl-app .cl-modal-close:hover { color: var(--cl-text) !important; background: rgba(255,255,255,.1) !important; }
.cl-app .cl-modal-body { padding: 20px 22px !important; overflow-y: auto !important; flex: 1 !important; }
.cl-app .cl-modal-search-row { display: flex !important; gap: 8px !important; margin-bottom: 18px !important; }
.cl-app .cl-modal-input {
    flex: 1 !important; padding: 10px 14px !important; background: #fff !important;
    border: 1px solid #ddd !important; border-radius: 7px !important; color: #111 !important;
    font-size: 14px !important; outline: none !important; min-width: 0 !important;
}
.cl-app .cl-modal-search-btn {
    padding: 10px 20px !important; background: var(--cl-primary) !important; border: none !important;
    border-radius: 7px !important; color: #fff !important; font-weight: 700 !important;
    cursor: pointer !important; font-size: 14px !important; white-space: nowrap !important; flex-shrink: 0 !important;
}
.cl-app .cl-modal-search-btn:hover { filter: brightness(0.85) !important; }
.cl-app .cl-modal-results-heading {
    padding: 0 0 14px !important; font-size: 13px !important; color: var(--cl-muted) !important;
    border-bottom: 1px solid var(--cl-border) !important; margin-bottom: 16px !important;
}
.cl-app .cl-modal-results-heading strong { color: var(--cl-accent) !important; }
.cl-app .cl-modal-section { margin-bottom: 22px !important; }
.cl-app .cl-modal-section-title {
    font-size: 12px !important; font-weight: 700 !important; color: var(--cl-accent) !important;
    padding: 8px 0 10px !important; border-bottom: 1px solid var(--cl-border) !important;
    margin-bottom: 12px !important; text-transform: uppercase !important; letter-spacing: .5px !important;
}
.cl-app .cl-modal-grid {
    display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important;
}
.cl-app .cl-modal-empty-state { padding: 20px !important; text-align: center !important; }
.cl-app .cl-modal-back-btn {
    background: rgba(255,255,255,.08) !important; border: 1px solid var(--cl-border) !important;
    color: var(--cl-accent) !important; padding: 3px 10px !important; border-radius: 99px !important;
    font-size: 11px !important; font-weight: 600 !important; cursor: pointer !important;
    margin-left: 10px !important; vertical-align: middle !important; transition: all .15s !important;
}
.cl-app .cl-modal-back-btn:hover { background: var(--cl-primary) !important; color: #fff !important; border-color: var(--cl-primary) !important; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .cl-app .cl-toprow  { padding: 14px 16px !important; }
    .cl-app .cl-cats-row { padding: 10px 14px !important; }
    .cl-app .cl-search-row { padding: 14px 16px !important; }
    .cl-app .cl-grid-wrap { padding: 14px !important; }
    .cl-app .cl-brand-text { font-size: 16px !important; }
    .cl-app .cl-radio-label { padding: 6px 10px !important; font-size: 11px !important; }
    .cl-app .cl-special-search-btn { padding: 8px 12px !important; font-size: 11px !important; }
    .cl-app .cl-modal-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
    .cl-app .cl-modal-grid { grid-template-columns: 1fr !important; }
}

/* Watch Now as link */
.cl-app a.cl-watch-btn {
    display: flex !important; text-align: center !important; text-decoration: none !important;
}