/* ===== Souq Marketplace — modern app-like design system ===== */
:root {
	--souq-primary: #2f6fed;
	--souq-primary-dark: #1f56c9;
	--souq-primary-light: #e8f0fe;
	--souq-accent: #0ea5b7;
	--souq-accent-light: #e3f7f9;
	--souq-ink: #0c1a30;
	--souq-ink-2: #16294a;
	--souq-text: #1b2536;
	--souq-text-muted: #64748b;
	--souq-bg: #f3f6fb;
	--souq-surface: #ffffff;
	--souq-surface-rgb: 255, 255, 255;
	--souq-border: #e4e9f2;
	--souq-success-bg: #e3f8ea;
	--souq-success: #158a43;
	--souq-danger-bg: #fde8e8;
	--souq-danger: #c0281e;
	--souq-warn-bg: #fff4d9;
	--souq-warn: #8a6300;
	--souq-info-bg: #e4edff;
	--souq-info: #1c4fa8;
	--souq-radius-sm: 10px;
	--souq-radius: 16px;
	--souq-radius-lg: 24px;
	--souq-shadow-sm: 0 1px 3px rgba(12,26,48,.06), 0 1px 2px rgba(12,26,48,.04);
	--souq-shadow: 0 10px 28px rgba(12,26,48,.08);
	--souq-shadow-lg: 0 22px 50px rgba(12,26,48,.18);
	--souq-header-h: 64px;
	--souq-bottomnav-h: 64px;
	--souq-max: 1240px;
	--souq-admin-sidebar-w: 250px;

	/* colors that flip meaning in dark mode but keep the same name everywhere else */
	--souq-white: #ffffff;
	--souq-overlay: rgba(12,26,48,.55);
	--souq-scrim: rgba(12,26,48,.5);
}

/* dark mode: system preference (no explicit choice saved) */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--souq-primary: #5b8bff;
		--souq-primary-dark: #8fb0ff;
		--souq-primary-light: #1b2b4d;
		--souq-accent: #2dd4c8;
		--souq-accent-light: #123138;
		--souq-ink: #eef2fb;
		--souq-ink-2: #cbd5e8;
		--souq-text: #d7deee;
		--souq-text-muted: #8b96ad;
		--souq-bg: #0b1220;
		--souq-surface: #131c2e;
		--souq-surface-rgb: 19, 28, 46;
		--souq-border: #253046;
		--souq-success-bg: #103524;
		--souq-success: #4ade80;
		--souq-danger-bg: #3a1518;
		--souq-danger: #f87171;
		--souq-warn-bg: #3a2c0c;
		--souq-warn: #fbbf24;
		--souq-info-bg: #122544;
		--souq-info: #7fa8ff;
		--souq-shadow-sm: 0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
		--souq-shadow: 0 10px 28px rgba(0,0,0,.4);
		--souq-shadow-lg: 0 22px 50px rgba(0,0,0,.55);
		--souq-white: #ffffff;
		--souq-overlay: rgba(0,0,0,.6);
		--souq-scrim: rgba(0,0,0,.6);
	}
}

/* dark mode: explicit user choice (wins over system preference either way) */
:root[data-theme="dark"] {
	--souq-primary: #5b8bff;
	--souq-primary-dark: #8fb0ff;
	--souq-primary-light: #1b2b4d;
	--souq-accent: #2dd4c8;
	--souq-accent-light: #123138;
	--souq-ink: #eef2fb;
	--souq-ink-2: #cbd5e8;
	--souq-text: #d7deee;
	--souq-text-muted: #8b96ad;
	--souq-bg: #0b1220;
	--souq-surface: #131c2e;
	--souq-surface-rgb: 19, 28, 46;
	--souq-border: #253046;
	--souq-success-bg: #103524;
	--souq-success: #4ade80;
	--souq-danger-bg: #3a1518;
	--souq-danger: #f87171;
	--souq-warn-bg: #3a2c0c;
	--souq-warn: #fbbf24;
	--souq-info-bg: #122544;
	--souq-info: #7fa8ff;
	--souq-shadow-sm: 0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
	--souq-shadow: 0 10px 28px rgba(0,0,0,.4);
	--souq-shadow-lg: 0 22px 50px rgba(0,0,0,.55);
	--souq-overlay: rgba(0,0,0,.6);
	--souq-scrim: rgba(0,0,0,.6);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: 'Cairo', 'Tahoma', system-ui, sans-serif;
	background: var(--souq-bg);
	color: var(--souq-text);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	padding-bottom: 0;
}
#souqMain.souq_loading { opacity: .45; pointer-events: none; transition: opacity .15s ease; }
#souqMain { transition: opacity .15s ease; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3 { line-height: 1.3; margin: 0 0 12px; font-weight: 800; color: var(--souq-ink); letter-spacing: -.01em; }
h1 { font-size: clamp(22px, 4vw, 30px); }
h2 { font-size: clamp(17px, 3vw, 20px); margin: 28px 0 14px; display: flex; align-items: center; justify-content: space-between; }
p { margin: 0 0 8px; color: var(--souq-text); }
.souq_optional { color: var(--souq-text-muted); font-weight: 400; font-size: .85em; }
.souq_required_tag { color: var(--souq-danger); font-weight: 400; font-size: .85em; }
.hidden { display: none !important; }
.souq_see_all { font-size: 13px; font-weight: 700; color: var(--souq-primary-dark); }

/* ---------- layout ---------- */
.btable { display: table; width: 100%; }
.bcell_mid { display: table-cell; vertical-align: middle; }
.souq_container {
	max-width: var(--souq-max);
	margin: 0 auto;
	padding: 18px 16px 40px;
	min-height: 50vh;
}

/* ---------- full-page loading screen (storefront) ---------- */
.souq_preloader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 22px;
	background: var(--souq-bg);
	opacity: 1;
	transition: opacity .3s ease;
}
.souq_preloader.souq_preloader_hide { opacity: 0; pointer-events: none; }
.souq_preloader_logo {
	width: 88px;
	height: 88px;
	object-fit: contain;
	border-radius: 20px;
	animation: souqPreloaderPulse 1.4s ease-in-out infinite;
}
.souq_preloader_text {
	font-size: 17px;
	font-weight: 800;
	color: var(--souq-ink);
	margin-top: -8px;
}
.souq_preloader_spinner {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 3px solid var(--souq-border);
	border-top-color: var(--souq-primary);
	animation: souqSpin .8s linear infinite;
}
@keyframes souqPreloaderPulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(.92); opacity: .8; }
}

/* ---------- header (desktop) ---------- */
.souq_header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--souq-surface);
	border-bottom: 1px solid var(--souq-border);
	transition: background .25s ease, backdrop-filter .25s ease, box-shadow .25s ease;
}
.souq_header.souq_header_scrolled, .souq_header.souq_header_transitioning {
	background: rgba(var(--souq-surface-rgb), .72);
	backdrop-filter: blur(14px) saturate(160%);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	box-shadow: var(--souq-shadow-sm);
}
.souq_header_inner {
	max-width: var(--souq-max);
	margin: 0 auto;
	height: var(--souq-header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 0 16px;
}
.souq_header_side {
	flex: 1;
	display: flex;
	align-items: center;
}
.souq_header_side_start { justify-content: flex-start; }
.souq_header_side_end { justify-content: flex-end; }
.souq_logo {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	color: var(--souq-ink);
	font-weight: 800;
	font-size: 18px;
}
.souq_logo_center { flex: 0 0 auto; }
.souq_logo_mark {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	display: block;
	border-radius: 11px;
}
.souq_logo_mark img { width: 100%; height: 100%; display: block; border-radius: inherit; }
.souq_avatar_lg .souq_logo_mark { width: 100%; height: 100%; }
.souq_search input {
	flex: 1;
	border: 1.5px solid var(--souq-border);
	border-inline-end: none;
	border-radius: var(--souq-radius-sm) 0 0 var(--souq-radius-sm);
	padding: 10px 14px;
	font-size: 14px;
	background: var(--souq-bg);
	color: var(--souq-text);
}
.souq_search input:focus { outline: none; border-color: var(--souq-primary); background: var(--souq-surface); }
.souq_search button {
	border: none;
	border-radius: 0 var(--souq-radius-sm) var(--souq-radius-sm) 0;
	background: var(--souq-primary);
	color: #fff;
	padding: 0 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
}
.souq_header_actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-inline-start: auto;
	flex-shrink: 0;
}
.souq_icon_link {
	position: relative;
	color: var(--souq-ink);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background .15s ease, transform .1s ease;
}
.souq_icon_link:hover { background: var(--souq-bg); }
.souq_icon_link:active { transform: scale(.9); }

/* notification bell: soft filled circle instead of a bare icon, ring pulses briefly on new unread */
.souq_notif_btn {
	position: relative;
	width: 40px;
	height: 40px;
	border: none;
	cursor: pointer;
	border-radius: 50%;
	background: var(--souq-bg);
	color: var(--souq-ink);
	font-size: 15.5px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease, color .15s ease, transform .1s ease;
}
.souq_notif_btn:hover { background: var(--souq-primary-light); color: var(--souq-primary-dark); }
.souq_notif_btn:active { transform: scale(.94); }

/* theme toggle: a small pill switch that slides between a moon and a sun */
.souq_theme_toggle {
	position: relative;
	width: 40px;
	height: 40px;
	border: none;
	cursor: pointer;
	border-radius: 50%;
	background: var(--souq-bg);
	color: var(--souq-ink);
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease, transform .1s ease;
}
.souq_theme_toggle:hover { background: var(--souq-primary-light); }
.souq_theme_toggle:active { transform: scale(.94); }
.souq_theme_icon_dark, .souq_theme_icon_light { position: absolute; transition: opacity .2s ease, transform .3s ease; }
.souq_theme_icon_dark { color: #64748b; opacity: 1; transform: rotate(0deg) scale(1); }
.souq_theme_icon_light { color: #f5a623; opacity: 0; transform: rotate(-90deg) scale(.5); }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .souq_theme_icon_dark { opacity: 0; transform: rotate(90deg) scale(.5); }
	:root:not([data-theme="light"]) .souq_theme_icon_light { opacity: 1; transform: rotate(0deg) scale(1); }
}
:root[data-theme="dark"] .souq_theme_icon_dark { opacity: 0; transform: rotate(90deg) scale(.5); }
:root[data-theme="dark"] .souq_theme_icon_light { opacity: 1; transform: rotate(0deg) scale(1); }

.souq_badge {
	position: absolute;
	top: 0;
	inset-inline-end: 0;
	background: var(--souq-primary);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	min-width: 17px;
	height: 17px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
	border: 2px solid var(--souq-surface);
}
.souq_user_menu { position: relative; }
.souq_user_btn {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--souq-bg);
	border: none;
	border-radius: 30px;
	padding: 5px 12px 5px 5px;
	color: var(--souq-text);
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
}
.souq_avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--souq-primary), var(--souq-accent));
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 13px;
	flex-shrink: 0;
}
.souq_user_name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.souq_dropdown {
	position: absolute;
	top: calc(100% + 10px);
	inset-inline-end: 0;
	background: var(--souq-surface);
	border-radius: var(--souq-radius-sm);
	box-shadow: var(--souq-shadow-lg);
	border: 1px solid var(--souq-border);
	min-width: 190px;
	padding: 8px;
	display: none;
	flex-direction: column;
	gap: 2px;
	z-index: 200;
}
.souq_dropdown.souq_open { display: flex; }
.souq_dropdown a { padding: 10px 12px; border-radius: 8px; color: var(--souq-text); font-size: 14px; font-weight: 600; }
.souq_dropdown a:hover { background: var(--souq-bg); }
.souq_dropdown .souq_logout { color: var(--souq-danger); }

/* ---------- notifications ---------- */
.souq_notif_menu { position: relative; }
.souq_notif_dropdown { width: 320px; padding: 0; max-height: 420px; overflow-y: auto; }
.souq_notif_dropdown_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	border-bottom: 1px solid var(--souq-border);
	font-weight: 800;
	font-size: 14px;
	color: var(--souq-ink);
	position: sticky;
	top: 0;
	background: var(--souq-surface);
}
.souq_notif_dropdown_head form { margin: 0; }
.souq_notif_markall {
	background: none;
	border: none;
	color: var(--souq-primary-dark);
	font-size: 11.5px;
	font-weight: 700;
	cursor: pointer;
	padding: 0;
	margin: 0;
}
.souq_notif_dropdown_empty { padding: 30px 14px; text-align: center; color: var(--souq-text-muted); font-size: 13px; }
.souq_notif_dropdown_item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--souq-border);
}
.souq_notif_dropdown_item:hover { background: var(--souq-bg); }
.souq_notif_dropdown_item i { color: var(--souq-text-muted); font-size: 14px; margin-top: 2px; }
.souq_notif_dropdown_item.souq_notif_unread { background: var(--souq-primary-light); }
.souq_notif_dropdown_item.souq_notif_unread i { color: var(--souq-primary-dark); }
.souq_notif_dd_title { font-size: 13px; font-weight: 700; color: var(--souq-text); }
.souq_notif_dd_time { font-size: 11px; color: var(--souq-text-muted); margin-top: 2px; }
.souq_notif_dropdown_foot {
	display: block;
	text-align: center;
	padding: 12px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--souq-primary-dark);
}
.souq_notif_dropdown_foot:hover { background: var(--souq-bg); }

/* ---------- notifications full page ---------- */
.souq_notif_page_header { margin-bottom: 16px; }
.souq_notif_list { display: flex; flex-direction: column; gap: 8px; }
.souq_notif_row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: var(--souq-surface);
	border: 1px solid var(--souq-border);
	border-radius: var(--souq-radius-sm);
	padding: 14px;
}
.souq_notif_row.souq_notif_unread { background: var(--souq-primary-light); border-color: var(--souq-primary); }
.souq_notif_icon {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--souq-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--souq-primary-dark);
	flex-shrink: 0;
}
.souq_notif_title { font-weight: 700; font-size: 14px; color: var(--souq-ink); }
.souq_notif_body { font-size: 13px; color: var(--souq-text-muted); margin-top: 2px; }
.souq_notif_time { font-size: 11.5px; color: var(--souq-text-muted); margin-top: 6px; }
.souq_notif_empty { text-align: center; padding: 60px 20px; color: var(--souq-text-muted); }
.souq_notif_empty i { font-size: 40px; margin-bottom: 12px; display: block; }

.souq_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 11px 22px;
	border-radius: 30px;
	font-weight: 700;
	font-size: 14px;
	white-space: nowrap;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
}
.souq_btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(47,111,237,.22); }
.souq_btn:active { transform: scale(.96); }
.souq_btn:disabled, .souq_btn.souq_disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
.souq_btn_primary { background: var(--souq-primary); color: #fff; box-shadow: 0 3px 10px rgba(47,111,237,.28); }
.souq_btn_primary:hover { background: var(--souq-primary-dark); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(47,111,237,.34); }
.souq_btn_ghost { background: var(--souq-surface); color: var(--souq-text); border-color: var(--souq-border); }
.souq_btn_ghost:hover { background: var(--souq-bg); border-color: var(--souq-primary); color: var(--souq-primary-dark); transform: translateY(-1px); }
.souq_btn_danger { background: var(--souq-danger-bg); color: var(--souq-danger); }
.souq_btn_danger:hover { background: var(--souq-danger); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(192,40,30,.3); }
.souq_btn_sm { padding: 7px 15px; font-size: 12.5px; }
.souq_btn_lg { padding: 14px 26px; font-size: 15.5px; }
.souq_btn_block { width: 100%; }
.souq_btn_icon { padding: 10px; width: 40px; height: 40px; border-radius: 50%; }
.souq_hide_mobile_bar { }

/* ---------- bottom nav ---------- */
.souq_bottomnav {
	display: none;
	position: fixed;
	bottom: 0;
	inset-inline: 0;
	z-index: 200;
	background: var(--souq-surface);
	border-top: 1px solid var(--souq-border);
	box-shadow: 0 -6px 20px rgba(11,18,32,.06);
	padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.souq_bottomnav_inner {
	display: flex;
	align-items: center;
	justify-content: space-around;
	max-width: 560px;
	margin: 0 auto;
}
.souq_bn_item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	color: var(--souq-text-muted);
	font-size: 10.5px;
	font-weight: 700;
	padding: 6px 10px;
	border-radius: 12px;
	position: relative;
	flex: 1;
	transition: color .15s ease, transform .1s ease;
}
.souq_bn_item:active { transform: scale(.92); }
.souq_bn_item.souq_bn_active { color: var(--souq-primary); }
.souq_bn_item.souq_bn_active i { animation: souqBnBounce .35s ease; }
.souq_bn_item i { font-size: 19px; line-height: 1; transition: transform .15s ease; }
@keyframes souqBnBounce { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
.souq_bn_center {
	margin-top: -26px;
	transition: transform .12s ease;
}
.souq_bn_center:active { transform: scale(.93); }
.souq_bn_center_circle {
	position: relative;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--souq-primary), var(--souq-accent));
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 18px rgba(47,111,237,.4);
	border: 4px solid var(--souq-surface);
}
.souq_bn_center_circle i { font-size: 20px; }
.souq_bn_badge {
	position: absolute;
	top: 0;
	inset-inline-end: 10px;
	background: var(--souq-danger);
	color: #fff;
	font-size: 9px;
	font-weight: 800;
	min-width: 15px;
	height: 15px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
}

/* ---------- account bottom sheet ---------- */
.souq_account_sheet {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 400;
}
.souq_account_sheet.souq_open { display: block; }
.souq_sheet_backdrop {
	position: absolute;
	inset: 0;
	background: rgba(11,18,32,.55);
	opacity: 0;
	animation: souqFadeIn .2s ease forwards;
}
@keyframes souqFadeIn { to { opacity: 1; } }
.souq_sheet_panel {
	position: absolute;
	bottom: 0;
	inset-inline: 0;
	background: var(--souq-surface);
	border-radius: 22px 22px 0 0;
	padding: 10px 20px calc(20px + env(safe-area-inset-bottom));
	max-height: 82vh;
	overflow-y: auto;
	box-shadow: var(--souq-shadow-lg);
	transform: translateY(100%);
	animation: souqSlideUp .25s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes souqSlideUp { to { transform: translateY(0); } }
.souq_sheet_handle {
	width: 40px;
	height: 4px;
	border-radius: 4px;
	background: var(--souq-border);
	margin: 6px auto 16px;
}
.souq_sheet_profile {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--souq-border);
}
.souq_avatar_lg { width: 48px; height: 48px; font-size: 18px; }
.souq_sheet_name { font-weight: 800; font-size: 15px; color: var(--souq-ink); }
.souq_sheet_phone { font-size: 12.5px; color: var(--souq-text-muted); direction: ltr; text-align: right; }
.souq_sheet_section_title {
	font-size: 11.5px;
	font-weight: 800;
	color: var(--souq-text-muted);
	text-transform: uppercase;
	letter-spacing: .3px;
	margin: 4px 4px 8px;
}
.souq_sheet_section {
	background: var(--souq-bg);
	border-radius: var(--souq-radius-sm);
	margin-bottom: 14px;
	overflow: hidden;
}
.souq_sheet_row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 14px;
	font-weight: 700;
	font-size: 13.5px;
	color: var(--souq-text);
	transition: background .15s ease, transform .1s ease;
	border-bottom: 1px solid var(--souq-border);
	opacity: 0;
	transform: translateY(6px);
	animation: souqSheetRowIn .28s ease forwards;
}
.souq_sheet_section .souq_sheet_row:last-child { border-bottom: none; }
.souq_sheet_row:hover { background: var(--souq-surface-hover, var(--souq-primary-light)); }
.souq_sheet_row:hover .souq_sheet_chevron { transform: translateX(-3px); }
.souq_sheet_row:active { transform: scale(.98); }
.souq_sheet_row_text { flex: 1; }
.souq_sheet_chevron { color: var(--souq-text-muted); font-size: 12px; transition: transform .15s ease; }
@keyframes souqSheetRowIn { to { opacity: 1; transform: translateY(0); } }
.souq_sheet_section:nth-of-type(1) .souq_sheet_row:nth-child(1) { animation-delay: .03s; }
.souq_sheet_section:nth-of-type(1) .souq_sheet_row:nth-child(2) { animation-delay: .07s; }
.souq_sheet_section:nth-of-type(1) .souq_sheet_row:nth-child(3) { animation-delay: .11s; }
.souq_sheet_section:nth-of-type(2) .souq_sheet_row:nth-child(1) { animation-delay: .12s; }
.souq_sheet_section:nth-of-type(2) .souq_sheet_row:nth-child(2) { animation-delay: .15s; }
.souq_sheet_section:nth-of-type(2) .souq_sheet_row:nth-child(3) { animation-delay: .18s; }
.souq_sheet_section:nth-of-type(2) .souq_sheet_row:nth-child(4) { animation-delay: .21s; }
.souq_sheet_section:nth-of-type(2) .souq_sheet_row:nth-child(5) { animation-delay: .24s; }
.souq_sheet_section:nth-of-type(2) .souq_sheet_row:nth-child(6) { animation-delay: .27s; }
.souq_sheet_section:nth-of-type(2) .souq_sheet_row:nth-child(7) { animation-delay: .3s; }
.souq_sheet_section:nth-of-type(3) .souq_sheet_row { animation-delay: .32s; }
.souq_sheet_badge { animation: souqSheetBadgePulse 1.8s ease-in-out infinite; }
@keyframes souqSheetBadgePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); } 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--souq-primary) 25%, transparent); } }
.souq_sheet_ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	font-size: 15px;
	flex-shrink: 0;
}
.souq_sheet_ico_blue { background: var(--souq-primary-light); color: var(--souq-primary-dark); }
.souq_sheet_ico_amber { background: var(--souq-warn-bg); color: var(--souq-warn); }
.souq_sheet_ico_gray { background: var(--souq-border); color: var(--souq-text-muted); }
.souq_sheet_badge {
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 10px;
	background: var(--souq-primary);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.souq_sheet_badge_accent { background: var(--souq-accent, var(--souq-primary)); }
.souq_sheet_avatar_ring {
	box-shadow: 0 0 0 3px var(--souq-surface), 0 0 0 5px var(--souq-primary-light);
}
.souq_sheet_role_chip {
	display: inline-block;
	margin-top: 4px;
	padding: 2px 9px;
	border-radius: 20px;
	background: var(--souq-primary-light);
	color: var(--souq-primary-dark);
	font-size: 11px;
	font-weight: 800;
}
.souq_sheet_close {
	display: block;
	width: 100%;
	padding: 13px;
	border: none;
	border-radius: var(--souq-radius-sm);
	background: var(--souq-bg);
	color: var(--souq-text);
	font-weight: 800;
	font-size: 14px;
	cursor: pointer;
}
.souq_sheet_close:hover { background: var(--souq-border); }
.souq_sheet_guest {
	text-align: center;
	padding: 10px 0 6px;
}
.souq_sheet_guest i { font-size: 40px; color: var(--souq-border); margin-bottom: 10px; }
.souq_sheet_guest p { color: var(--souq-text-muted); font-size: 13.5px; margin-bottom: 16px; }
.souq_sheet_guest .souq_btn { width: 100%; margin-bottom: 8px; }

/* ---------- generic forms ---------- */
button { font-family: inherit; }
input, select, textarea {
	width: 100%;
	padding: 12px 15px;
	border: 1.5px solid var(--souq-border);
	border-radius: var(--souq-radius-sm);
	font-size: 14.5px;
	font-family: inherit;
	background: var(--souq-surface);
	color: var(--souq-text);
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input::placeholder, textarea::placeholder { color: var(--souq-text-muted); opacity: .85; }
input:hover, select:hover, textarea:hover { border-color: #c7d0e0; }
input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--souq-primary);
	box-shadow: 0 0 0 3px rgba(47,111,237,.14);
}
input:disabled, select:disabled, textarea:disabled { background: var(--souq-bg); color: var(--souq-text-muted); cursor: not-allowed; opacity: .8; }
input[type="file"] { padding: 8px 10px; cursor: pointer; }
select { cursor: pointer; }
textarea { min-height: 100px; resize: vertical; }
label { font-size: 13.5px; font-weight: 700; color: var(--souq-ink); margin-top: 4px; }

/* custom checkbox / radio - replaces bare native controls across the whole site */
input[type="checkbox"], input[type="radio"] {
	-webkit-appearance: none; appearance: none;
	width: 20px; height: 20px;
	flex-shrink: 0;
	padding: 0;
	border: 1.5px solid var(--souq-border);
	background: var(--souq-surface);
	cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
	position: relative;
}
input[type="checkbox"] { border-radius: 6px; }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--souq-primary); }
input[type="checkbox"]:checked, input[type="radio"]:checked {
	background: var(--souq-primary);
	border-color: var(--souq-primary);
}
input[type="checkbox"]:checked::after {
	content: "";
	width: 5px; height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translate(-1px, -1px);
}
input[type="radio"]:checked::after {
	content: "";
	width: 8px; height: 8px;
	border-radius: 50%;
	background: #fff;
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
	outline: none; box-shadow: 0 0 0 3px rgba(47,111,237,.22);
}
form { display: flex; flex-direction: column; gap: 8px; }
form button[type="submit"], .souq_form_submit {
	background: var(--souq-primary);
	color: #fff;
	border: none;
	border-radius: var(--souq-radius-sm);
	padding: 13px;
	font-weight: 800;
	font-size: 15px;
	cursor: pointer;
	margin-top: 6px;
	transition: background .15s ease, transform .1s ease;
}
form button[type="submit"]:hover { background: var(--souq-primary-dark); }
form button[type="submit"]:active { transform: scale(.98); }

/* ---------- banner slider ---------- */
.souq_banner_slider {
	position: relative;
	border-radius: var(--souq-radius-lg);
	overflow: hidden;
	margin-bottom: 24px;
}
.souq_banner_track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.souq_banner_track::-webkit-scrollbar { display: none; }
.souq_banner_slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	position: relative;
	min-height: 190px;
	background: linear-gradient(120deg, var(--souq-ink) 0%, var(--souq-ink-2) 55%, #163a52 100%);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
	color: #fff;
}
.souq_banner_slide::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(12,26,48,.82) 10%, rgba(12,26,48,.15) 70%);
}
.souq_banner_overlay { position: relative; padding: 22px 24px; max-width: 480px; }
.souq_banner_overlay > * { opacity: 0; }
.souq_banner_overlay.souq_banner_overlay_in > * { animation: souqBannerContentIn .5s ease both; }
.souq_banner_overlay.souq_banner_overlay_in > *:nth-child(1) { animation-delay: .05s; }
.souq_banner_overlay.souq_banner_overlay_in > *:nth-child(2) { animation-delay: .12s; }
.souq_banner_overlay.souq_banner_overlay_in > *:nth-child(3) { animation-delay: .19s; }
@keyframes souqBannerContentIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.souq_banner_title { color: #fff; margin-bottom: 6px; font-size: clamp(19px, 3.5vw, 26px); }
.souq_banner_subtitle { color: rgba(255,255,255,.78); font-size: 13.5px; margin-bottom: 14px; }
.souq_banner_dots {
	position: absolute;
	bottom: 12px;
	inset-inline-end: 16px;
	display: flex;
	gap: 6px;
	z-index: 2;
}
.souq_banner_dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(255,255,255,.4);
	cursor: pointer;
	transition: background .15s ease, width .15s ease;
}
.souq_banner_dot_active { background: #fff; width: 18px; border-radius: 4px; }

/* ---------- homepage highlight carousel: latest item of every section, auto-built.
   same mechanics as the manual banner slider (scroll-snap track, autoplay, dots) plus
   explicit prev/next arrow buttons for discoverable manual control. ---------- */
.souq_highlight_slider {
	position: relative;
	border-radius: var(--souq-radius-lg);
	overflow: hidden;
	margin-bottom: 24px;
	box-shadow: var(--souq-shadow);
}
.souq_highlight_track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.souq_highlight_track::-webkit-scrollbar { display: none; }
.souq_highlight_slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	position: relative;
	min-height: 180px;
	background: linear-gradient(120deg, var(--souq-ink) 0%, var(--souq-ink-2) 55%, #163a52 100%);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
	color: #fff;
}
.souq_highlight_slide::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(8,14,26,.85) 0%, rgba(8,14,26,.4) 50%, rgba(8,14,26,.08) 100%);
}
.souq_highlight_overlay { position: relative; padding: 20px 22px; max-width: 480px; }
.souq_highlight_tag {
	display: inline-flex; align-items: center;
	background: color-mix(in srgb, var(--souq-primary) 88%, transparent);
	color: #fff; font-size: 11px; font-weight: 800;
	padding: 4px 12px; border-radius: 999px; margin-bottom: 8px;
	letter-spacing: .2px;
}
.souq_highlight_title { color: #fff; margin: 0 0 4px; font-size: clamp(17px, 3vw, 22px); font-weight: 800; letter-spacing: -.3px; }
.souq_highlight_subtitle { color: rgba(255,255,255,.82); font-size: 13px; margin: 0; }
.souq_highlight_nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 34px; height: 34px; border-radius: 50%; border: none;
	background: rgba(8,14,26,.4); color: #fff; font-size: 13px;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; z-index: 3;
	backdrop-filter: blur(2px);
	transition: background .15s ease, transform .12s ease;
}
.souq_highlight_nav:hover { background: rgba(8,14,26,.65); }
.souq_highlight_nav:active { transform: translateY(-50%) scale(.92); }
.souq_highlight_prev { inset-inline-start: 12px; }
.souq_highlight_next { inset-inline-end: 12px; }
.souq_highlight_dots {
	position: absolute;
	bottom: 12px;
	inset-inline-end: 16px;
	display: flex;
	gap: 6px;
	z-index: 2;
}
.souq_highlight_dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(255,255,255,.4);
	cursor: pointer;
	transition: background .15s ease, width .15s ease;
}
.souq_highlight_dot_active { background: #fff; width: 18px; border-radius: 4px; }
@media (max-width: 560px) {
	.souq_highlight_nav { display: none; }
}

/* ---------- horizontal product scroller ---------- */
.souq_product_scroller {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	padding-bottom: 6px;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}
.souq_product_scroller::-webkit-scrollbar { display: none; }
.souq_product_scroller_item {
	flex: 0 0 150px;
	scroll-snap-align: start;
}
@media (min-width: 640px) {
	.souq_product_scroller_item { flex-basis: 190px; }
}

/* ---------- categories (circular icons like reference) ---------- */
.souq_categories {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px 8px;
	margin-bottom: 24px;
}
.souq_cat_chip {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}
.souq_cat_icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--souq-primary-light);
	color: var(--souq-primary-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	transition: transform .15s ease, background .15s ease;
}
.souq_cat_chip:hover .souq_cat_icon { transform: translateY(-3px); background: var(--souq-accent-light); }
.souq_cat_chip:active .souq_cat_icon { transform: scale(.9); }
.souq_cat_label { font-size: 11.5px; font-weight: 700; color: var(--souq-text); line-height: 1.3; }

/* ---------- product grid & card ---------- */
.souq_grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 14px;
}
.souq_product_card {
	background: var(--souq-surface);
	border-radius: var(--souq-radius);
	overflow: hidden;
	box-shadow: var(--souq-shadow-sm);
	border: 1px solid var(--souq-border);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
	opacity: 0;
	animation: souqCardIn .4s ease both;
}
.souq_product_card:hover { transform: translateY(-4px); box-shadow: var(--souq-shadow); border-color: var(--souq-primary-light); }
.souq_product_card:active { transform: translateY(-1px) scale(.98); }
.souq_product_img { position: relative; overflow: hidden; }
.souq_product_img img, .souq_no_image {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--souq-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--souq-text-muted);
	font-size: 22px;
	transition: transform .35s ease;
}
.souq_product_card:hover .souq_product_img img { transform: scale(1.06); }
@keyframes souqCardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.souq_grid > *:nth-child(1), .souq_store_grid > *:nth-child(1), .souq_offer_grid > *:nth-child(1) { animation-delay: .02s; }
.souq_grid > *:nth-child(2), .souq_store_grid > *:nth-child(2), .souq_offer_grid > *:nth-child(2) { animation-delay: .06s; }
.souq_grid > *:nth-child(3), .souq_store_grid > *:nth-child(3), .souq_offer_grid > *:nth-child(3) { animation-delay: .1s; }
.souq_grid > *:nth-child(4), .souq_store_grid > *:nth-child(4), .souq_offer_grid > *:nth-child(4) { animation-delay: .14s; }
.souq_grid > *:nth-child(5), .souq_store_grid > *:nth-child(5), .souq_offer_grid > *:nth-child(5) { animation-delay: .18s; }
.souq_grid > *:nth-child(6), .souq_store_grid > *:nth-child(6), .souq_offer_grid > *:nth-child(6) { animation-delay: .22s; }
.souq_grid > *:nth-child(n+7), .souq_store_grid > *:nth-child(n+7), .souq_offer_grid > *:nth-child(n+7) { animation-delay: .25s; }
.souq_product_store_badge {
	position: absolute;
	bottom: -14px;
	inset-inline-start: 10px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--souq-surface);
	border: 2px solid var(--souq-surface);
	box-shadow: var(--souq-shadow-sm);
}
.souq_product_store_badge img { width: 100%; height: 100%; object-fit: cover; }
.souq_product_soon_badge {
	position: absolute;
	top: 8px;
	inset-inline-end: 8px;
	font-size: 10.5px;
	padding: 3px 10px;
	border-radius: 30px;
}
.souq_product_body { padding-top: 6px; }
.souq_product_name {
	font-weight: 700;
	font-size: 13.5px;
	padding: 8px 12px 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.souq_product_store { font-size: 11px; color: var(--souq-text-muted); padding: 0 12px; display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.souq_product_store i { font-size: 9px; }
.souq_product_price { color: var(--souq-primary-dark); font-weight: 800; font-size: 15px; padding: 6px 12px 12px; }
.souq_product_currency { font-size: 11px; font-weight: 700; color: var(--souq-text-muted); }

/* ---------- auth boxes ---------- */
.souq_auth_box, .souq_checkout_form, .souq_vendor_summary {
	background: var(--souq-surface);
	max-width: 440px;
	margin: 20px auto;
	padding: 30px 26px;
	border-radius: var(--souq-radius);
	box-shadow: var(--souq-shadow-sm);
	border: 1px solid var(--souq-border);
}
.souq_auth_box h2 { text-align: center; justify-content: center; }
.souq_auth_box p { text-align: center; font-size: 14px; margin-top: 14px; }
.souq_auth_box p a { color: var(--souq-primary-dark); font-weight: 700; }

/* ---------- interests picker (one-time prompt after signup, interests.php) ---------- */
.souq_interest_grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 8px; }
.souq_interest_item {
	position: relative;
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	padding: 16px 10px; text-align: center;
	background: var(--souq-bg); border: 1.5px solid var(--souq-border); border-radius: var(--souq-radius-sm);
	cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.souq_interest_item input { position: absolute; opacity: 0; width: 0; height: 0; }
.souq_interest_item_ico {
	width: 38px; height: 38px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--souq-surface); color: var(--souq-primary); font-size: 15px;
}
.souq_interest_item_label { font-size: 12.5px; font-weight: 700; color: var(--souq-ink); line-height: 1.4; }
.souq_interest_item_check { position: absolute; top: 8px; inset-inline-end: 8px; color: var(--souq-border); font-size: 15px; }
.souq_interest_item:hover { border-color: var(--souq-primary-light); }
.souq_interest_item:has(input:checked), .souq_interest_item.souq_interest_checked {
	border-color: var(--souq-primary); background: var(--souq-primary-light);
}
.souq_interest_item:has(input:checked) .souq_interest_item_check,
.souq_interest_item.souq_interest_checked .souq_interest_item_check { color: var(--souq-primary); }
.souq_interest_item:has(input:checked) .souq_interest_item_ico,
.souq_interest_item.souq_interest_checked .souq_interest_item_ico { background: var(--souq-primary); color: #fff; }

.souq_alert { padding: 12px 14px; border-radius: var(--souq-radius-sm); margin-bottom: 14px; font-size: 14px; font-weight: 600; }
.souq_alert_error { background: var(--souq-danger-bg); color: var(--souq-danger); }
.souq_alert_success { background: var(--souq-success-bg); color: var(--souq-success); }

/* Web Push opt-in banner */
.souq_push_banner {
	background: var(--souq-primary-light); color: var(--souq-ink);
	display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.souq_push_banner_text { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.souq_push_banner_text i { color: var(--souq-primary-dark); }
.souq_push_banner_actions { display: flex; gap: 8px; flex-shrink: 0; }
.souq_push_banner_actions .souq_btn { padding: 8px 16px; font-size: 12.5px; margin: 0; }

/* login method tabs */
.souq_auth_tabs { display: flex; gap: 6px; background: var(--souq-bg); padding: 4px; border-radius: var(--souq-radius-sm); margin: 4px 0 18px; }
.souq_auth_tab {
	flex: 1; text-align: center; padding: 9px 8px; border-radius: calc(var(--souq-radius-sm) - 2px);
	font-size: 13.5px; font-weight: 700; color: var(--souq-text-muted); text-decoration: none;
}
.souq_auth_tab_active { background: var(--souq-surface); color: var(--souq-text); box-shadow: var(--souq-shadow-sm); }

.souq_auth_divider { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: var(--souq-text-muted); font-size: 12.5px; }
.souq_auth_divider::before, .souq_auth_divider::after { content: ""; flex: 1; height: 1px; background: var(--souq-border); }

.souq_google_btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.souq_google_btn i { color: #ea4335; }

/* ---------- image uploader (control/element/uploader.php) ---------- */
.souq_uploader {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border: 2px dashed var(--souq-border);
	border-radius: var(--souq-radius);
	background: var(--souq-bg);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
	margin: 6px 0 16px;
}
.souq_uploader:hover { border-color: var(--souq-primary); background: var(--souq-primary-light); }
.souq_uploader.souq_uploader_drag { border-color: var(--souq-primary); background: var(--souq-primary-light); box-shadow: 0 0 0 4px rgba(47,111,237,.14); }
.souq_uploader input[type="file"] {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	opacity: 0; cursor: pointer;
	padding: 0; border: none;
}
.souq_uploader_square { width: 100%; max-width: 220px; aspect-ratio: 1/1; }
.souq_uploader_logo { width: 140px; height: 140px; border-radius: 50%; }
.souq_uploader_cover { width: 100%; aspect-ratio: 16/6; min-height: 140px; }
.souq_uploader_preview {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	display: none;
}
.souq_uploader_preview.souq_has_image { display: block; }
.souq_uploader_placeholder {
	position: relative;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 6px; text-align: center; padding: 18px;
	color: var(--souq-text-muted);
	pointer-events: none;
}
.souq_uploader_preview.souq_has_image ~ .souq_uploader_placeholder { display: none; }
.souq_uploader_placeholder i { font-size: 30px; color: var(--souq-primary); }
.souq_uploader_placeholder span { font-size: 13px; font-weight: 700; color: var(--souq-ink); }
.souq_uploader_placeholder small { font-size: 11.5px; color: var(--souq-text-muted); }
.souq_uploader_remove {
	position: absolute; top: 8px; left: 8px;
	width: 30px; height: 30px;
	display: none; align-items: center; justify-content: center;
	background: rgba(12,26,48,.65);
	color: #fff;
	border: none; border-radius: 50%;
	font-size: 13px; cursor: pointer;
	z-index: 2;
	transition: background .15s ease, transform .12s ease;
}
.souq_uploader_remove.souq_show { display: flex; }
.souq_uploader_remove:hover { background: var(--souq-danger); }
.souq_uploader_remove:active { transform: scale(.9); }

/* ---------- multi-image uploader (control/element/multi_uploader.php) - same dropzone
   look as .souq_uploader, but keeps a running thumbnail strip below it instead of one
   preview, for forms that accept several photos (e.g. car listings). ---------- */
.souq_multi_uploader { margin: 6px 0 16px; }
.souq_multi_uploader_drop {
	position: relative;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 6px; text-align: center; padding: 22px 16px;
	border: 2px dashed var(--souq-border);
	border-radius: var(--souq-radius);
	background: var(--souq-bg);
	cursor: pointer;
	color: var(--souq-text-muted);
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.souq_multi_uploader_drop:hover,
.souq_multi_uploader.souq_uploader_drag .souq_multi_uploader_drop {
	border-color: var(--souq-primary); background: var(--souq-primary-light);
}
.souq_multi_uploader.souq_uploader_drag .souq_multi_uploader_drop { box-shadow: 0 0 0 4px rgba(47,111,237,.14); }
.souq_multi_uploader_drop i { font-size: 26px; color: var(--souq-primary); }
.souq_multi_uploader_drop span { font-size: 13px; font-weight: 700; color: var(--souq-ink); }
.souq_multi_uploader_drop small { font-size: 11.5px; color: var(--souq-text-muted); }
.souq_multi_uploader_drop input[type="file"] {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	opacity: 0; cursor: pointer;
	padding: 0; border: none;
}
.souq_multi_uploader_strip {
	display: flex; flex-wrap: wrap; gap: 8px;
	margin-top: 10px;
}
.souq_multi_uploader:not(.souq_has_files) .souq_multi_uploader_strip { display: none; }
.souq_multi_uploader_thumb {
	position: relative;
	width: 74px; height: 74px;
	border-radius: var(--souq-radius-sm);
	overflow: hidden;
	background: var(--souq-bg);
	border: 1px solid var(--souq-border);
}
.souq_multi_uploader_thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.souq_multi_uploader_thumb_remove {
	position: absolute; top: 3px; left: 3px;
	width: 20px; height: 20px;
	display: flex; align-items: center; justify-content: center;
	background: rgba(12,26,48,.7);
	color: #fff;
	border: none; border-radius: 50%;
	font-size: 10px; cursor: pointer;
	transition: background .15s ease, transform .12s ease;
}
.souq_multi_uploader_thumb_remove:hover { background: var(--souq-danger); }
.souq_multi_uploader_thumb_remove:active { transform: scale(.9); }

/* field hint + confirm checkbox */
.souq_field_hint {
	display: flex; gap: 7px; align-items: flex-start;
	font-size: 12.5px; line-height: 1.55; color: var(--souq-text-muted);
	margin: 6px 0 12px; text-align: start;
}
.souq_field_hint i { margin-top: 2px; color: var(--souq-primary-dark); flex-shrink: 0; }
.souq_checkbox_row { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; font-weight: 500; margin: 4px 0 16px; cursor: pointer; }
.souq_checkbox_row input { width: 19px; height: 19px; margin-top: 1px; flex-shrink: 0; }

/* delivery coverage picker (vendor settings, driver towns) */

/* saved addresses (account.php) + live location confirmation summary */

/* precise-GPS locate card: a friendlier, self-explanatory alternative to a bare button
   for non-technical users - icon + title + plain-language helper text + inline status */
@keyframes souqSpin { to { transform: rotate(360deg); } }

/* registration method chooser */
.souq_method_list { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 14px; }
.souq_method_btn {
	display: flex; align-items: center; gap: 12px;
	padding: 14px 14px; border: 1px solid var(--souq-border); border-radius: var(--souq-radius-sm);
	background: var(--souq-surface); text-decoration: none; color: var(--souq-text);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.souq_method_btn:hover { border-color: var(--souq-primary); box-shadow: var(--souq-shadow-sm); }
.souq_method_btn > i:first-child { font-size: 20px; flex-shrink: 0; width: 24px; text-align: center; }
.souq_method_btn span { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.souq_method_btn span strong { font-size: 14px; }
.souq_method_btn span small { font-size: 12px; color: var(--souq-text-muted); }
.souq_method_arrow { font-size: 12px; color: var(--souq-text-muted); }
.souq_method_btn_disabled { opacity: .55; cursor: not-allowed; }
.souq_method_btn_disabled:hover { border-color: var(--souq-border); box-shadow: none; }

.souq_flash { margin: 14px 0 4px; word-break: break-word; }

/* ---------- profile page (account.php) ---------- */
.souq_profile_hero {
	background: linear-gradient(135deg, var(--souq-primary) 0%, var(--souq-primary-dark) 100%);
	border-radius: var(--souq-radius);
	padding: 22px 22px 0;
	color: #fff;
	margin: 18px 0 20px;
	box-shadow: var(--souq-shadow-sm);
	overflow: hidden;
	position: relative;
	animation: souqProfileFadeIn .35s ease both;
}
.souq_profile_hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 100% 0%, rgba(255,255,255,.16), transparent 55%);
	pointer-events: none;
}
@keyframes souqProfileFadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.souq_profile_hero_top { display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; }
.souq_profile_avatar {
	width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,.18); color: #fff;
	font-size: 26px; font-weight: 800; position: relative;
	animation: souqProfilePop .4s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes souqProfilePop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.souq_profile_avatar_ring {
	position: absolute; inset: -4px; border-radius: 50%;
	border: 2px solid rgba(255,255,255,.45);
	animation: souqProfileRingPulse 2.6s ease-in-out infinite;
}
@keyframes souqProfileRingPulse {
	0%, 100% { transform: scale(1); opacity: .6; }
	50% { transform: scale(1.12); opacity: 0; }
}
.souq_profile_hero_info { flex: 1; min-width: 0; }
.souq_profile_hero_name { font-size: 18px; font-weight: 800; }
.souq_profile_hero_meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.souq_profile_role_chip, .souq_profile_since {
	display: inline-flex; align-items: center; gap: 5px;
	font-size: 11.5px; font-weight: 700;
	background: rgba(255,255,255,.16); padding: 3px 10px; border-radius: 20px;
}
.souq_profile_verify_form { display: inline-flex; margin: 0; }
.souq_profile_verify_btn {
	border: none; cursor: pointer; font-family: inherit; color: #fff;
	background: rgba(255,255,255,.22);
}
.souq_profile_verify_btn:hover { background: rgba(255,255,255,.32); }
.souq_profile_stats {
	display: grid; grid-template-columns: repeat(3, 1fr);
	margin-top: 18px; position: relative; z-index: 1;
}
.souq_profile_stat {
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	padding: 14px 6px; text-align: center; color: #fff; text-decoration: none;
	border-top: 1px solid rgba(255,255,255,.18);
	transition: background .15s ease;
}
.souq_profile_stat:hover { background: rgba(255,255,255,.08); }
.souq_profile_stat_num { font-size: 19px; font-weight: 800; line-height: 1; }
.souq_profile_stat_label { font-size: 11px; opacity: .9; display: flex; align-items: center; gap: 4px; }

.souq_profile_tabs_wrap {
	position: relative;
	margin: 4px 0 18px;
}
.souq_profile_tabs {
	display: flex; gap: 8px; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none;
	padding: 4px 2px 8px;
	border-bottom: 1px solid var(--souq-border);
}
.souq_profile_tabs::-webkit-scrollbar { display: none; }
.souq_profile_tabs_wrap::before, .souq_profile_tabs_wrap::after {
	content: ""; position: absolute; top: 0; bottom: 8px; width: 24px; z-index: 2; pointer-events: none;
}
.souq_profile_tabs_wrap::before { inset-inline-start: 0; background: linear-gradient(to left, transparent, var(--souq-bg)); }
.souq_profile_tabs_wrap::after { inset-inline-end: 0; background: linear-gradient(to right, transparent, var(--souq-bg)); }
html[dir="rtl"] .souq_profile_tabs_wrap::before { background: linear-gradient(to right, transparent, var(--souq-bg)); }
html[dir="rtl"] .souq_profile_tabs_wrap::after { background: linear-gradient(to left, transparent, var(--souq-bg)); }
.souq_profile_tab {
	display: flex; align-items: center; gap: 7px; white-space: nowrap; flex-shrink: 0;
	padding: 10px 18px; border-radius: 20px 20px 0 0; font-size: 13.5px; font-weight: 700;
	background: transparent; color: var(--souq-text-muted); position: relative;
	transition: background .15s ease, color .15s ease, transform .1s ease;
}
.souq_profile_tab i { font-size: 12px; }
.souq_profile_tab:hover { color: var(--souq-text); background: var(--souq-bg); }
.souq_profile_tab:active { transform: scale(.96); }
.souq_profile_tab_active {
	background: var(--souq-primary-light); color: var(--souq-primary-dark); font-weight: 800;
}
.souq_profile_tab_active::after {
	content: ""; position: absolute; bottom: -1px; inset-inline: 10px; height: 3px;
	background: var(--souq-primary); border-radius: 3px 3px 0 0;
}

.souq_profile_card {
	background: var(--souq-surface);
	border-radius: var(--souq-radius);
	padding: 22px;
	margin: 0 0 16px;
	border: 1px solid var(--souq-border);
	box-shadow: var(--souq-shadow-sm);
	animation: souqProfileCardIn .3s ease both;
}
@keyframes souqProfileCardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.souq_profile_card h2 {
	display: flex; align-items: center; gap: 9px;
	justify-content: flex-start; text-align: start;
	font-size: 15.5px;
}
.souq_profile_card h2 i { color: var(--souq-primary-dark); font-size: 15px; }
.souq_profile_card_desc { text-align: start; font-size: 13px; color: var(--souq-text-muted); margin-top: 0; }

.souq_account_listing_item { transition: border-color .15s ease, box-shadow .15s ease; }
.souq_account_listing_item:hover { border-color: var(--souq-primary); box-shadow: var(--souq-shadow-sm); }

/* ---------- store grid ---------- */
.souq_store_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.souq_store_card {
	background: var(--souq-surface);
	border-radius: var(--souq-radius);
	overflow: hidden;
	text-align: center;
	box-shadow: var(--souq-shadow-sm);
	border: 1px solid var(--souq-border);
	transition: transform .15s ease, box-shadow .15s ease;
	opacity: 0;
	animation: souqCardIn .4s ease both;
}
.souq_store_card:hover { transform: translateY(-3px); box-shadow: var(--souq-shadow); }
.souq_store_card:active { transform: translateY(-1px) scale(.98); }
.souq_store_card img, .souq_store_card .souq_no_image { width: 100%; height: 96px; object-fit: cover; transition: transform .35s ease; }
.souq_store_card:hover img { transform: scale(1.06); }
.souq_store_name { font-weight: 700; padding: 10px 8px 2px; font-size: 14px; }
.souq_store_count { font-size: 12px; color: var(--souq-text-muted); padding-bottom: 12px; }
.souq_store_header { margin-bottom: 20px; }
.souq_store_cover { width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--souq-radius); margin-bottom: 14px; }

/* ---------- product view ---------- */
.souq_product_view {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	background: var(--souq-surface);
	padding: 20px;
	border-radius: var(--souq-radius);
	border: 1px solid var(--souq-border);
}
.souq_product_gallery_main {
	border-radius: var(--souq-radius-sm);
	overflow: hidden;
	background: var(--souq-bg);
}
.souq_product_gallery_main img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.souq_product_gallery_noimg { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; font-size: 40px; color: var(--souq-text-muted); }
.souq_product_gallery_thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 2px; }
.souq_product_gallery_thumb {
	flex-shrink: 0; width: 64px; height: 64px; padding: 0; border-radius: var(--souq-radius-sm);
	overflow: hidden; border: 2px solid transparent; background: var(--souq-bg); cursor: pointer;
	transition: border-color .15s ease;
}
.souq_product_gallery_thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.souq_product_gallery_thumb_active { border-color: var(--souq-primary); }

.souq_product_info .souq_product_price { font-size: 26px; padding: 0; margin: 4px 0; }
.souq_product_store_link a { color: var(--souq-primary-dark); font-weight: 700; }
.souq_product_desc { color: var(--souq-text-muted); margin: 0; line-height: 1.8; }

.souq_product_seller_row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.souq_product_seller_link { display: flex; align-items: center; gap: 10px; color: var(--souq-text); }
.souq_product_seller_logo { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.souq_product_seller_logo_placeholder { display: flex; align-items: center; justify-content: center; background: var(--souq-bg); color: var(--souq-text-muted); font-size: 15px; }
.souq_product_seller_name { display: block; font-weight: 800; font-size: 14px; }
.souq_product_seller_rating { display: block; font-size: 11.5px; color: var(--souq-text-muted); }
.souq_product_seller_rating i { color: #f5a623; }

.souq_product_divider { height: 1px; background: var(--souq-border); margin: 16px 0; }
.souq_product_block_title { font-size: 13.5px; font-weight: 800; margin: 0 0 8px; color: var(--souq-text-muted); text-transform: uppercase; letter-spacing: .3px; }

/* ---------- filters ---------- */
.souq_filters { margin-bottom: 18px; }
.souq_filters form { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.souq_filters select, .souq_filters input { width: auto; flex: 1; min-width: 140px; }
.souq_filters button { flex-shrink: 0; background: var(--souq-primary); color: #fff; border: none; border-radius: var(--souq-radius-sm); font-weight: 700; padding: 0 18px; }
.souq_filters_advanced .souq_filter_price { min-width: 100px; max-width: 130px; }

/* ---------- wishlist heart + share buttons ---------- */
.souq_wishlist_btn {
	position: absolute; top: 8px; inset-inline-start: 8px; z-index: 5;
	width: 32px; height: 32px; border-radius: 50%; border: none;
	background: rgba(255,255,255,.9); color: var(--souq-text-muted);
	display: flex; align-items: center; justify-content: center;
	font-size: 14px; cursor: pointer; transition: transform .12s ease, color .15s ease;
	box-shadow: var(--souq-shadow-sm);
}
:root:not([data-theme="light"]) .souq_wishlist_btn { background: rgba(20,20,20,.75); }
.souq_wishlist_btn:hover { transform: scale(1.08); }
.souq_wishlist_btn.souq_wishlist_active { color: var(--souq-danger); }
.souq_wishlist_btn.souq_wishlist_loading { opacity: .6; pointer-events: none; }
.souq_wishlist_pop { animation: souqWishlistPop .3s ease; }
@keyframes souqWishlistPop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
.souq_product_card { position: relative; }

.souq_product_title_row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.souq_product_title_row h1 { margin: 0; flex: 1; }
.souq_product_actions { display: flex; gap: 8px; flex-shrink: 0; }
.souq_wishlist_btn_lg, .souq_share_btn {
	position: static; width: 40px; height: 40px; border-radius: 50%;
	background: var(--souq-bg); color: var(--souq-text-muted); border: 1px solid var(--souq-border);
	display: flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.souq_wishlist_btn_lg:hover, .souq_share_btn:hover { background: var(--souq-primary-light); color: var(--souq-primary-dark); }
.souq_wishlist_btn_lg.souq_wishlist_active { color: var(--souq-danger); }
.souq_share_btn { position: relative; }
.souq_share_copied {
	position: absolute; bottom: calc(100% + 6px); inset-inline-end: 0;
	background: var(--souq-ink); color: #fff; font-size: 11.5px; font-weight: 700;
	padding: 4px 10px; border-radius: 6px; white-space: nowrap;
	animation: souqFadeIn .15s ease;
}
.souq_product_meta_row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.souq_product_views { display: inline-flex; align-items: center; gap: 5px; }
.souq_store_header_top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.souq_store_header_top h1 { margin: 0; }

/* ---------- vendor sales report extras ---------- */
.souq_bar_chart_dense .souq_bar { min-width: 4px; }
.souq_top_product_row {
	display: flex; align-items: center; gap: 10px; padding: 9px 0;
	border-bottom: 1px solid var(--souq-border); font-size: 13px;
}
.souq_top_product_row:last-child { border-bottom: none; }
.souq_top_product_rank {
	width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
	background: var(--souq-primary-light); color: var(--souq-primary-dark);
	display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800;
}
.souq_top_product_name { flex: 1; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- product variants (vendor management) ---------- */
.souq_variant_add_form { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--souq-border); padding-top: 14px; margin-top: 4px; }

/* ---------- product comparison ---------- */
.souq_compare_strip {
	display: flex; align-items: center; justify-content: center; gap: 6px;
	border-top: 1px solid var(--souq-border); background: var(--souq-bg);
	padding: 7px 8px; font-size: 11.5px; font-weight: 700; color: var(--souq-text-muted);
	cursor: pointer; transition: background .15s ease, color .15s ease;
}
.souq_compare_strip:hover { background: var(--souq-primary-light); color: var(--souq-primary-dark); }
.souq_compare_strip:has(input:checked), .souq_compare_strip.souq_compare_checked { background: var(--souq-primary-light); color: var(--souq-primary-dark); }
.souq_compare_strip input { width: 13px; height: 13px; margin: 0; cursor: pointer; flex-shrink: 0; }
.souq_compare_bar {
	position: fixed; bottom: 0; inset-inline: 0; z-index: 400;
	background: var(--souq-surface); border-top: 1px solid var(--souq-border);
	box-shadow: var(--souq-shadow-lg); padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
	display: none; align-items: center; gap: 10px; flex-wrap: wrap;
}
.souq_compare_bar.souq_open { display: flex; }
.souq_compare_bar_items { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; flex-wrap: wrap; }
.souq_compare_bar_item { display: flex; align-items: center; gap: 6px; background: var(--souq-bg); border-radius: 20px; padding: 3px 10px 3px 4px; font-size: 12px; font-weight: 700; max-width: 160px; }
.souq_compare_bar_item img, .souq_compare_bar_item_noimg {
	width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
	background: var(--souq-border); display: flex; align-items: center; justify-content: center; color: var(--souq-text-muted); font-size: 10px;
}
.souq_compare_bar_item_name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.souq_compare_bar_item_remove { border: none; background: none; color: var(--souq-text-muted); cursor: pointer; font-size: 11px; padding: 2px; flex-shrink: 0; }
.souq_compare_bar_item_remove:hover { color: var(--souq-danger); }
.souq_compare_table_wrap { overflow-x: auto; }
.souq_compare_table { width: 100%; border-collapse: collapse; min-width: 480px; }
.souq_compare_table th, .souq_compare_table td { padding: 10px 12px; border-bottom: 1px solid var(--souq-border); text-align: center; vertical-align: top; }
.souq_compare_table th:first-child, .souq_compare_table td:first-child { text-align: start; font-weight: 700; color: var(--souq-text-muted); white-space: nowrap; }
.souq_compare_product_img { width: 70px; height: 70px; object-fit: cover; border-radius: var(--souq-radius-sm); margin: 0 auto 6px; display: block; }

/* ---------- support tickets ---------- */
.souq_ticket_thread { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; max-height: 420px; overflow-y: auto; }
.souq_ticket_msg { max-width: 80%; padding: 10px 14px; border-radius: var(--souq-radius-sm); font-size: 13.5px; line-height: 1.6; }
.souq_ticket_msg_customer { background: var(--souq-bg); align-self: flex-start; }
.souq_ticket_msg_admin { background: var(--souq-primary-light); align-self: flex-end; }
.souq_ticket_msg_meta { font-size: 11px; color: var(--souq-text-muted); margin-top: 4px; }

/* ---------- bestsellers page ---------- */
.souq_bestseller_rank {
	position: absolute; top: 8px; inset-inline-end: 8px; z-index: 6;
	background: var(--souq-ink); color: #fff;
	font-size: 11px; font-weight: 800; border-radius: 20px; padding: 3px 9px;
}

.souq_pagination { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
.souq_pagination a { background: var(--souq-surface); border: 1.5px solid var(--souq-border); padding: 8px 18px; border-radius: 30px; font-weight: 700; font-size: 13.5px; }
.souq_pagination a:hover { border-color: var(--souq-primary); }

/* ---------- rows: cart / orders / admin tables ---------- */
.souq_cart_row, .souq_order_row, .souq_admin_row, .souq_order_item_row, .souq_vendor_product_row {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--souq-surface);
	padding: 14px 16px;
	border-radius: var(--souq-radius-sm);
	margin-bottom: 10px;
	flex-wrap: wrap;
	border: 1px solid var(--souq-border);
}
.souq_cart_row form, .souq_admin_row form, .souq_vendor_product_row form { flex-direction: row; margin: 0; gap: 6px; }
.souq_cart_qty input, .souq_admin_row select { width: 72px; }
.souq_cart_name, .souq_vendor_product_row span:first-child { font-weight: 700; flex: 1; min-width: 120px; }

/* ---------- customer orders list (cards) ---------- */

.souq_orders_cards { display: flex; flex-direction: column; gap: 12px; }
.souq_order_card {
	display: flex; align-items: center; gap: 14px;
	background: var(--souq-surface); border: 1px solid var(--souq-border); border-radius: var(--souq-radius);
	padding: 14px 16px; color: inherit;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.souq_order_card:hover { border-color: var(--souq-primary); box-shadow: var(--souq-shadow-sm); }
.souq_order_card_body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.souq_order_card_title { font-weight: 800; font-size: 14px; }

/* ---------- order detail page: header, timeline, driver, address, items ---------- */
.souq_status_lg { font-size: 13px; padding: 6px 16px; }
.souq_status_sm { font-size: 10.5px; padding: 2px 9px; }

/* ---------- vendor orders (grouped) ---------- */

/* per-item status control - card layout instead of a cramped table+select so it's
   usable and clear on a phone for vendors with no technical background */

/* ---------- cart page (new) ---------- */
.souq_qty_input {
	width: 34px;
	border: none;
	text-align: center;
	padding: 0;
	font-weight: 700;
	font-size: 13px;
	-moz-appearance: textfield;
}
.souq_qty_input::-webkit-outer-spin-button, .souq_qty_input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- status badges ---------- */
.souq_status { display: inline-flex; padding: 4px 12px; border-radius: 30px; font-size: 12px; font-weight: 700; background: var(--souq-bg); color: var(--souq-text-muted); }
.souq_status_delivered { background: var(--souq-success-bg); color: var(--souq-success); }
.souq_status_cancelled { background: var(--souq-danger-bg); color: var(--souq-danger); }
.souq_status_pending { background: var(--souq-warn-bg); color: var(--souq-warn); }
.souq_status_out_for_delivery, .souq_status_preparing, .souq_status_confirmed, .souq_status_ready, .souq_status_handed_to_driver { background: var(--souq-info-bg); color: var(--souq-info); }

/* ---------- admin dashboard ---------- */
.souq_admin_stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; margin-bottom: 24px; }
.souq_stat_box { background: var(--souq-surface); padding: 20px; border-radius: var(--souq-radius); text-align: center; box-shadow: var(--souq-shadow-sm); border: 1px solid var(--souq-border); font-size: 13px; color: var(--souq-text-muted); font-weight: 700; }
.souq_stat_box strong { display: block; font-size: 26px; color: var(--souq-ink); margin-top: 6px; }
.souq_admin_menu { display: flex; flex-wrap: wrap; gap: 10px; }
.souq_admin_menu a { background: var(--souq-ink); color: #fff; padding: 10px 18px; border-radius: 30px; font-weight: 700; font-size: 13.5px; }
.souq_admin_menu a:hover { background: var(--souq-ink-2); }
.souq_admin_row span { flex-shrink: 0; }

.souq_dash_grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-bottom: 26px;
}
.souq_chart_card {
	background: var(--souq-surface);
	border: 1px solid var(--souq-border);
	border-radius: var(--souq-radius);
	padding: 18px;
	box-shadow: var(--souq-shadow-sm);
}
.souq_chart_card h3 { margin: 0 0 14px; font-size: 14.5px; }
.souq_bar_chart { display: flex; align-items: flex-end; gap: 6px; height: 140px; }
.souq_bar_chart .souq_bar { flex: 1; background: linear-gradient(180deg, var(--souq-primary), var(--souq-primary-dark)); border-radius: 6px 6px 0 0; position: relative; min-height: 4px; }
.souq_bar_chart .souq_bar span { position: absolute; bottom: -20px; inset-inline: 0; text-align: center; font-size: 10px; color: var(--souq-text-muted); }
.souq_bar_chart_stacked .souq_bar_stack { flex: 1; display: flex; flex-direction: column-reverse; align-items: stretch; min-height: 4px; position: relative; background: none; border-radius: 0; }
.souq_bar_seg { display: block; width: 100%; min-height: 0; }
.souq_bar_seg_new { background: linear-gradient(180deg, var(--souq-primary), var(--souq-primary-dark)); border-radius: 6px 6px 0 0; }
.souq_bar_seg_returning { background: linear-gradient(180deg, var(--souq-accent), #0a7c8a); }
.souq_bar_stack:last-child .souq_bar_seg:first-child,
.souq_bar_stack .souq_bar_seg_returning:first-child { border-radius: 6px 6px 0 0; }
.souq_bar_stack span { position: absolute; bottom: -20px; inset-inline: 0; text-align: center; font-size: 10px; color: var(--souq-text-muted); }
.souq_chart_legend { display: flex; gap: 16px; margin-top: 26px; font-size: 12.5px; color: var(--souq-text-muted); justify-content: center; }
.souq_chart_legend_item { display: flex; align-items: center; gap: 6px; }
.souq_chart_legend_dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.souq_chart_legend_dot_new { background: var(--souq-primary); }
.souq_chart_legend_dot_returning { background: var(--souq-accent); }
.souq_donut_wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.souq_donut_legend { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.souq_donut_legend span.souq_dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-inline-end: 6px; }

/* ---------- vendor dashboard extras ---------- */
.souq_kpi_grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 24px; }
.souq_kpi_card { background: var(--souq-surface); border: 1px solid var(--souq-border); border-radius: var(--souq-radius); padding: 16px; box-shadow: var(--souq-shadow-sm); }
.souq_kpi_card .souq_kpi_label { font-size: 12px; color: var(--souq-text-muted); font-weight: 700; }
.souq_kpi_card .souq_kpi_value { font-size: 22px; font-weight: 800; color: var(--souq-ink); margin-top: 4px; }
.souq_kpi_card.souq_kpi_accent { border-color: var(--souq-primary); background: var(--souq-primary-light); }
.souq_rating_stars { color: #f5a623; font-size: 13px; letter-spacing: 1px; }

/* store rating display */
.souq_store_rating_mini { font-size: 12px; color: var(--souq-text-muted); padding: 0 8px 10px; display: flex; align-items: center; gap: 4px; }
.souq_store_rating_mini i { color: #f5a623; font-size: 11px; }
.souq_store_rating_summary { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 10px; }
.souq_store_rating_summary .souq_rating_stars { font-size: 16px; }

/* star rating input (radio group, reversed order so first-in-DOM = 5 stars hovered right) */
.souq_star_input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; margin: 6px 0 14px; }
.souq_star_input input { position: absolute; opacity: 0; pointer-events: none; }
.souq_star_input label { font-size: 26px; color: var(--souq-border); cursor: pointer; transition: color .1s ease; }
.souq_star_input label:hover, .souq_star_input label:hover ~ label,
.souq_star_input input:checked ~ label { color: #f5a623; }

.souq_review_form textarea { min-height: 80px; }
.souq_review_card { margin: 4px 0 18px; }
.souq_review_card_head {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--souq-border);
}
.souq_review_card_title { font-size: 15px; font-weight: 800; margin: 0; color: var(--souq-ink); }
.souq_review_card_summary { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.souq_review_summary_num { font-size: 24px; font-weight: 800; color: var(--souq-ink); line-height: 1; }
.souq_review_summary_meta { display: flex; flex-direction: column; gap: 2px; }
.souq_review_summary_meta .souq_rating_stars { font-size: 13px; }
/* legacy, kept for any page not yet migrated to .souq_review_card */
.souq_review_summary_bar {
	display: flex; align-items: center; gap: 14px; margin: 4px 0 18px;
	padding: 14px 18px; background: var(--souq-surface); border: 1px solid var(--souq-border); border-radius: var(--souq-radius);
}

/* the reviewer's own review - shown instead of an editable form (editing is disabled;
   the reviewer can only request deletion, which an admin approves/rejects) */
.souq_my_review_box { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.souq_my_review_box .souq_rating_stars { font-size: 18px; }
.souq_my_review_text { margin: 0; font-size: 13.5px; color: var(--souq-text); line-height: 1.7; }
.souq_my_review_delete_btn { color: var(--souq-danger); }
.souq_my_review_delete_btn:hover { background: var(--souq-danger-bg); }
.souq_review_list { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 30px; }
.souq_review_item {
	background: var(--souq-surface); border: 1px solid var(--souq-border); border-radius: var(--souq-radius-sm);
	padding: 16px 18px;
	transition: box-shadow .15s ease, border-color .15s ease;
}
.souq_review_item:hover { box-shadow: var(--souq-shadow-sm); border-color: var(--souq-primary-light); }
.souq_review_item_head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.souq_review_item_head .souq_avatar { width: 38px; height: 38px; font-size: 15px; box-shadow: 0 0 0 3px var(--souq-bg); flex-shrink: 0; }
.souq_review_item_name_row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 1; min-width: 0; }
.souq_review_item_name { font-weight: 800; font-size: 13.5px; color: var(--souq-ink); }
.souq_review_item_time { font-size: 11px; color: var(--souq-text-muted); flex-shrink: 0; white-space: nowrap; }
.souq_review_item_text { font-size: 13.5px; color: var(--souq-text); margin: 0; line-height: 1.7; }
.souq_avatar_anon { background: linear-gradient(135deg, #64748b, #475569); }

/* store rating shown on product card / product page */
.souq_product_store_rating_mini { font-size: 11.5px; color: var(--souq-text-muted); display: flex; align-items: center; gap: 4px; padding: 0 12px 2px; }
.souq_product_store_rating_mini i { color: #f5a623; font-size: 10px; }
.souq_product_store_rating {
	display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin: 2px 0 10px; color: var(--souq-text);
}
.souq_product_store_rating .souq_rating_stars { font-size: 15px; }

/* ---------- footer ---------- */
.souq_footer { background: var(--souq-ink); color: rgba(255,255,255,.7); margin-top: 40px; }
.souq_footer_inner { max-width: var(--souq-max); margin: 0 auto; padding: 32px 16px; text-align: center; }
.souq_footer_brand { display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; font-weight: 800; margin-bottom: 14px; }
.souq_footer_links { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-bottom: 14px; }
.souq_footer_links a {
	position: relative;
	display: inline-block;
	padding-bottom: 3px;
	transition: color .15s ease, transform .1s ease;
}
.souq_footer_links a::after {
	content: "";
	position: absolute;
	bottom: 0;
	inset-inline-start: 50%;
	width: 0;
	height: 1.5px;
	background: var(--souq-accent);
	transform: translateX(-50%);
	transition: width .2s ease, inset-inline-start .2s ease;
}
.souq_footer_links a:hover { color: #fff; }
.souq_footer_links a:hover::after { width: 100%; inset-inline-start: 0; transform: none; }
.souq_footer_links a:active { color: var(--souq-accent); transform: scale(.95); }
.souq_footer_copy { font-size: 12.5px; margin: 0; }

/* ===== responsive ===== */
@media (min-width: 640px) {
	.souq_product_view { grid-template-columns: 1fr 1fr; }
	.souq_grid, .souq_store_grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
	.souq_categories { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 900px) {
	.souq_grid, .souq_store_grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
	.souq_categories { grid-template-columns: repeat(8, 1fr); }
	.souq_dash_grid { grid-template-columns: 1.3fr 1fr; }
}

/* single layout for every screen size: same header + bottom nav as mobile */
.souq_header_inner { padding: 0 12px; gap: 10px; position: relative; }
.souq_hide_mobile { display: none; }

.souq_add_service_bar {
	border-top: 1px solid var(--souq-border);
	background: var(--souq-bg);
	padding: 8px 12px;
}
.souq_add_service_btn {
	max-width: var(--souq-max);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 10px 14px;
	border-radius: var(--souq-radius-sm);
	border: 1px dashed var(--souq-primary);
	background: var(--souq-primary-light);
	color: var(--souq-primary-dark);
	font-size: 13.5px;
	font-weight: 800;
	transition: background .15s ease;
}
.souq_add_service_btn i { font-size: 15px; }
.souq_add_service_btn:hover { background: var(--souq-primary); color: #fff; }

.souq_search {
	display: none;
	flex-direction: row;
	align-items: stretch;
	gap: 0;
	position: absolute;
	top: 100%;
	inset-inline: 0;
	max-width: none;
	margin: 0;
	padding: 10px 12px;
	background: var(--souq-surface);
	border-bottom: 1px solid var(--souq-border);
	box-shadow: var(--souq-shadow);
	z-index: 90;
}
.souq_search.souq_open { display: flex; }
.souq_search_suggest {
	display: none;
	position: absolute;
	top: 100%;
	inset-inline: 12px;
	background: var(--souq-surface);
	border: 1px solid var(--souq-border);
	border-radius: 0 0 var(--souq-radius-sm) var(--souq-radius-sm);
	box-shadow: var(--souq-shadow-lg);
	max-height: 360px;
	overflow-y: auto;
	z-index: 95;
	padding: 6px;
}
.souq_search_suggest.souq_open { display: block; }
.souq_suggest_group_title { font-size: 11px; font-weight: 800; color: var(--souq-text-muted); padding: 6px 10px 4px; text-transform: uppercase; }
.souq_suggest_item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--souq-text); font-size: 13.5px; font-weight: 600; }
.souq_suggest_item:hover { background: var(--souq-bg); }
.souq_suggest_icon {
	width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	background: var(--souq-primary-light); color: var(--souq-primary-dark); font-size: 13px;
}
.souq_suggest_thumb { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.souq_search_toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: transparent;
	border: none;
	color: var(--souq-ink);
	cursor: pointer;
	flex-shrink: 0;
}
.souq_search_toggle:hover { background: var(--souq-bg); }

.souq_bottomnav { display: block; }
.souq_container { padding-bottom: calc(var(--souq-bottomnav-h) + 26px); }
.souq_footer { display: none; }

@media (max-width: 480px) {
	.souq_cart_row, .souq_order_row, .souq_admin_row, .souq_vendor_product_row {
		flex-direction: column;
		align-items: stretch;
	}
	.souq_categories { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- workers & contractors directory ---------- */
.souq_worker_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.souq_worker_card {
	background: var(--souq-surface);
	border-radius: var(--souq-radius);
	border: 1px solid var(--souq-border);
	box-shadow: var(--souq-shadow-sm);
	padding: 18px 14px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
.souq_worker_card_link {
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	color: inherit; text-decoration: none; width: 100%;
}
.souq_worker_photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin-bottom: 6px; }
.souq_worker_photo_placeholder {
	display: flex; align-items: center; justify-content: center;
	background: var(--souq-bg); color: var(--souq-text-muted); font-size: 26px;
}
.souq_worker_name { font-weight: 700; font-size: 15px; }
.souq_worker_profession { font-size: 12.5px; color: var(--souq-text-muted); }
.souq_worker_bio { font-size: 12.5px; color: var(--souq-text-muted); margin: 4px 0; }
.souq_worker_phone_btn { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; }

/* ---------- static content pages ---------- */
.souq_static_page { line-height: 1.9; font-size: 14.5px; white-space: normal; }
.souq_footer_links_policy { font-size: 12.5px; opacity: .85; margin-top: 4px; }

/* ---------- generic two-column form row ---------- */
.souq_form_row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) {
	.souq_form_row { grid-template-columns: 1fr; }
}

/* ---------- taxi (أذنا taxi drivers + prices) ---------- */
.souq_taxi_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.souq_taxi_card {
	background: var(--souq-surface);
	border-radius: var(--souq-radius);
	border: 1px solid var(--souq-border);
	box-shadow: var(--souq-shadow-sm);
	padding: 16px;
}
.souq_taxi_card_head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: inherit; text-decoration: none; }
.souq_taxi_photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.souq_taxi_photo_placeholder {
	display: flex; align-items: center; justify-content: center;
	background: var(--souq-bg); color: var(--souq-text-muted); font-size: 20px;
}
.souq_taxi_name { font-weight: 700; font-size: 15px; }
.souq_taxi_vehicle { font-size: 12px; color: var(--souq-text-muted); }
.souq_taxi_phone_btn { display: inline-flex; align-items: center; gap: 6px; width: 100%; justify-content: center; margin-bottom: 4px; }
.souq_taxi_prices { margin-top: 12px; border-top: 1px solid var(--souq-border); padding-top: 10px; }
.souq_taxi_price_row {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	padding: 6px 0; font-size: 12.5px;
}
.souq_taxi_price_row + .souq_taxi_price_row { border-top: 1px dashed var(--souq-border); }
.souq_taxi_price_path { display: flex; align-items: center; gap: 6px; color: var(--souq-text); }
.souq_taxi_price_path i { color: var(--souq-text-muted); font-size: 11px; }
.souq_taxi_price_val { font-weight: 700; color: var(--souq-primary); white-space: nowrap; }
.souq_taxi_no_prices { margin-top: 10px; }

.souq_taxi_route_list { max-width: 480px; }
.souq_taxi_route_item {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	background: var(--souq-surface); border: 1px solid var(--souq-border); border-radius: var(--souq-radius-sm);
	padding: 10px 14px; margin-bottom: 8px;
}
.souq_taxi_route_path { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.souq_taxi_route_path i { color: var(--souq-text-muted); font-size: 11px; }
.souq_taxi_route_actions { display: flex; align-items: center; gap: 10px; }
.souq_taxi_route_price { color: var(--souq-primary); font-size: 13.5px; }
.souq_taxi_route_delete { background: none; border: none; color: var(--souq-danger); cursor: pointer; font-size: 14px; padding: 4px; }

/* ---------- generic card (used site-wide, not just admin panels) ---------- */
.souq_card {
	background: var(--souq-surface);
	border: 1px solid var(--souq-border);
	border-radius: var(--souq-radius);
	box-shadow: var(--souq-shadow-sm);
}
.souq_card_pad { padding: 20px; }

/* ---------- worker/taxi public profile page ---------- */
.souq_profile_page { max-width: 640px; animation: souqProfileIn .35s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes souqProfileIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.souq_profile_back {
	display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
	color: var(--souq-text-muted); margin-bottom: 14px; transition: gap .15s ease;
}
.souq_profile_back:hover { color: var(--souq-primary-dark); gap: 9px; }
.souq_profile_hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, var(--souq-primary), var(--souq-primary-dark));
	border-radius: var(--souq-radius);
	padding: 30px 24px 24px;
	color: #fff;
	margin-bottom: 18px;
	box-shadow: var(--souq-shadow-lg);
}
.souq_profile_hero::before {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(circle at 90% -10%, rgba(255,255,255,.22), transparent 45%),
		radial-gradient(circle at -10% 110%, rgba(255,255,255,.12), transparent 40%);
}
.souq_profile_head { position: relative; display: flex; align-items: center; gap: 18px; }
.souq_profile_photo {
	width: 92px; height: 92px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
	border: 3px solid rgba(255,255,255,.6); box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.souq_profile_photo_placeholder {
	display: flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,.18); color: #fff; font-size: 34px;
	backdrop-filter: blur(2px);
}
.souq_profile_name { margin: 0 0 5px; font-size: 21px; color: #fff; font-weight: 800; }
.souq_profile_sub { color: rgba(255,255,255,.88); font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.souq_profile_badge {
	display: inline-flex; align-items: center; gap: 5px; margin-top: 10px;
	background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.25);
	border-radius: 999px; padding: 4px 12px; font-size: 11.5px; font-weight: 700;
}
.souq_profile_badge i { color: #6ee7a7; }
.souq_profile_bio { margin-bottom: 16px; }
.souq_profile_phone_btn {
	position: relative;
	display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
	background: #fff; color: var(--souq-primary-dark); font-weight: 800; margin-top: 20px;
	box-shadow: 0 4px 14px rgba(0,0,0,.18);
	transition: transform .15s ease;
}
.souq_profile_phone_btn:hover { background: rgba(255,255,255,.92); transform: translateY(-1px); }
.souq_profile_section { margin-top: 16px; }
.souq_profile_section h3 { margin: 0 0 10px; font-size: 14.5px; font-weight: 800; color: var(--souq-ink); display: flex; align-items: center; gap: 9px; }
.souq_profile_section h3 i { color: var(--souq-primary-dark); font-size: 13px; flex-shrink: 0; }
.souq_profile_section p { margin: 0; color: var(--souq-text); line-height: 1.8; font-size: 13.5px; }

/* ---------- jobs board ---------- */
.souq_job_list { display: flex; flex-direction: column; gap: 12px; }
.souq_job_card {
	background: var(--souq-surface); border: 1px solid var(--souq-border); border-radius: var(--souq-radius);
	box-shadow: var(--souq-shadow-sm); padding: 16px;
}
.souq_job_card_link {
	display: block; color: inherit; text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}
.souq_job_card_link:hover { transform: translateY(-2px); box-shadow: var(--souq-shadow); }
.souq_job_card_link .souq_offer_card_cta { padding: 6px 0 0; justify-content: flex-start; }
.souq_job_photo { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--souq-radius-sm); margin-bottom: 10px; }
.souq_job_title { font-weight: 700; font-size: 15.5px; margin-bottom: 4px; }
.souq_job_meta { font-size: 12px; color: var(--souq-text-muted); margin-bottom: 8px; display: flex; gap: 10px; flex-wrap: wrap; }
.souq_job_desc { font-size: 13.5px; color: var(--souq-text); margin-bottom: 12px; line-height: 1.7; }
.souq_job_actions { display: flex; gap: 8px; flex-wrap: wrap; }
.souq_job_actions a { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- car listing gallery (car_profile.php) ---------- */
.souq_car_gallery { display: flex; flex-direction: column; gap: 10px; }
.souq_car_gallery_main {
	width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--souq-radius);
	background: var(--souq-bg);
}
.souq_car_gallery_thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.souq_car_gallery_thumb {
	width: 72px; height: 72px; object-fit: cover; border-radius: var(--souq-radius-sm);
	border: 2px solid transparent; cursor: pointer; flex-shrink: 0; transition: border-color .15s ease;
}
.souq_car_gallery_thumb:hover { border-color: var(--souq-primary); }

/* ---------- news ---------- */
.souq_online_now_badge {
	display: inline-flex; align-items: center; gap: 8px;
	background: color-mix(in srgb, var(--souq-success) 12%, var(--souq-surface));
	color: var(--souq-success); border: 1px solid color-mix(in srgb, var(--souq-success) 30%, transparent);
	border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 800;
	margin: 14px 0;
}
.souq_online_now_badge i { animation: souqOnlinePulse 1.8s ease-in-out infinite; }

/* ---------- persistent guest notice (homepage only) - no dismiss button on purpose,
   stays visible for every visit until the visitor registers/logs in. ---------- */
.souq_guest_notice {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	background: var(--souq-warn-bg); color: var(--souq-warn);
	border: 1px solid color-mix(in srgb, var(--souq-warn) 35%, transparent);
	border-radius: var(--souq-radius); padding: 14px 18px; margin: 14px 0 20px;
}
.souq_guest_notice_ico { font-size: 18px; flex-shrink: 0; }
.souq_guest_notice_text { flex: 1; min-width: 200px; font-size: 13.5px; line-height: 1.7; color: var(--souq-ink); }
.souq_guest_notice_text a { color: var(--souq-primary-dark); font-weight: 700; text-decoration: underline; }
.souq_guest_notice_btn { flex-shrink: 0; }
@media (max-width: 560px) {
	.souq_guest_notice_btn { width: 100%; }
}

/* ---------- homepage feedback/suggestions call-to-action ---------- */
.souq_feedback_cta {
	display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
	background: var(--souq-primary-light); border: 1px dashed var(--souq-primary);
	border-radius: var(--souq-radius); padding: 20px; margin: 28px 0;
}
.souq_feedback_cta_ico {
	width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	background: var(--souq-surface); color: var(--souq-primary); font-size: 19px;
}
.souq_feedback_cta_text { flex: 1; min-width: 200px; }
.souq_feedback_cta_text h3 { margin: 0 0 3px; font-size: 15px; font-weight: 800; color: var(--souq-ink); }
.souq_feedback_cta_text p { margin: 0; font-size: 12.5px; color: var(--souq-text-muted); }
@keyframes souqOnlinePulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

.souq_news_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.souq_news_card {
	display: block; background: var(--souq-surface); border: 1px solid var(--souq-border);
	border-radius: var(--souq-radius); overflow: hidden; color: inherit;
	box-shadow: var(--souq-shadow-sm); transition: transform .15s ease, box-shadow .15s ease;
}
.souq_news_card:hover { transform: translateY(-2px); box-shadow: var(--souq-shadow); }
.souq_news_card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.souq_news_card_noimg {
	width: 100%; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center;
	background: var(--souq-bg); color: var(--souq-text-muted); font-size: 28px;
}
.souq_news_card_body { padding: 14px; }
.souq_news_card_title { font-weight: 800; font-size: 15px; margin-bottom: 6px; }
.souq_news_card_excerpt { font-size: 13px; color: var(--souq-text-muted); line-height: 1.6; margin-bottom: 10px; }
.souq_news_card_meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--souq-text-muted); }
.souq_news_card_meta span { display: inline-flex; align-items: center; gap: 5px; }

/* compact horizontal row for the homepage's "آخر الأخبار" (only 2 items - no need for a
   big grid of tall cards, a small scannable list reads better and takes less vertical space) */
.souq_news_mini_list { display: flex; flex-direction: column; gap: 4px; }
.souq_news_mini_card {
	display: flex; align-items: center; gap: 8px; padding: 4px 6px;
	background: var(--souq-surface); border: 1px solid var(--souq-border); border-radius: 8px;
	color: inherit; transition: border-color .15s ease, box-shadow .15s ease;
}
.souq_news_mini_card:hover { border-color: var(--souq-primary); box-shadow: var(--souq-shadow-sm); }
.souq_news_mini_thumb {
	width: 28px; height: 28px; border-radius: 6px; object-fit: cover; flex-shrink: 0;
}
.souq_news_mini_thumb_empty {
	display: flex; align-items: center; justify-content: center;
	background: var(--souq-bg); color: var(--souq-text-muted); font-size: 11px;
}
.souq_news_mini_body { flex: 1; min-width: 0; }
.souq_news_mini_title {
	font-weight: 700; font-size: 12px; margin-bottom: 1px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.souq_news_mini_meta { display: flex; gap: 8px; font-size: 10px; color: var(--souq-text-muted); }
.souq_news_mini_meta span { display: inline-flex; align-items: center; gap: 3px; }
.souq_news_mini_chevron { color: var(--souq-text-muted); font-size: 10px; flex-shrink: 0; }

/* ---------- single news post page (news_item.php) - redesigned as a Facebook-style
   post: full-bleed cover image, author row, text, like/comment stats, action bar,
   then a chat-like comment thread with an anonymous option. the news list/grid on
   news_list.php and mini cards elsewhere are untouched - only this one page. ---------- */
.souq_news_item_page { max-width: 620px; margin: 0 auto; animation: souqProfileIn .35s cubic-bezier(.2,.8,.3,1) forwards; }
.souq_news_item_avatar {
	width: 40px; height: 40px; font-size: 16px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
}
.souq_news_item_avatar_sm { width: 32px; height: 32px; font-size: 13px; }
.souq_news_official_badge {
	display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700;
	color: var(--souq-primary-dark); background: var(--souq-primary-light); padding: 1px 7px; border-radius: 999px;
}

.souq_fb_post_card {
	background: var(--souq-surface); border: 1px solid var(--souq-border);
	border-radius: var(--souq-radius); overflow: hidden; box-shadow: var(--souq-shadow);
}
.souq_fb_post_hero { width: 100%; max-height: 440px; overflow: hidden; background: var(--souq-bg); }
.souq_fb_post_hero img { width: 100%; max-height: 440px; object-fit: cover; display: block; }

/* redesign 2026-09-21: larger type, more breathing room, and a plain-language
   "التعليقات" section header - aimed at readers who are not comfortable with
   dense social-app UI (bigger touch targets, less crowding, clearer labels
   instead of relying purely on icons). */
.souq_fb_post_body_wrap { padding: 20px 20px 8px; }
.souq_fb_post_author_row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.souq_fb_post_avatar { width: 48px; height: 48px; font-size: 19px; box-shadow: 0 0 0 2px var(--souq-surface), 0 0 0 3.5px var(--souq-border); }
.souq_fb_post_author_info { flex: 1; min-width: 0; }
.souq_fb_post_author_name { font-weight: 800; font-size: 15.5px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; color: var(--souq-ink); }
.souq_fb_post_meta { font-size: 12.5px; color: var(--souq-text-muted); display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.souq_fb_post_meta i { font-size: 10px; }

.souq_fb_post_title { font-size: 20px; font-weight: 800; line-height: 1.45; margin: 0 0 10px; color: var(--souq-ink); }
.souq_fb_post_text { font-size: 15.5px; line-height: 1.9; color: var(--souq-text); white-space: pre-line; padding-bottom: 10px; }

.souq_fb_post_stats_row {
	display: flex; align-items: center; justify-content: space-between;
	padding: 12px 20px; font-size: 13px; color: var(--souq-text-muted);
	border-top: 1px solid var(--souq-border);
}
.souq_fb_post_stats_left { display: inline-flex; align-items: center; gap: 5px; min-height: 18px; }
.souq_fb_post_stats_left i { color: var(--souq-danger); }
.souq_fb_post_stats_right { color: var(--souq-text-muted); font-weight: 600; }
.souq_fb_post_stats_right:hover { text-decoration: underline; color: var(--souq-primary-dark); }

.souq_fb_post_actions_row {
	display: flex; gap: 8px;
	border-top: 1px solid var(--souq-border);
	padding: 10px 16px;
}
/* icon-only like/comment buttons - no text label, just the icon in a round button */
.souq_fb_post_action_btn {
	flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; color: var(--souq-text-muted);
	border-radius: 50%;
	transition: background .15s ease, color .15s ease;
}
.souq_fb_post_action_btn i { font-size: 19px; }
.souq_fb_post_action_btn:hover { background: var(--souq-bg); color: var(--souq-ink); }
.souq_fb_post_action_btn:active { transform: scale(.92); }

/* redesign 2026-09-21: the like button now has its own look, distinct from the plain
   comment icon button - a heart that pops and turns solid red on like, with a small
   bounce animation, instead of a flat icon swap. */
.souq_fb_like_btn.souq_news_liked { color: var(--souq-danger); background: var(--souq-danger-bg); }
.souq_fb_like_btn.souq_news_liked i { color: var(--souq-danger); }
.souq_fb_like_btn i { transition: transform .2s cubic-bezier(.34,1.56,.64,1); }
.souq_fb_like_btn.souq_like_pop i { animation: souqLikePop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes souqLikePop {
	0% { transform: scale(1); }
	35% { transform: scale(1.35); }
	60% { transform: scale(.9); }
	100% { transform: scale(1); }
}

.souq_fb_post_comments { padding: 8px 20px 24px; border-top: 8px solid var(--souq-bg); }
.souq_fb_post_comments_title { font-size: 16px; font-weight: 800; color: var(--souq-ink); margin: 16px 0 14px; }
.souq_fb_comment_form { display: flex; gap: 10px; margin-bottom: 22px; }
.souq_fb_comment_form_body { flex: 1; }
.souq_fb_comment_input {
	width: 100%; resize: none; overflow: hidden; min-height: 46px; max-height: 160px; border-radius: 18px;
	padding: 12px 18px; font-size: 14.5px; background: var(--souq-bg); border: 1.5px solid var(--souq-border);
}
.souq_fb_comment_input:focus { background: var(--souq-surface); }
.souq_fb_comment_form_row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; gap: 10px; flex-wrap: wrap; }
.souq_news_comment_anon { margin: 0; font-size: 12.5px; color: var(--souq-text-muted); }
.souq_news_comment_anon i { color: var(--souq-text-muted); margin-inline-end: 2px; }
.souq_fb_comment_submit { margin: 0; }

.souq_fb_comment_list { display: flex; flex-direction: column; gap: 16px; }
.souq_fb_comment_item { display: flex; gap: 10px; align-items: flex-start; }
.souq_fb_comment_col { flex: 1; min-width: 0; }
.souq_fb_comment_bubble {
	background: var(--souq-bg); border-radius: 18px; padding: 12px 16px; display: inline-block; max-width: 100%;
}
.souq_fb_comment_name { font-weight: 800; font-size: 13.5px; margin-bottom: 3px; color: var(--souq-ink); }
.souq_fb_comment_text { font-size: 14.5px; line-height: 1.7; color: var(--souq-text); word-break: break-word; }
.souq_fb_comment_time { font-size: 12px; color: var(--souq-text-muted); margin: 5px 6px 0; }
.souq_fb_comment_delete {
	background: none; border: none; padding: 0; width: auto; height: auto;
	font-size: 12px; font-weight: 700; color: var(--souq-text-muted); cursor: pointer;
}
.souq_fb_comment_delete:hover { color: var(--souq-danger); text-decoration: underline; }
.souq_fb_no_comments {
	text-align: center; padding: 28px 16px; color: var(--souq-text-muted); font-size: 13.5px;
}
.souq_fb_no_comments i { display: block; font-size: 26px; margin-bottom: 8px; color: var(--souq-border); }

@media (max-width: 560px) {
	.souq_fb_post_body_wrap, .souq_fb_post_comments { padding-left: 14px; padding-right: 14px; }
	.souq_fb_post_stats_row { padding-left: 14px; padding-right: 14px; }
	.souq_fb_post_actions_row { padding-left: 12px; padding-right: 12px; }
	.souq_fb_post_title { font-size: 17.5px; }
	.souq_fb_post_hero, .souq_fb_post_hero img { max-height: 260px; }
}

/* ---------- unified "offer" card (workers, taxi, maintenance/POS) - same visual language as .souq_store_card ---------- */
.souq_offer_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.souq_offer_card {
	display: block;
	background: var(--souq-surface);
	border-radius: var(--souq-radius);
	overflow: hidden;
	text-align: center;
	box-shadow: var(--souq-shadow-sm);
	border: 1px solid var(--souq-border);
	transition: transform .15s ease, box-shadow .15s ease;
	color: inherit;
	text-decoration: none;
	opacity: 0;
	animation: souqCardIn .4s ease both;
}
.souq_offer_card:hover { transform: translateY(-3px); box-shadow: var(--souq-shadow); }
.souq_offer_card:active { transform: translateY(-1px) scale(.98); }
.souq_offer_card img, .souq_offer_card .souq_offer_card_noimg { width: 100%; height: 96px; object-fit: cover; transition: transform .35s ease; }
.souq_offer_card:hover img { transform: scale(1.06); }
.souq_offer_card_noimg { display: flex; align-items: center; justify-content: center; background: var(--souq-bg); color: var(--souq-text-muted); font-size: 26px; }
.souq_offer_card_name { font-weight: 700; padding: 10px 8px 2px; font-size: 14px; }
.souq_offer_card_meta { font-size: 12px; color: var(--souq-text-muted); padding: 0 8px 12px; }
.souq_offer_card_cta { font-size: 11.5px; font-weight: 700; color: var(--souq-primary-dark); padding: 0 8px 12px; display: flex; align-items: center; justify-content: center; gap: 5px; transition: gap .15s ease; }
.souq_offer_card:hover .souq_offer_card_cta { gap: 8px; }
@media (min-width: 640px) {
	.souq_offer_grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}
@media (min-width: 900px) {
	.souq_offer_grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}

/* ---------- account.php tabs + listings grid ---------- */
.souq_account_tabs { max-width: 560px; overflow-x: auto; flex-wrap: nowrap; }
.souq_account_listing_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.souq_account_listing_item {
	display: flex; align-items: center; gap: 12px;
	background: var(--souq-surface); border-radius: var(--souq-radius-sm); padding: 14px;
	border: 1px solid var(--souq-border);
	box-shadow: var(--souq-shadow-sm);
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.souq_account_listing_item:hover { border-color: var(--souq-primary); box-shadow: var(--souq-shadow); transform: translateY(-1px); }
.souq_account_listing_item_active { border-color: var(--souq-success); background: color-mix(in srgb, var(--souq-success) 6%, var(--souq-surface)); }
.souq_account_listing_icon {
	width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	background: var(--souq-primary-light); color: var(--souq-primary-dark); font-size: 18px;
}
.souq_account_listing_icon_amber { background: var(--souq-warn-bg); color: var(--souq-warn); }
.souq_account_listing_icon_teal { background: var(--souq-accent-light); color: var(--souq-accent); }
.souq_account_listing_icon_green { background: color-mix(in srgb, var(--souq-success) 15%, transparent); color: var(--souq-success); }
.souq_account_listing_icon_purple { background: color-mix(in srgb, #8b5cf6 15%, transparent); color: #8b5cf6; }
.souq_account_listing_body { flex: 1; min-width: 0; }
.souq_account_listing_title { font-weight: 800; font-size: 13.5px; }
.souq_account_listing_status { font-size: 12px; margin-top: 3px; }
.souq_account_listing_item .souq_btn { flex-shrink: 0; margin: 0; padding: 8px 14px; font-size: 12.5px; white-space: nowrap; }
@media (max-width: 480px) {
	.souq_account_listing_grid { grid-template-columns: 1fr; }
	.souq_account_listing_item { flex-wrap: wrap; }
	.souq_account_listing_item .souq_btn { width: 100%; order: 3; }
}

/* ---------- homepage sections ---------- */
.souq_home_section { margin-bottom: 6px; }
.souq_home_section h2 > span { display: flex; align-items: center; gap: 8px; }
.souq_home_section_icon {
	width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	background: var(--souq-primary-light); color: var(--souq-primary-dark); font-size: 13px;
}
.souq_home_empty { color: var(--souq-text-muted); font-size: 13px; grid-column: 1 / -1; }

/* ---------- PWA install modal ---------- */
.souq_pwa_modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.souq_pwa_modal_backdrop { position: absolute; inset: 0; background: rgba(11,18,32,.6); animation: souqFadeIn .2s ease forwards; opacity: 0; }
.souq_pwa_modal_box {
	position: relative; z-index: 1; width: 100%; max-width: 340px;
	background: var(--souq-surface); border-radius: var(--souq-radius); box-shadow: var(--souq-shadow-lg);
	padding: 28px 22px 22px; text-align: center;
	animation: souqPwaModalIn .25s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes souqPwaModalIn { from { transform: translateY(16px) scale(.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.souq_pwa_modal_close {
	position: absolute; top: 12px; inset-inline-end: 12px;
	width: 30px; height: 30px; border-radius: 50%; border: none;
	background: var(--souq-bg); color: var(--souq-text-muted); cursor: pointer;
}
.souq_pwa_modal_icon {
	width: 60px; height: 60px; border-radius: 18px; margin: 0 auto 14px;
	display: flex; align-items: center; justify-content: center; font-size: 24px;
	background: linear-gradient(135deg, var(--souq-primary), var(--souq-primary-dark)); color: #fff;
}
.souq_pwa_modal_box h3 { margin: 0 0 8px; font-size: 17px; }
.souq_pwa_modal_box p { margin: 0 0 18px; font-size: 13px; color: var(--souq-text-muted); line-height: 1.7; }
.souq_pwa_modal_box .souq_btn { width: 100%; margin-bottom: 8px; }

/* ---------- onboarding tour ---------- */
.souq_tour_overlay {
	position: fixed; inset: 0; z-index: 9500;
	background: rgba(8,14,26,.62);
	backdrop-filter: blur(1.5px);
	animation: souqTourFadeIn .25s ease forwards;
}
@keyframes souqTourFadeIn { from { opacity: 0; } to { opacity: 1; } }
.souq_tour_highlight {
	position: fixed; border-radius: 16px;
	box-shadow: 0 0 0 5px var(--souq-primary), 0 0 0 9999px rgba(8,14,26,.62), 0 0 26px 4px rgba(47,111,237,.55);
	transition: top .3s cubic-bezier(.2,.8,.3,1), left .3s cubic-bezier(.2,.8,.3,1), width .3s cubic-bezier(.2,.8,.3,1), height .3s cubic-bezier(.2,.8,.3,1);
	pointer-events: none;
	animation: souqTourPulse 1.8s ease-in-out infinite;
}
@keyframes souqTourPulse {
	0%, 100% { box-shadow: 0 0 0 5px var(--souq-primary), 0 0 0 9999px rgba(8,14,26,.62), 0 0 26px 4px rgba(47,111,237,.55); }
	50% { box-shadow: 0 0 0 5px var(--souq-primary), 0 0 0 9999px rgba(8,14,26,.62), 0 0 34px 8px rgba(47,111,237,.75); }
}
.souq_tour_card {
	/* BUG FIXED 2026-09-21: width was `100%` capped only by `max-width: 310px`, with the
	   16px side gutters coming entirely from `margin-inline` - on a viewport narrower than
	   310px + 32px (very small phones), the box genuinely could not fit inside the 16px
	   gutters on both sides at once, contributing to "the assistant card runs off-screen"
	   for those users. calc() ties the gutter directly to the card's own width instead of
	   relying on margin + a fixed max-width to both happen to leave room. */
	position: fixed; z-index: 1; width: calc(100% - 32px); max-width: 310px;
	background: var(--souq-surface); border-radius: 18px; box-shadow: var(--souq-shadow-lg);
	padding: 20px 20px 18px;
	border: 1px solid var(--souq-border);
	animation: souqTourCardIn .3s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes souqTourCardIn { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
/* BUG FIXED 2026-09-21: the real cause of "the first/welcome message runs off the right
   edge of the screen" - .souq_tour_card's `animation: souqTourCardIn ... forwards` sets
   `transform: translateY(0) scale(1)` as its end state, and a running/finished CSS
   animation's transform always wins over a plain `transform` declared elsewhere (even
   with specificity/!important on other properties) - so .souq_tour_card_center's
   `transform: translate(-50%, -50%)` was being silently discarded the instant the shared
   entrance animation finished. `left: 50%` therefore centered the box's *left edge*, not
   the box itself, pushing roughly half its width off-screen on the right. giving the
   centered variant its own keyframes (which include the -50%/-50% centering translate at
   every step, composed with the same entrance motion) fixes this without touching the
   targeted-step cards, which don't need centering. */
.souq_tour_card_center {
	position: fixed; top: 50% !important; left: 50% !important;
	animation: souqTourCardCenterIn .3s cubic-bezier(.2,.8,.3,1) forwards;
	margin-inline: 0; max-width: 340px;
	text-align: center; padding: 30px 26px 24px;
}
@keyframes souqTourCardCenterIn {
	from { opacity: 0; transform: translate(-50%, -50%) translateY(8px) scale(.97); }
	to { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); }
}
.souq_tour_icon {
	width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 16px;
	display: flex; align-items: center; justify-content: center; font-size: 24px;
	background: linear-gradient(135deg, var(--souq-primary), var(--souq-primary-dark)); color: #fff;
	box-shadow: 0 6px 16px rgba(47,111,237,.35);
}
.souq_tour_step_badge {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; border-radius: 50%; font-size: 10.5px; font-weight: 800;
	background: var(--souq-primary-light); color: var(--souq-primary-dark); margin-inline-end: 8px;
}
.souq_tour_skip {
	position: absolute; top: 12px; inset-inline-end: 14px; background: var(--souq-bg); border: none;
	width: 26px; height: 26px; border-radius: 50%;
	font-size: 11px; color: var(--souq-text-muted); cursor: pointer; font-weight: 600;
	display: flex; align-items: center; justify-content: center;
	transition: background .15s ease, color .15s ease;
}
.souq_tour_skip:hover { background: var(--souq-border); color: var(--souq-ink); }
.souq_tour_card h3 { margin: 4px 0 8px; font-size: 15.5px; padding-inline-end: 30px; display: flex; align-items: center; }
.souq_tour_card_center h3 { padding-inline-end: 0; font-size: 19px; justify-content: center; font-weight: 800; }
.souq_tour_card p { margin: 0 0 16px; font-size: 13px; color: var(--souq-text-muted); line-height: 1.75; }
.souq_tour_dots { display: flex; gap: 5px; justify-content: center; margin-bottom: 14px; }
.souq_tour_dot { width: 6px; height: 6px; border-radius: 50%; background: var(--souq-border); transition: all .2s ease; }
.souq_tour_dot_active { background: var(--souq-primary); width: 18px; border-radius: 4px; }
.souq_tour_actions { display: flex; gap: 8px; }
.souq_tour_actions .souq_btn { flex: 1; margin: 0; padding: 10px; font-size: 13px; font-weight: 700; }
.souq_tour_actions .souq_btn_primary { box-shadow: 0 4px 12px rgba(47,111,237,.3); }

/* =========================================================================
   ===== REDESIGN LAYER (2026-09-20) — professional polish pass ============
   Loaded last so it wins on equal specificity. Pure design: no markup
   assumptions beyond the classes that already exist, plus the new
   souq_hero_* / souq_qs_* / souq_scard_* / souq_pcard_* components.
   ========================================================================= */

:root {
	/* refined elevation: softer, layered, less "flat box with a line" */
	--souq-shadow-sm: 0 1px 2px rgba(12,26,48,.04), 0 2px 6px rgba(12,26,48,.05);
	--souq-shadow: 0 2px 6px rgba(12,26,48,.05), 0 12px 28px -8px rgba(12,26,48,.14);
	--souq-shadow-lg: 0 4px 12px rgba(12,26,48,.08), 0 28px 60px -12px rgba(12,26,48,.26);
	--souq-ring: 0 0 0 3px color-mix(in srgb, var(--souq-primary) 18%, transparent);
	--souq-grad: linear-gradient(135deg, var(--souq-primary), var(--souq-accent));
	--souq-grad-soft: linear-gradient(135deg, color-mix(in srgb, var(--souq-primary) 12%, var(--souq-surface)), color-mix(in srgb, var(--souq-accent) 10%, var(--souq-surface)));
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	letter-spacing: -.1px;
}

/* ---------- typography rhythm ---------- */
.souq_container h2 {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -.3px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 26px 0 14px;
}
.souq_see_all {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--souq-primary);
	background: color-mix(in srgb, var(--souq-primary) 9%, transparent);
	padding: 6px 12px;
	border-radius: 999px;
	white-space: nowrap;
	transition: background .15s ease, transform .15s ease;
}
.souq_see_all:hover { background: color-mix(in srgb, var(--souq-primary) 16%, transparent); transform: translateX(-2px); }

/* ---------- buttons: crisper, with real press feedback ---------- */
.souq_btn {
	border-radius: 12px;
	font-weight: 700;
	letter-spacing: -.2px;
	transition: transform .12s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.souq_btn:active { transform: scale(.97); }
.souq_btn:focus-visible { outline: none; box-shadow: var(--souq-ring); }
.souq_btn_primary {
	background: var(--souq-grad);
	border: none;
	color: #fff;
	box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--souq-primary) 60%, transparent);
}
.souq_btn_primary:hover {
	box-shadow: 0 8px 22px -6px color-mix(in srgb, var(--souq-primary) 70%, transparent);
	transform: translateY(-1px);
}
.souq_btn_primary:active { transform: translateY(0) scale(.97); }

/* ---------- inputs ---------- */
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="search"], input[type="url"], input[type="date"],
select, textarea {
	border-radius: 12px;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--souq-primary);
	box-shadow: var(--souq-ring);
}

/* =========================================================================
   HERO — replaces the bare banner slider as the page opener
   ========================================================================= */
.souq_hero {
	position: relative;
	border-radius: var(--souq-radius-lg);
	overflow: hidden;
	margin: 14px 0 6px;
	background: var(--souq-grad);
	color: #fff;
	padding: 26px 22px 24px;
	isolation: isolate;
}
.souq_hero::before,
.souq_hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	z-index: -1;
	pointer-events: none;
}
.souq_hero::before {
	width: 260px; height: 260px;
	background: rgba(255,255,255,.13);
	top: -110px; inset-inline-start: -70px;
}
.souq_hero::after {
	width: 180px; height: 180px;
	background: rgba(255,255,255,.09);
	bottom: -90px; inset-inline-end: -40px;
}
.souq_hero_title {
	font-size: 22px;
	font-weight: 800;
	margin: 0 0 6px;
	letter-spacing: -.6px;
	line-height: 1.35;
}
.souq_hero_sub {
	font-size: 13.5px;
	opacity: .9;
	margin: 0 0 18px;
	line-height: 1.7;
	max-width: 42ch;
}
.souq_hero_stats {
	display: flex;
	gap: 22px;
	margin-top: 18px;
	flex-wrap: wrap;
}
.souq_hero_stat_num { font-size: 19px; font-weight: 800; line-height: 1.2; }
.souq_hero_stat_label { font-size: 11.5px; opacity: .82; margin-top: 2px; }
@media (min-width: 720px) {
	.souq_hero { padding: 40px 34px 36px; }
	.souq_hero_title { font-size: 30px; }
	.souq_hero_sub { font-size: 15px; }
}

/* =========================================================================
   QUICK SERVICES strip — horizontal, icon-led, replaces 5 identical grids
   ========================================================================= */
.souq_qs_strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin: 18px 0 6px;
}
.souq_qs_item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 14px 6px 12px;
	background: var(--souq-surface);
	border: 1px solid var(--souq-border);
	border-radius: var(--souq-radius);
	color: var(--souq-text);
	text-align: center;
	box-shadow: var(--souq-shadow-sm);
	transition: transform .15s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease, border-color .2s ease;
}
.souq_qs_item:hover {
	transform: translateY(-3px);
	box-shadow: var(--souq-shadow);
	border-color: color-mix(in srgb, var(--souq-primary) 35%, var(--souq-border));
}
.souq_qs_item:active { transform: translateY(-1px) scale(.97); }
.souq_qs_ico {
	width: 44px; height: 44px;
	border-radius: 14px;
	display: flex; align-items: center; justify-content: center;
	font-size: 17px;
	background: var(--souq-primary-light);
	color: var(--souq-primary);
	transition: transform .2s cubic-bezier(.2,.8,.3,1);
}
.souq_qs_item:hover .souq_qs_ico { transform: scale(1.1) rotate(-4deg); }
.souq_qs_label { font-size: 11.5px; font-weight: 700; line-height: 1.35; }
.souq_qs_ico_teal   { background: var(--souq-accent-light); color: var(--souq-accent); }
.souq_qs_ico_amber  { background: var(--souq-warn-bg); color: var(--souq-warn); }
.souq_qs_ico_green  { background: var(--souq-success-bg); color: var(--souq-success); }
.souq_qs_ico_violet { background: color-mix(in srgb, #8b5cf6 14%, transparent); color: #8b5cf6; }
.souq_qs_ico_rose   { background: color-mix(in srgb, #f43f5e 13%, transparent); color: #f43f5e; }
@media (min-width: 640px) { .souq_qs_strip { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 960px) { .souq_qs_strip { grid-template-columns: repeat(8, 1fr); } }

/* =========================================================================
   STORE CARD — distinct from product card: logo avatar + info, not a tile
   ========================================================================= */
.souq_scard_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.souq_scard {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 13px;
	background: var(--souq-surface);
	border: 1px solid var(--souq-border);
	border-radius: var(--souq-radius);
	box-shadow: var(--souq-shadow-sm);
	color: inherit;
	transition: transform .15s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease, border-color .2s ease;
}
.souq_scard:hover {
	transform: translateY(-2px);
	box-shadow: var(--souq-shadow);
	border-color: color-mix(in srgb, var(--souq-primary) 35%, var(--souq-border));
}
.souq_scard:active { transform: translateY(0) scale(.985); }
.souq_scard_logo {
	width: 54px; height: 54px;
	border-radius: 16px;
	object-fit: cover;
	flex-shrink: 0;
	background: var(--souq-bg);
	border: 1px solid var(--souq-border);
}
.souq_scard_logo_empty {
	display: flex; align-items: center; justify-content: center;
	color: var(--souq-text-muted); font-size: 20px;
}
.souq_scard_body { flex: 1; min-width: 0; }
.souq_scard_name {
	font-weight: 800; font-size: 14px; letter-spacing: -.2px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.souq_scard_meta {
	display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
	margin-top: 5px; font-size: 11.5px; color: var(--souq-text-muted);
}
.souq_scard_rating {
	display: inline-flex; align-items: center; gap: 4px;
	font-weight: 700; color: #b8860b;
	background: var(--souq-warn-bg);
	padding: 2px 8px; border-radius: 999px;
}
.souq_scard_rating i { font-size: 9.5px; }
.souq_scard_chev { color: var(--souq-text-muted); font-size: 12px; flex-shrink: 0; transition: transform .15s ease; }
.souq_scard:hover .souq_scard_chev { transform: translateX(-3px); color: var(--souq-primary); }

/* =========================================================================
   PERSON / LISTING CARD — for workers, taxi, drivers, maintenance
   ========================================================================= */
.souq_pcard_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.souq_pcard {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 18px 12px 14px;
	background: var(--souq-surface);
	border: 1px solid var(--souq-border);
	border-radius: var(--souq-radius);
	box-shadow: var(--souq-shadow-sm);
	color: inherit;
	transition: transform .15s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease, border-color .2s ease;
}
.souq_pcard:hover {
	transform: translateY(-3px);
	box-shadow: var(--souq-shadow);
	border-color: color-mix(in srgb, var(--souq-primary) 35%, var(--souq-border));
}
.souq_pcard:active { transform: translateY(-1px) scale(.98); }
.souq_pcard_avatar {
	width: 62px; height: 62px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 10px;
	background: var(--souq-bg);
	border: 2px solid var(--souq-surface);
	box-shadow: 0 0 0 1px var(--souq-border), var(--souq-shadow-sm);
}
.souq_pcard_avatar_empty {
	display: flex; align-items: center; justify-content: center;
	font-size: 22px; color: var(--souq-text-muted);
	background: var(--souq-grad-soft);
}
.souq_pcard_name {
	font-weight: 800; font-size: 13.5px; letter-spacing: -.2px;
	max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.souq_pcard_role {
	font-size: 11.5px; color: var(--souq-text-muted); margin-top: 4px;
	max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.souq_pcard_tag {
	margin-top: 10px;
	font-size: 10.5px; font-weight: 700;
	padding: 4px 11px; border-radius: 999px;
	background: var(--souq-primary-light); color: var(--souq-primary);
}

/* =========================================================================
   SECTION HEADER with icon chip (refined)
   ========================================================================= */
.souq_home_section { margin-bottom: 4px; }
.souq_home_section_icon {
	width: 32px; height: 32px;
	border-radius: 11px;
	font-size: 13.5px;
	background: var(--souq-grad);
	color: #fff;
	box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--souq-primary) 55%, transparent);
}

/* ---------- product card polish ---------- */
.souq_product_card {
	border-radius: var(--souq-radius);
	transition: transform .15s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease, border-color .2s ease;
}
.souq_product_card:hover {
	transform: translateY(-3px);
	box-shadow: var(--souq-shadow);
	border-color: color-mix(in srgb, var(--souq-primary) 30%, var(--souq-border));
}
.souq_product_price { font-weight: 800; letter-spacing: -.3px; }

/* ---------- banner slider: tighter, more cinematic ---------- */
.souq_banner_slide { border-radius: var(--souq-radius-lg); }
.souq_banner_overlay {
	background: linear-gradient(to top, rgba(8,14,26,.82) 0%, rgba(8,14,26,.35) 55%, rgba(8,14,26,.05) 100%);
}
.souq_banner_title { letter-spacing: -.5px; }

/* ---------- empty states ---------- */
.souq_empty_state {
	text-align: center;
	padding: 44px 20px;
	color: var(--souq-text-muted);
}
.souq_empty_state_ico {
	width: 68px; height: 68px;
	margin: 0 auto 14px;
	border-radius: 22px;
	display: flex; align-items: center; justify-content: center;
	font-size: 26px;
	background: var(--souq-grad-soft);
	color: var(--souq-primary);
}
.souq_empty_state h3 { margin: 0 0 6px; font-size: 15.5px; color: var(--souq-text); }
.souq_empty_state p { margin: 0 0 18px; font-size: 13px; line-height: 1.7; }

/* ---------- staggered entrance for grids ---------- */
@media (prefers-reduced-motion: no-preference) {
	.souq_scard, .souq_pcard, .souq_qs_item {
		opacity: 0;
		animation: souqCardIn .42s cubic-bezier(.2,.8,.3,1) both;
	}
	.souq_scard:nth-child(1), .souq_pcard:nth-child(1), .souq_qs_item:nth-child(1) { animation-delay: .02s; }
	.souq_scard:nth-child(2), .souq_pcard:nth-child(2), .souq_qs_item:nth-child(2) { animation-delay: .05s; }
	.souq_scard:nth-child(3), .souq_pcard:nth-child(3), .souq_qs_item:nth-child(3) { animation-delay: .08s; }
	.souq_scard:nth-child(4), .souq_pcard:nth-child(4), .souq_qs_item:nth-child(4) { animation-delay: .11s; }
	.souq_scard:nth-child(5), .souq_pcard:nth-child(5), .souq_qs_item:nth-child(5) { animation-delay: .14s; }
	.souq_scard:nth-child(6), .souq_pcard:nth-child(6), .souq_qs_item:nth-child(6) { animation-delay: .17s; }
	.souq_scard:nth-child(7), .souq_pcard:nth-child(7), .souq_qs_item:nth-child(7) { animation-delay: .2s; }
	.souq_scard:nth-child(8), .souq_pcard:nth-child(8), .souq_qs_item:nth-child(8) { animation-delay: .23s; }
}
@media (prefers-reduced-motion: reduce) {
	.souq_scard, .souq_pcard, .souq_qs_item, .souq_offer_card { opacity: 1; animation: none; }
	* { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* scroller items now host a full .souq_product_card (redesign 2026-09-20) */
.souq_product_scroller_item { flex: 0 0 auto; }
.souq_product_scroller_item > .souq_product_card { width: 100%; height: 100%; }

/* ---------- page header (redesign 2026-09-20) ---------- */
.souq_page_head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 18px 0 18px;
	flex-wrap: wrap;
}
.souq_page_head_text { flex: 1; min-width: 200px; }
.souq_page_head_add { flex-shrink: 0; margin-inline-start: auto; }
@media (max-width: 560px) {
	.souq_page_head_add { width: 100%; margin-inline-start: 0; }
}
.souq_page_head_ico {
	width: 50px; height: 50px;
	border-radius: 16px;
	flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	font-size: 19px;
	background: var(--souq-grad);
	color: #fff;
	box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--souq-primary) 60%, transparent);
}
.souq_page_head_title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.4px; }
.souq_page_head_sub { margin: 3px 0 0; font-size: 12.5px; color: var(--souq-text-muted); }

/* ---------- site map page (sitemap.php) - grid of shortcut cards to every section ---------- */
.souq_sitemap_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 26px; }
.souq_sitemap_card {
	display: flex; align-items: center; gap: 12px;
	background: var(--souq-surface); border: 1px solid var(--souq-border);
	border-radius: var(--souq-radius); padding: 14px 16px;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.souq_sitemap_card:hover { transform: translateY(-2px); box-shadow: var(--souq-shadow-sm); border-color: var(--souq-primary-light); }
.souq_sitemap_card:active { transform: translateY(0) scale(.98); }
.souq_sitemap_card_label { flex: 1; font-weight: 700; font-size: 13.5px; color: var(--souq-ink); }
.souq_sitemap_card_chevron { color: var(--souq-text-muted); font-size: 12px; flex-shrink: 0; }
.souq_sitemap_card:hover .souq_sitemap_card_chevron { color: var(--souq-primary); }

/* alert variants completing the set (redesign 2026-09-20) */
.souq_alert_warn { background: var(--souq-warn-bg); color: var(--souq-warn); }
.souq_alert_info { background: var(--souq-info-bg); color: var(--souq-info); }

/* =========================================================================
   PRODUCT PAGE polish (redesign 2026-09-20)
   ========================================================================= */
.souq_product_gallery_main {
	border-radius: var(--souq-radius-lg);
	overflow: hidden;
	background: var(--souq-surface);
	border: 1px solid var(--souq-border);
	box-shadow: var(--souq-shadow-sm);
}
.souq_product_gallery_thumb {
	border-radius: 12px;
	overflow: hidden;
	border: 2px solid transparent;
	transition: border-color .15s ease, transform .15s ease;
	padding: 0;
	background: none;
	cursor: pointer;
}
.souq_product_gallery_thumb:hover { transform: translateY(-2px); }
.souq_product_gallery_thumb_active { border-color: var(--souq-primary); }

.souq_product_info h1 { font-size: 21px; font-weight: 800; letter-spacing: -.5px; line-height: 1.4; }

.souq_product_seller_row {
	background: var(--souq-bg);
	border: 1px solid var(--souq-border);
	border-radius: var(--souq-radius);
	padding: 11px 13px;
	margin: 14px 0;
}
.souq_product_seller_logo { border-radius: 12px; }

#souqProductPriceDisplay {
	font-size: 27px;
	font-weight: 800;
	letter-spacing: -.8px;
	color: var(--souq-primary);
	margin: 14px 0;
}

.souq_product_block_title {
	font-size: 14.5px;
	font-weight: 800;
	margin: 0 0 8px;
	letter-spacing: -.2px;
}
.souq_product_divider {
	height: 1px;
	background: var(--souq-border);
	margin: 18px 0;
	border: none;
}

/* wishlist / share round buttons */
.souq_wishlist_btn_lg, .souq_share_btn {
	width: 42px; height: 42px;
	border-radius: 50%;
	border: 1px solid var(--souq-border);
	background: var(--souq-surface);
	color: var(--souq-text-muted);
	cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	transition: transform .12s ease, color .15s ease, border-color .15s ease, background .15s ease;
}
.souq_wishlist_btn_lg:hover, .souq_share_btn:hover {
	transform: scale(1.08);
	border-color: var(--souq-primary);
	color: var(--souq-primary);
}
.souq_wishlist_btn_lg:active, .souq_share_btn:active { transform: scale(.95); }
.souq_wishlist_btn_lg.souq_wishlist_active { color: #e0245e; border-color: #e0245e; background: color-mix(in srgb, #e0245e 8%, var(--souq-surface)); }

/* =========================================================================
   BOTTOM NAV + FILTERS polish (redesign 2026-09-20)
   ========================================================================= */
.souq_bottomnav {
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	background: color-mix(in srgb, var(--souq-surface) 88%, transparent);
	border-top: 1px solid var(--souq-border);
	box-shadow: 0 -4px 20px -8px rgba(12,26,48,.14);
}
.souq_bn_item {
	transition: color .15s ease, transform .15s cubic-bezier(.2,.8,.3,1);
}
.souq_bn_item i { transition: transform .18s cubic-bezier(.2,.8,.3,1); }
.souq_bn_item:active i { transform: scale(.88); }
.souq_bn_active i { transform: translateY(-1px); }
.souq_bn_center_circle {
	background: var(--souq-grad);
	box-shadow: 0 6px 18px -5px color-mix(in srgb, var(--souq-primary) 70%, transparent);
	transition: transform .18s cubic-bezier(.2,.8,.3,1);
}
.souq_bn_item:active .souq_bn_center_circle { transform: scale(.93); }

/* filters bar as a real card */
.souq_filters {
	background: var(--souq-surface);
	border: 1px solid var(--souq-border);
	border-radius: var(--souq-radius);
	padding: 12px;
	box-shadow: var(--souq-shadow-sm);
	margin-bottom: 18px;
}
.souq_filters select, .souq_filters input { border-radius: 11px; }
.souq_filters button {
	background: var(--souq-grad);
	border-radius: 11px;
	transition: transform .12s ease, filter .15s ease;
}
.souq_filters button:hover { filter: brightness(1.06); }
.souq_filters button:active { transform: scale(.96); }

/* ---- contact actions (free services: call / whatsapp) ---- */
.souq_contact_actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.souq_contact_actions .souq_btn { flex: 1 1 160px; justify-content: center; }

/* ---- compact product cards on the home page ---- */
.souq_home_section .souq_product_scroller { gap: 10px; }
.souq_home_section .souq_product_scroller_item { flex-basis: 118px; }
.souq_home_section .souq_product_grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.souq_home_section .souq_product_card { border-radius: 14px; }
.souq_home_section .souq_product_img img, .souq_home_section .souq_no_image { border-radius: 16px; }
.souq_home_section .souq_product_body { padding-top: 2px; }
.souq_home_section .souq_product_name { font-size: 12px; padding: 6px 8px 1px; }
.souq_home_section .souq_product_store { font-size: 10px; padding: 0 8px; }
.souq_home_section .souq_product_store_rating_mini, .souq_home_section .souq_compare_strip { display: none; }
.souq_home_section .souq_product_price { font-size: 12.5px; padding: 4px 8px 8px; }
.souq_home_section .souq_product_store_badge { transform: scale(.8); transform-origin: top right; }
.souq_home_section .souq_wishlist_btn { transform: scale(.85); }
@media (min-width: 640px) {
	.souq_home_section .souq_product_scroller_item { flex-basis: 140px; }
	.souq_home_section .souq_product_grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ---- WhatsApp button ---- */
.souq_btn_whatsapp { background: #25d366; color: #fff; border: 0; }
.souq_btn_whatsapp:hover { background: #1ebe5b; color: #fff; }

/* ---- product options (customer side) ---- */
.souq_option_groups { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.souq_option_group_title { font-weight: 800; font-size: 13.5px; margin-bottom: 7px; }
.souq_option_choices { display: flex; flex-wrap: wrap; gap: 8px; }
.souq_option_choice { cursor: pointer; margin: 0; }
.souq_option_choice input { position: absolute; opacity: 0; pointer-events: none; }
.souq_option_choice span {
	display: inline-block; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 700;
	background: var(--souq-surface); border: 1.5px solid var(--souq-border); color: var(--souq-text);
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.souq_option_choice:hover span { border-color: var(--souq-primary); }
.souq_option_choice input:checked + span { background: var(--souq-primary); border-color: var(--souq-primary); color: #fff; }
.souq_option_choice input:focus-visible + span { box-shadow: var(--souq-ring, 0 0 0 3px rgba(47,111,237,.25)); }
.souq_option_group_missing .souq_option_group_title { color: var(--souq-danger); }
.souq_option_group_missing .souq_option_choice span { border-color: var(--souq-danger); }

/* ---- product options + extra images (vendor side) ---- */
.souq_option_group_admin { border: 1px solid var(--souq-border); border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.souq_option_group_head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.souq_option_chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.souq_option_chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; border-radius: 999px; background: var(--souq-bg); border: 1px solid var(--souq-border); font-size: 13px; }
.souq_option_chip button { background: none; border: 0; color: var(--souq-danger); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 4px; width: auto; }
.souq_option_add_inline { display: flex; gap: 8px; }
.souq_option_add_inline input { flex: 1; margin: 0; }
.souq_extra_images { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; margin-bottom: 14px; }
.souq_extra_image { position: relative; }
.souq_extra_image img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 10px; display: block; }
.souq_extra_image form { position: absolute; top: 4px; left: 4px; }
.fancybox__container { z-index: 10000; }

/* ---- size pass 2 (2026-09-30): smaller product cards everywhere + compact product page ---- */
.souq_product_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.souq_grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
@media (min-width: 640px) {
	.souq_grid, .souq_product_grid { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); }
}
@media (min-width: 900px) {
	.souq_grid, .souq_product_grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
.souq_grid .souq_product_card, .souq_product_grid .souq_product_card { border-radius: 14px; }
.souq_grid .souq_product_img img, .souq_grid .souq_no_image,
.souq_product_grid .souq_product_img img, .souq_product_grid .souq_no_image { border-radius: 16px; }
.souq_grid .souq_product_name, .souq_product_grid .souq_product_name { font-size: 12px; padding: 6px 8px 1px; }
.souq_grid .souq_product_store, .souq_product_grid .souq_product_store { font-size: 10px; padding: 0 8px; }
.souq_grid .souq_product_price, .souq_product_grid .souq_product_price { font-size: 12.5px; padding: 4px 8px 8px; }
.souq_grid .souq_compare_strip { font-size: 10px; padding: 4px 6px; }
.souq_home_section .souq_product_scroller_item { flex-basis: 108px; }

.souq_product_view { padding: 14px; gap: 16px; grid-template-columns: 1fr; }
.souq_product_gallery { max-width: 300px; margin-inline: auto; width: 100%; }
.souq_product_gallery_thumb { width: 52px; height: 52px; flex-shrink: 0; }
.souq_product_gallery_thumbs { gap: 6px; }
.souq_product_info h1 { font-size: 17px; }
.souq_product_info .souq_product_price { font-size: 21px; }
.souq_product_desc { font-size: 13.5px; line-height: 1.7; }
.souq_product_block_title { font-size: 14px; }
@media (min-width: 640px) {
	.souq_product_view { grid-template-columns: 240px 1fr; align-items: start; }
	.souq_product_gallery { max-width: none; margin: 0; }
}

/* ---- wishlist / empty messages inside product grids must span the whole row ---- */
.souq_grid > :not(.souq_product_card):not(.souq_product_scroller_item):not(div[style]) { grid-column: 1 / -1; }
.souq_page_head_ico_rose { background: linear-gradient(135deg, #f43f5e, #fb7185); box-shadow: 0 6px 18px -6px rgba(244,63,94,.6); }
.souq_empty_state_ico_rose { background: color-mix(in srgb, #f43f5e 14%, var(--souq-surface)); color: #f43f5e; }
.souq_empty_state p i { color: #f43f5e; }

/* ---- account page: compact hero + accordion sections + small save buttons (2026-09-30) ---- */
.souq_profile_hero { padding: 14px 16px; margin-bottom: 12px; }
.souq_profile_hero_top { gap: 12px; }
.souq_profile_avatar { width: 46px; height: 46px; font-size: 19px; }
.souq_profile_hero_name { font-size: 16px; }
.souq_profile_hero_meta { margin-top: 4px; gap: 6px; }
.souq_profile_role_chip, .souq_profile_since { font-size: 11px; padding: 3px 9px; }

.souq_profile_card { padding: 0; margin-bottom: 10px; overflow: hidden; animation: none; }
.souq_profile_card > *:not(h2) { margin-inline: 16px; }
.souq_profile_card > h2 + * { margin-top: 2px; }
.souq_profile_card > *:last-child { margin-bottom: 16px; }
.souq_profile_card h2 { margin: 0; padding: 14px 16px; font-size: 14.5px; }
.souq_acc > h2 { cursor: pointer; user-select: none; }
.souq_acc > h2::after {
	content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px;
	margin-inline-start: auto; color: var(--souq-text-muted); transition: transform .2s ease;
}
.souq_acc_open > h2::after { transform: rotate(180deg); }
.souq_acc:not(.souq_acc_open) > *:not(h2) { display: none !important; }
.souq_acc_open > h2 { border-bottom: 1px solid var(--souq-border); margin-bottom: 12px; }

.souq_profile_card label { font-size: 12.5px; margin-top: 10px; }
.souq_profile_card input, .souq_profile_card select, .souq_profile_card textarea { font-size: 14px; padding: 9px 12px; }
.souq_profile_card form button[type="submit"],
.souq_profile_card .souq_btn {
	width: auto; display: inline-flex; align-items: center; gap: 6px;
	padding: 7px 18px; font-size: 13px; border-radius: 10px; margin-top: 12px;
}

/* ---- verified badge ---- */
.souq_verified_badge { color: #1d9bf0; font-size: .85em; margin-inline-start: 3px; vertical-align: middle; }

/* ---- sticky contact bar (product page, mobile only) ---- */
.souq_sticky_contact { display: none; }
@media (max-width: 767px) {
	.souq_sticky_contact {
		display: flex; gap: 8px; position: fixed; z-index: 90;
		inset-inline: 0; bottom: var(--souq-bottomnav-h, 62px);
		padding: 8px 12px; background: color-mix(in srgb, var(--souq-surface) 92%, transparent);
		backdrop-filter: blur(10px); border-top: 1px solid var(--souq-border);
	}
	.souq_sticky_contact .souq_btn { flex: 1; justify-content: center; padding: 9px 10px; font-size: 13.5px; }
	.souq_container:has(.souq_sticky_contact) { padding-bottom: calc(var(--souq-bottomnav-h, 62px) + 70px); }
}

/* ---- contact click stats ---- */
.souq_contact_stats { display: flex; gap: 10px; margin-bottom: 12px; }
.souq_contact_stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border-radius: 12px; background: var(--souq-bg); }
.souq_contact_stat i { font-size: 18px; color: var(--souq-primary-dark); }
.souq_contact_stat .fa-whatsapp { color: #25d366; }
.souq_contact_stat strong { font-size: 22px; line-height: 1.1; }
.souq_contact_stat span { font-size: 11.5px; color: var(--souq-text-muted); }
.souq_click_chip { display: inline-flex; gap: 10px; font-size: 11.5px; color: var(--souq-text-muted); margin-top: 4px; }