/* ============================================================================
   وضع Pi — مظهر صفحات الاشتراك على mainnet.mad3oom.com.

   نفس لغة صفحة الدخول: هوية مدعوم مع ذهب عملة π وبنفسجي ليلي. الألوان
   مستوحاة من Pi لا منسوخة (شروط إدراج Mainnet تمنع ألوان Pi وشعارها الرسميين).
   كل القواعد تحت html[data-pi-mode] فلا أثر لها على الموقع العادي.
============================================================================ */

html[data-pi-mode] {
    --pi-night: #120A2A;
    --pi-indigo: #1D1245;
    --pi-violet: #4B2A7B;
    --pi-violet-soft: #EFE8FA;
    --pi-gold: #F2B33D;
    --pi-gold-deep: #D9921C;
    --pi-gold-ink: #8A5A0B;
    --pi-lavender: #CFC6EA;
}

.pi-strip { display: none; }

/* ── شريط Pi: يشرح الدفع في سطرين، ويحمل الحلقة الذهبية نفسها ─────────── */
html[data-pi-mode] .pi-strip {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin: 1.25rem 0 2rem;
    padding: 1.25rem 1.5rem;
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(500px 220px at 15% 0%, rgba(242, 179, 61, 0.18), transparent 70%),
        linear-gradient(135deg, var(--pi-indigo) 0%, var(--pi-night) 100%);
    box-shadow: 0 18px 40px rgba(18, 10, 42, 0.25);
}
.pi-strip-mark {
    flex: none;
    width: 56px; height: 56px;
    display: grid; place-items: center;
    position: relative;
}
.pi-strip-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pi-strip-mark circle.track { fill: none; stroke: rgba(242, 179, 61, 0.2); stroke-width: 2; }
.pi-strip-mark circle.ring {
    fill: none; stroke: var(--pi-gold); stroke-width: 3; stroke-linecap: round;
    stroke-dasharray: 72 100; transform: rotate(-90deg); transform-origin: 28px 28px;
}
.pi-strip-mark span {
    font: 700 1.5rem/1 Georgia, 'Times New Roman', serif;
    color: var(--pi-gold);
}
.pi-strip-text strong { display: block; font-size: 1.05rem; font-weight: 800; margin-bottom: 0.2rem; }
.pi-strip-text p { margin: 0; color: var(--pi-lavender); font-size: 0.9rem; line-height: 1.8; }

/* ── مفتاح شهري/سنوي ────────────────────────────────────────────────────── */
html[data-pi-mode] #billingToggle .toggle-option.active {
    background: var(--pi-violet);
    color: #fff;
}

/* ── البطاقات: السعر بالذهب الداكن (مقروء على الأبيض)، والمميزة بنفسجية ── */
html[data-pi-mode] .pricing-card .plan-price .amount { color: var(--pi-gold-ink); }
html[data-pi-mode] .pricing-card .plan-price .currency {
    font-family: Georgia, 'Times New Roman', serif;
    color: var(--pi-gold-deep);
    font-size: 1.4rem;
}
html[data-pi-mode] .pricing-card:hover { border-color: var(--pi-gold); }
html[data-pi-mode] .pricing-card.featured {
    border-color: var(--pi-violet);
    box-shadow: 0 18px 44px rgba(75, 42, 123, 0.18);
}
html[data-pi-mode] .pricing-card .badge {
    background: var(--pi-violet);
}
html[data-pi-mode] .pricing-card .feature-icon { color: var(--pi-violet); }

/* زر الاشتراك هو الدفع نفسه في وضع Pi، فيأخذ ذهب زر الدخول */
html[data-pi-mode] [data-plan-btn]:not(:disabled),
html[data-pi-mode] #renewSubscriptionBtn {
    background: linear-gradient(180deg, #F7C35A 0%, var(--pi-gold) 55%, var(--pi-gold-deep) 100%);
    border: 0;
    color: var(--pi-night);
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(242, 179, 61, 0.28);
}
html[data-pi-mode] [data-plan-btn]:not(:disabled):hover,
html[data-pi-mode] #renewSubscriptionBtn:hover {
    filter: brightness(1.04);
    box-shadow: 0 10px 26px rgba(242, 179, 61, 0.38);
}
html[data-pi-mode] [data-plan-btn]:focus-visible,
html[data-pi-mode] #renewSubscriptionBtn:focus-visible {
    outline: 3px solid var(--pi-violet);
    outline-offset: 3px;
}
/* خطة بلا سعر Pi: البطاقة نفسها تقول ذلك */
html[data-pi-mode] .pricing-card[data-pi-unavailable] { opacity: 0.6; }

/* ── الوضع الليلي في البوابة: الذهب الداكن يقل وضوحه على الداكن ───────── */
html[data-pi-mode][data-theme="dark"] .pricing-card .plan-price .amount { color: var(--pi-gold); }
html[data-pi-mode][data-theme="dark"] .pricing-card.featured { border-color: #8A63C9; }

@media (max-width: 620px) {
    html[data-pi-mode] .pi-strip { padding: 1rem 1.1rem; gap: 0.9rem; }
    .pi-strip-mark { width: 48px; height: 48px; }
    .pi-strip-mark circle.ring { transform-origin: 24px 24px; }
}