/* الاشتراكات — شاشة الإدارة + «اشتراكاتي» في حساب العميل. */

:root {
	--moa-subs-accent: #1f7a4d;
	--moa-subs-line: #e3e7ec;
	--moa-subs-muted: #64748b;
	--moa-subs-bg: #fff;
	--moa-subs-soft: #f6f8fa;
}

/* ---------- الحالات ---------- */

.moa-subs-pill {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.8;
	white-space: nowrap;
	background: #eef2f6;
	color: #334155;
}
.moa-subs-pill.is-active { background: #dcfce7; color: #166534; }
.moa-subs-pill.is-trial { background: #e0f2fe; color: #075985; }
.moa-subs-pill.is-past_due { background: #fef3c7; color: #92400e; }
.moa-subs-pill.is-on_hold { background: #fee2e2; color: #991b1b; }
.moa-subs-pill.is-pending { background: #f1f5f9; color: #475569; }
.moa-subs-pill.is-cancelled,
.moa-subs-pill.is-expired { background: #f1f5f9; color: #64748b; }

.moa-subs-alert {
	margin: 12px 0 0;
	padding: 10px 14px;
	border-radius: 10px;
	background: #fff7ed;
	border: 1px solid #fed7aa;
	color: #7c2d12;
	line-height: 1.7;
}
.moa-subs-alert small { display: block; color: var(--moa-subs-muted); margin-top: 4px; }

/* ---------- الإدارة ---------- */

.moa-subs-wrap { max-width: 1200px; }
.moa-subs-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.moa-subs-top h1 { margin: 0; }
.moa-subs-top__tick { display: flex; align-items: center; gap: 8px; color: var(--moa-subs-muted); font-size: 13px; }

.moa-subs-inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; }

.moa-subs-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 12px;
	margin: 16px 0;
}
.moa-subs-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 16px;
	background: var(--moa-subs-bg);
	border: 1px solid var(--moa-subs-line);
	border-radius: 12px;
	text-decoration: none;
	color: inherit;
}
.moa-subs-stat:hover { border-color: var(--moa-subs-accent); }
.moa-subs-stat span { font-size: 18px; }
.moa-subs-stat strong { font-size: 22px; line-height: 1.3; }
.moa-subs-stat em { font-style: normal; color: var(--moa-subs-muted); font-size: 12px; }
.moa-subs-stat.is-past_due strong { color: #b45309; }
.moa-subs-stat.is-on_hold strong { color: #b91c1c; }

.moa-subs-search { display: flex; gap: 6px; margin: 8px 0 12px; clear: both; }
.moa-subs-search input[type="search"] { min-width: 280px; }

.moa-subs-table td { vertical-align: middle; }
.moa-subs-table small { display: block; color: var(--moa-subs-muted); }
.moa-subs-empty { text-align: center; padding: 28px !important; color: var(--moa-subs-muted); }

.moa-subs-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.moa-subs-box {
	background: var(--moa-subs-bg);
	border: 1px solid var(--moa-subs-line);
	border-radius: 12px;
	padding: 16px 18px;
}
.moa-subs-box h2 { margin: 0 0 12px; font-size: 15px; }
.moa-subs-box--main { grid-column: 1 / -1; }
.moa-subs-box--main header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.moa-subs-box--main h1 { margin: 0; font-size: 20px; }

.moa-subs-facts {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 8px 18px;
	margin: 14px 0 0;
}
.moa-subs-facts dt { color: var(--moa-subs-muted); }
.moa-subs-facts dd { margin: 0; }
.moa-subs-facts small { color: var(--moa-subs-muted); margin-inline-start: 6px; }

.moa-subs-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.moa-subs-actions select { max-width: 320px; }
.moa-subs-danger.button { color: #b91c1c; border-color: #fca5a5; }
.moa-subs-danger.button:hover { color: #fff; background: #b91c1c; border-color: #b91c1c; }

.moa-subs-log { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow: auto; }
.moa-subs-log li {
	display: grid;
	grid-template-columns: 130px 1fr auto;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px dashed var(--moa-subs-line);
	font-size: 13px;
}
.moa-subs-log time,
.moa-subs-log small { color: var(--moa-subs-muted); }
.moa-subs-log li.is-notify span { color: #0f766e; }

.moa-subs-order-panel a { font-weight: 600; }

@media (max-width: 900px) {
	.moa-subs-detail { grid-template-columns: 1fr; }
	.moa-subs-log li { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- حساب العميل ---------- */

.moa-subs-cards { display: grid; gap: 16px; }
.moa-subs-card {
	border: 1px solid var(--moa-subs-line);
	border-radius: 14px;
	padding: 18px 20px;
	background: var(--moa-subs-bg);
}
.moa-subs-card.is-past_due { border-color: #fcd34d; }
.moa-subs-card.is-on_hold { border-color: #fca5a5; }
.moa-subs-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.moa-subs-card__head h3 { margin: 0; font-size: 17px; }
.moa-subs-card__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 10px;
	margin: 14px 0 0;
}
.moa-subs-card__facts div { background: var(--moa-subs-soft); border-radius: 10px; padding: 10px 12px; }
.moa-subs-card__facts dt { font-size: 12px; color: var(--moa-subs-muted); }
.moa-subs-card__facts dd { margin: 2px 0 0; font-weight: 600; }
.moa-subs-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.moa-subs-card__actions .button { margin: 0; }
.moa-subs-primary.button { background: var(--moa-subs-accent); border-color: var(--moa-subs-accent); color: #fff; }
.moa-subs-ghost.button { background: transparent; }
.moa-subs-link { font-size: 13px; }
.moa-subs-empty { text-align: center; padding: 24px; }
.moa-subs-order-note { margin-top: 12px; }

/* السعر في المتجر: «/ سنة» و«أول ١٤ يوم مجاناً». */
.moa-subs-per { font-size: .85em; opacity: .8; }
.moa-subs-trial {
	display: inline-block;
	margin-inline-start: 6px;
	padding: 1px 8px;
	border-radius: 999px;
	font-size: .75em;
	font-weight: 600;
	background: #dcfce7;
	color: #166534;
	vertical-align: middle;
}