/* ──────────────────────────────────────────────────────────────────────────
   Arabdown Store Confirmation — Forest skin for the post-purchase pages
   (EDD confirmation / receipt / order-history) + the appended license-keys
   block and «حسابي» actions. Tokens only, logical properties (RTL-safe).
   ────────────────────────────────────────────────────────────────────────── */

.asem-conf-keys,
.asem-conf-actions {
	max-width: min(100%, 720px);
	margin-inline: auto;
}

/* ═══ License keys block ════════════════════════════════════════════════ */
.asem-conf-keys {
	margin-block: var(--wp--preset--spacing--40, 1.5rem) 0;
	padding: var(--wp--preset--spacing--40, 1.4rem);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary, #2F6A4F) 22%, var(--wp--preset--color--border, #E0E3DA));
	border-radius: 1.1rem;
	background: var(--wp--preset--color--bg-elevated, #FFFFFF);
	position: relative;
	overflow: hidden;
}
.asem-conf-keys::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	background: var(--wp--preset--color--primary, #2F6A4F);
}
.asem-conf-keys__title {
	margin: 0 0 .9rem;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: var(--wp--preset--font-size--lg, 1.15rem);
	font-weight: 700; /* brand-kit cap: display/Arabic faces top out at 700 (no faux-bold). */
	color: var(--wp--preset--color--primary-strong, #234F3B);
}
.asem-conf-keys__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.asem-conf-key {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
	padding: .6rem .85rem;
	background: var(--wp--preset--color--bg, #F3F4F0);
	border: 1px solid var(--wp--preset--color--border, #E0E3DA);
	border-radius: .7rem;
}
.asem-conf-key__name { font-weight: 700; color: var(--wp--preset--color--text, #18201B); }
.asem-conf-key__val {
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: var(--wp--preset--font-size--base, 1rem);
	letter-spacing: .08em;
	padding: .35rem .7rem;
	background: var(--wp--preset--color--bg-elevated, #FFFFFF);
	border: 1px dashed color-mix(in srgb, var(--wp--preset--color--primary, #2F6A4F) 35%, var(--wp--preset--color--border, #E0E3DA));
	border-radius: .5rem;
	color: var(--wp--preset--color--text, #18201B);
	unicode-bidi: isolate;
	word-break: break-all;
}
.asem-conf-keys__hint {
	margin: .9rem 0 0;
	font-size: var(--wp--preset--font-size--small, .9rem);
	color: var(--wp--preset--color--muted, #5F6A60);
}

/* ═══ Actions (Go to account / continue) ════════════════════════════════ */
.asem-conf-actions {
	display: flex; gap: .7rem; flex-wrap: wrap; justify-content: center;
	margin-block: var(--wp--preset--spacing--50, 2rem);
}
.asem-conf-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: .85rem 1.8rem; border-radius: 999px;
	font-weight: 700; line-height: 1; text-decoration: none;
	border: 1px solid transparent;
	transition: transform .15s ease, background .18s ease, box-shadow .18s ease, color .15s ease;
}
/* Scoped under .asem-conf-actions (0,2,x) so they beat the generic
   `.wp-block-edd-confirmation a` link color (0,1,1) in the cascade. */
.asem-conf-actions .asem-conf-btn--primary {
	color: var(--wp--preset--color--white, #FFF);
	background: linear-gradient(135deg, var(--wp--preset--color--primary, #2F6A4F), var(--wp--preset--color--primary-strong, #234F3B));
	box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--wp--preset--color--primary, #2F6A4F) 50%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.asem-conf-actions .asem-conf-btn--primary:hover { transform: translateY(-2px); color: var(--wp--preset--color--white, #FFF); }
/* Dark mode inverts --primary/--white to light greens, so a filled CTA with light
   text turns invisible. Flip to dark text on the bright-green fill (high contrast). */
[data-theme="dark"] .asem-conf-actions .asem-conf-btn--primary,
[data-theme="dark"] .asem-conf-actions .asem-conf-btn--primary:hover { color: var(--wp--preset--color--bg, #0E1A14); }
.asem-conf-actions .asem-conf-btn--ghost {
	color: var(--wp--preset--color--primary-strong, #234F3B);
	background: transparent;
	border-color: color-mix(in srgb, var(--wp--preset--color--primary, #2F6A4F) 35%, transparent);
}
.asem-conf-actions .asem-conf-btn--ghost:hover { background: color-mix(in srgb, var(--wp--preset--color--primary, #2F6A4F) 9%, transparent); }
.asem-conf-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #2F6A4F);
	outline-offset: 2px;
}

/* ═══ Light Forest touches on EDD's confirmation/receipt blocks ═════════ */
.edd-blocks__order-history,
.wp-block-edd-confirmation,
.wp-block-edd-receipt {
	max-width: min(100%, 760px);
	margin-inline: auto;
}
.edd-blocks__order-history table,
.wp-block-edd-confirmation table,
.wp-block-edd-receipt table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--wp--preset--color--border, #E0E3DA);
	border-radius: 1rem;
	overflow: hidden;
	background: var(--wp--preset--color--bg-elevated, #FFFFFF);
}
.edd-blocks__order-history th,
.wp-block-edd-confirmation th,
.wp-block-edd-receipt th {
	background: color-mix(in srgb, var(--wp--preset--color--primary, #2F6A4F) 8%, transparent);
	color: var(--wp--preset--color--text, #18201B);
	font-family: var(--wp--preset--font-family--display, inherit);
}
.edd-blocks__order-history td,
.edd-blocks__order-history th,
.wp-block-edd-confirmation td,
.wp-block-edd-confirmation th,
.wp-block-edd-receipt td,
.wp-block-edd-receipt th {
	padding: .8rem 1rem;
	text-align: start;
	border-block-end: 1px solid var(--wp--preset--color--border, #E0E3DA);
}
.wp-block-edd-confirmation a:not(.asem-conf-btn),
.wp-block-edd-receipt a:not(.asem-conf-btn),
.edd-blocks__order-history a:not(.asem-conf-btn) { color: var(--wp--preset--color--primary-strong, #234F3B); font-weight: 600; }