/* ==========================================================================
 * BoxAPI Plan Manager — Frontend Design System
 * جهت: بنتو گرید (Bento) با زبان بصری «پاسخ API» — کارت‌ها مانند فیلدهای
 * یک Response Body چیده شده‌اند تا با ماهیت محصول (مدیریت پلن API) هم‌خوان
 * باشند. فونت وزیرمتن برای خوانایی فارسی و اعداد جدولی (Tabular) برای ارقام.
 * ========================================================================== */

.bpm-wrap {
	--bpm-bg: #f4f5fb;
	--bpm-surface: #ffffff;
	--bpm-surface-muted: #f7f8fc;
	--bpm-border: #e4e6f2;
	--bpm-ink: #14162c;
	--bpm-ink-muted: #5c5f78;
	--bpm-ink-faint: #8b8ea3;
	--bpm-accent: #4338ca;
	--bpm-accent-ink: #ffffff;
	--bpm-accent-soft: #edebfb;
	--bpm-success: #157f3c;
	--bpm-success-soft: #e7f6ec;
	--bpm-danger: #b42318;
	--bpm-danger-soft: #fdedec;
	--bpm-warning: #92400e;
	--bpm-warning-soft: #fef3e2;
	--bpm-radius-lg: 20px;
	--bpm-radius-md: 14px;
	--bpm-radius-sm: 9px;
	--bpm-shadow: 0 1px 2px rgba(20, 22, 44, .04), 0 10px 28px -14px rgba(20, 22, 44, .16);
	--bpm-font: inherit;
	--bpm-font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;

	direction: rtl;
	text-align: right;
	font-family: var(--bpm-font);
	color: var(--bpm-ink);
	max-width: 880px;
	margin: 0 auto;
	font-variant-numeric: tabular-nums;
}

.bpm-wrap * {
	box-sizing: border-box;
}

.bpm-wrap :focus-visible {
	outline: 2px solid var(--bpm-accent);
	outline-offset: 2px;
}

/* -------------------------------- عنصر امضا: برچسب کلید به‌سبک JSON -------------------------------- */
.bpm-key {
	font-family: var(--bpm-font-mono);
	font-size: 11.5px;
	letter-spacing: .02em;
	color: var(--bpm-accent);
	background: var(--bpm-accent-soft);
	border-radius: 6px;
	padding: 2px 8px;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	direction: ltr;
	unicode-bidi: isolate;
}

/* -------------------------------- نوار موجودی کیف پول -------------------------------- */
.bpm-wallet-bar {
	background: var(--bpm-ink);
	background: linear-gradient(135deg, #181a35 0%, #232655 100%);
	color: #fff;
	border-radius: var(--bpm-radius-lg);
	padding: 18px 22px;
	margin-bottom: 20px;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.bpm-wallet-bar .bpm-key {
	background: rgba(255, 255, 255, .12);
	color: #c9caff;
}

.bpm-wallet-figure {
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.bpm-wallet-balance {
	font-weight: 700;
	font-size: 24px;
	line-height: 1;
}

.bpm-wallet-unit {
	font-size: 13px;
	color: #b7b8e6;
}

/* -------------------------------- تب‌های نوع API (کنترل بخش‌بندی‌شده) -------------------------------- */
.bpm-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	background: var(--bpm-surface-muted);
	border: 1px solid var(--bpm-border);
	border-radius: var(--bpm-radius-md);
	padding: 5px;
	margin-bottom: 20px;
}

.bpm-tab-btn {
	background: none;
	border: none;
	border-radius: 10px;
	padding: 11px 14px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	color: var(--bpm-ink-muted);
	transition: background-color .15s ease, color .15s ease;
}

.bpm-tab-btn.is-active {
	background: var(--bpm-surface);
	color: var(--bpm-accent);
	box-shadow: var(--bpm-shadow);
}

.bpm-tab-panel {
	display: none;
}

.bpm-tab-panel.is-active {
	display: block;
	animation: bpm-fade-in .18s ease;
}

@media (prefers-reduced-motion: reduce) {
	.bpm-tab-panel.is-active {
		animation: none;
	}
}

@keyframes bpm-fade-in {
	from { opacity: 0; transform: translateY(2px); }
	to { opacity: 1; transform: translateY(0); }
}

/* -------------------------------- شبکه بنتو -------------------------------- */
.bpm-bento {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 14px;
	align-items: start;
}

.bpm-tile {
	background: var(--bpm-surface);
	border: 1px solid var(--bpm-border);
	border-radius: var(--bpm-radius-lg);
	padding: 20px;
	box-shadow: var(--bpm-shadow);
}

.bpm-tile-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

.bpm-tile-title {
	font-size: 14px;
	font-weight: 700;
	margin: 0;
	color: var(--bpm-ink);
}

.bpm-tile--status   { grid-column: span 3; }
.bpm-tile--summary  { grid-column: span 3; }
.bpm-tile--form     { grid-column: span 6; }

@media (max-width: 720px) {
	.bpm-bento { grid-template-columns: 1fr; }
	.bpm-tile--status, .bpm-tile--summary, .bpm-tile--form {
		grid-column: span 1;
	}
}

/* -------------------------------- وضعیت پلن (کارت وضعیت) -------------------------------- */
.bpm-fieldset {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.bpm-fieldset-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 9px 0;
	border-bottom: 1px dashed var(--bpm-border);
	font-size: 13.5px;
}

.bpm-fieldset-row:last-child {
	border-bottom: none;
}

.bpm-fieldset-row dt {
	color: var(--bpm-ink-muted);
}

.bpm-fieldset-row dd {
	margin: 0;
	font-weight: 700;
	color: var(--bpm-ink);
}

.bpm-empty-state {
	color: var(--bpm-ink-muted);
	font-size: 13.5px;
	line-height: 1.9;
}

.bpm-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
}

.bpm-pill::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.bpm-pill--ok {
	background: var(--bpm-success-soft);
	color: var(--bpm-success);
}

.bpm-pill--warn {
	background: var(--bpm-warning-soft);
	color: var(--bpm-warning);
}

/* -------------------------------- فرم خرید -------------------------------- */
.bpm-field {
	margin-bottom: 18px;
}

.bpm-field:last-child {
	margin-bottom: 0;
}

.bpm-field-label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 7px;
	color: var(--bpm-ink);
}

.bpm-field-hint {
	display: block;
	color: var(--bpm-ink-faint);
	font-size: 12px;
	margin-top: 6px;
	line-height: 1.7;
}

.bpm-input {
	width: 100%;
	padding: 10px 13px;
	border: 1px solid var(--bpm-border);
	border-radius: var(--bpm-radius-sm);
	font-family: inherit;
	font-size: 14px;
	background: var(--bpm-surface-muted);
	color: var(--bpm-ink);
	transition: border-color .15s ease, background-color .15s ease;
}

.bpm-input:focus {
	border-color: var(--bpm-accent);
	background: var(--bpm-surface);
}

.bpm-segmented {
	display: flex;
	border: 1px solid var(--bpm-border);
	border-radius: var(--bpm-radius-sm);
	overflow: hidden;
}

.bpm-segmented label {
	flex: 1;
	position: relative;
	text-align: center;
	padding: 9px 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--bpm-ink-muted);
	cursor: pointer;
	background: var(--bpm-surface-muted);
	border-inline-start: 1px solid var(--bpm-border);
	transition: background-color .15s ease, color .15s ease;
}

.bpm-segmented label:first-child {
	border-inline-start: none;
}

.bpm-segmented input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.bpm-segmented label:has(input:checked) {
	background: var(--bpm-accent-soft);
	color: var(--bpm-accent);
}

.bpm-discount-row {
	display: flex;
	gap: 8px;
}

.bpm-discount-row .bpm-input {
	flex: 1;
}

.bpm-btn {
	font-family: inherit;
	border: none;
	border-radius: var(--bpm-radius-sm);
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: filter .15s ease, transform .05s ease;
}

.bpm-btn:active {
	transform: scale(.98);
}

.bpm-btn-primary {
	background: var(--bpm-accent);
	color: var(--bpm-accent-ink);
	width: 100%;
	padding: 13px 20px;
	font-size: 15px;
}

.bpm-btn-primary:hover {
	filter: brightness(1.08);
}

.bpm-btn-primary:disabled {
	opacity: .55;
	cursor: not-allowed;
	filter: none;
}

.bpm-btn-secondary {
	background: var(--bpm-surface-muted);
	color: var(--bpm-ink);
	border: 1px solid var(--bpm-border);
}

.bpm-btn-secondary:hover {
	background: var(--bpm-accent-soft);
	color: var(--bpm-accent);
}

/* -------------------------------- خلاصه قیمت («فیلدهای پاسخ») -------------------------------- */
.bpm-receipt {
	display: grid;
	gap: 8px;
}

.bpm-receipt-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13.5px;
	color: var(--bpm-ink-muted);
}

.bpm-receipt-row .bpm-value {
	font-weight: 700;
	color: var(--bpm-ink);
	font-family: var(--bpm-font-mono);
}

.bpm-receipt-row--discount .bpm-value {
	color: var(--bpm-success);
}

.bpm-receipt-divider {
	border: none;
	border-top: 1px dashed var(--bpm-border);
	margin: 4px 0;
}

.bpm-receipt-row--final {
	font-size: 15px;
}

.bpm-receipt-row--final .bpm-value {
	color: var(--bpm-accent);
	font-size: 18px;
}

/* -------------------------------- تمدید خودکار -------------------------------- */
.bpm-switch-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
}

.bpm-switch-row input {
	margin-top: 3px;
	flex-shrink: 0;
	width: 17px;
	height: 17px;
	accent-color: var(--bpm-accent);
}

.bpm-switch-text {
	font-size: 13px;
	color: var(--bpm-ink-muted);
	line-height: 1.8;
}

.bpm-switch-text strong {
	color: var(--bpm-ink);
	display: block;
	margin-bottom: 2px;
	font-size: 13.5px;
}

/* -------------------------------- پیام‌های سیستمی (هشدار/موفقیت/خطا) -------------------------------- */
.bpm-form-message {
	display: none;
	align-items: flex-start;
	gap: 9px;
	border-radius: var(--bpm-radius-sm);
	padding: 11px 14px;
	font-size: 13px;
	line-height: 1.8;
	margin-top: 16px;
	margin-bottom: 0;
}

.bpm-form-message::before {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	margin-top: 1px;
}

.bpm-form-message.is-error {
	display: flex;
	background: var(--bpm-danger-soft);
	color: var(--bpm-danger);
}

.bpm-form-message.is-error::before {
	content: "!";
	background: var(--bpm-danger);
	color: #fff;
}

.bpm-form-message.is-success {
	display: flex;
	background: var(--bpm-success-soft);
	color: var(--bpm-success);
}

.bpm-form-message.is-success::before {
	content: "✓";
	background: var(--bpm-success);
	color: #fff;
}

.bpm-notice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 16px 18px;
	border-radius: var(--bpm-radius-md);
	font-size: 13.5px;
	line-height: 1.9;
}

.bpm-notice-warn {
	background: var(--bpm-warning-soft);
	color: var(--bpm-warning);
}

/* -------------------------------- اسکلت بارگذاری -------------------------------- */
.bpm-skeleton {
	display: inline-block;
	background: linear-gradient(90deg, var(--bpm-border) 25%, var(--bpm-surface-muted) 50%, var(--bpm-border) 75%);
	background-size: 200% 100%;
	border-radius: 4px;
	color: transparent !important;
	animation: bpm-shimmer 1.2s infinite;
}

@media (prefers-reduced-motion: reduce) {
	.bpm-skeleton { animation: none; }
}

@keyframes bpm-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}