/* ==========================================================================
   CLIPSSHORT — YOUTUBE / NETFLIX DESIGN LAYER
   Loaded last, so it wins over style.css and night-mode.css.
   Structure: YouTube card metadata  ·  Netflix dark cinema + hover rows
   ========================================================================== */

:root{
  --cs-bg:#0f0f11;
  --cs-bg-soft:#16161a;
  --cs-surface:#1c1c21;
  --cs-surface-2:#232329;
  --cs-line:rgba(255,255,255,.09);
  --cs-line-2:rgba(255,255,255,.16);
  --cs-tx:#f1f1f1;
  --cs-tx-dim:#aaaaaa;
  --cs-tx-mute:#717171;
  --cs-red:#e50914;          /* netflix red */
  --cs-red-2:#ff2b3a;
  --cs-radius:12px;
  --cs-radius-lg:16px;
  --cs-ease:cubic-bezier(.2,.8,.3,1);
}

/* ---------------------------------------------------------------- base ---- */
html,body{
  background:var(--cs-bg) !important;
  color:var(--cs-tx) !important;
  font-family:'Roboto','Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body{background-image:radial-gradient(1200px 600px at 50% -200px,rgba(229,9,20,.08),transparent 70%) !important;background-repeat:no-repeat;}
.pt_body,.pt_cont,.container-home{background:transparent !important;}
a{color:var(--cs-tx);}
a:hover{color:#fff;text-decoration:none;}

/* ------------------------------------------------------------- scrollbar -- */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:99px;border:2px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3);background-clip:content-box;}
.pt_sec_nav_slide::-webkit-scrollbar,.cus_slider::-webkit-scrollbar,.videos::-webkit-scrollbar{height:6px;}

/* ---------------------------------------------------------------- header -- */
.pt_header_nav,.navbar,.navbar-fixed-top,.pt_header{
  background:rgba(15,15,17,.94) !important;
  border-bottom:1px solid var(--cs-line) !important;
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 0 rgba(0,0,0,.5) !important;
}
.navbar-fixed-top{transition:background .3s var(--cs-ease);}
.pt_header_nav a,.navbar a,.navbar-nav>li>a{color:var(--cs-tx) !important;font-weight:600;letter-spacing:.1px;}
.pt_header_nav a:hover,.navbar a:hover{color:#fff !important;}
.navbar .pt_logo img{max-height:34px;width:auto;}
.navbar .dropdown-menu,.pt_header .dropdown-menu{
  background:var(--cs-surface) !important;border:1px solid var(--cs-line) !important;
  border-radius:var(--cs-radius) !important;box-shadow:0 18px 44px rgba(0,0,0,.66) !important;padding:6px;
}
.navbar .dropdown-menu>li>a,.pt_header .dropdown-menu>li>a{
  border-radius:9px;padding:9px 13px;font-size:13.5px;color:var(--cs-tx) !important;
}
.navbar .dropdown-menu>li>a:hover,.pt_header .dropdown-menu>li>a:hover{background:rgba(255,255,255,.08) !important;}
.navbar .form-control,.pt_header_nav .form-control{
  background:rgba(255,255,255,.07) !important;border:1px solid var(--cs-line) !important;
  color:var(--cs-tx) !important;border-radius:99px !important;padding:9px 18px !important;
}
.navbar .form-control:focus,.pt_header_nav .form-control:focus{
  border-color:var(--cs-line-2) !important;box-shadow:0 0 0 3px rgba(229,9,20,.16) !important;background:rgba(255,255,255,.1) !important;
}
.navbar .form-control::placeholder{color:var(--cs-tx-mute);}

/* ------------------------------------------------------- category strip --- */
.pt_sec_nav_cats{
  background:var(--cs-bg) !important;border-bottom:1px solid var(--cs-line) !important;
  position:relative;margin:0;z-index:9;backdrop-filter:blur(12px);
}
.pt_sec_nav_cats a{
  background:rgba(255,255,255,.08) !important;border:1px solid var(--cs-line) !important;color:var(--cs-tx) !important;
  border-radius:99px !important;padding:6px 15px !important;font-size:13px !important;font-weight:600 !important;
  transition:background .2s var(--cs-ease),border-color .2s,transform .2s;white-space:nowrap;display:inline-block;
}
.pt_sec_nav_cats a:hover{background:rgba(255,255,255,.16) !important;border-color:var(--cs-line-2) !important;transform:translateY(-1px);}
.pt_sec_nav_cats a.active{background:#fff !important;color:#0f0f11 !important;border-color:#fff !important;font-weight:700 !important;}

/* --------------------------------------------------- section headings ----- */
.home-page-categories .title h4,.home-page-categories .title h4 *{
  color:var(--cs-tx) !important;font-size:20px !important;font-weight:800 !important;letter-spacing:-.4px !important;
}
.home-page-categories .title{position:relative;padding-left:14px;}
.home-page-categories .title::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:64%;border-radius:99px;background:var(--cs-red);
}
.home-page-categories .title h4>div{
  display:none !important;              /* the old square icon; the red bar replaces it */
}
.view_more_link a{
  font-size:12.5px !important;font-weight:700 !important;color:var(--cs-tx-dim) !important;
  text-transform:uppercase;letter-spacing:.7px;transition:color .2s;
}
.view_more_link a:hover{color:var(--cs-red-2) !important;}
.view_more_link svg{width:15px !important;height:15px !important;vertical-align:-3px;}

/* ------------------------------------------------------------ video cards - */
.video-list,.video-wrapper{
  border-radius:var(--cs-radius-lg);transition:transform .3s var(--cs-ease),box-shadow .3s var(--cs-ease);
  position:relative;
}
.video-list-image,.video-thumb{
  position:relative;border-radius:var(--cs-radius-lg);overflow:hidden;background:var(--cs-surface);
  box-shadow:0 2px 10px rgba(0,0,0,.4);
}
.video-list-image img,.video-thumb img{
  width:100%;display:block;aspect-ratio:16/9;object-fit:cover;
  transition:transform .45s var(--cs-ease),filter .3s;
}
.video-list:hover,.video-wrapper:hover{
  transform:translateY(-5px) scale(1.02);
  box-shadow:0 18px 44px rgba(0,0,0,.62);
  z-index:5;
}
.video-list:hover .video-list-image img,.video-wrapper:hover .video-thumb img{
  transform:scale(1.06);filter:brightness(1.08);
}
.video-list:hover .video-list-image,.video-wrapper:hover .video-thumb{
  box-shadow:0 0 0 1px var(--cs-line-2),0 18px 44px rgba(0,0,0,.62);
}
/* netflix-style centred play on hover */
.play_hover_btn,.video-list-image .play_hover_btn{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.45));
  opacity:0;transition:opacity .26s var(--cs-ease);
}
.video-list:hover .play_hover_btn,.video-wrapper:hover .play_hover_btn{opacity:1;}
.play_hover_btn svg,.play_hover_btn .feather{
  width:26px !important;height:26px !important;padding:17px;border-radius:50%;
  background:rgba(229,9,20,.95);fill:#fff !important;
  box-shadow:0 10px 30px rgba(0,0,0,.6);transform:scale(.82);transition:transform .26s var(--cs-ease);
}
.video-list:hover .play_hover_btn svg,.video-list:hover .play_hover_btn .feather{transform:scale(1);}
/* youtube-style duration pill */
.duration,.video-duration{
  position:absolute;right:8px;bottom:8px;left:auto;top:auto;
  background:rgba(0,0,0,.82) !important;color:#fff !important;font-size:12px !important;font-weight:600 !important;
  padding:2px 6px !important;border-radius:5px !important;height:auto !important;line-height:1.35 !important;
  letter-spacing:.2px;backdrop-filter:blur(4px);
}
.wow_liv_counter{
  position:absolute;left:8px;top:8px;z-index:3;background:var(--cs-red) !important;color:#fff !important;
  border-radius:5px !important;padding:3px 8px !important;font-size:10.5px !important;font-weight:800 !important;
  letter-spacing:.7px;text-transform:uppercase;box-shadow:0 4px 14px rgba(229,9,20,.5);
}
/* youtube-style metadata block */
.video-list-title h4,.video-wrapper .video-title h4{
  font-size:14.5px !important;font-weight:600 !important;color:var(--cs-tx) !important;line-height:1.35 !important;
  margin:11px 0 5px !important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  letter-spacing:-.1px;
}
.video-list-title a:hover h4{color:#fff !important;}
.video-list-by,.video-wrapper .video-views,.video-wrapper .video-publisher{
  font-size:12.5px !important;color:var(--cs-tx-dim) !important;line-height:1.5;
}
.video-list-by a,.video-wrapper .video-publisher a{color:var(--cs-tx-dim) !important;transition:color .2s;}
.video-list-by a:hover,.video-wrapper .video-publisher a:hover{color:#fff !important;}
.video-list-by .bold,.video-wrapper .bold{color:var(--cs-tx-mute) !important;padding:0 3px;}
.pt_vid_fixed_height{height:auto !important;}

/* ---------------------------------------------------------------- panels -- */
.content.pt_shadow,.pt_shadow,.yp_trans{
  background:transparent !important;border:0 !important;box-shadow:none !important;border-radius:0 !important;
}
hr,.dark_hr{border:0 !important;border-top:1px solid var(--cs-line) !important;margin:26px 0 !important;opacity:1;}

/* --------------------------------------------------------------- buttons -- */
.btn{border-radius:99px !important;font-weight:700 !important;letter-spacing:.1px;transition:transform .18s var(--cs-ease),filter .18s,background .2s;}
.btn:active{transform:scale(.98);}
.btn-main,.btn-primary,.btn-red,.btn-info{
  background:var(--cs-red) !important;border-color:var(--cs-red) !important;color:#fff !important;
  box-shadow:0 8px 22px rgba(229,9,20,.34);
}
.btn-main:hover,.btn-primary:hover,.btn-red:hover{background:var(--cs-red-2) !important;border-color:var(--cs-red-2) !important;filter:brightness(1.05);transform:translateY(-1px);}
.btn-default,.btn-secondary,.btn-mat{
  background:rgba(255,255,255,.1) !important;border:1px solid var(--cs-line-2) !important;color:var(--cs-tx) !important;
}
.btn-default:hover,.btn-secondary:hover,.btn-mat:hover{background:rgba(255,255,255,.18) !important;color:#fff !important;}

/* ---------------------------------------------------------------- inputs -- */
.form-control,input[type=text],input[type=email],input[type=password],input[type=search],textarea,select{
  background:rgba(255,255,255,.06) !important;border:1px solid var(--cs-line) !important;color:var(--cs-tx) !important;
  border-radius:10px !important;
}
.form-control:focus,input:focus,textarea:focus,select:focus{
  border-color:var(--cs-line-2) !important;box-shadow:0 0 0 3px rgba(229,9,20,.16) !important;background:rgba(255,255,255,.09) !important;
}
select option{background:var(--cs-surface);color:var(--cs-tx);}
::placeholder{color:var(--cs-tx-mute) !important;}

/* -------------------------------------------------------- sidebar / nav --- */
.pt_side_bar,.sidebar,.pt_left_side{background:var(--cs-bg-soft) !important;border-right:1px solid var(--cs-line) !important;}
.pt_side_bar a,.sidebar a{color:var(--cs-tx-dim) !important;border-radius:10px;transition:background .2s,color .2s;}
.pt_side_bar a:hover,.sidebar a:hover{background:rgba(255,255,255,.08) !important;color:#fff !important;}
.pt_side_bar a.active,.sidebar a.active{background:rgba(229,9,20,.16) !important;color:#fff !important;}

/* ------------------------------------------------------------- carousels -- */
/* These rows are Slick carousels — Slick computes its own widths and absolute
   positions, so the container's display must NOT be changed. We only dress the
   slides and the arrow buttons; touching .cus_slider's layout breaks the track. */
.cus_slider .slick-slide{padding:0 7px;}
.cus_slider .slick-slide>div{height:100%;}
.cus_slider .slick-track{display:flex !important;align-items:stretch;}
.cus_slider .slick-slide{height:auto;}
.slick-list{padding:6px 0 14px !important;}

.slick-arrow,.swiper-button-next,.swiper-button-prev{
  background:rgba(20,20,24,.86) !important;border:1px solid var(--cs-line-2) !important;border-radius:50% !important;
  width:38px !important;height:38px !important;z-index:8;transition:background .2s var(--cs-ease),transform .2s,border-color .2s;
  box-shadow:0 8px 22px rgba(0,0,0,.5);
}
.slick-arrow:hover,.swiper-button-next:hover,.swiper-button-prev:hover{
  background:var(--cs-red) !important;border-color:var(--cs-red) !important;transform:scale(1.08);
}
.slick-arrow:before,.swiper-button-next::after,.swiper-button-prev::after{
  font-size:14px !important;color:#fff !important;font-weight:800;opacity:1;
}
.slick-prev{left:-6px;} .slick-next{right:-6px;}
@media(max-width:768px){ .slick-prev{left:0;} .slick-next{right:0;} }

/* ---------------------------------------------------------------- footer -- */
.pt_footer,footer{background:var(--cs-bg-soft) !important;border-top:1px solid var(--cs-line) !important;color:var(--cs-tx-dim) !important;}
.pt_footer a,footer a{color:var(--cs-tx-dim) !important;}
.pt_footer a:hover,footer a:hover{color:#fff !important;}

/* -------------------------------------------------------------- modals ---- */
.modal-content{
  background:var(--cs-surface) !important;border:1px solid var(--cs-line) !important;
  border-radius:var(--cs-radius-lg) !important;box-shadow:0 26px 70px rgba(0,0,0,.72) !important;color:var(--cs-tx) !important;
}
.modal-header,.modal-footer{border-color:var(--cs-line) !important;}
.modal-title{color:var(--cs-tx) !important;font-weight:700;}

/* ------------------------------------------------------------- homepage --- */
.pt_feat_vid{position:relative;}
.pt_feat_vid::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,15,17,.15) 0%,rgba(15,15,17,.55) 55%,var(--cs-bg) 100%);
}
.pt_feat_vid_content{position:relative;z-index:3;}
.pt_feat_vid_details h1,.pt_feat_vid_details h1 a{
  font-size:38px !important;font-weight:900 !important;letter-spacing:-1.1px !important;color:#fff !important;line-height:1.12 !important;
  text-shadow:0 4px 26px rgba(0,0,0,.7);
}
.pt_feat_vid_details p{color:rgba(255,255,255,.82) !important;font-size:13.5px;font-weight:600;letter-spacing:.2px;}
.pt_feat_vid_details .btn-main{padding:13px 30px !important;font-size:15px !important;border-radius:99px !important;}

/* ------------------------------------------------------------ responsive -- */
@media(max-width:768px){
  .pt_sec_nav_cats{top:52px;}
  .pt_feat_vid_details h1,.pt_feat_vid_details h1 a{font-size:24px !important;letter-spacing:-.6px !important;}
  .home-page-categories .title h4{font-size:17px !important;}
  .video-list-title h4{font-size:13.5px !important;}
}
/* keep the custom explore hub crisp against the new base */
.cs-explore,.cs-x-divider{position:relative;z-index:4;}


/* ==========================================================================
   MOBILE APP EXPERIENCE  (phones / small tablets)
   Goal: feel like a native app — fixed tab bar, app bar, snap rows,
   big touch targets, safe-area aware, no desktop chrome.
   ========================================================================== */

/* the tab bar exists on every page but is hidden on desktop */
.cs-tabbar{display:none;}

@media (max-width:820px){

  :root{ --cs-tabbar-h:60px; }

  /* ---------- app shell ---------- */
  html{-webkit-text-size-adjust:100%;}
  body{
    padding-bottom:calc(var(--cs-tabbar-h) + env(safe-area-inset-bottom,0px) + 10px) !important;
    overscroll-behavior-y:none;
  }
  *{-webkit-tap-highlight-color:transparent;}
  html,.cs-scroll,.slick-list{-webkit-overflow-scrolling:touch;}
  /* stop iOS zooming when a field is focused */
  input,select,textarea,.form-control{font-size:16px !important;}

  /* ---------- 1. bottom tab bar ---------- */
  .cs-tabbar{
    display:flex !important;position:fixed;left:0;right:0;bottom:0;z-index:9998;
    height:calc(var(--cs-tabbar-h) + env(safe-area-inset-bottom,0px));
    padding-bottom:env(safe-area-inset-bottom,0px);
    background:rgba(13,13,15,.94) !important;
    backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
    border-top:1px solid rgba(255,255,255,.1);
    box-shadow:0 -8px 30px rgba(0,0,0,.55);
    transition:transform .28s cubic-bezier(.2,.8,.3,1);
  }
  .cs-tabbar.kb{transform:translateY(110%);}          /* hide while typing */
  .cs-tab{
    flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    background:none;border:0;padding:8px 2px 6px;margin:0;color:#8b8b93 !important;text-decoration:none !important;
    font-family:inherit;position:relative;transition:color .2s;cursor:pointer;
  }
  .cs-tab svg{width:22px;height:22px;fill:currentColor;transition:transform .22s cubic-bezier(.2,.8,.3,1);}
  .cs-tab span{font-size:9.3px;font-weight:700;letter-spacing:.1px;line-height:1;white-space:nowrap;}
  /* six tabs now (Movies added) — square up the spacing so nothing crowds */
  .cs-tab{padding:7px 1px 5px !important;gap:3px !important;}
  .cs-tab.on{color:#fff !important;}
  .cs-tab.on svg{transform:translateY(-1px) scale(1.06);}
  .cs-tab.on::before{
    content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:26px;height:3px;border-radius:0 0 4px 4px;background:var(--cs-red);
  }
  .cs-tab:active svg{transform:scale(.9);}

  /* ---------- 2. compact app bar ---------- */
  .navbar,.pt_header_nav,.pt_header{
    height:56px !important;min-height:56px !important;
    padding-top:env(safe-area-inset-top,0px) !important;
    background:rgba(13,13,15,.96) !important;
  }
  .navbar-fixed-top,.pt_header_nav{position:fixed !important;top:0 !important;left:0;right:0;}
  body{padding-top:calc(56px + env(safe-area-inset-top,0px)) !important;}
  .navbar .pt_logo img, .pt_logo img{max-height:26px !important;}
  /* search collapses to an icon-sized pill so it fits */
  .pt_header_nav .form-control,.navbar .form-control{
    height:38px !important;padding:8px 14px !important;border-radius:99px !important;
  }

  /* ---------- 3. category strip: edge-to-edge pills ---------- */
  /* The stock rule is position:relative with margin:-20px -15px 0. Making it
     sticky leaves its flow space up where the natural position was while it
     paints lower, so the next block (the Explore hub) starts underneath it and
     its title gets hidden. Keep it in normal flow instead. */
  .pt_sec_nav_cats{
    position:relative !important;top:auto !important;
    margin:0 !important;
    background:rgba(13,13,15,.96) !important;padding:8px 0 !important;
    z-index:12 !important;backdrop-filter:blur(14px);
  }
  .pt_sec_nav_cats .swiper{padding:0 12px !important;}
  .pt_sec_nav_cats a{padding:7px 14px !important;font-size:13px !important;min-height:34px;display:inline-flex;align-items:center;}

  /* ---------- 4. section headers ---------- */
  .home-page-categories .title h4,.home-page-categories .title h4 *{font-size:17px !important;}
  .home-page-categories .title{padding-left:12px;margin-bottom:2px;}
  .view_more_link a{font-size:11px !important;}

  /* ---------- 5. EXPLORE HUB → 2-up app tiles ---------- */
  .cs-explore{padding:16px 12px 2px !important;margin-top:0 !important;}
  /* stack the title over the subtitle — side-by-side squeezed both on phones */
  .cs-x-head{display:block !important;margin-bottom:12px !important;}
  .cs-x-head h2{font-size:18px !important;margin:0 0 5px !important;line-height:1.25;}
  .cs-x-head p{font-size:11.5px !important;min-width:0 !important;margin:0 !important;line-height:1.45;}
  .cs-x-grid{grid-template-columns:1fr 1fr !important;gap:9px !important;}
  /* compact "smart" tile: icon left, name + count stacked beside it */
  .cs-x-tile{
    /* fixed height so every tile is identical — content is 38px + 20px padding,
       so 70px leaves a little breathing room without wasting vertical space */
    height:70px !important;min-height:70px !important;max-height:70px !important;
    padding:10px 12px !important;border-radius:14px !important;
    display:grid !important;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;
    align-content:center;align-items:center;column-gap:9px;row-gap:1px;overflow:hidden;
  }
  /* the LIVE badge joins the grid next to the title instead of floating over it,
     so it can never crowd the name onto a second line */
  .cs-x-tile .pulse{
    position:static !important;grid-row:1 !important;grid-column:3 !important;
    justify-self:end;align-self:center;
    padding:2px 7px !important;font-size:7px !important;letter-spacing:.6px !important;gap:3px !important;
  }
  .cs-x-tile .pulse i{width:4px !important;height:4px !important;}
  .cs-x-tile .ic{
    grid-row:1/3 !important;grid-column:1 !important;width:34px !important;height:34px !important;
    border-radius:10px !important;margin:0 !important;align-self:center;
  }
  .cs-x-tile .ic svg{width:17px !important;height:17px !important;}
  .cs-x-tile h3{grid-row:1 !important;grid-column:2 !important;font-size:13.5px !important;margin:0 !important;line-height:1.2;white-space:nowrap;}
  .cs-x-tile .n{grid-row:2 !important;grid-column:2/4 !important;margin:0 !important;gap:4px !important;}
  .cs-x-tile .n b{font-size:15px !important;letter-spacing:-.3px !important;}
  .cs-x-tile .n span{font-size:8.5px !important;letter-spacing:.5px !important;}
  .cs-x-tile .sub{display:none !important;}
  .cs-x-tile .go{display:none !important;}

  .cs-x-divider{padding:0 12px !important;margin-top:18px !important;}

  /* ---------- 6. video rows → snap carousels with edge peek ---------- */
  .slick-list{overflow:visible !important;clip-path:inset(0 -100vw 0 0);}
  .cus_slider .slick-slide{padding:0 5px !important;}
  .video-list-title h4,.video-wrapper .video-title h4{font-size:13px !important;margin:9px 0 3px !important;-webkit-line-clamp:2;}
  .video-list-by,.video-wrapper .video-views,.video-wrapper .video-publisher{font-size:11px !important;}
  .duration,.video-duration{font-size:11px !important;padding:2px 5px !important;}
  .play_hover_btn{display:none !important;}            /* no hover on touch */
  .video-list:hover,.video-wrapper:hover{transform:none !important;box-shadow:none !important;}
  .video-list-image,.video-thumb{border-radius:12px !important;}

  /* ---------- 7. featured hero → app card ---------- */
  .pt_feat_vid{min-height:auto !important;}
  .pt_feat_vid_details h1,.pt_feat_vid_details h1 a{font-size:21px !important;letter-spacing:-.5px !important;}
  .pt_feat_vid_details p{font-size:11.5px !important;}
  .pt_feat_vid_details .btn-main{padding:11px 24px !important;font-size:14px !important;min-height:44px;}

  /* ---------- 8. touch targets ---------- */
  .btn{min-height:42px;display:inline-flex;align-items:center;justify-content:center;}
  .btn-sm{min-height:36px;}
  .swiper-button-next,.swiper-button-prev,.slick-arrow{width:34px !important;height:34px !important;}
  .slick-prev{left:2px !important;} .slick-next{right:2px !important;}

  /* ---------- 9. strip desktop-only chrome ---------- */
  /* NOTE: do NOT resize .yp_side_drawer — the theme parks it off-screen at a
     fixed left:-300px, so widening it makes a sliver peek into view. */
  .hide-from-mobile{display:none !important;}
  /* ...but Movies is a real destination — keep it reachable in the drawer too
     (an id beats the .hide-from-mobile class even at equal !important) */
  #movies_menu_{display:block !important;}
  /* Shorts is a real destination too — same treatment */
  #shorts_menu_{display:block !important;}
  .container-home{padding:0 !important;}
  .pt_home_top_m{margin-top:0 !important;}

  /* ---------- 10. keep overlays above the tab bar ---------- */
  .cs-tabbar ~ *,body>.cookie,.cookiealert,.cookie-alert,#cookieNotice,.pt_cookie,.cc-window,.cc-banner,#cc--main{
    bottom:calc(var(--cs-tabbar-h) + env(safe-area-inset-bottom,0px)) !important;
  }
  .sweet-alert,.swal2-container,.modal{padding-bottom:calc(var(--cs-tabbar-h) + env(safe-area-inset-bottom,0px));}
  /* the theme's own bottom mini-players must clear the bar too */
  .gmx-mini,.ltvx-mini,.rdx-mini,#gmxMini,#ltvxMini{
    bottom:calc(var(--cs-tabbar-h) + env(safe-area-inset-bottom,0px) + 8px) !important;
  }

  /* ---------- 11. CARD POLISH: explore tiles ---------- */
  .cs-x-tile{
    /* layered finish: crisp 1px edge + inset gloss + soft drop shadow */
    border:1px solid rgba(255,255,255,.17) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 8px 22px rgba(0,0,0,.42) !important;
    transition:transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .2s !important;
    -webkit-user-select:none;user-select:none;
  }
  .cs-x-tile:active{
    transform:scale(.972) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 3px 10px rgba(0,0,0,.4) !important;
  }
  .cs-x-tile::after{                        /* permanent soft top sheen */
    content:"";position:absolute;left:0;right:0;top:0;height:46%;
    background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,0));
    pointer-events:none;opacity:1 !important;
  }
  .cs-x-tile .ic{box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 3px 9px rgba(0,0,0,.28) !important;}
  .cs-x-tile h3{letter-spacing:-.15px !important;text-shadow:0 1px 2px rgba(0,0,0,.22);}
  .cs-x-tile .n b{text-shadow:0 1px 2px rgba(0,0,0,.22);}
  .cs-x-tile .n span{opacity:.82;}
  .cs-x-tile .pulse{
    background:rgba(0,0,0,.42) !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.22) !important;
  }

  /* ---------- 12. CARD POLISH: video cards ---------- */
  .video-list,.video-wrapper{
    transition:transform .16s cubic-bezier(.2,.8,.3,1) !important;
    -webkit-user-select:none;user-select:none;
  }
  .video-list:active,.video-wrapper:active{transform:scale(.982) !important;}
  .video-list-image,.video-thumb{
    border-radius:12px !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 4px 14px rgba(0,0,0,.34) !important;
  }
  .video-list-image img,.video-thumb img{border-radius:12px !important;}
  /* the visible corner belongs to the inner <a>, not the wrapper */
  .video-list-image a,.video-thumb a{border-radius:12px !important;}
  .video-list-image .play_hover_btn,.video-thumb .play_hover_btn{border-radius:12px !important;}
  .video-list-title h4,.video-wrapper .video-title h4{
    font-size:12.5px !important;line-height:1.32 !important;letter-spacing:-.05px !important;
    margin:7px 0 2px !important;
  }
  .video-list-by,.video-wrapper .video-views,.video-wrapper .video-publisher{
    font-size:11px !important;letter-spacing:.05px;color:#9d9d9d !important;line-height:1.45;
  }
  .video-list-by span{display:inline;}
  .duration,.video-duration{
    bottom:6px !important;right:6px !important;
    border-radius:5px !important;font-weight:700 !important;letter-spacing:.2px;
    box-shadow:0 1px 4px rgba(0,0,0,.45);
  }
  .wow_liv_counter{box-shadow:0 2px 8px rgba(229,9,20,.55) !important;}
  .cus_slider .slick-slide{padding:0 5px 2px !important;}
  .videos{margin-bottom:-4px;}
}

/* ---------- very small phones: tighten further ---------- */
@media (max-width:380px){
  .cs-x-grid{gap:7px !important;}
  .cs-x-tile{height:64px !important;min-height:64px !important;max-height:64px !important;padding:9px 10px !important;}
  .cs-x-tile .ic{width:30px !important;height:30px !important;}
  .cs-x-tile .ic svg{width:15px !important;height:15px !important;}
  .cs-x-tile h3{font-size:12.5px !important;}
  .cs-x-tile .n b{font-size:14px !important;}
  .cs-x-tile .n span{font-size:8px !important;}
  .cs-tab span{font-size:9px;}
  .cs-tab svg{width:21px;height:21px;}
  .home-page-categories .title h4{font-size:16px !important;}
}

/* ---------- landscape phones: keep the bar slim ---------- */
@media (max-height:480px) and (orientation:landscape) and (max-width:900px){
  .cs-tabbar{height:calc(50px + env(safe-area-inset-bottom,0px));}
  :root{--cs-tabbar-h:50px;}
  .cs-tab span{display:none;}
  .cs-tab svg{width:21px;height:21px;}
}

/* ---------- tablets: 4-up tiles, roomier ---------- */
@media (min-width:821px) and (max-width:1100px){
  .cs-x-grid{grid-template-columns:repeat(2,1fr);}
}


/* ============================================================================
   NETFLIX-STYLE HOMEPAGE  (clipsshort.com)  — design layer
   Billboard hero + flat rows on near-black, 16:9 cards, Netflix red accent.
   ============================================================================ */

:root{
  --nf-bg:#141414;
  --nf-bg-2:#0b0b0b;
  --nf-red:#e50914;
  --nf-ink:#e5e5e5;
  --nf-dim:#808080;
  --nf-radius:4px;
  --nf-pad:4%;
}

/* ---------- 1. the canvas: near-black everywhere ---------- */
html,body{background:var(--nf-bg) !important;color:var(--nf-ink) !important;}
body,#main-container,.main-content,.yp_side_menu,.container-home{background:var(--nf-bg) !important;}
.pt_header_nav,header.navbar{background:rgba(20,20,20,.92) !important;backdrop-filter:blur(10px);
  border-bottom:none !important;box-shadow:none !important;}
#container_content{background:var(--nf-bg) !important;}

/* ---------- 2. rows lose their card chrome (Netflix rows sit on the canvas) ---------- */
.content.pt_shadow.yp_trans,
.content.pt_shadow,
.yp_trans.pt_shadow{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  margin:0 0 3.2vw !important;
  overflow:visible !important;
}
/* the theme pulls the homepage rows up with a negative top margin to overlay
   the old 720px-tall hero. Our hero is short now, so neutralise the pull. */
.video-player-page.pt_home_top_m{margin-top:0 !important;padding:0 !important;background:transparent !important;}
.pt_home_top_m, .pt_feat_vid + *{margin-top:0 !important;}

/* ---------- 3. row headings: big, bold, quiet ---------- */
.home-page-categories{
  /* no side padding: this wrapper contains the carousel, and the HOMEPAGE WIDTH
     block above owns the gutter. Padding here narrowed every row. */
  padding:0 !important;
  margin:0 0 12px !important;
  background:transparent !important;
  border:0 !important;
}
.home-page-categories .title{padding:0 !important;margin:0 !important;border:0 !important;}
.home-page-categories .title h4{
  display:flex;align-items:center;gap:0;
  font-size:21px !important;
  font-weight:700 !important;
  color:var(--nf-ink) !important;
  letter-spacing:-.2px;
  line-height:1.2;
  margin:0 !important;
}
/* the coloured icon chips aren't Netflix — drop them */
.home-page-categories .title h4 > div{display:none !important;}
/* "Explore more" → quiet grey link that wakes up on hover */
.home-page-categories .title h4 .view_more_link{margin-left:auto;padding-left:14px;}
.home-page-categories .title h4 .view_more_link a{
  display:inline-flex;align-items:center;gap:3px;
  font-size:12.5px !important;font-weight:500 !important;
  color:var(--nf-dim) !important;text-transform:none !important;letter-spacing:0 !important;
  opacity:0;transition:opacity .2s,color .2s,transform .2s;
}
.home-page-categories:hover .title h4 .view_more_link a{opacity:1;}
.home-page-categories .title h4 .view_more_link a:hover{color:#fff !important;transform:translateX(2px);}
.home-page-categories .title h4 .view_more_link svg{width:13px;height:13px;}
/* on touch there is no hover — keep the link visible */
@media (hover:none){.home-page-categories .title h4 .view_more_link a{opacity:1;}}

/* the theme's red accent bar was butting the heading text — space it cleanly */
.home-page-categories .title{position:relative !important;padding-left:14px !important;}
.home-page-categories .title::before{
  left:0 !important;top:50% !important;transform:translateY(-50%);
  width:4px !important;height:17px !important;
  background:var(--nf-red) !important;
  border-radius:2px;
}
/* the hero label is small caps — give it a slimmer bar */
.pt_feat_vid .home-page-categories .title{padding-left:12px !important;}
.pt_feat_vid .home-page-categories .title::before{height:12px !important;width:3px !important;}
/* "Explore more" reads better always-on than hover-only */
.home-page-categories .title h4 .view_more_link a{opacity:1;color:#9a9a9a !important;}

/* ---------- 4. HERO → Netflix billboard ---------- */
/* the theme floats a publisher/subscribe card over the billboard — not Netflix */
.pt_feat_vid_content .col-lg-offset-5,
.pt_feat_vid_content .publisher-element{display:none !important;}

.pt_feat_vid{
  position:relative !important;
  margin:0 0 2.4vw !important;
  padding:0 !important;
  background:transparent !important;
  overflow:hidden !important;
  height:64vh;
  min-height:380px;
  max-height:64vh;
}
.pt_feat_vid_innr{position:absolute !important;inset:0;height:100% !important;width:100% !important;}
.pt_feat_vid_innr img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  object-position:center 22%;
}
/* the signature fade into the page */
.pt_feat_vid::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:58%;
  background:linear-gradient(180deg,
      rgba(20,20,20,0) 0%,
      rgba(20,20,20,.28) 42%,
      rgba(20,20,20,.72) 72%,
      #141414 100%);
  pointer-events:none;z-index:2;
}
/* a little darkening from the left so white type always reads */
.pt_feat_vid::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.28) 42%,rgba(0,0,0,0) 68%);
}
.pt_feat_vid_content{
  position:absolute !important;left:0;right:0;bottom:9% !important;top:auto !important;
  height:auto !important;
  z-index:3;
  padding:0 var(--nf-pad);
}
.pt_feat_vid .container-home{background:transparent !important;padding:0 !important;margin:0 !important;}
.pt_feat_vid .col-lg-4{width:100% !important;max-width:600px;float:none !important;padding:0 !important;}
/* "Featured video" chip → small uppercase label */
.pt_feat_vid .home-page-categories{padding:0 !important;margin:0 0 10px !important;}
.pt_feat_vid .home-page-categories .title h4{
  font-size:11.5px !important;font-weight:600 !important;
  letter-spacing:.22em;text-transform:uppercase;color:#d9d9d9 !important;
}
.pt_feat_vid_details{padding:0 !important;background:transparent !important;border:0 !important;}
.pt_feat_vid_details h1{margin:0 0 12px !important;line-height:1.06 !important;}
.pt_feat_vid_details h1 a{
  font-size:clamp(26px,2.85vw,44px) !important;
  font-weight:800 !important;
  color:#fff !important;
  letter-spacing:-.8px;
  text-shadow:0 2px 16px rgba(0,0,0,.72);
  display:block;
}
.pt_feat_vid_details p{
  margin:0 0 18px !important;
  font-size:14.5px !important;
  color:#cfcfcf !important;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
}
.pt_feat_vid_details p .bold{opacity:.5;padding:0 7px;}
/* buttons: white Play, translucent secondary */
.pt_feat_vid_details .btn-main,
.pt_feat_vid_details a.btn{
  background:#fff !important;color:#000 !important;
  border:0 !important;border-radius:var(--nf-radius) !important;
  font-weight:700 !important;font-size:15px !important;
  padding:11px 27px !important;
  display:inline-flex;align-items:center;gap:9px;
  box-shadow:none !important;
  transition:background .18s,transform .18s;
}
.pt_feat_vid_details .btn-main:hover{background:rgba(255,255,255,.78) !important;transform:scale(1.03);}
.pt_feat_vid_details .btn-main svg{width:19px;height:19px;fill:#000;}

/* ---------- 5. cards: 16:9, 4px radius, no chrome ---------- */
/* beat the theme's high-specificity clamp (max-height:3rem = 30px) so 2 full
   title lines always show instead of being sliced through the middle */
.home-page-categories .videos .video-list .video-list-title h4,
.home-page-categories .videos .video-wrapper .video-title h4,
.cus_slider .video-list .video-list-title h4,
.cus_slider .video-wrapper .video-title h4,
.cus_story_slider .video-list .video-list-title h4{
  height:auto !important;
  max-height:none !important;
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  overflow:hidden !important;
  color:var(--nf-ink) !important;
  font-weight:600 !important;
  line-height:1.35 !important;
}

.video-list-title h4,.video-wrapper .video-title h4{
  display:-webkit-box !important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden !important;
  height:auto !important;
  max-height:2.95em;
}
.video-list,.video-wrapper{background:transparent !important;border:0 !important;box-shadow:none !important;}
.video-list-image,.video-thumb{
  border-radius:var(--nf-radius) !important;
  overflow:hidden;
  box-shadow:none !important;
  transition:transform .22s ease, box-shadow .22s ease;
}
.video-list-image img,.video-thumb img{
  border-radius:var(--nf-radius) !important;
  filter:saturate(1.02);
  transition:transform .35s ease;
}
.video-list-image a,.video-thumb a{border-radius:var(--nf-radius) !important;}
/* the theme prints a shadow under the thumb — Netflix has none */
.video-list-image::after{display:none !important;}
/* hover: lift + deepen, like the Netflix tile */
@media (hover:hover){
  .video-list:hover .video-list-image,
  .video-wrapper:hover .video-thumb{transform:scale(1.045);box-shadow:0 10px 30px rgba(0,0,0,.6) !important;}
  .video-list:hover .video-list-image img{transform:scale(1.03);}
}
.video-list-title h4,.video-wrapper .video-title h4{
  color:var(--nf-ink) !important;
  font-weight:600 !important;
  letter-spacing:-.1px;
  margin:9px 0 3px !important;
}
.video-list-by,.video-wrapper .video-views,.video-wrapper .video-publisher{
  color:var(--nf-dim) !important;
  font-weight:400 !important;
}
/* duration badge → Netflix's quiet pill */
.duration,.video-duration{
  background:rgba(0,0,0,.75) !important;
  color:#fff !important;
  border-radius:3px !important;
  font-weight:600 !important;
  letter-spacing:.02em;
  box-shadow:none !important;
  backdrop-filter:blur(2px);
}

/* ---------- 6. the category pill strip → Netflix's genre chips ---------- */
.pt_sec_nav_cats{
  background:linear-gradient(180deg,#141414 0%,rgba(20,20,20,.86) 70%,rgba(20,20,20,0) 100%) !important;
  border-bottom:0 !important;
  padding:9px 0 15px !important;
}
.pt_sec_nav_cats .swiper-slide a{
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  color:#e5e5e5 !important;
  border-radius:999px !important;
  font-weight:500 !important;
  font-size:13px !important;
  transition:background .18s,color .18s,border-color .18s;
}
.pt_sec_nav_cats .swiper-slide a:hover{background:rgba(255,255,255,.16) !important;color:#fff !important;}
.pt_sec_nav_cats .swiper-slide a.active{
  background:#fff !important;color:#000 !important;border-color:#fff !important;font-weight:600 !important;
}

/* ---------- 7. story slider (Shorts) keeps its own look ---------- */
.cus_story_slider .video-list-image a{border-radius:8px !important;}

/* ---------- 8. phones: tighten to Netflix mobile ---------- */
@media (max-width:820px){
  .pt_feat_vid{height:58vh;min-height:300px;max-height:none;}
  .pt_feat_vid_innr img{aspect-ratio:auto;object-position:center 34%;}
  .pt_feat_vid::after{height:64%;}
  .pt_feat_vid::before{background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.42) 100%);}
  .pt_feat_vid_content{bottom:7% !important;padding:0 5%;}
  .pt_feat_vid_details h1 a{font-size:23px !important;letter-spacing:-.4px;}
  .pt_feat_vid_details h1{margin:0 0 8px !important;}
  .pt_feat_vid_details p{font-size:12.5px !important;margin:0 0 13px !important;}
  .pt_feat_vid_details .btn-main{padding:9px 20px !important;font-size:13.5px !important;}
  .home-page-categories{padding:0 5% !important;margin-bottom:9px !important;}
  .home-page-categories .title h4{font-size:17px !important;}
  .content.pt_shadow.yp_trans{margin-bottom:22px !important;}
  .video-list-title h4,.video-wrapper .video-title h4{font-size:12.5px !important;line-height:1.32 !important;}
}

/* ============================================================================
   HOMEPAGE WIDTH — use the whole display.
   Sections 1..n sit in their own wrappers (.hide_trend / .last_hr / plain), so
   these rules must NOT be scoped to one of them or only the first row widens.
   ============================================================================ */
#main-container.container,
#main-container.container-full {
  padding-left:0 !important; padding-right:0 !important;
  width:auto !important; max-width:none !important;
}
.container-home { padding:0 !important; max-width:none !important; width:auto !important; }
.hide_trend     { padding:0 !important; margin:0 !important; }
.video-player-page.pt_home_top_m { padding:0 !important; }

/* every row gets the same 18px gutter, then the carousel offsets the slide padding */
.content.pt_shadow.yp_trans {
  padding-left:14px !important; padding-right:14px !important;
  margin:0 0 30px !important;
}
.content.pt_shadow.yp_trans .videos { padding:0 !important; margin:0 !important; }
/* NO negative margins here: they pulled the row under the 80px sidebar rail and
   created a horizontal scrollbar. The slides carry the 7px gutter themselves. */
.content.pt_shadow.yp_trans .videos > .row,
.content.pt_shadow.yp_trans .row.cus_slider,
.content.pt_shadow.yp_trans .row.cus_story_slider {
  width:auto !important; max-width:none !important;
  margin-left:0 !important; margin-right:0 !important;
  padding-left:0 !important; padding-right:0 !important;
}
/* category strip + page headings line up with the widened rows */
.hide_trend .home-page-categories,
.content.pt_shadow.yp_trans .home-page-categories { padding:0 !important; }
.pt_sec_nav_cats .container-fluid { padding-left:18px !important; padding-right:18px !important; }
.pt_sec_nav_cats .container-fluid,
.pt_sec_nav_cats .swiper { max-width:none !important; }

/* ---- phones: the width fix above sets padding:0 with 4-class specificity, which
        also killed the theme's 5% mobile gutter -> rows ran edge-to-edge and the
        end cards were sliced by the screen. Restore a gutter at the same weight. ---- */
@media (max-width:820px){
  .content.pt_shadow.yp_trans {
    padding-left:13px !important; padding-right:13px !important;
    margin-bottom:16px !important;
  }
  .content.pt_shadow.yp_trans .home-page-categories { margin-bottom:8px !important; }
  /* .videos kept ~32px of slack under the cards, which stacked into big gaps */
  .content.pt_shadow.yp_trans .videos > .row,
  .content.pt_shadow.yp_trans .row.cus_slider,
  .content.pt_shadow.yp_trans .row.cus_story_slider { padding-bottom:0 !important; margin-bottom:0 !important; }
  .content.pt_shadow.yp_trans .slick-list { padding-bottom:0 !important; }
}

/* the Slick arrows are absolutely positioned and were sitting OUTSIDE the row,
   which pushed the page 10px wide (horizontal scrollbar) once rows went full width */
.content.pt_shadow.yp_trans .slick-arrow { z-index:4 !important; }
.content.pt_shadow.yp_trans .slick-next { right:10px !important; }
.content.pt_shadow.yp_trans .slick-prev { left:10px !important; }
/* NOTE: no `overflow-x:hidden` on html/body. It was a blanket guard, but on iOS
   Safari it turns the root into a scroll container, which breaks position:fixed
   (the tab bar, the drawer) and eats touch handling. The Slick-arrow fix above
   removes the actual overflow, so the guard is not needed. */
html { overflow-x:visible; }

/* wider rows carry a slightly bigger title + meta so the cards do not look empty */
@media (min-width:1100px){
  .content.pt_shadow.yp_trans .video-list-title h4,
  .content.pt_shadow.yp_trans .video-wrapper .video-title h4 { font-size:15px !important; }
  .content.pt_shadow.yp_trans .video-list-by,
  .content.pt_shadow.yp_trans .video-wrapper .video-views { font-size:12px !important; }
}