/* ============================================================
   AMIR MEDICAL — Liquid Glass Modal + Rotating Gradient Border
   (تکنیک مشابه افکت گرادیانت چرخشی منوی دسکتاپ Amir Suite)
   ============================================================ */

@property --am-angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

@keyframes am-spin { to { --am-angle: 360deg; } }

.am-glass-wrap {
	--am-c1: #3b82f6;
	--am-c2: #22d3ee;
	--am-c3: #a78bfa;
	--am-c4: #f472b6;
	--am-c5: #fbbf24;
	--am-c6: var(--am-c1);

	display: inline-block;
	padding: 2px;
	border-radius: 22px;
	position: relative;
	z-index: 100050;
	animation: am-spin 6s linear infinite;
	max-height: 90vh;
}

.am-glass-wrap::after {
	content: '';
	position: absolute;
	inset: 0;
	padding: 2px;
	border-radius: inherit;
	z-index: 0;
	background: conic-gradient(
		from var(--am-angle),
		var(--am-c1), var(--am-c2), var(--am-c3),
		var(--am-c4), var(--am-c5), var(--am-c6)
	);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	animation: inherit;
}

.am-glass-wrap::before {
	content: '';
	position: absolute;
	inset: -6px;
	padding: 8px;
	border-radius: inherit;
	background: conic-gradient(
		from var(--am-angle),
		var(--am-c1), var(--am-c2), var(--am-c3),
		var(--am-c4), var(--am-c5), var(--am-c6)
	);
	filter: blur(16px);
	opacity: .45;
	z-index: -1;
	animation: inherit;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
}

.am-glass-wrap > .mb-modal__box {
	position: relative;
	z-index: 1;
	border-radius: 20px !important;
	border: none !important;
	background: rgba(15, 20, 30, .70) !important;
	backdrop-filter: blur(24px) saturate(1.8);
	-webkit-backdrop-filter: blur(24px) saturate(1.8);
	color: #e5e7eb !important;
	box-shadow: 0 24px 60px rgba(0,0,0,.35);
}

.am-glass-wrap > .mb-modal__box h3,
.am-glass-wrap > .mb-modal__box h4 { color: #f8fafc !important; }

.am-glass-wrap > .mb-modal__box label { color: #cbd5e1 !important; }

.am-glass-wrap > .mb-modal__box input,
.am-glass-wrap > .mb-modal__box select,
.am-glass-wrap > .mb-modal__box textarea {
	background: rgba(255,255,255,.06) !important;
	border: 1px solid rgba(255,255,255,.12) !important;
	color: #f1f5f9 !important;
}
.am-glass-wrap > .mb-modal__box input::placeholder,
.am-glass-wrap > .mb-modal__box textarea::placeholder { color: #94a3b8 !important; }

.am-glass-wrap > .mb-modal__box small,
.am-glass-wrap > .mb-modal__box .mb-hint { color: #94a3b8 !important; }

.am-glass-wrap > .mb-modal__box .mb-modal__close { color: #94a3b8 !important; }
.am-glass-wrap > .mb-modal__box .mb-modal__close:hover { color: #fff !important; }

.am-glass-wrap > .mb-modal__box .mb-choice-card,
.am-glass-wrap > .mb-modal__box .mb-scan-status,
.am-glass-wrap > .mb-modal__box .mb-suggestions {
	background: rgba(255,255,255,.05) !important;
	border-color: rgba(255,255,255,.1) !important;
	color: #e5e7eb !important;
}
.am-glass-wrap > .mb-modal__box .mb-choice-card__desc { color: #94a3b8 !important; }
.am-glass-wrap > .mb-modal__box .mb-suggestion-item:hover { background: rgba(255,255,255,.1) !important; }

@media (max-width: 560px) {
	.am-glass-wrap::before { filter: blur(10px); opacity: .35; }
}
