:root{
  --bg: #0b0b0b;
  --card-bg: #0a0a0a;
  --card-bd: #2a2a2a;        /* outer border */
  --stroke: #ffffff;         /* inner image stroke */
  --text: #f2f2f2;
  --muted: #cfcfcf;
  --radius: 4px;
  --gap: 28px;               /* space between cards (matches figma feel) */
}

*{ box-sizing:border-box; }
body{ margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"GeneralSans-Regular";
 }

 @media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 85%;
    }
}
/* Grid wrapper */
.content-grid{
  width: 100%;
  margin: 32px 0px 56px;
  display:grid;
  gap: var(--gap);
  grid-template-columns: repeat(4, 1fr);
}

.content-grid2 {
    width: 80%;
    margin: 32px 0px 56px;
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(4, 1fr);
    margin-left: auto;
    margin-right: auto;
}
.content-grid2 .c-title
{
    font-size: 20px;
    font-weight: 500;
    margin: 0;
    color: white;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.content-grid2 .c-id {
    font-size: 20px;
    color: var(--muted);
    margin-bottom: 4px;
    text-decoration: none;
}
/* Card */
.c-card{
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius);
  padding: 16px;
}
.card{
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius);
  padding: 16px;
}
/* Image area with inner white stroke */
.c-thumb{
  position: relative;
  border-radius: calc(var(--radius));
  overflow: hidden;                 /* clip corners */
  aspect-ratio: 3 / 4;              /* poster-ish */
  background:#111;
}

/* Actual image */
.c-thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* Thin inner stroke like your Figma */
.c-thumb .c-stroke{
  position:absolute;
  inset:10px;                       /* distance from edges to mimic inner frame */
  border: 2px solid var(--stroke);
  border-radius: calc(var(--radius) - 1px);
  pointer-events:none;
}

/* Meta */
.c-meta{
  padding-top: 10px;
}
.c-id{
  font-size: 24px;
  color: var(--muted);
  margin-bottom: 4px;
    text-decoration: none;
}
.c-title{
  font-size: 24px;
  font-weight: 500;
  margin: 0;
  color: white;
  text-decoration: none;
  white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.c-title:hover{
  text-decoration: none;
}
.c-id:hover{
  text-decoration: none;
}
/* Hover (subtle) */
.c-card:hover{
  border-color:#680808;
  cursor: pointer;
  box-shadow: 0px 5px 5px 5px #242424 inset, 0 12px 30px rgba(0,0,0,.35);
  transform: translateY(-1px);
  text-decoration: none;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.card:hover{
  border-color:#680808;
  box-shadow: 0px 5px 5px 5px #242424 inset, 0 12px 30px rgba(0,0,0,.35);
  transform: translateY(-1px);
  text-decoration: none;
    cursor: pointer;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.main-video{
  justify-self: center;
  width: 100%;
  height: 100vh;
  border-radius: 8px;
  max-width: 450px;
  margin: 20px 0px;
}
.video-wrapper{
  position: relative; width: 100%; max-width: 450px; margin: 0px auto;  height: auto;

}
.video-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.episode-active {
    outline: 1px #FBB49F solid !important; 
}
.episode-thumb {
    width: 50px;
    height: 60px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
}

.episode {
    padding: 6px 10px;
    white-space: nowrap;
}

 .desktop-player-div{
    display: block !important;
  }
  .mobile-player-div{
    display: none !important;
  }
/* Responsive */
@media (max-width: 1024px){
  .content-grid{ grid-template-columns: repeat(2, 1fr); }
  .content-grid2{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px){
  .desktop-player-div{
    display: none !important;
  }
  .mobile-player-div{
    display: block !important;
  }
  .view_more{
    padding: 15px 10px;
  }
  .more-content-section {
        margin: 0% 0% !important;
        background: black;
  }
  .btn.episode{
    width: 20% !important;
    justify-content: center !important;
    background-color: transparent !important;
  }
  .episode-number{
    font-size: 20px !important;
    margin: 0 0 16px;
  }
  .episode-thumb{
    display: none;
  }
  .main-video{
  justify-self: center;
}
.main-image {
    width: 100%;
    height: 60vh !important;
}
  .content-grid{
    width: 96vw;
    grid-template-columns: 1fr;
    gap: 10px;
    display: ruby;
    gap: 15px;
    margin-top: 10px;
  }
  .content-grid2{
    width: 96vw;
    grid-template-columns: 1fr;
    gap: 10px;
    display: ruby;
    gap: 15px;
    margin-top: 10px;
  }
  .c-card{ padding: 14px; width: 50%;}
  .c-thumb .c-stroke{ inset:8px; }
  .c-id{
    font-size: 15px;
  }
  .c-title {
    font-size: 15px;
    font-weight: 500;
    margin: 0;
}
  .content-grid2 .c-title {
  font-size: 13px;
    font-weight: 400;
  }
.title {
    margin: 0 0 10px;   
    font-size: 16px !important;
}
  .content-grid2 .c-id{
    font-size: 13px;
    font-weight: 400;
    }
    .desc {
    font-size: 14px !important;
    line-height: 1.2 !important;
    text-align: justify;
    padding-right: 10px;
}
.content-header {
    display: flex;
    gap: 10px !important;
    padding: 10px !important;
    margin-bottom: 0px !important;
}
.purchase-box {
    width: 92%;
    padding: 10px 15px;
    text-align: center;
    border-radius: 40px;
    background: #f6f1ca;
    color: #000;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
}
.breadcrumb {
    font-size: 13px !important;
}
}
.breadcrumb {
    font-size: 18px;
    color: #c5c5c5;
    margin-bottom: 20px;
}
.episode-number {
    font-size: 28px;
    margin: 0 0 16px;
}
.content-header {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.small-thumb {
    width: 130px;
    height: 175px;
    border-radius: 8px;
    object-fit: cover;
}
.title {
    margin: 0 0 10px;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 1px;
}
.desc {
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 0%;
    max-height: 130px;
    height: 130px;
     overflow-y: auto;
}
.episode-description{
  font-size: 16px;
    line-height: 1.4;
    margin-bottom: 0%;
    max-height: 130px;
    height: 130px;
     overflow-y: auto;
}
/* Scrollbar width */
.episode-description::-webkit-scrollbar {
    width: 6px;        /* change width here */
}
.episode-description {
    scrollbar-width: thin;           /* auto | thin | none */
    scrollbar-color: #555 #1a1a1a;   /* thumb track */
}
.episode-description::-webkit-scrollbar {
    width: 4px;
}
/* Track */
.episode-description::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 10px;
}

/* Thumb */
.episode-description::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 10px;
}

/* Thumb on hover */
.episode-description::-webkit-scrollbar-thumb:hover {
    background: #ff6a00;
}


/* BUTTONS */
.buttons-row {
    display: block;
    /* gap: 12px; */
    width: 98%;
    /* margin-bottom: 40px; */
    grid-template-columns: repeat(4, 1fr);
    justify-self: anchor-center;
}

.btn.light {
    background: #f6f1ca !important;
    color: #000 !important;
    border: none;
    border-radius: 24px;
    font-size: 18px;
    outline: 1px black solid; outline-offset: -4px; 
    padding: 10px 35px;
}

.btn.dark {
    background: black !important;
    color: #fff !important;
    border-radius: 24px;
    font-size: 18px;
    outline: 1px rgb(24, 23, 23) solid; outline-offset: -4px; 
    padding: 10px 25px;
    border: 1px solid #f7f7f7;
}
.btn.episode{
  padding: 5px 5px; 
   color: #fff !important;
  border-radius: 4px; 
  outline: 1px solid #2A2A2B; 
  justify-content: flex-start; 
  align-items: center; 
  display: inline-flex;
  background: #2A2A2B;
  width: 100%;
}
/* PURCHASE BAR */
.purchase-box {
    width: 92.5%;
    padding: 12px 20px;
    text-align: center;
    border-radius: 40px;
    background: #f6f1ca;
    color: #000;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    justify-self: center;
}
.content-section{
  margin-top: 6%;
}
.content-section .container{
  display: flex;
    /* gap: 40px; */
    padding: 40px;
    max-width: 1400px;
    margin: auto;
}
/* LEFT IMAGE */
.left-section {
  flex: 1;
  text-align: center;
  background: #1F1F20;
  border-radius: 12px;
  margin-left: 8%;
  margin-right: 3%;
  height: 95vh;
    /* flex: 1;
    border: 1px solid #FFFFE3;
    text-align: center; */
}
.main-image {
    width: 100%;
    height: 95vh;
    border-radius: 8px;
    object-fit: contain;
    max-width: 450px;
    margin: 0px;
}
/* RIGHT CONTENT */
.right-section {
    flex: 1;
    /* border: 1px solid #FFFFE3; */
    padding: 20px;
    border-radius: 12px;
     background: #161617;
      margin-left: 3%;
      margin-right: 8%;
          height: 95vh;
    /* text-align: center; */
}
/* RESPONSIVE */
@media (max-width: 900px) {
  .left-section {
    margin-left: 0% !important;
    margin-right: 0% !important;
    border-radius: unset;
}
.right-section{
  margin-left: 0% !important;
    margin-right: 0% !important;
    border-radius: unset;
    background: black !important;
}
    .container {
        flex-direction: column;
        padding: 15px;
    }
    .video-player-con{
        width: 100% ! important;
        margin: 0% ! important;
        padding: 0% ! important;
        max-width: 100% !important;
    }
    .content-header {
        flex-direction: row;
        text-align: left;
        align-items: self-start;
        background: #0E0E0F;
        padding: 12px;
        margin-top: 10px;
    }
    .small-thumb {
        width: 115px;
        height: 130px;
    }
.content-section {
    margin-top: 18%;
}
.content-section .container {
    display: flex;
    padding: 15px;
    max-width: 400px;
    margin: auto;
}
    .buttons-row {
        justify-content: center;
        display: flex;
        gap: 10px;
    }
    .btn.light {
    background: #f6f1ca !important;
    color: #000 !important;
    border: none;
    border-radius: 24px;
    font-size: 16px;
    outline: 1px black solid; outline-offset: -4px; 
    padding: 8px 12px;
    width: 45%;
}

.btn.dark {
    background: black !important;
    color: #fff !important;
    border-radius: 24px;
    font-size: 16px;
    outline: 1px #1c1c1c solid !important;
    outline-offset: -4px;
    padding: 8px 12px;
    width: 45%;
    /* border: none; */
}
}