/**
 * Customer portal and VIP product layer.
 * Loaded only on account/VIP surfaces.
 */
.msh-account--digikala {
	--msh-portal-card: #fff;
	--msh-portal-muted: #667085;
	--msh-portal-soft: #f7f8fb;
	--msh-portal-line: color-mix(in srgb, var(--msh-border) 86%, #fff);
	grid-template-columns: minmax(220px, 258px) minmax(0, 1fr);
	gap: clamp(18px, 3vw, 32px);
}

.msh-account--digikala .msh-account-nav {
	padding: 10px;
	border-radius: 22px;
	box-shadow: 0 14px 44px rgba(11, 19, 43, .06);
}

.msh-account--digikala .msh-account-nav button {
	position: relative;
	min-height: 48px;
	border-radius: 14px;
	font-weight: 700;
	transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.msh-account--digikala .msh-account-nav button::after {
	position: absolute;
	inset-block: 12px;
	inset-inline-start: 3px;
	width: 3px;
	border-radius: 99px;
	background: var(--msh-gold);
	content: "";
	opacity: 0;
	transform: scaleY(.35);
	transition: opacity .18s ease, transform .18s ease;
}

.msh-account--digikala .msh-account-nav button.is-active {
	background: linear-gradient(135deg, var(--msh-navy), #172b58);
	box-shadow: 0 12px 26px rgba(11, 19, 43, .18);
}

.msh-account--digikala .msh-account-nav button.is-active::after {
	opacity: 1;
	transform: scaleY(1);
}

.msh-account-main {
	container-type: inline-size;
}

.msh-account--digikala .msh-account-panel {
	min-height: 440px;
	padding: clamp(18px, 3vw, 30px);
	border: 1px solid var(--msh-portal-line);
	border-radius: clamp(20px, 2vw, 28px);
	background: var(--msh-portal-card);
	box-shadow: 0 18px 55px rgba(11, 19, 43, .055);
}

.msh-account--digikala .msh-portal-heading {
	padding-bottom: 18px;
	border-bottom: 1px solid var(--msh-portal-line);
}

.msh-account--digikala .msh-portal-heading h2 {
	font-size: clamp(22px, 3vw, 31px);
}

.msh-client-summary {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin: 0 0 20px;
}

.msh-client-summary article {
	display: grid;
	grid-template-columns: 46px 1fr;
	grid-template-rows: auto auto;
	align-items: center;
	gap: 1px 12px;
	padding: 18px;
	border: 1px solid var(--msh-portal-line);
	border-radius: 18px;
	background: linear-gradient(145deg, #fff, var(--msh-portal-soft));
}

.msh-client-summary article > span {
	grid-row: 1 / 3;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border-radius: 15px;
	background: color-mix(in srgb, var(--msh-gold) 13%, #fff);
	color: var(--msh-navy);
}

.msh-client-summary strong {
	font-size: 25px;
	line-height: 1.15;
	color: var(--msh-navy);
}

.msh-client-summary small { color: var(--msh-portal-muted); }

.msh-account--digikala .msh-portal-stats > div {
	background: var(--msh-portal-soft);
	box-shadow: none;
}

.msh-vip-catalog {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin-top: 22px;
}

.msh-vip-card {
	display: flex;
	min-width: 0;
	flex-direction: column;
	padding: clamp(20px, 3vw, 28px);
	border: 1px solid var(--msh-portal-line);
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 14px 42px rgba(11, 19, 43, .06);
}

.msh-vip-card__head,
.msh-vip-card__footer,
.msh-client-service__top,
.msh-portfolio-card > header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.msh-vip-card__head > span {
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	border-radius: 16px;
	background: var(--msh-navy);
	color: var(--msh-gold);
}

.msh-vip-card__head b,
.msh-client-service__top span,
.msh-portfolio-card header span {
	padding: 6px 10px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--msh-gold) 13%, #fff);
	color: #755d10;
	font-size: 12px;
}

.msh-vip-card h3 { margin: 18px 0 7px; font-size: 22px; }
.msh-vip-card > p { margin: 0 0 9px; color: var(--msh-portal-muted); }
.msh-vip-card > small { color: #8a6e14; }
.msh-vip-card ul { display: grid; gap: 9px; margin: 20px 0 24px; padding: 0; list-style: none; }
.msh-vip-card li { display: flex; align-items: flex-start; gap: 8px; }
.msh-vip-card li svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 4px; color: #079455; }
.msh-vip-card__footer { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--msh-portal-line); }
.msh-vip-card__footer > div { display: flex; align-items: baseline; gap: 5px; }
.msh-vip-card__footer strong { font-size: 20px; color: var(--msh-navy); }
.msh-vip-card__footer span { color: var(--msh-portal-muted); font-size: 12px; }
.msh-vip-disclaimer { margin: 18px 0 0; padding: 14px 17px; border-radius: 14px; background: #fffaeb; color: #7a5d00; font-size: 13px; line-height: 1.9; }

.msh-client-services,
.msh-portfolio-list {
	display: grid;
	gap: 18px;
}

.msh-client-service,
.msh-portfolio-card,
.msh-portal-create,
.msh-asset-add {
	border: 1px solid var(--msh-portal-line);
	border-radius: 20px;
	background: #fff;
}

.msh-client-service { padding: clamp(18px, 3vw, 26px); }
.msh-client-service__top h3 { margin: 7px 0 0; }
.msh-client-service__top > b { color: var(--msh-navy); font-size: 25px; }
.msh-client-service .msh-progress { height: 8px; margin: 17px 0; overflow: hidden; border-radius: 99px; background: #edf0f5; }
.msh-client-service .msh-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--msh-gold), #f3d975); }
.msh-client-service dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.msh-client-service dl > div { padding: 12px; border-radius: 13px; background: var(--msh-portal-soft); }
.msh-client-service dt { color: var(--msh-portal-muted); font-size: 12px; }
.msh-client-service dd { margin: 4px 0 0; font-weight: 700; }
.msh-client-service .msh-text-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 18px; color: var(--msh-navy); font-weight: 700; text-decoration: none; }
.msh-client-service .msh-text-link svg { width: 18px; }

.msh-portfolio-intro {
	margin-bottom: 18px;
	padding: 20px;
	border-radius: 19px;
	background: linear-gradient(135deg, var(--msh-navy), #1a315f);
	color: #fff;
}
.msh-portfolio-intro h3 { margin: 3px 0 7px; color: #fff; }
.msh-portfolio-intro p:last-child { margin: 0; color: rgba(255,255,255,.74); }

.msh-portal-create,
.msh-asset-add { margin-bottom: 18px; overflow: clip; }
.msh-portal-create > summary,
.msh-asset-add > summary { padding: 16px 19px; cursor: pointer; color: var(--msh-navy); font-weight: 800; }
.msh-portal-create[open] > summary,
.msh-asset-add[open] > summary { border-bottom: 1px solid var(--msh-portal-line); background: var(--msh-portal-soft); }
.msh-portal-create form,
.msh-asset-add form { padding: 20px; }

.msh-portfolio-card { overflow: hidden; }
.msh-portfolio-card > header { padding: 22px; background: var(--msh-portal-soft); }
.msh-portfolio-card header h3 { margin: 7px 0 3px; }
.msh-portfolio-card header p { margin: 0; color: var(--msh-portal-muted); }
.msh-portfolio-card header > strong { direction: ltr; color: var(--msh-navy); font-size: clamp(20px, 3vw, 29px); white-space: nowrap; }
.msh-portfolio-card header > strong small { margin-inline-start: 4px; color: var(--msh-portal-muted); font-size: 12px; font-weight: 500; }
.msh-portfolio-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border-block: 1px solid var(--msh-portal-line); background: var(--msh-portal-line); }
.msh-portfolio-metrics > div { padding: 16px 20px; background: #fff; }
.msh-portfolio-metrics span { display: block; color: var(--msh-portal-muted); font-size: 12px; }
.msh-portfolio-metrics b { display: block; margin-top: 4px; color: var(--msh-navy); }
.msh-portfolio-metrics .is-positive { color: #067647; }
.msh-portfolio-metrics .is-negative { color: #b42318; }

.msh-asset-table { max-width: 100%; overflow-x: auto; }
.msh-asset-table table { width: 100%; min-width: 760px; border-collapse: collapse; }
.msh-asset-table th,
.msh-asset-table td { padding: 13px 15px; border-bottom: 1px solid var(--msh-portal-line); text-align: right; }
.msh-asset-table th { background: #fff; color: var(--msh-portal-muted); font-size: 12px; }
.msh-asset-table td strong,
.msh-asset-table td small { display: block; }
.msh-asset-table td small { color: var(--msh-portal-muted); }
.msh-inline-danger { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #fef3f2; color: #b42318; font-size: 20px; cursor: pointer; }

.msh-portfolio-notes { padding: 20px; }
.msh-portfolio-notes h4 { margin: 0 0 12px; }
.msh-portfolio-notes article { padding: 14px 16px; border-inline-start: 3px solid var(--msh-gold); background: var(--msh-portal-soft); }
.msh-portfolio-notes article + article { margin-top: 10px; }
.msh-portfolio-notes p { margin: 5px 0; }
.msh-portfolio-notes small { color: var(--msh-portal-muted); }

.msh-account--digikala .msh-field input,
.msh-account--digikala .msh-field select,
.msh-account--digikala .msh-field textarea {
	min-height: 48px;
	border-radius: 13px;
	background: #fff;
}

.msh-account--digikala .msh-button,
.msh-vip-catalog .msh-button {
	min-height: 46px;
	justify-content: center;
}

@container (max-width: 700px) {
	.msh-client-summary,
	.msh-vip-catalog,
	.msh-client-service dl,
	.msh-portfolio-metrics { grid-template-columns: 1fr; }
	.msh-vip-card__footer,
	.msh-portfolio-card > header { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 900px) {
	.msh-account--digikala { grid-template-columns: minmax(0, 1fr); }
	.msh-account--digikala .msh-account-nav {
		position: sticky;
		top: calc(var(--msh-header-height, 72px) + 6px);
		z-index: 20;
		display: flex;
		max-width: 100%;
		padding: 8px;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-snap-type: inline proximity;
		background: rgba(255,255,255,.94);
		backdrop-filter: blur(16px);
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.msh-account--digikala .msh-account-nav::-webkit-scrollbar { display: none; }
	.msh-account--digikala .msh-account-nav button {
		min-width: max-content;
		flex: 0 0 auto;
		scroll-snap-align: center;
	}
	.msh-account--digikala .msh-account-nav button::after { display: none; }
}

@media (max-width: 620px) {
	.msh-account--digikala .msh-account-panel { min-height: 360px; padding: 17px; border-radius: 20px; }
	.msh-account--digikala .msh-portal-heading { align-items: center; text-align: center; }
	.msh-account--digikala .msh-portal-heading > * { width: 100%; }
	.msh-client-summary { grid-template-columns: 1fr; }
	.msh-client-summary article { grid-template-columns: 42px 1fr; }
	.msh-vip-catalog { grid-template-columns: 1fr; }
	.msh-vip-card__footer { align-items: stretch; flex-direction: column; }
	.msh-vip-card__footer .msh-button { width: 100%; }
	.msh-client-service__top { align-items: flex-start; }
	.msh-client-service dl { grid-template-columns: 1fr; }
	.msh-portfolio-card > header { align-items: stretch; flex-direction: column; }
	.msh-portfolio-card header > strong { text-align: right; }
	.msh-portfolio-metrics { grid-template-columns: 1fr; }
	.msh-portal-create form > .msh-button,
	.msh-asset-add form > .msh-button,
	.msh-account-panel .msh-card-form > .msh-button { width: 100%; margin-inline: auto; }
}

@media (hover: hover) and (pointer: fine) {
	.msh-account--digikala .msh-account-nav button:not(.is-active):hover { background: var(--msh-portal-soft); color: var(--msh-navy); }
	.msh-vip-card:hover { border-color: color-mix(in srgb, var(--msh-gold) 45%, var(--msh-border)); box-shadow: 0 20px 56px rgba(11, 19, 43, .095); }
}

@media (hover: none), (pointer: coarse) {
	.msh-account--digikala .msh-account-nav button,
	.msh-vip-card,
	.msh-account--digikala .msh-button { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.msh-account--digikala *,
	.msh-account--digikala *::before,
	.msh-account--digikala *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.msh-asset-table td:last-child { display: flex; align-items: center; gap: 8px; }
.msh-asset-edit { position: relative; }
.msh-asset-edit > summary { padding: 6px 9px; border-radius: 9px; background: var(--msh-portal-soft); color: var(--msh-navy); cursor: pointer; font-size: 12px; font-weight: 700; list-style: none; }
.msh-asset-edit > summary::-webkit-details-marker { display: none; }
.msh-asset-edit[open] > form {
	position: absolute;
	z-index: 30;
	inset-inline-end: 0;
	width: min(310px, calc(100vw - 42px));
	display: grid;
	gap: 9px;
	padding: 15px;
	border: 1px solid var(--msh-portal-line);
	border-radius: 15px;
	background: #fff;
	box-shadow: 0 18px 54px rgba(11, 19, 43, .18);
}
.msh-asset-edit label { display: grid; gap: 4px; color: var(--msh-portal-muted); font-size: 11px; }
.msh-asset-edit input,
.msh-asset-edit textarea { width: 100%; min-height: 38px; border: 1px solid var(--msh-portal-line); border-radius: 9px; font: inherit; }
.msh-asset-edit .msh-button { width: 100%; min-height: 40px; }


/* Version 7.2: next-best-action journey card. */
.msh-journey-card {
	display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 18px;
	margin: 20px 0; padding: 20px; border: 1px solid var(--msh-portal-line); border-radius: 20px;
	background: linear-gradient(135deg, #fff 0%, #fbf8ec 100%); box-shadow: 0 14px 40px rgba(11,19,43,.055);
}
.msh-journey-card h3, .msh-journey-card p { margin: 0; }
.msh-journey-card h3 { margin-bottom: 5px; color: var(--msh-navy); font-size: 1rem; }
.msh-journey-card p:not(.msh-eyebrow) { color: var(--msh-portal-muted); font-size: 13px; line-height: 1.8; }
.msh-journey-card__progress { position: relative; display: grid; width: 68px; height: 68px; place-items: center; border-radius: 50%; background: conic-gradient(var(--msh-gold) var(--msh-profile-progress), #eceff3 0); }
.msh-journey-card__progress::before { content: ""; position: absolute; inset: 7px; border-radius: inherit; background: #fff; }
.msh-journey-card__progress strong { position: relative; z-index: 1; color: var(--msh-navy); font-size: 13px; }
.msh-journey-card__progress span { display: none; }
.msh-journey-card__action a, .msh-journey-card__action button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 0 16px; border: 1px solid var(--msh-gold); border-radius: 12px; background: var(--msh-gold); color: var(--msh-navy); font: inherit; font-size: 13px; font-weight: 800; text-decoration: none; cursor: pointer; }
@media (max-width: 620px) { .msh-journey-card { grid-template-columns: 68px minmax(0,1fr); } .msh-journey-card__action { grid-column: 1 / -1; } .msh-journey-card__action a, .msh-journey-card__action button { width: 100%; } }

/* Version 8.3: complete customer ticket workflow. */
.msh-ticket-form__intro {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 14px;
	padding: 18px 20px;
	border: 1px solid var(--msh-portal-line);
	border-radius: 18px;
	background: linear-gradient(135deg, #fff, var(--msh-portal-soft));
}
.msh-ticket-form__intro h3,
.msh-ticket-form__intro p { margin: 0; }
.msh-ticket-form__intro h3 { margin: 3px 0 5px; color: var(--msh-navy); }
.msh-ticket-form__intro p:last-child { color: var(--msh-portal-muted); }
.msh-ticket-form__intro > span { display: grid; width: 52px; height: 52px; flex: 0 0 52px; border-radius: 16px; background: var(--msh-navy); color: var(--msh-gold); place-items: center; }
.msh-ticket-form__intro svg { width: 26px; height: 26px; }
.msh-ticket-form { margin-bottom: 22px; padding: 20px; border: 1px solid var(--msh-portal-line); border-radius: 20px; background: #fff; }
.msh-ticket-list details { overflow: clip; }
.msh-ticket-list summary > span:first-child { min-width: 0; }
.msh-ticket-list summary strong { display: block; overflow-wrap: anywhere; }
.msh-ticket-list summary > b { display: inline-flex; min-height: 28px; align-items: center; padding: 4px 9px; border-radius: 999px; background: #f2f4f7; color: #475467; font-size: 11px; white-space: nowrap; }
.msh-ticket-list summary > b.is-open { background: #fffaeb; color: #b54708; }
.msh-ticket-list summary > b.is-answered { background: #ecfdf3; color: #027a48; }
.msh-ticket-list summary > b.is-closed { background: #f2f4f7; color: #667085; }
.msh-ticket-thread > form { display: grid; gap: 10px; }
.msh-ticket-thread textarea { width: 100%; min-height: 110px; }
.msh-ticket-close-form { margin-top: 10px; }
.msh-ticket-close-form .msh-button { min-height: 40px; }
@media (max-width: 620px) {
	.msh-ticket-form__intro { align-items: flex-start; padding: 16px; }
	.msh-ticket-form { padding: 16px; }
	.msh-ticket-form__intro > span { width: 44px; height: 44px; flex-basis: 44px; }
	.msh-ticket-form .msh-button,
	.msh-ticket-close-form .msh-button { width: 100%; }
}