html, body {
	height: 100%;
	margin: 0;
	overflow-x: hidden;
	overflow-y: auto;
}

body {
	background: #0b0b0f;
	color: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "San Francisco",
	"Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ================= HEADER ================= */
.app-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	padding: 10px 0;
	text-align: center;
	background:
			linear-gradient(rgba(11,11,15,.6), rgba(11,11,15,.6)),
			url('../images/background/pattern-3.png') center / cover no-repeat;
	border-bottom: 0.5px solid rgba(255,255,255,.1);
}

.app-header img {
	max-height: 80px;
	width: auto;
}

/* ================= Footer ================= */
.app-footer {
	display: none;
}

/* ================= CATEGORY BAR ================= */
.category-bar {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 999;
	background: #0b0b0f;
	border-bottom: 1px solid rgba(255,255,255,.08);
}

.category-scroll {
	display: flex;
	flex-wrap: wrap; /* دسکتاپ چند خطی */
	justify-content: center;
	gap: 10px;
	padding: 10px 12px;
	scrollbar-width: none;
}

.category-scroll::-webkit-scrollbar {
	display: none;
}

.cat-btn {
	flex: 1 1 100px;
	max-width: 120px;
	height: 40px;
	border-radius: 10px;
	background: #15151d; /* مثل tv-card */
	color: #fff;
	border: none;
	font-size: 0.85rem;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease;

	/* عمق و شیشه‌ای شدن */
	box-shadow: 0 4px 5px rgba(0,0,0,0.6);
	backdrop-filter: blur(6px); /* شیشه‌ای */
}

.cat-btn:hover {
	transform: scale(1.04);
	box-shadow: 0 6px 18px rgba(0,0,0,0.7);
	background: #1a1a22; /* کمی روشن‌تر روی هاور */
}

.cat-btn.active {
	background: #fff;
	color: #000;
	font-weight: 600;
}

/*.cat-btn {*/
/*	flex: 0 0 auto;*/
/*	border-radius: 8px;*/
/*}*/

/* ================= CONTENT ================= */
.content-padding {
	position: absolute;
	top: 130px;
	left: 0;
	right: 0;
	bottom: 0;

	overflow-y: auto;
	-webkit-overflow-scrolling: touch;

	padding-bottom: calc(64px + env(safe-area-inset-bottom) + 10px);
}

/* ================= CHANNEL GRID ================= */
#channelsContainer {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 12px;
	padding: 12px;
	box-sizing: border-box;
}

/* ================= CARD ================= */
.channel {
	width: 100%;
}

.tv-card {
	background: #15151d; /* مثل cat-btn */
	border-radius: 10px;
	padding: 10px;
	height: 100%;
	text-align: center;
	cursor: pointer;

	display: flex;
	flex-direction: column;
	justify-content: center;

	opacity: 0;
	transform: scale(0.96);
	animation: cardIn .25s ease forwards;

	/* عمق و شیشه‌ای شدن */
	box-shadow: 0 4px 5px rgba(0,0,0,0.6);
	backdrop-filter: blur(6px); /* شیشه‌ای */
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.tv-card:hover {
	transform: scale(1.04);
	box-shadow: 0 6px 18px rgba(0,0,0,0.7);
	background: #1a1a22; /* کمی روشن‌تر روی هاور */
}

/* انیمیشن ورود */
@keyframes cardIn {
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* ================= LOGO ================= */
.tv-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 70px;
	margin-bottom: 10px;
}

.tv-logo img {
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
}

/* ================= TITLE ================= */
.tv-title {
	font-size: 0.9rem;
	line-height: 1.2;
}

/* ================= SKELETON LOADING ================= */
.skeleton {
	border-radius: 12px;
	height: 120px;
	background: linear-gradient(
			90deg,
			#1a1a22 25%,
			#2a2a33 37%,
			#1a1a22 63%
	);
	background-size: 400% 100%;
	animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: 0 0; }
}

/* ================= HLS MODAL ================= */
#hlsModal {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.92);
	z-index: 9999;
}

#hlsVideo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	max-width: 960px;
	max-height: 80vh;
}

/* ================= HEADER INNER ================= */
.header-inner {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

/*.hamburger-btn {*/
/*	position: absolute;*/
/*	right: 16px;*/
/*	background: none;*/
/*	border: none;*/
/*	color: #fff;*/
/*	font-size: 26px;*/
/*	cursor: pointer;*/
/*	padding: 8px 10px;*/
/*	border-radius: 10px;*/
/*}*/

/* ================= HAMBURGER ICON (FIXED & CLEAN) ================= */
.hamburger-btn {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);

	width: 42px;
	height: 42px;

	display: flex;
	align-items: center;
	justify-content: center;

	background: rgba(255,255,255,0.08);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);

	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 12px;

	color: #fff;
	cursor: pointer;
	padding: 0;

	transition:
			background 0.25s ease,
			transform 0.15s ease;
}

/* ICON */
.hamburger-btn i {
	font-size: 20px; /* 🔥 ثابت در همه دیوایس‌ها */
	line-height: 1;
}

/* HOVER */
.hamburger-btn:hover {
	background: rgba(255,255,255,0.14);
}

/* ACTIVE (TOUCH FEEDBACK) */
.hamburger-btn:active {
	transform: translateY(-50%) scale(0.92);
}

/* ================= DRAWER ================= */
.app-drawer {
	position: fixed;
	top: 0;
	right: -340px;
	width: 320px;
	height: 100%;
	background: rgba(15,15,22,0.92);
	backdrop-filter: blur(12px);
	color: #fff;
	padding: 24px;
	z-index: 2000;
	transition: right 0.4s cubic-bezier(.4,0,.2,1);
}

.app-drawer.open {
	right: 0;
}

.drawer-close {
	position: absolute;
	top: 14px;
	left: 14px;
	background: none;
	border: none;
	color: #fff;
	font-size: 22px;
	cursor: pointer;
}

.app-drawer h3 {
	margin-top: 40px;
	margin-bottom: 12px;
	font-weight: 600;
}

.app-drawer p {
	font-size: 0.9rem;
	line-height: 1.6;
	color: #ddd;
}

.app-drawer hr {
	border-color: rgba(255,255,255,.1);
	margin: 20px 0;
}

/* ================= OVERLAY ================= */
.drawer-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.5);
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
	z-index: 1999;
}

.drawer-overlay.show {
	opacity: 1;
	pointer-events: all;
}

/* ================= MOBILE (Portrait) ================= */
@media (max-width: 480px) and (orientation: portrait) {
	/* کانتینر کانال‌ها: 3 ستون */
	#channelsContainer {
		grid-template-columns: repeat(3, 1fr);
	}

	/* لوگو */
	.tv-logo {
		height: 50px;
		padding: 0;
	}

	.tv-title {
		font-size: 0.75rem;
	}

	/* دسته‌ها یک خطی و اسکرول افقی */
	.category-scroll {
		flex-wrap: nowrap;
		overflow-x: auto;
		justify-content: flex-start;
	}

	/* همبرگر */
	.hamburger-btn {
		/*font-size: 44px !important;*/
		padding: 10px 14px;
		line-height: 1;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
	}

	/* لوگو در header */
	.app-header img {
		max-height: 68px;
	}

	/* فاصله بالای header */
	.app-header {
		padding: 10px;
	}

	.app-footer {
		display: flex;
	}
}

/* ================= MOBILE LANDSCAPE ================= */
@media (max-width: 480px) and (orientation: landscape) {
	/* کانتینر کانال‌ها: 3 ستون */
	#channelsContainer {
		grid-template-columns: repeat(3, 1fr);
	}

	/* لوگو */
	.tv-logo {
		height: 50px;
		padding: 0;
	}

	.tv-title {
		font-size: 0.75rem;
	}

	/* دسته‌ها یک خطی و اسکرول افقی */
	.category-scroll {
		flex-wrap: nowrap;
		overflow-x: auto;
		justify-content: flex-start;
	}

	/* همبرگر بزرگ‌تر در افقی */
	.hamburger-btn {
		/*font-size: 64px !important;*/
		padding: 10px 14px;
		line-height: 1;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
	}

	/* لوگو */
	.app-header img {
		max-height: 68px;
	}

	/* فاصله بالای header */
	.app-header {
		padding: 10px 0;
	}

	/*.app-footer {*/
	/*	display: flex;*/
	/*}*/
}

/* ================= MOBILE LANDSCAPE WIDE (برای موبایل‌های خیلی بزرگ) ================= */
@media (max-width: 768px) and (orientation: landscape) {
	#channelsContainer {
		grid-template-columns: repeat(4, 1fr);
	}

	.hamburger-btn {
		/*font-size: 64px !important;*/
		top: 50%;
		right: 10px;
		transform: translateY(-50%);
	}

	.app-header img {
		max-height: 68px;
	}

	.app-header {
		padding: 10px 0;
	}
}

/* ================= LOADING SCREEN ================= */
#bootLoader {
	position: fixed;
	inset: 0;
	background: linear-gradient(
			180deg,
			#050508 0%,
			#0b0b12 50%,
			#111118 100%
	);
	z-index: 999999;
	/*display: flex;*/
	display: none;
	align-items: center;
	justify-content: center;
	font-family: monospace;
	color: #df0303;
}

.show-loader #bootLoader {
	display: flex;
}

.boot-center {
	width: 280px;
	text-align: center;
}

.boot-logo {
	width: 190px;
	margin-bottom: 25px;
}

.boot-text {
	font-size: 13px;
	margin-bottom: 10px;
	opacity: 0.9;
}

.boot-bar {
	width: 100%;
	height: 6px;
	background: #111;
	border: 1px solid #df0303;
	overflow: hidden;
}

.boot-bar-fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, #df0303, #df4646);
	transition: width 0.3s linear;
}

.boot-percent {
	margin-top: 8px;
	font-size: 12px;
}

/* ================= APP BOTTOM NAV (BLACK GLASS) ================= */
.app-footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;

	height: 76px;
	padding-bottom: env(safe-area-inset-bottom);

	/*display: flex;*/
	justify-content: space-around;
	align-items: center;

	/* Black glass */
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);

	border-top: 0.5px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.7);

	z-index: 1000;
}

.footer-btn {
	text-decoration: none;
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.footer-btn:visited,
.footer-btn:hover,
.footer-btn:active {
	color: #fff;
	text-decoration: none;
}

.footer-btn {
	flex: 1;
	background: none;
	border: none;
	outline: none;

	color: rgba(255, 255, 255, 0.55);

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	font-size: 12px;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;

	transition:
			color 0.25s ease,
			transform 0.15s ease;
}

/* Icon (Font Awesome) */
.footer-btn i {
	font-size: 20px;
	line-height: 1;
	margin-bottom: 3px;

	display: block;

	-webkit-font-smoothing: antialiased;
	transform: translateZ(0);
}

/* Label */
.footer-btn span {
	font-size: 11px;
	letter-spacing: 0.3px;
}

/* Active state */
.footer-btn.active {
	color: #ffffff;
}

/* Touch feedback */
.footer-btn:active {
	transform: scale(0.92);
}

/* ================= LOGIN GLASS MODAL ================= */
.login-center {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9000;
}

/* ===== GLASS LOGIN BOX ===== */
.login-glass {
	width: 100%;
	max-width: 380px;
	padding: 32px 28px;
	border-radius: 12px;

	/* Smoked glass – balanced */
	background: rgba(0, 0, 0, 0.28);

	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);

	border: 0.1px solid rgba(255, 255, 255, 0.18);

	box-shadow:
			0 6px 12px rgba(0,0,0,0.45),
			0 18px 36px rgba(0,0,0,0.35);

	text-align: center;
}

/* Title */
.login-glass h2 {
	color: #fff;
	font-size: 22px;
	font-weight: 600;
	margin-bottom: 24px;
}

/* Form spacing */
.login-glass form {
	display: flex;
	flex-direction: column;
	gap: 16px; /* فاصله استاندارد بین فیلدها */
}

/* Inputs */
.login-glass input {
	width: 100%;
	padding: 13px 15px;
	border-radius: 12px;
	border: none;
	outline: none;

	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	font-size: 14px;
}

/* Placeholder */
.login-glass input::placeholder {
	color: rgba(255, 255, 255, 0.65);
}

.login-glass textarea {
	width: 100%;
	padding: 13px 15px;
	border-radius: 12px;
	border: none;
	outline: none;

	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	font-size: 14px;
	font-family: inherit;   /* 🔥 خیلی مهم */
	line-height: 1.4;

	resize: none;           /* کنترل ظاهر */
	min-height: 120px;

	box-sizing: border-box;
}

.login-glass textarea::placeholder {
	color: rgba(255, 255, 255, 0.65);
}

/* Button */
.login-btn {
	margin-top: 8px;
	padding: 13px;
	border-radius: 12px;
	border: none;

	background: linear-gradient(135deg, #DF4646FF, #DF0303FF);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

/* Button hover */
.login-btn:hover {
	opacity: 0.9;
}

/* ===== LOGIN PAGE BACKGROUND ONLY ===== */
body.login-page {
	min-height: 100vh;
	background: linear-gradient(
			180deg,
			#050508 0%,
			#0b0b12 50%,
			#111118 100%
	);
}

/* ================= PROFILE PAGE ================= */
/* Page spacing */
body.login-page {
	min-height: 100vh;
	background: linear-gradient(
			180deg,
			#050508 0%,
			#0b0b12 50%,
			#111118 100%
	);

	padding-top: 120px; /* فاصله از هدر */
	padding-left: 16px;
	padding-right: 16px;
	padding-bottom: calc(90px + env(safe-area-inset-bottom));
}

.profile-avatar {
	display: flex;
	flex-direction: column; /* اضافه شد */
	align-items: center;    /* وسط چین افقی */
	margin-bottom: 18px;
}

.profile-avatar img {
	width: 92px;
	height: 92px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(255,255,255,0.55);
}

.profile-avatar p {
	margin-top: 8px;   /* فاصله از عکس */
	color: #fff;       /* رنگ متن */
	font-size: 16px;
	font-weight: 500;
	text-align: center;
}

/* EDIT PROFILE BUTTON */
.edit-profile-btn {
	display: block;
	width: 100%;
	max-width: 420px;

	margin: 0 auto 22px;
	padding: 12px 14px;

	border-radius: 12px;
	text-align: center;
	text-decoration: none;

	background: rgba(255,255,255,0.12);
	color: #fff !important;

	font-size: 14px;
	font-weight: 500;

	border: 1px solid rgba(255,255,255,0.25);

	transition:
			background 0.25s ease,
			transform 0.15s ease;
}

.edit-profile-btn:hover {
	background: rgba(255,255,255,0.2);
}

.edit-profile-btn:active {
	transform: scale(0.96);
}

/* PROFILE LINKS */
.profile-links {
	list-style: none;
	padding: 0;
	margin: 0 0 28px;
}

/* Each item */
.profile-links li {
	border-bottom: 1px solid rgba(255,255,255,0.15);
}

/* Link */
.profile-links a {
	display: flex;
	align-items: center;
	gap: 14px;

	padding: 16px 4px;

	color: #fff !important;
	text-decoration: none;

	font-size: 15px;

	transition: background 0.2s ease;
}

/* Icon */
.profile-links a i {
	width: 22px;
	text-align: center;
	opacity: 0.85;
}

/* Remove last divider */
.profile-links li:last-child {
	border-bottom: none;
}

/* FOOTER TEXT */
body.login-page small {
	display: block;
	text-align: center;

	font-size: 12px;
	opacity: 0.55;

	margin-bottom: 20px;
}

/* MOBILE TUNING */
@media (max-width: 480px) {
	.profile-links a {
		font-size: 14px;
		padding: 15px 4px;
	}

	.edit-profile-btn {
		font-size: 13.5px;
	}
}

/* ================= LOGIN PAGE OVERRIDES ================= */
body.login-page .login-center {
	position: static;
	transform: none;
	z-index: auto;
}

body.login-page .login-glass {
	background: none;
	backdrop-filter: none;
	border: none;
	box-shadow: none;

	padding: 0;
	max-width: 420px;
	margin: 0 auto;
}

body.login-page .login-center {
	display: flex;
	justify-content: center;
}

body.login-page input {
	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.25);
	border-radius: 12px;
}

/* ================= AUTH PAGES LOGO ================= */
body.login-page .auth-logo img {
	width: 210px;
	height: auto;
	border-radius: 0;
	border: none;
	padding-bottom: 30px;
}

body.login-page .auth-logo {
	opacity: 0;
	transform: scale(0.95);
	animation: authLogoIn 0.4s ease forwards;
}

@keyframes authLogoIn {
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* ================= GENDER SELECT (MODERN) ================= */
.gender-group {
	display: flex;
	gap: 12px;
}

.gender-option {
	flex: 1;
	cursor: pointer;
}

.gender-option input {
	display: none;
}

/* Glass button */
.gender-option span {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	padding: 13px;
	border-radius: 12px;

	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.25);

	color: rgba(255,255,255,0.7);
	font-size: 14px;
	font-weight: 500;

	transition: all 0.25s ease;
}

/* Icon */
.gender-option i {
	font-size: 16px;
}

/* Active */
.gender-option input:checked + span {
	background: linear-gradient(135deg, #DF4646FF, #DF0303FF);
	color: #fff;
	border-color: transparent;
	box-shadow: 0 8px 20px rgba(223,3,3,0.35);
}

/* Touch feedback */
.gender-option span:active {
	transform: scale(0.96);
}

/* ================= PHONE INPUT ================= */
#user_phone {
	width: 100%;
	padding: 13px 15px;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.25);
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 14px;
	outline: none;
}

/* placeholder */
#user_phone::placeholder {
	color: rgba(255,255,255,0.65);
}

/* intl-tel-input wrapper */
.intl-tel-input {
	width: 100%;
}

/* flag dropdown */
.intl-tel-input .flag-container {
	border-radius: 12px 0 0 12px;
	overflow: hidden;
	border-right: 1px solid rgba(255,255,255,0.25);
}

/* input inside intl-tel-input */
.intl-tel-input input {
	padding-left: 60px; /* برای فاصله با پرچم */
	background: transparent;
	color: #fff;
	font-size: 14px;
}

/* hover & focus */
.intl-tel-input input:focus {
	border-color: #DF0303;
	box-shadow: 0 0 8px rgba(223,3,3,0.3);
}

/* ================= ACCOUNT PAGE ================= */

.account-card {
    max-width: 420px;
    margin: 0 auto 24px;
    padding: 16px;

    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(12px);
    border-radius: 14px;

    border: 1px solid rgba(255,255,255,0.2);
}

.account-row {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 12px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.15);

    font-size: 14px;
}

.account-row:last-child {
    border-bottom: none;
}

.account-row span {
    opacity: 0.7;
}

.account-row strong {
    font-weight: 500;
}

/* ACTIONS */
.account-actions {
    max-width: 420px;
    margin: 0 auto 24px;
}

.logout-btn {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 12px 14px;

    text-align: center;
    border-radius: 12px;

    background: rgba(223,3,3,0.15);
    color: #DF4646FF;
    border: 1px solid rgba(223,3,3,0.35);

    text-decoration: none;
    font-size: 14px;
    font-weight: 500;

    transition: background .2s ease, transform .15s ease;
}

.logout-btn:active {
    transform: scale(0.96);
}

/* ================= PASSWORD TOGGLE (EYE ICON) ================= */
.password-toggle {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	cursor: pointer;
	color: rgba(255, 255, 255, 0.65); /* match your input placeholder style */
	font-size: 1rem;
	transition: color 0.2s ease;
	z-index: 2;
}

.password-toggle:hover {
	color: #DF0303; /* hover color consistent with your app buttons */
}

/* Ensure the form-group containing password is relative */
.form-group.position-relative {
	position: relative;
}

/* ================= CONTACT US FORM INPUTS ONLY ================= */
.contact-form .form-group {
	margin-bottom: 14px;
	position: relative;
}

#contact-form input,
#contact-form textarea {
	width: 100%;
	padding: 12px 15px;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.25);
	background: rgba(255,255,255,0.08); /* ساده، بدون blur */
	color: #fff;
	font-size: 14px;
	outline: none;
	box-shadow: none; /* هیچ سایه‌ای */
	backdrop-filter: none; /* بدون شیشه‌ای شدن */
	transition: border-color 0.3s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
	color: rgba(255,255,255,0.65);
}

.contact-form input:focus,
.contact-form textarea:focus {
	border-color: #DF0303;
}

/* Textarea */
.contact-form textarea {
	min-height: 120px;
	resize: none;
}

/* Button */
.contact-form .theme-btn {
	display: inline-block;
	width: 100%;
	text-align: center;
	padding: 12px 0;
	border-radius: 12px;
	background: linear-gradient(135deg, #DF4646, #DF0303);
	color: #fff;
	font-weight: 500;
	font-size: 15px;
	border: none;
	cursor: pointer;
	transition: 0.3s;
}

.contact-form .theme-btn:hover {
	opacity: 0.9;
}

/* Mobile responsiveness */
@media (max-width: 480px) {
	#contact-form input,
	#contact-form textarea {
		padding: 10px 12px;
		font-size: 13px;
	}
	.contact-form .theme-btn {
		font-size: 14px;
		padding: 10px 0;
	}
}

/* Divider بعد از Sign Out */
.profile-divider {
	border-bottom: 1px solid rgba(255,255,255,0.15);
	margin: 0 0 10px 0; /* margin-top:0, margin-right:0, margin-bottom:6px, margin-left:0 */
}

/* Version سمت چپ */
.profile-version {
	display: block;
	text-align: left;
	margin-top: 0; /* فاصله از divider */
	font-size: 12px;
	opacity: 0.55;
}

/* =================== SEARCH OVERLAY =================== */

/* Overlay کل صفحه */
#searchOverlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	z-index: 9999;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease;
}

/* وقتی فعال شد */
#searchOverlay.show {
	opacity: 1;
	pointer-events: auto;
}

/* Input جستجو */
#searchInput {
	position: absolute;
	top: 25px;
	left: 50%;
	transform: translateX(-50%) translateY(-30px); /* قبل از نمایش */
	width: 90%;
	max-width: 520px;
	background: rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 16px;
	padding: 16px 18px;
	font-size: 16px;
	color: #fff;
	outline: none;
	opacity: 0;
	transition:
			transform 0.45s cubic-bezier(.2,.9,.3,1),
			opacity 0.35s ease;
	z-index: 10000; /* مطمئن شدن بالای overlay */
}

/* وقتی overlay فعال شد، input ظاهر شود */
#searchOverlay.show #searchInput {
	transform: translateX(-50%) translateY(0);
	opacity: 1;
}

/* placeholder */
#searchInput::placeholder {
	color: rgba(255, 255, 255, 0.7);
}

/* نتایج جستجو */
#searchResults {
	margin-top: 90px;
	max-width: 520px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}

/* هر آیتم جستجو */
.search-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border-radius: 14px;
	cursor: pointer;
	background: rgba(0, 0, 0, 0.25);
	backdrop-filter: blur(10px);
	transition: background 0.25s ease;
	pointer-events: auto; /* حتما برای کلیک */
}

.search-item:hover {
	background: rgba(255, 255, 255, 0.15);
}

.search-item img {
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.search-item span {
	color: #fff;
	font-size: 15px;
}

/* ===== GLASS TABLE ===== */
.glass-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 12px;
}

.glass-table thead th {
	color: #fff;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
	opacity: .85;
}

.glass-table tbody tr {
	background: rgba(255,255,255,0.08);
	backdrop-filter: blur(14px);
	border-radius: 14px;
	transition: background .25s ease;
}

.glass-table tbody tr:hover {
	background: rgba(255,255,255,0.16);
}

.glass-table td, .glass-table th {
	padding: 14px 16px;
	color: #fff;
}

.glass-table tbody td:first-child {
	border-radius: 14px 0 0 14px;
}

.glass-table tbody td:last-child {
	border-radius: 0 14px 14px 0;
}

/* PAGINATION */
.pagination button {
	background: rgba(255,255,255,.15);
	border: none;
	color: #fff;
	padding: 6px 12px;
	margin: 0 4px;
	border-radius: 8px;
}

.pagination button.active {
	background: rgba(255,255,255,.35);
}

/* ================= USER SEARCH INPUT ================= */
.user-search-input {
	width: 100%;
	padding: 12px 16px;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.2);
	background: #15151d; /* تیره و ثابت */
	color: #fff;
	font-size: 14px;
	outline: none;
	transition: background 0.25s ease, box-shadow 0.25s ease;
}

.user-search-input:focus {
	background: #1a1a22;
	box-shadow: 0 0 8px rgba(255,255,255,0.25);
}

/* ================= USER GLASS TABLE ================= */
/* جدول wrapper */
.user-table-wrapper {
	width: 100%;
	overflow-x: auto;
}

/* جدول اصلی */
.user-glass-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}

/* هدر */
.user-glass-table thead th {
	background: rgba(30,30,40,0.9);
	color: #fff;
	font-weight: 600;
	padding: 0px 15px;
	text-align: left;
}

/* ردیف‌ها شفاف و با فاصله */
.user-glass-table tbody tr {
	backdrop-filter: blur(6px);
	margin-bottom: 8px;          /* فاصله بین ردیف‌ها */
	display: table-row;          /* حفظ ساختار جدول */
	transition: background 0.2s ease;
}

/* سلول‌ها */
.user-glass-table td {
	padding: 10px 10px;
	color: #fff;
}

/* input search */
.user-search-input {
	width: 100%;
	padding: 12px 16px;
	color: #fff;
	font-size: 14px;
	outline: none;
	margin-bottom: 12px;
}

/* ================= Sidebar ================= */
.drawer-link {
	display: block;              /* کل عرض قابل کلیک */
	padding: 14px 18px;
	color: #fff;
	text-decoration: none;       /* حذف خط زیر */
	font-size: 14px;
	line-height: 1.0;
	-webkit-tap-highlight-color: transparent; /* حذف فلش آبی موبایل */
}

.drawer-link:hover {
	background: rgba(255,255,255,0.08);
}

.drawer-link:active {
	background: rgba(255,255,255,0.15);
}

.drawer-link.active {
	background: rgba(255,255,255,0.2);
	font-weight: 600;
}

.drawer-link.logout {
	color: #ff6b6b;
}

.drawer-link,
.drawer-link:visited {
	text-decoration: none;
}

input[type="radio"] {
	accent-color: #ff0000;
}