/* ThotPlayer — ThotPlay embed player styles. Accent comes from --tp-accent. */

/* Default accent only; the admin color is printed in a later :root rule and wins. */
:root { --tp-accent: #e9559d; }

* { margin: 0; padding: 0; box-sizing: border-box; }
/* Transparent page so the player's rounded corners show through the iframe. */
html, body { width: 100%; height: 100%; background: transparent !important; overflow: hidden; }

.tp {
	--tp-radius: 14px;
	--tp-pad: 22px;
	--tp-icon: 26px;
	--tp-play: clamp(54px, 17vmin, 84px);
	--tp-seek: clamp(42px, 12.5vmin, 62px);
	position: relative;
	width: 100%;
	height: 100%;
	background: #000;
	overflow: hidden;
	border-radius: var(--tp-radius);
	isolation: isolate;
	font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
	color: #fff;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	outline: none;
}
.tp--fs, .tp:fullscreen { --tp-radius: 0; }
.tp--hide-cursor { cursor: none; }

.tp button {
	background: none; border: 0; color: inherit; font: inherit; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	-webkit-tap-highlight-color: transparent;
}
.tp button:focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 2px; border-radius: 8px; }
.tp svg { width: 100%; height: 100%; display: block; fill: currentColor; }

/* ---------- media ---------- */
.tp__video {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: contain; background: #000;
}
.tp__surface { position: absolute; inset: 0; z-index: 2; }

/* ---------- poster (until the video first plays) ---------- */
.tp__poster {
	position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
	object-fit: contain; background: #000; pointer-events: none;
	transition: opacity .3s, visibility .3s;
}
.tp__poster--fill { object-fit: cover; }
.tp--has-played .tp__poster { opacity: 0; visibility: hidden; }

/* ---------- spinner ---------- */
.tp__spinner {
	position: absolute; top: 50%; left: 50%; z-index: 4;
	width: 52px; height: 52px; margin: -26px 0 0 -26px;
	border: 4px solid rgba(255,255,255,.18); border-top-color: var(--tp-accent);
	border-radius: 50%; animation: tp-spin .8s linear infinite;
	display: none; pointer-events: none;
}
.tp--waiting .tp__spinner { display: block; }
.tp--waiting .tp__center-play { opacity: 0; }
@keyframes tp-spin { to { transform: rotate(360deg); } }

/* ---------- center controls (⏪ ▶ ⏩) ---------- */
.tp__center {
	position: absolute; inset: 0; z-index: 5;
	display: flex; align-items: center; justify-content: center;
	gap: clamp(20px, 8vw, 72px);
	opacity: 0; pointer-events: none; transition: opacity .25s;
}
.tp--controls .tp__center, .tp--paused .tp__center { opacity: 1; }
.tp__center > button { pointer-events: auto; }
.tp:not(.tp--controls):not(.tp--paused) .tp__center > button { pointer-events: none; }
.tp.tp--menu .tp__center { opacity: 0; }
.tp.tp--menu .tp__center > button { pointer-events: none; }

/* Mostly see-through so the video stays visible; icon shadow keeps it readable on bright frames. */
.tp__center button {
	flex: none; border-radius: 50%;
	background: rgba(0,0,0,.22);
	box-shadow: 0 0 0 1.5px rgba(255,255,255,.28) inset;
	transition: transform .15s ease, background .2s, opacity .2s;
}
.tp__center button svg { filter: drop-shadow(0 1px 3px rgba(0,0,0,.55)); }
.tp__center button:hover { background: rgba(0,0,0,.32); }
.tp__center button:active { transform: scale(.9); }
.tp__seek { width: var(--tp-seek); height: var(--tp-seek); padding: calc(var(--tp-seek) * .2); }
.tp__center-play { width: var(--tp-play); height: var(--tp-play); padding: calc(var(--tp-play) * .27); }

/* Before first play / after end: solid white disc with accent icon. */
.tp:not(.tp--started) .tp__seek, .tp--ended .tp__seek { visibility: hidden; }
.tp:not(.tp--started) .tp__center-play,
.tp--ended .tp__center-play {
	--tp-play: clamp(64px, 20vmin, 96px);
	background: rgba(255,255,255,.82);
	color: var(--tp-accent);
	box-shadow: 0 8px 30px rgba(0,0,0,.28);
}
.tp:not(.tp--started) .tp__center-play svg,
.tp--ended .tp__center-play svg { filter: none; }
.tp:not(.tp--started) .tp__center-play:hover,
.tp--ended .tp__center-play:hover { background: rgba(255,255,255,.95); transform: scale(1.05); }

/* double-tap ripple */
.tp__ripple {
	position: absolute; top: 0; bottom: 0; width: 38%; z-index: 3;
	display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px;
	background: rgba(255,255,255,.1); opacity: 0; pointer-events: none;
	font-size: 13px; font-weight: 700; transition: opacity .35s;
}
.tp__ripple--l { left: 0; border-radius: 0 50% 50% 0 / 0 50% 50% 0; }
.tp__ripple--r { right: 0; border-radius: 50% 0 0 50% / 50% 0 0 50%; }
.tp__ripple svg { width: 32px; height: 32px; }
.tp__ripple.is-on { opacity: 1; transition: none; }

/* ---------- bottom bar ---------- */
.tp__bottom {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
	padding: 48px var(--tp-pad) 10px;
	background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,.22) 55%, transparent);
	opacity: 0; transform: translateY(8px); pointer-events: none;
	transition: opacity .25s, transform .25s;
}
.tp--controls .tp__bottom, .tp--paused .tp__bottom { opacity: 1; transform: none; pointer-events: auto; }

/* progress */
.tp__progress {
	position: relative; height: 18px; display: flex; align-items: center;
	cursor: pointer; touch-action: none;
}
.tp__rail {
	position: relative; width: 100%; height: 5px; border-radius: 99px;
	background: rgba(255,255,255,.28); overflow: hidden; transition: height .15s;
}
.tp__progress:hover .tp__rail, .tp__progress.is-drag .tp__rail { height: 7px; }
.tp__buffered, .tp__played { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 99px; }
.tp__buffered { background: rgba(255,255,255,.55); }
.tp__played { background: var(--tp-accent); }
.tp__knob {
	position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px;
	border-radius: 50%; background: var(--tp-accent); box-shadow: 0 0 0 3px rgba(255,255,255,.25);
	transform: scale(0); transition: transform .15s; pointer-events: none;
}
.tp__progress:hover .tp__knob, .tp__progress.is-drag .tp__knob, .tp--touch.tp--started .tp__knob { transform: scale(1); }
.tp__tip {
	position: absolute; bottom: 22px; left: 0; transform: translateX(-50%);
	background: rgba(0,0,0,.8); padding: 3px 7px; border-radius: 6px;
	font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
	opacity: 0; pointer-events: none; white-space: nowrap; transition: opacity .15s;
}
.tp__progress:hover .tp__tip, .tp__progress.is-drag .tp__tip { opacity: 1; }

/* preview thumbnail above the progress bar */
.tp__thumb {
	position: absolute; bottom: 26px; left: 0; z-index: 2; display: none;
	border-radius: 8px; overflow: hidden; background: #000; pointer-events: none;
	box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 6px 20px rgba(0,0,0,.5);
}
.tp__thumb-img { position: absolute; left: 0; top: 0; transform-origin: 0 0; background-repeat: no-repeat; }
.tp__thumb-time {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 0 3px; text-align: center;
	font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
	background: linear-gradient(transparent, rgba(0,0,0,.75));
}
.tp--thumb .tp__thumb { display: block; }
.tp--thumb .tp__tip { opacity: 0 !important; }

/* control row */
.tp__bar { display: flex; align-items: center; gap: 16px; height: 44px; }
.tp__btn { width: var(--tp-icon); height: var(--tp-icon); color: #f2f2f2; flex: none; transition: color .15s, transform .15s; }
.tp__btn:hover { color: #fff; transform: scale(1.08); }
.tp__time {
	font-size: 15px; letter-spacing: .1px; font-variant-numeric: tabular-nums; white-space: nowrap;
	line-height: 1;
}
.tp__time b { font-weight: 700; }
.tp__time span { font-weight: 400; opacity: .85; }
.tp__spacer { flex: 1; }

/* volume */
.tp__vol { display: flex; align-items: center; gap: 10px; }
.tp__vol-slider {
	position: relative; width: 84px; height: 22px; display: flex; align-items: center;
	cursor: pointer; touch-action: none;
}
.tp__vol-rail { position: relative; width: 100%; height: 5px; border-radius: 99px; background: rgba(255,255,255,.28); }
.tp__vol-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--tp-accent); }
.tp__vol-knob {
	position: absolute; top: 50%; width: 6px; height: 16px; margin: -8px 0 0 -3px;
	border-radius: 4px; background: #f4f4f4; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* control bar logo (left of settings) */
.tp__bar-logo { display: flex; align-items: center; flex: none; height: 24px; max-width: 130px; margin-right: 4px; opacity: .92; transition: opacity .15s; }
.tp__bar-logo:hover { opacity: 1; }
.tp__bar-logo img { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; -webkit-user-drag: none; }

/* settings + HD badge */
.tp__settings { position: relative; }
.tp__hd {
	position: absolute; top: -8px; right: -11px;
	background: var(--tp-accent); color: #fff; border-radius: 5px;
	font-size: 10px; font-weight: 800; line-height: 1; padding: 3px 4px;
	pointer-events: none; display: none; letter-spacing: .2px;
}
.tp--hd .tp__hd { display: block; }
.tp__settings svg { transition: transform .3s; }
.tp--menu .tp__settings svg { transform: rotate(60deg); }

/* ---------- settings menu ---------- */
.tp__menu {
	position: absolute; right: calc(var(--tp-pad) - 6px); bottom: 82px; z-index: 9;
	width: 250px; max-height: calc(100% - 96px); overflow-y: auto;
	background: rgba(22,22,26,.94); border-radius: 12px; padding: 6px;
	box-shadow: 0 10px 40px rgba(0,0,0,.5);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	opacity: 0; transform: translateY(8px) scale(.98); transform-origin: bottom right;
	pointer-events: none; transition: opacity .18s, transform .18s;
	font-size: 14px; scrollbar-width: thin;
}
.tp--menu .tp__menu { opacity: 1; transform: none; pointer-events: auto; }
.tp__menu-head {
	display: flex; align-items: center; gap: 6px; padding: 8px 10px; margin-bottom: 4px;
	border-bottom: 1px solid rgba(255,255,255,.1); font-weight: 700; cursor: pointer;
}
.tp__menu-head svg { width: 16px; height: 16px; }
.tp__item {
	display: flex !important; width: 100%; justify-content: space-between !important; gap: 16px;
	padding: 10px 12px; border-radius: 8px; text-align: left; font-size: 14px; color: #eee;
	text-decoration: none;
}
.tp__item:hover { background: rgba(255,255,255,.08); }
.tp__item-label { display: flex; align-items: center; gap: 10px; }
.tp__item-label svg { width: 18px; height: 18px; opacity: .9; }
.tp__item-val { display: flex; align-items: center; gap: 4px; color: #aaa; font-weight: 500; }
.tp__item-val svg { width: 15px; height: 15px; }
.tp__item.is-active { color: var(--tp-accent); font-weight: 700; }
.tp__item.is-active::after { content: "✓"; }
.tp__badge { background: var(--tp-accent); color: #fff; font-size: 9px; font-weight: 800; padding: 2px 4px; border-radius: 4px; margin-left: 6px; }

/* ---------- watermark ---------- */
.tp__wm { position: absolute; z-index: 5; max-height: 30%; pointer-events: none; transition: bottom .25s; }
.tp__wm img { width: 100%; height: auto; display: block; }
a.tp__wm { pointer-events: auto; }
.tp__wm--top-left { top: 14px; left: 14px; }
.tp__wm--top-right { top: 14px; right: 14px; }
.tp__wm--bottom-left { bottom: 16px; left: 14px; }
.tp__wm--bottom-right { bottom: 16px; right: 14px; }
.tp--controls .tp__wm--bottom-left, .tp--controls .tp__wm--bottom-right,
.tp--paused .tp__wm--bottom-left, .tp--paused .tp__wm--bottom-right { bottom: 84px; }

/* ---------- banner overlays ---------- */
.tp__banner {
	position: absolute; inset: 0; z-index: 12;
	display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
	background: rgba(0,0,0,.82); padding: 16px; overflow: auto;
}
.tp__banner.is-on { display: flex; }
.tp__banner-ads { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 100%; }
.tp__banner-ads img, .tp__banner-ads iframe { max-width: 100%; }
.tp__banner-close {
	background: var(--tp-accent) !important; color: #fff; border-radius: 99px !important;
	padding: 9px 22px; font-size: 14px; font-weight: 700; gap: 8px;
	box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.tp__banner-close:hover { filter: brightness(1.08); }
.tp__banner-x {
	position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; padding: 8px;
	border-radius: 50%; background: rgba(255,255,255,.12) !important;
}

/* ---------- VAST ad layer ---------- */
.tp__ad { position: absolute; inset: 0; z-index: 10; display: none; background: #000; }
.tp--ad .tp__ad { display: block; }
.tp--ad .tp__center, .tp--ad .tp__bottom, .tp--ad .tp__wm, .tp--ad .tp__menu { display: none; }
.tp__ad video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; cursor: pointer; }
.tp__ad-label {
	position: absolute; left: 14px; bottom: 16px; z-index: 2;
	background: rgba(0,0,0,.6); border-radius: 6px; padding: 5px 9px;
	font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.tp__ad-label b { background: #f5c518; color: #000; border-radius: 3px; padding: 1px 4px; margin-right: 6px; font-size: 10px; }
.tp__ad-visit {
	position: absolute; top: 12px; right: 12px; z-index: 2;
	background: rgba(0,0,0,.6) !important; border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 600;
}
.tp__ad-mute {
	position: absolute; left: 14px; top: 12px; z-index: 2; width: 36px; height: 36px; padding: 8px;
	background: rgba(0,0,0,.6) !important; border-radius: 50%;
}
.tp__ad-skip {
	position: absolute; right: 0; bottom: 18px; z-index: 2;
	background: rgba(0,0,0,.75) !important; border: 1px solid rgba(255,255,255,.35) !important; border-right: 0 !important;
	border-radius: 10px 0 0 10px; padding: 10px 16px; font-size: 14px; font-weight: 700; gap: 6px; min-width: 112px;
}
.tp__ad-skip[disabled] { cursor: default; opacity: .85; font-weight: 500; font-size: 13px; }
.tp__ad-skip:not([disabled]):hover { background: var(--tp-accent) !important; border-color: var(--tp-accent) !important; }
.tp__ad-skip svg { width: 16px; height: 16px; }
.tp__ad-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.2); z-index: 2; }
.tp__ad-bar i { display: block; height: 100%; width: 0; background: #f5c518; }

/* ---------- error ---------- */
.tp__error {
	position: absolute; inset: 0; z-index: 11; display: none; align-items: center; justify-content: center;
	background: #000; color: #bbb; font-size: 15px; text-align: center; padding: 20px;
}
.tp--error .tp__error { display: flex; }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
	.tp { --tp-pad: 16px; --tp-icon: 24px; --tp-radius: 12px; }
	.tp__bar { gap: 14px; height: 40px; }
	.tp__time { font-size: 14px; }
	.tp__vol-slider { width: 70px; }
}
@media (max-width: 520px) {
	.tp { --tp-pad: 12px; --tp-icon: 22px; --tp-radius: 10px; }
	.tp__bottom { padding: 36px var(--tp-pad) 4px; }
	.tp__bar { gap: 12px; height: 36px; }
	.tp__time { font-size: 12.5px; }
	.tp__bar-logo { height: 18px; max-width: 86px; margin-right: 2px; }
	.tp__hd { font-size: 9px; top: -7px; right: -10px; padding: 2px 3px; }
	.tp__wm--bottom-left, .tp__wm--bottom-right { bottom: 10px; }
	.tp--controls .tp__wm--bottom-left, .tp--controls .tp__wm--bottom-right,
	.tp--paused .tp__wm--bottom-left, .tp--paused .tp__wm--bottom-right { bottom: 64px; }
}
/* Short players (phones in portrait): settings menu becomes a side sheet. */
@media (max-height: 340px) {
	.tp__menu {
		bottom: 8px; right: 8px; width: min(240px, calc(100% - 16px));
		max-height: calc(100% - 16px);
	}
	.tp__item { padding: 8px 10px; }
}
/* Touch devices: system volume is used, keep only the mute button. */
.tp--touch .tp__vol-slider { display: none; }