:root { --pad: 14px; --radius: 16px; }

    html, body {
      height: 100%;
      margin: 0;
      background: transparant;
      color: #eee;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      overflow: hidden; /* alleen video zichtbaar */
    }

a {
  text-decoration: none;
}
    
.video-page {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center; /* eventueel */
}

.video-container {
  position: relative;
  width: 100%;
  max-width: 1100px;    /* max 900px */
  aspect-ratio: 16 / 9;/* hoogte automatisch */
border-radius: 30px;
  box-shadow: 0 0 30px rgba(0,0,0,.6);
  margin: 0 auto;      /* centreren */
   z-index: 1;   
}

/* iframe vult container */
#youtubeFrame, 
.video-container iframe {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  border-radius: 20px;
  z-index: 1;   
}

/* Extra mobiele optimalisatie */
@media (max-width: 768px) {
  .video-page {
    padding: 0px;
  }

  .video-container {
    box-shadow: 0 0 10px rgba(0,0,0,.4);
    border-radius: 8px;
    z-index: 1;   
  }
}

/* Kleine schermen */
@media (max-width: 480px) {
  .video-page, .playerWrapper {
    padding: 0px;
    z-index: 1;   
  }

  .video-container {
    border-radius: 6px;
    z-index: 1;   
  }
  div#playerWrapper {
    margin: 0;
}
}
    
    .controls-bar {
      position: sticky;
      bottom: 0;
      width: 100%;
      display: flex;
      gap: 10px;
      justify-content: center;
      align-items: center;
      padding: var(--pad);
//      background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0));
//    background: linear-gradient(to top, rgb(23 24 24 / 37%), #00000078);
      margin: 0px 2px;
      z-index: 99;   
    }

    .ui-btn {
      appearance: none;
      border: 0;
      padding: 10px 16px;
      border-radius: var(--radius);
      background: #1f1f1f;
      
      color: #fff;
      cursor: pointer;
     // font-weight: 600;btnFullscreen
     font-weight: 600;
      letter-spacing: .2px;
      box-shadow: 0 6px 14px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.06);
      transition: transform .06s ease, background .2s ease;
      z-index: 88;   
    }
.ui-btn {
    font-size: small;
    padding: 2px 15px 3px;
    min-height: 23px;
    border-radius: 10px;
      z-index: 88;   
}
    .ui-btn2 {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
//      appearance: none;
//      border: 0;
      padding: 2px 11px 3px 14px;
      border-radius: var(--radius);
      background: #1f1f1f;
      font-weight: 500;
    color: #fff;
      z-index: 88;   
     cursor: pointer;
     font-size: 14px;
      letter-spacing: .2px;
      box-shadow: 0 6px 14px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.06);
      transition: transform .06s ease, background .2s ease;
    }
    .ui-btn:hover, .ui-btn2:hover { background:#2a2a2a; transform: translateY(-1px); }
    .ui-btn:active { transform: translateY(0); }
    
   /* 📱 Mobiel optimalisatie */
 
@media (max-width: 700px) {

        .controls-bar {
        justify-content: inherit;
   z-index: 88;   
    }
    .video-container {
  margin: 0px auto;      /* centreren */
  -webkit-box-shadow: 0px 0px 11px 1px #bbb7;
    z-index: 1;   
}
    .ui-btn {
    font-size: 11px;
    padding: 1px 9px;
    min-height: 20px;
    font-weight: 500;
    border-radius: 8px;
    font-family: sans-serif;
    margin: 0px;
}}

@media screen and (min-width: 769px) {
.video-container {
  margin: 30px auto;      /* centreren */
  -webkit-box-shadow: 0px 0px 11px 1px #bbb7;
    z-index: 1;   
}
div#playerWrapper {
    margin: 18px 0 0 0;
      z-index: 1;   
}
}