/* =========================================================
   LCARS NETFLIX / MOVIE CORE V1
========================================================= */

#mediaStatusPanel.nf-panel{
  position:fixed !important;
  inset:0 !important;
  z-index:5000 !important;

  display:block;

  padding:0 !important;
  margin:0 !important;

  overflow-y:auto !important;
  overflow-x:hidden !important;

  background:#080808 !important;
  color:#fff;

  font-family:
    Arial,
    Helvetica,
    sans-serif;
}

#mediaStatusPanel.nf-panel.hidden{
  display:none !important;
}

.nf-topbar{
  position:sticky;
  top:0;
  z-index:60;

  height:72px;

  display:flex;
  align-items:center;

  gap:28px;

  padding:0 42px;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.98),
      rgba(0,0,0,.86)
    );

  border-bottom:
    1px solid rgba(255,255,255,.08);
}

.nf-logo{
  color:#e50914;

  font-size:31px;
  font-weight:1000;
  letter-spacing:-2px;

  white-space:nowrap;
}

.nf-nav{
  display:flex;
  align-items:center;
  gap:24px;

  flex:1;
}

.nf-nav span{
  color:#ddd;

  font-size:14px;
  font-weight:700;

  cursor:default;
}

.nf-search{
  position:relative;

  width:min(350px,30vw);
}

.nf-search input{
  width:100%;

  box-sizing:border-box;

  border:
    1px solid rgba(255,255,255,.35);

  border-radius:4px;

  outline:none;

  background:
    rgba(0,0,0,.72);

  color:white;

  padding:
    11px 14px;

  font-size:14px;
}

.nf-search input:focus{
  border-color:#fff;
}

#closeMediaStatusButton{
  flex:none;

  border:0 !important;
  border-radius:5px !important;

  padding:
    11px 18px !important;

  background:#292929 !important;
  color:white !important;

  font-weight:800 !important;

  cursor:pointer;
}


/* HERO */

.nf-hero{
  position:relative;

  min-height:570px;

  display:flex;
  align-items:flex-end;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 76% 35%,
      #282828,
      #080808 62%
    );
}

.nf-hero-bg{
  position:absolute;
  inset:0;

  background-position:
    75% 32%;

  background-repeat:no-repeat;
  background-size:cover;

  opacity:.60;

  filter:
    saturate(.9)
    contrast(1.08);

  transform:scale(1.02);
}

.nf-hero-shade{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      90deg,
      #080808 0%,
      rgba(8,8,8,.94) 26%,
      rgba(8,8,8,.42) 59%,
      rgba(8,8,8,.16) 100%
    ),
    linear-gradient(
      0deg,
      #080808 0%,
      transparent 44%
    );
}

.nf-hero-content{
  position:relative;
  z-index:4;

  width:min(720px,62vw);

  padding:
    75px 0 72px 54px;
}

.nf-hero-label{
  color:#e50914;

  font-size:13px;
  font-weight:1000;

  letter-spacing:3px;

  margin-bottom:12px;
}

.nf-hero h1{
  margin:0;

  font-size:
    clamp(40px,5vw,74px);

  line-height:.98;

  letter-spacing:-2px;

  text-shadow:
    0 3px 20px #000;
}

.nf-hero-meta{
  display:flex;
  gap:14px;

  margin-top:20px;

  color:#d6d6d6;

  font-weight:700;
}

.nf-hero-text{
  margin-top:18px;

  max-width:650px;

  color:#ddd;

  font-size:17px;
  line-height:1.5;

  text-shadow:
    0 2px 8px #000;
}

.nf-actions{
  display:flex;
  gap:12px;

  margin-top:25px;
}

.nf-button{
  border:0;

  border-radius:5px;

  padding:
    13px 25px;

  cursor:pointer;

  font-size:16px;
  font-weight:900;
}

.nf-button-play{
  background:white;
  color:black;
}

.nf-button-info{
  background:
    rgba(109,109,110,.75);

  color:white;
}


/* CONTENT */

.nf-content{
  position:relative;
  z-index:10;

  padding:
    0 0 80px;

  margin-top:-28px;
}

.nf-section{
  margin-bottom:34px;
}

.nf-section-title{
  display:flex;
  align-items:end;
  justify-content:space-between;

  padding:
    0 54px 14px;
}

.nf-section-title h2{
  margin:0;

  font-size:23px;
}

.nf-section-title span{
  color:#8d8d8d;

  font-size:13px;
}

.nf-row{
  display:grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(175px,1fr)
    );

  gap:12px;

  padding:
    0 54px;
}

.nf-card{
  position:relative;

  min-width:0;

  cursor:pointer;

  transition:
    transform .18s ease,
    z-index .18s ease;
}

.nf-card:hover{
  transform:scale(1.055);
  z-index:20;
}

.nf-card-poster{
  position:relative;

  width:100%;
  aspect-ratio:2/3;

  overflow:hidden;

  border-radius:5px;

  background:
    linear-gradient(
      145deg,
      #262626,
      #111
    );

  box-shadow:
    0 8px 22px rgba(0,0,0,.5);
}

.nf-card-poster img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;
}

.nf-card-info{
  padding:
    9px 3px 2px;
}

.nf-card-info strong{
  display:block;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  font-size:14px;
}

.nf-card-info small{
  display:block;

  margin-top:4px;

  color:#a8a8a8;
}

.nf-empty{
  grid-column:1/-1;

  padding:70px 20px;

  text-align:center;

  color:#aaa;
}


/* DETAIL */

.nf-detail{
  position:fixed;
  inset:0;

  z-index:9000;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:30px;

  background:
    rgba(0,0,0,.82);

  backdrop-filter:
    blur(7px);
}

.nf-detail.hidden{
  display:none;
}

.nf-detail-card{
  position:relative;

  width:min(1050px,94vw);
  max-height:90vh;

  overflow:auto;

  border-radius:10px;

  background:#181818;

  box-shadow:
    0 25px 80px #000;
}

.nf-detail-close{
  position:absolute;
  right:18px;
  top:18px;

  z-index:8;

  width:42px;
  height:42px;

  border:0;
  border-radius:50%;

  background:
    rgba(0,0,0,.78);

  color:#fff;

  font-size:23px;
  font-weight:900;

  cursor:pointer;
}

.nf-detail-main{
  display:grid;

  grid-template-columns:
    270px 1fr;

  gap:34px;

  padding:48px;
}

.nf-detail-poster{
  width:100%;

  aspect-ratio:2/3;

  object-fit:cover;

  border-radius:7px;

  background:#111;
}

.nf-detail-data h2{
  margin:
    5px 0 10px;

  font-size:
    clamp(30px,4vw,50px);
}

.nf-detail-meta{
  display:flex;
  flex-wrap:wrap;

  gap:12px;

  color:#bbb;

  font-weight:700;
}

.nf-detail-summary{
  margin-top:22px;

  color:#dedede;

  font-size:16px;
  line-height:1.55;
}

.nf-detail-genres{
  display:flex;
  flex-wrap:wrap;

  gap:8px;

  margin-top:20px;
}

.nf-detail-genres span{
  padding:
    7px 11px;

  border:
    1px solid #555;

  border-radius:30px;

  color:#ddd;

  font-size:12px;
}

.nf-detail-extra{
  margin-top:24px;

  color:#aaa;

  line-height:1.7;
}

.nf-detail-extra strong{
  color:#eee;
}

.nf-status{
  padding:
    14px 54px 24px;

  color:#888;

  font-size:12px;
}

.nf-loading{
  min-height:350px;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#aaa;

  font-size:16px;
}


/* MOBILE */

@media(max-width:800px){

  .nf-topbar{
    height:auto;

    min-height:64px;

    padding:
      10px 15px;

    gap:12px;

    flex-wrap:wrap;
  }

  .nf-logo{
    font-size:25px;
  }

  .nf-nav{
    display:none;
  }

  .nf-search{
    order:3;

    width:100%;
  }

  .nf-hero{
    min-height:480px;
  }

  .nf-hero-content{
    width:auto;

    padding:
      110px 22px 65px;
  }

  .nf-hero-text{
    font-size:14px;
  }

  .nf-section-title{
    padding:
      0 18px 12px;
  }

  .nf-row{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

    gap:10px;

    padding:
      0 18px;
  }

  .nf-detail{
    padding:10px;
  }

  .nf-detail-main{
    grid-template-columns:1fr;

    padding:
      50px 22px 30px;
  }

  .nf-detail-poster{
    width:min(250px,70vw);

    margin:auto;
  }

}

/* MOVIE CORE TAB NAVIGATION */

.nf-nav-item{
  appearance:none;
  border:0;
  background:transparent;
  color:#b3b3b3;
  font:inherit;
  font-weight:600;
  cursor:pointer;
  padding:10px 2px;
  position:relative;
}

.nf-nav-item:hover,
.nf-nav-item.active{
  color:#fff;
}

.nf-nav-item.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:1px;
  height:2px;
  border-radius:2px;
  background:#e50914;
}


/* =========================================================
   MOVIE CORE PERFORMANCE V1
========================================================= */

.nf-card{
  content-visibility:auto;
  contain-intrinsic-size:260px 430px;
}

.nf-card-poster img{
  transform:translateZ(0);
}

.nf-more-sentinel{
  grid-column:1 / -1;
  min-height:80px;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#777;

  font-size:12px;
  font-weight:700;
  letter-spacing:1px;
}


/* =========================================================
   MOVIE CORE SEARCH BAR V2
========================================================= */

.nf-search{
  display:block !important;

  flex:0 0 340px !important;

  width:340px !important;
  min-width:240px !important;
  max-width:340px !important;

  margin-left:auto !important;

  position:relative !important;
  z-index:100 !important;

  visibility:visible !important;
  opacity:1 !important;
}

.nf-search input,
#nfSearchInput{
  display:block !important;

  width:100% !important;
  height:42px !important;

  box-sizing:border-box !important;

  background:
    rgba(18,18,18,.96) !important;

  color:#fff !important;

  border:
    1px solid rgba(255,255,255,.65) !important;

  border-radius:5px !important;

  padding:
    0 16px 0 42px !important;

  font-size:15px !important;
  font-weight:600 !important;

  outline:none !important;

  visibility:visible !important;
  opacity:1 !important;
}

.nf-search::before{
  content:"⌕";

  position:absolute;

  left:14px;
  top:50%;

  transform:translateY(-50%);

  color:#fff;

  font-size:24px;
  line-height:1;

  pointer-events:none;
}

#nfSearchInput::placeholder{
  color:#aaa !important;
  opacity:1 !important;
}

#nfSearchInput:focus{
  border-color:#fff !important;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.2) !important;
}

@media(max-width:1100px){

  .nf-search{
    flex-basis:260px !important;
    width:260px !important;
  }

}

@media(max-width:800px){

  .nf-search{
    order:3 !important;

    flex:0 0 100% !important;

    width:100% !important;
    max-width:none !important;

    margin-left:0 !important;
  }

}


/* =========================================================
   SEARCH DIRECT NAAST MIJN BIBLIOTHEEK
========================================================= */

.nf-nav{
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
  flex:1 !important;
}

.nf-search-inline{
  display:block !important;

  flex:0 0 300px !important;

  width:300px !important;
  min-width:220px !important;
  max-width:300px !important;

  margin-left:8px !important;

  position:relative !important;

  visibility:visible !important;
  opacity:1 !important;
}

.nf-search-inline input{
  display:block !important;

  width:100% !important;
  height:40px !important;

  background:#111 !important;
  color:#fff !important;

  border:1px solid #777 !important;
  border-radius:5px !important;

  padding:0 14px !important;

  font-size:14px !important;
  font-weight:600 !important;

  outline:none !important;

  visibility:visible !important;
  opacity:1 !important;
}

.nf-search-inline input::placeholder{
  color:#aaa !important;
  opacity:1 !important;
}

.nf-search-inline input:focus{
  border-color:#fff !important;
}

@media(max-width:1100px){

  .nf-search-inline{
    flex-basis:220px !important;
    width:220px !important;
  }

}

@media(max-width:800px){

  .nf-nav{
    display:flex !important;
    flex-wrap:wrap !important;
  }

  .nf-search-inline{
    flex:0 0 100% !important;
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
  }

}


/* =========================================================
   MOVIE CORE MOBILE V1
========================================================= */

@media (max-width:800px){

  #mediaStatusPanel.nf-panel{
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch;
  }

  .nf-topbar{
    height:auto !important;
    min-height:0 !important;
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    padding:10px 12px 12px !important;
  }

  .nf-logo{
    flex:1 1 auto !important;
    font-size:23px !important;
  }

  #closeMediaStatusButton{
    order:2 !important;
    padding:8px 12px !important;
    font-size:12px !important;
  }

  .nf-nav{
    order:3 !important;
    display:flex !important;
    flex:0 0 100% !important;
    width:100% !important;
    flex-wrap:nowrap !important;
    gap:16px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:none;
  }

  .nf-nav::-webkit-scrollbar{
    display:none;
  }

  .nf-nav-item{
    flex:0 0 auto !important;
    font-size:13px !important;
    white-space:nowrap !important;
  }

  .nf-search,
  .nf-search-inline{
    order:4 !important;
    display:block !important;
    flex:0 0 100% !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
  }

  #nfSearchInput{
    display:block !important;
    width:100% !important;
    height:44px !important;
    box-sizing:border-box !important;
    padding:0 14px !important;
    background:#161616 !important;
    color:#fff !important;
    border:1px solid #555 !important;
    border-radius:7px !important;
    font-size:16px !important;
  }

  .nf-hero{
    min-height:390px !important;
  }

  .nf-hero-content{
    width:100% !important;
    box-sizing:border-box !important;
    padding:150px 18px 45px !important;
  }

  .nf-hero h1{
    font-size:clamp(30px,10vw,45px) !important;
  }

  .nf-hero-text{
    font-size:13px !important;
  }

  .nf-row{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
    gap:14px 8px !important;
    padding:0 10px !important;
  }

  .nf-card:hover{
    transform:none !important;
  }

  .nf-detail-main{
    display:block !important;
    padding:58px 16px 35px !important;
  }

  .nf-detail-poster{
    width:min(190px,52vw) !important;
    margin:0 auto 20px !important;
  }

  #nfPlayerOverlay,
  #nfVideoPlayer{
    width:100vw !important;
    height:100dvh !important;
  }

  #nfSubtitleBox{
    top:64px !important;
    right:10px !important;
  }

  #nfSubtitleBox span{
    display:none !important;
  }
}


/* =========================================================
   MOVIE CORE MOBILE WIDTH FIX
========================================================= */

@media (max-width:800px){

  html,
  body{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  .lcars{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  .cc-screen{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  .cc-shell{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow-x:hidden !important;
    padding:0 !important;
  }

  #mediaStatusPanel.nf-panel{
    position:fixed !important;
    inset:0 !important;

    width:100vw !important;
    min-width:0 !important;
    max-width:100vw !important;

    height:100dvh !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    margin:0 !important;
    padding:0 !important;
  }

  .nf-topbar,
  .nf-hero,
  .nf-content,
  .nf-section,
  .nf-row{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

}


/* =========================================================
   MOVIE CORE MOBILE CLEAN APP
========================================================= */

@media (max-width:800px){

  /* Alles buiten Movie Core verbergen */

  body{
    background:#080808 !important;
    overflow:hidden !important;
  }

  .lcars,
  .cc-shell,
  .cc-header,
  .cc-sidebar,
  .cc-footer,
  .bottom-dashboard,
  .topbar,
  .scanlines{
    display:none !important;
  }

  /* Alleen Movie Core fullscreen */

  #mediaStatusPanel.nf-panel:not(.hidden){
    display:block !important;

    position:fixed !important;
    inset:0 !important;

    width:100vw !important;
    height:100dvh !important;

    min-width:0 !important;
    max-width:100vw !important;

    margin:0 !important;
    padding:0 !important;

    background:#080808 !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    z-index:999999 !important;
  }

  /* Bovenste balk simpeler */

  .nf-topbar{
    position:sticky !important;
    top:0 !important;

    z-index:1000 !important;

    display:block !important;

    height:auto !important;

    padding:
      12px !important;

    background:#080808 !important;

    border-bottom:
      1px solid #222 !important;
  }

  /* Logo en tabs weg */

  .nf-logo,
  .nf-nav-item,
  #closeMediaStatusButton{
    display:none !important;
  }

  /* Alleen zoekbalk zichtbaar */

  .nf-nav{
    display:block !important;
    width:100% !important;
  }

  .nf-search,
  .nf-search-inline{
    display:block !important;

    width:100% !important;
    max-width:none !important;
    min-width:0 !important;

    margin:0 !important;
  }

  #nfSearchInput{
    display:block !important;

    width:100% !important;
    height:48px !important;

    box-sizing:border-box !important;

    padding:
      0 16px !important;

    background:#181818 !important;

    color:#fff !important;

    border:
      1px solid #555 !important;

    border-radius:8px !important;

    font-size:16px !important;
  }

  /* Hero helemaal weg */

  .nf-hero{
    display:none !important;
  }

  /* Content direct onder zoekbalk */

  .nf-content{
    margin:0 !important;
    padding:
      14px 0 60px !important;

    width:100% !important;
  }

  .nf-section{
    margin:0 !important;
  }

  .nf-section-title{
    padding:
      4px 12px 12px !important;
  }

  .nf-section-title h2{
    font-size:20px !important;
  }

  /* Eventuele status rechts klein */

  .nf-section-title span{
    font-size:11px !important;
  }

  /* Films in 2 kolommen */

  .nf-row{
    display:grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;

    gap:
      14px 8px !important;

    width:100% !important;

    padding:
      0 10px !important;

    box-sizing:border-box !important;
  }

  .nf-card{
    min-width:0 !important;
    width:100% !important;

    transform:none !important;
  }

  .nf-card:hover{
    transform:none !important;
  }

  .nf-card-poster{
    width:100% !important;
  }

  .nf-card-info strong{
    font-size:13px !important;
  }

  .nf-card-info small{
    font-size:11px !important;
  }

  /* Detail scherm mobiel fullscreen */

  .nf-detail{
    position:fixed !important;
    inset:0 !important;

    width:100vw !important;
    height:100dvh !important;

    background:#080808 !important;

    overflow-y:auto !important;

    z-index:1000000 !important;
  }

  .nf-detail-main{
    display:block !important;

    padding:
      55px 16px 30px !important;
  }

  .nf-detail-poster{
    display:block !important;

    width:min(190px,55vw) !important;

    margin:
      0 auto 20px !important;
  }

  /* Player fullscreen */

  #nfPlayerOverlay,
  #nfVideoPlayer{
    width:100vw !important;
    height:100dvh !important;
  }

  #nfSubtitleBox{
    right:10px !important;
    top:64px !important;
  }

}


/* =========================================================
   MOVIE CORE PHONE APP FINAL
========================================================= */

body.nf-mobile-device{
  margin:0 !important;
  padding:0 !important;
  width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  background:#080808 !important;
}

body.nf-mobile-device #mediaStatusPanel.nf-panel:not(.hidden){
  display:block !important;

  position:fixed !important;
  inset:0 !important;

  width:100vw !important;
  max-width:none !important;
  min-width:0 !important;

  height:100vh !important;
  height:100dvh !important;

  margin:0 !important;
  padding:0 !important;

  overflow-y:auto !important;
  overflow-x:hidden !important;

  background:#080808 !important;

  z-index:2147483000 !important;
}


/* Alleen zoekbalk bovenaan */

body.nf-mobile-device .nf-topbar{
  position:sticky !important;
  top:0 !important;

  z-index:100 !important;

  display:block !important;

  width:100% !important;
  height:auto !important;

  box-sizing:border-box !important;

  padding:10px !important;

  background:#080808 !important;
}


body.nf-mobile-device .nf-logo,
body.nf-mobile-device .nf-nav-item,
body.nf-mobile-device #closeMediaStatusButton{
  display:none !important;
}


body.nf-mobile-device .nf-nav{
  display:block !important;

  width:100% !important;
  max-width:none !important;

  padding:0 !important;
  margin:0 !important;

  overflow:visible !important;
}


body.nf-mobile-device .nf-search,
body.nf-mobile-device .nf-search-inline{
  display:block !important;

  width:100% !important;
  max-width:none !important;
  min-width:0 !important;

  margin:0 !important;
  padding:0 !important;
}


body.nf-mobile-device #nfSearchInput{
  display:block !important;

  width:100% !important;
  height:48px !important;

  box-sizing:border-box !important;

  padding:0 15px !important;

  background:#181818 !important;
  color:white !important;

  border:1px solid #666 !important;
  border-radius:8px !important;

  font-size:16px !important;
}


/* Grote Netflix hero niet tonen */

body.nf-mobile-device .nf-hero{
  display:none !important;
}


/* Filmgedeelte */

body.nf-mobile-device .nf-content{
  width:100% !important;

  margin:0 !important;
  padding:14px 0 60px !important;

  box-sizing:border-box !important;
}


body.nf-mobile-device .nf-section{
  width:100% !important;
  margin:0 !important;
}


body.nf-mobile-device .nf-section-title{
  padding:4px 12px 12px !important;
}


body.nf-mobile-device .nf-row{
  display:grid !important;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    ) !important;

  width:100% !important;

  gap:14px 8px !important;

  box-sizing:border-box !important;

  padding:0 10px !important;
}


body.nf-mobile-device .nf-card{
  width:100% !important;
  min-width:0 !important;

  transform:none !important;
}


body.nf-mobile-device .nf-card:hover{
  transform:none !important;
}


body.nf-mobile-device .nf-card-poster{
  width:100% !important;
}


body.nf-mobile-device .nf-card-info strong{
  font-size:13px !important;
}


body.nf-mobile-device .nf-card-info small{
  font-size:11px !important;
}


/* Detail en speler fullscreen */

body.nf-mobile-device .nf-detail{
  position:fixed !important;
  inset:0 !important;

  width:100vw !important;
  height:100dvh !important;

  overflow-y:auto !important;

  background:#080808 !important;

  z-index:2147483100 !important;
}


body.nf-mobile-device #nfPlayerOverlay{
  position:fixed !important;
  inset:0 !important;

  width:100vw !important;
  height:100dvh !important;

  z-index:2147483200 !important;
}


body.nf-mobile-device #nfVideoPlayer{
  width:100vw !important;
  height:100dvh !important;
}