/* Cartoons.lk System plugin — visual skin (loaded on single posts only).
   Scope: every rule is prefixed with .cl-theme so it beats the plugin's own
   single-class rules (printed later, in the footer) by specificity, without
   !important and without touching markup, class names or data attributes.
   Changes here are cosmetic only: colours, borders, radii, typography,
   spacing. Positioning, display toggling and z-index of the plugin's
   overlays are left exactly as the plugin sets them. */

/* ---------- Container (single + series) */
.cl-theme .movie-download-container {
	max-width: none; margin: 0; padding: 0; border-radius: 0; box-shadow: none;
	background: transparent; text-align: left; overflow: visible;
}
.cl-theme .movie-title-glow { margin-bottom: var(--cl-s4); }
.cl-theme .movie-title {
	margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; text-shadow: none;
	color: var(--cl-text-2); font-size: var(--cl-fs-sm); font-weight: 600; line-height: 1.5;
}
.cl-theme .episodes-count { margin: var(--cl-s1) 0 0; color: var(--cl-muted); font-size: var(--cl-fs-xs); }
.cl-theme .download-buttons { flex-direction: row; flex-wrap: wrap; gap: var(--cl-s3); }
.cl-theme .btn-glow { display: none; }

.cl-theme .download-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--cl-s2);
	min-height: 50px; padding: 0 var(--cl-s6); border-radius: var(--cl-radius-sm);
	border: 1px solid var(--cl-line-strong); background: var(--cl-surface-3); color: var(--cl-text);
	font: 700 var(--cl-fs-md)/1 var(--cl-font); backdrop-filter: none; box-shadow: none;
	transition: background-color .15s var(--cl-ease), border-color .15s var(--cl-ease);
}
.cl-theme .download-btn:hover { background: var(--cl-surface-2); border-color: var(--cl-text-2); box-shadow: none; }
.cl-theme .watch-online-btn { background: #fff; border-color: #fff; color: #000; }
.cl-theme .watch-online-btn:hover { background: rgba(255, 255, 255, .8); border-color: transparent; }
.cl-theme .download-btn.direct-download-btn { background: rgba(109, 109, 110, .7); border-color: transparent; }
.cl-theme .download-btn.direct-download-btn:hover { background: rgba(109, 109, 110, .45); border-color: transparent; }
/* Icons (CSS only; plugin markup untouched). */
.cl-theme .watch-online-btn .btn-text::before, .cl-theme .direct-download-btn .btn-text::before, .cl-theme .episode-popup-btn .btn-text::before {
	content: ""; display: inline-block; width: 1.15em; height: 1.15em; margin-right: .45em; vertical-align: -.2em; background: currentColor;
	-webkit-mask: var(--cl-ico) center / contain no-repeat; mask: var(--cl-ico) center / contain no-repeat;
}
.cl-theme .watch-online-btn, .cl-theme .episode-popup-btn.watch { --cl-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l13-7.5z'/%3E%3C/svg%3E"); }
.cl-theme .direct-download-btn, .cl-theme .episode-popup-btn.download { --cl-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v10.2l3.6-3.6 1.4 1.4-6 6-6-6 1.4-1.4 3.6 3.6zM5 19h14v2H5z'/%3E%3C/svg%3E"); }
/* Movie panel: the info line is metadata, not a second headline. */
.cl-theme .single-movie .movie-title { font-size: .875rem; font-weight: 500; color: var(--cl-muted); }
@media (max-width: 479px) { .cl-theme .download-buttons .download-btn { flex: 1 1 100%; } }

/* ---------- Episode buttons (plugin popup AND the theme's inline list) */
.cl-theme .episode-popup-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-height: 38px; padding: 0 var(--cl-s4); border: 1px solid transparent; border-radius: var(--cl-radius-sm);
	font: 700 var(--cl-fs-xs)/1 var(--cl-font); cursor: pointer; background: none;
}
.cl-theme .episode-popup-btn.watch { background: var(--cl-accent); color: var(--cl-accent-ink); }
.cl-theme .episode-popup-btn.watch:hover { background: var(--cl-accent-hover); }
.cl-theme .episode-popup-btn.download { background: var(--cl-surface-3); border-color: var(--cl-line-strong); color: var(--cl-text); }
.cl-theme .episode-popup-btn.download:hover { border-color: var(--cl-text-2); }
.cl-theme .full-series-btn { min-height: 38px; padding: 0 var(--cl-s4); font-size: var(--cl-fs-xs); }

/* ---------- Episodes popup */
.cl-theme .episodes-popup-overlay { background: rgba(0, 0, 0, .86); backdrop-filter: none; }
.cl-theme .episodes-popup-content {
	background: var(--cl-surface); border: 1px solid var(--cl-line-strong); border-radius: 10px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, .6);
}
.cl-theme .popup-header { border-bottom: 1px solid var(--cl-line); }
.cl-theme .popup-header h3 { color: var(--cl-text); text-shadow: none; font-size: var(--cl-fs-lg); }
.cl-theme .popup-close, .cl-theme .ws-picker-close, .cl-theme .modal-close {
	background: var(--cl-surface-3); color: var(--cl-text); border: 1px solid var(--cl-line-strong); box-shadow: none;
}
.cl-theme .popup-close:hover, .cl-theme .ws-picker-close:hover, .cl-theme .modal-close:hover { background: var(--cl-surface-2); color: var(--cl-text); }
.cl-theme .episode-popup-item { background: var(--cl-bg); border: 1px solid var(--cl-line); border-radius: var(--cl-radius-sm); }
.cl-theme .episode-popup-item:hover { border-color: var(--cl-line-strong); transform: none; }
.cl-theme .episode-popup-title { color: var(--cl-text); font-size: var(--cl-fs-sm); }
.cl-theme .episode-popup-info { color: var(--cl-muted); }

/* ---------- Quality picker + server picker */
.cl-theme .quality-picker, .cl-theme .ws-picker-modal {
	background: var(--cl-surface-2); border: 1px solid var(--cl-line-strong); border-radius: 10px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, .65);
}
.cl-theme .quality-picker-overlay, .cl-theme .ws-picker-overlay { background: rgba(0, 0, 0, .8); backdrop-filter: none; }
.cl-theme .quality-picker-title, .cl-theme .ws-picker-title { color: var(--cl-text); text-shadow: none; }
.cl-theme .ws-picker-subtitle, .cl-theme .ws-picker-hint, .cl-theme .qp-size, .cl-theme .ws-picker-size { color: var(--cl-muted); }
.cl-theme .quality-picker-item, .cl-theme .ws-picker-item {
	background: var(--cl-surface); border: 1px solid var(--cl-line); border-radius: var(--cl-radius-sm); color: var(--cl-text); box-shadow: none;
}
.cl-theme .quality-picker-item:hover, .cl-theme .ws-picker-item:hover { background: var(--cl-surface-3); border-color: var(--cl-accent); color: var(--cl-text); box-shadow: none; }
.cl-theme .ws-picker-item:focus-visible { outline: 3px solid var(--cl-focus); outline-offset: 2px; }
.cl-theme .ws-picker-icon { color: var(--cl-accent); background: var(--cl-accent-soft); border-color: transparent; box-shadow: none; }

/* ---------- Wait / fallback overlays */
.cl-theme .download-wait-overlay, .cl-theme .watch-wait-overlay { background: rgba(0, 0, 0, .86); backdrop-filter: none; }
.cl-theme .download-wait-box, .cl-theme .watch-wait-box {
	background: var(--cl-surface); border: 1px solid var(--cl-line-strong); border-radius: 10px; box-shadow: 0 24px 64px rgba(0, 0, 0, .6);
}
.cl-theme .download-wait-text, .cl-theme .watch-wait-title { color: var(--cl-text); text-shadow: none; }
.cl-theme .download-wait-sub { color: var(--cl-text-2); }
.cl-theme .loader { color: var(--cl-accent); }
.cl-theme .loader.size-4 { color: currentColor; }

/* ---------- Watch modal + player chrome */
.cl-theme .watch-modal { background: rgba(4, 6, 10, .96); }
.cl-theme .watch-modal-content { background: #000; border: 1px solid var(--cl-line); box-shadow: 0 24px 80px rgba(0, 0, 0, .8); }
.cl-theme .modal-episodes-btn { background: var(--cl-surface-3); color: var(--cl-text); border: 1px solid var(--cl-line-strong); box-shadow: none; }
.cl-theme .modal-episodes-btn:hover { background: var(--cl-surface-2); }
.cl-theme .cvp-progress-fill { background: var(--cl-accent); }
.cl-theme .watch-switching-overlay { background: rgba(4, 6, 10, .82); }

/* ---------- Player modal: episode bar (theme, inserted above the plugin's player) */
.cl-theme .cl-pbar {
	display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 112px 8px 16px;
	background: #0b0b0b; border-bottom: 1px solid var(--cl-line); color: var(--cl-text);
}
.cl-theme .cl-pbar__title { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: .9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-theme .cl-pbar__nav { display: flex; gap: 6px; flex: 0 0 auto; }
.cl-theme .cl-pbar__btn {
	min-height: 34px; padding: 0 12px; border: 1px solid var(--cl-line-strong); border-radius: var(--cl-radius-sm);
	background: #1f1f1f; color: var(--cl-text); font: 600 .8125rem/1 var(--cl-font); cursor: pointer;
}
.cl-theme .cl-pbar__btn:hover:not(:disabled) { background: #333; }
.cl-theme .cl-pbar__btn--next { background: #fff; color: #000; border-color: #fff; }
.cl-theme .cl-pbar__btn--next:hover:not(:disabled) { background: rgba(255, 255, 255, .8); }
.cl-theme .cl-pbar__btn:disabled { opacity: .35; cursor: default; }
@media (max-width: 599px) {
	.cl-theme .cl-pbar { flex-wrap: wrap; padding: 8px 12px; }
	/* Title row leaves room for the plugin's Episodes (☰) and Close (×) buttons. */
	.cl-theme .cl-pbar__title { flex-basis: 100%; padding-right: 104px; line-height: 36px; }
	.cl-theme .cl-pbar__nav { flex: 1 1 100%; }
	.cl-theme .cl-pbar__btn { flex: 1 1 0; }
}

/* ---------- Plugin's own <video> player: theme extras */
.cl-theme .cvp:focus { outline: none; }
/* Keyboard focus is always visible on the player's controls (white ring on the dark player;
   the container itself takes programmatic focus only, so it stays without a ring). */
.cl-theme .cvp button:focus-visible, .cl-theme .cvp input:focus-visible, .cl-theme .cvp [tabindex]:not(.cvp):focus-visible {
	outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(0, 0, 0, .6);
}
.cl-theme .cl-cvp-menu__item:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
/* The player area is always black: no poster, artwork or image behind the video. */
.cl-theme .cvp, .cl-theme .cvp video { background: #000; }
.cl-theme .cvp-progress { height: 5px; transition: height .15s ease; touch-action: none; }
.cl-theme .cvp-progress:hover, .cl-theme .cvp-progress.is-dragging, .cl-theme .cvp-progress:focus-visible { height: 8px; }
.cl-theme .cl-cvp-buf { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: rgba(255, 255, 255, .35); pointer-events: none; }
.cl-theme .cvp-progress-fill { z-index: 1; }
.cl-theme .cl-cvp-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.cl-theme .cvp-time { flex: 0 0 auto; margin-left: 4px; white-space: nowrap; font: 500 .8125rem/1 var(--cl-font); font-variant-numeric: tabular-nums; }
@media (max-width: 479px) { .cl-theme .cvp-row { gap: 8px; } .cl-theme .cvp-time { font-size: .8125rem; } }
.cl-theme .cl-cvp-speed { min-width: 44px; font: 700 .875rem/1 var(--cl-font); }
.cl-theme .cl-cvp-mute svg { width: 24px; height: 24px; }
.cl-theme .cl-cvp-vol { width: 84px; accent-color: #fff; }
@media (hover: none) { .cl-theme .cl-cvp-vol { display: none; } }
.cl-theme .cl-cvp-spin {
	position: absolute; left: 50%; top: 50%; z-index: 4; width: 52px; height: 52px; margin: -26px 0 0 -26px; pointer-events: none;
	border: 4px solid rgba(255, 255, 255, .25); border-top-color: #fff; border-radius: 50%; animation: cl-spin .8s linear infinite;
}
@keyframes cl-spin { to { rotate: 360deg; } }
.cl-theme .cl-cvp-msg {
	position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
	padding: 24px; background: rgba(0, 0, 0, .86); text-align: center;
}
.cl-theme .cl-cvp-msg[hidden], .cl-theme .cl-cvp-spin[hidden], .cl-theme .cl-cvp-toast[hidden], .cl-theme .cl-cvp-next[hidden] { display: none; }
.cl-theme .cl-cvp-msg .cl-state { max-width: 52ch; }
.cl-theme .cl-cvp-msg .cl-state__actions .cl-btn--ghost { background: rgba(255, 255, 255, .14); }
@media (max-width: 479px) { .cl-theme .cl-cvp-msg { padding: 12px; } .cl-theme .cl-cvp-msg .cl-state__icon { display: none; } .cl-theme .cl-cvp-msg .cl-state__text { font-size: .8125rem; } }
.cl-theme .cl-frame-hint { padding: 12px 16px; background: #1f1f1f; border-bottom: 1px solid var(--cl-line); }
.cl-theme .cl-notice__box .cl-state { justify-items: start; text-align: left; max-width: none; }
.cl-theme .cl-notice__box .cl-state__actions { justify-content: flex-end; width: 100%; }
.cl-theme .cl-notice__box .cl-state__text { white-space: pre-line; }
.cl-theme .cl-cvp-msg__title { margin: 0; font-size: 1.125rem; font-weight: 700; }
.cl-theme .cl-cvp-msg__text { margin: 0; max-width: 44ch; color: var(--cl-text-2); font-size: .9375rem; }
.cl-theme .cl-cvp-msg__btn, .cl-theme .cl-cvp-toast__btn, .cl-theme .cl-cvp-next__go, .cl-theme .cl-cvp-next__cancel {
	min-height: 40px; padding: 0 18px; border: 0; border-radius: var(--cl-radius-sm); cursor: pointer; font: 700 .9375rem/1 var(--cl-font);
	background: #fff; color: #000;
}
.cl-theme .cl-cvp-msg__btn--alt { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
.cl-theme .cl-cvp-toast {
	position: absolute; left: 50%; top: 16px; z-index: 5; translate: -50% 0; display: flex; align-items: center; gap: 12px;
	padding: 8px 10px 8px 16px; border-radius: var(--cl-radius); background: rgba(20, 20, 20, .9); color: #fff; font-size: .9375rem; white-space: nowrap;
}
.cl-theme .cl-cvp-toast__btn { min-height: 32px; padding: 0 12px; font-size: .8125rem; background: rgba(255, 255, 255, .16); color: #fff; }
.cl-theme .cl-cvp-next { position: absolute; right: 16px; bottom: 84px; z-index: 5; display: flex; gap: 8px; }
.cl-theme .cl-cvp-next__go { min-height: 48px; }
.cl-theme .cl-cvp-next__sec { font-weight: 500; color: #555; }
.cl-theme .cl-cvp-next__cancel { min-height: 48px; background: rgba(255, 255, 255, .16); color: #fff; }
.cl-theme .cvp:fullscreen { width: 100%; height: 100%; }

/* Series (single.php always prints the Episodes section for them): it replaces the
   plugin's on-page "Select Episode" block. Hidden visually only: the container, its title and the popup stay in the
   DOM, so the plugin (and its in-player Episodes button) works unchanged. */
.cl-theme .cl-actions--series .movie-download-container .download-buttons-wrapper { display: none; }
.cl-theme .cl-actions--series > .cl-section-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.cl-theme .cl-actions--series .cl-episodes { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------- Styled notice (theme; used once the proposed plugin hook exists) */
.cl-theme .cl-notice { position: fixed; inset: 0; z-index: 10050; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .7); }
.cl-theme .cl-notice__box {
	width: min(440px, 100%); padding: 22px 22px 18px; border-radius: var(--cl-radius); background: #1f1f1f;
	border: 1px solid var(--cl-line-strong); box-shadow: 0 24px 64px rgba(0, 0, 0, .6);
}
.cl-theme .cl-notice__title { margin: 0 0 8px; font-size: 1.125rem; font-weight: 700; }
.cl-theme .cl-notice__text { margin: 0 0 6px; color: var(--cl-text-2); font-size: .9375rem; line-height: 1.5; white-space: pre-line; }
.cl-theme .cl-notice__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ---------- R2 player: quality + subtitle menus */
.cl-theme .cl-cvp-pop { position: relative; }
.cl-theme .cl-cvp-popbtn { min-width: 44px; font: 700 .8125rem/1 var(--cl-font); padding: 6px 8px; border-radius: 4px; }
.cl-theme .cl-cvp-popbtn:disabled { opacity: .85; cursor: default; }
.cl-theme .cl-cvp-subs .cl-cvp-popbtn { border: 1.5px solid rgba(255, 255, 255, .7); padding: 3px 6px; }
.cl-theme .cl-cvp-subs .cl-cvp-popbtn.is-on { background: #fff; color: #000; border-color: #fff; }
.cl-theme .cl-cvp-menu {
	position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 7; min-width: 140px; padding: 6px 0;
	background: rgba(20, 20, 20, .97); border: 1px solid var(--cl-line-strong); border-radius: 6px; box-shadow: 0 12px 30px rgba(0, 0, 0, .6);
}
.cl-theme .cl-cvp-menu[hidden] { display: none; }
.cl-theme .cl-cvp-menu__item {
	display: block; width: 100%; padding: 9px 16px 9px 34px; border: 0; background: none; color: var(--cl-text-2);
	font: 500 .9375rem/1.2 var(--cl-font); text-align: left; cursor: pointer; position: relative;
}
.cl-theme .cl-cvp-menu__item:hover, .cl-theme .cl-cvp-menu__item:focus-visible { background: #333; color: #fff; }
.cl-theme .cl-cvp-menu__item[aria-checked="true"] { color: #fff; font-weight: 700; }
.cl-theme .cl-cvp-menu__item[aria-checked="true"]::before { content: "✓"; position: absolute; left: 12px; color: var(--cl-accent); }
.cl-theme video::cue { background: rgba(0, 0, 0, .72); color: #fff; font-family: var(--cl-font); }
.cl-theme .cl-cvp-pop[hidden] { display: none; }
.cl-theme .cl-cvp-quality .cl-cvp-popbtn { white-space: nowrap; }