/* ==========================================================================
   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; }

.hms-inline-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid rgba(0,0,0,.06);
  background:#fff;
}
.hms-inline-back{ text-decoration:none; color:#64748b; font-weight:700; }
.hms-inline-top-title{ color:#0f172a; font-weight:900; }

.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:28px 18px; }
  .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-reverse;
}
#hmsInlineCourseSections .hms-row:last-child {
    display: flex;
    border-bottom: 0 !important;
    flex-direction: row-reverse;
}
#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-reverse;
}

#hmsInlineCourseSections .hms-inline-row-ico{ flex:0 0 auto; margin-top:2px; }
#hmsInlineCourseSections .hms-inline-row-txt{ min-width:0; flex:1 1 auto; }

#hmsInlineCourseSections .hms-inline-row-title{
  font-weight:500;
  font-size:16px;
  line-height:1.7;
  color:#4b5a78;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align: right;
}

#hmsInlineCourseSections .hms-inline-row-meta{
  margin-top:4px;
  font-size:12.5px;
  color:#94a3b8;
  font-weight:400;
}

/* Download button (only for public/non-secure sessions) */
#hmsInlineCourseSections .hms-inline-download{
  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{
  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{
  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;
}

/* 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-reverse;
}
#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: 14px !important;
  font-weight: 800 !important;
  color: #64748b !important;
  line-height: 1.2 !important;
}

.hms-inline-player #hmsInlineCourseSections .hms-sec-right-title{
  font-size: 14px !important;
  font-weight: 700 !important;
  color:#4b5a78 !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: 12px;
    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;}