/* ===== Scope Lock ===== */
:where(#mq-join-clean){
--mint:#baf4e6; --mint-ink:#085c50;
--sun:#ffd76a; --sun-2:#f3b642;
--sky:#0a6aa1; --ink:#0f2333; --muted:#2a3d4a; --white:#fff;
--r-xl:24px; --r-lg:18px; --pill:999px;
--sh-sm:0 8px 18px rgba(6,55,94,.10);
--sh-md:0 18px 36px rgba(6,55,94,.12);
font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
color:var(--ink);
padding:24px 14px; background:transparent; position:relative; isolation:isolate;
line-height:1.65; overflow:visible; -webkit-text-size-adjust:100%; text-size-adjust:100%
}
:where(#mq-join-clean * ){ box-sizing:border-box; min-width:0 }
/* ===== Background ===== */
#mq-join-clean .mqj-bg{
position:absolute; inset:0; z-index:-1; pointer-events:none;
background:
radial-gradient(480px 240px at -10% 10%, color-mix(in oklab, var(--mint) 70%, white), transparent 55%),
radial-gradient(560px 260px at 110% 0%, color-mix(in oklab, var(--sun) 55%, white), transparent 58%);
filter:saturate(108%); opacity:.9;
}
/* ===== Layout ===== */
#mq-join-clean .mqj-wrap{ width:100%; max-width:1180px; margin:0 auto; display:grid; gap:14px; grid-template-columns:1fr; align-items:start }
/* ===== Card (Hero) ===== */
#mq-join-clean .mqj-hero{
background:linear-gradient(180deg,#ffffffee,#ffffff);
border:1px solid rgba(14,79,120,.10);
border-radius:var(--r-xl); box-shadow:var(--sh-md);
padding:16px; display:grid; gap:12px; overflow:visible;
}
#mq-join-clean .mqj-badge{
width:max-content; display:inline-flex; align-items:center; gap:8px;
padding:8px 12px; border-radius:var(--pill);
background:linear-gradient(180deg,var(--sun),var(--sun-2)); color:#4b3000; font-weight:900;
box-shadow:0 12px 24px rgba(243,182,66,.30); font-size:13px; letter-spacing:.2px;
}
#mq-join-clean .mqj-title{ margin:2px 0 0; color:var(--sky); font-weight:900; line-height:1.18; letter-spacing:.2px; font-size:clamp(20px,5.5vw,36px); text-wrap:balance }
#mq-join-clean .mqj-lead{ margin:0; color:var(--muted); line-height:1.85; font-size:15.5px; text-wrap:pretty }
/* ===== Actions ===== */
#mq-join-clean .mqj-actions{ display:flex; gap:10px; flex-wrap:wrap }
#mq-join-clean .mqj-btn{
appearance:none; border:0; cursor:pointer; text-decoration:none; font-weight:900;
padding:14px 16px; border-radius:var(--pill); text-align:center; width:100%;
transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
min-height:48px; font-size:15px;
}
#mq-join-clean .mqj-btn--primary{ background:linear-gradient(180deg,var(--sun),var(--sun-2)); color:#4b3000; box-shadow:0 12px 24px rgba(243,182,66,.30) }
#mq-join-clean .mqj-btn--ghost{ background:linear-gradient(180deg,var(--mint),#e8fff9); color:var(--mint-ink); border:1px solid color-mix(in oklab, var(--mint-ink) 26%, white) }
#mq-join-clean .mqj-btn:hover{ transform:translateY(-2px) }
/* ===== Chips ===== */
#mq-join-clean .mqj-chips{ display:grid; grid-template-columns:1fr; gap:10px }
#mq-join-clean .mqj-chip{
display:flex; gap:10px; align-items:flex-start; background:linear-gradient(180deg,#fff,#fbfdff);
border:1px solid rgba(14,79,120,.10); border-radius:14px; padding:10px; box-shadow:var(--sh-sm)
}
#mq-join-clean .mqj-chip i{
width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-style:normal;font-weight:900;flex:0 0 auto;
color:#0e4f78; background:linear-gradient(180deg,var(--mint),#d2fff6);
box-shadow:inset 0 0 0 6px #fff, 0 8px 16px rgba(8,92,80,.16)
}
#mq-join-clean .mqj-chip b{ color:#0e4f78 }
/* ===== Metrics ===== */
#mq-join-clean .mqj-metrics{ display:grid; grid-template-columns:1fr; gap:10px }
#mq-join-clean .mqj-metric{
position:relative; text-align:center; padding:14px; background:linear-gradient(180deg,#fff,#fbfdff);
border:1px solid rgba(14,79,120,.10); border-radius:14px; box-shadow:var(--sh-sm); overflow:hidden;
}
#mq-join-clean .mqj-metric::before{ content:""; position:absolute; inset:auto -15% 0 -15%; height:6px; border-radius:999px; background:linear-gradient(90deg,var(--mint),#9ef0df) }
#mq-join-clean .mqj-metric:nth-child(2)::before{ background:linear-gradient(90deg,var(--sun),var(--sun-2)) }
#mq-join-clean .mqj-metric:nth-child(3)::before{ background:linear-gradient(90deg,#eaf4ff,var(--mint)) }
#mq-join-clean .mqj-num{ display:block; font-weight:900; color:#0e4f78; font-size:clamp(20px,5vw,30px); line-height:1; margin-bottom:8px; transform:translateY(8px); opacity:0; animation:mqjFlip .6s cubic-bezier(.2,.7,.2,1) both .12s }
#mq-join-clean .mqj-label{ display:block; color:var(--muted); font-weight:700; font-size:12.5px }
/* ===== Reviews (scoped) ===== */
#mq-join-clean .mqj-dock{
background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,.42));
backdrop-filter: blur(8px);
border:1px solid rgba(14,79,120,.16);
border-radius:var(--r-xl); box-shadow:var(--sh-md);
padding:14px; display:grid; gap:12px; overflow:visible; margin-bottom:14px;
}
#mq-join-clean .mqj-dock-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap }
#mq-join-clean .mqj-dock-head b{ color:#0e4f78; font-size:16px }
#mq-join-clean .mqj-trust{
display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:var(--pill);
background:linear-gradient(180deg,var(--sun),var(--sun-2)); color:#4b3000; font-weight:900; text-decoration:none; box-shadow:0 10px 22px rgba(243,182,66,.30)
}
#mq-join-clean .mqj-trust svg{ width:16px;height:16px }
/* تنظيف ستايلات البلجن داخل الحاوية فقط */
#mq-join-clean .mqj-reviews .brtpmj_reviews_container{ background:transparent!important; border:0!important; padding:0!important; box-shadow:none!important; color:var(--ink); font-family:inherit }
#mq-join-clean .mqj-reviews .mqj-carousel{ position:relative; overflow:hidden; border-radius:16px; background:#ffffffa6; border:1px solid rgba(14,79,120,.14); box-shadow:var(--sh-sm); padding:10px }
#mq-join-clean .mqj-reviews .brtpmj_all_reviews.carousel{
display:flex; gap:16px; transition:transform .4s ease; will-change:transform;
scroll-behavior:smooth; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
scroll-snap-type:x mandatory; padding-bottom:6px;
}
#mq-join-clean .mqj-reviews .brtpmj_all_reviews.carousel::-webkit-scrollbar{ display:none }
#mq-join-clean .mqj-reviews .brtpmj_single_rvw{
min-width:calc(100% - 4px); background:linear-gradient(180deg,#ffffff,#fbfdff);
border:1px solid rgba(14,79,120,.12); border-radius:14px; padding:14px; box-shadow:var(--sh-sm);
scroll-snap-align:start;
}
/* ضبط أحجام الخط داخل الريفيوز */
#mq-join-clean .mqj-reviews :where(.brtpmj_rvw_title){ font-size:18px; line-height:1.3; font-weight:800; margin-bottom:6px }
#mq-join-clean .mqj-reviews :where(.brtpmj_rvw_body){ font-size:14.5px; line-height:1.65 }
/* أزرار التنقل */
#mq-join-clean .mqj-nav{ position:absolute; left:0; right:0; bottom:8px; display:flex; justify-content:center; gap:8px; z-index:3; pointer-events:none }
#mq-join-clean .mqj-nav-btn{ pointer-events:auto; appearance:none; border:0; width:40px; height:40px; border-radius:12px;
background:linear-gradient(180deg,var(--sun),var(--sun-2)); color:#4b3000; font-weight:900; box-shadow:0 10px 22px rgba(243,182,66,.28); transition:transform .15s ease, box-shadow .15s ease }
#mq-join-clean .mqj-nav-btn:hover{ transform:translateY(-1px); box-shadow:0 14px 28px rgba(243,182,66,.36) }
/* ===== Breakpoints ===== */
@media (min-width:560px){
#mq-join-clean .mqj-actions .mqj-btn{ width:auto; min-width:180px; font-size:16px }
#mq-join-clean .mqj-chips{ grid-template-columns: repeat(2, minmax(0,1fr)) }
#mq-join-clean .mqj-reviews .brtpmj_single_rvw{ min-width:calc(50% - 6px) }
}
@media (min-width:768px){
#mq-join-clean .mqj-metrics{ grid-template-columns: repeat(3, minmax(0,1fr)) }
#mq-join-clean .mqj-chips{ grid-template-columns: repeat(3, minmax(0,1fr)) }
}
@media (min-width:1024px){
#mq-join-clean{ padding: clamp(32px,6vw,88px) 16px }
#mq-join-clean .mqj-wrap{ grid-template-columns: 1.08fr .92fr; gap: clamp(16px,2.4vw,24px) }
#mq-join-clean .mqj-dock{ position:sticky; top:20px }
#mq-join-clean .mqj-bg{
-webkit-mask:url('data:image/svg+xml;utf8,') top/100% 110% no-repeat;
mask:url('data:image/svg+xml;utf8,') top/100% 110% no-repeat;
height:420px; inset:-40px 0 auto 0;
}
/* 3 كروت ثابتة تقريبًا على الديسكتوب */
#mq-join-clean .mqj-reviews .brtpmj_single_rvw{ flex:0 0 clamp(300px, 31%, 360px); min-width:auto; max-width:100% }
}
@media (min-width:1280px){
#mq-join-clean .mqj-reviews .brtpmj_single_rvw{ flex-basis: clamp(320px, 30%, 380px) }
}
@media (min-width:1536px){
#mq-join-clean .mqj-reviews .brtpmj_single_rvw{ flex-basis: clamp(340px, 28%, 400px) }
}
/* ===== Animations ===== */
@keyframes mqjFlip{ 0%{opacity:0; transform:translateY(8px) rotateX(30deg)} 60%{opacity:1; transform:translateY(0) rotateX(0)} 100%{opacity:1; transform:translateY(0)} }
@media (prefers-reduced-motion:reduce){
#mq-join-clean .mqj-num{ animation:none }
#mq-join-clean .mqj-btn, #mq-join-clean .mqj-nav-btn{ transition:none }
}