/* ──────────────────────────────────────────────────────────────────────────
   Arabdown Store Account — «حسابي» dashboard skin.
   Forest + Cairo, tokens only (var(--wp--preset--*)), logical properties (RTL-safe),
   scoped under .asem-account. A presentation layer over core EDD shortcodes and
   the bridge's license data — no commerce/licensing logic lives here.
   ────────────────────────────────────────────────────────────────────────── */

.asem-account {
	--asem-accent-line: linear-gradient(90deg, transparent 0%,
		color-mix(in srgb, var(--wp--preset--color--primary) 65%, transparent) 25%,
		color-mix(in srgb, var(--wp--preset--color--primary) 95%, transparent) 50%,
		color-mix(in srgb, var(--wp--preset--color--primary) 65%, transparent) 75%,
		transparent 100%);
	--asem-card-bg: linear-gradient(155deg,
		var(--wp--preset--color--bg-elevated) 0%,
		var(--wp--preset--color--bg) 60%,
		var(--wp--preset--color--bg-deep) 100%);
	--asem-cta: linear-gradient(135deg, var(--wp--preset--color--primary), var(--wp--preset--color--primary-strong));
	--asem-cta-hover: linear-gradient(135deg, var(--wp--preset--color--primary-strong), var(--wp--preset--color--primary));
	--asem-cta-sheen: color-mix(in srgb, var(--wp--preset--color--white) 35%, transparent);
	--asem-sticky-top: 5.5rem; /* clears the sticky header */

	max-width: min(100%, 1120px);
	margin-inline: auto;
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--text);
}

/* ═══ Layout: sidebar + main ════════════════════════════════════════════ */
.asem-account__grid {
	display: grid;
	grid-template-columns: 264px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}
@media (max-width: 880px) {
	.asem-account__grid { grid-template-columns: 1fr; }
}

/* ═══ Sidebar ═══════════════════════════════════════════════════════════ */
.asem-account__sidebar {
	position: sticky;
	top: var(--asem-sticky-top);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 16%, var(--wp--preset--color--border));
	border-radius: 1.618rem;
	background: var(--asem-card-bg);
}

/* Visually-hidden live region (copy-to-clipboard announcements). */
.asem-account__sr {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
@media (max-width: 880px) {
	.asem-account__sidebar { position: static; }
}
.asem-account__sidebar::before {
	content: "";
	display: block;
	height: 2px;
	margin: calc(var(--wp--preset--spacing--40) * -1) calc(var(--wp--preset--spacing--40) * -1) 0;
	border-radius: 1.618rem 1.618rem 0 0;
	background: var(--asem-accent-line);
}

.asem-account__user {
	display: flex;
	align-items: center;
	gap: .8rem;
	padding-block-end: var(--wp--preset--spacing--30);
	border-block-end: 1px solid var(--wp--preset--color--border);
}
.asem-account__avatar {
	width: 52px; height: 52px;
	border-radius: 50%;
	border: 2px solid color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent);
	flex: 0 0 auto;
}
.asem-account__user-meta { display: flex; flex-direction: column; min-width: 0; }
.asem-account__hello { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); }
.asem-account__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	color: var(--wp--preset--color--text);
	line-height: 1.2;
}
.asem-account__email {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.asem-account__nav { display: flex; flex-direction: column; gap: .25rem; }
.asem-account__nav-link {
	display: flex; align-items: center; gap: .65rem;
	padding: .7rem .85rem;
	border-radius: .8rem;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	font-weight: 600;
	transition: background .15s ease, color .15s ease;
}
.asem-account__nav-link:hover {
	background: color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent);
	color: var(--wp--preset--color--text);
}
.asem-account__nav-link.is-active {
	background: color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent);
	color: var(--wp--preset--color--primary-strong);
}
.asem-account__nav-link .asem-account__icon { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }

.asem-account__logout {
	display: flex; align-items: center; gap: .55rem;
	margin-block-start: .25rem; padding: .65rem .85rem;
	border-radius: .8rem;
	color: var(--wp--preset--color--muted);
	text-decoration: none; font-size: var(--wp--preset--font-size--small); font-weight: 600;
	border-block-start: 1px solid var(--wp--preset--color--border);
}
.asem-account__logout:hover { color: var(--wp--preset--color--text); }
.asem-account__logout .asem-account__icon { width: 1.05rem; height: 1.05rem; }

/* ═══ Panels (tabbed; degrade to stacked without JS) ════════════════════ */
.asem-account__main { min-width: 0; }
.asem-account.has-js .asem-account__panel { display: none; }
.asem-account.has-js .asem-account__panel.is-active { display: block; animation: asa-fade .25s ease; }
@keyframes asa-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.asem-account__panel + .asem-account__panel { margin-block-start: var(--wp--preset--spacing--60); }

.asem-account__panel-head { margin-block-end: var(--wp--preset--spacing--40); }
.asem-account__panel-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--2xl);
	font-weight: 800;
	color: var(--wp--preset--color--text);
}
.asem-account__panel-sub { margin: .35rem 0 0; color: var(--wp--preset--color--muted); }

/* ═══ Dashboard stat cards ══════════════════════════════════════════════ */
.asem-account__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: var(--wp--preset--spacing--30);
}
.asem-account__stat {
	position: relative;
	display: flex; flex-direction: column; gap: .15rem;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 1.1rem;
	background: var(--asem-card-bg);
	overflow: hidden;
}
.asem-account__stat::before {
	content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
	height: 2px; background: var(--asem-accent-line);
}
.asem-account__stat-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.2rem; height: 2.2rem; margin-block-end: .35rem;
	border-radius: .7rem; color: var(--wp--preset--color--white);
	background: var(--asem-cta);
}
.asem-account__stat-icon .asem-account__icon { width: 1.2rem; height: 1.2rem; }
.asem-account__stat-value {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--3xl); font-weight: 900; line-height: 1.1;
	color: var(--wp--preset--color--text);
}
.asem-account__stat-label { font-weight: 700; color: var(--wp--preset--color--text); }
.asem-account__stat-sub { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); }

.asem-account__hint { margin-block-start: var(--wp--preset--spacing--40); color: var(--wp--preset--color--muted); }

/* ═══ License cards ═════════════════════════════════════════════════════ */
.asem-account__license {
	position: relative;
	padding: var(--wp--preset--spacing--50);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 14%, var(--wp--preset--color--border));
	border-radius: 1.618rem;
	background: var(--asem-card-bg);
	overflow: hidden;
}
.asem-account__license + .asem-account__license { margin-block-start: var(--wp--preset--spacing--40); }
.asem-account__license.is-flash { animation: asa-flash 1.3s ease; }
@keyframes asa-flash {
	0%, 100% { box-shadow: none; }
	30% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 38%, transparent); }
}
/* "used / total" counter — always read LTR even on an RTL page. */
.asem-account__ratio { unicode-bidi: isolate; direction: ltr; }
.asem-account__license::before {
	content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
	height: 2px; background: var(--asem-accent-line);
}
.asem-account__license-head {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
	flex-wrap: wrap;
}
.asem-account__license-title { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.asem-account__license-title h3 {
	margin: 0; font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl); font-weight: 800;
}
.asem-account__tier {
	padding: .15rem .6rem; border-radius: 999px;
	font-size: var(--wp--preset--font-size--xs); font-weight: 700;
	color: var(--wp--preset--color--primary-strong);
	background: color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
}

/* Status badge */
.asem-account__status {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .3rem .7rem; border-radius: 999px;
	font-size: var(--wp--preset--font-size--xs); font-weight: 700;
}
.asem-account__status-dot { width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.asem-account__status--active {
	color: var(--wp--preset--color--success);
	background: color-mix(in srgb, var(--wp--preset--color--success) 14%, transparent);
}
.asem-account__status--expired {
	color: var(--wp--preset--color--accent);
	background: color-mix(in srgb, var(--wp--preset--color--accent) 16%, transparent);
}
.asem-account__status--disabled {
	color: var(--wp--preset--color--muted);
	background: color-mix(in srgb, var(--wp--preset--color--muted) 14%, transparent);
}

/* Key row */
.asem-account__keyrow { margin-block-start: var(--wp--preset--spacing--40); }
.asem-account__key-label {
	display: block; margin-block-end: .35rem;
	font-size: var(--wp--preset--font-size--xs); font-weight: 700;
	letter-spacing: .04em; color: var(--wp--preset--color--muted); text-transform: uppercase;
}
.asem-account__key {
	display: flex; align-items: stretch; gap: .5rem; flex-wrap: wrap;
}
.asem-account__key-value {
	flex: 1 1 auto; min-width: 0;
	display: inline-flex; align-items: center;
	padding: .6rem .9rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--lg);
	letter-spacing: .08em;
	color: var(--wp--preset--color--text);
	background: var(--wp--preset--color--bg-deep);
	border: 1px dashed color-mix(in srgb, var(--wp--preset--color--primary) 30%, var(--wp--preset--color--border));
	border-radius: .7rem;
	word-break: break-all;
}
.asem-account__copy {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .55rem .9rem; cursor: pointer;
	font: inherit; font-weight: 700; color: var(--wp--preset--color--primary-strong);
	background: color-mix(in srgb, var(--wp--preset--color--primary) 9%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 28%, transparent);
	border-radius: .7rem;
	transition: background .15s ease;
}
.asem-account__copy:hover { background: color-mix(in srgb, var(--wp--preset--color--primary) 16%, transparent); }
.asem-account__copy .asem-account__icon { width: 1.05rem; height: 1.05rem; }
.asem-account__copy.is-copied { color: var(--wp--preset--color--success); border-color: color-mix(in srgb, var(--wp--preset--color--success) 40%, transparent); }

/* Meta: activations meter + expiry */
.asem-account__meta {
	display: grid; grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--40);
}
@media (max-width: 520px) { .asem-account__meta { grid-template-columns: 1fr; } }
.asem-account__meta-label {
	display: block; margin-block-end: .3rem;
	font-size: var(--wp--preset--font-size--xs); font-weight: 700; color: var(--wp--preset--color--muted);
}
.asem-account__meta-value { font-size: var(--wp--preset--font-size--lg); }
.asem-account__meta-sub { display: block; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); }
.asem-account__seats { display: flex; align-items: center; gap: .7rem; }
.asem-account__seats-count {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--lg); color: var(--wp--preset--color--text);
	white-space: nowrap;
}
.asem-account__meter {
	flex: 1 1 auto; height: .5rem; border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 12%, var(--wp--preset--color--bg-deep));
	overflow: hidden;
}
.asem-account__meter-fill { display: block; height: 100%; border-radius: 999px; background: var(--asem-cta); }

/* Manage Sites (native <details>) */
.asem-account__sites {
	margin-block-start: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 1rem;
	background: color-mix(in srgb, var(--wp--preset--color--bg-elevated) 60%, transparent);
}
.asem-account__sites-toggle {
	display: flex; align-items: center; gap: .55rem;
	padding: .85rem 1rem; cursor: pointer; font-weight: 700;
	list-style: none;
}
.asem-account__sites-toggle::-webkit-details-marker { display: none; }
.asem-account__sites-toggle .asem-account__icon { width: 1.15rem; height: 1.15rem; color: var(--wp--preset--color--primary-strong); }
.asem-account__sites-count {
	margin-inline-start: auto;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}
.asem-account__sites[open] .asem-account__sites-toggle { border-block-end: 1px solid var(--wp--preset--color--border); }
.asem-account__sites-body { padding: 1rem; }

.asem-account__site-list { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.asem-account__site {
	display: flex; align-items: center; justify-content: space-between; gap: .8rem;
	padding: .55rem .8rem;
	background: var(--wp--preset--color--bg);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: .7rem;
}
.asem-account__site-host {
	display: inline-flex; align-items: center; gap: .45rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	word-break: break-all;
}
.asem-account__site-host .asem-account__icon { width: 1rem; height: 1rem; color: var(--wp--preset--color--primary); flex: 0 0 auto; }
.asem-account__site-empty, .asem-account__site-full {
	margin: 0 0 .7rem; color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.asem-account__site-form--activate { display: flex; gap: .5rem; flex-wrap: wrap; }
.asem-account__site-input {
	flex: 1 1 12rem; min-width: 0;
	padding: .6rem .85rem; font: inherit;
	color: var(--wp--preset--color--text);
	background: var(--wp--preset--color--bg);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: .7rem;
}
.asem-account__site-input:focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent);
}

/* Footer actions */
.asem-account__license-foot {
	display: flex; gap: .6rem; flex-wrap: wrap;
	margin-block-start: var(--wp--preset--spacing--40);
}

/* ═══ Buttons ═══════════════════════════════════════════════════════════ */
.asem-account__btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
	padding: .7rem 1.3rem; border-radius: 999px;
	font: inherit; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer;
	border: 1px solid transparent;
	transition: background .18s ease, transform .15s ease, box-shadow .18s ease, color .15s ease;
}
.asem-account__btn .asem-account__icon { width: 1.05rem; height: 1.05rem; }
.asem-account__btn--sm { padding: .5rem .9rem; font-size: var(--wp--preset--font-size--small); }
.asem-account__btn--primary {
	color: var(--wp--preset--color--white); background: var(--asem-cta);
	box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--wp--preset--color--primary) 50%, transparent), inset 0 1px 0 var(--asem-cta-sheen);
}
.asem-account__btn--primary:hover { background: var(--asem-cta-hover); color: var(--wp--preset--color--white); transform: translateY(-2px); }
.asem-account__btn--primary:active { transform: translateY(1px); }
.asem-account__btn--ghost {
	color: var(--wp--preset--color--primary-strong);
	background: transparent;
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) 35%, transparent);
}
.asem-account__btn--ghost:hover { background: color-mix(in srgb, var(--wp--preset--color--primary) 9%, transparent); color: var(--wp--preset--color--primary-strong); }
.asem-account__btn--danger {
	color: var(--wp--preset--color--accent);
	background: transparent;
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent);
}
.asem-account__btn--danger:hover { background: color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent); }

/* ═══ Alerts ════════════════════════════════════════════════════════════ */
.asem-account__alert {
	margin-block-end: var(--wp--preset--spacing--40);
	padding: .85rem 1.1rem; border-radius: .9rem; font-weight: 600;
	border: 1px solid transparent;
}
.asem-account__alert--ok {
	color: var(--wp--preset--color--success);
	background: color-mix(in srgb, var(--wp--preset--color--success) 12%, transparent);
	border-color: color-mix(in srgb, var(--wp--preset--color--success) 35%, transparent);
}
.asem-account__alert--warn {
	color: var(--wp--preset--color--accent);
	background: color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 38%, transparent);
}

/* ═══ Empty states ══════════════════════════════════════════════════════ */
.asem-account__empty {
	display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
	padding: var(--wp--preset--spacing--50);
	border: 1px dashed var(--wp--preset--color--border); border-radius: 1.1rem;
	color: var(--wp--preset--color--muted);
}

/* ═══ EDD shortcode panels (orders / downloads) — fit Forest ════════════ */
/* Wide EDD history tables scroll within the panel instead of breaking the
   single-column mobile layout. */
.asem-account__edd { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.asem-account__edd table,
.asem-account__edd .edd-table {
	width: 100%; border-collapse: collapse;
	background: var(--asem-card-bg);
	border: 1px solid var(--wp--preset--color--border); border-radius: 1rem; overflow: hidden;
}
.asem-account__edd th, .asem-account__edd td {
	padding: .8rem 1rem; text-align: start;
	border-block-end: 1px solid var(--wp--preset--color--border);
}
.asem-account__edd thead th {
	font-family: var(--wp--preset--font-family--display);
	background: color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent);
	color: var(--wp--preset--color--text);
}
.asem-account__edd tr:last-child td { border-block-end: 0; }
.asem-account__edd a { color: var(--wp--preset--color--primary-strong); font-weight: 600; }
.asem-account__edd .edd_purchase_status,
.asem-account__edd .edd-payment-status { font-weight: 700; }
.asem-account__edd .edd_print_receipt,
.asem-account__edd .edd-no-purchases { color: var(--wp--preset--color--muted); }

/* ═══ Login gate ════════════════════════════════════════════════════════ */
.asem-account--gate { display: flex; justify-content: center; padding-block: var(--wp--preset--spacing--60); }
.asem-account__gate-card {
	position: relative; max-width: 30rem; width: 100%;
	padding: var(--wp--preset--spacing--60);
	text-align: center; overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 16%, var(--wp--preset--color--border));
	border-radius: 1.618rem; background: var(--asem-card-bg);
}
.asem-account__gate-card::before {
	content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px; background: var(--asem-accent-line);
}
.asem-account__gate-title {
	margin: 0 0 .6rem; font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--2xl); font-weight: 800;
}
.asem-account__gate-text { margin: 0 0 var(--wp--preset--spacing--40); color: var(--wp--preset--color--muted); }
.asem-account__gate-hint { margin: var(--wp--preset--spacing--40) 0 .35rem; font-size: var(--wp--preset--font-size--small, .9rem); color: var(--wp--preset--color--muted); }
.asem-account__gate-reset {
	display: inline-block; font-weight: 700; text-decoration: none;
	color: var(--wp--preset--color--primary-strong, #234F3B);
	border-bottom: 1px dashed color-mix(in srgb, var(--wp--preset--color--primary, #2F6A4F) 45%, transparent);
}
.asem-account__gate-reset:hover { color: var(--wp--preset--color--primary, #2F6A4F); }

/* ═══ Focus visibility (WCAG 2.4.7) — one ring for every actionable control ══ */
.asem-account :is(a, button, summary, [data-asa-tab]):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: inherit;
}

/* ═══ Reduced motion — honor the OS preference ══════════════════════════ */
@media (prefers-reduced-motion: reduce) {
	.asem-account *,
	.asem-account *::before,
	.asem-account *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}