/* ==========================================================================
   Hermes Inline Course Player - Sidebar + Overlay (Final)
   Notes:
   - Sidebar styles are isolated via #hmsInlineCourseSections selectors
   - Any generic tab/session styles (e.g. .hms-section) are neutralized inside sidebar
   ========================================================================== */

.hms-inline-player{ overflow:hidden; border-radius:14px; background:#fff; }
/* Top progress (moved from sidebar to topbar) */
.hms-inline-top-progress{
  flex: 0 0 auto;
  min-width: 220px;
  max-width: 380px;
}
.hms-inline-top-progress .hms-inline-progress-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#475569;
  font-weight:800;
  font-size:12px;
  gap:10px;
}
.hms-inline-top-progress .hms-inline-progress-count{ opacity:.85; }
.hms-inline-top-progress .hms-inline-progress-bar{
  margin-top:8px;
  height:6px;
  background:rgba(15,23,42,.08);
  border-radius:999px;
  overflow:hidden;
}
.hms-inline-top-progress .hms-inline-progress-bar span{
  display:block;
  height:100%;
  width:0%;
  background:#3b82f6;
}

/* Main header above video: Back + Session title (top-right) */
.hms-inline-mainhead{
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background:#fff;
}
.hms-inline-mainhead-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  direction: rtl;
}
.hms-inline-session-title{
  font-weight: 900;
  color:#0f172a;
  font-size: 14px;
  max-width: 100%;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sidebar scroll: session list should scroll, not the whole page */
.hms-player-sessions{
  padding:0 !important;
  margin:0 !important;
  overflow-y:auto;
  max-height: calc(100vh - 220px);
}

@media (max-width: 992px){
  .hms-inline-topbar{ flex-wrap:wrap; gap:10px; }
  .hms-inline-top-progress{ min-width: 100%; max-width: 100%; }
  .hms-inline-sidebar{ width: 100%; max-width: 100%; }
  .hms-inline-layout{ flex-direction: column; }
  .hms-player-sessions{ max-height: 40vh; }
}

.hms-inline-topbar{
    display: flex;
    flex-direction: column;        /* ✅ بازگشت بالا، عنوان زیرش */
    align-items: flex-start;       /* ✅ چیدمان طبیعی */
    justify-content: flex-start;
    gap: 6px;                      /* فاصله بین دکمه و عنوان */
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    background: #fff;
    direction: rtl;                /* ✅ متن‌ها RTL (فارسی) */
    text-align: right;
}
.hms-inline-top-title{
  width: 100%;
  line-height: 1.7;
}

.hms-inline-back{ text-decoration:none; color:#64748b; font-weight:200; }
.hms-inline-top-title{ color: #4b5a7a;
    font-weight: 400;
    font-size: 16px; }

.hms-inline-layout{ display:flex; flex-direction:row; gap:0; background:#fff; }
.hms-inline-sidebar{
  width:340px; max-width:45%;
  border-right:0 !important;              /* no divider */
  background:#fff;
}
.hms-inline-main{ flex:1; min-width:0; background:#fff; }

.hms-inline-progress{
  padding:14px 16px;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.hms-inline-progress-row{
  display:flex; align-items:center; justify-content:space-between;
  color:#475569; font-weight:700; font-size:13px;
}
.hms-inline-progress-bar{
  margin-top:10px; height:6px;
  background:rgba(15,23,42,.08);
  border-radius:999px; overflow:hidden;
}
.hms-inline-progress-bar span{ display:block; height:100%; width:0%; background:#3b82f6; }

/* Sidebar container: flush edges */
.hms-player-sessions{ padding:0 !important; margin:0 !important; }

/* Video */
.hms-inline-video-wrap{ position:relative; }
.hms-inline-video{
  width:100%;
  aspect-ratio:16 / 9;
  background:#0b1220;
}

/* Locked blur behind overlay */
#hmsInlineVideoWrap.is-locked .hms-inline-video{ filter:blur(3px); }

/* ==========================================================================
   Overlay (Login / Enroll / Buy) - matches provided screenshot
   ========================================================================== */
.hms-inline-overlay{
  position:absolute;
  inset:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.35);
  border-radius:14px;
}

.hms-inline-overlay-card{
  width:min(400px, 92%);
  border-radius:18px;
  padding:34px 26px;
  text-align:center;
  color:#fff;
background: #33415580;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 22px 70px rgba(0,0,0,.35);
  backdrop-filter:blur(8px);
}

.hms-inline-overlay-topicon{
  width:68px; height:68px;
  margin:0 auto 18px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hms-inline-overlay-topicon svg{ display:block; }

.hms-inline-overlay-text{
  font-weight:600;
  font-size:14px;
  line-height:1.9;
  margin:0 0 22px 0;
}

.hms-inline-overlay-actions{ display:flex; justify-content:center; }

.hms-inline-action-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  background:#fff;
  color:#4c81ff;
  font-size:14px;
  border:0;
  border-radius:8px;
  padding:14px 24px;
  font-weight:900;
  text-decoration:none;
  cursor:pointer;

  /* icon on left */
  direction:ltr;
}
.hms-inline-action-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#0f172a;
}
.hms-inline-action-txt{ direction:rtl; }

@media (max-width: 640px){
  .hms-inline-overlay-card{ padding:10px; }
  .hms-inline-overlay-text{ font-size:13px; }
  .hms-inline-action-btn{ width:100%; min-width:0; }
}

/* ==========================================================================
   Sidebar Sessions (Inline) - fully isolated (NO tab-session styles)
   ========================================================================== */

/* Neutralize any generic session/tab styles inside the sidebar */
#hmsInlineCourseSections,
#hmsInlineCourseSections .hms-section,
#hmsInlineCourseSections [data-hms-section]{
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  overflow:visible !important;
}

#hmsInlineCourseSections.hms-inline-sessions{
  background:#fff !important;
  border-radius:0 !important;            /* flush */
  overflow:hidden;
}

/* Section header (the "menu section") */
#hmsInlineCourseSections [data-hms-toggle]{
  background:#f1f5f9 !important;
  padding:14px 16px !important;          /* flush */
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:900;
  font-size:15px;
  color:#0f172a;
  cursor:pointer;
}

/* Section body show/hide (kept compatible with current JS: .hms-sec-body) */
/* Accordion animation for sidebar sections */
.hms-inline-player #hmsInlineCourseSections .hms-sec-body{
  display:block !important;
  max-height:0;
  overflow:hidden;
  transition:max-height 280ms ease;
  will-change:max-height;
}

/* کلاس open فقط برای state است؛ ارتفاع را JS ست می‌کند */
.hms-inline-player #hmsInlineCourseSections .hms-section.open .hms-sec-body{
  /* max-height توسط JS تعیین می‌شود */
}


/* Each session row */
#hmsInlineCourseSections .hms-row{
padding: 0 !important;
    display: flex;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #eef2f7 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    background: #fff;
    flex-direction: row;
}
#hmsInlineCourseSections .hms-row:last-child {
display: flex;
    border-bottom: 0 !important;
    flex-direction: row;
}
#hmsInlineCourseSections .hms-row:last-child{ border-bottom:0 !important; }

#hmsInlineCourseSections .hms-inline-row-inner{
display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    flex-direction: row;
}

#hmsInlineCourseSections .hms-inline-row-ico{ flex:0 0 auto; margin-top:2px; }
#hmsInlineCourseSections .hms-inline-row-txt{ min-width: 0;
    display: flex;
    direction: ltr;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-end;}

#hmsInlineCourseSections .hms-inline-row-title{
font-weight: 700;
    font-size: 14px;
    word-spacing: -2px;
    line-height: 1.7;
    color: #4b5a78 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}

#hmsInlineCourseSections .hms-inline-row-titlebar{
display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
    direction: rtl;
    flex-direction: row-reverse;
}
#hmsInlineCourseSections .hms-inline-row-done-badge{
  width:24px;
  height:24px;
  border-radius:999px;
  background:#22c55e;
  color:#fff;
  display:none;
  align-items:center;
  justify-content:center;
  flex:0 0 24px;
  position:relative;
  box-shadow:0 8px 18px rgba(34,197,94,.28);
}
#hmsInlineCourseSections .hms-inline-row-done-badge[hidden]{ display:none !important; }
#hmsInlineCourseSections .hms-inline-row-done-badge svg{
  width:14px;
  height:14px;
  display:block;
}
#hmsInlineCourseSections .hms-row.is-completed .hms-inline-row-done-badge{
  display:inline-flex;
}
#hmsInlineCourseSections .hms-row.is-completed .hms-inline-row-ico{
  opacity:0;
}
#hmsInlineCourseSections .hms-row.is-completed .hms-inline-row-title{
  color:#334155;
}
#hmsInlineCourseSections .hms-row.is-completed.is-active .hms-inline-row-title,
#hmsInlineCourseSections .hms-row.is-completed.is-active .hms-inline-row-meta{
  color:#fff !important;
}
#hmsInlineCourseSections .hms-row.is-completed.is-active .hms-inline-row-done-badge{
  background:#22c55e;
  color:#fff;
}
#hmsInlineCourseSections .hms-inline-row-done-badge.is-burst{
  animation:hmsDonePop .9s cubic-bezier(.18,.89,.32,1.28);
}
#hmsInlineCourseSections .hms-inline-row-done-badge.is-burst::before,
#hmsInlineCourseSections .hms-inline-row-done-badge.is-burst::after{
  content:'';
  position:absolute;
  inset:-10px;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.95) 0 2px, transparent 2.5px),
    radial-gradient(circle at 75% 15%, rgba(251,191,36,.95) 0 2px, transparent 2.5px),
    radial-gradient(circle at 85% 60%, rgba(255,255,255,.95) 0 2px, transparent 2.5px),
    radial-gradient(circle at 18% 82%, rgba(251,191,36,.95) 0 2px, transparent 2.5px),
    radial-gradient(circle at 52% 92%, rgba(255,255,255,.95) 0 2px, transparent 2.5px);
  animation:hmsDoneSpark .9s ease-out forwards;
}
@keyframes hmsDonePop{
  0%{ transform:scale(.55) rotate(-10deg); }
  45%{ transform:scale(1.22) rotate(3deg); }
  100%{ transform:scale(1) rotate(0); }
}
@keyframes hmsDoneSpark{
  0%{ opacity:0; transform:scale(.35); }
  20%{ opacity:1; }
  100%{ opacity:0; transform:scale(1.4); }
}

#hmsInlineCourseSections .hms-inline-row-meta{
margin-top: 5px;
    font-size: 11px;
    color: #95a0b1;
    font-weight: 400;
}

/* Download button (only for public/non-secure sessions) */
#hmsInlineCourseSections .hms-inline-download,
#hmsInlineCourseSections .hms-inline-attach{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  padding:6px 10px;
  border-radius:12px;
  border:1px solid #e2e8f0;
  background:#f1f5f9;
  text-decoration:none;
  font-size:12.5px;
  line-height:1.2;
  color:#0f172a;
}
#hmsInlineCourseSections .hms-inline-download:hover,
#hmsInlineCourseSections .hms-inline-attach:hover{
  background:#eaeef6;
}
#hmsInlineCourseSections .hms-inline-download-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
#hmsInlineCourseSections .hms-inline-download-ico svg{
  width:18px;
  height:18px;
  display:block;
}

/* Keep readable on active (blue) row */
#hmsInlineCourseSections .hms-row.is-active .hms-inline-download,
#hmsInlineCourseSections .hms-row.is-active .hms-inline-attach{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.22);
  color:#fff;
}

/* Playable icon: blue circle (stroke only) */
#hmsInlineCourseSections .hms-inline-ico--play{
  width:16px;
  height:16px;
  border-radius:999px;
  border:2px solid #3b82f6;
  display:inline-block;
  box-sizing:border-box;
}
/* ✅ Completed icon: green filled circle with white check (like screenshot) */
#hmsInlineCourseSections .hms-inline-ico--done{
  width:16px;
  height:16px;
  border-radius:999px;
  background:#16a34a;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}
#hmsInlineCourseSections .hms-inline-ico--done svg{
  width:12px;
  height:12px;
  display:block;
  color:#fff;
}

/* Locked icon: red lock */
#hmsInlineCourseSections .hms-inline-ico--lock{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#ef4444;
}
#hmsInlineCourseSections .hms-inline-ico--lock svg{
  width:18px;
  height:18px;
  display:block;
  color:currentColor;
}
#hmsInlineCourseSections .hms-inline-ico--lock svg .stroke-current{
  stroke:currentColor;
}

/* Active row */
#hmsInlineCourseSections .hms-row.is-active{
background: #3b82f6 !important;
    display: flex;
    flex-direction: row;
}
#hmsInlineCourseSections .hms-row.is-active .hms-inline-row-title,
#hmsInlineCourseSections .hms-row.is-active .hms-inline-row-meta{
  color:#fff !important;

}
#hmsInlineCourseSections .hms-row.is-active .hms-inline-ico--play{
  border-color:#fb793d !important;
}
#hmsInlineCourseSections .hms-row.is-active .hms-inline-ico--lock{
  color:#fff !important;
}

/* Ensure no borders/shadows sneak in from wrappers */
.hms-inline-player .hms-inline-sidebar,
.hms-inline-player .hms-player-sessions{
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
/* ==========================================================================
   FIX: Remove unwanted outer spacing for sidebar section headers (flush layout)
   - Prevent centered/boxed section headers and large vertical gaps
   ========================================================================== */
#hmsInlineCourseSections .hms-section,
#hmsInlineCourseSections [data-hms-section],
#hmsInlineCourseSections .hms-sec-head,
#hmsInlineCourseSections [data-hms-toggle]{
  margin:0 !important;
}

#hmsInlineCourseSections .hms-section,
#hmsInlineCourseSections [data-hms-section]{
  padding:0 !important;
}

/* Make the toggle/header full-width (no "floating" box) */
#hmsInlineCourseSections [data-hms-toggle],
#hmsInlineCourseSections .hms-sec-head{
  width:100% !important;
  max-width:none !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  box-shadow:none !important;
  border:0 !important;
  border-radius:0 !important;
}

/* Ensure the list sits flush with sidebar edges */
.hms-inline-player .hms-inline-sidebar,
.hms-inline-player .hms-player-sessions,
.hms-inline-player #hmsInlineCourseSections{
  padding:0 !important;
}

/* Remove any legacy "card" spacing if present */
#hmsInlineCourseSections .hms-sec-body{
  padding:0 !important;
}
/* ===== Sidebar Header Custom (no tab styles) ===== */
#hmsInlineCourseSections .hms-inline-sec-right-title{
  font-size:15px !important;
  font-weight:900 !important;
  color:#0f172a !important;
  line-height:1.6;
}

#hmsInlineCourseSections .hms-inline-sec-right-label{
  font-size:13px !important;
  font-weight:700 !important;
  color:#94a3b8 !important;
  line-height:1.6;
}

/* دایره هدر با رنگ #3b82f6 */
#hmsInlineCourseSections .hms-inline-sec-circle{
  width:16px !important;
  height:16px !important;
  border-radius:999px !important;
  border:2px solid #3b82f6 !important;
  background:transparent !important;
  display:inline-block !important;
  box-sizing:border-box !important;
}
/* ------------------------------------------------------------
   Sidebar (Inline Player) – prevent "Sessions tab" styles leaking
   Scope ONLY to the cloned sidebar container: #hmsInlineCourseSections
------------------------------------------------------------ */

.hms-inline-player #hmsInlineCourseSections .hms-sec-head-right{
  gap: 10px !important;
}

/* Sidebar header typography (separate from course sessions tab body) */
.hms-inline-player #hmsInlineCourseSections .hms-sec-right-label{
    font-size: 16px !important;
    font-weight: 700 !important;
    word-spacing: 3px;
    color: #64748b !important;
    line-height: 2 !important;
}

.hms-inline-player #hmsInlineCourseSections .hms-sec-right-title{
font-size: 14px !important;
    font-weight: 300 !important;
    color: #64748b !important;
    line-height: 1.2 !important;
}

/* Remove any accidental dot/bullet injected by other CSS */
.hms-inline-player #hmsInlineCourseSections .hms-sec-right-label::before,
.hms-inline-player #hmsInlineCourseSections .hms-sec-right-label::after,
.hms-inline-player #hmsInlineCourseSections .hms-sec-right-title::before,
.hms-inline-player #hmsInlineCourseSections .hms-sec-right-title::after{
  content: none !important;
}

.hms-inline-player #hmsInlineCourseSections .hms-sec-right-divider{
  height: 16px !important;
  opacity: .65 !important;
}

/* If any ".hms-sec-dot" exists inside the sidebar, keep it small and consistent */
.hms-inline-player #hmsInlineCourseSections .hms-sec-dot{
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: #3b82f6 !important;
} 

.hms-inline-player #hmsInlineCourseSections {
    gap: 0px !important;
}
/* ======================================================================
   FIX: Cover poster + Overlay layering + Full-cover (no padding)
   ====================================================================== */

.hms-inline-video-wrap{ padding:0 !important; }

#hmsInlineVideoWrap{
  position:relative !important;
  border-radius:0px;
  overflow:hidden;
}
#hmsInlineVideo{
  position:relative;
  z-index:1;
  width:100%;
  height:auto;
  border-radius:0 !important;
  object-fit:cover;
  background:#0b1220;
}

/* خود overlay (کانتینر) روی پلیر بنشیند */
#hmsInlineOverlay{
  position:absolute !important;
  inset:0 !important;
  z-index:50 !important;
}

/* بک‌گراند overlay کل پلیر را بپوشاند */
#hmsInlineOverlay .hms-inline-overlay{
  position:absolute !important;
  inset:0 !important;
  z-index:51 !important;
  border-radius:0 !important;
}

/* کارت وسطی همیشه روی بک‌گراند باشد */
#hmsInlineOverlay .hms-inline-overlay-card{
  position:relative;
  z-index:52 !important;
}

/* کاور کل پلیر را بپوشاند (پدینگ اضافی حذف شود) */
.hms-inline-video-wrap{
  padding:0 !important;
}
#hmsInlineVideoWrap .hms-inline-overlay{
  position:absolute;
  inset:0 !important;
  z-index:10;
  border-radius:0 !important;
}
 
#hmsInlineVideoWrap .hms-inline-overlay-card{
  position:relative;
  z-index:11;
}

@media (max-width: 992px){
  .hms-inline-layout{ flex-direction:column !important; }
  .hms-inline-sidebar{ width:100% !important; max-width:100% !important; order:2; }
  .hms-inline-main{ order:1; }
}
.hms-inline-spinner{
  width:16px;height:16px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  display:inline-block;
  animation:hmsSpin .7s linear infinite;
}
@keyframes hmsSpin{ to{ transform:rotate(360deg); } }

#hmsInlineEnrollBtn.is-loading{ opacity:.9; }
#hmsInlineEnrollBtn.is-loading .hms-inline-btn-text{ font-weight:900; }
.hms-canvas-mode #hmsInlineVideo{
  opacity:0.001;
  pointer-events:none;
}
#hmsInlineVideoWrap{ position: relative; }
/* Fullscreen sizing */
#hmsInlineVideoWrap:fullscreen,
#hmsInlineVideoWrap:-webkit-full-screen{
  width: 100vw !important;
  height: 100vh !important;
  background: #000 !important;
}

/* ویدیو و کانواس داخل فول‌اسکرین تمام صفحه را پر کنند */
#hmsInlineVideoWrap:fullscreen #hmsInlineVideo,
#hmsInlineVideoWrap:-webkit-full-screen #hmsInlineVideo{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;   /* اگر نخواستید کراپ شود: contain */
}

#hmsInlineVideoWrap:fullscreen #hmsInlineCanvas,
#hmsInlineVideoWrap:-webkit-full-screen #hmsInlineCanvas{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
/* Mini player (PiP) */
#hmsInlineVideoWrap.hms-mini{
  position:fixed !important;
  width:min(360px, 92vw) !important;
  aspect-ratio:16 / 9;
  height:auto !important;
  bottom:16px !important;
  right:16px !important;
  left:auto !important;
  top:auto !important;
  z-index:999999 !important;
  border-radius:14px !important;
  overflow:hidden !important;
  background:#000 !important;
  box-shadow:0 18px 60px rgba(0,0,0,.35) !important;
}
@media (max-width: 480px){
  #hmsInlineVideoWrap.hms-mini{
    width:min(320px, 92vw) !important;
    bottom:12px !important;
    right:12px !important;
  }
}

#hmsInlineVideoWrapPlaceholder{
  width:100%;
  display:none;
}

.hms-player-controls{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:10px 10px 12px;
  z-index:70;
  background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));
}
/* کیفیت (Quality) با آیکن SVG + select شفاف روی آن */
.hms-quality-wrap{
  position: relative;
  width: 34px;              /* اندازه کلی آیتم کنار کنترل‌ها */
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hms-quality-ico{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: #fff;              /* چون SVG را currentColor کردیم */
}

.hms-quality-ico svg{
  width: 24px;
  height: 24px;
  display: block;
}

/* خود select مخفیِ بصری، اما روی آیکن قرار می‌گیرد تا با کلیک، منوی native باز شود */
.hms-quality-native{
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  border: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
}

.hms-controls-row{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-direction: row-reverse;
}
.hms-controls-row2{
display: flex;
    gap: 8px;
    flex-direction: row-reverse;
    align-items: center;
}

.hms-btn{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
  color:#fff;
  border-radius:10px;
  padding:6px 10px;
  font-size:12px;
  cursor:pointer;
}

.hms-time{
    color: #fff;
    font-size: 14px;
    opacity: .95;
    display: flex;
    gap: 6px;
    align-items: center;
}

.hms-spacer{ flex:1; }

.hms-volume{  display: inline-flex;
  align-items: flex-end;
  gap: 8px;
  position: relative;}
    
    .hms-volume #hmsVol{
  width: 110px;              /* اندازه نهایی وقتی باز است */
  max-width: 0;              /* در حالت بسته جمع می‌شود */
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;      /* وقتی بسته است قابل تعامل نباشد */
  transition: max-width .25s ease, opacity .2s ease, transform .25s ease;
  overflow: hidden;
}

/* حالت باز */
.hms-volume.is-open #hmsVol{
  max-width: 110px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
    
    
#hmsVol{ width:80px;  direction: ltr;}
button:focus {
    outline: none!important;
    outline: none!important;
}
.hms-quality{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
  color:#fff;
  border-radius:10px;
  padding:6px 10px;
  font-size:12px;
  outline:none;
}
.hms-quality option{ color:#000; }

.hms-progress-row{ margin-top:8px; }
#hmsSeek{ width:100%; direction: ltr;}
/* Back button icon spacing (in case .ml-1 is not available on this page) */
.hms-inline-back{
  display: inline-flex;
  align-items: center;
}
.hms-inline-back svg{
  margin-left: 6px; /* معادل ml-1 */
  flex: 0 0 auto;
}
/* TOPBAR one row: right(back+title) | left(progress) */
#hmsInlinePlayer .hms-inline-topbar{
display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    direction: rtl;
    flex-direction: row-reverse;
}

/* Right group */
#hmsInlinePlayer .hms-inline-topbar-right{
display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 12px;
    direction: rtl;
    min-width: 0;
    flex-direction: column;
}

/* Back link */
#hmsInlinePlayer .hms-inline-back{
display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-weight: 100;
    font-size: 14px;
    font-weight: 300;
    color: #737f8f;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* Session title (right side) */
#hmsInlinePlayer .hms-inline-session-title{
font-weight: 600;
    color: #4b5a7a;
    font-size: 16px;
    max-width: 520px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Left group (progress) */
#hmsInlinePlayer .hms-inline-topbar-left{
  flex: 0 0 auto;
  direction: rtl;
}

/* Progress width control */
#hmsInlinePlayer .hms-inline-top-progress{
  min-width: 310px;
  max-width: 420px;
}

/* Responsive: wrap nicely */
@media (max-width: 768px){
  #hmsInlinePlayer .hms-inline-topbar{
    flex-wrap: wrap;
  }
  #hmsInlinePlayer .hms-inline-topbar-right,
  #hmsInlinePlayer .hms-inline-topbar-left{
    width: 100%;
  }
  #hmsInlinePlayer .hms-inline-topbar-right{
    justify-content: space-between;
  }
  #hmsInlinePlayer .hms-inline-session-title{
    max-width: 60%;
  }
  #hmsInlinePlayer .hms-inline-top-progress{
    max-width: none;
    width: 100%;
  }
}

/* ✅ اجازه بده سمت راست (بخش + عنوان) در صورت طول زیاد wrap بشه */
.hms-sec-head-right{
  flex: 1;
  min-width: 0;           /* خیلی مهم: اجازه shrink */
  flex-wrap: wrap;        /* اجازه رفتن به خط بعد */
  row-gap: 6px;
}

/* لیبل بخش یک تکه بماند */
.hms-sec-right-label{
  white-space: nowrap;
  flex: 0 0 auto;
}

/* جداکننده فقط وقتی جا هست دیده شود */
.hms-sec-right-divider{
  flex: 0 0 auto;
}

/* ✅ header row must NEVER wrap */
.hms-sec-head-right{
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;          /* مهم */
  gap: 12px;
  direction: rtl;
  flex-wrap: nowrap;     /* ✅ کلید حل مشکل */
}

/* ✅ "بخش ۲" همیشه یک تکه و ثابت */
.hms-sec-right-label{
  flex: 0 0 auto;        /* ثابت */
  white-space: nowrap;   /* نشکند */
}

/* ✅ divider هم ثابت */
.hms-sec-right-divider{
  flex: 0 0 auto;
  width: 1px;
  height: 22px;
}

/* ✅ فقط عنوان اجازه دارد کوچک شود و ... بگیرد */
.hms-sec-right-title{
  flex: 1 1 auto;        /* تنها آیتمی که رشد/جمع می‌شود */
  min-width: 0;          /* ✅ لازم برای ellipsis داخل flex */
  max-width: 100%;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* اگر خواستی در حالت‌های بزرگ (دسکتاپ) عنوان همان خط بماند مگر خیلی طولانی */
@media (min-width: 992px){
  .hms-sec-right-title{
    flex: 1 1 auto;  /* اول تلاش می‌کند در همان خط بماند */
  }
}

/* =============================================================
   Completed session states (sidebar + original sessions list)
   ============================================================= */
#hmsInlineCourseSections .hms-row.is-completed .hms-inline-row-ico{
  position:relative;
  width:42px;
  height:42px;
  min-width:42px;
  border-radius:14px;
  background:#22c55e;
  border:2px solid #16a34a;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 18px rgba(34,197,94,.22);
  overflow:hidden;
  transition:transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
#hmsInlineCourseSections .hms-row.is-completed .hms-inline-row-ico .hms-inline-ico--done{
  width:18px;
  height:18px;
  background:transparent;
}
#hmsInlineCourseSections .hms-row.is-completed .hms-inline-row-ico::after{
  content:attr(data-hms-number);
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#16a34a;
  background:#fff;
  font-weight:800;
  font-size:14px;
  opacity:0;
  transform:scale(.82);
  transition:opacity .22s ease, transform .22s ease;
}
#hmsInlineCourseSections .hms-row.is-completed:hover .hms-inline-row-ico{
  background:#fff;
  box-shadow:0 8px 14px rgba(34,197,94,.12);
}
#hmsInlineCourseSections .hms-row.is-completed:hover .hms-inline-row-ico > *{
  opacity:0;
  transform:scale(.72);
}
#hmsInlineCourseSections .hms-row.is-completed:hover .hms-inline-row-ico::after{
  opacity:1;
  transform:scale(1);
}
#hmsInlineCourseSections .hms-row.is-completed .hms-inline-row-title{
  color:#1e293b;
}

#hmsCourseSections .hms-row.hms-completed-session .hms-numwrap{
  position:relative;
  width:52px;
  height:52px;
  min-width:52px;
  border-radius:16px;
  border:2px solid #16a34a;
  background:#22c55e;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 12px 24px rgba(34,197,94,.18);
  transition:background .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease;
  overflow:hidden;
}
#hmsCourseSections .hms-row.hms-completed-session .hms-numwrap .hms-underline{
  display:none !important;
}
#hmsCourseSections .hms-row.hms-completed-session .hms-numwrap::after{
  content:'✓';
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:28px;
  font-weight:900;
  line-height:1;
  opacity:1;
  transition:opacity .22s ease, transform .22s ease;
}
#hmsCourseSections .hms-row.hms-completed-session .hms-num{
  color:#16a34a !important;
  font-weight:800;
  opacity:0;
  transform:scale(.82);
  transition:opacity .22s ease, transform .22s ease;
}
#hmsCourseSections .hms-row.hms-completed-session:hover .hms-numwrap{
  background:#fff;
  box-shadow:0 8px 18px rgba(34,197,94,.12);
}
#hmsCourseSections .hms-row.hms-completed-session:hover .hms-numwrap::after{
  opacity:0;
  transform:scale(.72);
}
#hmsCourseSections .hms-row.hms-completed-session:hover .hms-num{
  opacity:1;
  transform:scale(1);
}
#hmsCourseSections .hms-row.hms-completed-session .hms-title,
#hmsCourseSections .hms-row.hms-completed-session .hms-time span{
  color:#0f172a;
}

.hms-complete-burst{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:4;
}
.hms-complete-burst i{
  position:absolute;
  left:50%;
  top:50%;
  width:7px;
  height:7px;
  margin:-3.5px 0 0 -3.5px;
  border-radius:999px;
  background:var(--hms-color, #22c55e);
  opacity:0;
  transform:rotate(var(--hms-angle, 0deg)) translateY(0) scale(.4);
  animation:hmsCompleteBurst .72s cubic-bezier(.2,.9,.2,1) forwards;
}
@keyframes hmsCompleteBurst{
  0%{ opacity:0; transform:rotate(var(--hms-angle, 0deg)) translateY(0) scale(.35); }
  15%{ opacity:1; }
  100%{ opacity:0; transform:rotate(var(--hms-angle, 0deg)) translateY(calc(var(--hms-distance, 20px) * -1)) scale(1); }
}


/* ===== Sidebar completed session icon: keep exact icon position, fill circle green via AJAX ===== */
#hmsInlineCourseSections .hms-inline-row-done-badge{
  display:none !important;
}
#hmsInlineCourseSections .hms-row.is-completed .hms-inline-row-ico{
  opacity:1 !important;
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  transform:none !important;
}
#hmsInlineCourseSections .hms-row.is-completed .hms-inline-row-ico::after{
  content:none !important;
  display:none !important;
}
#hmsInlineCourseSections .hms-row.is-completed:hover .hms-inline-row-ico{
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
}
#hmsInlineCourseSections .hms-row.is-completed:hover .hms-inline-row-ico > *{
  opacity:1 !important;
  transform:none !important;
}
#hmsInlineCourseSections .hms-row.is-completed:hover .hms-inline-row-ico::after{
  content:none !important;
  display:none !important;
}
#hmsInlineCourseSections .hms-row.is-completed .hms-inline-row-ico .hms-inline-ico--done{
  width:16px !important;
  height:16px !important;
  border-radius:999px !important;
  background:#22c55e !important;
  color:#fff !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:0 4px 12px rgba(34,197,94,.28) !important;
}
#hmsInlineCourseSections .hms-row.is-completed .hms-inline-row-ico .hms-inline-ico--done svg{
  width:11px !important;
  height:11px !important;
  display:block !important;
  color:#fff !important;
}
#hmsInlineCourseSections .hms-row.is-completed.is-active .hms-inline-row-ico .hms-inline-ico--done{
  background:#22c55e !important;
  color:#fff !important;
}
#hmsInlineCourseSections .hms-inline-ico--done.is-burst{
  position:relative;
  animation:hmsDonePop .9s cubic-bezier(.18,.89,.32,1.28);
}
#hmsInlineCourseSections .hms-inline-ico--done.is-burst::before,
#hmsInlineCourseSections .hms-inline-ico--done.is-burst::after{
  content:'';
  position:absolute;
  inset:-10px;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.95) 0 2px, transparent 2.5px),
    radial-gradient(circle at 75% 15%, rgba(251,191,36,.95) 0 2px, transparent 2.5px),
    radial-gradient(circle at 85% 60%, rgba(255,255,255,.95) 0 2px, transparent 2.5px),
    radial-gradient(circle at 18% 82%, rgba(251,191,36,.95) 0 2px, transparent 2.5px),
    radial-gradient(circle at 54% 88%, rgba(255,255,255,.95) 0 2px, transparent 2.5px),
    radial-gradient(circle at 92% 45%, rgba(251,191,36,.95) 0 2px, transparent 2.5px);
  opacity:0;
}
#hmsInlineCourseSections .hms-inline-ico--done.is-burst::before{
  animation:hmsDoneConfetti .9s ease-out forwards;
}
#hmsInlineCourseSections .hms-inline-ico--done.is-burst::after{
  animation:hmsDoneConfetti .9s .08s ease-out forwards;
}