@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap');

.xxlms-front, .xxlms-front *,
.xxlms-modal, .xxlms-modal *,
.xxlms-player-modal, .xxlms-player-modal *,
.xxlms-quiz-modal, .xxlms-quiz-modal *,
.xxlms-attempt-modal, .xxlms-attempt-modal *,
.xxlms-ptest-result-modal, .xxlms-ptest-result-modal *,
.xxlms-dashboard, .xxlms-dashboard *{
  font-family:'Tajawal', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap');
.xxlms-course{direction:rtl;font-family:inherit;color:#0f172a}
.xxlms-course *{box-sizing:border-box}
.xxlms-container{max-width:1200px;margin:0 auto;padding:18px 14px}
.xxlms-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.xxlms-title{font-size:34px;line-height:1.15;margin:0;font-weight:900;letter-spacing:.2px}
.xxlms-submeta{display:flex;gap:10px;flex-wrap:wrap;color:#64748b;font-weight:700;font-size:13px}
.xxlms-submeta .xxlms-chip{background:#f1f5f9;border:1px solid #e2e8f0;padding:6px 10px;border-radius:999px}

.xxlms-grid{display:grid;grid-template-columns:380px 1fr;gap:18px;align-items:start}
@media (max-width:980px){.xxlms-grid{grid-template-columns:1fr}}

.xxlms-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;box-shadow:0 12px 28px rgba(2,6,23,.06);overflow:hidden}
.xxlms-card-pad{padding:16px}

.xxlms-video-wrap{position:relative;background:#0b1220}
.xxlms-video-wrap iframe,.xxlms-video-wrap video{width:100%;height:240px;display:block}
.xxlms-video-wrap iframe{border:0}

/* Google Drive + direct video enhancements */
.xxlms-video-wrap{border-radius:14px;overflow:hidden}
.xxlms-video-tag{background:#000}
.xxlms-video-note{font-size:12px;opacity:.7;margin:8px 0 0;color:#fff;padding:0 8px 10px}

.xxlms-iframe-wrap{position:relative;width:100%;padding-top:56.25%;background:#000}
.xxlms-iframe-wrap iframe{position:absolute;inset:0;width:100%;height:100%}
.xxlms-video-placeholder{color:#fff;min-height:240px;display:flex;align-items:center;justify-content:center;padding:18px;text-align:center;font-weight:900}

.xxlms-side-row{display:flex;justify-content:space-between;gap:12px;padding:14px 16px;border-top:1px solid #eef2f7}
.xxlms-side-row .xxlms-label{color:#64748b;font-weight:800}
.xxlms-side-row .xxlms-val{font-weight:900}
.xxlms-price{color:#ea580c}

.xxlms-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 16px;border-top:1px solid #eef2f7}
.xxlms-stat{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:12px;text-align:center}
.xxlms-stat .n{font-weight:1000;font-size:18px}
.xxlms-stat .t{color:#64748b;font-weight:800;font-size:12px;margin-top:2px}

.xxlms-btn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 14px;border:0;border-radius:14px;font-weight:1000;cursor:pointer;transition:transform .05s ease;background:#1d4ed8;color:#fff}
.xxlms-btn:active{transform:translateY(1px)}
.xxlms-btn.secondary{background:#0f172a}
.xxlms-btn.disabled{opacity:.6;cursor:not-allowed}

/* Action icons (Personal Tests table) */
.xxlms-action-icons{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.xxlms-iconbtn{
  width:44px;height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:14px;
  text-decoration:none;
  border:1px solid #e2e8f0;
  background:#fff;
  color:#0f172a;
  cursor:pointer;
  transition:transform .05s ease, filter .15s ease;
}
.xxlms-iconbtn svg{width:20px;height:20px;fill:currentColor}
.xxlms-iconbtn:active{transform:translateY(1px)}
.xxlms-iconbtn:hover{filter:brightness(.98)}
.xxlms-iconbtn--green{background:#16a34a;border-color:#16a34a;color:#fff}
.xxlms-iconbtn--green:hover{filter:brightness(.97)}
.xxlms-iconbtn--ghost{background:#fff;border-color:#e2e8f0;color:#0f172a}

.xxlms-section{margin-bottom:14px}
.xxlms-section h2{margin:0 0 8px;font-size:22px;font-weight:1000}
.xxlms-body{color:#0f172a;line-height:1.85}
.xxlms-muted{color:#64748b}

.xxlms-learn ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.xxlms-learn li{display:flex;gap:10px;align-items:flex-start;background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:10px 12px}
.xxlms-learn li:before{content:"✓";font-weight:1000;color:#16a34a;margin-top:2px}

.xxlms-tabs{margin-top:12px}
.xxlms-tabbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.xxlms-tabbtn{border:1px solid #e2e8f0;background:#fff;border-radius:999px;padding:8px 12px;font-weight:900;color:#0f172a;cursor:pointer}
.xxlms-tabbtn.active{background:#0f172a;color:#fff;border-color:#0f172a}
.xxlms-tabpanel{display:none}
.xxlms-tabpanel.active{display:block}

.xxlms-accordion details{border:1px solid #e2e8f0;border-radius:16px;background:#f8fafc;margin-top:10px;overflow:hidden}
.xxlms-accordion summary{cursor:pointer;list-style:none;padding:12px 14px;font-weight:1000;display:flex;align-items:center;justify-content:space-between;gap:12px}
.xxlms-accordion summary::-webkit-details-marker{display:none}
.xxlms-accordion .unit-count{color:#64748b;font-weight:900;font-size:12px}
.xxlms-lessons{padding:8px 12px 12px}
.xxlms-lesson{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:10px 10px;border-radius:14px;background:#fff;border:1px solid #eef2f7;margin-top:10px}
.xxlms-lesson:hover{border-color:#dbeafe}
.xxlms-lesson-left{display:flex;gap:10px;align-items:flex-start}
.xxlms-yt{width:22px;height:22px;flex:0 0 22px;margin-top:2px}
.xxlms-lesson-title{font-weight:1000}
.xxlms-lesson-details{color:#64748b;font-weight:700;font-size:13px;margin-top:2px;line-height:1.7}
.xxlms-lesson-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.xxlms-lock{display:inline-flex;align-items:center;gap:8px;font-weight:900}
.xxlms-lock small{color:#64748b;font-weight:800}
.xxlms-open{color:#16a34a}
.xxlms-closed{color:#ef4444}
.xxlms-play{display:inline-flex;align-items:center;gap:8px;text-decoration:none;border:1px solid #e2e8f0;background:#0f172a;color:#fff;padding:8px 10px;border-radius:12px;font-weight:900}
.xxlms-play:hover{filter:brightness(1.03)}

/* Modal */
.xxlms-modal{position:fixed;inset:0;display:none;z-index:99999}
.xxlms-modal.open{display:block}
.xxlms-modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.6)}
.xxlms-modal-card{position:relative;max-width:720px;margin:6vh auto;background:#fff;border-radius:18px;box-shadow:0 30px 80px rgba(2,6,23,.35);overflow:hidden}
.xxlms-modal-close{position:absolute;top:10px;left:10px;border:0;background:#f1f5f9;border-radius:12px;width:40px;height:40px;cursor:pointer;font-size:22px;font-weight:1000}
.xxlms-modal-head{padding:18px 18px 0}
.xxlms-modal-title{font-size:20px;font-weight:1000}
.xxlms-modal-sub{color:#64748b;font-weight:800;margin-top:4px}
.xxlms-modal-tabs{display:flex;gap:10px;flex-wrap:wrap;padding:14px 18px 0}
.xxlms-modal-tabbtn{border:1px solid #e2e8f0;background:#fff;border-radius:999px;padding:8px 12px;font-weight:900;cursor:pointer}
.xxlms-modal-tabbtn.active{background:#1d4ed8;color:#fff;border-color:#1d4ed8}
.xxlms-modal-body{padding:16px 18px 18px}

/* New tabs system (course + modal) */
.xxlms-tabheads{display:flex;gap:10px;flex-wrap:wrap;margin:0;padding:14px 18px 0}
.xxlms-tabhead{border:1px solid #e2e8f0;background:#fff;border-radius:999px;padding:8px 12px;font-weight:900;cursor:pointer;color:#0f172a}
.xxlms-tabhead.is-active{background:#0f172a;color:#fff;border-color:#0f172a}
.xxlms-tabpanels{padding:16px 18px 18px}
.xxlms-panel{display:none}
.xxlms-panel.is-active{display:block}

/* Auth pages */
.xxlms-auth{direction:rtl}
.xxlms-auth-card{max-width:540px;margin:30px auto;padding:22px;background:#fff;border:1px solid #e5e7eb;border-radius:18px;box-shadow:0 12px 28px rgba(2,6,23,.06)}
.xxlms-auth-title{margin:0;font-size:26px;font-weight:1000}
.xxlms-auth-msg{margin:12px 0 0;padding:10px 12px;border-radius:14px;border:1px solid #e2e8f0;background:#f8fafc;font-weight:800}
.xxlms-auth-msg.ok{border-color:#bbf7d0;background:#f0fdf4;color:#166534}
.xxlms-auth-msg.err{border-color:#fecaca;background:#fef2f2;color:#991b1b}
.xxlms-form .xxlms-field{margin:12px 0}
.xxlms-form .xxlms-field label{display:block;font-weight:900;margin-bottom:6px}
.xxlms-form input[type="text"],.xxlms-form input[type="email"],.xxlms-form input[type="password"],.xxlms-form input[type="tel"]{width:100%;padding:12px 12px;border-radius:14px;border:1px solid #e2e8f0;background:#fff;outline:none}
.xxlms-form input:focus{border-color:#93c5fd;box-shadow:0 0 0 3px rgba(147,197,253,.35)}
.xxlms-passwrap{display:flex;gap:10px;align-items:center}
.xxlms-passwrap input{flex:1}
.xxlms-toggle-pass{border:1px solid #e2e8f0;background:#f8fafc;border-radius:12px;padding:10px 12px;font-weight:900;cursor:pointer;white-space:nowrap}
.xxlms-auth-foot{margin-top:14px;color:#64748b;font-weight:800}
.xxlms-auth-foot a{color:#1d4ed8;text-decoration:none;font-weight:1000}
.xxlms-form{display:grid;gap:10px}
.xxlms-form label{font-weight:900;color:#0f172a;font-size:13px}
.xxlms-form input{width:100%;padding:10px 12px;border-radius:12px;border:1px solid #e2e8f0;outline:none}
.xxlms-form input:focus{border-color:#93c5fd;box-shadow:0 0 0 4px rgba(147,197,253,.35)}

/* =====================
   Messages (SSR / Theme-proof)
   ===================== */
.xxlms-alert{margin:10px 0;padding:10px 12px;border-radius:14px;border:1px solid #e2e8f0;background:#f8fafc;font-weight:900}
.xxlms-alert.success{border-color:#bbf7d0;background:#f0fdf4;color:#166534}
.xxlms-alert.error{border-color:#fecaca;background:#fef2f2;color:#991b1b}

.xxlms-thread-item{display:block;text-decoration:none;color:inherit;padding:12px 12px;border-bottom:1px solid #eef2f7;transition:background .15s ease}
.xxlms-thread-item:hover{background:#f8fafc}
.xxlms-thread-item.is-active{background:#eff6ff}
.xxlms-thread-item .t{font-weight:1000;font-size:14px}
.xxlms-thread-item .m{color:#64748b;font-weight:900;font-size:12px;margin-top:4px}
.xxlms-thread-item .d{color:#94a3b8;font-weight:800;font-size:11px;margin-top:4px}

.xxlms-thread-head{padding:12px 14px;border-bottom:1px solid #eef2f7}
.xxlms-thread-chat{padding:12px 14px;flex:1;overflow:auto;min-height:240px;background:#fff}
.xxlms-thread-reply{padding:12px 14px;border-top:1px solid #eef2f7;background:#f8fafc;display:grid;gap:10px}
.xxlms-thread-reply textarea{width:100%;padding:12px 12px;border-radius:14px;border:1px solid #e2e8f0;outline:none;resize:vertical;background:#fff}
.xxlms-thread-reply textarea:focus{border-color:#93c5fd;box-shadow:0 0 0 4px rgba(147,197,253,.35)}

.xxlms-bubble{border:1px solid #e5e7eb;background:#fff;border-radius:16px;padding:10px 12px;margin-bottom:10px;max-width:92%}
.xxlms-bubble.me{margin-left:auto;border-color:#bfdbfe;background:#eff6ff}
.xxlms-bubble .b{font-weight:800;line-height:1.8}
.xxlms-bubble .time{margin-top:6px;color:#94a3b8;font-weight:800;font-size:11px}
.xxlms-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:640px){.xxlms-form .row2{grid-template-columns:1fr}}
.xxlms-split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:860px){.xxlms-split{grid-template-columns:1fr}}
.xxlms-pane{background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:14px}
.xxlms-pane h3{margin:0 0 8px;font-size:16px;font-weight:1000}
.xxlms-msg{margin-top:10px;font-weight:900}
.xxlms-msg.ok{color:#16a34a}
.xxlms-msg.err{color:#ef4444}

/* Student dashboard */
.xxlms-dash h2{margin:0 0 12px;font-size:22px;font-weight:1000}
.xxlms-dash-pagehead{margin:0 0 14px}
.xxlms-dash-pagehead h2{margin:0;font-size:22px;font-weight:1000}
.xxlms-dash-pagehead p{margin:6px 0 0;color:#64748b;font-weight:800}

.xxlms-cardbox{background:#fff;border:1px solid #e5e7eb;border-radius:18px;box-shadow:0 12px 28px rgba(2,6,23,.06);overflow:hidden}
.xxlms-cardbox-h{padding:14px 16px;border-bottom:1px solid #eef2f7;font-weight:1000}
.xxlms-sep{height:1px;background:#eef2f7;margin:6px 0}

.xxlms-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:720px){.xxlms-grid2{grid-template-columns:1fr}}
.xxlms-col-span-2{grid-column:1/-1}

.xxlms-actions{display:flex;align-items:center;gap:12px;padding:14px 16px;border-top:1px solid #eef2f7}
@media (max-width:640px){.xxlms-actions{flex-direction:column;align-items:stretch}}
.xxlms-form-msg{font-weight:900;color:#64748b}

.xxlms-avatar-up{display:flex;align-items:center;gap:14px;padding:12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px}
@media (max-width:520px){.xxlms-avatar-up{flex-direction:column;align-items:stretch}}
.xxlms-avatar-up-img img{width:84px;height:84px;border-radius:16px;object-fit:cover;border:1px solid #e2e8f0;background:#fff}
.xxlms-avatar-up-actions input[type="file"]{width:100%;padding:10px 12px;border:1px dashed #cbd5e1;border-radius:14px;background:#fff}

.xxlms-dash-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:980px){.xxlms-dash-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.xxlms-dash-grid{grid-template-columns:1fr}}
.xxlms-dash-course{padding:14px;border:1px solid #e2e8f0;border-radius:16px;background:#fff;box-shadow:0 10px 24px rgba(2,6,23,.06)}
.xxlms-dash-course .t{font-weight:1000}
.xxlms-dash-course .m{color:#64748b;font-weight:800;margin-top:6px}

/* ==============================
   New UI (v0.1.7+) — matches .xxlms-front markup
   ============================== */
.xxlms-front{direction:rtl;color:#0f172a;font-family:'Tajawal',system-ui,-apple-system,'Segoe UI',Arial,sans-serif}
.xxlms-course,.xxlms-auth{font-family:'Tajawal',system-ui,-apple-system,'Segoe UI',Arial,sans-serif}
.xxlms-front *{box-sizing:border-box}
.xxlms-course-grid{max-width:var(--xxlms-maxw,1400px);margin:0 auto;padding:22px 14px;display:grid;grid-template-columns:var(--xxlms-sidew,420px) 1fr;gap:22px;align-items:start;direction:ltr}
.xxlms-side,.xxlms-main{direction:rtl}
@media (max-width:980px){.xxlms-course-grid{grid-template-columns:1fr}}

/* Side card "floating" (sticky) */
.xxlms-sidecard{position:sticky;top:18px}

.xxlms-sidecard{background:#fff;border:1px solid #e5e7eb;border-radius:18px;box-shadow:0 12px 28px rgba(2,6,23,.06);overflow:hidden}
.xxlms-sidepad{padding:16px}
/* backward/alternate wrapper used in markup */
.xxlms-side-meta{padding:16px}

.xxlms-course-title{font-size:34px;line-height:1.15;margin:0 0 8px;font-weight:1000}
.xxlms-course-meta{display:flex;gap:10px;flex-wrap:wrap;color:#64748b;font-weight:800;font-size:13px}
.xxlms-course-meta .xxlms-chip{background:#f1f5f9;border:1px solid #e2e8f0;padding:6px 10px;border-radius:999px}

.xxlms-video{position:relative;background:#0b1220;border-radius:14px;overflow:hidden}
.xxlms-video iframe,.xxlms-video video{width:100%;aspect-ratio:16/9;height:auto;display:block}
.xxlms-video iframe{border:0}

.xxlms-sidecard .xxlms-video{max-width:calc(100% - 28px);margin:16px auto 0}
.xxlms-video-embed{width:100%}
.xxlms-video-embed iframe,.xxlms-video-tag{width:100%;aspect-ratio:16/9;height:auto;display:block;border:0;border-radius:14px}

/* ==============================
   Lesson modal: block YouTube UI/links (hover/click areas)
   ============================== */
.xxlms-yt-embed{position:relative}
.xxlms-yt-embed .xxlms-yt-frame{position:relative;z-index:1}
.xxlms-yt-shield{position:absolute;z-index:10;background:rgba(0,0,0,.92);pointer-events:auto}
.xxlms-yt-shield-top{top:0;left:0;right:0;height:56px}
.xxlms-yt-shield-tr{top:0;right:0;width:140px;height:56px}
.xxlms-yt-shield-bl{bottom:54px;left:0;width:210px;height:48px}
.xxlms-yt-shield-br{bottom:54px;right:0;width:120px;height:72px}

/* ==============================
   Google Drive Preview: hide/disable any external actions in the top bar
   ============================== */
.xxlms-drive-embed{position:relative}
.xxlms-drive-embed .xxlms-drive-frame{position:relative;z-index:1}
.xxlms-drive-shield{position:absolute;z-index:10;background:rgba(10,15,25,.12);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.10);pointer-events:auto;cursor:not-allowed}
.xxlms-drive-shield-top{display:none}
.xxlms-drive-shield-tr{top:0;right:0;width:25px;height:25px;border-bottom-left-radius:14px}

/* Block any "open externally" corner icon inside embedded iframes (Drive/Vimeo/etc.) in the lesson player modal */
.xxlms-iframe-shield-tr{
  position:absolute;
  top:0;
  right:0;
  /* Cover ONLY the small top-right external-action box */
  width:25px;
  height:25px;
  max-width:none;
  max-height:none;
  z-index:2147483647;
  pointer-events:auto;
  cursor:not-allowed;

  /* Transparent blur shield (doesn't hide content behind) */
  background:rgba(10,15,25,.12);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 10px 30px rgba(0,0,0,.28) inset;

  border-top-left-radius:10px;
  border-top-right-radius:10px;
  border-bottom-left-radius:10px;
}

/* "LIVE" indicator on the shield */
.xxlms-iframe-shield-tr::before{content:"";display:none}

.xxlms-iframe-shield-tr::after{
  content:"";
  position:absolute;
  top:8px;
  right:8px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#ff2a2a;
  box-shadow:0 0 0 0 rgba(255,42,42,.55);
  animation:xxlmsLivePulse 1.2s ease-in-out infinite, xxlmsLiveDrift 3.5s ease-in-out infinite;
}

@keyframes xxlmsLivePulse{
  0%{transform:scale(1); box-shadow:0 0 0 0 rgba(255,42,42,.55);}
  70%{transform:scale(1.06); box-shadow:0 0 0 10px rgba(255,42,42,0);}
  100%{transform:scale(1); box-shadow:0 0 0 0 rgba(255,42,42,0);}
}

@keyframes xxlmsLiveDrift{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(2px);}
}


/* Final overrides for dashboard profile layout (prevent theme/cascade conflicts) */
.xxlms-dash .xxlms-cardbox{padding:0;border:1px solid #e5e7eb;border-radius:18px;box-shadow:0 12px 28px rgba(2,6,23,.06);overflow:hidden}
.xxlms-dash .xxlms-cardbox-h{margin:0;padding:14px 16px;border-bottom:1px solid #eef2f7;font-weight:1000;font-size:16px}
.xxlms-dash .xxlms-actions{padding:14px 16px;border-top:1px solid #eef2f7}

/* Price box (centered + premium) */
.xxlms-pricebox{margin:14px auto 0;max-width:calc(100% - 28px);border:1px solid #e2e8f0;background:#f8fafc;border-radius:16px;padding:12px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center}
.xxlms-pricebox-label{color:#64748b;font-weight:900;font-size:12px}
.xxlms-pricebox-val{font-weight:1000;font-size:18px;letter-spacing:.2px}
.xxlms-pricebox-val.is-paid{color:#ea580c}
.xxlms-pricebox-val.is-free{color:#0f172a}
.xxlms-front .xxlms-video-placeholder{color:#e2e8f0;min-height:220px;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;padding:18px;text-align:center;font-weight:1000}
.xxlms-front .xxlms-video-placeholder:before{content:"▶";width:46px;height:46px;border-radius:999px;border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;background:rgba(255,255,255,.08)}

.xxlms-sideinfo{margin-top:12px}
.xxlms-sideinfo .row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid #eef2f7}
.xxlms-sideinfo .label{color:#64748b;font-weight:900}
.xxlms-sideinfo .value{font-weight:1000}

.xxlms-statgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.xxlms-stat{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:12px;text-align:center}
.xxlms-stat .n{font-weight:1000;font-size:18px}
.xxlms-stat .t{color:#64748b;font-weight:900;font-size:12px;margin-top:2px}

.xxlms-cta{width:fit-content;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 18px;border:1px solid #d1fae5;border-radius:999px;font-weight:1000;cursor:pointer;transition:transform .05s ease, background .15s ease, color .15s ease, border-color .15s ease;background:#fff;color:#16a34a}
.xxlms-cta:active{transform:translateY(1px)}
.xxlms-cta:hover{background:#16a34a;color:#fff;border-color:#16a34a}
.xxlms-cta.is-paid{background:#16a34a;color:#fff;border-color:#16a34a}
.xxlms-cta.is-paid:hover{filter:brightness(1.02)}
.xxlms-cta.is-free{border-color:#bfdbfe;color:#1d4ed8}
.xxlms-cta.is-free:hover{background:#1d4ed8;color:#fff;border-color:#1d4ed8}
.xxlms-btn--ghost{background:#fff;border:1px solid #e2e8f0;color:#0f172a}
.xxlms-btn--green{background:#16a34a;color:#fff;border:0}
.xxlms-btn--green:hover{filter:brightness(.97)}
.xxlms-sidecard .xxlms-cta{display:flex;margin:14px auto 0;width:fit-content;max-width:100%;justify-content:center}
/* leave breathing room under CTA */
.xxlms-sidecard .xxlms-cta{margin-bottom:10px}
.xxlms-enrolled-wrap{display:flex;justify-content:center;margin:10px 0 14px}
.xxlms-enrolled-badge{display:inline-flex;align-items:center;gap:8px;width:fit-content;max-width:100%;margin:0;padding:10px 16px;border-radius:999px;border:1px solid #bbf7d0;background:#f0fdf4;color:#166534;font-weight:1000;text-align:center}

.xxlms-enrolled-wrap{margin-top:12px;margin-bottom:10px;}

/* Buy tab (modal) */
.xxlms-buy{display:flex;flex-direction:column;gap:10px}
.xxlms-buy-title{font-weight:1000;font-size:18px}
.xxlms-buy-price{display:flex;gap:8px;align-items:baseline}
.xxlms-buy-price span{color:var(--xxlms-muted)}
.xxlms-buy-actions{display:flex;gap:10px;flex-wrap:wrap}

/* Checkout */
.xxlms-checkout{max-width:1400px;margin:18px auto;padding:0 12px}
.xxlms-co-grid{display:grid;grid-template-columns:1.25fr 0.85fr;gap:14px}
.xxlms-co-left{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:14px}
.xxlms-co-right{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:14px;position:sticky;top:14px;height:fit-content}
.xxlms-co-h{font-weight:1000;font-size:18px;margin:4px 0 12px}
.xxlms-field{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.xxlms-field input,.xxlms-field textarea,.xxlms-field select{width:100%;padding:12px 12px;border:1px solid #e5e7eb;border-radius:12px;outline:0;background:#fff}
.xxlms-field select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);background-position:calc(100% - 18px) calc(50% - 2px),calc(100% - 12px) calc(50% - 2px);background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:38px}
.xxlms-field input:focus,.xxlms-field textarea:focus,.xxlms-field select:focus{border-color:#93c5fd;box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.xxlms-field textarea{min-height:84px;resize:vertical}
.xxlms-co-sep{height:1px;background:#e5e7eb;margin:14px 0}
.xxlms-cart-items{display:flex;flex-direction:column;gap:10px}
.xxlms-cart-item{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;border:1px solid #eef2f7;border-radius:14px;padding:12px}
.xxlms-cart-title{font-weight:900}
.xxlms-cart-price{font-weight:1000}
.xxlms-cart-total{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-weight:1000}
.xxlms-cart-empty{padding:10px 0}
.xxlms-tabheads2{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.xxlms-tabheads2 .xxlms-tabhead{border:1px solid #e5e7eb;background:#f9fafb;padding:10px 12px;border-radius:999px;font-weight:800}
.xxlms-tabheads2 .xxlms-tabhead.is-active{background:#111827;color:#fff;border-color:#111827}
.xxlms-panel{display:none}
.xxlms-panel.is-active{display:block}
.xxlms-pay-qr{max-width:280px;margin:10px 0}
.xxlms-pay-qr img{width:100%;height:auto;border-radius:14px;border:1px solid #e5e7eb}
.xxlms-pay-box{border:1px solid #e5e7eb;border-radius:14px;padding:12px;background:#f9fafb}
.xxlms-pay-list{display:flex;flex-direction:column;gap:10px}
.xxlms-pay-item{border:1px solid #e5e7eb;border-radius:14px;padding:12px}
.xxlms-pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.xxlms-pay-gateway{border:1px solid #e5e7eb;border-radius:14px;padding:12px}
.xxlms-pay-gtitle{font-weight:1000;font-size:16px}

/* Overlay counters on cards */
.xxlms-card-media{position:relative;overflow:hidden}
.xxlms-badge-overlay{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:999px;background:rgba(15,23,42,.82);color:#fff;font-weight:1000;font-size:12px;backdrop-filter:blur(6px)}
.xxlms-badge-overlay.is-right{left:auto;right:10px}
.xxlms-badge-overlay .n{font-weight:1200}

/* Messages (dashboard) */
.xxlms-msg-grid{display:grid;grid-template-columns:320px 1fr;gap:14px;align-items:stretch}
.xxlms-msg-list{border:1px solid #e5e7eb;border-radius:16px;overflow:hidden;background:#fff;max-height:520px;overflow:auto}
.xxlms-msg-thread{border:1px solid #e5e7eb;border-radius:16px;overflow:hidden;background:#fff;min-height:520px;display:flex;flex-direction:column}
.xxlms-msg-item{padding:12px 14px;border-bottom:1px solid #eef2f7;cursor:pointer;transition:background .15s ease}
.xxlms-msg-item:hover{background:#f8fafc}
.xxlms-msg-item.is-active{background:#eff6ff}
.xxlms-msg-item .t{font-weight:1000}
.xxlms-msg-item .m{color:#64748b;font-weight:900;font-size:12px;margin-top:4px}
.xxlms-thread-head{padding:12px 14px;border-bottom:1px solid #eef2f7;display:flex;justify-content:space-between;align-items:center;gap:10px}
.xxlms-thread-title{font-weight:1100}
.xxlms-thread-body{padding:14px;display:flex;flex-direction:column;gap:10px;overflow:auto;flex:1;background:#fbfdff}
.xxlms-bubble{max-width:78%;padding:10px 12px;border-radius:16px;border:1px solid #e5e7eb;background:#fff;box-shadow:0 8px 18px rgba(2,6,23,.05)}
.xxlms-bubble.me{margin-right:auto;background:#eff6ff;border-color:#bfdbfe}
.xxlms-bubble .meta{font-size:11px;color:#64748b;font-weight:900;margin-top:6px}
.xxlms-thread-reply{padding:12px 14px;border-top:1px solid #eef2f7;background:#fff}
.xxlms-thread-reply textarea{min-height:74px}

@media (max-width: 980px){
  .xxlms-msg-grid{grid-template-columns:1fr}
  .xxlms-msg-list,.xxlms-msg-thread{max-height:none;min-height:auto}
}

/* Invoice (manual payment order summary) */
.xxlms-invoice{border:1px solid #e5e7eb;border-radius:16px;padding:14px;background:#f8fafc;margin-top:12px}
.xxlms-invoice h4{margin:0 0 10px;font-size:16px;font-weight:1000}
.xxlms-invoice .row{display:flex;justify-content:space-between;gap:12px;margin:6px 0}
.xxlms-invoice .row strong{font-weight:1000}
.xxlms-invoice .note{margin-top:10px;color:#64748b;font-weight:900}

@media (max-width: 980px){
  .xxlms-co-grid{grid-template-columns:1fr}
  .xxlms-co-right{position:relative;top:auto}
  .xxlms-pay-grid{grid-template-columns:1fr}
}

/* ==============================
   Mobile polish (responsive)
   ============================== */
@media (max-width: 980px){
  /* sticky side card becomes normal flow on tablets/phones */
  .xxlms-sidecard{position:relative;top:auto}
}

@media (max-width: 640px){
  .xxlms-course-grid{padding:16px 12px;gap:14px}
  .xxlms-course-title{font-size:26px;line-height:1.2}
  .xxlms-course-meta{font-size:12px;gap:8px}
  .xxlms-sidepad{padding:14px}
  .xxlms-sidecard .xxlms-video{max-width:100%;margin:12px auto 0}
  .xxlms-pricebox{max-width:100%;margin-top:12px}
  .xxlms-statgrid{gap:8px}
  .xxlms-stat{padding:10px;border-radius:14px}
  .xxlms-stat .n{font-size:16px}

  /* main cards spacing */
  .xxlms-card{border-radius:16px}
  .xxlms-card-pad{padding:14px}
  .xxlms-section h2{font-size:18px}

  /* Lessons list */
  .xxlms-lesson{flex-direction:column;align-items:stretch}
  .xxlms-lesson-actions{justify-content:space-between}
  .xxlms-play{justify-content:center}

  /* Tabs should scroll horizontally instead of wrapping into tall stack */
  .xxlms-tabbar{flex-wrap:nowrap;overflow:auto;padding-bottom:6px}
  .xxlms-tabbar::-webkit-scrollbar{height:6px}
  .xxlms-tabbtn{white-space:nowrap}

  /* Modal: fit phone screens */
  .xxlms-modal-card{width:calc(100% - 16px);max-width:none;margin:10px auto;border-radius:16px;max-height:88vh;overflow:auto}
  .xxlms-modal-head{padding:14px 14px 0}
  .xxlms-modal-tabs{padding:12px 14px 0;flex-wrap:nowrap;overflow:auto}
  .xxlms-modal-tabs::-webkit-scrollbar{height:6px}
  .xxlms-modal-tabbtn{white-space:nowrap}
  .xxlms-modal-body{padding:14px}
  .xxlms-modal-close{top:8px;left:8px;width:38px;height:38px}

  /* Auth pages: ensure comfortable width and spacing */
  .xxlms-auth-card{width:calc(100% - 20px);max-width:none;margin:18px auto;padding:18px}
}

/* ==============================
   Mobile fixes: Test payment invoice confirmation
   (prevents 2-column squeeze + fixes file input overflow)
   ============================== */
@media (max-width: 768px){
  .xxlms-test-invoice{overflow-x:hidden}
  .xxlms-test-invoice .xxlms-checkout{padding:14px !important}

  /* The markup uses inline grid-template-columns:1fr 1fr; override it on mobile */
  .xxlms-test-invoice .xxlms-grid{grid-template-columns:1fr !important}

  .xxlms-test-invoice label{display:block}
  .xxlms-test-invoice input,
  .xxlms-test-invoice textarea,
  .xxlms-test-invoice select{width:100% !important;max-width:100% !important;box-sizing:border-box !important}

  /* File input can overflow on some mobile browsers */
  .xxlms-test-invoice input[type="file"]{display:block !important}

  /* Buttons stack nicely */
  .xxlms-test-invoice .xxlms-btn{width:100% !important;justify-content:center}
  .xxlms-test-invoice [style*="display:flex"]{gap:10px !important}
}

/* Trainer box (right aligned) */
.xxlms-trainerbox{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:12px 12px;border:1px solid #eef2f7;border-radius:14px;background:#fff}
.xxlms-trainer-ico{width:34px;height:34px;border-radius:12px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;border:1px solid #e2e8f0}
.xxlms-trainer-ico svg{width:18px;height:18px;fill:#0f172a}
.xxlms-trainer-text{flex:1;text-align:right}
.xxlms-trainer-label{color:#64748b;font-weight:900;font-size:12px;margin-bottom:2px}
.xxlms-trainer-name{font-weight:1000;font-size:14px}

.xxlms-main{min-width:0}
.xxlms-section{margin-bottom:14px}
.xxlms-h2{margin:0 0 8px;font-size:22px;font-weight:1000}
.xxlms-h3{margin:0 0 8px;font-size:18px;font-weight:1000}

.xxlms-checklist{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.xxlms-checklist li{display:flex;gap:10px;align-items:flex-start;background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:10px 12px}
.xxlms-checklist li:before{content:"✓";font-weight:1000;color:#16a34a;margin-top:2px}

.xxlms-tabs{margin-top:12px}
.xxlms-tabheads{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.xxlms-tabhead{border:1px solid #e2e8f0;background:#fff;border-radius:999px;padding:8px 12px;font-weight:1000;color:#0f172a;cursor:pointer}
.xxlms-tabhead.is-active{background:#0f172a;color:#fff;border-color:#0f172a}
.xxlms-panel{display:none}
.xxlms-panel.is-active{display:block}

.xxlms-accordion{display:grid;gap:10px}
.xxlms-acc{border:1px solid #e2e8f0;border-radius:16px;background:#f8fafc;overflow:hidden}
.xxlms-acc-sum{cursor:pointer;list-style:none;padding:12px 14px;font-weight:1000}
.xxlms-acc-sum::-webkit-details-marker{display:none}
.xxlms-acc-body{padding:8px 12px 12px}

.xxlms-lessonlist{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.xxlms-lesson{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:10px 10px;border-radius:14px;background:#fff;border:1px solid #eef2f7}
.xxlms-lesson:hover{border-color:#dbeafe}
.xxlms-lesson-main{display:flex;gap:10px;align-items:flex-start}
.xxlms-youtube{width:22px;height:22px;flex:0 0 22px;margin-top:2px}
.xxlms-youtube svg{width:22px;height:22px;fill:#ef4444}
.xxlms-lesson-title a{text-decoration:none;color:#0f172a;font-weight:1000}
.xxlms-lesson-details{color:#64748b;font-weight:800;font-size:13px;margin-top:2px;line-height:1.7}
.xxlms-lesson-access{display:flex;flex:0 0 auto;align-items:center;justify-content:flex-end}
.xxlms-lesson-access-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.xxlms-chip{background:#f1f5f9;border:1px solid #e2e8f0;padding:6px 10px;border-radius:999px;font-weight:1000;font-size:12px}
.xxlms-chip.is-open{border-color:#bbf7d0;background:#f0fdf4;color:#16a34a}
.xxlms-chip.is-locked{border-color:#fecaca;background:#fff1f2;color:#ef4444}
.xxlms-chip.is-free{border-color:#bfdbfe;background:#eff6ff;color:#1d4ed8}

.xxlms-chip--watch{display:inline-flex;align-items:center;gap:8px;text-decoration:none;cursor:pointer;border-color:#e2e8f0;background:#0f172a;color:#fff;padding:6px 12px}
.xxlms-chip--watch .xxlms-ico{width:16px;height:16px;display:inline-flex}
.xxlms-chip--watch .xxlms-ico svg{width:16px;height:16px;fill:currentColor}
.xxlms-chip--watch:hover{filter:brightness(1.05)}
.xxlms-chip--watch.locked{background:#fff;color:#0f172a;border-color:#e2e8f0}

/* Instructor */
.xxlms-instructor-box{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:start;background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:14px}
@media (max-width:640px){.xxlms-instructor-box{grid-template-columns:1fr}}
.xxlms-instructor-photo{width:96px;height:96px;border-radius:18px;object-fit:cover;display:block}
.xxlms-instructor-photo--ph{display:flex;align-items:center;justify-content:center;background:#0f172a;color:#fff;font-weight:1000;font-size:34px}
.xxlms-instructor-name{font-weight:1000;font-size:18px}
.xxlms-instructor-title{color:#64748b;font-weight:900;margin-top:2px}

/* Modal */
.xxlms-modal{position:fixed;inset:0;display:none;z-index:99999}
.xxlms-modal.open{display:block}
.xxlms-modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.6)}
.xxlms-modal-card{position:relative;max-width:780px;margin:6vh auto;background:#fff;border-radius:18px;box-shadow:0 30px 80px rgba(2,6,23,.35);overflow:hidden}
.xxlms-modal-close{position:absolute;top:10px;left:10px;border:0;background:#f1f5f9;border-radius:12px;width:40px;height:40px;cursor:pointer;font-size:22px;font-weight:1000}
.xxlms-modal-head{padding:18px 18px 0}
.xxlms-modal-title{font-size:20px;font-weight:1000}
.xxlms-modal-sub{color:#64748b;font-weight:900;margin-top:4px}
.xxlms-modal-tabs{padding:14px 18px 18px}

/* ==============================
   Mobile final overrides (ensure last wins)
   ============================== */
@media (max-width: 640px){
  /* Course side card */
  .xxlms-sidecard{position:relative !important;top:auto !important}
  .xxlms-sidecard .xxlms-video{max-width:100% !important;margin:12px auto 0 !important}
  .xxlms-pricebox{max-width:100% !important}
  .xxlms-sidepad{padding:14px !important}

  /* Keep CTA centered with space under it */
  .xxlms-sidecard .xxlms-cta{margin:12px auto 0 !important;margin-bottom:12px !important}
  .xxlms-enrolled-wrap{margin-top:8px !important}

  /* Modal layout */
  .xxlms-modal-card{width:calc(100% - 16px) !important;max-width:none !important;margin:10px auto !important;border-radius:16px !important;max-height:88vh !important;overflow:auto !important}
  .xxlms-modal-head{padding:14px 14px 0 !important}
  .xxlms-modal-body{padding:14px !important}
  .xxlms-modal-close{top:8px !important;left:8px !important}

  /* Tabs on top: stack vertically on mobile (fix hidden tab + keep content directly under chosen tab) */
  .xxlms-modal .xxlms-tabheads{
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    overflow:visible !important;
    justify-content:flex-start !important;
    padding:12px 12px 0 !important;
    gap:10px !important;
  }
  .xxlms-modal .xxlms-tabhead{
    width:100% !important;
    min-width:0 !important;
    white-space:normal !important;
    border-radius:14px !important;
    padding:12px 14px !important;
    text-align:center;
  }
  .xxlms-modal .xxlms-tabpanels{padding:12px 12px 16px !important}

  /* Auth blocks inside modal */
  .xxlms-statusbox{padding:14px !important;border-radius:16px !important}
  .xxlms-split{grid-template-columns:1fr !important}
}

.xxlms-auth{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:860px){.xxlms-auth{grid-template-columns:1fr}}
.xxlms-auth-divider{height:1px;background:#e2e8f0;margin:10px 0}

.xxlms-form{display:grid;gap:10px}
.xxlms-form-title{font-weight:1000;margin-bottom:2px}
.xxlms-form label{font-weight:900;color:#0f172a;font-size:13px}
.xxlms-form input{width:100%;padding:10px 12px;border-radius:12px;border:1px solid #e2e8f0;outline:none}
.xxlms-form input:focus{border-color:#93c5fd;box-shadow:0 0 0 4px rgba(147,197,253,.35)}

.xxlms-passwrap{position:relative}
.xxlms-passwrap input{padding-left:86px}
.xxlms-toggle-pass{position:absolute;left:10px;top:50%;transform:translateY(-50%);border:1px solid #e2e8f0;background:#fff;border-radius:10px;padding:6px 10px;font-weight:1000;cursor:pointer}

/* ==============================
   Wide auth pages (login/register)
   ============================== */
.xxlms-front.xxlms-auth{margin:0 auto;padding:30px 14px}
/* Half-page auth box (requested) + width is still configurable from admin (xxlms_auth_max_width) */
.xxlms-front.xxlms-auth .xxlms-auth-card{max-width:var(--xxlms-authw,920px);width:min(50vw,var(--xxlms-authw,920px));margin:24px auto;padding:34px 36px;border-radius:24px;box-shadow:0 20px 60px rgba(2,6,23,.08)}
@media (max-width:860px){
  .xxlms-front.xxlms-auth .xxlms-auth-card{width:100%;padding:26px 18px}
}

.xxlms-form-msg{margin-top:6px;font-weight:1000}
.xxlms-form-msg.ok{color:#16a34a}
.xxlms-form-msg.err{color:#ef4444}

/* Auth pages */
.xxlms-auth-card{max-width:var(--xxlms-authw,920px);margin:40px auto;background:#fff;border:1px solid #e5e7eb;border-radius:22px;box-shadow:0 22px 60px rgba(2,6,23,.10);padding:26px;position:relative;overflow:hidden}
/* remove background bubble behind auth box */
.xxlms-auth-card:before{content:none}
.xxlms-auth-head{max-width:560px}
.xxlms-auth-title{font-size:30px;letter-spacing:.2px}
.xxlms-form{gap:12px}
.xxlms-form input{padding:12px 14px;border-radius:14px}
.xxlms-btn{border-radius:14px;padding:13px 14px}
.xxlms-auth-title{margin:0 0 6px;font-size:26px;font-weight:1000}
.xxlms-auth-foot{margin-top:12px;color:#64748b;font-weight:900}
.xxlms-auth-foot a{color:#1d4ed8;text-decoration:none}
.xxlms-auth-msg{margin:10px 0;font-weight:1000}
.xxlms-auth-msg.ok{color:#16a34a}
.xxlms-auth-msg.err{color:#ef4444}

/* Student dashboard placeholder */
.xxlms-dashboard{max-width:var(--xxlms-maxw,1200px);margin:0 auto;padding:18px 14px}
.xxlms-dashlist{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:980px){.xxlms-dashlist{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.xxlms-dashlist{grid-template-columns:1fr}}
.xxlms-dashcard{padding:14px;border:1px solid #e2e8f0;border-radius:16px;background:#fff;box-shadow:0 10px 24px rgba(2,6,23,.06)}
.xxlms-dash-title{font-weight:1000}

.xxlms-course-top{max-width:var(--xxlms-maxw,1400px);margin:0 auto;padding:14px 14px 0;direction:rtl}
.xxlms-course-titlewrap{display:flex;justify-content:center}
.xxlms-course-title{letter-spacing:.2px;text-align:center}

/* polish v0.1.11 */
.xxlms-front{background:#fff;padding-bottom:26px}

.xxlms-section{background:#fff;border:1px solid #eef2f7;border-radius:18px;padding:16px 16px 12px}
.xxlms-section + .xxlms-section{margin-top:14px}
.xxlms-h2{display:flex;align-items:center;gap:10px}
.xxlms-h2:before{content:'';width:10px;height:10px;border-radius:999px;background:#1d4ed8;display:inline-block}
.xxlms-acc-sum{display:flex;justify-content:space-between;align-items:center}
.xxlms-acc-sum:after{content:'▾';font-weight:900;color:#64748b}
details[open]>.xxlms-acc-sum:after{content:'▴'}
.xxlms-lesson{transition:box-shadow .15s ease,border-color .15s ease}
.xxlms-lesson:hover{box-shadow:0 10px 24px rgba(2,6,23,.06)}
.xxlms-modal-card{max-width:860px}
.xxlms-modal-tabs{background:#f8fafc;border-top:1px solid #eef2f7}
.xxlms-modal .xxlms-auth{background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:14px}
.xxlms-modal .xxlms-form{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:14px}
.xxlms-modal .xxlms-form-title{font-size:16px}

/* Lesson player modal */
.xxlms-player-modal{position:fixed;inset:0;display:none;z-index:100000}
.xxlms-player-modal.open{display:block}
.xxlms-player-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.75)}
.xxlms-player-card{position:relative;max-width:980px;margin:5vh auto;background:#fff;border-radius:18px;box-shadow:0 30px 90px rgba(2,6,23,.45);overflow:hidden}
@media (max-width:1020px){.xxlms-player-card{max-width:92vw}}
.xxlms-player-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid #eef2f7}
.xxlms-player-title{font-size:16px;font-weight:1000;margin:0}
.xxlms-player-close{border:0;background:#f1f5f9;border-radius:12px;width:40px;height:40px;cursor:pointer;font-size:22px;font-weight:1000}
.xxlms-player-body{padding:14px}
.xxlms-player-body .xxlms-video{border-radius:16px}

/* Lesson row CTA */
.xxlms-lesson-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid #e2e8f0;background:#0f172a;color:#fff;padding:8px 10px;border-radius:12px;font-weight:1000;text-decoration:none;cursor:pointer}
.xxlms-lesson-btn:hover{filter:brightness(1.05)}
.xxlms-lesson-btn.locked{background:#fff;color:#0f172a}


/* Modal single-form layout */
.xxlms-auth--single{display:block}
.xxlms-inline-link{background:none;border:0;padding:0;margin:0;color:#1d4ed8;font-weight:1000;cursor:pointer;text-decoration:underline}


/* Modal tabs: force horizontal top tabs (override theme styles) */
.xxlms-modal [data-tabs]{direction:rtl}
.xxlms-modal .xxlms-tabheads{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin:0;padding:14px 0 6px}
.xxlms-modal .xxlms-tabhead{display:inline-flex;align-items:center;justify-content:center;min-height:46px;min-width:160px;padding:10px 16px;border-radius:16px;border:1px solid #e2e8f0;background:#fff;color:#0f172a;font-weight:1000;cursor:pointer}
.xxlms-modal .xxlms-tabhead.is-active{background:#0f172a;color:#fff;border-color:#0f172a}
.xxlms-modal .xxlms-tabpanels{margin-top:10px}
.xxlms-modal .xxlms-panel{width:100%}

/* ==============================
   Modal auth tabs (force top horizontal tabs)
   ============================== */
.xxlms-modal .xxlms-modal-card{max-width:980px}
.xxlms-modal .xxlms-modal-tabs .xxlms-tabheads{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}
.xxlms-modal .xxlms-modal-tabs .xxlms-tabhead{min-width:180px;min-height:48px;padding:12px 18px;border-radius:16px}
@media (max-width:640px){
  .xxlms-modal .xxlms-modal-tabs .xxlms-tabhead{min-width:140px}
}


/* Modal status boxes (logged-in messages) */
.xxlms-statusbox{border:1px solid #e2e8f0;background:#fff;border-radius:18px;padding:18px;max-width:820px;margin:0 auto;box-shadow:0 16px 40px rgba(2,6,23,.06)}
.xxlms-statusline{display:flex;align-items:center;justify-content:center;font-weight:1100;font-size:18px;margin-bottom:14px}
.xxlms-statusline.ok{color:#166534}
.xxlms-status-actions{display:flex;justify-content:center;margin:8px 0 18px}
.xxlms-status-center{text-align:center}


/* ===== Checkout & Cart UI (v202) ===== */
.xxlms-checkout-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:start}
@media (max-width: 980px){.xxlms-checkout-grid{grid-template-columns:1fr}}
.xxlms-checkout-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:18px;box-shadow:0 10px 26px rgba(2,6,23,.06)}
.xxlms-checkout-card h2,.xxlms-checkout-card h3{margin:0 0 12px}

/* XXLMS: make payment sidebar follow on scroll (checkout page)
   Native sticky first, JS fallback will handle themes that break sticky.
*/
.xxlms-checkout-right{position:relative}
@media (min-width: 981px){
  .xxlms-checkout-right .xxlms-checkout-card{position:sticky;top:18px}
}
.xxlms-cart-list{display:flex;flex-direction:column;gap:10px;margin:10px 0 14px}
.xxlms-cart-item-card{display:flex;gap:12px;align-items:center;justify-content:space-between;border:1px solid #eef2f7;background:#fbfdff;border-radius:14px;padding:12px}
.xxlms-cart-item-main{min-width:0}
.xxlms-cart-title{font-weight:900;font-size:15px;line-height:1.4;margin-bottom:4px}
.xxlms-cart-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.xxlms-cart-price{font-weight:800}
.xxlms-cart-total{display:flex;align-items:center;justify-content:space-between;border-top:1px dashed #e5e7eb;padding-top:12px;margin-top:8px;font-weight:900}
.xxlms-linkbtn--danger{color:#b91c1c;border-color:#fecaca;background:#fff}
.xxlms-linkbtn--danger:hover{background:#fff5f5}

.xxlms-pay-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 12px}
.xxlms-pay-tab{border:1px solid #bbf7d0;background:#f0fdf4;border-radius:999px;padding:10px 14px;cursor:pointer;font-weight:900;color:#166534}
.xxlms-pay-tab.active,.xxlms-pay-tab.is-active{background:#16a34a;color:#fff;border-color:#16a34a}
.xxlms-pay-tab:hover{filter:brightness(.99)}

/* Consult checkout: better spacing + green primary */
.xxlms-consult-checkout{padding:18px 14px}
.xxlms-consult-checkout .xxlms-consult-card{max-width:1100px;margin:0 auto;border-radius:22px;box-shadow:0 22px 60px rgba(2,6,23,.08)}
.xxlms-consult-checkout .xxlms-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.xxlms-consult-checkout .xxlms-btn{background:#16a34a}
.xxlms-consult-checkout .xxlms-btn:hover{filter:brightness(.97)}
.xxlms-consult-checkout .xxlms-btn:active{filter:brightness(.92)}

.xxlms-amount-card{margin-top:4px;padding:10px 14px;border:1px solid #e2e8f0;border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(2,6,23,.06);min-width:210px}
.xxlms-amount-label{font-size:12px;font-weight:900;color:#64748b;margin-bottom:2px}
.xxlms-amount-value{font-size:16px;font-weight:1000;color:#0f172a;letter-spacing:.2px}

.xxlms-pay-box{border:1px solid #e2e8f0;border-radius:18px;background:#f8fafc;padding:14px 16px}
.xxlms-pay-gtitle{font-weight:1000;color:#0f172a}
.xxlms-pay-qrwrap{display:flex;justify-content:center}
.xxlms-pay-qr{width:160px;height:90px;object-fit:contain;border-radius:18px;border:1px solid #e2e8f0;background:#fff;padding:10px;box-shadow:0 12px 34px rgba(2,6,23,.08)}
.xxlms-pay-instructions{margin-top:10px;color:#334155;font-weight:700;line-height:1.7;background:#fff;border:1px dashed #bbf7d0;border-radius:16px;padding:10px 12px}
.xxlms-pay-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.xxlms-pay-item{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:10px 12px}
.xxlms-pay-item-title{font-weight:1000;color:#0f172a}
.xxlms-pay-item-value{margin-top:4px;font-weight:900;color:#16a34a;direction:ltr;text-align:right}
.xxlms-pay-item-note{margin-top:4px;color:#64748b;font-weight:700;font-size:13px}

@media (max-width: 720px){
  .xxlms-pay-list{grid-template-columns:1fr}
  .xxlms-consult-checkout{padding:14px 12px}
}
.xxlms-pay-panel{display:none}
.xxlms-pay-panel.is-active{display:block}
.xxlms-pay-box{border:1px solid #e5e7eb;border-radius:14px;padding:12px;background:#fff;margin:10px 0}
.xxlms-pay-qr{display:flex;justify-content:center;margin:10px 0}
.xxlms-pay-qr img{max-width:220px;border-radius:14px;border:1px solid #e5e7eb}

.xxlms-cart-mini{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.xxlms-inline-link{color:#2563eb;text-decoration:none;font-weight:800}
.xxlms-inline-link:hover{text-decoration:underline}

/* prevent “subscribed” badge sticking to card bottom */
.xxlms-sub-badge{margin-top:10px}

/* =====================
   Tabs layout fixes (modal + checkout)
   ===================== */

/* Force tab headers to sit on top, with panels below (fixes mobile where they appeared side-by-side). */
.xxlms-modal-tabs{display:flex;flex-direction:column}
.xxlms-modal-tabs .xxlms-tabheads{width:100%}
.xxlms-modal-tabs .xxlms-tabpanels{width:100%}

@media (max-width: 560px){
  .xxlms-tabheads{flex-wrap:wrap}
  .xxlms-tabhead{flex:1 1 100%;min-width:0}
}

/* Checkout invoice look */
.xxlms-invoice{border:1px solid #e5e7eb;border-radius:16px;background:#fff;padding:14px;margin-top:12px}
.xxlms-invoice h4{margin:0 0 10px;font-size:16px}
.xxlms-invoice .row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px dashed #e5e7eb}
.xxlms-invoice .row:last-child{border-bottom:none}
.xxlms-invoice .note{margin-top:10px;color:#374151;font-weight:700}



/* --------------------
   Student Dashboard
--------------------- */
.xxlms-sdash{
  max-width: var(--xxlms-maxw,1200px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  align-items: start;
  padding: 16px 12px 28px;
}
.xxlms-sdash-side{
  position: sticky;
  top: 14px;
  background: #0b0b0f;
  border-radius: 18px;
  padding: 16px;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.xxlms-sdash-brand{
  padding: 10px 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 12px;
}
.xxlms-sdash-badge{
  display:inline-block;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 13px;
}
.xxlms-sdash-sub{
  margin-top: 10px;
  font-size: 14px;
  opacity: .9;
}
.xxlms-sdash-nav{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.xxlms-sdash-link{
  width: 100%;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff;
  border-radius: 14px;
  padding: 10px 12px;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  transition: .15s ease;
  text-align:right;
}
.xxlms-sdash-link:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
}
.xxlms-sdash-link.is-active{
  background: #ffffff;
  color: #111;
  border-color: rgba(255,255,255,.55);
}
.xxlms-sdash-ico{width:24px;display:inline-flex;justify-content:center;align-items:center}
.xxlms-sdash-main{
  background: #fff;
  border: 1px solid #edf0f5;
  border-radius: 18px;
  padding: 16px 16px 22px;
  box-shadow: 0 10px 30px rgba(17,24,39,.05);
}
.xxlms-sdash-top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  border-bottom: 1px solid #edf0f5;
  padding-bottom: 12px;
  margin-bottom: 14px;
}
.xxlms-sdash-title{margin:0;font-size:20px}
.xxlms-sdash-note{color:#64748b;font-size:13px}
.xxlms-sdash-section{margin-top: 14px}
.xxlms-sdash-h{margin:0 0 10px;font-size:16px}
.xxlms-sdash-muted{color:#64748b;margin:0 0 14px;font-size:13px;line-height:1.6}
.xxlms-sdash-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.xxlms-lesson-card{
  border: 1px solid #edf0f5;
  border-radius: 16px;
  overflow:hidden;
  background: #fff;
  text-decoration:none;
  color: inherit;
  display:flex;
  flex-direction:column;
  transition:.15s ease;
}
.xxlms-lesson-card:hover{transform: translateY(-2px); box-shadow:0 16px 30px rgba(17,24,39,.08)}
.xxlms-lesson-card.is-locked{opacity:.85}
.xxlms-lesson-thumb{
  height: 120px;
  background: linear-gradient(135deg,#eef2ff,#f1f5f9);
  background-size: cover;
  background-position: center;
}
.xxlms-lesson-body{padding: 12px 12px 14px}
.xxlms-lesson-course{font-size:12px;color:#64748b;margin-bottom:6px}
.xxlms-lesson-title{font-size:14px;font-weight:700;margin-bottom:10px}
.xxlms-lesson-meta{display:flex;gap:8px;flex-wrap:wrap}
.xxlms-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
}
.xxlms-pill.ok{border-color:#bbf7d0;background:#ecfdf5;color:#166534}
.xxlms-pill.err{border-color:#fecaca;background:#fff1f2;color:#9f1239}
.xxlms-sdash-empty{
  padding: 14px 12px;
  border: 1px dashed #e5e7eb;
  border-radius: 14px;
  color:#64748b;
  background:#f8fafc;
}
.xxlms-subs-list{display:flex;flex-direction:column;gap:10px}
.xxlms-sub-card{
  border: 1px solid #edf0f5;
  border-radius: 16px;
  padding: 12px;
  background: #fff;
}
.xxlms-sub-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.xxlms-sub-title{font-weight:800}
.xxlms-sub-price{color:#0f172a;font-size:13px}
.xxlms-sub-lines{display:flex;flex-direction:column;gap:8px}
.xxlms-sub-line{display:flex;align-items:center;justify-content:space-between;gap:10px}
.xxlms-sub-val{color:#0f172a;font-size:13px}
.xxlms-payconf-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.xxlms-cardbox{
  border: 1px solid #edf0f5;
  border-radius: 16px;
  padding: 12px;
  background: #fff;
}
.xxlms-cardbox-h{margin:0 0 10px;font-size:15px}
.xxlms-form .xxlms-field{margin-bottom:10px}
.xxlms-form .xxlms-field label{display:block;font-size:13px;margin-bottom:6px;color:#0f172a}
.xxlms-form input[type="text"],
.xxlms-form input[type="datetime-local"],
.xxlms-form input[type="file"],
.xxlms-form select,
.xxlms-form textarea{
  width:100%;
  border:1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px 10px;
  outline:none;
  font-size: 14px;
  background:#fff;
}
.xxlms-form textarea{resize:vertical}
.xxlms-hint{font-size:12px;color:#64748b;margin-top:6px}
.xxlms-actions{display:flex;align-items:center;gap:10px;margin-top:8px}
.xxlms-btn{
  border:0;
  background: #2563eb;
  color:#fff;
  padding: 10px 14px;
  border-radius: 14px;
  cursor:pointer;
  font-weight:700;
}
.xxlms-form-msg{font-size:13px}
.xxlms-form-msg.ok{color:#166534}
.xxlms-form-msg.err{color:#9f1239}
.xxlms-conf-list{display:flex;flex-direction:column;gap:10px}
.xxlms-conf-item{
  border: 1px solid #edf0f5;
  border-radius: 14px;
  padding: 10px;
  display:flex;
  justify-content:space-between;
  gap: 10px;
  align-items:center;
}
.xxlms-conf-title{font-weight:700;font-size:13px;margin-bottom:6px}
.xxlms-conf-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.xxlms-conf-small{font-size:12px;color:#64748b}
.xxlms-conf-thumb{
  width:54px;height:54px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:#f8fafc;
}
.xxlms-conf-thumb img{width:100%;height:100%;object-fit:cover}
.xxlms-conf-thumb.empty{color:#94a3b8;font-size:14px}

/* ==========================
   Receipt upload + notes (Test invoice / confirmations)
   - Desktop: 2 columns
   - Mobile: 1 column
   ========================== */
.xxlms-payconfirm-fields{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.xxlms-payconfirm-fields .xxlms-field-wide{grid-column:1/-1}
.xxlms-payconfirm-fields input,
.xxlms-payconfirm-fields textarea,
.xxlms-payconfirm-fields select{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
.xxlms-payconfirm-fields input[type="file"]{
  padding:8px 10px;
  line-height:1.4;
}
.xxlms-payconfirm-fields input[type="file"]::file-selector-button{
  border:1px solid #e5e7eb;
  background:#f8fafc;
  padding:8px 12px;
  border-radius:12px;
  margin-inline-end:10px;
  cursor:pointer;
  font-weight:700;
}
.xxlms-payconfirm-fields textarea{min-height:90px}

@media (max-width:720px){
  .xxlms-payconfirm-fields{grid-template-columns:1fr}
}

@media (max-width: 980px){
  .xxlms-sdash{grid-template-columns: 1fr}
  .xxlms-sdash-side{position: relative; top:0}
  .xxlms-sdash-grid{grid-template-columns: repeat(2, minmax(0,1fr))}
  .xxlms-payconf-grid{grid-template-columns: 1fr}
}
@media (max-width: 560px){
  .xxlms-sdash-grid{grid-template-columns: 1fr}
  .xxlms-sdash-top{flex-direction:column;align-items:flex-start}
}


/* ==========================
   Student Dashboard v2
   ========================== */
.xxlms-front-dashboard{
  /* Remove page background (user request) */
  background: transparent;
  padding: 22px 14px 40px;
}
.xxlms-dash-header{
  /* Wider container (user request) */
  max-width: 1400px;
  margin: 0 auto 16px;
}
.xxlms-dash-header-box{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding: 14px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 14px;
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
}
.xxlms-dash-header-right{display:flex;align-items:center;gap:12px}
.xxlms-dash-avatar{
  width:56px;height:56px;border-radius:16px;overflow:hidden;
  border:1px solid #e5e7eb;background:#f1f5f9;
}
.xxlms-dash-avatar img{width:100%;height:100%;object-fit:cover}
.xxlms-dash-hello{font-size:12px;color:#64748b}
.xxlms-dash-name{font-size:16px;font-weight:800;color:#0f172a}
.xxlms-ico-btn{
  /* Bigger notification/message buttons */
  width:52px;height:52px;border-radius:16px;
  border:1px solid #e5e7eb;background:#fff;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
}
.xxlms-dash-header-left{position:relative;display:flex;gap:10px;align-items:center}
.xxlms-mini-pop{
  position:absolute;top:52px;left:0;
  width:160px;
  background:#fff;border:1px solid #e5e7eb;border-radius:16px;
  box-shadow: 0 18px 36px rgba(15,23,42,.12);
  padding: 10px;
  display:none;
  z-index: 50;
}
.xxlms-mini-pop.open{display:block}
.xxlms-mini-pop-h{font-weight:800;color:#0f172a;margin-bottom:6px;font-size:13px}
.xxlms-mini-pop-body{color:#64748b;font-size:13px;line-height:1.7}

.xxlms-dash-layout{
  max-width: 1400px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  align-items:start;
}
.xxlms-dash-side{
  background:#0b1220;
  border-radius:20px;
  padding: 14px;
  position: sticky;
  top: 18px;
  box-shadow: 0 18px 40px rgba(15,23,42,.18);
}
.xxlms-dash-side-brand{
  color:#fff;
  font-weight:900;
  font-size:16px;
  padding: 10px 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 10px;
}
.xxlms-dash-nav{display:flex;flex-direction:column;gap:8px}
.xxlms-dash-link{
  width:100%;
  text-align:right;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color:#fff;
  border-radius:14px;
  padding: 10px 12px;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
}
.xxlms-dash-link:hover{background: rgba(255,255,255,.07)}
.xxlms-dash-link.is-active{
  background:#111c33;
  border-color: rgba(255,255,255,.16);
}
.xxlms-dash-ico{width:22px;display:inline-flex;justify-content:center}

.xxlms-dash-main{min-width:0}
.xxlms-dash-pagehead h2{margin:0 0 4px;font-size:22px}
.xxlms-dash-pagehead p{margin:0;color:#64748b}

.xxlms-cardbox{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding: 14px;
  margin-top: 14px;
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
}
.xxlms-cardbox-h{font-weight:900;margin-bottom:10px;color:#0f172a}

.xxlms-stat-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  margin-top: 14px;
}
.xxlms-stat{
  background:#fff;border:1px solid #e5e7eb;border-radius:18px;
  padding: 14px;
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
}
.xxlms-stat-n{font-size:26px;font-weight:950;color:#0f172a}
.xxlms-stat-l{font-size:13px;color:#64748b}

.xxlms-course-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.xxlms-course-card{
  border:1px solid #e5e7eb;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
}
.xxlms-course-card.is-locked{opacity:.92}
.xxlms-course-thumb{
  height:90px;
  background:#f1f5f9;
  background-size:cover;
  background-position:center;
}
.xxlms-course-body{padding: 10px 12px}
.xxlms-course-title{font-weight:900;color:#0f172a;margin-bottom:6px}
.xxlms-course-meta{display:flex;gap:8px;flex-wrap:wrap}

.xxlms-lesson-card{
  border:1px solid #e5e7eb;border-radius:18px;background:#fff;
  overflow:hidden;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;
}
.xxlms-lesson-card.is-locked{opacity:.92}
.xxlms-lesson-thumb{height:110px;background:#f1f5f9;background-size:cover;background-position:center}
.xxlms-lesson-body{padding: 10px 12px}
.xxlms-lesson-course{font-size:12px;color:#64748b;margin-bottom:4px}
.xxlms-lesson-title{font-weight:900;color:#0f172a;margin-bottom:6px}

.xxlms-subs-list{display:grid;gap:12px}
.xxlms-sub-card{border:1px solid #e5e7eb;border-radius:18px;padding:12px;background:#fff}
.xxlms-sub-head{display:flex;justify-content:space-between;gap:10px;align-items:center}
.xxlms-sub-title{font-weight:900;color:#0f172a}
.xxlms-sub-price{color:#64748b;font-weight:800}
.xxlms-sub-lines{margin-top:10px;display:grid;gap:8px}
.xxlms-sub-line{display:flex;justify-content:space-between;gap:10px;align-items:center}
.xxlms-sub-val{color:#0f172a;font-weight:800;font-size:13px}

.xxlms-table-wrap{overflow:auto;border:1px solid #e5e7eb;border-radius:14px}
.xxlms-table{width:100%;border-collapse:collapse;font-size:13px}
.xxlms-table th,.xxlms-table td{padding:10px;border-bottom:1px solid #e5e7eb;text-align:right;white-space:nowrap}
.xxlms-table thead th{background:#f8fafc;color:#0f172a;font-weight:900}
.xxlms-table tbody tr:hover{background:#fafafa}

.xxlms-grid2{display:grid;grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px}
.xxlms-hint{font-size:12px;color:#64748b;margin-top:6px}

.xxlms-dash-footer{
  margin-top: 18px;
}
.xxlms-dash-footer-inner{
  display:flex;justify-content:space-between;gap:12px;align-items:center;
  color:#64748b;font-size:13px;
  padding: 10px 6px;
}
.xxlms-dash-footer-links{display:flex;gap:8px;align-items:center}
.xxlms-dash-footer a{color:#64748b;text-decoration:none}
.xxlms-dash-footer a:hover{text-decoration:underline}

@media (max-width: 980px){
  .xxlms-dash-layout{grid-template-columns: 1fr}
  .xxlms-dash-side{position:relative;top:0}
  .xxlms-stat-grid{grid-template-columns: repeat(2, minmax(0,1fr))}
  .xxlms-course-grid{grid-template-columns: repeat(2, minmax(0,1fr))}
  .xxlms-grid2{grid-template-columns: 1fr}
}
@media (max-width: 560px){
  .xxlms-course-grid{grid-template-columns: 1fr}
  .xxlms-stat-grid{grid-template-columns: 1fr}
  .xxlms-dash-header-box{flex-direction:column;align-items:flex-start}
  .xxlms-dash-header-left{width:100%;justify-content:flex-end}
  .xxlms-mini-pop{left:auto;right:0}
}

/* === Force course page layout to the original (stable) look === */
/* Some themes override widths; we pin the LMS course layout to the known-good design. */
body .xxlms-course-grid{
  max-width: var(--xxlms-maxw,1550px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 22px 14px !important;
  display: grid !important;
  grid-template-columns: var(--xxlms-sidew,420px) 1fr !important;
  gap: 22px !important;
  align-items: start !important;
  direction: ltr !important;
}
body .xxlms-course-top{
  max-width: var(--xxlms-maxw,1550px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 14px 14px 0 !important;
  direction: rtl !important;
}
@media (max-width:980px){
  body .xxlms-course-grid{grid-template-columns:1fr !important;}
}


/* === Premium additions (Ratings / Messages / Badges) === */
.xxlms-front, .xxlms-wgrid, .xxlms-card, .xxlms-course-card, .xxlms-auth, .xxlms-front-dashboard{font-family:'Tajawal',sans-serif}

/* Media overlay badges (counts) */
.xxlms-card-media{position:relative;overflow:hidden}
.xxlms-badge-overlay{position:absolute;top:12px;left:12px;z-index:3;display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:999px;background:rgba(17,24,39,.88);color:#fff;font-weight:1000;font-size:12px;backdrop-filter:blur(6px)}
.xxlms-badge-overlay.right{left:auto;right:12px}
.xxlms-badge-overlay .n{font-size:13px}

/* Messages page polish */
.xxlms-msg-layout{display:block}
.xxlms-msg-grid{display:grid;grid-template-columns:360px 1fr;gap:14px;align-items:stretch}
@media (max-width: 980px){.xxlms-msg-grid{grid-template-columns:1fr}}
.xxlms-msg-list{border:1px solid #e5e7eb;border-radius:16px;background:#fff;overflow:hidden;min-height:320px}
.xxlms-msg-thread{border:1px solid #e5e7eb;border-radius:16px;background:#fff;min-height:320px;overflow:hidden;display:flex;flex-direction:column}
.xxlms-msg-item{padding:12px 14px;border-bottom:1px solid #eef2f7;cursor:pointer;transition:background .15s ease}
.xxlms-msg-item:hover{background:#f8fafc}
.xxlms-msg-item.is-active{background:#eff6ff}
.xxlms-msg-item .t{font-weight:1000}
.xxlms-msg-item .m{color:#64748b;font-weight:800;margin-top:3px;font-size:12px}
.xxlms-thread-head{padding:12px 14px;border-bottom:1px solid #eef2f7;display:flex;justify-content:space-between;gap:10px;align-items:center}
.xxlms-thread-title{font-weight:1000}
.xxlms-thread-body{padding:12px 14px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:10px;background:#f8fafc}
.xxlms-bubble{max-width:82%;width:fit-content;padding:10px 12px;border-radius:16px;border:1px solid #e5e7eb;background:#fff;box-shadow:0 6px 16px rgba(2,6,23,.05)}
.xxlms-bubble.me{margin-left:auto;border-color:#bfdbfe;background:#eff6ff}
.xxlms-bubble .time{margin-top:6px;font-size:11px;color:#64748b;font-weight:800}
.xxlms-thread-reply{padding:12px 14px;border-top:1px solid #eef2f7;background:#fff}
.xxlms-thread-reply textarea{min-height:68px}
.xxlms-card-count{margin-top:6px;font-weight:800;color:#334155;font-size:13px}
.xxlms-video{position:relative}
.xxlms-video-badge{position:absolute;top:10px;right:10px;display:flex;align-items:center;gap:8px;background:rgba(15,23,42,.82);color:#fff;padding:6px 10px;border-radius:999px;backdrop-filter:blur(6px);z-index:5}
.xxlms-vb-avatar{width:24px;height:24px;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-weight:900}
.xxlms-vb-avatar img{width:100%;height:100%;object-fit:cover}
.xxlms-vb-name{font-weight:900;font-size:12px;max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.xxlms-rating-wrap{margin-top:14px;padding:14px 16px;border:1px solid #e5e7eb;border-radius:16px;background:#fff;box-shadow:0 10px 24px rgba(2,6,23,.05)}
.xxlms-rating-summary{display:flex;align-items:center;gap:12px}
.xxlms-rating-stars{font-size:18px;letter-spacing:1px}
.xxlms-rating-meta{color:#475569;font-weight:800}
.xxlms-rating-form{margin-top:12px}

.xxlms-msg-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:12px}
@media (max-width:980px){.xxlms-msg-grid{grid-template-columns:1fr}}
.xxlms-msg-list{border:1px solid #e5e7eb;border-radius:14px;background:#f8fafc;min-height:220px;padding:10px;overflow:auto}
.xxlms-msg-item{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:10px;margin-bottom:8px;cursor:pointer}
.xxlms-msg-item:hover{box-shadow:0 10px 20px rgba(2,6,23,.06)}
.xxlms-msg-item .t{font-weight:1000}
.xxlms-msg-item .m{color:#64748b;font-weight:700;font-size:12px;margin-top:2px}
.xxlms-msg-thread{border:1px solid #e5e7eb;border-radius:14px;background:#fff;min-height:220px;padding:12px}
.xxlms-chat{max-height:320px;overflow:auto;padding:6px 2px}
.xxlms-chat-bubble{max-width:85%;padding:10px 12px;border-radius:14px;margin:8px 0;border:1px solid #e5e7eb;background:#f8fafc}
.xxlms-chat-bubble.me{margin-right:0;margin-left:auto;background:#eff6ff;border-color:#bfdbfe}
.xxlms-chat-meta{font-size:11px;color:#64748b;font-weight:700;margin-top:4px}

/* ===== Dashboard hard overrides (keep profile section as designed) ===== */
.xxlms-dash .xxlms-cardbox{padding:0 !important;border:1px solid #e5e7eb !important;border-radius:18px !important;box-shadow:0 12px 28px rgba(2,6,23,.06) !important;overflow:hidden !important}
.xxlms-dash .xxlms-cardbox-h{margin:0 !important;padding:14px 16px !important;border-bottom:1px solid #eef2f7 !important;font-weight:1000 !important}
.xxlms-dash .xxlms-grid2{display:grid !important;grid-template-columns:1fr 1fr !important;gap:12px !important;padding:14px 16px !important}
@media (max-width:720px){.xxlms-dash .xxlms-grid2{grid-template-columns:1fr !important}}
.xxlms-dash .xxlms-avatar-up{display:flex !important;align-items:center !important;gap:14px !important;padding:12px !important;background:#f8fafc !important;border:1px solid #e2e8f0 !important;border-radius:16px !important}
@media (max-width:520px){.xxlms-dash .xxlms-avatar-up{flex-direction:column !important;align-items:stretch !important}}


/* User Menu (Header Dropdown) */
.xxlms-user-menu, .xxlms-user-menu *{
  font-family:'Tajawal', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.xxlms-user-menu{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.xxlms-um-btn{
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
}
.xxlms-um-btn:hover,.xxlms-um-btn:focus,.xxlms-um-btn:active{
  background:transparent !important;
  box-shadow:none !important;
  outline:none !important;
}
.xxlms-user-menu, .xxlms-user-menu:hover{
  background:transparent !important;
}
.xxlms-um-trigger{
  width:34px;height:34px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 16px rgba(15,23,42,.12);
  background:#fff;
  overflow:hidden;
}
.xxlms-um-avatar{
  width:34px;height:34px;
  border-radius:999px;
  object-fit:cover;
}
.xxlms-um-ico{font-size:18px;line-height:1}
.xxlms-um-dd{
  position:absolute;
  top: calc(100% + 10px);
  right:0;
  min-width:210px;
  background:#fff;
  border:1px solid rgba(148,163,184,.35);
  border-radius:14px;
  box-shadow:0 14px 36px rgba(15,23,42,.14);
  padding:8px;
  z-index:99999;

  opacity:0;
  visibility:hidden;
  transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  pointer-events:none;
}

/* جسر يمنع اختفاء القائمة عند التحرك من الأيقونة للقائمة */
.xxlms-um-dd::before{
  content:"";
  position:absolute;
  top:-14px;
  right:0;
  left:0;
  height:14px;
}

/* فتح القائمة بالـ hover أو بالـ click (is-open للموبايل) */
.xxlms-user-menu:hover .xxlms-um-dd,
.xxlms-user-menu.is-open .xxlms-um-dd{
  opacity:1;
  visibility:visible;
  transform: translateY(0);
  pointer-events:auto;
}

.xxlms-user-menu.is-open .xxlms-um-dd{display:block;}
.xxlms-um-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  color:#0f172a;
  text-decoration:none;
  font-weight:600;
  transition:all .12s ease-in-out;
}
.xxlms-um-item:hover{
  background:rgba(37,99,235,.08);
}
.xxlms-um-item-ico{width:22px;text-align:center}
.xxlms-um-sep{
  height:1px;
  background:rgba(148,163,184,.25);
  margin:6px 6px;
}
.xxlms-um-item.is-danger{color:#b91c1c;}
.xxlms-um-item.is-danger:hover{background:rgba(185,28,28,.08);}

/* === Drive video fallback button === */
.xxlms-video-actions{display:flex;gap:8px;justify-content:flex-end;margin:8px 8px 0}
.xxlms-drive-open-preview{border:1px solid rgba(15,23,42,.18);background:#fff;color:#0f172a;border-radius:10px;padding:8px 12px;font-family:inherit;font-weight:700;cursor:pointer}
.xxlms-drive-open-preview:hover{background:rgba(37,99,235,.08)}

/* === External open card (hosts that block iframe embeds like MEGA) === */
.xxlms-external-card{background:#fff;border:1px solid rgba(148,163,184,.35);border-radius:14px;padding:18px;text-align:center}
.xxlms-external-icon{font-size:34px;margin-bottom:8px}
.xxlms-external-title{font-weight:800;margin-bottom:6px;color:#0f172a}
.xxlms-external-desc{font-size:13px;opacity:.78;margin:0 0 12px;color:#334155;line-height:1.6}
.xxlms-external-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:12px;background:#1d4ed8;color:#fff !important;text-decoration:none !important;font-weight:800;transition:opacity .15s ease}
.xxlms-external-btn:hover{opacity:.95}


/* JS fallback: fixed side card when sticky is not supported/blocked */
.xxlms-sidecard.xxlms-fixed{position:fixed !important;top:18px;}
.xxlms-sidecard.xxlms-fixed{z-index:50}
.xxlms-sidecard.xxlms-fixed-stop{position:absolute !important;top:auto !important;bottom:0 !important;}

/* =========================
   Quiz Modal
========================= */
.xxlms-quiz-modal{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:18px}
.xxlms-quiz-modal.open{display:flex}
.xxlms-quiz-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.xxlms-quiz-card{position:relative;z-index:1;width:min(920px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.25);padding:18px}
.xxlms-quiz-close{position:absolute;top:10px;left:10px;border:0;background:#f3f4f6;border-radius:12px;width:42px;height:42px;font-size:22px;cursor:pointer}
.xxlms-quiz-head{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;border-bottom:1px solid #eee;padding-bottom:12px;margin-bottom:12px}
.xxlms-quiz-title{font-size:18px;font-weight:900}
.xxlms-quiz-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.xxlms-quiz-dot{opacity:.5}
.xxlms-quiz-progress{min-width:240px;flex:0 0 auto}
.xxlms-quiz-progress-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.xxlms-quiz-bar{height:10px;background:#f1f5f9;border-radius:999px;overflow:hidden}
.xxlms-quiz-bar span{display:block;height:100%;width:0%}
.xxlms-quiz-msg{margin:10px 0}
.xxlms-quiz-msg.ok{color:#0a7a3b}
.xxlms-quiz-msg.err{color:#b42318}
.xxlms-quiz-questions{display:flex;flex-direction:column;gap:12px}
.xxlms-qcard{border:1px solid #eee;border-radius:14px;padding:12px}
.xxlms-qhead{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px}
.xxlms-qtitle{font-weight:800}
.xxlms-qpoints{font-weight:800;opacity:.8;white-space:nowrap}
.xxlms-qopts-list{display:flex;flex-direction:column;gap:8px}
.xxlms-qopts-list{display:grid;gap:10px;margin-top:8px}
.xxlms-qopts-item{
  display:flex;gap:12px;align-items:flex-start;
  padding:12px 14px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#f8fafc;
  cursor:pointer;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.xxlms-qopts-item:hover{transform:translateY(-1px);border-color:#cbd5e1;box-shadow:0 10px 22px rgba(2,6,23,.06)}
.xxlms-qopts-item input{margin-top:3px;transform:scale(1.08)}
/* Modern browsers: highlight selected option */
.xxlms-qopts-item:has(input:checked){background:#ecfdf5;border-color:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.12)}
.xxlms-qessay textarea{width:100%;min-height:110px}
.xxlms-quiz-nav{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px solid #eee}
.xxlms-quiz-page{font-weight:800}
.xxlms-quiz-result{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(255,255,255,.85);backdrop-filter: blur(2px)}
.xxlms-quiz-result-card{width:min(520px,100%);background:#fff;border:1px solid #eee;border-radius:18px;box-shadow:0 10px 40px rgba(0,0,0,.15);padding:18px;text-align:center}
.xxlms-quiz-result-title{font-size:18px;font-weight:900;margin-bottom:10px}
.xxlms-quiz-result-score{font-size:22px;font-weight:900;margin-bottom:8px}
.xxlms-quiz-result-level{display:inline-block;padding:8px 14px;border-radius:999px;font-weight:900;margin-bottom:10px}
.xxlms-result-bar{height:12px;background:#f1f5f9;border-radius:999px;overflow:hidden;margin:10px 0 12px}
.xxlms-result-fill{height:100%;background:#2563eb;width:0}
.xxlms-result-note{color:#334155;line-height:1.8;font-weight:700;font-size:14px}
.xxlms-level-excellent{background:#0b5d1e;color:#fff}
.xxlms-level-vgood{background:#1e40af;color:#fff}
.xxlms-level-good{background:#84cc16;color:#0b2a12}
.xxlms-level-pass{background:#facc15;color:#3a2a00}
.xxlms-level-fail{background:#dc2626;color:#fff}

/* Result modal actions (green buttons + spacing) */
.xxlms-quiz-result-actions{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.xxlms-quiz-result-actions .xxlms-btn{
  background:#16a34a !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:0 10px 24px rgba(22,163,74,.18);
}
.xxlms-quiz-result-actions .xxlms-btn:hover{filter:brightness(.96)}
.xxlms-quiz-result-actions .xxlms-btn:active{filter:brightness(.92)}

/* =========================
   Paid Test: Result Locked UI (front-end)
========================= */
.xxlms-payreq{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  box-shadow:0 14px 44px rgba(2,6,23,.08);
  padding:16px;
}
.xxlms-payreq-top{display:flex;gap:12px;align-items:flex-start}
.xxlms-payreq-ico{
  width:44px;height:44px;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(37,99,235,.10);
  border:1px solid rgba(37,99,235,.18);
  font-size:22px;
  flex:0 0 auto;
}
.xxlms-payreq-title{font-weight:900;font-size:17px;color:#0f172a;margin-bottom:4px}
.xxlms-payreq-sub{color:#334155;line-height:1.7;font-weight:700;font-size:13px}

.xxlms-paysteps{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.xxlms-step{display:flex;gap:12px;align-items:flex-start}
.xxlms-step-dot{
  width:30px;height:30px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid #cbd5e1;
  background:#f8fafc;
  font-weight:900;
  flex:0 0 auto;
}
.xxlms-step.is-done .xxlms-step-dot{background:#16a34a;border-color:#16a34a;color:#fff}
.xxlms-step-title{font-weight:900;color:#0f172a;margin-bottom:2px}
.xxlms-step-desc{color:#475569;line-height:1.6;font-weight:700;font-size:13px}

.xxlms-payreq-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.xxlms-payreq-actions .xxlms-btn{border-radius:14px;font-weight:900}
.xxlms-payreq-actions .xxlms-btn:not(.xxlms-btn--ghost){
  background:#16a34a !important;
  border:0 !important;
  box-shadow:0 12px 26px rgba(22,163,74,.18);
}
.xxlms-payreq-actions .xxlms-btn:not(.xxlms-btn--ghost):hover{filter:brightness(.97)}
.xxlms-payreq-note{margin-top:12px;padding-top:12px;border-top:1px dashed #e5e7eb;color:#334155;line-height:1.8;font-weight:700;font-size:13px}

@media (max-width:520px){
  .xxlms-payreq-actions{flex-direction:column}
  .xxlms-payreq-actions .xxlms-btn{width:100%;justify-content:center}
}

/* Attempt details (dashboard) */
.xxlms-attempt-details-btn{
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:10px;
  padding:6px 10px;
  cursor:pointer;
  line-height:1;
  font-size:18px;
}
.xxlms-attempt-details-btn:hover{background:#f7f7f7}

.xxlms-attempt-modal{position:fixed;inset:0;z-index:99999;display:none}
.xxlms-attempt-modal.is-open{display:block}
.xxlms-ptest-result-modal{position:fixed;inset:0;z-index:99999;display:none}
.xxlms-ptest-result-modal.is-open{display:block}
.xxlms-attempt-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.xxlms-attempt-card{
  position:relative;
  width:min(900px,94vw);
  max-height:min(80vh,720px);
  overflow:auto;
  margin:6vh auto 0;
  background:#fff;
  border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.22);
  padding:18px 18px 16px;
}
.xxlms-attempt-close{
  position:absolute;
  top:10px;left:10px;
  width:40px;height:40px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#fff;
  cursor:pointer;
  font-size:22px;
  line-height:1;
}
.xxlms-attempt-head{padding:8px 6px 12px;border-bottom:1px solid #eef2f7;margin-bottom:12px}
.xxlms-attempt-title{font-size:22px;font-weight:800;margin:0 0 6px}
.xxlms-attempt-meta{font-size:13px}
.xxlms-attempt-msg{margin:10px 0;color:#111827;font-weight:600}
.xxlms-attempt-msg.err{color:#b91c1c}

.xxlms-attempt-list{display:flex;flex-direction:column;gap:12px;padding:4px}
.xxlms-attempt-item{border:1px solid #eef2f7;border-radius:16px;padding:12px 12px 10px;background:#fff}
.xxlms-attempt-item.is-wrong{border-color:#fee2e2;background:#fff7f7}
.xxlms-attempt-item.is-correct{border-color:#dcfce7;background:#f7fffb}
.xxlms-attempt-qhead{display:flex;gap:12px;align-items:flex-start}
.xxlms-attempt-qnum{width:34px;height:34px;border-radius:12px;background:#f3f4f6;display:flex;align-items:center;justify-content:center;font-weight:800}
.xxlms-attempt-qtext{flex:1;font-weight:700;line-height:1.6}
.xxlms-attempt-qbadge{margin-inline-start:auto}
.xxlms-attempt-ans{margin-top:10px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.xxlms-attempt-correct{padding-top:6px;border-top:1px dashed #e5e7eb}

/* =========================
   Personal Test Result UI (Dashboard)
   - Professional cards + summary + bar
   ========================= */
.xxlms-ptest-sum{border:1px solid #eef2f7;border-radius:18px;background:#fff;padding:14px;margin-bottom:12px}
.xxlms-ptest-sum-row{display:grid;grid-template-columns: 1.2fr .9fr .9fr;gap:10px;align-items:stretch}
@media (max-width:820px){.xxlms-ptest-sum-row{grid-template-columns:1fr;}}
.xxlms-ptest-sum-card{border:1px solid #eef2f7;border-radius:16px;padding:12px;background:linear-gradient(180deg,#ffffff,#f8fafc)}
.xxlms-ptest-sum-card.ok{border-color:#dcfce7;background:linear-gradient(180deg,#ffffff,#f0fdf4)}
.xxlms-ptest-sum-card.err{border-color:#fee2e2;background:linear-gradient(180deg,#ffffff,#fff7f7)}
.xxlms-ptest-sum-card .t{color:#475569;font-weight:900;font-size:12px;margin-bottom:6px}
.xxlms-ptest-sum-card .v{font-size:18px;font-weight:1000;color:#0f172a}
.xxlms-ptest-sum-card .v span{font-size:12px;font-weight:900;color:#64748b}
.xxlms-ptest-bar{margin-top:10px;height:12px;border-radius:999px;background:#e5e7eb;overflow:hidden}
.xxlms-ptest-bar span{display:block;height:12px;border-radius:999px;background:#16a34a;width:0}

.xxlms-ptest-qcard{border:1px solid #eef2f7;border-radius:18px;padding:12px;background:#fff}
.xxlms-ptest-qcard.is-wrong{border-color:#fee2e2;background:#fff7f7}
.xxlms-ptest-qcard.is-correct{border-color:#dcfce7;background:#f7fffb}
.xxlms-ptest-qhead{display:flex;gap:10px;align-items:flex-start}
.xxlms-ptest-qhead .n{width:34px;height:34px;border-radius:12px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;font-weight:1000;color:#0f172a;flex:0 0 34px}
.xxlms-ptest-qhead .q{flex:1;font-weight:900;line-height:1.8;color:#0f172a}
.xxlms-ptest-qhead .r{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.xxlms-ptest-badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 10px;font-weight:1000;font-size:12px;border:1px solid #e5e7eb;background:#fff;white-space:nowrap}
.xxlms-ptest-badge.ok{border-color:#bbf7d0;color:#166534;background:#f0fdf4}
.xxlms-ptest-badge.err{border-color:#fecaca;color:#991b1b;background:#fff1f2}
.xxlms-ptest-pts{font-weight:1000;color:#475569;font-size:12px}
.xxlms-ptest-qgrid{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:820px){.xxlms-ptest-qgrid{grid-template-columns:1fr;}}
.xxlms-ptest-ans,.xxlms-ptest-corr{border:1px dashed #e5e7eb;border-radius:16px;padding:10px;background:#fff}
.xxlms-ptest-ans .h,.xxlms-ptest-corr .h{font-weight:1000;color:#64748b;font-size:12px;margin-bottom:6px}
.xxlms-ptest-ans .b,.xxlms-ptest-corr .b{font-weight:900;color:#0f172a;line-height:1.8}
.xxlms-ptest-corr{border-style:solid}

/* =========================
   Quiz UI Tweaks (Requested)
   - Smaller buttons
   - Next/Submit = green, Prev = red
   ========================= */
.xxlms-quiz-nav .xxlms-btn{width:auto;min-width:130px;padding:10px 16px;border-radius:12px;font-weight:900}
.xxlms-quiz-nav [data-quiz-next],
.xxlms-quiz-nav [data-quiz-submit]{background:#16a34a !important;color:#fff !important}
.xxlms-quiz-nav [data-quiz-prev]{background:#dc2626 !important;color:#fff !important;border:0 !important}

/* When there are no questions, show a friendly card */
.xxlms-quiz-empty{padding:14px;border:1px solid #eee;border-radius:14px;background:#fafafa;color:#111;line-height:1.8}

/* Quiz images (question + options) */
.xxlms-qimg{margin-top:10px}
.xxlms-qimg img{max-width:100%;height:auto;border-radius:12px;border:1px solid #eef2f7}
.xxlms-qopts-item .xxlms-optimg{max-width:120px;max-height:90px;object-fit:cover;border-radius:10px;border:1px solid #eef2f7;margin-inline-end:10px;vertical-align:middle}

/* ===== Messages UI (v5) ===== */
.xxlms-msg-layout .xxlms-card{border-radius:18px}
.xxlms-msg-compose{margin-bottom:14px}
.xxlms-msg-compose .xxlms-form{padding:14px 16px}
.xxlms-msg-compose .xxlms-grid2{grid-template-columns: 260px 1fr}
@media (max-width:980px){.xxlms-msg-compose .xxlms-grid2{grid-template-columns:1fr}}
.xxlms-msg-compose textarea{min-height:54px;resize:vertical}
.xxlms-msg-compose-actions{display:flex;justify-content:flex-end;margin-top:10px}

/* Compose submit button: green + smaller + not full width */
.xxlms-msg-compose-actions .xxlms-btn{width:auto;min-width:140px;padding:10px 18px;border-radius:12px;background:#16a34a}
.xxlms-msg-compose-actions .xxlms-btn:hover{filter:brightness(.97)}
.xxlms-msg-compose-actions .xxlms-btn:active{filter:brightness(.93)}

.xxlms-msg-grid{display:grid;grid-template-columns: 380px 1fr;gap:14px;align-items:stretch}
@media (max-width:980px){.xxlms-msg-grid{grid-template-columns:1fr}}

.xxlms-msg-list{background:#fff;border:1px solid #e5e7eb;border-radius:18px;overflow:auto;max-height:620px}
@media (max-width:980px){.xxlms-msg-list{max-height:none}}

.xxlms-thread-item{display:flex;gap:10px;align-items:center;padding:12px 12px;border-bottom:1px solid #eef2f7;text-decoration:none;color:inherit;transition:background .15s ease}
.xxlms-thread-item:hover{background:#f8fafc}
.xxlms-thread-item.is-active{background:#eff6ff}
.xxlms-thread-avatar{width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:1000;border:1px solid #e5e7eb;background:#fff;flex:0 0 40px}
.xxlms-thread-meta{min-width:0}
.xxlms-thread-meta .t{font-weight:1000;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xxlms-thread-meta .m{color:#475569;font-weight:800;font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xxlms-thread-meta .d{color:#94a3b8;font-weight:800;font-size:11px;margin-top:3px}

.xxlms-msg-thread{background:#fff;border:1px solid #e5e7eb;border-radius:18px;overflow:hidden;min-height:420px;display:flex;flex-direction:column}

.xxlms-thread-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #eef2f7;background:linear-gradient(180deg,#ffffff, #f8fafc)}
.xxlms-thread-head-left{display:flex;flex-direction:column;gap:4px;min-width:0}
.xxlms-thread-badge{display:inline-flex;align-items:center;gap:8px;border:1px solid #e5e7eb;background:#fff;border-radius:999px;padding:6px 10px;font-weight:1000;font-size:13px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xxlms-thread-peer{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xxlms-thread-jump{font-weight:1000;text-decoration:none;border:1px solid #e5e7eb;background:#fff;border-radius:12px;padding:8px 10px}
.xxlms-thread-jump:hover{background:#f8fafc}

.xxlms-thread-chat{padding:12px;flex:1;overflow:auto;background:#fff}
/* RTL chat alignment (force): keep all bubbles on the right (avoid centered bubbles due to theme overrides) */
.xxlms-thread-chat{display:flex !important;flex-direction:column !important;align-items:flex-end !important}
.xxlms-bubble{max-width:78%;border-radius:16px;padding:10px 12px;margin:8px 0;border:1px solid #e5e7eb;background:#fff}
.xxlms-bubble{align-self:flex-end !important;text-align:right !important;margin-left:auto !important}
.xxlms-bubble .b{white-space:pre-wrap;word-wrap:break-word}
.xxlms-bubble .time{margin-top:6px;font-size:11px;color:#94a3b8;font-weight:800}
.xxlms-bubble.me{margin-left:auto !important;background:#eff6ff;border-color:#dbeafe}
/* show the other side on the right as well (different background only) */
.xxlms-bubble.them{margin-right:0 !important;margin-left:auto !important;background:#f8fafc}

.xxlms-thread-reply{padding:12px;border-top:1px solid #eef2f7;background:#fff}
.xxlms-thread-reply-row{display:flex;gap:10px;align-items:flex-end}
@media (max-width:640px){.xxlms-thread-reply-row{flex-direction:column;align-items:stretch}}
.xxlms-thread-reply textarea{min-height:44px;resize:vertical}

.xxlms-empty-state{padding:34px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;flex:1}
.xxlms-empty-ico{font-size:28px}
.xxlms-empty-title{font-weight:1000;font-size:16px}


/* XXLMS Personal Tests: force Tajawal font on checkout/payment blocks */
.xxlms-front .xxlms-checkout,
.xxlms-front .xxlms-checkout * ,
.xxlms-front .xxlms-pay-grid,
.xxlms-front .xxlms-pay-card,
.xxlms-front .xxlms-test-confirm,
.xxlms-front .xxlms-test-confirm * ,
.xxlms-front .xxlms-checkout-msg,
.xxlms-front [data-xxlms-checkout-msg],
.xxlms-front [data-xxlms-test-confirm-msg]{
  font-family:'Tajawal', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif !important;
}


/* Personal Tests modal positioning (fix for themes that don't style .xxlms-ptest-modal) */
.xxlms-ptest-modal{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:18px}
.xxlms-ptest-modal.open{display:flex}

/* Make Personal Tests modal look consistent across themes + ensure Tajawal inside questions */
.xxlms-ptest-modal,
.xxlms-ptest-modal *{
  font-family:'Tajawal', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif !important;
}

/* Green primary actions inside Personal Tests modal */
.xxlms-ptest-modal .xxlms-quiz-nav .xxlms-btn{
  background:#16a34a;
}
.xxlms-ptest-modal .xxlms-quiz-nav .xxlms-btn:hover{filter:brightness(.97)}
.xxlms-ptest-modal .xxlms-quiz-nav .xxlms-btn:active{filter:brightness(.92)}

/* Tajawal font for Personal Tests payment-related pages */
.xxlms-personal-tests, .xxlms-tests-checkout, .xxlms-test-payment-result, .xxlms-test-invoice{font-family:'Tajawal',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}

/* =========================
   Personal Tests Checkout: Payment UI (more modern)
   ========================= */
.xxlms-tests-checkout .xxlms-pay-tabswrap{margin-top:10px}
.xxlms-tests-checkout .xxlms-pay-tabheads{padding:14px 18px 0 !important}
.xxlms-tests-checkout .xxlms-pay-tabheads .xxlms-tabhead{background:#f8fafc;border-color:#e2e8f0;font-weight:900}
.xxlms-tests-checkout .xxlms-pay-tabheads .xxlms-tabhead.is-active{background:#16a34a;border-color:#16a34a;color:#fff}
.xxlms-tests-checkout .xxlms-tabpanels{padding:12px 18px 18px !important}
.xxlms-tests-checkout .xxlms-pay-box,
.xxlms-tests-checkout .xxlms-pay-gateway{background:#fff;border:1px solid rgba(148,163,184,.35);border-radius:18px;box-shadow:0 10px 25px rgba(15,23,42,.06)}
.xxlms-tests-checkout .xxlms-pay-gtitle{font-size:17px}
.xxlms-tests-checkout .xxlms-pay-note{border:1px dashed rgba(148,163,184,.55);border-radius:16px;padding:12px;background:#f8fafc}
.xxlms-tests-checkout .xxlms-pay-row{border:1px solid rgba(148,163,184,.25);border-radius:16px;padding:10px 12px;background:#fff}
.xxlms-tests-checkout .xxlms-pay-row strong{display:block;font-weight:1000}
.xxlms-tests-checkout .xxlms-pay-row span{display:block;color:#0f172a;margin-top:3px;font-weight:900}
.xxlms-tests-checkout .xxlms-pay-row em{display:block;color:#64748b;margin-top:6px;font-style:normal}

/* Green primary CTA on tests checkout */
.xxlms-tests-checkout .xxlms-btn{background:#16a34a;border-color:#16a34a}
.xxlms-tests-checkout .xxlms-btn:hover{filter:brightness(.97)}
.xxlms-tests-checkout .xxlms-btn:active{filter:brightness(.92)}

/* =========================
   Personal Tests Cards (4 columns)
   ========================= */
.xxlms-grid-cards{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
@media (max-width:1200px){.xxlms-grid-cards{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:900px){.xxlms-grid-cards{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.xxlms-grid-cards{grid-template-columns:1fr;}}

.xxlms-test-card{
  overflow:hidden;
  border:1px solid rgba(148,163,184,.35);
  border-radius:18px;
  box-shadow:0 10px 30px rgba(15,23,42,.08);
  transition:transform .15s ease, box-shadow .15s ease;
}
.xxlms-test-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 44px rgba(15,23,42,.12);
}

.xxlms-card-img{position:relative;height:90px;background:#f1f5f9;overflow:hidden;}
.xxlms-card-img img{width:100%;height:100%;object-fit:cover;display:block;}
/* Shine */
.xxlms-card-img:after{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background:linear-gradient(120deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 65%);
  transform:skewX(-12deg);
  opacity:.65;
  pointer-events:none;
  animation:xxlmsShine 3.8s ease-in-out infinite;
}
@keyframes xxlmsShine{
  0%{transform:translateX(-40%) skewX(-12deg);}
  55%{transform:translateX(40%) skewX(-12deg);}
  100%{transform:translateX(40%) skewX(-12deg);}
}

.xxlms-card-body{padding:14px 14px 16px;}
.xxlms-card-title{font-weight:1000;font-size:16px;color:#0f172a;margin-bottom:6px;}
.xxlms-card-desc{font-size:13px;line-height:1.7;color:#334155;opacity:.95;max-height:4.2em;overflow:hidden;}
.xxlms-card-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 12px;}
.xxlms-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(37,99,235,.10);color:#1d4ed8;font-weight:900;font-size:12px;}
.xxlms-pill.ok{background:rgba(5,150,105,.12);color:#047857;}
.xxlms-price{font-weight:1000;color:#0f172a;}
/* Personal test result - options stacked boxes */
.xxlms-ptest-qcard{border:1px solid #e5e7eb;border-radius:14px;background:#fff;padding:12px;margin:12px 0;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.xxlms-ptest-qcard.is-correct{border-color:#bbf7d0}
.xxlms-ptest-qcard.is-wrong{border-color:#fecaca}
.xxlms-ptest-qhead{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:start}
.xxlms-ptest-qhead .n{width:44px;height:44px;border-radius:12px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;font-weight:800}
.xxlms-ptest-qhead .q{font-weight:800;line-height:1.6}
.xxlms-ptest-qhead .r{display:flex;gap:8px;align-items:center;justify-content:flex-end;white-space:nowrap}
.xxlms-ptest-badge{padding:4px 10px;border-radius:999px;font-size:12px;font-weight:800}
.xxlms-ptest-badge.ok{background:#dcfce7;color:#166534}
.xxlms-ptest-badge.err{background:#fee2e2;color:#991b1b}
.xxlms-ptest-pts{font-size:12px;color:#64748b}

.xxlms-ptest-qgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.xxlms-ptest-qgrid .h{font-size:12px;color:#64748b;font-weight:800;margin-bottom:6px}
.xxlms-ptest-qgrid .b{background:#f8fafc;border:1px solid #e5e7eb;border-radius:12px;padding:10px;line-height:1.7}

.xxlms-ptest-opts{margin-top:12px}
.xxlms-ptest-opts .h{font-size:12px;color:#64748b;font-weight:800;margin-bottom:8px}
.xxlms-ptest-opt{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:10px;margin:8px 0}
.xxlms-ptest-opt.is-user{border-color:#bfdbfe;background:#eff6ff}
.xxlms-ptest-opt.is-corr{border-color:#bbf7d0;background:#f0fdf4}
.xxlms-ptest-opt-mark{width:28px;height:28px;border-radius:10px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;font-weight:900;color:#16a34a}
.xxlms-ptest-opt-body{display:flex;gap:10px;align-items:center}
.xxlms-ptest-opt-body img{width:44px;height:44px;border-radius:10px;object-fit:cover;border:1px solid #e5e7eb}
.xxlms-ptest-opt-body span{font-weight:700;line-height:1.6}
.xxlms-ptest-opt-tag{font-size:12px;color:#0f172a;font-weight:800}

@media (max-width: 720px){
  .xxlms-ptest-qgrid{grid-template-columns:1fr}
  .xxlms-ptest-qhead{grid-template-columns:44px 1fr}
  .xxlms-ptest-qhead .r{grid-column:1/-1;justify-content:flex-start}
}

/* =========================
   Personal tests: option boxes UI
   - True/False: "صح" on top and "خطأ" below, each in its own box.
   - Multiple choice: each option in a separate card-like box.
   ========================= */

.xxlms-ptest-opts{display:grid;gap:10px}
.xxlms-ptest-opt{
  position:relative;
  display:block;
  padding:16px 14px;
  margin:0;
  border-radius:16px;
  min-height:56px;
}

/* Hide the old grid layout spacing; we use absolute badges instead */
.xxlms-ptest-opt-mark{
  position:absolute;
  top:10px;
  left:10px;
}
.xxlms-ptest-opt-tag{
  position:absolute;
  top:10px;
  right:10px;
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  background:#e0f2fe;
  color:#075985;
}
.xxlms-ptest-opt-tag:empty{display:none}

.xxlms-ptest-opt-body{
  justify-content:center;
  text-align:center;
  padding-top:6px;
}
.xxlms-ptest-opt-body span{font-weight:900;font-size:15px}

/* True/False should always be two stacked cards */
.xxlms-ptest-opts.is-tf{grid-template-columns:1fr}


.xxlms-quiz-bar.warn span{background:#dc2626}

.xxlms-quiz-nav--top{margin-top:0;padding-top:0;border-top:0;margin-bottom:12px;border-bottom:1px solid #eee;padding-bottom:12px}

.xxlms-opt{
  display:flex;gap:12px;align-items:flex-start;
  padding:12px 14px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#f8fafc;
  cursor:pointer;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
  margin-top:10px;
}
.xxlms-opt:hover{transform:translateY(-1px);border-color:#cbd5e1;box-shadow:0 10px 22px rgba(2,6,23,.06)}
.xxlms-opt input{margin-top:3px;transform:scale(1.08)}
.xxlms-opt img{max-width:120px;max-height:90px;object-fit:cover;border-radius:10px;border:1px solid #eef2f7;margin-inline-end:10px;vertical-align:middle}
.xxlms-opt:has(input:checked){background:#ecfdf5;border-color:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.12)}

/* ==============================
   Checkout layout fixes (mobile)
   Scoped to XX-LMS checkout blocks only
   ============================== */
@media (max-width: 768px){
  .xxlms-front{overflow-x:hidden}

  .xxlms-front .xxlms-checkout{
    max-width:100% !important;
    padding:12px !important;
  }

  /* Force single column even if any inline styles exist */
  .xxlms-front .xxlms-checkout-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  /* Order fields become one column */
  .xxlms-front .xxlms-grid2{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  /* Payment gateway cards in one column */
  .xxlms-front .xxlms-pay-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  /* Tabs: wrap neatly on phones */
  .xxlms-front .xxlms-pay-tabheads{
    flex-wrap:wrap !important;
    gap:8px !important;
  }
  .xxlms-front .xxlms-pay-tabheads .xxlms-tabhead{
    flex:1 1 calc(50% - 8px) !important;
    min-height:44px;
    padding:10px 12px !important;
    font-size:14px;
    border-radius:14px !important;
  }

  .xxlms-front .xxlms-tabpanels{
    padding:0 12px 12px !important;
  }

  /* Sticky summary should not stick on mobile */
  .xxlms-front .xxlms-checkout-right .xxlms-checkout-card{
    position:static !important;
    top:auto !important;
  }

  /* Inputs should never overflow */
  .xxlms-front input,
  .xxlms-front select,
  .xxlms-front textarea{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
}

/* ==============================
   Course page + checkout hardening (mobile)
   Works even if theme strips wrapper classes
   ============================== */
@media (max-width: 768px){
  /* Prevent horizontal scroll if theme containers overflow */
  body{overflow-x:hidden}

  /* Checkout page (courses) even without .xxlms-front wrapper */
  .xxlms-checkout{max-width:100% !important;padding:12px !important;margin:0 auto !important}
  .xxlms-checkout-grid{grid-template-columns:1fr !important;gap:12px !important}
  .xxlms-checkout-right .xxlms-checkout-card{position:static !important;top:auto !important}
  .xxlms-grid2{grid-template-columns:1fr !important;gap:12px !important}
  .xxlms-pay-grid{grid-template-columns:1fr !important;gap:12px !important}
  .xxlms-tabheads{flex-wrap:wrap !important;gap:8px !important}
  .xxlms-tabheads .xxlms-tabhead{flex:1 1 calc(50% - 8px) !important;min-height:44px;padding:10px 12px !important;font-size:14px;border-radius:14px !important}
  .xxlms-tabpanels{padding:0 12px 12px !important}

  /* Course page layout (payment card sits in the side column) */
  .xxlms-course-grid{grid-template-columns:1fr !important;gap:12px !important;padding:14px 12px !important;direction:rtl !important}
  .xxlms-course-top{padding:12px 12px 0 !important}
  .xxlms-side{order:1}
  .xxlms-main{order:2}

  /* Inputs never overflow */
  .xxlms-front input,
  .xxlms-front select,
  .xxlms-front textarea,
  .xxlms-checkout input,
  .xxlms-checkout select,
  .xxlms-checkout textarea{width:100% !important;max-width:100% !important;box-sizing:border-box !important}
}

/* ==============================
   Course page + checkout hardening (mobile)
   Works even if theme strips wrapper classes
   ============================== */
@media (max-width: 768px){
  /* Prevent horizontal scroll if theme containers overflow */
  body{overflow-x:hidden}

  /* Checkout page (courses/tests) even without .xxlms-front wrapper */
  .xxlms-checkout{max-width:100% !important;padding:12px !important;}
  .xxlms-checkout-grid{grid-template-columns:1fr !important;gap:12px !important;}
  .xxlms-grid2{grid-template-columns:1fr !important;gap:12px !important;}
  .xxlms-pay-grid{grid-template-columns:1fr !important;gap:12px !important;}
  .xxlms-tabheads{flex-wrap:wrap !important;gap:8px !important;}
  .xxlms-tabheads .xxlms-tabhead{flex:1 1 calc(50% - 8px) !important;min-height:44px;padding:10px 12px !important;font-size:14px;border-radius:14px !important;}
  .xxlms-checkout-right .xxlms-checkout-card{position:static !important;top:auto !important;}

  /* Course page layout: single column + better spacing */
  .xxlms-course-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
    padding:16px 12px !important;
    direction:rtl !important;
  }
  .xxlms-course-top{padding:12px 12px 0 !important;}
  .xxlms-course-title{font-size:26px !important;line-height:1.2 !important;}

  /* Ensure side card and main content stack nicely */
  .xxlms-course-grid .xxlms-side{order:1;}
  .xxlms-course-grid .xxlms-main{order:2;}

  /* Inputs never overflow */
  input, select, textarea{max-width:100% !important;box-sizing:border-box !important;}
}

/* =====================
   Consultations UI tweaks
   - Ensure receipt upload + notes forms are responsive on mobile/desktop
===================== */
.xxlms-pay-tabs{display:flex;gap:10px;flex-wrap:wrap}
.xxlms-pay-tab{flex:1;min-width:140px}
.xxlms-pay-panel{display:none}
.xxlms-pay-panel.active{display:block}
.xxlms-consult-pay-form input[type="file"],
.xxlms-consult-pay-form input[type="text"],
.xxlms-consult-pay-form textarea{width:100%;max-width:100%}
@media (max-width: 768px){
  .xxlms-consult-pay-form .xxlms-grid2{grid-template-columns:1fr !important}
  .xxlms-pay-tab{flex:1 1 45%}
}

/* =============================
   Consultations – Booking UI (Professional)
   Scoped to avoid impacting other pages
============================= */
.xxlms-consult-booking{padding:24px 16px}
.xxlms-consult-booking .xxlms-consult-card{max-width:1100px;margin:0 auto;overflow:hidden}
.xxlms-consult-booking .xxlms-card-header{padding:18px 18px 0}
.xxlms-consult-booking .xxlms-form{padding:18px}
.xxlms-consult-booking .xxlms-grid2{gap:14px}

/* Price card */
.xxlms-consult-booking .xxlms-pricecard{border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:12px 14px;background:#fff;display:flex;flex-direction:column;gap:6px}
.xxlms-consult-booking .xxlms-pricecard-label{font-weight:700;font-size:13px}
.xxlms-consult-booking .xxlms-pricecard-value{font-weight:800;font-size:24px;display:flex;align-items:baseline;gap:8px}
.xxlms-consult-booking .xxlms-pricecard-cur{font-size:13px;font-weight:700;opacity:.75}
.xxlms-consult-booking .xxlms-pricecard-sub{font-size:12px}

/* Mode pills */
.xxlms-consult-booking .xxlms-mode{display:flex;gap:10px;flex-wrap:wrap}
.xxlms-consult-booking .xxlms-mode-pill{border:1px solid rgba(0,0,0,.12);border-radius:999px;padding:10px 14px;display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;background:#fff;transition:all .15s ease}
.xxlms-consult-booking .xxlms-mode-pill input{display:none}
.xxlms-consult-booking .xxlms-mode-pill.is-active{border-color:rgba(0,0,0,.2);box-shadow:0 8px 22px rgba(0,0,0,.06)}
.xxlms-consult-booking .xxlms-mode-pill span{font-weight:700}

/* Availability area */
.xxlms-consult-booking .xxlms-avail{margin-top:10px}
.xxlms-consult-booking .xxlms-mini-list{border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:12px 14px;background:#fff}
.xxlms-consult-booking .xxlms-mini-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.xxlms-consult-booking .xxlms-mini-title{font-weight:800}
.xxlms-consult-booking .xxlms-linkbtn{border:0;background:transparent;padding:0;margin:0;color:inherit;opacity:.8;cursor:pointer;font-weight:700}
.xxlms-consult-booking .xxlms-linkbtn:hover{opacity:1;text-decoration:underline}
.xxlms-consult-booking .xxlms-mini-body{display:flex;flex-wrap:wrap;gap:8px}
.xxlms-consult-booking .xxlms-chip{border-radius:999px;padding:7px 10px;border:1px solid rgba(0,0,0,.12);font-weight:700;font-size:13px}
.xxlms-consult-booking .xxlms-chip.ok{border-color:rgba(16,185,129,.35)}
.xxlms-consult-booking .xxlms-chip.bad{border-color:rgba(239,68,68,.35);opacity:.85}

/* Cleaner actions spacing */
.xxlms-consult-booking .xxlms-actions{padding-top:8px}

@media (max-width: 768px){
  .xxlms-consult-booking{padding:14px 10px}
  .xxlms-consult-booking .xxlms-card-header{padding:14px 14px 0}
  .xxlms-consult-booking .xxlms-form{padding:14px}
  .xxlms-consult-booking .xxlms-mode{flex-direction:column}
  .xxlms-consult-booking .xxlms-mode-pill{width:100%;justify-content:space-between}
}