#searchSuggestions ul li a{
	font-size: 12.5px;
}

.video-container{
	height: 100%;
	position: relative;
	
}

.search-suggestion{
	z-index:100;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: normal;
}

#related-container {
 	position: absolute;
 	left: 0px;
 	right: 62px;
 	top: 0px;
 	height:100px;
}

.related-buttons {
	position: absolute;
	width: 300px;
	left: 50%;
	margin-left: -150px;
}

.related-buttons .lc-tab .ui-btn-inner{
	border: 0;
	padding: .3em 11px .5em;
}

#related-title {
	position: absolute;
	left: 0px;
 	top: 0.5em;
}

.popup-button{
    z-index: 1000;
    display: block;
    margin-left: auto;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* منع jQuery Mobile من إضافة خلفية/حدود على رابط السهم */
.popup-button,
.popup-button:visited,
.popup-button:hover,
.popup-button:active{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
.related-back-button {
	position: absolute;
	left: 0px;
 	top: 0px;
	z-index: 150px;
	background-position: -5px -106px;
	width:109px;
	height:30px;
}

.related-back-button .inner-text {
	margin-top:4px;
	margin-left:14px;
}

.related-back-button span {
	font-weight: bold !important;
	color: #b4b4b4;
	text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
	font-size: 12px;
}

.related-back-button:active {
	position: absolute;
	left: 0px;
 	top: 0px;
	z-index: 150px;
	background-position: -119px -106px;
	width:109px;
	height:30px;
}

body{
	background: #232427 !important;
}

/* تحكم بمسافة المحتوى تحت الهيدر */
:root{
	--header-gap: 55px; /* المسافة تحت الهدر */
}

.lc-icon{
	background-image: url('images/sprite.png');
}

.lc-tab{
	width: 101px;
	height: 33px;
	background-position: -429px -5px;
	border: 0 !important;
	background-color: transparent;
}
.lc-tab.ui-corner-left{
	background-position: -323px -5px;
}
.lc-tab.ui-corner-right{
	background-position: -535px -5px;
}
.lc-tab.ui-corner-left.ui-btn-active{
	background-position: -5px -5px;
}
.lc-tab.ui-btn-active{
	background-position: -111px -5px;
}
.lc-tab.ui-corner-right.ui-btn-active{
	background-position: -217px -5px;
}

.lc-tab .ui-btn-inner{
	border: 0;
	padding: .6em 11px .5em;
}

.lc-tab .ui-btn-text{
	font-weight: bold !important;
	color: #b4b4b4;
	text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
	font-size: 12px;

}

.lc-footer-btn{
	padding: 2px 21px 0 21px;
	margin: 1px 4px 2px 4px;
	display: inline-block;
	cursor: pointer;
	position: relative;
}

.lc-footer-btn .opaque-bg{
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background-color: white;
	border-radius: 4px;
	opacity: 0.14;
	z-index: -10;
	display: none;
}

.lc-footer-btn .btn-text{
	font-size: 10px;
	margin-top: 3px;
	text-align: center;
	font-weight: bold;
	color: #c6c6c5;
}

.lc-footer-btn .lc-icon{
	height: 27px;
	margin: 0 auto;
}
.lc-footer-btn .lc-icon.most-viewed{
	width: 60px;
	background-position: -0px -70px;
}
.lc-footer-btn .lc-icon.featured{
	width: 36px;
	background-position: -73px -70px;
}
.lc-footer-btn .lc-icon.top-rated{
	width: 30px;
	background-position: -135px -70px;
}
.lc-footer-btn .lc-icon.trailers{
	width: 30px;
	background-position: -561px -70px;
}
.lc-footer-btn .lc-icon.search{
	width: 30px;
	background-position: -195px -70px;
}
.lc-footer-btn .lc-icon.favorites{
	width: 36px;
	background-position: -252px -70px;
}
.lc-footer-btn .lc-icon.history{
	width: 30px;
	background-position: -315px -70px;
}
/* Register icon: ولد + (إضافة مستخدم) */
.lc-footer-btn .lc-icon.register{
	width: 36px;
	background-position: -840px -70px; /* ولد + (غير نشط) */
}
/* Login icon: تسجيل الدخول */
.lc-footer-btn .lc-icon.login{
	width: 36px;
	background-position: -900px -70px; /* login (غير نشط) */
}
.lc-footer-btn .lc-icon.shared{
	width: 33px;
	background-position: -375px -70px;
}

.lc-footer-btn.active .btn-text{
	color: white;
}
.lc-footer-btn.active .opaque-bg{
	display: block !important;
}
.lc-footer-btn.active .lc-icon.most-viewed{
	background-position: -0px -39px;
}
.lc-footer-btn.active .lc-icon.featured{
	background-position: -73px -39px;
}
.lc-footer-btn.active .lc-icon.top-rated{
	background-position: -135px -39px;
}
.lc-footer-btn.active .lc-icon.search{
	background-position: -195px -39px;
}
.lc-footer-btn.active .lc-icon.favorites{
	background-position: -252px -39px;
}
.lc-footer-btn.active .lc-icon.history{
	background-position: -315px -39px;
}
.lc-footer-btn.active .lc-icon.register{
	background-position: -840px -39px; /* ولد + (نشط) */
}
.lc-footer-btn.active .lc-icon.login{
	background-position: -900px -39px; /* login (نشط) */
}
.lc-footer-btn.active .lc-icon.shared{
	background-position: -375px -39px;
}
.lc-footer-btn.active .lc-icon.trailers{
	width: 30px;
	background-position: -561px -39px;
}

.lc-icon.arrow{
	width: 30px;
	height: 30px;
	background-position: -435px -36px;
	position: relative;
	top: auto;
	right: auto;
}
.main-page{
	background: url('images/backgroundDarkGreyLinen@2x.jpg');
}
#scroller {
	position: absolute;
	/* 42px ارتفاع الهيدر + 55px فراغ */
	top: 97px;
	top: calc(42px + var(--header-gap));
	bottom: 49px;
	left: 0;
	right: 0;
}
.search-outer {
	width: 20%; 
	right: 10px; 
	top: -2px;
	position: absolute;
}
.header-table {
	margin-left: auto !important;
	margin-right: auto !important;
	border: 0px;
	border-collapse: collapse;
	border-spacing: 0px;
}
.header-table tr {
	border: 0px;
	border-collapse: collapse;
	border-spacing: 0px;
	margin: 0px;
	padding: 0px;
}
.header-table td {
	border: 0px;
	border-collapse: collapse;
	border-spacing: 0px;
	margin: 0px;
	padding: 0px;
}
.header-margin {
	margin-top: 7px;
	margin-bottom: 8px;
}
.header-margin .ui-controlgroup-controls {
	display: block;
}
.comment-url, .frame-url, .related-url, .video-page-url, .fav-url, .hist-url {
	display: none;
}
.header-fixed-height {
	height: 43px;
	float: left;
}
.header{
	/*height: 37px;*/
	padding: 0 12px;
	background: #181818;
}
.header input[type="text"] {
	border-radius: 2em;
}
.header textarea{
	width: 90%;
	margin-right: auto;
	margin-left: auto;
}
.ui-li{
	word-wrap: break-word;
}
.comment .text{
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: normal;
	color: white;
}

.comment .author, .comment .time{
	float: left;
	color: #b9b9b9;
	font-size: 13px;
	font-weight: normal;
}

.comment .author{
	width: 60%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.comment .time{
	width: 40%;
}

#video_page .ui-content{
	/*position: absolute;
	top: 41px;
	bottom: 33px;
	left: 0;
	right: 0;*/
	padding: 0;
}

.main-panel{
	margin-right: 303px;
	height: 100%;
	position: relative;
}

.side-panel{
	position: absolute;
	top: 0px;
	bottom: 0px;
	right: 0;
	width: 303px;
	border-left: 1px solid #5d5d5d;
	/*-webkit-box-shadow: -10px 0px 10px 0px rgba(0, 0, 0, 0.25);
    box-shadow: -10px 0px 10px 0px rgba(0, 0, 0, 0.25);*/
    z-index: 100;
}

.side-panel input[type="text"]{
	margin: 0 !important;
}

.side-panel .comment-list{ /* تخططيط التعليقات */
	overflow-y: auto;
	position: absolute;
	top: 44px;
	bottom: 0;
	width: 100%;
	background: url('images/backgroundComments@2x.png');
}

.panel-header{
	margin: 0px auto;
	width: 222px;
	position: relative;
	top: 18px;
}

.clear{
	clear: both;
}

.relatedGrid{
	white-space: nowrap;
	float: left;
	padding: 0 14px;
}

.horizontal-scroller{
	position: relative;
	bottom: 0px;
	height: 80%;
	width: 100%;	
	overflow-x: auto;

}

.related-element{
	width: 250px;
	margin: 10px 17px;
}

.contentList{
	margin: 0 !important;
}
.contentList li{ /* التعليقات */
	background: transparent;
	color: #D8D9DA;
	text-shadow: none;
	border: 1px solid blue;
	border-bottom: 1px solid #5D5D5D;
}

.related-title-bar .section-title{
	/*float: left;
	margin-left: 31px;*/
	position: relative;
	left: 31px;
	text-shadow: none;
	color: white;
	top: 0.5em;
}

.related-title-bar .search-bar{
	width: 20%; 
	right: 10px; 
	position: relative; 
	float: right;
}

.related-section{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	/*right: 20.095em;*/
	background: url('images/backgroundDarkGreyLinen@2x.jpg');
	height: 260px;
	/*overflow-y: hidden;*/
}

.video-section{
	position: absolute;
	top: 0;
	bottom: 259px;
	left: 0;
	right: 0;
	background: url('images/backgroundDarkBlackLinen@2x.jpg');
}

.video-info{
	position: absolute;
	top: 43px;
	bottom: 49px;
	left: 0;
	right: 0;
	padding: 0 !important;
}

.video-valigned{
	height: 100%;
	vertical-align: middle;
	display: table;
	width: 100%;
}

/*.video-wrapper{
	position: relative;
	width: 701px;
	margin: 0 auto;
	height: 395px;
	margin-top: 4%;
	/*position: relative;
	max-height: 345px;
	max-width: 701px;
	width: 54.77%;
	margin: 0 auto;
}*/

/*.video-wrap {
	width:100%; 
	height:100%; 
	position:relative;
}*/

.videoFrame {
	position: relative;
	top: 0px; 
	left: 0px;
	width:100%;
	height:100%;
}

/* Title row: title فقط (بعد حذف زر +) */
.video-name-row{
    display: flex;
    align-items: flex-start;
    gap: 0px;
    max-width: 188px;
    margin-top: 14px; /* ملاحظة مياو: نزلنا نص Slot شوي لتحت */
}

.video-name { 
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: normal;
    height: 2.5em;
    width: 100%;
    margin: 0;
    color: white;
    max-width: 188px;/* ملاحظة مياو: بعد حذف + */ /* 188 - icon/gap */
}

.video-length {
	width: auto;
	position: absolute;
	bottom: 2px;
	right: 1px;
	color: white;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 15;
	padding: 4px 6px;
}

.video-title{
	display: none !important; /* مياو: اخفاء عنوان الصفحة فقط */
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.video-header{
	padding: 12px 0;
	margin-right: 303px;
}

/* Date + rating (يسار) + مفضلة (قابل للتحريك) + سهم (أقصى اليمين) */
.video-bottom-info{
    position: relative;
    width: 100%;
    max-width: none;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 2px;
    /* نترك مساحة ثابتة لليمين عشان المفضلة تتحرك 100px بدون ما تلخبط السهم */
    padding-right: 160px;
}
.video-bottom-info .meta-left{
	    display: flex;
	    flex-direction: column; /* ✅ التقييم تحت التاريخ */
	    align-items: flex-start;
	    gap: 3px;
	    flex: 0 0 auto; /* ✅ لا يخلي التاريخ يلف */
}

/* زر السهم: أقصى اليمين */
.video-bottom-info .popup-button{
    position: absolute;
    right: 0;
    top: 0;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.video-bottom-info .lc-icon.arrow{
    position: static;
}

/* زر المفضلة (بديل عن +) */
.video-bottom-info .fav-inline{
    margin-left: auto;
    display: block;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    /* ✅ طلب مياو: المفضلة تروح يمين 100px */
    transform: translateX(100px);
}

/* أيقونة المفضلة داخل الكرت (نفس سبرايت الفوتر) */
.video-bottom-info .fav-inline .lc-icon.favorites{
    width: 36px;
    height: 27px;
    background-position: -252px -70px; /* غير نشط */
}

/* حالة مفعلة (اختياري) */
.video-bottom-info .fav-inline.is-fav .lc-icon.favorites{
    background-position: -252px -39px; /* نشط */
}

.thumbnail /* تخطيط غلاف الصور */
{ 
	width: 188px;
	height: 108px;
	background-size: 100% 100%;
	position: relative;
}
.thumbnail .highlight /* تخطيط غلاف الصور */
{ 
	position: absolute;
	z-index: 5;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-position: -630px -38px;
}

.published-date{
	color: #767676;
	font-size: 11px;
	white-space: nowrap;     /* ✅ التاريخ كله بسطر واحد */
	overflow: visible;       /* ✅ لا نقص ولا اخفاء */
}

.grid-item{
	width: 188px;
	font-size: 13px;
	text-shadow: none;
}

.grid-button {
	cursor: pointer;
}

.grid-item a, .grid-item a:visited, .grid-item a:active, .grid-item a:hover{
	text-decoration: none;
}

.lc-logo{
	background-position: -484px -39px;
	width: 54px;
	height: 21px;
	position: absolute;
	left: 16px;
	top: 50%;
	margin-top: -10px;
}

.back-button{
	position: absolute;
	left: 10px;
	top: 50%;
	margin-top: -15px;
	height: 30px;
	width: 54px;
	background-position: -641px -5px;
	font-size: 12px;
	cursor: pointer;
}
.back-button:active{
	background-position: -700px -5px;
}
.back-button .button-text{
	padding-left: 17px;
	padding-top: 8px;
}

.rating{
	color: #ff77c6;
	font-size: 11px;
}

/* مياو: لون التقييم تحت الكرت يكون وردي مثل طلبك */
.video-bottom-info .rating{
	color: #ff77c6;
}

.main-grid-element{
	margin-top: 40px;
	margin-left: 40px;
	width: auto !important;
	/*width: 16.5% !important;*/
}

.main-grid-element a{
	display: block;
	width: 188px;
	margin: 0 auto;
}

/* ===== Full-width responsive grid (يملا الصفحة مع مسافة بسيطة يمين/يسار) =====
   - العناصر تمتد بعرض الصفحة من اليسار لليمين
   - الصور بدون تشويه (contain)
   - مربعات الـ placeholder داخل الصورة تبقى مثل ما هي
*/
.video_grid{
	display: grid !important;
	/* نفس فكرة لقطة الشاشة: عرض ثابت للعنصر + توزيع فراغات يملي الصفحة */
	grid-template-columns: repeat(auto-fill, 188px);
	/* نخلي الفراغات ثابتة حسب طلبك */
	justify-content: start;
	row-gap: 40px;    /* المسافة بين الصور (فوق/تحت) */
	column-gap: 40px; /* المسافة بين الصور (يمين/يسار) */
	padding: 14px 100px 24px 100px; /* يمين/يسار 100px */
	margin: 0 !important;
}

/* إلغاء تخطيط jQuery Mobile Grid القديم داخل هذا القسم فقط */
.video_grid .ui-block-a,
.video_grid .ui-block-b,
.video_grid .ui-block-c,
.video_grid .ui-block-d{
	float: none !important;
	width: auto !important;
}

.video_grid .main-grid-element{
	margin: 0 !important;
	padding: 0 !important;
}

.video_grid .grid-item{
	width: 188px !important;
}

.video_grid .grid-item a{
	width: 188px !important;
	margin: 0 !important;
}

/* thumbnail: ثابت 188x108 مثل التصميم الأصلي */
.video_grid .thumbnail{
	width: 188px !important;
	height: 108px !important;
	padding-top: 0 !important;
	/* نخلي الخلفية تتحكم فيها البليس هولدر (داخل) */
	background: none !important;
}

/* highlight: نستخدم صورة مقصوصة عشان تشتغل مع التمدد */
.video_grid .thumbnail .highlight{
	background-image: url('images/thumb_highlight.png') !important;
	background-position: 0 0 !important;
	background-repeat: no-repeat !important;
	background-size: 100% 100% !important;
}

html, body {
    height: 100%;
    overflow: hidden;
}

/* ===== Static UI placeholders (المربع/الصورة داخل الثمبنيل) =====
   المطلوب:
   - المربع يطلع أولاً (placeholder)
   - لما تحط صورة داخل div.lc-placeholder-box (img) تنعرض بدون قص/تمطيط
*/
.thumbnail .lc-placeholder-box{
	position: absolute;
	inset: 0;
	z-index: 6;
	overflow: hidden;
	/* شكل الفراغ الفاضي مثل الصورة (تدرج + مثلث فاتح) */
	background-image:
		linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.10) 48%, rgba(0,0,0,0) 48%, rgba(0,0,0,0) 100%),
		linear-gradient(#3a3b3d, #2a2b2d);
	border: 1px solid rgba(255,255,255,0.14);
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35);
	text-align: center;
	font-size: 12px;
	color: rgba(255,255,255,0.35);
	line-height: 108px;
}

.thumbnail .lc-placeholder-box img{
	width: 100%;
	height: 100%;
	display: block;
	/* الصورة “مثل ما هي” بدون قص أو تمديد */
	object-fit: contain;
}

/* Register page */
.register-card{
	max-width: 420px;
	margin: 0 auto;
	padding: 12px;
	background: rgba(0,0,0,0.25);
	border-radius: 10px;
	box-shadow: 0 0 18px rgba(0,0,0,0.35);
}
.register-card label{
	color: #cfcfcf;
	font-size: 12px;
	font-weight: bold;
}
.register-note{
	margin-top: 10px;
	font-size: 11px;
	color: #9aa0a6;
}


/* Auth pages (Register/Login) — Dark elegant */
.auth-wrap{
	max-width: 460px;
	margin: 0 auto;
	padding: 0 12px 22px;
}
.auth-card{
	direction: rtl;
	text-align: right;
	padding: 16px 16px 14px;
	border-radius: 14px;
	background: rgba(0,0,0,0.28);
	border: 1px solid rgba(255,255,255,0.12);
	box-shadow: 0 22px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Register/Login tabs (same page) */
.auth-tabs{
	display: flex;
	gap: 0px;
	padding: 6px;
	border-radius: 12px;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.10);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
	margin-bottom: 12px;
}
.auth-tab-btn{
	flex: 1;
	padding: 8px 10px;
	border-radius: 10px;
	border: 1px solid transparent;
	background: transparent;
	color: rgba(255,255,255,0.72);
	font-weight: bold;
	font-size: 12px;
	cursor: pointer;
}
.auth-tab-btn.is-active{
	background: rgba(77,166,255,0.18);
	border-color: rgba(77,166,255,0.35);
	color: rgba(230,245,255,0.98);
	box-shadow: 0 10px 22px rgba(0,0,0,0.28);
}
.auth-head{
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}
.auth-badge{
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.10);
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35);
	display: flex;
	align-items: center;
	justify-content: center;
}
.auth-badge .lc-icon{
	height: 27px;
	margin: 0;
}
.auth-title{
	font-size: 16px;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: 2px;
}
.auth-sub{
	font-size: 12px;
	color: rgba(255,255,255,0.68);
}
.auth-field{
	margin-top: 12px;
}
.auth-field label{
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: bold;
	color: rgba(255,255,255,0.78);
}
.auth-input{
	width: 100%;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid rgba(255,255,255,0.16);
	background: rgba(0,0,0,0.34);
	color: #fff;
	font-size: 13px;
	outline: none;
	box-sizing: border-box;
}
.auth-input:focus{
	border-color: rgba(77,166,255,0.75);
	box-shadow: 0 0 0 3px rgba(77,166,255,0.15);
}
.auth-row{
	margin-top: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.auth-check{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(255,255,255,0.75);
	font-size: 12px;
	cursor: pointer;
}
.auth-check input{
	width: 16px;
	height: 16px;
}
.auth-btn{
	width: 100%;
	margin-top: 14px;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.16);
	background: linear-gradient(#2c2d2f, #1f2022);
	color: #f3f3f3;
	font-weight: bold;
	font-size: 13px;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}
.auth-btn.primary{
	border-color: rgba(77,166,255,0.35);
	background: linear-gradient(#2c87e8, #1a63c7);
}
.auth-btn:active{
	transform: translateY(1px);
}
.auth-links{
	margin-top: 12px;
	text-align: center;
}
.auth-link{
	color: rgba(130,200,255,0.95);
	text-decoration: none;
	font-size: 12px;
}
.auth-link.small{ font-size: 11px; opacity: 0.9; }
.auth-link:hover{ text-decoration: underline; }
.auth-note{
	margin-top: 12px;
	font-size: 11px;
	color: rgba(255,255,255,0.52);
}
.auth-msg{
	margin-top: 10px;
	padding: 9px 10px;
	border-radius: 10px;
	font-size: 12px;
}
.auth-msg.ok{
	background: rgba(77,166,255,0.18);
	border: 1px solid rgba(77,166,255,0.35);
	color: rgba(220,240,255,0.98);
}
.auth-msg.err{
	background: rgba(255,90,90,0.12);
	border: 1px solid rgba(255,90,90,0.22);
	color: rgba(255,220,220,0.98);
}

/* Auth badge icons */
.auth-badge .lc-icon{ background-repeat: no-repeat; }
.auth-badge .lc-icon.register{ width: 36px; background-position: -840px -39px; }
.auth-badge .lc-icon.login{ width: 36px; background-position: -900px -39px; }

.fav-inline{display:none !important;}

/* =========================================================
   مياو: صورة الغلاف فوق المربع + حدود مربعة بيضاء
   ========================================================= */
#music .thumbnail{
  position: relative;
  background-image: none !important;  /* لا نستخدم خلفية الآن */
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.25) !important; /* مياو: حدود شفافة */
  border-radius: 10px !important;
  box-shadow: 0 0 18px rgba(0,0,0,.35) !important;
  overflow: hidden !important;          /* الصورة تنقص داخل الإطار */
}

/* الصورة نفسها داخل المربع */
#music .thumbnail .musicCoverImg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* ✅ تغطي المربع */
  display: block;
  z-index: 2;             /* فوق أي عناصر */
}

/* اخفاء الـIMG placeholder النصي */
#music .lc-placeholder-box{
  display:none !important;
}

/* اذا فيه طبقة highlight فوق الصورة */
#music .lc-icon.highlight{
  display:none !important;
}

/* =========================================================
   مياو: اظهار حدود المربع فوق الصورة (overlay border)
   ========================================================= */
#music .thumbnail{
  position: relative;
  overflow: hidden !important;
}

/* حدود فوق الصورة حتى لو الصورة تغطي المربع */
#music .thumbnail::after{
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 10px;
  pointer-events: none;
  z-index: 5; /* فوق الصورة */
}

/* احتياط: حد داخلي */
#music .thumbnail{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 0 18px rgba(0,0,0,.35) !important;
}

/* =========================================================
   مياو: خلفية القماش الأسود
   ========================================================= */
body{
  background-image: url("images/bg_fabric.png") !important;
  background-repeat: repeat !important;
  background-position: center top !important;
  background-size: 220px 220px !important; /* مياو: حجم النسيج */
}

/* =========================================================
   مياو: غلاف صورة للأكثر مشاهدة داخل المربع + الحدود الشفافة باينة
   ========================================================= */
#index .thumbnail{
  position: relative;
  overflow: hidden !important;
  background-image: none !important; /* نخلي الصورة هي الغلاف */
  background: transparent !important;
}

/* الصورة تغطي المربع */
#index .thumbnail .mostViewedCoverImg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}

/* خلي عناصر التظليل/المدة فوق الصورة */
#index .thumbnail .lc-icon.highlight,
#index .thumbnail .video-length{
  position: absolute;
  z-index: 3;
}

/* اخفاء نص IMG */
#index .thumbnail .lc-placeholder-box{
  display: none !important;
}

/* حدود شفافة فوق الصورة */
#index .thumbnail::after{
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 10px;
  pointer-events: none;
  z-index: 5;
}



/* =========================
   Pink cute auth override (Meow)
   ========================= */
.auth-wrap{
  background:
    radial-gradient(700px 420px at 20% 5%, rgba(255, 105, 180, .20), rgba(255,105,180,0) 60%),
    radial-gradient(620px 360px at 85% 15%, rgba(255, 155, 210, .18), rgba(255,155,210,0) 60%),
    radial-gradient(900px 520px at 50% 110%, rgba(255, 120, 200, .10), rgba(255,120,200,0) 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 2px, rgba(0,0,0,.02) 2px 4px),
    linear-gradient(180deg, #0f0f15 0%, #151525 55%, #1b1b2c 100%) !important;
  padding: 60px 16px !important;
  position: relative;
  overflow: hidden;
}
.auth-wrap:before,
.auth-wrap:after{
  content:"";
  position:absolute;
  width:520px; height:520px;
  border-radius: 50%;
  filter: blur(0px);
  opacity:.9;
  pointer-events:none;
}
.auth-wrap:before{
  left:-220px; top:-260px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,155,210,.85), rgba(255,155,210,0) 62%),
    radial-gradient(circle at 70% 70%, rgba(255,105,180,.65), rgba(255,105,180,0) 58%);
}
.auth-wrap:after{
  right:-240px; bottom:-280px;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,105,180,.65), rgba(255,105,180,0) 60%),
    radial-gradient(circle at 70% 70%, rgba(255,155,210,.75), rgba(255,155,210,0) 62%);
}

.auth-shell{
  max-width: 980px !important;
}

.auth-card{
  background:
    radial-gradient(140% 140% at 15% 10%, rgba(255,155,210,.10) 0%, rgba(255,155,210,0) 55%),
    linear-gradient(180deg, rgba(35,35,52,.96) 0%, rgba(26,26,40,.96) 100%) !important;
  border: 1px solid rgba(255, 155, 210, .22) !important;
  box-shadow:
    0 16px 40px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 0 30px rgba(255,155,210,.10) !important;
  border-radius: 22px !important;
  position: relative;
  overflow: hidden;
}

/* pink wavy top/bottom inside card */
.auth-card:before,
.auth-card:after{
  content:"";
  position:absolute;
  left:-35%;
  width:170%;
  height:120px;
  pointer-events:none;
  opacity: .95;
}
.auth-card:before{
  top:-35px;
  background:
    radial-gradient(120px 120px at 12% 70%, rgba(255,105,180,1) 0 60%, rgba(255,105,180,0) 61%),
    radial-gradient(160px 160px at 30% 55%, rgba(255,155,210,1) 0 60%, rgba(255,155,210,0) 61%),
    radial-gradient(140px 140px at 52% 60%, rgba(255,105,180,1) 0 60%, rgba(255,105,180,0) 61%),
    radial-gradient(180px 180px at 72% 55%, rgba(255,155,210,1) 0 60%, rgba(255,155,210,0) 61%),
    radial-gradient(120px 120px at 90% 70%, rgba(255,105,180,1) 0 60%, rgba(255,105,180,0) 61%);
  transform: rotate(-2deg);
}
.auth-card:after{
  bottom:-55px;
  background:
    radial-gradient(170px 170px at 14% 45%, rgba(255,155,210,1) 0 60%, rgba(255,155,210,0) 61%),
    radial-gradient(140px 140px at 34% 55%, rgba(255,105,180,1) 0 60%, rgba(255,105,180,0) 61%),
    radial-gradient(190px 190px at 56% 45%, rgba(255,155,210,1) 0 60%, rgba(255,155,210,0) 61%),
    radial-gradient(140px 140px at 76% 55%, rgba(255,105,180,1) 0 60%, rgba(255,105,180,0) 61%),
    radial-gradient(170px 170px at 94% 45%, rgba(255,155,210,1) 0 60%, rgba(255,155,210,0) 61%);
  transform: rotate(2deg);
}

.auth-title{
  color: #ff9bd2 !important;
  text-shadow: 0 0 12px rgba(255,155,210,.35);
}

.auth-subtitle{
  color: rgba(235,235,245,.78) !important;
}

.auth-input{
  background: linear-gradient(145deg, #1b1b27 0%, #232335 100%) !important;
  border: 1px solid rgba(255,155,210,.18) !important;
  color: rgba(245,245,250,.96) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 10px 22px rgba(0,0,0,.38) !important;
  border-radius: 16px !important;
}
.auth-input::placeholder{ color: rgba(230,230,245,.45) !important; }

.auth-input:focus{
  border-color: rgba(255,155,210,.55) !important;
  box-shadow: 0 0 0 3px rgba(255,155,210,.18), inset 0 0 0 1px rgba(255,255,255,.05), 0 14px 30px rgba(0,0,0,.48) !important;
}

.auth-btn{
  background: linear-gradient(90deg, #ff5fbf 0%, #ff9bd2 55%, #ff5fbf 100%) !important;
  border: 0 !important;
  color: #231326 !important;
  font-weight: 800 !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.45), 0 0 24px rgba(255,155,210,.22) !important;
}
.auth-btn:hover{ filter: brightness(1.05) saturate(110%) !important; }