/**
 * 2nd Bac WhatsApp Course landing page — v2 redesign.
 * Bold, playful, illustrated style with a dedicated purple/orange/
 * gold palette (this page only — intentionally distinct from the
 * site's navy/green/gold identity, per the site owner's direction).
 * Fully Arabic (RTL), living inside the site's normal English
 * header/footer. Loaded only on page-2bac-whatsapp-course.php.
 *
 * @package MyTeacher_Child
 */

.mt-2bac-course{
	--purple:#2D1B4E; --purple-deep:#1D1032; --purple-tint:#F1ECFA;
	--orange:#FF8A3D; --orange-deep:#F06A1F; --orange-tint:#FFEEE0;
	--gold:#FFC93C; --gold-deep:#F0A500; --gold-tint:#FFF6DD;
	--teal:#3FB6C4; --teal-deep:#2A93A0; --teal-tint:#E3F6F8;
	--wa:#25D366; --wa-deep:#1DA851;
	--cream:#FFFBF5; --line:#EEE6F5; --ink:#2D1B4E; --ink-soft:#6B5B87;
	direction:rtl; font-family:'IBM Plex Sans Arabic',sans-serif; color:var(--ink); line-height:1.75;
	background:var(--cream);
}
.mt-2bac-course *{ box-sizing:border-box; }
.mt-2bac-course h1,.mt-2bac-course h2,.mt-2bac-course h3{ font-weight:800; margin:0; color:var(--purple); }
.mt-2bac-course .wrap{ max-width:820px; margin:0 auto; padding:0 22px; position:relative; z-index:2; }

/* ---------------- HERO ---------------- */
.mt-2bac-course .hero{ position:relative; padding:50px 0 40px; overflow:hidden; background:var(--cream); }
.mt-2bac-course .hero-grid{ display:flex; align-items:center; gap:20px; position:relative; z-index:2; }
.mt-2bac-course .hero-photo-col{ flex:0 0 42%; position:relative; display:flex; justify-content:center; }
.mt-2bac-course .hero-blob{
	position:absolute; width:340px; height:340px; border-radius:44% 56% 58% 42% / 48% 44% 56% 52%;
	background:linear-gradient(150deg,var(--gold),var(--orange)); top:8%; z-index:0;
}
.mt-2bac-course .hero-photo{ position:relative; z-index:1; max-width:100%; height:auto; filter:drop-shadow(0 18px 24px rgba(45,27,78,.18)); }
.mt-2bac-course .hero-text-col{ flex:1; text-align:right; }
.mt-2bac-course .hero-badge{
	display:inline-flex; align-items:center; gap:8px; background:var(--purple); color:var(--gold);
	font-size:.82rem; font-weight:700; padding:7px 16px; border-radius:999px; margin-bottom:18px;
}
.mt-2bac-course .hero h1{ font-size:1.9rem; line-height:1.5; margin-bottom:14px; }
.mt-2bac-course .hero h1 span{ color:var(--orange); position:relative; }
.mt-2bac-course .hero-lead{ font-size:.98rem; color:var(--ink-soft); margin:0 0 24px; }
.mt-2bac-course .cta-wa{
	display:inline-flex; align-items:center; gap:10px; background:var(--wa); color:#fff; text-decoration:none;
	font-weight:800; font-size:1rem; padding:15px 30px; border-radius:14px;
	box-shadow:0 12px 26px -8px rgba(37,211,102,.55); transition:transform .15s ease, background .15s ease;
}
.mt-2bac-course .cta-wa:hover{ background:var(--wa-deep); transform:translateY(-2px); color:#fff; }
.mt-2bac-course .cta-wa svg{ width:21px; height:21px; flex-shrink:0; }
.mt-2bac-course .hero-note{ margin-top:16px; font-size:.85rem; color:var(--ink-soft); }
.mt-2bac-course .spots-badge{
	display:inline-flex; align-items:center; gap:8px; margin-top:14px; background:var(--gold-tint);
	border:1.5px solid var(--gold); color:var(--gold-deep); font-weight:800; font-size:.85rem;
	padding:8px 16px; border-radius:999px;
}
.mt-2bac-course .spots-badge .dot{
	width:8px; height:8px; border-radius:50%; background:var(--gold-deep); flex-shrink:0;
	animation:mt2bac-pulse-dot 1.8s ease-in-out infinite;
}
@keyframes mt2bac-pulse-dot{
	0%, 100%{ box-shadow:0 0 0 0 rgba(240,165,0,.5); }
	50%{ box-shadow:0 0 0 6px rgba(240,165,0,0); }
}
@media (max-width:700px){
	.mt-2bac-course .hero-grid{ flex-direction:column; }
	.mt-2bac-course .hero-photo-col{ flex:none; order:1; margin-bottom:10px; }
	.mt-2bac-course .hero-blob{ width:260px; height:260px; }
	.mt-2bac-course .hero-photo{ max-width:220px; }
	.mt-2bac-course .hero-text-col{ order:2; text-align:center; }
}

/* ---------------- SECTION SHELLS ---------------- */
.mt-2bac-course .section{ padding:56px 0; position:relative; overflow:hidden; }
.mt-2bac-course .section-cream{ background:var(--cream); }
.mt-2bac-course .section-purple{ background:var(--purple); }
.mt-2bac-course .section h2{ font-size:1.6rem; text-align:center; margin-bottom:10px; }
.mt-2bac-course .section-purple h2{ color:#fff; }
.mt-2bac-course .section-lead{ text-align:center; color:var(--ink-soft); max-width:520px; margin:0 auto 36px; font-size:.96rem; }
.mt-2bac-course .section-purple .section-lead{ color:rgba(255,255,255,.7); }

.mt-2bac-course .eyebrow-badge{ display:block; text-align:center; margin-bottom:12px; }
.mt-2bac-course .eyebrow-badge span{ display:inline-flex; align-items:center; gap:7px; font-size:.8rem; font-weight:800; padding:6px 16px; border-radius:999px; }
.mt-2bac-course .eb-orange span{ background:var(--orange-tint); color:var(--orange-deep); }
.mt-2bac-course .eb-teal span{ background:var(--teal-tint); color:var(--teal-deep); }
.mt-2bac-course .eb-gold span{ background:var(--gold-tint); color:var(--gold-deep); }

/* ---------------- ICON BADGES ---------------- */
.mt-2bac-course .icon-badge{ width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mt-2bac-course .icon-badge svg{ width:28px; height:28px; }
.mt-2bac-course .ib-orange{ background:linear-gradient(135deg,var(--orange),var(--orange-deep)); }
.mt-2bac-course .ib-teal{ background:linear-gradient(135deg,var(--teal),var(--teal-deep)); }
.mt-2bac-course .ib-gold{ background:linear-gradient(135deg,var(--gold),var(--gold-deep)); }
.mt-2bac-course .ib-purple{ background:linear-gradient(135deg,#5D3E94,var(--purple)); }

/* ---------------- BENEFITS ---------------- */
.mt-2bac-course .benefits{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .mt-2bac-course .benefits{ grid-template-columns:1fr; } }
.mt-2bac-course .benefit{
	display:flex; flex-direction:column; gap:14px; background:#fff; border:2px solid var(--line); border-radius:20px;
	padding:22px 20px; box-shadow:0 8px 22px -14px rgba(45,27,78,.25);
}
.mt-2bac-course .benefit h3{ font-size:1rem; margin-bottom:4px; }
.mt-2bac-course .benefit p{ margin:0; font-size:.87rem; color:var(--ink-soft); }

/* ---------------- CURRICULUM CARDS (BeeBright-style course cards) ---------------- */
.mt-2bac-course .curric-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:760px){ .mt-2bac-course .curric-grid{ grid-template-columns:1fr; max-width:340px; margin-inline:auto; } }
.mt-2bac-course .curric-card{
	border-radius:24px; overflow:hidden; position:relative; box-shadow:0 14px 30px -18px rgba(45,27,78,.35);
	display:flex; flex-direction:column;
}
.mt-2bac-course .curric-top{ position:relative; padding:22px 16px 0; display:flex; justify-content:center; align-items:flex-end; height:210px; overflow:hidden; }
.mt-2bac-course .curric-top img{ position:relative; z-index:1; height:230px; width:auto; object-fit:contain; object-position:bottom; }
.mt-2bac-course .curric-badge{
	position:absolute; top:14px; inset-inline-end:14px; background:rgba(255,255,255,.92); color:var(--purple);
	font-size:.72rem; font-weight:800; padding:5px 12px; border-radius:999px; z-index:2;
}
.mt-2bac-course .curric-bottom{ background:#fff; padding:18px 18px 20px; border-radius:22px 22px 0 0; margin-top:-14px; position:relative; z-index:2; }
.mt-2bac-course .curric-bottom h3{ font-size:1.02rem; margin-bottom:6px; }
.mt-2bac-course .curric-bottom p{ font-size:.85rem; color:var(--ink-soft); margin:0; }
.mt-2bac-course .curric-1 .curric-top{ background:linear-gradient(160deg,var(--orange),var(--orange-deep)); }
.mt-2bac-course .curric-2 .curric-top{ background:linear-gradient(160deg,#8B6FC4,#5D3E94); }
.mt-2bac-course .curric-3 .curric-top{ background:linear-gradient(160deg,var(--teal),var(--teal-deep)); }

/* ---------------- CLASS CARD ---------------- */
.mt-2bac-course .class-card{
	background:linear-gradient(160deg,var(--purple-deep),var(--purple)); color:rgba(255,255,255,.94); border-radius:26px;
	padding:36px 30px; margin:0 auto; max-width:520px; position:relative; overflow:hidden;
}
.mt-2bac-course .class-card::before{
	content:""; position:absolute; top:-60px; left:-60px; width:180px; height:180px; border-radius:50%;
	background:radial-gradient(circle, rgba(255,201,60,.25), transparent 70%);
}
.mt-2bac-course .class-card h3{ color:#fff; font-size:1.15rem; text-align:center; margin-bottom:24px; position:relative; }
.mt-2bac-course .spec-row{ display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.14); font-size:.95rem; position:relative; }
.mt-2bac-course .spec-row:last-child{ border-bottom:none; }
.mt-2bac-course .spec-row .label{ display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.7); }
.mt-2bac-course .spec-row .label svg{ width:18px; height:18px; color:var(--gold); flex-shrink:0; }
.mt-2bac-course .spec-row .value{ font-weight:800; color:var(--gold); }

/* ---------------- STATS BAND ---------------- */
.mt-2bac-course .stats-band{ display:flex; justify-content:center; gap:0; max-width:480px; margin:0 auto; flex-wrap:wrap; }
.mt-2bac-course .stat-pill{ flex:1; min-width:120px; text-align:center; padding:18px 10px; }
.mt-2bac-course .stat-pill b{ display:block; font-size:1.9rem; font-family:'Poppins',sans-serif; }
.mt-2bac-course .stat-pill span{ font-size:.8rem; color:var(--ink-soft); }
.mt-2bac-course .stat-pill:nth-child(1) b{ color:var(--orange-deep); }
.mt-2bac-course .stat-pill:nth-child(2) b{ color:var(--teal-deep); }
.mt-2bac-course .stat-pill:nth-child(3) b{ color:var(--gold-deep); }

/* ---------------- STEPS ---------------- */
.mt-2bac-course .steps{ display:flex; flex-direction:column; gap:0; max-width:540px; margin:0 auto; }
.mt-2bac-course .step{ display:flex; gap:18px; padding:20px 0; position:relative; }
.mt-2bac-course .step:not(:last-child)::before{
	content:""; position:absolute; right:23px; top:56px; bottom:-8px; width:2px;
	background:repeating-linear-gradient(180deg,var(--line) 0 6px, transparent 6px 12px);
}
.mt-2bac-course .step-num{
	flex-shrink:0; width:46px; height:46px; border-radius:50%;
	background:linear-gradient(135deg,var(--orange),var(--orange-deep)); color:#fff;
	display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.1rem; z-index:1;
	box-shadow:0 6px 16px -6px rgba(240,106,31,.6);
}
.mt-2bac-course .step-body{ background:#fff; border:2px solid var(--line); border-radius:16px; padding:14px 18px; flex:1; }
.mt-2bac-course .step h3{ font-size:1rem; margin-bottom:4px; }
.mt-2bac-course .step p{ margin:0; font-size:.87rem; color:var(--ink-soft); }

/* ---------------- ABOUT ---------------- */
.mt-2bac-course .about-card{
	background:#fff; border-radius:26px; padding:36px 30px; text-align:center; max-width:580px; margin:0 auto;
	box-shadow:0 14px 34px -18px rgba(45,27,78,.3); position:relative;
}
.mt-2bac-course .about-avatar{
	width:74px; height:74px; border-radius:50%; margin:0 auto 18px;
	background:linear-gradient(135deg,var(--gold),var(--gold-deep)); display:flex; align-items:center; justify-content:center;
}
.mt-2bac-course .about-avatar svg{ width:36px; height:36px; color:#fff; }
.mt-2bac-course .about-card p{ font-size:.95rem; color:var(--ink-soft); margin:0 0 22px; max-width:440px; margin-inline:auto; }
.mt-2bac-course .about-stats{ display:flex; justify-content:center; gap:0; }
.mt-2bac-course .about-stat{ flex:1; padding:0 10px; border-inline-start:1px solid var(--line); }
.mt-2bac-course .about-stat:first-child{ border-inline-start:none; }
.mt-2bac-course .about-stat b{ display:block; font-size:1.5rem; color:var(--purple); font-family:'Poppins',sans-serif; }
.mt-2bac-course .about-stat span{ font-size:.76rem; color:var(--ink-soft); }

/* ---------------- FAQ ---------------- */
.mt-2bac-course .faq{ max-width:620px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.mt-2bac-course .faq-item{ background:#fff; border:2px solid var(--line); border-radius:16px; overflow:hidden; }
.mt-2bac-course .faq-q{
	width:100%; text-align:right; background:none; border:none; padding:17px 19px; font-family:inherit;
	font-size:.96rem; font-weight:800; color:var(--purple); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.mt-2bac-course .faq-q .chev{ transition:transform .2s ease; color:var(--orange); flex-shrink:0; }
.mt-2bac-course .faq-item.open .faq-q .chev{ transform:rotate(180deg); }
.mt-2bac-course .faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.mt-2bac-course .faq-item.open .faq-a{ max-height:200px; }
.mt-2bac-course .faq-a-in{ padding:0 19px 17px; font-size:.9rem; color:var(--ink-soft); }

/* ---------------- FINAL CTA ---------------- */
.mt-2bac-course .final-cta{ text-align:center; padding:64px 0 60px; position:relative; }
.mt-2bac-course .final-cta h2{ color:#fff; margin-bottom:12px; }
.mt-2bac-course .final-cta p{ color:rgba(255,255,255,.7); max-width:460px; margin:0 auto 30px; }

/* ---------------- STICKY MOBILE BAR ---------------- */
.mt-2bac-course .sticky-bar{
	position:sticky; bottom:0; background:#fff; border-top:2px solid var(--line); padding:12px 18px;
	display:none; z-index:20;
}
.mt-2bac-course .sticky-bar .cta-wa{ width:100%; justify-content:center; padding:13px; font-size:.95rem; box-shadow:none; }
@media (max-width:640px){ .mt-2bac-course .sticky-bar{ display:block; } }
