/* Watch Player - modern 2026 style with responsive sizing */
.mmp-watch { max-width: clamp(300px, 95vw, 920px); margin: 14px auto; padding: 0 8px; }

/* Player root container - flex layout for proper stacking */
.mmp-watch-player-root { display: flex; flex-direction: column; width: 100%; position: relative; z-index: 20; }

/* Description section above the player */
.mmp-watch__description { margin-bottom: 16px; text-align: center; }
.mmp-watch__description-text { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 10px; font-size: 14px; color: rgba(255, 255, 255, 0.7); }
.mmp-watch__description-icon { font-size: 18px; }
.mmp-watch__description-label { font-weight: 500; letter-spacing: 0.5px; }
.mmp-watch__description-title { color: rgba(255, 255, 255, 0.9); font-size: 16px; font-weight: 400; line-height: 1.5; margin: 0; letter-spacing: -0.3px; }
.mmp-watch__episode-info { color: rgba(255, 255, 255, 0.75); font-size: 14px; }

.mmp-watch__tv { position: relative; width: 100%; aspect-ratio: 16/9; height: auto; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg,#0b1020 0%, #111827 100%); box-shadow: 0 12px 30px rgba(2,6,23,0.55); border: 4px solid #111; z-index: 1; }

/* add subtle antenna-like pseudo element */
.mmp-watch__tv::before { content: ''; position: absolute; top: -12px; left: 50%; width: 80px; height: 6px; background: #111; border-radius: 3px 3px 0 0; transform: translateX(-50%); }
.mmp-watch__tv::after { content: ''; position: absolute; top: -24px; left: calc(50% - 20px); width: 4px; height: 16px; background: #111; }
.mmp-watch__tv::after { right: calc(50% - 20px); left: auto; }
.mmp-watch__frame { width: 100%; height: 100%; position: relative; display: flex; align-items: center; justify-content: center; }

/* Season / Episode chooser */
.mmp-season-chooser {
	margin: 0 0 1rem 0;
}
.mmp-season-chooser-inner {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	align-items: center;
}
.mmp-season-buttons, .mmp-episode-buttons {
	display: flex;
	gap: .5rem;
	flex-wrap: nowrap;
	overflow-x: auto;
	padding: .25rem .5rem;
	-webkit-overflow-scrolling: touch;
}
.mmp-btn {
	background: #222;
	color: #fff;
	border: 0;
	padding: .5rem .75rem;
	border-radius: 999px;
	cursor: pointer;
	box-shadow: 0 1px 0 rgba(0,0,0,0.25);
	white-space: nowrap;
}
.mmp-btn.active {
	transform: translateY(-2px);
}

/* season color variable applied to active buttons */
.mmp-season-buttons .mmp-season-btn.active {
	background: var(--mmp-season-color, #ff3b3b);
	color: #071017;
}
.mmp-episode-buttons .mmp-episode-btn.active {
	background: var(--mmp-season-color, #ff3b3b);
	color: #071017;
}
.mmp-episode-btn { font-size: .95rem; }

/* ensure chooser looks good on small screens */
@media (max-width: 767px) {
	.mmp-season-chooser-inner { align-items: flex-start; }
	.mmp-season-buttons, .mmp-episode-buttons { padding-left: 0.25rem; }
}
.mmp-watch__border { pointer-events: none; position: absolute; inset: 0; border-radius: 20px; padding: 2px; background: linear-gradient(90deg, rgba(246,201,78,0.06), rgba(246,201,78,0.02)); mix-blend-mode: overlay; }
.mmp-watch__serverbar { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 10px; padding: 6px 8px; z-index: 100; width: 100%; position: relative; background: transparent; }
.mmp-watch__serverbar .mmp-server-btn { appearance:none; border: none; background: rgba(255,255,255,0.08); color: var(--color-text-primary); padding: 8px 12px; border-radius: 8px; font-size: 13px; cursor: pointer; display: inline-flex; flex-direction: column; gap:4px; align-items:center; box-shadow: 0 6px 18px rgba(0,0,0,0.45); min-width: 72px; transition: all 0.2s ease; }

/* thumbnail preview inside server button */
.mmp-server-thumb { width: 64px; height: 36px; object-fit: cover; border-radius: 4px; display: block; }
.mmp-watch__serverbar .mmp-server-btn .mmp-server-label { font-size: 12px; text-align: center; }

.mmp-watch__serverbar .mmp-server-btn.active { background: linear-gradient(90deg,var(--color-primary),var(--color-primary-light)); color:#071017; box-shadow: 0 10px 32px rgba(246,201,78,0.12); }
.mmp-server-badges { display:inline-flex; gap:6px; align-items:center; }
.mmp-badge { background: rgba(0,0,0,0.45); color: var(--color-text-primary); padding: 2px 6px; border-radius: 6px; font-size: 11px; border: 1px solid rgba(255,255,255,0.03); }
.mmp-watch__preview { position: absolute; inset: 0; display:flex; align-items:center; justify-content:center; gap:12px; flex-direction:column; z-index: 30; }
.mmp-watch__play { appearance:none; border:none; background: transparent; color:var(--color-bg-dark); width:72px; height:72px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow: 0 12px 40px rgba(246,201,78,0.12); }
.mmp-watch__play svg { display:block; width:44px; height:44px; }
.mmp-watch__play[disabled] { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.2); }
.mmp-watch__play:focus { outline: 3px solid rgba(246,201,78,0.12); }
.mmp-watch__server-label { color: var(--color-text-secondary); font-size: 13px; }
.mmp-watch__iframewrap { position:absolute; inset:0; width:100%; height:100%; display:none; z-index:10; }
.mmp-watch__iframe { position:absolute; inset:0; width:100%; height:100%; border:0; border-radius: 18px; display:block; }
.mmp-watch__overlay-controls { display: flex; justify-content: center; gap: 8px; z-index: 101; margin-top: 10px; width: 100%; position: relative; }
.mmp-watch__ctrl { background: rgba(0,0,0,0.45); color:var(--color-text-primary); border: none; padding:6px 8px; border-radius:8px; cursor:pointer; font-size:13px; min-width:40px; display:inline-flex; align-items:center; justify-content:center; }
.mmp-watch__ctrl[aria-disabled="true"] { opacity:0.5; cursor:default; }

/* smaller control buttons for compact look and placed under the TV */
.mmp-watch__ctrl svg, .mmp-watch__ctrl::before { display:inline-block; }

@media (max-width: 767px) {
	.mmp-watch__ctrl { padding:6px 8px; font-size:12px; min-width:34px; }
	.mmp-watch__serverbar { gap:8px; padding:4px 6px; }
}

/* serverbar sticky on larger screens */
@media (min-width: 768px) {
	.mmp-watch__serverbar { position: sticky; top: 12px; background: transparent; z-index: 40; }
}

/* hint text (small, elegant, muted) */
.mmp-watch__hints { text-align: center; color: rgba(255,255,255,0.75); font-size: 13px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 4px; width: 100%; position: relative; z-index: 50; }
.mmp-watch__hint{ opacity:0.9; color: rgba(255,255,255,0.85); font-size:12px; display:flex; align-items:center; gap:8px; justify-content:center; }
.mmp-watch__hint:first-child{ font-weight:600; color: rgba(255,255,255,0.95); }
.mmp-watch__hint-icon svg{ width:16px; height:16px; display:block; }
.mmp-watch__hint-icon{ display:inline-flex; align-items:center; justify-content:center; }
.mmp-watch__hint-text{ display:inline-block; }

/* make the hint icons more visible: brighter fill, subtle bg and shadow */
.mmp-watch__hint-icon{ width:28px; height:28px; border-radius:6px; background: rgba(246,201,78,0.08); box-shadow: 0 6px 14px rgba(2,6,23,0.35); display:inline-flex; align-items:center; justify-content:center; }
.mmp-watch__hint-icon svg{ width:18px; height:18px; }
.mmp-watch__hint-icon svg path{ fill: #F6C94E !important; }
.mmp-watch__hint-icon svg circle{ fill: #071017 !important; }

@media (max-width: 767px) { 
	.mmp-watch__hints { font-size: 11px; }
	.mmp-watch__description-text { font-size: 13px; margin-bottom: 8px; gap: 6px; }
	.mmp-watch__description-icon { font-size: 16px; }
	.mmp-watch__description-title { font-size: 14px; line-height: 1.4; }
	.mmp-watch__episode-info { font-size: 13px; }
}
/* lights overlay removed */
.mmp-watch__serverbar { max-width: 90%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mmp-watch__serverbar::-webkit-scrollbar{ height:6px; }
.mmp-watch__serverbar::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.04); border-radius:4px; }
.mmp-watch__error { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:30; color:var(--color-text-primary); font-weight:600; background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.6)); }

/* Loader spinner inside the player */
.mmp-watch__loader{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:45; background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.25)); }
.mmp-watch__spinner{ width:48px; height:48px; border-radius:50%; border:5px solid rgba(255,255,255,0.08); border-top-color: rgba(246,201,78,0.95); animation: mmp-spin 1s linear infinite; box-shadow: 0 6px 18px rgba(246,201,78,0.06); }
@keyframes mmp-spin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }

/* brief 'switch' pulse on the tv container */
.mmp-watch__tv.mmp-switching{ box-shadow: 0 18px 60px rgba(246,201,78,0.18), 0 2px 8px rgba(0,0,0,0.6); transform: translateY(-2px); transition: box-shadow .28s ease, transform .18s ease; }

@media (max-width: 767px) { 
	.mmp-watch__serverbar { top: 8px; } 
	.mmp-watch__play { padding: 12px 16px; } 
}

@media (prefers-reduced-motion: reduce){ .mmp-watch__play, .mmp-watch__server-btn { transition: none !important; } }

/* accessible focus */
.mmp-watch :focus { outline: 3px solid rgba(246,201,78,0.12); outline-offset:2px; }