/* =========================================================
   Custom changes — header color/theme picker + servers box redesign
   ========================================================= */

/* ---------- Header icon (shared look for the picker toggle) ---------- */
.dt-qicon{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	width:34px;
	height:34px;
	border-radius:50%;
	background:rgba(255,255,255,.08);
	color:#c7c9d1;
	font-size:14px;
	transition:.2s;
}
.dt-qicon:hover{
	background:rgba(255,255,255,.16);
	color:#fff;
}

/* ---------- Notification bell ---------- */
.dt-notify{
	position:relative;
	float:left;
	height:70px;
	display:flex;
	align-items:center;
	margin-right:8px;
}
.dt-notify-mobile{
	float:none;
	position:absolute;
	top:0;
	left:96px;
	height:auto;
	margin:0;
}
.dt-notify-mobile .dt-qicon{
	width:auto;
	height:auto;
	padding:18px 12px;
	border-radius:0;
	background:none;
}
.dt-notify-toggle{
	position:relative;
}
.dt-notify-badge{
	position:absolute;
	top:-4px;
	right:-4px;
	min-width:16px;
	height:16px;
	padding:0 3px;
	border-radius:50%;
	background:#e5484d;
	color:#fff;
	font-size:10px;
	font-weight:700;
	line-height:16px;
	text-align:center;
}
.dt-notify-drop{
	display:none;
	position:fixed;
	width:280px;
	max-height:80vh;
	overflow-y:auto;
	background:#151823;
	border:1px solid rgba(255,255,255,.08);
	border-radius:10px;
	padding:16px;
	box-shadow:0 15px 40px rgba(0,0,0,.5);
	z-index:99999;
}
.dt-notify.active .dt-notify-drop{
	display:block;
}
.dt-notify-list{
	list-style:none;
	margin:0;
	padding:0;
}
.dt-notify-item{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:6px;
	padding:12px 4px;
	border-bottom:1px solid rgba(255,255,255,.06);
	text-align:center;
}
.dt-notify-item:last-child{
	border-bottom:none;
}
.dt-notify-dot{
	flex-shrink:0;
	width:9px;
	height:9px;
	border-radius:50%;
}
.dt-notify-red .dt-notify-dot{ background:#e5484d; }
.dt-notify-blue .dt-notify-dot{ background:#408BEA; }
.dt-notify-green .dt-notify-dot{ background:#22C55E; }
.dt-notify-yellow .dt-notify-dot{ background:#F5A623; }
.dt-notify-gray .dt-notify-dot{ background:#9AA0AC; }
.dt-notify-text{
	flex:1;
	width:100%;
	font-size:13px;
	line-height:1.6;
	color:#e7e8ee;
	text-align:center;
	white-space:pre-line;
}
.dt-notify-text a{
	color:var(--dt-accent, #408BEA);
	text-decoration:underline;
	word-break:break-all;
}
.dt-notify-time{
	flex-shrink:0;
	font-size:11px;
	color:#7d8092;
	white-space:nowrap;
}
.dt-notify-empty{
	margin:0;
	padding:10px 0;
	font-size:13px;
	color:#9a9db0;
	text-align:center;
}

/* ---------- Theme/color picker (beside logo) ---------- */
/* header.main .hbox .fix-hidden is a fixed-height (70px), floated,
   overflow:hidden container — .logo floats left inside it, so our
   picker must float the same way instead of using flex, or it drops
   out of the row and gets visually clipped/overlapped. */
.dt-colorpicker{
	float:left;
	display:flex;
	align-items:center;
	height:70px;
	margin:0 15px;
}
.dt-colorpicker-mobile{
	float:none;
	position:absolute;
	top:0;
	left:44px;
	height:auto;
	margin:0;
}
.dt-colorpicker-mobile .dt-qicon{
	width:auto;
	height:auto;
	padding:18px 12px;
	border-radius:0;
	background:none;
}

/* The dropdown is switched to fixed positioning by JS (top/left set
   inline) the moment it opens, so it always renders fully on top of
   the header instead of being clipped by any parent's overflow. */
.dt-color-drop{
	display:none;
	position:fixed;
	width:260px;
	max-height:80vh;
	overflow-y:auto;
	background:#151823;
	border:1px solid rgba(255,255,255,.08);
	border-radius:10px;
	padding:16px;
	box-shadow:0 15px 40px rgba(0,0,0,.5);
	z-index:99999;
}
.dt-colorpicker.active .dt-color-drop{
	display:block;
}
.dt-color-label{
	margin:12px 0 8px;
	font-size:11px;
	font-weight:700;
	letter-spacing:.5px;
	text-transform:uppercase;
	color:#7d8092;
}
.dt-color-label:first-child{
	margin-top:0;
}
/* ---------- Quick mode: Dark / Light one-click toggle ---------- */
.dt-quickmode-row{
	display:flex;
	gap:8px;
	margin-bottom:14px;
}
.dt-quickmode-btn{
	flex:1;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	padding:9px 0;
	border-radius:8px;
	background:rgba(255,255,255,.06);
	color:#c7c9d1;
	font-size:12px;
	font-weight:700;
	transition:.15s;
}
.dt-quickmode-btn:hover{
	background:rgba(255,255,255,.12);
	color:#fff;
}
.dt-quickmode-btn.active{
	background:var(--dt-accent, #408BEA);
	color:#fff;
}

/* ---------- 5 ready-made presets (one click sets bg+text+accent) ---------- */
.dt-preset-row{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-bottom:14px;
}
.dt-preset{
	display:flex;
	align-items:center;
	gap:3px;
	padding:6px;
	border-radius:8px;
	border:2px solid transparent;
	background:rgba(255,255,255,.04);
	cursor:pointer;
	transition:.15s;
}
.dt-preset:hover{
	background:rgba(255,255,255,.09);
}
.dt-preset.active{
	border-color:var(--dt-accent, #408BEA);
}
.dt-preset-dot{
	width:14px;
	height:14px;
	border-radius:50%;
	display:block;
}

/* ---------- Custom pick per category (native color input = pick any color) ---------- */
.dt-custom-row{
	margin-bottom:4px;
}
.dt-color-input-wrap{
	display:flex;
	align-items:center;
	gap:10px;
	padding:6px 10px;
	border-radius:8px;
	background:rgba(255,255,255,.05);
	border:1px solid rgba(255,255,255,.08);
	cursor:pointer;
}
.dt-color-input{
	width:30px;
	height:30px;
	padding:0;
	border:none;
	border-radius:6px;
	background:none;
	cursor:pointer;
}
.dt-color-input::-webkit-color-swatch-wrapper{
	padding:0;
}
.dt-color-input::-webkit-color-swatch{
	border:1px solid rgba(255,255,255,.2);
	border-radius:6px;
}
.dt-color-hex{
	font-size:12px;
	color:#c7c9d1;
	letter-spacing:.3px;
}
.dt-color-reset{
	display:block;
	margin-top:10px;
	padding-top:10px;
	border-top:1px solid rgba(255,255,255,.08);
	text-align:center;
	font-size:12px;
	color:#9a9db0;
}
.dt-color-reset:hover{
	color:#fff;
}

/* ============================================================
   "Seen" badge — glass bottom strip on posters already watched
   ============================================================ */
.dt-seen-badge{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	z-index:6;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	padding:7px 0;
	background:rgba(20,22,28,.55);
	-webkit-backdrop-filter:blur(6px);
	backdrop-filter:blur(6px);
	border-top:1px solid rgba(255,255,255,.15);
	font-size:12px;
	font-weight:500;
	color:#e7e8ee;
}
.dt-seen-badge i{
	font-size:12px;
}

/* ============================================================
   Resolution badge (4K / HD / SD / CAM) — top-right of the poster
   ============================================================ */
.dt-resolution-badge{
	position:absolute;
	top:8px;
	right:8px;
	z-index:5;
	padding:3px 8px;
	border-radius:4px;
	background:#F5C518;
	color:#111;
	font-size:11px;
	font-weight:800;
	letter-spacing:.3px;
	line-height:1.4;
	text-transform:uppercase;
	box-shadow:0 1px 4px rgba(0,0,0,.35);
}

/* Shrink both badges on narrow cards so "Kurdish"-style labels on the
   left and the resolution badge on the right never overlap/touch. */
@media screen and (max-width: 600px){
	.dt-resolution-badge{
		top:5px;
		right:5px;
		padding:2px 5px;
		font-size:9px;
		border-radius:3px;
	}
	.mepo span.quality,
	.item .poster>span.quality,
	span.quality{
		padding:3px 6px !important;
		font-size:9px !important;
	}
}

/* ============================================================
   Homepage filter bar (Type / Genre / Release) — under the slider
   ============================================================ */
.dt-filterbar{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:14px;
	margin:18px 0 25px;
	padding:14px 20px;
	border-radius:10px;
	background:rgba(255,255,255,.04);
	border:1px solid rgba(255,255,255,.06);
}
.dt-filterbar form{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:22px;
	width:100%;
}
.dt-filter-group{
	display:flex;
	align-items:center;
	gap:8px;
}
.dt-filter-group label{
	font-size:12px;
	font-weight:700;
	letter-spacing:.3px;
	color:#9a9db0;
	text-transform:uppercase;
}
.dt-filter-select{
	background:rgba(255,255,255,.06);
	border:1px solid rgba(255,255,255,.1);
	border-radius:6px;
	color:#e7e8ee;
	font-size:13px;
	padding:8px 12px;
	min-width:130px;
	cursor:pointer;
}
.dt-filter-select:hover{
	border-color:var(--dt-accent, #408BEA);
}
.dt-filter-apply{
	display:flex;
	align-items:center;
	gap:8px;
	padding:9px 18px;
	border:none;
	border-radius:6px;
	background:var(--dt-accent, #408BEA);
	color:#fff;
	font-size:13px;
	font-weight:700;
	cursor:pointer;
	transition:.15s;
}
.dt-filter-apply:hover{
	filter:brightness(1.1);
}

@media screen and (max-width: 600px){
	.dt-filterbar form{ gap:12px; }
	.dt-filter-select{ min-width:100px; }
	.dt-filter-apply{ width:100%; justify-content:center; }
}

/* ============================================================
   Servers box (#playeroptions) — grid of buttons, names untouched
   Only restyles the existing markup; $play['name'] values
   (set by the admin in the player editor) stay exactly as entered.
   ============================================================ */
.dooplay_player h2{
	font-size:16px;
}
.dt-server-hint{
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	gap:10px;
	margin:0 20px 15px;
	padding:12px 16px;
	border-radius:8px;
	background:rgba(64,139,234,.1);
	border:1px solid var(--dt-accent, #408BEA);
	color:#c7c9d1;
	font-size:13px;
}
.dt-server-hint i{
	color:var(--dt-accent, #408BEA);
	font-size:16px;
}
#playeroptions{
	padding:0 20px 20px !important;
}
#playeroptions.scrolling{
	max-height:none !important;
	overflow:visible !important;
}
#playeroptionsul{
	display:grid !important;
	grid-template-columns:repeat(2,1fr);
	gap:10px;
	margin:15px 0 !important;
}
#playeroptionsul li.dooplay_player_option{
	width:auto !important;
	float:none !important;
	display:flex !important;
	align-items:center;
	justify-content:space-between;
	background:rgba(255,255,255,.05);
	border:1px solid rgba(255,255,255,.08);
	border-radius:10px;
	padding:13px 16px !important;
	margin:0 !important;
	cursor:pointer;
	box-shadow:0 1px 2px rgba(0,0,0,.15);
	transition:background .15s, border-color .15s, transform .1s, box-shadow .15s;
}
#playeroptionsul li.dooplay_player_option:hover{
	background:rgba(255,255,255,.09);
	border-color:rgba(255,255,255,.16);
	box-shadow:0 4px 12px rgba(0,0,0,.25);
	transform:translateY(-1px);
}
#playeroptionsul li.dooplay_player_option:active{
	transform:translateY(0);
	box-shadow:0 1px 2px rgba(0,0,0,.15);
}
#playeroptionsul li.dooplay_player_option.act,
#playeroptionsul li.dooplay_player_option.onload{
	background:var(--dt-accent, #408BEA);
	border-color:var(--dt-accent, #408BEA);
	box-shadow:0 4px 14px rgba(64,139,234,.35);
}
#playeroptionsul li.dooplay_player_option i.fa-play-circle{
	display:none;
}
#playeroptionsul li.dooplay_player_option span.title{
	float:none;
	font-size:14px;
}
#playeroptionsul li.dooplay_player_option span.title:before{
	content:"";
	display:inline-block;
	width:8px;
	height:8px;
	margin-right:8px;
	border-radius:50%;
	background:#3ddc84;
	vertical-align:middle;
}
#playeroptionsul li.dooplay_player_option span.server{
	float:none;
	margin-left:auto;
	opacity:.6;
}
#playeroptionsul li.dooplay_player_option span.flag{
	float:none;
	margin-left:8px;
}
#playeroptionsul li.dooplay_player_option span.loader{
	float:none;
	margin:0 0 0 8px;
}

@media screen and (max-width: 480px){
	#playeroptionsul{
		grid-template-columns:1fr;
	}
}