/* Videoplay thumbnail and overlay styles */
.videoplay-thumb{
  display:inline-block;
  position:relative;
  overflow:hidden;
  border-radius:12px;
  cursor:pointer;
  background:#000;
}
.videoplay-thumb img, .videoplay-thumb video{ display:block; width:100%; height:auto; border-radius:12px; }
.videoplay-thumb .vp-icon{ 
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:50%; background:rgba(0,0,0,0.6);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:28px;
  pointer-events:none;
}

/* Overlay */
#videoplay-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.85); display:none; align-items:center; justify-content:center; z-index:3000;}
#videoplay-overlay.active{ display:flex; }
#videoplay-overlay .vp-container{ position:relative; max-width:90vw; max-height:80vh; width:min(1000px, 90%); display:flex; flex-direction:column; align-items:stretch; }

/* video area (keeps rounded corners consistent with images) */
#videoplay-overlay .vp-video-area{ background:#000; overflow:hidden; border-radius:10px; }
#videoplay-overlay .vp-video{ width:100%; height:auto; display:block; background:#000; border-radius:10px; }
#videoplay-overlay .vp-close{ position:fixed; right:18px; top:18px; z-index:4000; background:rgba(0,0,0,0.6); border:0; color:#fff; width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,0.5); }
#videoplay-overlay .vp-close i{ font-size:18px; }

/* Controls bar: placed below the video as a rounded rectangle */
.vp-controls{ position:static; display:flex; gap:8px; align-items:center; padding:10px 12px; margin:12px; background:rgba(0,0,0,0.65); border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,0.6); flex-wrap:wrap; position:relative; }
.vp-controls button{ background:transparent; border:0; color:#fff; font-size:18px; cursor:pointer; width:36px; height:36px; display:flex; align-items:center; justify-content:center; }
.vp-controls i{ font-size:18px; line-height:1; }
.vp-time{ color:#fff; font-size:12px; min-width:48px; text-align:center; }
.vp-progress{ flex:1; height:10px; background:rgba(255,255,255,0.12); border-radius:6px; position:relative; cursor:pointer; }
.vp-progress .vp-progress-filled{ position:absolute; left:0; top:0; bottom:0; width:0%; background:linear-gradient(90deg,#33CC99,#2bb6a0); border-radius:6px; }
.vp-menu{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; color:#fff; }

.vp-settings-panel{ position:absolute; right:12px; bottom:54px; background:rgba(0,0,0,0.78); border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:10px; box-shadow:0 10px 26px rgba(0,0,0,0.5); min-width:210px; }
.vp-settings-panel[hidden]{ display:none !important; }
.vp-toggle-row{ display:flex; gap:8px; flex-wrap:wrap; }
.vp-toggle{ background:rgba(255,255,255,0.08); color:#fff; border:1px solid rgba(255,255,255,0.12); border-radius:8px; padding:6px 10px; font-size:13px; cursor:pointer; transition: background 0.18s ease, border-color 0.18s ease; }
.vp-toggle.active{ background:rgba(51,204,153,0.26); border-color:rgba(51,204,153,0.8); }
.vp-volume-control{ display:flex; align-items:center; gap:8px; color:#fff; }
.vp-volume-slider{ width:140px; accent-color:#33cc99; }

.vp-controls.menu-inline .vp-settings-panel{ position:static; bottom:auto; right:auto; display:flex !important; flex-direction:row; align-items:center; gap:12px; padding:0; background:transparent; box-shadow:none; min-width:0; margin-left:4px; }
.vp-controls.menu-inline .vp-toggle-row{ gap:8px; }
.vp-controls.menu-inline .vp-volume-slider{ width:120px; }

.vp-fullscreen{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; }
.vp-fullscreen i{ font-size:18px; }

/* Fullscreen: make controls semi-transparent and hideable */
#videoplay-overlay:fullscreen .vp-controls,
#videoplay-overlay:-webkit-full-screen .vp-controls,
#videoplay-overlay:-moz-full-screen .vp-controls,
#videoplay-overlay .vp-container:fullscreen .vp-controls,
#videoplay-overlay .vp-container:-webkit-full-screen .vp-controls,
#videoplay-overlay .vp-container:-moz-full-screen .vp-controls,
.vp-container:fullscreen .vp-controls,
.vp-container:-webkit-full-screen .vp-controls,
.vp-container:-moz-full-screen .vp-controls {
  background: rgba(0,0,0,0.35);
  transition: opacity 240ms ease, transform 240ms ease;
}
.vp-controls.hidden{ opacity:0; pointer-events:none; transform: translateY(6px); }
.vp-controls{ transition: opacity 240ms ease, transform 240ms ease; }

/* helper class applied via JS when container is fullscreen to ensure consistent styling */
.vp-fullscreen-mode .vp-controls { background: rgba(0,0,0,0.35); }

/* Inline player controls (data-inline-player) */
.vp-inline{ display:grid; gap:10px; color:var(--text-color, #0f172a); }
.vp-inline video{ width:100%; height:auto; display:block; border-radius:10px; }
.vp-inline-controls{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 12px; background:rgba(0,0,0,0.06); border:1px solid rgba(0,0,0,0.08); border-radius:10px; color:inherit; }
.vp-inline-controls button{ background:rgba(0,0,0,0.06); border:1px solid rgba(0,0,0,0.1); color:inherit; cursor:pointer; border-radius:8px; height:36px; padding:0 10px; display:flex; align-items:center; gap:6px; }
.vp-inline-controls button:hover{ background:rgba(0,0,0,0.1); }
.vp-inline-controls i{ font-size:18px; line-height:1; }
.vp-inline-time{ font-size:12px; min-width:46px; text-align:center; color:rgba(15,23,42,0.76); }
.vp-inline-progress{ flex:1; min-width:160px; accent-color:#33cc99; }
.vp-inline-toggle{ background:rgba(255,255,255,0.08); color:inherit; border:1px solid rgba(0,0,0,0.1); padding:6px 10px; border-radius:8px; font-size:13px; cursor:pointer; }
.vp-inline-toggle.active{ background:rgba(51,204,153,0.26); border-color:rgba(51,204,153,0.8); }
.vp-inline-volume{ display:flex; align-items:center; gap:8px; }
.vp-inline-volume-slider{ width:120px; accent-color:#33cc99; }
.vp-inline-fullscreen{ width:36px; justify-content:center; }