/* ─────────────────────────────────────────────────────────────────
1. تعريف المتغيرات الجمالية والألوان الموحدة للموقع
───────────────────────────────────────────────────────────────── */
:root {
–green-900:#1F3A2E; –green-800:#2D5A3F; –green-700:#3F6B57; –green-500:#5B8A72;
–green-300:#A8C5B5; –green-100:#E8F0EA; –green-50:#F2F7F3;
–cream:#F5F0E8; –cream-2:#EDE6D8; –cream-3:#E5DCCB;
–terra-700:#9C5A3F; –terra-600:#B8694B; –terra-500:#C4795B; –terra-100:#F5E4D8;
–ink:#1A1F1B; –ink-s:#3D4843; –ink-m:#7A8580;
–gold:#C8A864; –gold-l:#F5EDDC;
–shadow-xs:0 1px 3px rgba(31,58,46,.06); –shadow-sm:0 4px 14px rgba(31,58,46,.07);
–shadow-md:0 12px 32px rgba(31,58,46,.09); –shadow-lg:0 22px 50px rgba(31,58,46,.11);
–radius:18px; –max:1280px; –max-tight:820px;
–fs-xs:clamp(.78rem, .72rem + .25vw, .88rem); –fs-sm:clamp(.88rem, .82rem + .25vw, .98rem);
–fs-base:1rem; –fs-lg:clamp(1.1rem, 1rem + .5vw, 1.3rem); –fs-3xl:clamp(2.4rem, 1.6rem + 3.4vw, 4rem);
–fs-hero:clamp(3.2rem, 1.8rem + 6vw, 7rem);
}

/* ─────────────────────────────────────────────────────────────────
2. تنسيقات المقدمة الحسية الفاخرة للأم (Oaza de Respiro)
───────────────────────────────────────────────────────────────── */
.shop-intro { position: relative; overflow: hidden; padding: clamp(64px,8vw,120px) 0 clamp(48px,6vw,88px); background: var(–cream); }
.shop-intro .mesh { position: absolute; inset: -25% -10%; z-index: 0; pointer-events: none; filter: blur(64px); opacity: .5; }
.shop-intro .mesh::before, .shop-intro .mesh::after { content: „”; position: absolute; border-radius: 50%; mix-blend-mode: multiply; }
.shop-intro .mesh::before { width: 46vw; height: 46vw; background: radial-gradient(circle,rgba(168,197,181,.55),transparent 60%); top: -12%; left: 2%; }
.shop-intro .mesh::after { width: 40vw; height: 40vw; background: radial-gradient(circle,rgba(196,121,91,.22),transparent 60%); top: 6%; right: 0; }
.shop-intro .wrap-tight { position: relative; z-index: 2; width: min(92%, var(–max-tight)); margin: 0 auto; }

.intro-orn { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: clamp(22px,3vw,34px); color: var(–terra-500); }
.intro-orn::before, .intro-orn::after { content: „”; height: 1.5px; width: clamp(28px,8vw,64px); background: linear-gradient(90deg,transparent,var(–terra-500)); opacity: .5; border-radius: 2px; }
.intro-orn::after { background: linear-gradient(90deg,var(–terra-500),transparent); }
.intro-orn svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }

.shop-intro h1 { font-family: ‘Fraunces’, Georgia, serif; font-weight: 400; font-size: var(–fs-3xl); line-height: 1.12; letter-spacing: -.025em; text-align: center; color: var(–ink); max-width: 18ch; margin: 0 auto clamp(34px,4.5vw,52px); }
.shop-intro h1 em { font-style: italic; font-weight: 300; color: var(–terra-600); position: relative; white-space: nowrap; }
.shop-intro h1 em::after { content: „”; position: absolute; left: -.04em; right: -.04em; bottom: .06em; height: .16em; background: linear-gradient(90deg,var(–terra-500),var(–gold)); opacity: .16; z-index: -1; border-radius: 50%; filter: blur(2px); }

.mesaj { position: relative; background: linear-gradient(180deg,rgba(255,255,255,.72),rgba(245,240,232,.6)); backdrop-filter: blur(8px); border: 1px solid color-mix(in srgb, var(–green-900) 8%, transparent); border-radius: 26px; padding: clamp(34px,5vw,62px) clamp(26px,5vw,64px); box-shadow: var(–shadow-md); overflow: hidden; }
.mesaj::before { content: „”; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,var(–terra-500),var(–gold),var(–green-700)); opacity: .85; }
.mesaj::after { content: „„”; position: absolute; top: -.18em; left: .18em; font-family: ‘Fraunces’, serif; font-size: clamp(7rem,16vw,12rem); line-height: 1; color: var(–terra-500); opacity: .07; pointer-events: none; font-weight: 400; }
.mesaj p { position: relative; font-size: var(–fs-lg); line-height: 1.78; color: var(–ink-s); margin: 0 0 1.25em; max-width: 62ch; }
.mesaj p:last-child { margin-bottom: 0; }
.mesaj p strong { color: var(–ink); font-weight: 600; }
.mesaj p:first-of-type::first-letter { font-family: ‘Fraunces’, serif; font-weight: 400; font-size: 3.5em; line-height: .78; float: left; margin: .06em .14em 0 0; color: var(–terra-600); }

.mesaj-closing { margin-top: clamp(22px,3vw,32px) !important; padding-top: clamp(20px,3vw,28px); border-top: 1px dashed color-mix(in srgb, var(–terra-500) 35%, transparent); font-family: ‘Fraunces’, serif !important; font-style: italic; font-weight: 400; font-size: clamp(1.18rem,1rem + .8vw,1.42rem) !important; line-height: 1.6 !important; color: var(–ink) !important; letter-spacing: -.01em; }
.intro-end { display: flex; justify-content: center; margin-top: clamp(34px,4.5vw,52px); }
.intro-end span { width: 7px; height: 7px; border-radius: 50%; background: var(–terra-500); opacity: .55; box-shadow: -22px 0 0 -1px color-mix(in srgb, var(–terra-500) 50%, transparent), 22px 0 0 -1px color-mix(in srgb, var(–terra-500) 50%, transparent); }

/* ─────────────────────────────────────────────────────────────────
3. تنسيقات جداول الباقات والأسعار التفاعلية
───────────────────────────────────────────────────────────────── */
.pricing-wrap { background: linear-gradient(180deg, transparent 0%, var(–green-50) 100%); position: relative; padding: clamp(72px,8vw,128px) 0; }
.wrap { width: min(92%, var(–max)); margin: 0 auto; position: relative; }
.section-head { text-align: center; max-width: 780px; margin: 0 auto clamp(48px,5vw,80px); }
.section-head p { color: var(–ink-s); font-size: var(–fs-lg); margin-top: 18px; }
.section-h { font-family: ‘Fraunces’, serif; font-size: var(–fs-3xl); line-height: 1.05; letter-spacing: -.025em; font-weight: 400; color: var(–ink); }
.section-h em { font-style: italic; color: var(–terra-600); font-weight: 400; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: ‘Inter’, sans-serif; font-size: var(–fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(–green-800); margin-bottom: 24px; }
.eyebrow::before { content: „”; width: 28px; height: 1.5px; background: currentColor; opacity: .45; }

.pricing-toggle { display: flex; justify-content: center; margin-bottom: 48px; position: relative; }
.toggle-pill { display: inline-flex; align-items: center; background: rgba(255,255,255,.85); backdrop-filter: blur(10px); border: 1px solid color-mix(in srgb, var(–green-900) 10%, transparent); border-radius: 999px; padding: 6px; gap: 0; box-shadow: var(–shadow-sm); position: relative; width: 100%; max-width: 480px; }
.toggle-pill .slider { position: absolute; top: 6px; bottom: 6px; width: calc(50% – 6px); background: var(–green-800); border-radius: 999px; transition: left .4s cubic-bezier(.4,0,.2,1); left: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.toggle-pill.is-year .slider { left: 50%; }
.toggle-pill button { position: relative; z-index: 1; flex: 1 1 0; padding: 12px 18px; font-size: .92rem; font-weight: 600; color: var(–ink-s); transition: color .25s ease; min-height: 44px; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; border: none; background: transparent; cursor: pointer; }
.toggle-pill button.active { color: var(–cream); }
.toggle-pill .save-tag { display: inline-block; font-size: .62rem; font-weight: 700; background: var(–terra-500); color: #fff; padding: 2px 6px; border-radius: 6px; letter-spacing: .04em; line-height: 1.4; flex-shrink: 0; }

.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; max-width: 1100px; margin: 0 auto; align-items: stretch; }
.plan { background: var(–cream); border-radius: var(–radius); padding: 36px 32px; border: 1px solid color-mix(in srgb, var(–green-900) 8%, transparent); position: relative; display: flex; flex-direction: column; transition: transform .4s cubic-bezier(.4,0,.2,1), box-shadow .4s ease; box-sizing: border-box; }
.plan:hover { transform: translateY(-6px); box-shadow: var(–shadow-lg); }
.plan-recommended { background: var(–green-50); color: var(–ink); border: 2px solid var(–green-700); position: relative; }
.plan-recommended::before { content: „Cel mai ales”; position: absolute; top: -14px; left: 32px; background: linear-gradient(120deg,var(–terra-500),var(–gold)); color: #fff; font-size: .7rem; font-weight: 700; padding: 6px 14px; border-radius: 999px; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 6px 18px rgba(196,121,91,.35); }
.plan-recommended .btn-primary { background: var(–green-800); color: var(–cream); }
.plan-recommended .btn-primary:hover { background: var(–green-900); }
.plan-tier { font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(–ink-m); margin-bottom: 12px; }
.plan h3 { font-family: ‘Fraunces’, serif; font-size: 1.55rem; font-weight: 500; line-height: 1.2; letter-spacing: -.02em; margin-bottom: 10px; color: var(–ink); }
.plan-desc { font-size: .92rem; color: var(–ink-s); line-height: 1.55; margin-bottom: 24px; min-height: 50px; }
.plan-price { display: flex; align-items: baseline; gap: 6px; margin: 20px 0 8px; font-family: ‘Fraunces’, serif; color: var(–ink); }
.plan-price .num { font-size: clamp(2.8rem,4vw,3.6rem); font-weight: 300; line-height: 1; letter-spacing: -.04em; }
.plan-price .cur { font-size: 1rem; font-weight: 500; color: var(–ink-s); margin-left: 2px; }
.plan-price .per { font-size: .95rem; color: var(–ink-m); font-weight: 400; font-family: ‘Inter’, sans-serif; margin-left: 6px; }
.plan-sub { font-size: .85rem; color: var(–ink-m); margin-bottom: 24px; }
.plan-features { list-style: none; padding: 0; margin: 0 0 28px; font-size: .93rem; }
.plan-features li { padding: 7px 0 7px 26px; position: relative; color: var(–ink-s); }
.plan-features li::before { content: „✓”; position: absolute; left: 0; top: 7px; width: 18px; height: 18px; border-radius: 50%; background: var(–green-100); color: var(–green-800); display: grid; place-items: center; font-size: .65rem; font-weight: 700; }
.plan-note { background: color-mix(in srgb, var(–green-800) 5%, var(–cream)); border-left: 3px solid var(–green-700); padding: 14px; border-radius: 0 12px 12px 0; font-size: .85rem; color: var(–ink-s); margin-top: 16px; line-height: 1.55; }
.plan .btn { margin-top: auto; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 16px 30px; border-radius: 999px; font-weight: 600; font-size: var(–fs-sm); transition: all .35s cubic-bezier(.4,0,.2,1); position: relative; overflow: hidden; white-space: nowrap; }
.btn svg { width: 18px; height: 18px; transition: transform .35s ease; }
.btn:hover svg { transform: translateX(4px); }
.btn-primary { background: var(–green-800); color: var(–cream); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, var(–shadow-md); }
.btn-primary::after { content: „”; position: absolute; inset: 0; background: linear-gradient(120deg,transparent 30%,rgba(255,255,255,.12) 50%,transparent 70%); transform: translateX(-100%); transition: transform .8s ease; }
.btn-primary:hover { background: var(–green-900); transform: translateY(-2px); box-shadow: var(–shadow-lg); }
.btn-primary:hover::after { transform: translateX(100%); }
.btn-gold { background: linear-gradient(120deg,var(–terra-500),var(–terra-600)); color: #fff; box-shadow: 0 8px 24px rgba(196,121,91,.3); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(196,121,91,.4); }

@media(max-width: 640px) {
.mesaj p:first-of-type::first-letter { font-size: 2.9em; }
.shop-intro h1 em { white-space: normal; }
}

// سكريبت التحويل اللحظي التفاعلي للتنقل اللحظي بين الباقات السنوية والشهرية
function mamaSetBillingCycle(mode) {
const togglePill = document.getElementById(‘pricingToggle’);
const monthlyGrid = document.getElementById(‘monthly-plans’);
const yearlyGrid = document.getElementById(‘yearly-plans’);
const btnLunar = document.getElementById(‘mama-lunar-trigger’);
const btnAnual = document.getElementById(‘mama-anual-trigger’);

if (mode === ‘yearly’) {
togglePill.classList.add(‘is-year’);
monthlyGrid.style.display = ‘none’;
yearlyGrid.style.display = ‘grid’;
btnLunar.classList.remove(‘active’);
btnAnual.classList.add(‘active’);
} else {
togglePill.classList.remove(‘is-year’);
monthlyGrid.style.display = ‘grid’;
yearlyGrid.style.display = ‘none’;
btnLunar.classList.add(‘active’);
btnAnual.classList.remove(‘active’);
}
}