/* Carousel */
.kok-stories-wrapper { position: relative; }
.kok-stories-swiper .swiper-slide { width: 220px; height: 380px; overflow: hidden; border-radius: 16px; }
.kok-card { position:relative; width:100%; height:100%; background:#111; color:#fff; display:flex; align-items:flex-end; justify-content:flex-start; }
.kok-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(0.8); }
.kok-card .kok-title { position:relative; padding:12px; font-weight:700; font-size:14px; }
/* Ensure nav arrows are clickable above slides */
.kok-stories-swiper { position: relative; overflow: visible; }
.kok-stories-swiper .swiper-slide { position: relative; z-index: 1; }
.kok-stories-swiper .swiper-button-prev,
.kok-stories-swiper .swiper-button-next { z-index: 1000; pointer-events: auto; }

/* Overlay */
#kok-story-overlay { position: fixed; inset: 0; background: radial-gradient(1000px 600px at 20% 20%, rgba(255,255,255,.05), rgba(0,0,0,.9)); z-index: 99999; display: grid; grid-template-columns: auto minmax(300px, min(480px, 90vw)) auto; align-items: center; justify-content: center; column-gap: 12px; }
#kok-story-overlay[hidden] { display:none; }
.kok-close {
  position:absolute;
  top:12px;
  right:16px;
  z-index:2;
  background:#65C1A8 !important;
  border:0;
  color:#fff;
  cursor:pointer;
  padding: 10px !important;
}

.kok-close span {
  font-size: 41px;
  margin-top: 3px;
  display: block;
}


.kok-close span:hover {
  color:#fff !important;
}

.kok-rail { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }

.kok-rail button:hover {
  color:#fff !important;
  background-color: #65C1A8 !important;
}

.kok-rail button:focus {
  color:#fff !important;
  background-color: #65C1A8 !important;
}

.kok-nav { background:rgba(255,255,255,.08); border:0; color:#fff; width:44px; height:44px; border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.kok-stage { position:relative; overflow:hidden; }
.kok-stage .kok-slide { width: min(480px, 90vw); height: 90vh; margin: 5vh auto; border-radius: 20px; overflow: hidden; background:#000; display:flex; flex-direction:column; gap: 12px; }
.kok-peek { flex: 0 0 8vh; background-size: cover; background-position: center; filter: brightness(0.7); opacity: 0.9; }
.kok-peek-top { margin-bottom: 8px; }
.kok-peek-bottom { margin-top: 8px; }
.kok-main { position: relative; flex: 1 1 auto; display:flex; align-items:center; justify-content:center; overflow: hidden; }
.kok-stage .plyr { width: 100%; height: 100%; }
.kok-caption { position:absolute; left:12px; right:12px; bottom:20px; color:#fff; background:rgba(0,0,0,.45); padding:8px 10px; border-radius:10px; font-size:14px; }


/* Mobile tweaks */
@media (max-width: 768px) { .kok-stories-swiper .swiper-slide { width: 48vw; height: 68vw; } }

/* Right-side action rail */
#kok-story-overlay .kok-rail-right { position: static; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
#kok-story-overlay .kok-action { background: rgba(255,255,255,.08); border: 0; color: #fff; width: 44px; height: 44px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
#kok-story-overlay .kok-action[aria-pressed="true"] { background: rgba(255,255,255,.2); }
#kok-story-overlay .kok-action.kok-like.is-liked { color: #ff4d6d; }

/* Video responsiveness inside stage */
.kok-main .plyr, .kok-main .plyr__video-wrapper, .kok-main .plyr__poster {
  width: 100%;
  height: 100%;
}
.kok-main video, .kok-main iframe {
  width: 100%;
  height: 100%;
  object-fit: contain; /* prevent cropping; keep full video visible */
}

/* Smooth fade transitions between videos */
.kok-stage .kok-slide { opacity: 1; transition: opacity 220ms ease-in-out; }
.kok-stage .kok-slide.kok-fade-in { opacity: 0; }
.kok-stage .kok-slide.kok-fade-in.kok-anim { opacity: 1; }
.kok-stage .kok-slide.kok-fade-out { opacity: 1; }
.kok-stage .kok-slide.kok-fade-out.kok-anim { opacity: 0; }

.kok-stories-wrapper { position: relative; }
.kok-stories-swiper .swiper-slide { width: 220px; height: 380px; overflow: hidden; border-radius: 16px; }
.kok-card { position:relative; width:100%; height:100%; background:#111; color:#fff; display:flex; align-items:flex-end; justify-content:flex-start; }
.kok-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(0.8); }
.kok-card .kok-title { position:relative; padding:12px; font-weight:700; font-size:14px; }
/* Ensure nav arrows are clickable above slides */
.kok-stories-swiper { position: relative; overflow: visible; }
.kok-stories-swiper .swiper-slide { position: relative; z-index: 1; }
.kok-stories-swiper .swiper-button-prev,
.kok-stories-swiper .swiper-button-next { z-index: 1000; pointer-events: auto; }

/* Overlay */
#kok-story-overlay { position: fixed; inset: 0; background: radial-gradient(1000px 600px at 20% 20%, rgba(255,255,255,.05), rgba(0,0,0,.9)); z-index: 99999; display: grid; grid-template-columns: auto minmax(300px, min(480px, 90vw)) auto; align-items: center; justify-content: center; column-gap: 12px; }
#kok-story-overlay[hidden] { display:none; }
.kok-close {
  position:absolute;
  top:12px;
  right:16px;
  z-index:2;
  background:#65C1A8 !important;
  border:0;
  color:#fff;
  cursor:pointer;
  padding: 10px !important;
}

.kok-close span {
  font-size: 41px;
  margin-top: 3px;
  display: block;
}

.swiper-button-next, .swiper-button-prev {
  color: #65C1A8 !important;
}

.kok-close span:hover {
  color:#fff !important;
}

.kok-rail { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }

.kok-rail button:hover {
  color:#fff !important;
  background-color: #65C1A8 !important;
}

.kok-rail button:focus {
  color:#fff !important;
  background-color: #65C1A8 !important;
}

.kok-nav { background:rgba(255,255,255,.08); border:0; color:#fff; width:44px; height:44px; border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.kok-stage { position:relative; overflow:hidden; }
.kok-stage .kok-slide { width: min(480px, 90vw); height: 90vh; margin: 5vh auto; border-radius: 20px; overflow: hidden; background:#000; display:flex; flex-direction:column; gap: 12px; }
.kok-peek { flex: 0 0 8vh; background-size: cover; background-position: center; filter: brightness(0.7); opacity: 0.9; }
.kok-peek-top { margin-bottom: 8px; }
.kok-peek-bottom { margin-top: 8px; }
.kok-main { position: relative; flex: 1 1 auto; display:flex; align-items:center; justify-content:center; overflow: hidden; }
.kok-stage .plyr { width: 100%; height: 100%; }
.kok-caption { position:absolute; left:12px; right:12px; bottom:20px; color:#fff; background:rgba(0,0,0,.45); padding:8px 10px; border-radius:10px; font-size:14px; }


/* Mobile tweaks */
@media (max-width: 768px) { .kok-stories-swiper .swiper-slide { width: 48vw; height: 68vw; } }

/* Right-side action rail */
#kok-story-overlay .kok-rail-right { position: static; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
#kok-story-overlay .kok-action { background: rgba(255,255,255,.08); border: 0; color: #fff; width: 44px; height: 44px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
#kok-story-overlay .kok-action[aria-pressed="true"] { background: rgba(255,255,255,.2); }
#kok-story-overlay .kok-action.kok-like.is-liked { color: #ff4d6d; }

/* Video responsiveness inside stage */
.kok-main .plyr, .kok-main .plyr__video-wrapper, .kok-main .plyr__poster {
  width: 100%;
  height: 100%;
}
.kok-main video, .kok-main iframe {
  width: 100%;
  height: 100%;
  object-fit: contain; /* prevent cropping; keep full video visible */
}

/* Smooth fade transitions between videos */
.kok-stage .kok-slide { opacity: 1; transition: opacity 220ms ease-in-out; }
.kok-stage .kok-slide.kok-fade-in { opacity: 0; }
.kok-stage .kok-slide.kok-fade-in.kok-anim { opacity: 1; }
.kok-stage .kok-slide.kok-fade-out { opacity: 1; }
.kok-stage .kok-slide.kok-fade-out.kok-anim { opacity: 0; }

/* Skeleton loading for carousel slides */
.kok-stories-swiper .swiper-slide.is-placeholder { pointer-events: none; margin-right: 20px; }
.kok-skel { position: relative; width: 100%; height: 100%; background: #ececec; border-radius: 16px; overflow: hidden; }
.kok-skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); transform: translateX(-100%); animation: kok-shimmer 1.2s infinite; }
.kok-skel-title { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 14px; background: #808080; border-radius: 6px; }
@keyframes kok-shimmer { 100% { transform: translateX(100%); } }

/* Additional skeleton text lines */
.kok-skel-text { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 6px; }
.kok-skel-line { height: 14px; background: #808080; border-radius: 6px; width: 100%; }
.kok-skel-line.short { width: 80%; }
.kok-skel-line.shorter { width: 60%; }

/* Video thumbnails inside carousel cards */
.kok-card video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(0.8); background:#000; }

/* Darker overlay background (50% darker) */
#kok-story-overlay { background: radial-gradient(1000px 600px at 20% 20%, rgba(255,255,255,.025), rgba(0,0,0,1)); }