/**
 * HomeGate Web Frontend — تصميم مطابق لتطبيق HomeGate (Flutter)
 * نفس ألوان الثيم: ذهبي #D4A843 + فاتح #F5F7FA + داكن تلقائي
 * معزول بالكامل تحت .hg-wrap — لا يؤثر على أي عنصر خارج عنصر الشورت كود.
 */

.hg-wrap {
	/* ===== Light theme (زي التطبيق الوضع الفاتح) ===== */
	--hg-bg: #F5F7FA;
	--hg-surface: #FFFFFF;
	--hg-card: #FFFFFF;
	--hg-surface-variant: #F0F2F5;
	--hg-field: #F0F2F5;
	--hg-text: #1A1A2E;
	--hg-text-2: #6B7280;
	--hg-hint: #9CA3AF;
	--hg-divider: #E5E7EB;
	--hg-gold: #D4A843;
	--hg-gold-light: #E8C878;
	--hg-gold-dark: #B08930;
	--hg-gold-tint: rgba(212, 168, 67, 0.12);
	--hg-error: #E74C3C;
	--hg-success: #27AE60;
	--hg-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	--hg-radius: 16px;
	--hg-radius-s: 12px;

	direction: rtl;
	text-align: right;
	font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
	font-size: 15px;
	line-height: 1.7;
	color: var(--hg-text);
	background: var(--hg-bg);
	min-height: 100vh;
	padding: 24px 12px;
	box-sizing: border-box;
}

@media (prefers-color-scheme: dark) {
	.hg-wrap {
		--hg-bg: #0D0D0D;
		--hg-surface: #1A1A1A;
		--hg-card: #1E1E1E;
		--hg-surface-variant: #2A2A2A;
		--hg-field: #242424;
		--hg-text: #FFFFFF;
		--hg-text-2: #B0B0B0;
		--hg-hint: #6B6B6B;
		--hg-divider: #2A2A2A;
		--hg-gold-tint: rgba(212, 168, 67, 0.15);
		--hg-shadow: none;
	}
}

.hg-wrap *,
.hg-wrap *::before,
.hg-wrap *::after {
	box-sizing: border-box;
}

.hg-wrap .material-icons {
	font-size: 22px;
	vertical-align: middle;
	line-height: 1;
}

.hg-wrap a {
	color: var(--hg-gold-dark);
	text-decoration: none;
}

.hg-wrap a:hover {
	color: var(--hg-gold);
}

/* ===== الأزرار ===== */
.hg-wrap .hg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 52px;
	padding: 10px 18px;
	border: none;
	border-radius: var(--hg-radius-s);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: filter 0.15s ease, opacity 0.15s ease;
	text-align: center;
}

.hg-wrap .hg-btn-gold {
	background: linear-gradient(135deg, var(--hg-gold) 0%, var(--hg-gold-light) 100%);
	color: #000;
}

.hg-wrap .hg-btn-gold:hover {
	filter: brightness(1.05);
}

.hg-wrap .hg-btn-outline {
	background: transparent;
	color: var(--hg-gold);
	border: 1.5px solid var(--hg-gold);
	font-weight: 700;
}

.hg-wrap .hg-btn[disabled],
.hg-wrap .hg-btn.is-loading {
	opacity: 0.7;
	pointer-events: none;
}

.hg-wrap .hg-btn small.hg-btn-caption {
	display: block;
	font-size: 11.5px;
	font-weight: 600;
	opacity: 0.85;
	line-height: 1.4;
}

.hg-wrap .hg-linkbtn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: none;
	border: none;
	color: var(--hg-gold-dark);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	padding: 4px 6px;
	border-radius: 8px;
}

.hg-wrap .hg-linkbtn .material-icons {
	font-size: 18px;
}

.hg-wrap .hg-linkbtn[disabled] {
	opacity: 0.45;
	cursor: default;
}

.hg-wrap .hg-spinner {
	width: 22px;
	height: 22px;
	border: 2.5px solid rgba(0, 0, 0, 0.25);
	border-top-color: #000;
	border-radius: 50%;
	animation: hg-spin 0.8s linear infinite;
}

@keyframes hg-spin {
	to { transform: rotate(360deg); }
}

/* ===== البطاقات والحقول ===== */
.hg-wrap .hg-card {
	background: var(--hg-card);
	border: 1px solid var(--hg-divider);
	border-radius: var(--hg-radius);
	box-shadow: var(--hg-shadow);
}

.hg-wrap .hg-panel {
	background: var(--hg-card);
	border: 1px solid var(--hg-divider);
	border-radius: var(--hg-radius);
	padding: 14px 16px;
	margin-bottom: 12px;
}

.hg-wrap .hg-panel-head {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 800;
	color: var(--hg-text);
	margin: 6px 0 10px;
}

.hg-wrap .hg-panel-head .material-icons {
	color: var(--hg-gold);
	font-size: 22px;
}

.hg-wrap .hg-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.hg-wrap .hg-hint {
	font-size: 12.5px;
	color: var(--hg-text-2);
	margin: 4px 2px 10px;
}

/* الحقول (نفس شكل Material filled في التطبيق) */
.hg-wrap .hg-field {
	position: relative;
	display: block;
	margin-bottom: 16px;
}

.hg-wrap .hg-field:last-child {
	margin-bottom: 4px;
}

.hg-wrap .hg-field input,
.hg-wrap .hg-field select,
.hg-wrap .hg-field textarea {
	width: 100%;
	min-height: 56px;
	padding: 20px 48px 6px 14px;
	background: var(--hg-field);
	border: 1px solid var(--hg-divider);
	border-radius: var(--hg-radius-s);
	font-family: inherit;
	font-size: 15px;
	color: var(--hg-text);
	outline: none;
	transition: border-color 0.15s ease;
	appearance: none;
}

.hg-wrap .hg-field textarea {
	min-height: 120px;
	padding-top: 24px;
	resize: vertical;
	line-height: 1.7;
}

.hg-wrap .hg-field input:focus,
.hg-wrap .hg-field select:focus,
.hg-wrap .hg-field textarea:focus {
	border-color: var(--hg-gold);
}

.hg-wrap .hg-label {
	position: absolute;
	top: 17px;
	right: 48px;
	color: var(--hg-text-2);
	font-size: 14px;
	pointer-events: none;
	transition: all 0.15s ease;
	background: transparent;
	max-width: calc(100% - 70px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hg-wrap .hg-field input:focus + .hg-label,
.hg-wrap .hg-field input:not(:placeholder-shown) + .hg-label,
.hg-wrap .hg-field textarea:focus + .hg-label,
.hg-wrap .hg-field textarea:not(:placeholder-shown) + .hg-label,
.hg-wrap .hg-field select:focus + .hg-label,
.hg-wrap .hg-field select.has-value + .hg-label {
	top: 8px;
	font-size: 11.5px;
	color: var(--hg-gold-dark);
	font-weight: 700;
}

.hg-wrap .hg-field-icon {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	color: var(--hg-text-2);
	font-size: 21px;
	pointer-events: none;
	z-index: 1;
}

.hg-wrap .hg-field-area .hg-field-icon,
.hg-wrap .hg-field-icon-static {
	display: none;
}

.hg-wrap .hg-field-area .hg-label {
	right: 16px;
}

.hg-wrap .hg-field-area textarea {
	padding-right: 16px;
}

.hg-wrap .hg-field-select select {
	padding-right: 48px;
	cursor: pointer;
}

/* حقول LTR (رقم الجوال): الأيقونة أقصى اليسار والرقم يبدأ بعدها */
.hg-wrap .hg-field-ltr .hg-field-icon {
	right: auto;
	left: 14px;
}

.hg-wrap .hg-field-ltr input {
	padding: 20px 16px 6px 48px;
	text-align: left;
}

.hg-wrap .hg-field-ltr .hg-label {
	right: 16px;
	left: auto;
}

.hg-wrap .hg-field-ltr input:focus + .hg-label,
.hg-wrap .hg-field-ltr input:not(:placeholder-shown) + .hg-label {
	right: 16px;
}

.hg-wrap .hg-eye {
	position: absolute;
	top: 50%;
	left: 12px;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	color: var(--hg-text-2);
	padding: 6px;
	border-radius: 8px;
}

.hg-wrap .hg-eye .material-icons {
	font-size: 20px;
}

/* ===== شاشة الدخول/التسجيل ===== */
.hg-wrap .hg-auth-card {
	max-width: 470px;
	margin: 0 auto;
	padding: 28px 24px;
}

.hg-wrap .hg-logo {
	width: 60px;
	height: 60px;
	margin: 0 auto 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--hg-gold) 0%, var(--hg-gold-light) 100%);
	border-radius: 18px;
}

.hg-wrap .hg-logo .material-icons {
	color: #000;
	font-size: 32px;
}

.hg-wrap .hg-auth-title {
	margin: 0 0 6px;
	text-align: center;
	font-size: 24px;
	font-weight: 800;
	color: var(--hg-text);
}

.hg-wrap .hg-auth-sub {
	margin: 0 0 22px;
	text-align: center;
	font-size: 14px;
	color: var(--hg-text-2);
}

.hg-wrap .hg-logged-in .hg-btn {
	margin-top: 6px;
}

/* التبويبات (إيميل | جوال) */
.hg-wrap .hg-tabs {
	display: flex;
	background: var(--hg-surface-variant);
	border: 1px solid var(--hg-divider);
	border-radius: var(--hg-radius-s);
	padding: 4px;
	margin-bottom: 20px;
}

.hg-wrap .hg-tab {
	flex: 1;
	padding: 10px 8px;
	border: none;
	border-radius: 9px;
	background: transparent;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	color: var(--hg-text-2);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.hg-wrap .hg-tab.is-active {
	background: var(--hg-gold);
	color: #000;
}

.hg-wrap .hg-tabs-sm {
	font-size: 12px;
	margin-bottom: 16px;
}

.hg-wrap .hg-tabs-sm .hg-tab {
	padding: 8px 6px;
	border-radius: 8px;
}

.hg-wrap .hg-pane .hg-field:first-child {
	margin-top: 2px;
}

.hg-wrap .hg-forgot-row {
	text-align: left;
	margin: -6px 0 14px;
}

.hg-wrap .hg-forgot {
	font-size: 13.5px;
}

.hg-wrap .hg-auth-switch {
	text-align: center;
	margin-top: 18px;
	font-size: 14px;
	color: var(--hg-text-2);
}

.hg-wrap .hg-auth-switch a {
	font-weight: 700;
	margin-right: 6px;
}

/* رسائل الخطأ/النجاح */
.hg-wrap .hg-auth-msg {
	margin-top: 14px;
	padding: 12px 14px;
	border-radius: var(--hg-radius-s);
	font-size: 13.5px;
	font-weight: 700;
	text-align: center;
}

.hg-wrap .hg-auth-msg.is-error {
	background: rgba(231, 76, 60, 0.1);
	color: var(--hg-error);
	border: 1px solid rgba(231, 76, 60, 0.3);
}

.hg-wrap .hg-auth-msg.is-success {
	background: rgba(39, 174, 96, 0.1);
	color: var(--hg-success);
	border: 1px solid rgba(39, 174, 96, 0.3);
}

/* شاشة OTP */
.hg-wrap .hg-otp {
	margin-bottom: 20px;
}

.hg-wrap .hg-otp-debug {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--hg-gold-tint);
	border: 1px solid var(--hg-gold);
	border-radius: var(--hg-radius-s);
	padding: 10px 12px;
	margin-bottom: 12px;
	font-weight: 700;
	color: var(--hg-gold-dark);
	font-size: 15px;
	letter-spacing: 2px;
	direction: ltr;
	justify-content: center;
}

.hg-wrap .hg-otp-code {
	flex: 1;
	text-align: center;
}

.hg-wrap .hg-otp-fill {
	background: var(--hg-gold);
	color: #000;
	border: none;
	border-radius: 8px;
	padding: 6px 12px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 800;
	cursor: pointer;
	direction: rtl;
}

.hg-wrap .hg-otp-boxes {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-bottom: 12px;
}

.hg-wrap .hg-otp-boxes input {
	width: 46px;
	height: 56px;
	text-align: center;
	font-size: 22px;
	font-weight: 800;
	background: var(--hg-field);
	border: 1.5px solid var(--hg-divider);
	border-radius: var(--hg-radius-s);
	color: var(--hg-text);
	outline: none;
	font-family: inherit;
}

.hg-wrap .hg-otp-boxes input:focus {
	border-color: var(--hg-gold);
}

.hg-wrap .hg-otp-resend {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 13px;
	color: var(--hg-text-2);
}

/* ===== أزرار الخيارات (نوع الحساب / الاستخدام) ===== */
.hg-wrap .hg-options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 18px;
}

.hg-wrap .hg-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 12px;
	background: var(--hg-card);
	border: 1.5px solid var(--hg-divider);
	border-radius: var(--hg-radius-s);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--hg-text);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.hg-wrap .hg-option .material-icons {
	color: var(--hg-text-2);
	font-size: 22px;
}

.hg-wrap .hg-option.is-active {
	border-color: var(--hg-gold);
	background: var(--hg-gold-tint);
}

.hg-wrap .hg-option.is-active .material-icons {
	color: var(--hg-gold-dark);
}

/* نص زر النوع: العنوان + سطر توضيحي صغير تحته */
.hg-wrap .hg-option .hg-option-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	min-width: 0;
}

.hg-wrap .hg-option .hg-option-text small {
	font-size: 11px;
	font-weight: 600;
	color: var(--hg-text-2);
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.hg-wrap .hg-option.is-active .hg-option-text small {
	color: var(--hg-gold-dark);
}

/* ===== عناوين الأقسام ===== */
.hg-wrap .hg-section-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 20px 0 12px;
	font-size: 16px;
	font-weight: 800;
	color: var(--hg-text);
}

.hg-wrap .hg-section-icon {
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--hg-gold-tint);
	border-radius: 9px;
}

.hg-wrap .hg-section-icon .material-icons {
	font-size: 17px;
	color: var(--hg-gold-dark);
}

/* ===== شرائح الخيارات (chips) ===== */
.hg-wrap .hg-chip-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-bottom: 14px;
}

.hg-wrap .hg-chip-grid-5 {
	grid-template-columns: repeat(5, 1fr);
}

.hg-wrap .hg-chip-grid-3 {
	grid-template-columns: repeat(3, 1fr);
}

.hg-wrap .hg-chip-grid-2 {
	grid-template-columns: repeat(2, 1fr);
}

.hg-wrap .hg-chip-grid-multi {
	grid-template-columns: repeat(3, 1fr);
}

.hg-wrap .hg-chip {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: 78px;
	padding: 8px 4px;
	background: var(--hg-card);
	border: 1.5px solid var(--hg-divider);
	border-radius: 12px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	color: var(--hg-text);
	cursor: pointer;
	text-align: center;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.hg-wrap .hg-chip .material-icons {
	font-size: 24px;
	color: var(--hg-text-2);
}

.hg-wrap .hg-chip:hover {
	border-color: var(--hg-gold);
}

.hg-wrap .hg-chip.is-active {
	border-color: var(--hg-gold);
	background: var(--hg-gold-tint);
}

.hg-wrap .hg-chip.is-active .material-icons,
.hg-wrap .hg-chip.is-active {
	color: var(--hg-gold-dark);
}

.hg-wrap .hg-chip-grid.is-loading {
	opacity: 0.5;
	min-height: 80px;
	position: relative;
}

.hg-wrap .hg-chip-grid.is-loading::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 26px;
	height: 26px;
	border: 3px solid var(--hg-divider);
	border-top-color: var(--hg-gold);
	border-radius: 50%;
	animation: hg-spin 0.8s linear infinite;
}

/* ===== بطاقات نوع الطلب (شراء/بيع/إيجار) ===== */
.hg-wrap .hg-type-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.hg-wrap .hg-type-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 18px 8px;
	background: var(--hg-card);
	border: 1.5px solid var(--hg-divider);
	border-radius: var(--hg-radius-s);
	font-family: inherit;
	font-size: 14px;
	font-weight: 800;
	color: var(--hg-text);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.hg-wrap .hg-type-card .material-icons {
	font-size: 28px;
	color: var(--hg-text-2);
}

.hg-wrap .hg-type-card.is-active {
	border-color: var(--hg-gold);
	background: var(--hg-gold-tint);
}

.hg-wrap .hg-type-card.is-active .material-icons {
	color: var(--hg-gold-dark);
}

/* ===== صفحة النماذج (إضافة عقار/طلب) ===== */
.hg-wrap .hg-page {
	max-width: 760px;
	margin: 0 auto;
}

.hg-wrap .hg-hero {
	text-align: center;
	padding: 18px 12px 22px;
	background: linear-gradient(135deg, var(--hg-gold) 0%, var(--hg-gold-light) 100%);
	border-radius: var(--hg-radius);
	margin-bottom: 16px;
}

.hg-wrap .hg-hero-title {
	margin: 8px 0 4px;
	font-size: 22px;
	font-weight: 800;
	color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.hg-wrap .hg-hero-title .material-icons {
	color: #000;
	font-size: 26px;
}

.hg-wrap .hg-hero-sub {
	margin: 0;
	font-size: 13.5px;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.75);
}

.hg-wrap .hg-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(0, 0, 0, 0.2);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 5px 12px;
	border-radius: 20px;
}

.hg-wrap .hg-hero-badge .material-icons {
	font-size: 15px;
}

/* ===== شريط الخطوات ===== */
.hg-wrap .hg-stepper {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	padding: 6px 2px 10px;
	margin-bottom: 4px;
	scrollbar-width: thin;
}

.hg-wrap .hg-step-pill {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-shrink: 0;
	padding: 7px 12px;
	background: var(--hg-card);
	border: 1.5px solid var(--hg-divider);
	border-radius: 30px;
	font-size: 12px;
	font-weight: 700;
	color: var(--hg-text-2);
	white-space: nowrap;
	transition: all 0.2s ease;
}

.hg-wrap .hg-step-num {
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--hg-surface-variant);
	font-size: 11px;
	color: var(--hg-text-2);
}

.hg-wrap .hg-step-pill.is-active {
	border-color: var(--hg-gold);
	color: var(--hg-gold-dark);
	background: var(--hg-gold-tint);
}

.hg-wrap .hg-step-pill.is-active .hg-step-num {
	background: var(--hg-gold);
	color: #000;
	font-weight: 800;
}

.hg-wrap .hg-step-pill.is-done {
	border-color: var(--hg-gold);
	color: var(--hg-gold-dark);
}

.hg-wrap .hg-step-title-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 4px 2px 12px;
}

.hg-wrap .hg-step-title-icon {
	color: var(--hg-gold);
	font-size: 24px;
}

.hg-wrap .hg-step-title {
	flex: 1;
	margin: 0;
	font-size: 19px;
	font-weight: 800;
	color: var(--hg-text);
}

.hg-wrap .hg-step-count {
	font-size: 12.5px;
	color: var(--hg-text-2);
}

/* ===== التنقل بين الخطوات ===== */
.hg-wrap .hg-nav {
	display: flex;
	gap: 10px;
	margin-top: 12px;
}

.hg-wrap .hg-nav .hg-btn-outline {
	flex: 1;
	min-height: 62px;
}

.hg-wrap .hg-nav .hg-btn-gold {
	flex: 2;
	min-height: 62px;
	flex-direction: row;
}

/* ===== الخريطة ===== */
.hg-wrap .hg-map-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 700;
	margin-bottom: 8px;
}

.hg-wrap .hg-map {
	height: 260px;
	border-radius: var(--hg-radius);
	border: 1px solid var(--hg-divider);
	overflow: hidden;
	position: relative;
	z-index: 0;
}

/* ===== الصور ===== */
.hg-wrap .hg-images-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	color: var(--hg-text-2);
	margin-bottom: 8px;
}

.hg-wrap .hg-dropzone {
	height: 120px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--hg-surface-variant);
	border: 1.5px dashed var(--hg-divider);
	border-radius: var(--hg-radius);
	color: var(--hg-hint);
	cursor: pointer;
	font-size: 14px;
}

.hg-wrap .hg-dropzone .material-icons {
	font-size: 34px;
}

.hg-wrap .hg-dropzone.is-hidden,
.hg-wrap .is-hidden {
	display: none !important;
}

.hg-wrap .hg-images-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-top: 8px;
}

.hg-wrap .hg-image-item {
	position: relative;
	aspect-ratio: 1;
	border-radius: 10px;
	overflow: hidden;
	background: var(--hg-surface-variant);
}

.hg-wrap .hg-image-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hg-wrap .hg-image-badge {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 4px;
	background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.85));
	color: #fff;
	font-size: 10px;
	font-weight: 800;
}

.hg-wrap .hg-image-badge .material-icons {
	font-size: 13px;
	color: var(--hg-gold);
}

.hg-wrap .hg-image-btn {
	position: absolute;
	top: 4px;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.55);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	color: #fff;
	padding: 0;
}

.hg-wrap .hg-image-btn .material-icons {
	font-size: 14px;
}

.hg-wrap .hg-image-btn.is-del {
	left: 4px;
}

.hg-wrap .hg-image-btn.is-star {
	right: 4px;
}

.hg-wrap .hg-image-btn.is-star.is-active {
	background: var(--hg-gold);
	color: #000;
}

/* ===== الأدوار (مخططات الأدوار) ===== */
.hg-wrap .hg-floor {
	background: var(--hg-surface-variant);
	border: 1px solid var(--hg-divider);
	border-radius: 14px;
	padding: 12px;
	margin-bottom: 10px;
}

.hg-wrap .hg-floor-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.hg-wrap .hg-floor-num {
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--hg-gold-tint);
	border-radius: 10px;
	color: var(--hg-gold-dark);
	font-weight: 800;
	font-size: 14px;
}

.hg-wrap .hg-floor-title {
	flex: 1;
	font-weight: 800;
	font-size: 14px;
}

.hg-wrap .hg-floor-del {
	background: none;
	border: none;
	color: var(--hg-error);
	cursor: pointer;
	padding: 4px;
}

.hg-wrap .hg-floor-img-slot {
	margin-bottom: 10px;
}

.hg-wrap .hg-floor-img-slot .hg-btn {
	min-height: 60px;
	width: 100%;
	font-size: 13.5px;
}

.hg-wrap .hg-floor-preview {
	position: relative;
	height: 120px;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 10px;
}

.hg-wrap .hg-floor-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hg-wrap .hg-floor-preview .hg-image-btn {
	top: 6px;
	left: 6px;
}

.hg-wrap .hg-empty-slots {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 20px;
	background: var(--hg-surface-variant);
	border-radius: 14px;
	color: var(--hg-hint);
	font-size: 13px;
	margin-bottom: 10px;
}

.hg-wrap .hg-empty-slots .material-icons {
	font-size: 30px;
}

/* ===== المراجعة ===== */
.hg-wrap .hg-review-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 6px 0;
	font-size: 13.5px;
}

.hg-wrap .hg-review-label {
	flex: 1;
	color: var(--hg-text-2);
}

.hg-wrap .hg-review-value {
	flex: 2;
	text-align: left;
	font-weight: 700;
	color: var(--hg-text);
	word-break: break-word;
}

/* ===== الاستجابة للشاشات الصغيرة ===== */
@media (max-width: 560px) {
	.hg-wrap {
		padding: 16px 10px;
	}

	.hg-wrap .hg-chip-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.hg-wrap .hg-chip-grid-5,
	.hg-wrap .hg-chip-grid-multi {
		grid-template-columns: repeat(3, 1fr);
	}

	.hg-wrap .hg-otp-boxes input {
		width: 42px;
		height: 52px;
	}

	.hg-wrap .hg-grid-2 {
		grid-template-columns: 1fr;
	}

	.hg-wrap .hg-ranges {
		grid-template-columns: 1fr;
	}
}

/* ===== إخفاء الرسائل/العناصر الافتراضي ===== */
.hg-wrap .hg-nav .hg-btn-gold .hg-spinner {
	display: none;
}

.hg-wrap .hg-nav .hg-btn-gold.is-loading .hg-spinner {
	display: inline-block;
}

.hg-wrap .hg-nav .hg-btn-gold.is-loading .material-icons {
	display: none;
}