/**
 * HT5 Embedder v1.9.5
 * Frontend styles — responsive iframe, lightbox, loader, fullscreen
 */

/* ===========================
   Inline Embed Container
=========================== */
.ht5e {
  position: relative;
  width: 100%;
  background: #000;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.ht5e iframe.ht5e-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: #000;
}

/* ===========================
   Launch Button (Lightbox Mode)
=========================== */
.ht5e-launch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  font-size: 15px;
  border: none;
  border-radius: 8px;
  background: #1e90ff;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.ht5e-launch:hover {
  background: #0073e6;
  transform: translateY(-1px);
}
.ht5e-launch:active {
  transform: translateY(0);
  background: #005bb5;
}

/* ===========================
   Lightbox Overlay
=========================== */
#ht5e-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  transition: opacity .3s ease;
}
body.ht5e-open {
  overflow: hidden;
}

.ht5e-overlay {
  position: absolute;
  inset: 0;
  background: transparent;
}

.ht5e-modal {
  position: relative;
  width: 90%;
  max-width: 1200px;
  max-height: 90vh;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 25px rgba(0,0,0,0.5);
  animation: ht5eZoom .25s ease;
}

@keyframes ht5eZoom {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ===========================
   Lightbox Controls
=========================== */
.ht5e-close {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 30px;
  color: #fff;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 10000;
  line-height: 1;
  transition: transform .2s ease, color .2s ease;
}
.ht5e-close:hover {
  transform: scale(1.15);
  color: #1e90ff;
}

.ht5e-fullscreen {
  position: absolute;
  top: 12px;
  left: 16px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  z-index: 10000;
  transition: transform .2s ease, color .2s ease;
}
.ht5e-fullscreen:hover {
  transform: scale(1.15);
  color: #1e90ff;
}

/* ===========================
   Lightbox Iframe
=========================== */
.ht5e-frame {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  background: #000;
}
.ht5e-frame iframe.ht5e-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: #000;
  transition: opacity .3s ease;
}

/* ===========================
   Loader Spinner
=========================== */
.ht5e-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-weight: 500;
  font-size: 16px;
  opacity: 0;
  visibility: hidden;
  z-index: 9999;
  transition: opacity .25s ease, visibility .25s ease;
}
.ht5e-loader.active {
  opacity: 1;
  visibility: visible;
}
.ht5e-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255,255,255,0.3);
  border-top-color: #1e90ff;
  border-radius: 50%;
  animation: ht5eSpin 1s linear infinite;
  margin-bottom: 10px;
}
.ht5e-loading-text {
  font-size: 14px;
  opacity: 0.9;
}
@keyframes ht5eSpin {
  to { transform: rotate(360deg); }
}

/* ===========================
   Themes (13 Accent Variants)
=========================== */
:root {
  --t01:#1e90ff; --t02:#0073e6; --t03:#10b981; --t04:#8b5cf6; --t05:#ec4899;
  --t06:#f59e0b; --t07:#ef4444; --t08:#3b82f6; --t09:#0ea5e9; --t10:#64748b;
  --t11:#22c55e; --t12:#6366f1; --t13:#9333ea;
}
.ht5e-theme-01 .ht5e-launch { background: var(--t01); }
.ht5e-theme-02 .ht5e-launch { background: var(--t02); }
.ht5e-theme-03 .ht5e-launch { background: var(--t03); }
.ht5e-theme-04 .ht5e-launch { background: var(--t04); }
.ht5e-theme-05 .ht5e-launch { background: var(--t05); }
.ht5e-theme-06 .ht5e-launch { background: var(--t06); }
.ht5e-theme-07 .ht5e-launch { background: var(--t07); }
.ht5e-theme-08 .ht5e-launch { background: var(--t08); }
.ht5e-theme-09 .ht5e-launch { background: var(--t09); }
.ht5e-theme-10 .ht5e-launch { background: var(--t10); }
.ht5e-theme-11 .ht5e-launch { background: var(--t11); }
.ht5e-theme-12 .ht5e-launch { background: var(--t12); }
.ht5e-theme-13 .ht5e-launch { background: var(--t13); }

/* ===========================
   Responsive tweaks
=========================== */
@media (max-width: 768px) {
  .ht5e-modal { width: 95%; max-height: 85vh; }
  .ht5e-launch { padding: 10px 18px; font-size: 14px; }
  .ht5e-fullscreen, .ht5e-close { font-size: 26px; }
}