/* ---------- Base tokens ---------- */
    #mq-teacher-switcher.mq-ts{
      --blue:#2a7de1; --blue-700:#0e4f78;
      --mint:#dff9f1; --mint-ink:#0b5a4d;
      --sun:#ffd857; --sun-2:#f4b73e;
      --ink:#0f2333; --muted:#2a3d4a; --white:#fff;
      --ok:#1fc35c;
      --r-xl:24px; --r-lg:18px; --r-sm:12px; --pill:999px;
      --sh-sm:0 8px 18px rgba(14,79,120,.10);
      --sh-md:0 16px 32px rgba(14,79,120,.12);
      font-family:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
      color:var(--ink);
      padding:28px 14px; background:transparent; position:relative; isolation:isolate;
    }
    #mq-teacher-switcher .wrap{max-width:1200px;margin:0 auto;display:grid;gap:16px;grid-template-columns:1fr}

    /* ---------- Head ---------- */
    #mq-teacher-switcher .title{
      margin:0;text-align:center;font-weight:900;line-height:1.15;
      color:var(--blue-700);letter-spacing:.2px;font-size:clamp(20px,5.4vw,40px)
    }
    #mq-teacher-switcher .sub{
      margin:6px auto 0;text-align:center;color:var(--muted);
      font-size:clamp(14px,3.5vw,18px);max-width:min(72ch,92%)
    }
    #mq-teacher-switcher .underline{
      width:min(320px,60%);height:8px;border-radius:var(--pill);
      background:linear-gradient(90deg,var(--sun),var(--sun-2));
      box-shadow:0 10px 22px rgba(244,183,62,.28);margin:12px auto 0
    }

    /* ---------- Tabs (mobile: سطر قابل للتمرير) ---------- */
    #mq-teacher-switcher .tabs{
      display:flex;gap:10px;margin-top:14px;justify-content:center;flex-wrap:nowrap;
      overflow:auto hidden;scroll-snap-type:x mandatory;padding-bottom:2px
    }
    #mq-teacher-switcher .tab{
      scroll-snap-align:center;flex:0 0 auto;
      appearance:none;border:0;cursor:pointer;
      background:linear-gradient(180deg,#f4f9ff,#eef6ff);
      color:var(--blue-700);font-weight:900;letter-spacing:.2px;
      padding:10px 16px;border-radius:var(--pill);
      box-shadow:inset 0 0 0 2px rgba(42,125,225,.18);
      transition:transform .15s ease,box-shadow .15s ease,background .15s ease
    }
    #mq-teacher-switcher .tab:hover{transform:translateY(-1px)}
    #mq-teacher-switcher .tab:focus-visible{outline:3px solid rgba(11,90,77,.35);outline-offset:2px}
    #mq-teacher-switcher .tab[aria-selected="true"]{
      background:linear-gradient(180deg,#2a7de1,#1e56b5);
      color:#fff; box-shadow:0 10px 20px rgba(42,125,225,.22)
    }

    /* ---------- Panels / Card ---------- */
    #mq-teacher-switcher .panel{display:none}
    #mq-teacher-switcher .panel[aria-hidden="false"]{display:block}
    #mq-teacher-switcher .card{
      position:relative;overflow:visible;background:var(--white);
      border-radius:var(--r-xl);border:1px solid rgba(42,125,225,.16);
      box-shadow:var(--sh-md);
      display:grid;grid-template-columns:1fr;gap:14px;padding:16px
    }
    /* desktop two columns */
    @media (min-width:980px){
      #mq-teacher-switcher .card{grid-template-columns: 420px 1fr; gap: clamp(18px,2.4vw,28px); padding: clamp(18px,2.4vw,26px)}
    }
    /* inner mint stroke */
    #mq-teacher-switcher .card:after{
      content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
      background:linear-gradient(180deg,rgba(11,90,77,.14),transparent);
      -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
      -webkit-mask-composite:xor;mask-composite:exclude;padding:1px
    }

    /* ---------- Media (fixed!) ---------- */
    /* نؤكد إلغاء أي Grid أو صفوف داخل الميديا */
    #mq-teacher-switcher .media{
      position:relative !important;
      display:block !important;
      padding:0 !important;
      margin:0 !important;
      background:linear-gradient(180deg,#fff,#f6fbff);
      border:1px solid rgba(42,125,225,.14);
      border-radius:20px;overflow:hidden;box-shadow:var(--sh-sm);
    }
    /* الصورة بلا فراغ سفلي */
    #mq-teacher-switcher .img{
      display:block !important; width:100% !important; height:auto !important;
      aspect-ratio:4/3; object-fit:cover; margin:0 !important;
      vertical-align:middle !important;
    }
    /* الليبل Overlay فوق الصورة; لا صف تاني ولا border-top قديم */
    #mq-teacher-switcher .badge{
      position:absolute !important;
      left:12px; right:12px; bottom:12px;
      margin:0 !important; padding:10px 12px !important;
      background:rgba(255,255,255,.96) !important;
      border:1px solid rgba(42,125,225,.16) !important;
      border-top:0 !important; border-radius:12px !important;
      box-shadow:0 8px 18px rgba(0,0,0,.08) !important;
    }
    #mq-teacher-switcher .badge b{font-weight:900;color:var(--blue-700)}
    #mq-teacher-switcher .tick{
      width:22px;height:22px;border-radius:999px;background:var(--ok);
      color:#fff;display:inline-grid;place-items:center;font-size:14px
    }
    /* مسافة بسيطة بعد الميديا فقط */
    #mq-teacher-switcher .media + *{ margin-top:12px !important }

    /* ---------- Body ---------- */
    #mq-teacher-switcher h3{
      margin:0 0 6px;font-size:clamp(18px,4.8vw,26px);font-weight:900;color:var(--blue-700);line-height:1.25
    }
    #mq-teacher-switcher p{
      margin:0 0 12px;color:var(--muted);font-size:clamp(15px,4vw,18px);line-height:1.85
    }

    /* features grid: 1 -> 2 -> 3 */
    #mq-teacher-switcher .features{display:grid;gap:10px;grid-template-columns:1fr;margin:12px 0 4px}
    @media (min-width:640px){ #mq-teacher-switcher .features{grid-template-columns:1fr 1fr} }
    @media (min-width:980px){ #mq-teacher-switcher .features{grid-template-columns:repeat(3,1fr)} }
    #mq-teacher-switcher .fi{
      background:linear-gradient(180deg,#ffffff,#fbfdff);
      border:1px solid rgba(42,125,225,.12);
      border-radius:14px;padding:12px;box-shadow:var(--sh-sm);
      display:flex;gap:10px;align-items:flex-start
    }
    #mq-teacher-switcher .fi i{
      width:26px;height:26px;border-radius:8px;background:linear-gradient(180deg,var(--mint),#eafff9);
      display:grid;place-items:center;font-style:normal;font-weight:900;color:var(--mint-ink)
    }
    #mq-teacher-switcher .fi span{font-weight:800;color:var(--blue-700)}

    /* slots row */
    #mq-teacher-switcher .strip{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0}
    #mq-teacher-switcher .slot{
      padding:8px 10px;border-radius:10px;border:1px dashed rgba(42,125,225,.28);
      background:#fff;font-weight:800;font-size:14px;color:var(--blue-700)
    }

    /* CTA (بلا أي إطار حول المجموعة) */
    #mq-teacher-switcher .cta{
      display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;
      border:0 !important; outline:0 !important; box-shadow:none !important;
      background:transparent !important; padding:0 !important;
    }
    #mq-teacher-switcher .btn{
      appearance:none;border:0;cursor:pointer;text-decoration:none;
      padding:12px 18px;border-radius:14px;font-weight:900;width:100%;text-align:center;
      background:linear-gradient(180deg,#2a7de1,#1e56b5);color:#fff;box-shadow:0 10px 22px rgba(42,125,225,.22);
      transition:transform .15s ease, box-shadow .15s ease, filter .15s ease
    }
    #mq-teacher-switcher .btn:hover{ transform:translateY(-2px); box-shadow:0 14px 28px rgba(42,125,225,.28) }
    #mq-teacher-switcher .btn:active{ transform:none; filter:brightness(.98) }
    #mq-teacher-switcher .ghost{
      background:#fff;color:var(--blue-700);border:2px solid rgba(42,125,225,.28);box-shadow:0 6px 14px rgba(30,86,181,.08)
    }
    @media (min-width:640px){ #mq-teacher-switcher .btn{width:auto} }

    /* meta */
    #mq-teacher-switcher .meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;font-size:14px;color:var(--muted)}
    #mq-teacher-switcher .meta b{color:var(--blue-700)}

    /* Reduced motion */
    @media (prefers-reduced-motion:reduce){ #mq-teacher-switcher .tab,#mq-teacher-switcher .btn{transition:none} }
    /* === MEDIA: موبايل يفضل نسبة 4:3، ديسكتوب تغطية كاملة للعمود === */

/* أساسيات عامة (زي ما هي عندك تقريبًا) */
#mq-teacher-switcher .media{
  position:relative !important;
  display:block !important;
  padding:0 !important;
  margin:0 !important;
  background:linear-gradient(180deg,#fff,#f6fbff);
  border:1px solid rgba(42,125,225,.14);
  border-radius:20px;overflow:hidden;box-shadow:var(--sh-sm);
}

/* موبايل/تابلت: نسبة 4:3 */
#mq-teacher-switcher .img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:4/3;
  object-fit:cover;            /* يغطي الإطار حتى مع اقتصاص بسيط */
  margin:0 !important;
  vertical-align:middle !important;
}

/* ديسكتوب: خلي الميديا تتمدد لطول الصف كله، والصورة تملى الإطار تمامًا */
@media (min-width:980px){
  #mq-teacher-switcher .card{ align-items:stretch }  /* نتأكد من التمدد */
  #mq-teacher-switcher .media{
    height:100%;              /* خليه قدّ عمود الكارت */
    min-height:360px;         /* ارتفاع أدنى مناسب */
  }
  #mq-teacher-switcher .media .img{
    height:100% !important;   /* تملى كل الإطار رأسيًا */
    width:100% !important;
    aspect-ratio:auto;        /* ألغِ النسبة هنا عشان يملأ بالكامل */
    object-fit:cover;         /* تغطية كاملة */
  }
}

/* البادج يفضل Overlay زي ما هو */
#mq-teacher-switcher .badge{
  position:absolute !important;
  left:12px; right:12px; bottom:12px;
  margin:0 !important; padding:10px 12px !important;
  background:rgba(255,255,255,.96) !important;
  border:1px solid rgba(42,125,225,.16) !important;
  border-top:0 !important; border-radius:12px !important;
  box-shadow:0 8px 18px rgba(0,0,0,.08) !important;
}