/* بطاقات الباقات + الدفع (مشتركة بين لوحة التحكم والموقع) */
.plan-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 1.75rem 1.5rem 1.5rem; border: 1px solid var(--plan-line, #e5e7eb); border-radius: 1.25rem; background: var(--plan-bg, #fff); box-shadow: 0 1px 2px rgb(16 24 40 / .05); transition: transform .18s, box-shadow .18s; }
.plan:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -12px rgb(16 24 40 / .22); }
.plan.is-featured { border-color: var(--plan-accent, #1f3a8c); box-shadow: 0 0 0 1px var(--plan-accent, #1f3a8c), 0 16px 34px -16px rgb(31 58 140 / .45); }
.plan-ribbon { position: absolute; top: -.8rem; inset-inline-start: 1.25rem; padding: .25rem .8rem; border-radius: 999px; background: var(--plan-accent, #1f3a8c); color: #fff; font-size: .78rem; font-weight: 700; }
.plan-name { font-size: 1.1rem; font-weight: 800; color: var(--plan-ink, #111827); }
.plan-price { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.plan-price b { font-size: 2rem; line-height: 1.1; font-weight: 800; color: var(--plan-ink, #111827); }
.plan-price small { color: var(--plan-muted, #6b7280); font-size: .9rem; }
.plan-desc { margin: 0; color: var(--plan-muted, #6b7280); font-size: .92rem; line-height: 1.7; }
.plan-feat { list-style: none; margin: 0; padding: 1rem 0 0; border-top: 1px dashed var(--plan-line, #e5e7eb); display: grid; gap: .55rem; font-size: .92rem; flex: 1; }
.plan-feat li { display: flex; gap: .55rem; align-items: flex-start; color: var(--plan-ink, #111827); }
.plan-feat li::before { content: "✓"; flex: none; width: 1.2rem; height: 1.2rem; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 800; background: color-mix(in srgb, var(--plan-accent, #1f3a8c) 12%, transparent); color: var(--plan-accent, #1f3a8c); margin-top: .2rem; }
.plan-cta { display: block; text-align: center; padding: .8rem 1rem; border-radius: .8rem; font-weight: 700; border: 1px solid var(--plan-accent, #1f3a8c); color: var(--plan-accent, #1f3a8c); background: transparent; cursor: pointer; text-decoration: none; transition: background .15s, color .15s; }
.plan.is-featured .plan-cta, .plan-cta:hover { background: var(--plan-accent, #1f3a8c); color: #fff; }

.pay { display: grid; gap: 1rem; padding: 1.5rem; border: 1px solid var(--plan-line, #e5e7eb); border-radius: 1.25rem; background: var(--plan-bg, #fff); }
.pay-head h3 { margin: 0 0 .25rem; font-size: 1.15rem; font-weight: 800; }
.pay-head p { margin: 0; color: var(--plan-muted, #6b7280); font-size: .92rem; }
.pay-seg, .pay-methods { display: flex; flex-wrap: wrap; gap: .5rem; }
.pay-seg button, .pay-method { padding: .55rem 1rem; border: 1px solid var(--plan-line, #e5e7eb); border-radius: .75rem; background: transparent; color: inherit; font: inherit; font-size: .9rem; cursor: pointer; display: inline-flex; gap: .5rem; align-items: center; }
.pay-seg button.is-on, .pay-method.is-on { border-color: var(--plan-accent, #1f3a8c); background: color-mix(in srgb, var(--plan-accent, #1f3a8c) 10%, transparent); font-weight: 700; }
.pay-method { padding: .8rem 1.1rem; font-weight: 600; }
.pay-method-ico { font-size: 1.3rem; }
.pay-detail[hidden] { display: none; }
.pay-detail { padding: 1rem 1.1rem; border-radius: .9rem; background: color-mix(in srgb, var(--plan-accent, #1f3a8c) 5%, transparent); border: 1px solid color-mix(in srgb, var(--plan-accent, #1f3a8c) 15%, transparent); display: grid; gap: .8rem; }
.pay-detail dl { margin: 0; display: grid; gap: .6rem; }
.pay-detail dl > div { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; }
.pay-detail dt { color: var(--plan-muted, #6b7280); font-size: .88rem; }
.pay-detail dd { margin: 0; font-weight: 800; font-size: 1.05rem; display: flex; gap: .6rem; align-items: center; }
.pay-copy { border: 1px solid var(--plan-line, #d1d5db); background: transparent; color: inherit; border-radius: .5rem; padding: .15rem .6rem; font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; }
.pay-steps { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: .35rem; font-size: .9rem; color: var(--plan-ink, #111827); }
.pay-send { display: grid; gap: .6rem; font-size: .92rem; }
.pay-send > div { display: flex; flex-wrap: wrap; gap: .6rem; }
.pay-send small { color: var(--plan-muted, #6b7280); }
.pay-btn { display: inline-flex; align-items: center; justify-content: center; padding: .7rem 1.2rem; border-radius: .75rem; color: #fff !important; font-weight: 700; font-size: .92rem; text-decoration: none; }
.pay-btn-wa { background: #16a34a; }
.pay-btn-tg { background: #229ed9; }
.dark .plan, .dark .pay { --plan-bg: #18181b; --plan-line: #3f3f46; --plan-ink: #f4f4f5; --plan-muted: #a1a1aa; --plan-accent: #818cf8; }

.pay-qr { margin: 0; display: grid; justify-items: center; gap: .4rem; }
.pay-qr img { width: 11rem; height: 11rem; object-fit: contain; border-radius: .9rem; background: #fff; padding: .5rem; border: 1px solid var(--plan-line, #e5e7eb); }
.pay-qr figcaption { font-size: .8rem; color: var(--plan-muted, #6b7280); }
.rcpt-list { display: grid; gap: .6rem; }
.rcpt-item { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between; padding: .7rem .9rem; border: 1px solid var(--plan-line, #e5e7eb); border-radius: .8rem; font-size: .9rem; }
.rcpt-badge { padding: .15rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.rcpt-badge.pending { background: #fef3c7; color: #92400e; } .rcpt-badge.approved { background: #d1fae5; color: #065f46; } .rcpt-badge.rejected { background: #fee2e2; color: #991b1b; }

/* ───── اشتراك لكل مادة ───── */
.plan-grid-subject { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.plan-subject { border-top: 4px solid var(--plan-accent, #1f3a8c); }
.plan-subject-ic { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: .8rem; color: #fff; background: var(--plan-accent, #1f3a8c); }
.plan-subject-ic svg { width: 1.5rem; height: 1.5rem; }
.plan-subject .plan-cta { background: var(--plan-accent, #1f3a8c); border-color: var(--plan-accent, #1f3a8c); color: #fff; }
.plan-grid-subject .plan-name { min-height: 3.1rem; }