/* Hami Instagram Orders - Front-end (shortcode) styles */

:root {
	--hio-primary: #7e3ff2;
	--hio-primary-dark: #6c2fe0;
	--hio-primary-light: #ede6fd;
	--hio-primary-tint: #f6f4fd;
	--hio-ink: #241a3d;
	--hio-ink-soft: #3c3852;
	--hio-muted: #726f85;
	--hio-border: #ececf3;
	--hio-border-strong: #ddd8f2;
	--hio-bg-soft: #f7f7fb;
	--hio-danger: #d63638;
	--hio-danger-dark: #b32d2e;
	--hio-success: #0a8a2e;
	--hio-success-bg: #eafaf0;
	--hio-warning: #a15c00;
	--hio-warning-bg: #fef6e9;
	--hio-radius-sm: 8px;
	--hio-radius-md: 12px;
	--hio-radius-lg: 16px;
	--hio-shadow-sm: 0 1px 2px rgba(24, 18, 52, 0.04), 0 2px 8px rgba(24, 18, 52, 0.04);
	--hio-shadow-md: 0 4px 16px rgba(24, 18, 52, 0.08);
	--hio-shadow-lg: 0 12px 40px rgba(24, 18, 52, 0.16);
}

.hio-front-wrap {
	direction: rtl;
	text-align: right;
	font-family: inherit;
	max-width: 720px;
	margin: 0 auto;
}

.hio-front-wrap * {
	box-sizing: border-box;
}

.hio-front-box {
	background: #fff !important;
	border: 1px solid #ececf3 !important;
	border-radius: 12px !important;
	padding: 22px !important;
	margin-bottom: 18px;
	box-shadow: 0 1px 2px rgba(24, 18, 52, 0.03), 0 4px 16px rgba(24, 18, 52, 0.04) !important;
}

.hio-front-box h2 {
	margin: 0 0 16px;
	font-size: 17px;
	font-weight: 700;
	color: #241a3d;
}

.hio-front-login-notice {
	text-align: center;
	font-size: 14px;
}

.hio-auth-tabs {
	display: flex;
	gap: 6px;
	margin-bottom: 18px;
	border-bottom: 1px solid #ececf3;
}

.hio-auth-tab {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	padding: 10px 14px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: #766f8c;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
}

.hio-auth-tab:hover {
	color: #3c3852;
}

.hio-auth-tab.is-active {
	color: #7e3ff2;
	border-bottom-color: #7e3ff2;
}

.hio-otp-phone-row {
	display: flex;
	gap: 10px;
}

.hio-otp-phone-row input {
	flex: 1;
}

.hio-otp-phone-row .hio-front-btn {
	flex: none;
	white-space: nowrap;
}

.hio-front-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f7f7fb;
	border: 1px dashed #d9d5ef;
	border-radius: 8px;
	padding: 20px;
	text-align: center;
	color: #726f85;
	font-size: 13px;
	line-height: 1.6;
}

/* Dashboard table */
.hio-front-table {
	width: 100%;
	border-collapse: collapse;
}

.hio-front-table th,
.hio-front-table td {
	padding: 10px 12px;
	border-bottom: 1px solid #f1f0f7;
	font-size: 14px;
	text-align: right;
}

.hio-front-table th {
	color: #726f85;
	font-weight: 600;
}

/* The plain 2-column "th=label / td=value" detail tables (subscription
 * info, etc.) need this class explicitly — width:40% used to apply to
 * every .hio-front-table unconditionally, which badly squeezed the
 * many-column list tables (discount codes, customers, orders...) that
 * share the same base class. */
.hio-kv-table th {
	width: 40%;
}

.hio-front-table tr:last-child th,
.hio-front-table tr:last-child td {
	border-bottom: none;
}

/* Multi-column list tables (thead + data-label on each td) collapse
 * into stacked cards below this width — a 5-6 column table has no
 * honest way to stay a real table on a phone screen. The 2-column
 * key-value tables (.hio-kv-table) are left alone; th/td side-by-side
 * already reads fine at any width. */
@media (max-width: 700px) {
	.hio-front-table:not(.hio-kv-table) thead {
		display: none;
	}
	.hio-front-table:not(.hio-kv-table),
	.hio-front-table:not(.hio-kv-table) tbody,
	.hio-front-table:not(.hio-kv-table) tr {
		display: block;
		width: 100%;
	}
	.hio-front-table:not(.hio-kv-table) tr {
		border: 1px solid #f1f0f7;
		border-radius: var(--hio-radius-sm, 10px);
		padding: 4px 12px;
		margin-bottom: 10px;
	}
	.hio-front-table:not(.hio-kv-table) td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		text-align: left;
		border-bottom: 1px dashed #f1f0f7;
		padding: 9px 0;
	}
	.hio-front-table:not(.hio-kv-table) tr:last-child td:last-child,
	.hio-front-table:not(.hio-kv-table) td:last-child {
		border-bottom: none;
	}
	.hio-front-table:not(.hio-kv-table) td[data-label]::before {
		content: attr(data-label);
		flex: none;
		font-size: 12px;
		font-weight: 600;
		color: #726f85;
	}
	.hio-front-table:not(.hio-kv-table) td:not([data-label]) {
		justify-content: flex-end;
	}
}

.hio-front-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 12px;
	border-radius: 20px;
	font-size: 11.5px;
	font-weight: 700;
}

.hio-front-badge-success { background: #e6f8ec; color: #0a7a34; }
.hio-front-badge-warning { background: #fef3e0; color: #a15c00; }
.hio-front-badge-danger  { background: #fce9e9; color: #c22a2b; }

/* Forms */
.hio-front-field {
	margin-bottom: 14px;
	position: relative;
}

.hio-front-box .description {
	font-size: 12px;
	color: var(--hio-muted, #726f85);
	margin: 4px 0 10px;
	line-height: 1.6;
}

/* Two short fields side by side (e.g. name + phone) instead of each
 * eating a full row — collapses back to stacked on narrow screens. */
.hio-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 14px;
}

.hio-field-row .hio-front-field {
	margin-bottom: 0;
}

@media (max-width: 480px) {
	.hio-field-row {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.hio-field-row .hio-front-field {
		margin-bottom: 14px;
	}
	.hio-field-row .hio-front-field:last-child {
		margin-bottom: 0;
	}
}

.hio-front-field label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: #3c3852;
	margin-bottom: 5px;
}

.hio-front-field .req {
	color: #d63638;
}

.hio-front-field input[type="text"],
.hio-front-field input[type="tel"],
.hio-front-field input[type="number"],
.hio-front-field input[type="email"],
.hio-front-field input[type="password"],
.hio-front-field select,
.hio-front-field textarea {
	width: 100%;
	border: 1px solid #dcd9ea !important;
	border-radius: 8px !important;
	padding: 9px 12px !important;
	font-size: 13.5px;
	line-height: 1.4;
	background: #fbfbfd !important;
	font-family: inherit;
	transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.hio-front-field input[type="text"]:focus,
.hio-front-field input[type="tel"]:focus,
.hio-front-field input[type="number"]:focus,
.hio-front-field input[type="email"]:focus,
.hio-front-field input[type="password"]:focus,
.hio-front-field select:focus,
.hio-front-field textarea:focus {
	outline: none;
	border-color: #9c7ff0 !important;
	background: #fff !important;
	box-shadow: 0 0 0 3px rgba(126, 63, 242, 0.1) !important;
}

/* Help text under a field — kept visually attached (small gap, muted
 * tone, no top border/box) so it reads as a caption for the field
 * above it rather than a separate paragraph competing with the next
 * field's label. */
.hio-front-field > .description,
.hio-front-field + .description {
	display: block;
	margin: 6px 2px 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--hio-muted);
}

.hio-front-box > .description:first-of-type {
	margin-top: -8px;
	margin-bottom: 16px;
}

.hio-portal-page-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 14px;
}
.hio-portal-page-title-row h2 {
	margin: 0;
}
.hio-portal-header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* Highlighted sub-fields — link-type/amount choices nested under a
 * payment-related radio option, visually grouped as a single "step"
 * with a soft tinted card instead of floating loose in the form. */
#hio-portal-link-type-wrap,
#hio-portal-link-partial-wrap,
#hio-portal-link-full-wrap,
#hio-edit-payment-link-info,
#hio-edit-link-type-wrap,
#hio-edit-link-partial-wrap,
#hio-edit-link-full-wrap {
	background: var(--hio-primary-tint);
	border: 1px solid var(--hio-border-strong);
	border-radius: var(--hio-radius-sm);
	padding: 14px 16px;
	margin-bottom: 14px;
}

.hio-front-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 20px !important;
	padding-top: 16px !important;
	border-top: 1px solid #f1f0f7 !important;
	flex-wrap: wrap;
}

/* Messages sit BEFORE the button(s) in the DOM, but since flex-end
 * anchors the LAST item to the end edge, that made the message (last
 * child) the anchor and left the button's position shifting every time
 * the message text changed length. Giving the message a negative order
 * makes it visually the first item instead, so the button(s) — now
 * effectively last — stay anchored in a fixed spot regardless of
 * message length. */
.hio-front-actions .hio-front-msg {
	order: -1;
}

.hio-front-btn {
	background: var(--hio-primary) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 9px !important;
	padding: 10px 22px !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(126, 63, 242, 0.25) !important;
	transition: background 0.15s, box-shadow 0.15s, transform 0.05s;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	line-height: 1.4;
}

.hio-front-btn:hover {
	background: var(--hio-primary-dark) !important;
	box-shadow: 0 4px 12px rgba(126, 63, 242, 0.32) !important;
}

.hio-front-btn:active {
	transform: translateY(1px);
}

.hio-front-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	box-shadow: none !important;
	transform: none !important;
}

.hio-front-msg {
	font-size: 12.5px;
	font-weight: 600;
}

.hio-front-msg.success { color: #0a8a2e; }
.hio-front-msg.error { color: #d63638; }

/* Ticket list */
.hio-ticket-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.hio-ticket-list-item {
	border: 1px solid var(--hio-border);
	border-radius: var(--hio-radius-sm);
	overflow: hidden;
	transition: box-shadow 0.15s, border-color 0.15s;
}

.hio-ticket-list-item:hover {
	border-color: var(--hio-border-strong);
	box-shadow: var(--hio-shadow-sm);
}

.hio-ticket-list-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	cursor: pointer;
	background: #fff;
	flex-wrap: wrap;
	position: relative;
}

.hio-ticket-list-header::before {
	content: "\f125";
	font-family: dashicons;
	font-size: 16px;
	color: var(--hio-muted);
	flex-shrink: 0;
}

.hio-ticket-list-header:hover {
	background: var(--hio-primary-tint);
}

.hio-ticket-list-header strong {
	font-size: 13.5px;
	color: var(--hio-ink);
}

.hio-front-cat {
	font-size: 11.5px;
	color: var(--hio-muted);
	background: #f0f0f2;
	padding: 3px 11px;
	border-radius: 20px;
	font-weight: 600;
}

.hio-badge-open { background: #fff6e5; color: #996800; }
.hio-badge-answered { background: #eafaf0; color: #00701a; }
.hio-badge-closed { background: #f0f0f2; color: #726f85; }

.hio-ticket-thread-body {
	padding: 16px;
	border-top: 1px solid var(--hio-border);
	background: #fbfbfd;
}

.hio-ticket-msg {
	position: relative;
	border-radius: 12px;
	padding: 10px 14px;
	margin-bottom: 10px;
	font-size: 13px;
	line-height: 1.7;
	max-width: 85%;
}

.hio-ticket-msg.is-user {
	background: #fff;
	border: 1px solid var(--hio-border);
	margin-left: auto;
	border-bottom-left-radius: 3px;
}

.hio-ticket-msg.is-admin {
	background: var(--hio-primary-light);
	margin-right: auto;
	border-bottom-right-radius: 3px;
}

.hio-ticket-msg-meta {
	font-size: 11px;
	color: var(--hio-muted);
	margin-bottom: 5px;
	font-weight: 600;
}

.hio-ticket-reply-form {
	margin-top: 6px;
}

.hio-ticket-reply-form textarea {
	width: 100%;
	border: 1px solid #dcd9ea;
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 13px;
	margin-bottom: 10px;
	font-family: inherit;
}

@media (max-width: 600px) {
	.hio-ticket-msg {
		max-width: 100%;
	}
}

@media (max-width: 600px) {
	.hio-front-wrap {
		max-width: 100%;
	}
}

/* ------------------------------------------------------------------
 * Jalali datepicker popup (front-end copy of the admin component)
 * ------------------------------------------------------------------ */

.hami-io-datepicker-popup {
	position: absolute;
	z-index: 100001;
	background: #fff;
	border: 1px solid #dcd9ea;
	border-radius: 10px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
	padding: 12px;
	width: 280px;
	direction: rtl;
	display: none;
	font-family: inherit;
}

.hami-io-datepicker-popup.open {
	display: block;
}

.hami-io-dp-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
	font-weight: 700;
}

.hami-io-dp-nav {
	cursor: pointer;
	background: #f3f2f7;
	border: none;
	border-radius: 6px;
	width: 26px;
	height: 26px;
	font-size: 14px;
	line-height: 1;
}

.hami-io-dp-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	text-align: center;
	font-size: 12px;
}

.hami-io-dp-weekday {
	font-weight: 700;
	color: #7e3ff2;
	padding: 4px 0;
}

.hami-io-dp-day {
	padding: 6px 0;
	border-radius: 6px;
	cursor: pointer;
}

.hami-io-dp-day:hover {
	background: #ede6fd;
}

.hami-io-dp-day.hami-io-dp-today {
	border: 1px solid #7e3ff2;
}

.hami-io-dp-day.hami-io-dp-empty {
	cursor: default;
}

/* ------------------------------------------------------------------
 * Customer portal shell (sidebar + content)
 * ------------------------------------------------------------------ */

.hio-portal {
	display: block;
	max-width: 1500px;
	margin: 0 auto;
	direction: rtl;
	font-family: inherit;
	background: #f6f6fb !important;
	padding: 20px !important;
	border-radius: 16px !important;
	position: relative;
}

.hio-portal * {
	box-sizing: border-box;
}

/* Sidebar is always an off-canvas drawer (desktop and mobile alike) — closed
 * by default, toggled via the hamburger button. */
.hio-portal-sidebar {
	background: #fff !important;
	border: 1px solid #ececf3 !important;
	border-radius: 0 !important;
	overflow-y: auto;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 280px;
	max-width: 85vw;
	z-index: 100050;
	transform: translateX(100%);
	transition: transform 0.25s ease;
	box-shadow: -8px 0 24px rgba(24, 18, 52, 0.12);
}

.hio-portal-sidebar.is-open {
	transform: translateX(0);
}

.hio-portal-sidebar-backdrop {
	display: none;
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	background: rgba(20, 16, 36, 0.45);
	z-index: 100040;
}

.hio-portal-sidebar-backdrop.is-open {
	display: block;
}

.hio-portal-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: #7e3ff2 !important;
	color: #fff !important;
	border: none !important;
	border-radius: 10px !important;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(126, 63, 242, 0.25);
	margin-bottom: 16px;
	position: -webkit-sticky;
	position: sticky;
	top: 12px;
	z-index: 100060;
}

.hio-portal-menu-toggle .dashicons {
	font-size: 22px;
	width: 22px;
	height: 22px;
}

.hio-portal-menu-toggle:hover {
	background: #6c2fe0 !important;
}

/* Hidden (not removed) while the drawer is open — the button's own
 * sticky positioning is what let it visually sit on top of the open
 * sidebar once the page was scrolled; visibility:hidden keeps its
 * layout space (avoiding a reflow jump) while making it non-interactive
 * and invisible, and the backdrop click / Escape key already provide a
 * way to close the drawer without it. */
.hio-portal-menu-toggle.is-hidden-while-open {
	visibility: hidden;
	pointer-events: none;
}

.hio-portal-sidebar-close {
	position: absolute;
	top: 14px;
	left: 14px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--hio-bg-soft, #f7f6fb);
	border: none;
	border-radius: 8px;
	color: var(--hio-muted, #8b81a8);
	cursor: pointer;
}

.hio-portal-sidebar-close:hover {
	background: #ece9f7;
	color: var(--hio-primary, #7e3ff2);
}

.hio-portal-user {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 22px 14px;
	background: linear-gradient(135deg, #7e3ff2, #6c2fe0);
	color: #fff;
	text-align: center;
	font-weight: 700;
}

.hio-portal-user .dashicons {
	font-size: 34px;
	width: 34px;
	height: 34px;
}

.hio-portal-nav {
	display: flex;
	flex-direction: column;
	padding: 8px;
}

.hio-portal-nav-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 14px 12px 6px;
	font-size: 11px;
	font-weight: 700;
	color: #9c96b3;
	letter-spacing: 0.02em;
	background: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
	text-align: right;
}

.hio-portal-nav-toggle-icon {
	font-size: 15px;
	width: 15px;
	height: 15px;
	transition: transform 0.15s;
}

.hio-portal-nav-toggle-icon.is-open {
	transform: rotate(180deg);
}

.hio-portal-nav-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	color: #3c3c4b;
	text-decoration: none;
	font-size: 13px;
	transition: background 0.15s, color 0.15s;
}

.hio-portal-nav-item .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.hio-portal-nav-item:hover {
	background: #f6f5fb;
}

.hio-portal-nav-item.is-active {
	background: #ede6fd;
	color: #7e3ff2;
	font-weight: 700;
}

.hio-portal-nav-item.hio-portal-logout {
	margin-top: 8px;
	border-top: 1px solid #eee;
	padding-top: 14px;
	color: #d63638;
}

.hio-portal-current-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	margin-right: auto;
	border-radius: 999px;
	background: #d63638;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.hio-front-count {
	display: inline-block;
	background: #7e3ff2;
	color: #fff;
	font-size: 12px;
	border-radius: 20px;
	padding: 2px 10px;
	margin-right: 6px;
}

/* Order/invoice cards inside the portal */
.hio-portal-order-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.hio-portal-order-card {
	display: flex;
	align-items: center;
	gap: 14px;
	border: 1px solid #ececf3;
	border-radius: 10px;
	padding: 12px 14px;
	flex-wrap: wrap;
	background: #fff;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.hio-portal-order-card:hover {
	border-color: #ddd8f2;
	box-shadow: 0 2px 8px rgba(24, 18, 52, 0.05);
}

.hio-portal-order-thumb {
	width: 56px;
	height: 56px;
	border-radius: 8px;
	background: #f6f5fb;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}

.hio-portal-order-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hio-portal-order-thumb .dashicons {
	color: #b6b6c3;
}

.hio-portal-order-info {
	flex: 1;
	min-width: 160px;
}

.hio-portal-order-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
	flex-wrap: wrap;
}

.hio-portal-order-meta {
	font-size: 12px;
	color: #726f85;
	margin-top: 4px;
}

.hio-portal-order-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

/* Buttons */
.hio-front-btn-secondary {
	background: var(--hio-primary-tint) !important;
	color: #4b3d75 !important;
	border: 1px solid var(--hio-border-strong) !important;
	box-shadow: none !important;
}

.hio-front-btn-secondary:hover {
	background: #eee9fc !important;
	border-color: #c9c0ea !important;
	box-shadow: none !important;
}

.hio-front-btn-danger {
	background: var(--hio-danger) !important;
	box-shadow: 0 2px 6px rgba(214, 54, 56, 0.25) !important;
}

.hio-front-btn-danger:hover {
	background: var(--hio-danger-dark) !important;
	box-shadow: 0 4px 12px rgba(214, 54, 56, 0.32) !important;
}

.hio-front-btn-success {
	background: #0a8a2e !important;
	box-shadow: 0 2px 6px rgba(10, 138, 46, 0.25) !important;
}

.hio-front-btn-success:hover {
	background: #087024 !important;
	box-shadow: 0 4px 12px rgba(10, 138, 46, 0.32) !important;
}

.hio-front-btn-sm {
	padding: 7px 14px !important;
	font-size: 12px !important;
}

.hio-portal-order-actions .hio-front-btn {
	padding: 7px 14px;
	font-size: 12px;
}

/* New-order form: a compact single row per product — every field has
 * a small label above it (so it never reads as an unlabeled jumble),
 * but the whole row stays visually tight and horizontal rather than
 * each field taking its own stacked block. */
.hio-portal-product-row {
	border: 1px solid var(--hio-border, #ececf3);
	border-radius: var(--hio-radius-md, 12px);
	padding: 10px 12px;
	margin-bottom: 10px;
	background: #f1f0f5;
}

.hio-product-row-compact {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	flex-wrap: wrap;
}

.hio-product-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.hio-product-field label {
	font-size: 10.5px;
	font-weight: 600;
	color: var(--hio-muted, #726f85);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Name/price give up width to qty/discount, which need it more (a
 * quantity or percent value is short but was previously as cramped as
 * the longer fields next to it). */
.hio-product-field-img { flex: none; }
.hio-product-field-name { flex: 1 1 100px; min-width: 80px; }
.hio-product-field-price { flex: 1 1 80px; min-width: 70px; }
.hio-product-field-qty { flex: 0 1 68px; min-width: 60px; }
.hio-product-field-disctype { flex: 0 1 112px; min-width: 100px; }
.hio-product-field-discvalue { flex: 0 1 95px; min-width: 85px; }
.hio-product-field-total { flex: 0 1 110px; min-width: 95px; }

.hio-product-field input,
.hio-product-field select {
	border: 1px solid #dcd9ea;
	border-radius: 7px;
	padding: 0 9px;
	font-size: 12.5px;
	background: #fff;
	font-family: inherit;
	width: 100%;
	height: 34px;
	box-sizing: border-box;
	transition: border-color 0.15s;
}

.hio-product-field input:focus,
.hio-product-field select:focus {
	outline: none;
	border-color: #9c7ff0;
}

.hio-product-field input:disabled {
	background: #f1f0f5;
	color: #a8a5b8;
}

.hio-product-field-img .hio-portal-image-preview {
	width: 34px;
	height: 34px;
	border-radius: 7px;
	background: #fff;
	border: 1px dashed #c9c9d6;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	cursor: pointer;
	transition: border-color 0.15s;
}

.hio-product-field-img .hio-portal-image-preview:hover {
	border-color: #9c7ff0;
}

.hio-product-field-img .hio-portal-image-preview .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
	color: var(--hio-muted, #a8a5b8);
	pointer-events: none;
}

.hio-product-field-img .hio-portal-image-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.hio-product-line-total {
	height: 34px;
	display: flex;
	align-items: center;
	padding: 0 9px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--hio-primary, #7e3ff2);
	background: var(--hio-primary-tint, #f6f4fd);
	border-radius: 7px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hio-portal-remove-product-btn {
	width: 34px;
	height: 34px;
	border-radius: 7px;
	border: none;
	background: var(--hio-red-tint, #fce9e9);
	color: var(--hio-red, #c22a2b);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	transition: background 0.15s;
}

.hio-portal-remove-product-btn:hover {
	background: var(--hio-red, #c22a2b);
	color: #fff;
}

/* Below this width, the 7-field row (image/name/price/qty/discount
 * type/discount value/total) can't fit even 3-4 fields per line
 * cleanly — instead of letting flex-wrap break them unpredictably,
 * force a clean, predictable 2-per-row grid. The image+remove button
 * get their own full-width top row since they're not label/value
 * pairs like the rest. */
@media (max-width: 560px) {
	.hio-product-row-compact {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		align-items: stretch;
	}
	.hio-product-field-img {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: center;
		gap: 10px;
	}
	.hio-product-field-img label {
		display: none;
	}
	.hio-product-field-name,
	.hio-product-field-price,
	.hio-product-field-qty,
	.hio-product-field-disctype,
	.hio-product-field-discvalue,
	.hio-product-field-total {
		flex: none;
		min-width: 0;
		width: 100%;
	}
	.hio-portal-remove-product-btn {
		grid-column: 1 / -1;
		width: 100%;
	}
}

/* Generic image-preview base (also used by the receipt-upload row and
 * the product-catalog cards) — the compact rule above overrides size
 * specifically within a product row. */
.hio-portal-image-preview {
	width: 80px;
	height: 80px;
	border-radius: 10px;
	background: #f3f2f7;
	border: 1px dashed #c9c9d6;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}

.hio-portal-image-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Simple image-picker layout — used by the receipt-upload row and the
 * product-catalog's create/edit modal (a single image + button, not
 * the compact multi-field product row above). */
.hio-portal-image-picker {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.hio-product-row-image {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	flex: none;
}


.hio-portal-radio-group {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.hio-portal-radio-group label {
	display: flex;
	align-items: center;
	gap: 6px;
	background: #f6f5fb;
	border: 1px solid #ddd8f5;
	border-radius: 8px;
	padding: 8px 14px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 400;
}

.hio-portal-time-group {
	display: flex;
	align-items: center;
	gap: 6px;
}

.hio-portal-time-group select {
	width: 80px;
}

/* About tab */
.hio-front-about {
	text-align: center;
}

.hio-front-about-icon {
	font-size: 40px;
	width: 40px;
	height: 40px;
	color: #7e3ff2;
}

/* Responsive: stack sidebar above content on narrow screens */
@media (max-width: 782px) {
	.hio-portal {
		padding: 10px;
		border-radius: 10px;
	}

	.hio-portal-sidebar {
		width: 260px;
	}

	.hio-portal-nav-item.hio-portal-logout {
		border-top: none;
		margin-top: 0;
	}

	.hio-portal-order-card {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ------------------------------------------------------------------
 * Portal: multi-product order rows, invoice item rows, filter bar
 * ------------------------------------------------------------------ */

.hio-portal-products {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 10px;
}

.hio-portal-invoice-row {
	display: grid;
	grid-template-columns: 2fr 1fr 1.2fr 1.4fr 1fr auto;
	gap: 8px;
	align-items: center;
	margin-bottom: 10px;
	border: 1px solid #ececf3;
	border-radius: 8px;
	padding: 10px;
	background: #fbfbfc;
}

.hio-portal-invoice-row input,
.hio-portal-invoice-row select {
	border: 1px solid #dcd9ea;
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 13px;
	width: 100%;
}

.hio-portal-filter-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.hio-portal-filter-bar select {
	border: 1px solid #dcd9ea;
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 13px;
	background: #fbfbfc;
}

.hio-portal-search-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
	padding: 12px 16px;
	background: #f9f8fd;
	border: 1px solid #ececf3;
	border-radius: 12px;
	flex-wrap: wrap;
}

.hio-portal-search-bar .dashicons {
	color: #9c7ff0;
	flex: none;
}

.hio-portal-search-bar input[type="text"] {
	flex: 1 1 240px;
	min-width: 160px;
	border: 1px solid #dcd9ea !important;
	border-radius: 8px !important;
	padding: 9px 12px !important;
	font-size: 13.5px;
	background: #fff !important;
}

.hio-portal-search-bar input[type="text"]:focus {
	outline: none;
	border-color: #9c7ff0 !important;
}

.hio-api-endpoint-code,
.hio-api-key-code {
	display: inline-block;
	background: #f4f2fb;
	border: 1px solid #e4e1ed;
	border-radius: 6px;
	padding: 4px 10px;
	font-size: 12.5px;
	font-family: monospace;
	color: #4b3f7a;
	word-break: break-all;
}

.hio-api-reveal-box {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	background: #f4f2fb;
	border: 1px solid #e4e1ed;
	border-radius: 8px;
	padding: 12px 14px;
	margin: 14px 0;
}

.hio-api-reveal-box code {
	flex: 1 1 auto;
	min-width: 0;
	word-break: break-all;
	font-family: monospace;
	font-size: 13px;
	color: #4b3f7a;
}

@media (max-width: 600px) {
	.hio-portal-invoice-row {
		grid-template-columns: 1fr 1fr;
	}
}

/* ------------------------------------------------------------------
 * Portal: list header, date filters, bulk selection bar
 * ------------------------------------------------------------------ */

.hio-portal-list-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 6px;
}

.hio-portal-filter-date {
	border: 1px solid #dcd9ea;
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 13px;
	background: #fbfbfc;
	width: 130px;
	cursor: pointer;
}

.hio-portal-bulk-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	background: #f6f5fb;
	border: 1px solid #e2ddfa;
	border-radius: 8px;
	padding: 10px 14px;
	margin-bottom: 12px;
}

.hio-portal-select-all-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.hio-portal-bulk-bar select {
	border: 1px solid #dcd9ea;
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 13px;
	background: #fff;
}

.hio-portal-order-checkbox {
	display: flex;
	align-items: center;
	padding-left: 4px;
}

.hio-portal-order-card {
	position: relative;
}

/* ------------------------------------------------------------------
 * Portal: order table (columns), settings accordion, modals, quickview
 * ------------------------------------------------------------------ */

.hio-portal-list-header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.hio-portal-settings-accordion {
	background: #f6f5fb;
	border: 1px solid #e2ddfa;
	border-radius: 8px;
	padding: 14px 16px;
	margin-bottom: 16px;
}

.hio-portal-settings-accordion h3 {
	margin: 0 0 10px;
	font-size: 14px;
}

.hio-portal-settings-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

.hio-portal-checkbox-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	background: #fff;
	border: 1px solid #e2ddfa;
	border-radius: 8px;
	padding: 7px 12px;
	cursor: pointer;
}

/* Table */
.hio-portal-table-wrap {
	overflow-x: auto;
}

.hio-portal-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 8px;
	font-size: 13px;
}

.hio-portal-table thead th {
	text-align: right;
	font-size: 12px;
	color: #726f85;
	font-weight: 700;
	padding: 0 10px 8px;
	white-space: nowrap;
}

.hio-portal-table thead th.hio-col-select {
	width: 30px;
}

.hio-portal-table tbody tr {
	background: #fff;
}

.hio-portal-table tbody td {
	padding: 10px;
	vertical-align: middle;
	border-top: 1px solid #c9c9d6;
	border-bottom: 1px solid #c9c9d6;
	border-left: 1px solid #c9c9d6;
	border-right: 1px solid #c9c9d6;
}

.hio-portal-table tbody td:first-child {
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
}

.hio-portal-table tbody td:last-child {
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
}

.hio-portal-table-thumb {
	width: 120px;
	height: 120px;
	border-radius: 6px;
	object-fit: cover;
}

.hio-portal-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.hio-portal-actions .hio-front-btn {
	padding: 6px 12px;
	font-size: 12px;
}

/* Mobile: stack table as cards using data-label */
@media (max-width: 782px) {
	.hio-portal-table thead {
		display: none;
	}
	.hio-portal-table, .hio-portal-table tbody, .hio-portal-table tr, .hio-portal-table td {
		display: block;
		width: 100%;
	}
	.hio-portal-table tr {
		margin-bottom: 12px;
		border-radius: 8px;
		border: 1px solid #c9c9d6;
		padding: 8px 0;
	}
	.hio-portal-table td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border: none !important;
		padding: 6px 12px;
		text-align: left;
	}
	.hio-portal-table td[data-label]::before {
		content: attr(data-label);
		font-weight: 700;
		color: #726f85;
		font-size: 12px;
		margin-left: 10px;
	}
	.hio-portal-table td.hio-col-select {
		justify-content: flex-start;
	}
	.hio-portal-table td.hio-portal-actions {
		justify-content: flex-start;
	}
}

/* Modals */
.hio-portal-modal-overlay {
	display: none;
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	background: rgba(20, 16, 36, 0.55);
	backdrop-filter: blur(2px);
	z-index: 100000;
	align-items: center;
	justify-content: center;
	padding: 20px;
	animation: hioFadeIn 0.15s ease;
}

.hio-portal-modal-overlay.open {
	display: flex;
}

@keyframes hioFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes hioModalIn {
	from { opacity: 0; transform: translateY(10px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

.hio-portal-modal {
	background: #fff;
	border-radius: var(--hio-radius-md);
	padding: 0;
	max-width: 560px;
	width: 100%;
	max-height: 88vh;
	overflow-y: auto;
	position: relative;
	direction: rtl;
	box-shadow: var(--hio-shadow-lg);
	animation: hioModalIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hio-portal-modal.hio-portal-modal-wide {
	max-width: 760px;
}

.hio-portal-modal > h2 {
	margin: 0;
	padding: 18px 54px 16px 24px;
	font-size: 16px;
	font-weight: 700;
	color: var(--hio-ink);
	border-bottom: 1px solid var(--hio-border);
	background: var(--hio-primary-tint);
	border-radius: var(--hio-radius-md) var(--hio-radius-md) 0 0;
}

.hio-portal-modal > *:not(h2):not(.hio-portal-modal-close) {
	margin-right: 24px;
	margin-left: 24px;
	margin-bottom: 24px;
}
.hio-portal-modal > h2 + * {
	margin-top: 20px;
}

.hio-portal-modal-close {
	position: absolute !important;
	top: 14px !important;
	left: 14px !important;
	right: auto !important;
	margin: 0 !important;
	float: none !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: #fff !important;
	border: 1px solid var(--hio-border) !important;
	border-radius: 50% !important;
	width: 32px !important;
	height: 32px !important;
	min-width: 32px;
	padding: 0 !important;
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	color: var(--hio-muted);
	box-shadow: 0 1px 3px rgba(24, 18, 52, 0.1);
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	z-index: 5;
}

.hio-portal-modal-close:hover {
	background: #fdecec;
	border-color: #f3c7c7;
	color: var(--hio-danger);
}

/* Copyable-link display — used by every "here's a link, share it"
 * popup (payment links, completion links). A distinct card so the
 * link itself reads as the one important thing on the screen. */
.hio-portal-link-box {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--hio-primary-tint);
	border: 1px solid var(--hio-border-strong);
	border-radius: var(--hio-radius-sm);
	padding: 10px 10px 10px 14px;
	margin-bottom: 4px;
}

.hio-portal-link-box input {
	flex: 1;
	min-width: 0;
	border: none !important;
	background: none !important;
	font-size: 13px !important;
	color: var(--hio-ink-soft);
	direction: ltr;
	text-align: left;
	padding: 4px 0 !important;
}

.hio-portal-link-box input:focus {
	outline: none;
}

.hio-portal-link-box .hio-front-btn {
	flex: none;
	white-space: nowrap;
}

.hio-portal-amount-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: var(--hio-primary-tint);
	border: 1px solid var(--hio-border-strong);
	border-radius: var(--hio-radius-sm);
	padding: 12px 16px;
	margin-bottom: 14px;
}

.hio-portal-amount-banner-label {
	font-size: 12.5px;
	color: var(--hio-muted);
	font-weight: 600;
}

.hio-portal-amount-banner-value {
	font-size: 17px;
	font-weight: 700;
	color: var(--hio-primary);
}

/* Quick view rows */
.hio-portal-qv-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid #f0f0f2;
	font-size: 13px;
}

.hio-portal-qv-label {
	color: #726f85;
	font-weight: 600;
	flex-shrink: 0;
}

.hio-portal-qv-value {
	text-align: left;
}

.hio-portal-qv-images {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.hio-portal-qv-image {
	width: 128px;
	height: 128px;
	border-radius: 8px;
	object-fit: cover;
}

.hio-track-final-photo {
	margin-bottom: 16px;
}

.hio-track-final-photo .description {
	margin-bottom: 8px;
}

.hio-track-final-photo img {
	width: 100%;
	max-width: 360px;
	border-radius: 10px;
	display: block;
}

.hio-portal-qv-image-single {
	width: 100%;
	height: auto;
	max-height: 440px;
	object-fit: contain;
	margin-bottom: 14px;
}

.hio-portal-qv-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #f0f0f2;
}

.hio-portal-qv-actions .hio-front-btn {
	padding: 8px 16px;
	font-size: 13px;
}

/* Invoice settings media grid */
.hio-portal-media-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 10px;
}

.hio-portal-media-field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
}

.hio-portal-media-field .hio-portal-image-preview {
	width: 80px;
	height: 80px;
	margin-bottom: 8px;
}

@media (max-width: 600px) {
	.hio-portal-media-grid {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------
 * Portal: in-page sub-tabs (e.g. sale vs. proforma invoices)
 * ------------------------------------------------------------------ */

.hio-portal-sub-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
	border-bottom: 1px solid #eee;
	flex-wrap: wrap;
}

.hio-portal-sub-tab {
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	color: #726f85;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}

.hio-portal-sub-tab:hover {
	color: #7e3ff2;
}

.hio-portal-sub-tab.is-active {
	color: #7e3ff2;
	border-bottom-color: #7e3ff2;
}

/* Remaining-amount-due highlight in the new-order form */
.hio-portal-amount-due {
	color: #d63638;
	font-weight: 700;
}

.hio-portal-order-total {
	font-size: 15px;
	font-weight: 700;
	color: #242424;
}

.hio-portal-report-summary {
	font-size: 24px;
	font-weight: 700;
	color: var(--hio-primary, #7e3ff2);
	margin: 6px 0 14px;
}

/* ------------------------------------------------------------------
 * Portal: pagination controls
 * ------------------------------------------------------------------ */

.hio-portal-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid #f0f0f2;
}

.hio-portal-pagination-info {
	font-size: 13px;
	color: #726f85;
}

/* ------------------------------------------------------------------
 * Portal: full-resolution image lightbox
 * ------------------------------------------------------------------ */

.hio-portal-image-lightbox {
	display: none;
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	background: rgba(10, 8, 20, 0.88);
	z-index: 999997;
	align-items: center;
	justify-content: center;
	padding: 24px;
	cursor: zoom-out;
}

.hio-portal-image-lightbox.open {
	display: flex;
}

.hio-portal-image-lightbox img {
	max-width: 100%;
	max-height: 100%;
	border-radius: 6px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.hio-portal-view-full-image {
	cursor: zoom-in;
}

/* ------------------------------------------------------------------
 * Portal: dashboard (overview tab) — hero card + quick-stat shortcuts
 * ------------------------------------------------------------------ */

.hio-dash-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	background: linear-gradient(135deg, var(--hio-primary), var(--hio-primary-dark));
	border-radius: var(--hio-radius-md);
	padding: 22px 26px;
	margin-bottom: 18px;
	box-shadow: 0 8px 24px rgba(126, 63, 242, 0.28);
	color: #fff;
}

.hio-dash-hero-info {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hio-dash-hero-greeting {
	font-size: 16px;
	font-weight: 700;
}

.hio-dash-hero-plan {
	font-size: 13px;
	opacity: 0.85;
}

.hio-dash-hero-days {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: rgba(255, 255, 255, 0.16);
	border-radius: var(--hio-radius-sm);
	padding: 10px 22px;
	min-width: 92px;
}

.hio-dash-hero-days-value {
	font-size: 24px;
	font-weight: 800;
	line-height: 1.2;
}

.hio-dash-hero-days-label {
	font-size: 11px;
	opacity: 0.85;
}

.hio-dash-hero-days-warning .hio-dash-hero-days-value {
	color: #ffe6a3;
}

.hio-dash-hero-days-danger {
	background: rgba(255, 90, 90, 0.28);
}

.hio-dash-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin-bottom: 18px;
}

.hio-dash-stat-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	background: #fff;
	border: 1px solid var(--hio-border);
	border-radius: var(--hio-radius-sm);
	padding: 16px;
	text-decoration: none;
	box-shadow: var(--hio-shadow-sm);
	transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
	border-right: 3px solid transparent;
}

.hio-dash-stat-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--hio-shadow-md);
}

.hio-dash-stat-icon {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

.hio-dash-stat-value {
	font-size: 22px;
	font-weight: 800;
	color: var(--hio-ink);
}

.hio-dash-stat-label {
	font-size: 12px;
	color: var(--hio-muted);
	font-weight: 600;
}

.hio-dash-stat-blue { border-right-color: #3b82f6; }
.hio-dash-stat-blue .hio-dash-stat-icon { color: #3b82f6; }
.hio-dash-stat-amber { border-right-color: #d69e00; }
.hio-dash-stat-amber .hio-dash-stat-icon { color: #d69e00; }
.hio-dash-stat-red { border-right-color: #d63638; }
.hio-dash-stat-red .hio-dash-stat-icon { color: #d63638; }
.hio-dash-stat-green { border-right-color: #0a8a2e; }
.hio-dash-stat-green .hio-dash-stat-icon { color: #0a8a2e; }

/* ------------------------------------------------------------------
 * Portal: reports tab
 * ------------------------------------------------------------------ */

.hio-portal-report-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
}

.hio-portal-report-card {
	background: #f9f8fd;
	border: 1px solid #ececf3;
	border-radius: 10px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hio-report-card-clickable {
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.hio-report-card-clickable:hover {
	border-color: #cdbdf5;
	box-shadow: 0 4px 14px rgba(27, 21, 48, 0.08);
}

.hio-portal-report-card-success {
	background: #eefaf1;
	border-color: #cdeed7;
}

.hio-portal-report-card-warning {
	background: #fef6e9;
	border-color: #f5e0b4;
}

.hio-portal-report-card-label {
	font-size: 12px;
	color: #726f85;
	font-weight: 600;
}

.hio-portal-report-card-value {
	font-size: 20px;
	font-weight: 700;
	color: #241a3d;
}

.hio-portal-report-card-value-sm {
	font-size: 15px;
}

.hio-portal-report-card-sub {
	font-size: 12px;
	color: #726f85;
}

/* ------------------------------------------------------------------
 * Portal: Chart.js containers + report grid layout (reports tab)
 * ------------------------------------------------------------------ */

/* Applied directly to the drag-and-drop sortable wrapper itself (see
   initReportDragSort() in frontend.js) rather than a separate nested
   grid, so every chart — not just two of them — takes part in both
   the 2-column layout and the reordering. */
#hio-charts-sortable {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (min-width: 900px) {
	#hio-charts-sortable {
		grid-template-columns: 1fr 1fr;
	}
	/* The five "trend"-style charts (day-by-day line charts) stay
	   full-width even in the 2-column layout — they're wide enough
	   that squeezing them to half-width would make them hard to read. */
	#hio-charts-sortable > .hio-front-box:has(.hio-portal-chart-wrap-lg) {
		grid-column: 1 / -1;
	}
}

.hio-portal-chart-wrap {
	position: relative;
	height: 260px;
	margin-bottom: 16px;
}

.hio-portal-chart-wrap-lg {
	height: 320px;
}

/* ------------------------------------------------------------------
 * Portal: task board (3-column kanban)
 * ------------------------------------------------------------------ */

.hio-task-board {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	align-items: start;
}

@media (max-width: 900px) {
	.hio-task-board {
		grid-template-columns: 1fr;
	}
}

.hio-task-column {
	background: var(--hio-bg-soft);
	border: 1px solid var(--hio-border);
	border-radius: var(--hio-radius-md);
	padding: 12px;
	border-top: 3px solid var(--hio-border-strong);
}

.hio-task-col-pending { border-top-color: #d69e00; }
.hio-task-col-progress { border-top-color: #1a5fb4; }
.hio-task-col-done { border-top-color: #0a8a2e; }

.hio-task-column-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 6px 12px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--hio-ink-soft);
}

.hio-task-column-count {
	background: #fff;
	border: 1px solid var(--hio-border);
	border-radius: 20px;
	min-width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11.5px;
	padding: 0 6px;
}

.hio-task-column-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.hio-task-column-empty {
	font-size: 12px;
	color: var(--hio-muted);
	text-align: center;
	padding: 18px 8px;
}

.hio-task-card {
	background: #fff;
	border: 1px solid var(--hio-border);
	border-radius: var(--hio-radius-sm);
	padding: 12px 14px;
	transition: box-shadow 0.15s, border-color 0.15s;
}

.hio-task-card:hover {
	box-shadow: var(--hio-shadow-sm);
	border-color: var(--hio-border-strong);
}

.hio-task-card-due-soon {
	border-color: #f0d38a;
	background: #fffdf7;
}

.hio-task-card-overdue {
	border-color: #f0b8b8;
	background: #fffafa;
}

.hio-task-card-title {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--hio-ink);
	margin-bottom: 8px;
	line-height: 1.5;
}

.hio-task-card-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}

.hio-task-priority,
.hio-task-status {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 10px;
	border-radius: 20px;
}

.hio-task-priority-low { background: #f0f0f2; color: #726f85; }
.hio-task-priority-medium { background: #eef2ff; color: #3b4fd6; }
.hio-task-priority-high { background: #fce9e9; color: #c22a2b; }

.hio-task-status-pending { background: #fff6e5; color: #996800; }
.hio-task-status-in_progress { background: #eaf2fc; color: #1a5fb4; }
.hio-task-status-done { background: #eafaf0; color: #00701a; }
.hio-task-status-cancelled { background: #f0f0f2; color: #726f85; }

.hio-task-due {
	font-size: 11px;
	color: var(--hio-muted);
	font-weight: 600;
}

.hio-task-due-soon {
	color: #a15c00;
}

.hio-task-due-overdue {
	color: #c22a2b;
}

.hio-task-card .hio-front-btn {
	width: 100%;
	justify-content: center;
}

.hio-task-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.hio-task-archive-row {
	border: 1px solid var(--hio-border);
	border-radius: var(--hio-radius-sm);
	padding: 12px 16px;
	background: #fff;
}

.hio-task-archive-row strong {
	display: block;
	font-size: 13.5px;
	color: var(--hio-ink);
	margin-bottom: 8px;
}

/* ------------------------------------------------------------------
 * Portal: per-member AI monthly limit (team member edit form)
 * ------------------------------------------------------------------ */

.hio-ai-member-limit-row {
	background: var(--hio-bg-soft);
	border: 1px solid var(--hio-border);
	border-radius: var(--hio-radius-sm);
	padding: 14px 16px;
	margin-top: 14px;
}

.hio-ai-member-limit-header {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-bottom: 10px;
}

.hio-ai-member-limit-title {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--hio-ink-soft);
}

.hio-ai-member-limit-desc {
	font-size: 11.5px;
	color: var(--hio-muted);
}

.hio-ai-member-limit-controls {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.hio-ai-limit-has-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 400;
	white-space: nowrap;
}

.hio-ai-member-limit-controls .hio-ai-limit-value {
	width: 90px;
	border: 1px solid #dcd9ea;
	border-radius: 8px;
	padding: 7px 10px;
	font-size: 13px;
}

/* ------------------------------------------------------------------
 * Portal: customer repeat-recognition suggestion dropdown
 * ------------------------------------------------------------------ */

.hio-customer-suggest {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: 20;
	margin-top: 4px;
	background: #fff;
	border: 1px solid var(--hio-border-strong);
	border-radius: var(--hio-radius-sm);
	box-shadow: var(--hio-shadow-md);
	overflow: hidden;
}

.hio-customer-suggest-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	cursor: pointer;
	font-size: 12.5px;
	border-bottom: 1px solid #f1f0f7;
}

.hio-customer-suggest-item:last-child {
	border-bottom: none;
}

.hio-customer-suggest-item:hover {
	background: var(--hio-primary-tint);
}

.hio-customer-suggest-item strong {
	color: var(--hio-ink);
	flex: 1;
}

.hio-customer-suggest-item span {
	color: var(--hio-muted);
}

.hio-customer-suggest-count {
	background: var(--hio-primary-tint);
	color: var(--hio-primary);
	border-radius: 20px;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 700;
	flex: none;
}

/* ------------------------------------------------------------------
 * Portal: customer list — stats bar, toolbar, avatar row-cards
 * ------------------------------------------------------------------ */

.hio-customer-stats-bar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	margin: 18px 0;
}

.hio-customer-stat {
	display: flex;
	align-items: center;
	gap: 12px;
	background: linear-gradient(160deg, var(--hio-primary-tint) 0%, #fff 70%);
	border: 1px solid var(--hio-border);
	border-radius: var(--hio-radius-md);
	padding: 14px 16px;
}

.hio-customer-stat-icon {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: #fff;
	color: var(--hio-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	box-shadow: var(--hio-shadow-sm);
}

.hio-customer-stat-value {
	display: block;
	font-size: 18px;
	font-weight: 800;
	color: var(--hio-ink);
	line-height: 1.3;
}

.hio-customer-stat-label {
	display: block;
	font-size: 11.5px;
	color: var(--hio-muted);
	font-weight: 600;
}

.hio-customer-toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	background: var(--hio-bg-soft);
	border: 1px solid var(--hio-border);
	border-radius: var(--hio-radius-md);
	padding: 10px;
	margin-bottom: 8px;
}

.hio-customer-toolbar-search {
	flex: 1 1 220px;
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--hio-border);
	border-radius: var(--hio-radius-sm);
	padding: 8px 12px;
}

.hio-customer-toolbar-search .dashicons {
	color: var(--hio-muted);
	font-size: 17px;
	flex: none;
}

.hio-customer-toolbar-search input {
	border: none !important;
	background: none !important;
	flex: 1;
	font-size: 13.5px !important;
	padding: 0 !important;
}

.hio-customer-toolbar-search input:focus {
	outline: none;
}

.hio-customer-toolbar-select {
	border: 1px solid var(--hio-border);
	border-radius: var(--hio-radius-sm);
	padding: 8px 12px;
	font-size: 13px;
	background: #fff;
	flex: 1 1 160px;
}

.hio-customer-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 4px;
}

/* CSS Grid (not flex) here deliberately — every row shares the exact
 * same column widths, so the phone/count/amount/date/button columns
 * stay perfectly aligned down the whole list regardless of how long
 * any one customer's name happens to be, instead of each row's
 * flexible content pushing its neighbours around independently. */
.hio-customer-row {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr) 90px 130px 110px minmax(190px, auto);
	align-items: center;
	gap: 14px;
	background: #fff;
	border: 1px solid var(--hio-border);
	border-radius: var(--hio-radius-md);
	padding: 14px 16px;
	transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.hio-customer-row:hover {
	box-shadow: var(--hio-shadow-md);
	border-color: var(--hio-border-strong);
	transform: translateY(-1px);
}

.hio-customer-row-head {
	background: var(--hio-bg-soft);
	border: none;
	padding: 8px 16px;
	box-shadow: none;
}

.hio-customer-row-head:hover {
	box-shadow: none;
	transform: none;
}

.hio-customer-row-head span {
	font-size: 11.5px;
	font-weight: 700;
	color: var(--hio-muted);
}

.hio-customer-col-check {
	display: flex;
	align-items: center;
	justify-content: center;
}

.hio-customer-col-name {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.hio-customer-col-metric {
	font-size: 13px;
	font-weight: 700;
	color: var(--hio-ink);
	text-align: center;
}

.hio-customer-col-action {
	display: flex;
	justify-content: flex-end;
	flex-wrap: nowrap;
	gap: 6px;
}

.hio-customer-avatar {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 800;
	color: #fff;
}

.hio-avatar-violet { background: linear-gradient(135deg, #7e3ff2, #a385f7); }
.hio-avatar-blue   { background: linear-gradient(135deg, #3b82f6, #7cabfa); }
.hio-avatar-green  { background: linear-gradient(135deg, #0a8a2e, #4bbf6e); }
.hio-avatar-amber  { background: linear-gradient(135deg, #d69e00, #f0bf47); }
.hio-avatar-rose   { background: linear-gradient(135deg, #e0508a, #f088b3); }

.hio-customer-row-main {
	min-width: 0;
}

.hio-customer-row-name {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 14.5px;
}

.hio-customer-row-name strong {
	color: var(--hio-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hio-customer-row-phone {
	font-size: 12.5px;
	color: var(--hio-muted);
	margin-top: 2px;
	text-align: left;
}

.hio-customer-bulk-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	background: var(--hio-primary-tint);
	border: 1px solid var(--hio-border-strong);
	border-radius: var(--hio-radius-sm);
	padding: 10px 14px;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--hio-primary);
}

.hio-customer-bulk-bar-actions {
	display: flex;
	gap: 8px;
}

@media (max-width: 900px) {
	.hio-customer-row {
		display: grid;
		grid-template-columns: 22px 1fr auto;
		grid-template-areas:
			"check name action"
			"m1 m2 m3";
		align-items: center;
		row-gap: 10px;
		column-gap: 10px;
	}
	.hio-customer-row-head {
		display: none;
	}
	.hio-customer-col-check { grid-area: check; }
	.hio-customer-col-name { grid-area: name; min-width: 0; }
	.hio-customer-col-action { grid-area: action; }
	.hio-customer-col-metric {
		text-align: center;
		padding-top: 10px;
		border-top: 1px dashed var(--hio-border);
	}
	.hio-customer-col-metric-count { grid-area: m1; }
	.hio-customer-col-metric-value { grid-area: m2; }
	.hio-customer-col-metric-date { grid-area: m3; }
}

/* ------------------------------------------------------------------
 * Portal: checklist — template management list (dashboard tab) and
 * the tap-to-toggle popup opened from an order row. flex-wrap
 * throughout, same reasoning as the other card-based sections above.
 * ------------------------------------------------------------------ */

.hio-checklist-item-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 16px;
}

.hio-report-settings-checklist {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 8px 16px;
	margin-top: 6px;
}

.hio-report-settings-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 400;
	cursor: pointer;
}

.hio-checklist-item-row {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--hio-border, #ececf3);
	border-radius: var(--hio-radius-sm, 10px);
	padding: 10px 14px;
	background: #fff;
}

.hio-checklist-item-row .dashicons {
	color: var(--hio-primary, #7e3ff2);
	font-size: 18px;
	width: 18px;
	height: 18px;
	flex: none;
}

.hio-checklist-item-label {
	flex: 1;
	font-size: 13px;
	min-width: 0;
}

.hio-checklist-item-delete-btn {
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: none;
	background: var(--hio-red-tint, #fce9e9);
	color: var(--hio-red, #c22a2b);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hio-checklist-item-delete-btn:hover {
	background: var(--hio-red, #c22a2b);
	color: #fff;
}

/* Progress badge on the order row's own چک‌لیست button */
.hio-checklist-progress-badge {
	display: inline-block;
	margin-right: 4px;
	font-size: 11px;
	font-weight: 700;
	background: rgba(0, 0, 0, 0.08);
	border-radius: 999px;
	padding: 1px 7px;
}

/* Toggle popup */
.hio-checklist-toggle-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 14px;
}

.hio-checklist-toggle-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	text-align: right;
	border: 1px solid var(--hio-border, #ececf3);
	border-radius: var(--hio-radius-sm, 10px);
	padding: 12px 14px;
	background: #fbfbfd;
	cursor: pointer;
	font-family: inherit;
	font-size: 13.5px;
	color: var(--hio-ink, #1b1530);
	transition: background 0.15s, border-color 0.15s;
}

.hio-checklist-toggle-item .dashicons {
	flex: none;
	font-size: 20px;
	width: 20px;
	height: 20px;
	color: var(--hio-muted, #a8a5b8);
}

/* The actual "tap turns it green" behavior the feature is built
 * around. */
.hio-checklist-toggle-item.hio-checklist-toggle-checked {
	background: #e6f8ec;
	border-color: #b7e8c6;
	color: #0a7a34;
}

.hio-checklist-toggle-item.hio-checklist-toggle-checked .dashicons {
	color: #0a7a34;
}

.hio-messenger-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 14px;
}

.hio-messenger-item {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--hio-border, #ececf3);
	border-radius: var(--hio-radius-sm, 10px);
	padding: 12px 14px;
	background: #fbfbfd;
	text-decoration: none;
	color: var(--hio-ink, #1b1530);
	font-size: 13.5px;
	transition: background 0.15s, border-color 0.15s;
}

.hio-messenger-item:hover {
	background: var(--hio-primary-tint, #f6f4fd);
	border-color: #cdbdf5;
}

.hio-messenger-item .dashicons {
	flex: none;
	font-size: 20px;
	width: 20px;
	height: 20px;
	color: var(--hio-primary, #7e3ff2);
}

/* ------------------------------------------------------------------
 * Portal: activity log — flex-wrap rows, same reasoning as the
 * discount-code and product cards above.
 * ------------------------------------------------------------------ */

.hio-activity-log-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 16px;
}

.hio-activity-log-row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	border: 1px solid var(--hio-border);
	border-radius: var(--hio-radius-sm, 10px);
	padding: 12px 14px;
	background: #fff;
}

.hio-activity-log-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1 1 200px;
	min-width: 0;
}

.hio-activity-log-body span:first-child {
	font-size: 13px;
	color: var(--hio-ink, #1b1530);
}

.hio-activity-log-time {
	font-size: 11.5px;
	color: var(--hio-muted, #726f85);
}

/* ------------------------------------------------------------------
 * Portal: product catalog — auto-fit grid, no viewport breakpoint
 * needed (same reasoning as the discount cards above).
 * ------------------------------------------------------------------ */

.hio-product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(148px, 180px));
	gap: 16px;
	margin-top: 18px;
	/* Centers the last, partially-filled row instead of stretching it —
	 * matters a lot here since a small catalog (1-3 products) is the
	 * common case, not the exception. */
	justify-content: center;
}

.hio-product-card {
	border: 1px solid var(--hio-border, #ececf3);
	border-radius: var(--hio-radius-md, 12px);
	overflow: hidden;
	background: #fff;
	display: flex;
	flex-direction: column;
	box-shadow: 0 1px 3px rgba(27, 21, 48, 0.04);
	transition: box-shadow 0.15s, transform 0.15s;
}

.hio-product-card:hover {
	box-shadow: 0 10px 24px rgba(27, 21, 48, 0.1);
	transform: translateY(-2px);
}

.hio-product-card-img {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--hio-bg-soft, #f7f6fb);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.hio-product-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hio-product-card-img .dashicons {
	font-size: 28px;
	width: 28px;
	height: 28px;
	color: var(--hio-muted, #a8a5b8);
}

.hio-product-card-hover-actions {
	position: absolute;
	top: 6px;
	left: 6px;
	display: flex;
	gap: 4px;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.15s, transform 0.15s;
}

.hio-product-card:hover .hio-product-card-hover-actions,
.hio-product-card-hover-actions:focus-within {
	opacity: 1;
	transform: translateY(0);
}

.hio-product-icon-btn {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.92);
	color: var(--hio-ink, #1b1530);
	box-shadow: 0 2px 6px rgba(27, 21, 48, 0.18);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
}

.hio-product-icon-btn .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
	color: inherit;
}

.hio-product-icon-btn:hover {
	background: #fff;
}

.hio-product-icon-btn-danger:hover {
	background: var(--hio-red, #c22a2b);
	color: #fff;
}

.hio-product-card-body {
	padding: 10px 12px 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hio-product-card-body strong {
	font-size: 13px;
	font-weight: 600;
	color: var(--hio-ink, #1b1530);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hio-product-card-price {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--hio-primary, #7e3ff2);
}

.hio-product-card-no-price {
	font-size: 11px;
	color: var(--hio-muted, #a8a5b8);
}

.hio-product-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	padding: 48px 20px;
	color: var(--hio-muted, #726f85);
}

.hio-product-empty-state .dashicons {
	font-size: 40px;
	width: 40px;
	height: 40px;
	color: var(--hio-border-strong, #ddd8f2);
}

.hio-product-empty-state p {
	font-size: 13px;
	margin: 0;
}

.hio-product-catalog-search-wrap {
	position: relative;
	margin-bottom: 10px;
}

.hio-product-catalog-search-wrap input {
	width: 100%;
	border: 1px solid #dcd9ea;
	border-radius: 8px;
	padding: 9px 12px;
	font-size: 13px;
	font-family: inherit;
}

.hio-product-catalog-suggest {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: 20;
	margin-top: 4px;
	background: #fff;
	border: 1px solid var(--hio-border-strong, #dcd9ea);
	border-radius: 10px;
	box-shadow: var(--hio-shadow-md, 0 12px 28px rgba(27,21,48,.12));
	max-height: 260px;
	overflow-y: auto;
}

.hio-product-catalog-suggest-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	cursor: pointer;
	border-bottom: 1px solid #f1f0f7;
}

.hio-product-catalog-suggest-item:last-child {
	border-bottom: none;
}

.hio-product-catalog-suggest-item:hover {
	background: var(--hio-primary-tint, #efeafe);
}

.hio-product-catalog-suggest-group {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px 4px;
	font-weight: 700;
	font-size: 12px;
	color: #6b6485;
	background: #faf9fd;
}

.hio-product-catalog-suggest-group img,
.hio-product-catalog-suggest-group .dashicons {
	width: 22px;
	height: 22px;
}

.hio-product-catalog-suggest-variant {
	padding-right: 34px;
}

.hio-product-catalog-suggest-item.is-out-of-stock {
	opacity: 0.55;
	cursor: not-allowed;
}

.hio-product-catalog-suggest-item img {
	width: 32px;
	height: 32px;
	border-radius: 6px;
	object-fit: cover;
	flex: none;
}

.hio-product-catalog-suggest-item .dashicons {
	width: 32px;
	height: 32px;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--hio-bg-soft, #f7f6fb);
	border-radius: 6px;
	color: var(--hio-muted, #a8a5b8);
	flex: none;
}

.hio-product-catalog-suggest-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 2px;
}

.hio-product-catalog-suggest-name {
	font-size: 12.5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hio-product-catalog-suggest-stock {
	font-size: 10.5px;
	color: #d0342c;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hio-product-catalog-suggest-price {
	flex: none;
	font-size: 11px;
	font-weight: 700;
	color: var(--hio-primary, #7e3ff2);
}

/* ------------------------------------------------------------------
 * Portal: discount code cards — flex-wrap throughout on purpose
 * instead of a viewport media-query breakpoint. This section can sit
 * inside a narrower container than the browser viewport suggests
 * (theme/page-builder wrappers), so a "@media max-width:700px" rule
 * can simply never fire even though the table genuinely doesn't fit.
 * flex-wrap responds to the box's own available width regardless of
 * viewport size, so it degrades correctly either way.
 * ------------------------------------------------------------------ */

.hio-discount-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 12px;
}

.hio-discount-card {
	border: 1px solid var(--hio-border);
	border-radius: var(--hio-radius-md, 12px);
	padding: 14px 16px;
	background: #fff;
}

.hio-discount-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
}

.hio-discount-card-code {
	font-weight: 700;
	font-size: 15px;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.hio-discount-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 14px 0;
	padding: 12px 0;
	border-top: 1px dashed var(--hio-border);
	border-bottom: 1px dashed var(--hio-border);
}

.hio-discount-card-meta-item {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 90px;
}

.hio-discount-card-meta-item span {
	font-size: 11.5px;
	color: var(--hio-muted, #726f85);
	font-weight: 600;
}

.hio-discount-card-meta-item b {
	font-size: 13.5px;
	color: var(--hio-ink, #1b1530);
}

/* ------------------------------------------------------------------
 * Portal: customer badges + tag picker
 * ------------------------------------------------------------------ */

.hio-customer-badge {
	display: inline-flex;
	align-items: center;
	font-size: 10.5px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 20px;
	margin-inline-start: 5px;
}

.hio-customer-badge-new {
	background: var(--hio-primary-tint);
	color: var(--hio-primary);
}

.hio-customer-badge-inactive {
	background: #fce9e9;
	color: #c22a2b;
}

.hio-customer-badge-tag {
	background: #fff6e5;
	color: #996800;
}

.hio-customer-tags-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	background: var(--hio-bg-soft);
	border: 1px solid var(--hio-border);
	border-radius: var(--hio-radius-sm);
	padding: 12px 14px;
}

.hio-customer-tags-picker label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 500;
}

/* ------------------------------------------------------------------
 * Portal: loyalty program tier chips
 * ------------------------------------------------------------------ */

.hio-loyalty-tier-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}

.hio-loyalty-tier-chip {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}

.hio-loyalty-tier-chip small {
	font-weight: 500;
	opacity: 0.85;
	font-size: 11px;
}

.hio-loyalty-tier-chip button {
	background: rgba(255, 255, 255, 0.25);
	border: none;
	color: #fff;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	cursor: pointer;
	line-height: 1;
	font-size: 13px;
	padding: 0;
}

/* Show/hide password toggle — shared by every front-end password field
   (sign-up, login, account settings, etc.) that opts into the wrapper
   markup. */
.hio-password-wrap{position:relative !important;display:block;}
.hio-password-wrap input[type="password"],
.hio-password-wrap input[type="text"]{padding-left:38px !important;box-sizing:border-box !important;width:100% !important;}
.hio-password-wrap .hio-password-toggle{position:absolute !important;top:50% !important;left:8px !important;right:auto !important;transform:translateY(-50%) !important;z-index:2;}
.hio-password-toggle{position:absolute;top:50%;left:8px;transform:translateY(-50%);background:none;border:none;padding:4px;cursor:pointer;color:#6b7280;display:flex;align-items:center;justify-content:center;}
.hio-password-toggle:hover{color:#374151;}
.hio-password-toggle.is-visible{color:#4f46e5;}

/* Bookmark (⭐) toggle — shared across the whole team, gray outline by
   default, filled gold once bookmarked. */
.hio-col-bookmark{width:36px;text-align:center;}
.hio-portal-bookmark-btn{background:none;border:none;cursor:pointer;padding:4px;color:#c7c3d6;display:inline-flex;align-items:center;justify-content:center;transition:color .15s ease,transform .1s ease;}
.hio-portal-bookmark-btn:hover{color:#a79ee0;transform:scale(1.08);}
.hio-portal-bookmark-btn.is-bookmarked{color:#f0b100;}
.hio-portal-bookmark-btn.is-bookmarked svg path{fill:currentColor;}

/* "جدید" badge — shown once per viewer until their next refresh (see
   Hami_IO_DB::get_unseen_order_ids()/mark_orders_seen()). */
.hio-badge-new{display:inline-block;background:#16a34a;color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;margin-inline-start:6px;vertical-align:middle;}

/* Drag-and-drop reordering for report cards/charts (per-viewer order,
   see initReportDragSort() in frontend.js). */
.hio-sortable-item{cursor:grab;transition:opacity .15s ease,transform .15s ease;}
.hio-sortable-item:active{cursor:grabbing;}
.hio-sortable-item.is-dragging{opacity:.4;}

/* "X سفارش جدید داریم" popup (current-orders tab) — reuses the base
   .hio-portal-modal-overlay/.hio-portal-modal styling, just adds its
   own centered icon + text + button layout on top. */
.hio-new-order-popup-box{text-align:center;max-width:320px;padding:28px 24px;}
.hio-new-order-popup-icon{width:52px;height:52px;border-radius:50%;background:#f3f0fa;color:#7c5cfc;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
.hio-new-order-popup-text{font-size:16px;font-weight:700;color:#1b1530;margin:0 0 18px;}

/* ------------------------------------------------------------------
 * "دستیارِ دایرکت" — channel connection rows
 * ------------------------------------------------------------------ */
.hio-ig-channel-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid #ececf3;}
.hio-ig-channel-row:last-child{border-bottom:none;}
.hio-ig-channel-info{display:flex;flex-direction:column;gap:4px;min-width:140px;}
.hio-ig-channel-status{font-size:12px;color:#8b81a8;}
.hio-ig-channel-status.is-connected{color:#2f9e5b;font-weight:600;}
.hio-ig-bot-connect-form,.hio-ig-whatsapp-connect-form{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:1;}
.hio-ig-bot-token-input,.hio-ig-wa-phone-id-input,.hio-ig-wa-token-input{min-width:180px;flex:1;}

/* ------------------------------------------------------------------
 * "دستیارِ دایرکت" — conversations list + chat detail view
 * ------------------------------------------------------------------ */
.hio-ig-conv-badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;background:#f0edfa;color:#6a4fc9;}
.hio-ig-conv-badge.is-handoff{background:#fdecea;color:#c0392b;font-weight:600;}
.hio-ig-chat-box{margin-top:14px;max-height:420px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:14px;background:#f8f7fc;border-radius:10px;}
.hio-ig-chat-bubble{max-width:75%;padding:8px 12px;border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(24,18,52,0.08);}
.hio-ig-chat-bubble.is-customer{align-self:flex-start;background:#fff;}
.hio-ig-chat-bubble.is-bot{align-self:flex-end;background:#ede6fd;}
.hio-ig-chat-bubble.is-human{align-self:flex-end;background:#e3f3e9;}
.hio-ig-chat-sender{font-size:11px;color:#8b81a8;margin-bottom:3px;}
.hio-ig-chat-text{white-space:pre-wrap;word-break:break-word;font-size:13px;}

/* ------------------------------------------------------------------
 * Payment-link page — card-to-card info display
 * ------------------------------------------------------------------ */
.hio-paylink-c2c-box{background:#f8f7fc;border-radius:10px;padding:14px 16px;margin-bottom:14px;display:flex;flex-direction:column;gap:8px;}
.hio-paylink-c2c-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;}
.hio-paylink-c2c-row span{color:#8b81a8;}
.hio-paylink-c2c-row strong{font-weight:700;}

/* ------------------------------------------------------------------
 * نظرات مشتری — star rating widget
 * ------------------------------------------------------------------ */
.hio-review-stars{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:6px;font-size:34px;margin-top:10px;}
.hio-review-star{cursor:pointer;color:#e0dcee;transition:color .15s;}
.hio-review-star.is-filled,.hio-review-star:hover,.hio-review-star:hover ~ .hio-review-star{color:#f5b301;}

/* ------------------------------------------------------------------
 * پیگیری سفارش — step tracker
 * ------------------------------------------------------------------ */
.hio-track-stepper{display:flex;align-items:flex-start;justify-content:space-between;margin:16px 0 20px;position:relative;}
.hio-track-stepper::before{content:"";position:absolute;top:7px;right:8%;left:8%;height:2px;background:#e0dcee;z-index:0;}
.hio-track-step{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;}
.hio-track-step-dot{width:16px;height:16px;border-radius:50%;background:#e0dcee;border:2px solid #fff;box-shadow:0 0 0 2px #e0dcee;}
.hio-track-step.is-done .hio-track-step-dot{background:#7c5cfc;box-shadow:0 0 0 2px #7c5cfc;}
.hio-track-step.is-active .hio-track-step-dot{background:#fff;box-shadow:0 0 0 2px #7c5cfc;}
.hio-track-step-label{font-size:11px;color:#8b81a8;text-align:center;}
.hio-track-step.is-done .hio-track-step-label,.hio-track-step.is-active .hio-track-step-label{color:#1b1530;font-weight:700;}

/* ------------------------------------------------------------------
 * فروشگاه عمومی — public storefront grid
 * ------------------------------------------------------------------ */
.hio-storefront-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:14px;}
.hio-storefront-card{border:1px solid var(--hio-border,#e0dcee);border-radius:12px;overflow:hidden;background:#fff;}
.hio-storefront-card img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;}
.hio-storefront-card-noimg{width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:#f8f7fc;color:#c9c2e0;font-size:28px;}
.hio-storefront-card-body{padding:10px;}
.hio-storefront-card-name{font-size:13px;font-weight:700;margin-bottom:4px;}
.hio-storefront-card-price{font-size:12px;color:#7c5cfc;font-weight:700;}

/* ------------------------------------------------------------------
 * تعیینِ لوکیشن رویِ نقشه — location picker modal
 * ------------------------------------------------------------------ */
.hio-location-picker-modal{max-width:640px;width:92vw;}
#hio-location-picker-map{width:100%;height:360px;min-height:280px;border-radius:10px;overflow:hidden;position:relative;background:#eee;}
/* Leaflet's own CSS sets z-index on its internal panes/controls
   relative to #hio-location-picker-map itself — this only needs to sit
   correctly within the modal's own stacking context (z-index:100000 on
   .hio-portal-modal-overlay), which it does by default since it's a
   normal descendant, not a sibling needing its own z-index override. */
@media (max-width: 480px) {
	.hio-location-picker-modal{width:96vw;}
	#hio-location-picker-map{height:280px;}
}

/* ------------------------------------------------------------------
 * نظرات مشتری — page layout (desktop + mobile)
 * ------------------------------------------------------------------ */
.hio-review-time-range{display:flex;gap:8px;align-items:center;}
.hio-review-time-range input{max-width:80px;}
.hio-review-section-title{margin-top:24px;}
.hio-review-groups-list{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.hio-review-group-badge{background:#7c5cfc;cursor:default;}
.hio-review-group-delete{color:#fff;margin-inline-start:4px;text-decoration:none;font-weight:700;}
.hio-review-group-add-form{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;}
.hio-review-group-add-form input{max-width:220px;}
.hio-review-filters-row{display:flex;gap:10px;flex-wrap:wrap;}
.hio-review-comment-cell{max-width:260px;white-space:normal;word-break:break-word;}
.hio-review-actions-cell{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}

@media (max-width: 700px) {
	.hio-review-time-range,
	.hio-review-group-add-form,
	.hio-review-filters-row{width:100%;}
	.hio-review-group-add-form input,
	.hio-review-filters-row select{max-width:none;flex:1;min-width:120px;}
	.hio-review-comment-cell{max-width:none;text-align:right;}
	.hio-review-actions-cell{justify-content:flex-start;}
}

/* ------------------------------------------------------------------
 * راهنمای باشگاه مشتریان
 * ------------------------------------------------------------------ */
.hio-loyalty-guide-body h3{margin:18px 0 6px;font-size:14px;}
.hio-loyalty-guide-body h3:first-child{margin-top:0;}
.hio-loyalty-guide-body p{margin:0 0 8px;line-height:1.9;}
.hio-loyalty-guide-body ul{margin:0 0 8px;padding-inline-start:20px;}
.hio-loyalty-guide-body li{margin-bottom:6px;line-height:1.8;}

/* ------------------------------------------------------------------
 * پاپ‌آپ محصول — افزودنِ سایز/رنگ (desktop + mobile)
 * ------------------------------------------------------------------ */
.hio-product-variant-add-form{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;padding:14px;background:#f8f7fc;border-radius:var(--hio-radius-sm,10px);}
.hio-product-variant-add-form .hio-front-field{margin-bottom:0;}
.hio-pv-name{flex:1 1 160px;}
.hio-pv-stock-toggle{flex:0 0 100%;}
.hio-pv-stock{flex:0 0 110px;}
.hio-pv-price{flex:0 0 150px;}
.hio-pv-submit{flex:0 0 auto;}

@media (max-width: 640px) {
	.hio-product-variant-add-form{flex-direction:column;align-items:stretch;}
	.hio-pv-name,.hio-pv-stock,.hio-pv-price,.hio-pv-submit{flex:1 1 auto;}
	.hio-pv-submit{width:100%;}
}
.hio-product-variant-stock-edit{width:80px;}
.hio-product-variant-price-edit{width:110px;}
@media (max-width: 700px) {
	.hio-product-variant-stock-edit,
	.hio-product-variant-price-edit{width:100%;}
}