/* Vertical side tabs layout */

.vtg-tabs {
    display: flex !important;
    gap: 1rem !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 1em 0 !important;
}

.vtg-tabs .vtg-tabs-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    /* reserve a fixed column for tab titles but allow flex behavior */
    flex: 0 0 220px !important;
    width: 220px !important;
    border-inline-end: 1px solid #ddd !important;
    background: transparent !important;
}

.vtg-tabs .vtg-tabs-list .vtg-tab {
    margin: 0;
}

.vtg-tabs .vtg-tabs-list .vtg-tab a {
    display: block !important;
    padding: 10px 12px !important;
    text-decoration: none !important;
    color: #ff2b2b  !important;
    font-weight: black;
    border-inline-start: 4px solid transparent !important;
}

.vtg-tabs .vtg-tabs-list .vtg-tab.active a {
    background: #f9f9f9 !important;
    border-inline-start-color: #0073aa !important;
    font-weight: 600 !important;
}

.vtg-tabs .vtg-panels {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-width: 320px !important;
    min-height: 360px !important;
    /* ensure panels don't collapse too small */
    border: 1px solid #ddd !important;
    padding: 1em !important;
    background: #fff !important;
    box-sizing: border-box !important;
}

.vtg-tabs .vtg-panel {
    display: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    flex: 1 1 auto !important;
}

.vtg-tabs .vtg-panel.active {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    flex: 1 1 auto !important;
}


/* Responsive: stack vertically on small screens */

@media (max-width: 768px) {
    .vtg-tabs {
        flex-direction: column !important;
    }
    .vtg-tabs .vtg-tabs-list {
        width: 100% !important;
        border-inline-end: none !important;
        border-block-end: 1px solid #ddd !important;
        display: flex !important;
        overflow-x: auto !important;
    }
    .vtg-tabs .vtg-tabs-list .vtg-tab {
        display: inline-block !important;
    }
    .vtg-tabs .vtg-panels {
        border-block-start: none !important;
    }
}


/* Small adjustments for admin preview: use side-tabs layout and give the video panel room */

.vtg-admin-preview .vtg-tabs {
    max-width: 100% !important;
    /* use the side-tabs layout in the admin preview */
    flex-direction: row !important;
    gap: 1rem !important;
    align-items: flex-start !important;
}

.vtg-admin-preview .vtg-tabs-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    /* fixed column for titles in preview */
    flex: 0 0 220px !important;
    width: 220px !important;
    border-inline-end: 1px solid #ddd !important;
    background: transparent !important;
}

.vtg-admin-preview .vtg-tabs-list .vtg-tab a {
    display: block !important;
    padding: 10px 12px !important;
}

.vtg-admin-preview .vtg-panels {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-width: 360px !important;
    min-height: 480px !important;
    /* ensure video panel has room */
    border: 1px solid #ddd !important;
    padding: 1em !important;
    background: #fff !important;
    box-sizing: border-box !important;
}

.vtg-admin-preview .vtg-panels iframe {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    min-height: 360px !important;
}


/* Aspect-ratio wrapper for video iframes. */

.vtg-tabs .vtg-video {
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    background: #000 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.vtg-tabs .vtg-video iframe {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    border: 0 !important;
}


/* Apply sensible defaults for panels that contain raw iframes (frontend); encourages authors to wrap iframes in .vtg-video */

.vtg-tabs .vtg-panel iframe {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
}


/* Fallback for browsers that don't support aspect-ratio */

@supports not (aspect-ratio: 1/1) {
    .vtg-tabs .vtg-video {
        position: relative !important;
        padding-top: 56.25% !important;
    }
    .vtg-tabs .vtg-video iframe {
        position: absolute !important;
        top: 0 !important;
        inset-inline-start: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
}


/* Use more specific selector so theme CSS is less likely to override the video wrapper */

.vtg-tabs .vtg-video {
    aspect-ratio: 16/9 !important;
}

.vtg-tabs .vtg-video iframe {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.vtg-panel{position:relative;}
.reload-iframe{
  position:absolute;
  top:10px;
  inset-inline-end:10px;
  width:42px;
  height:42px;
  border-radius:50%;
  border:none;
  background:#ff1414;
  color:#fff;
  font-size:18px;
  cursor:pointer;
  z-index:999;
}

.reload-page{
  background:#d32f2f;
  color:#fff;
  border:none;
  padding:8px 16px;
  border-radius:8px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  margin-inline-start:8px;
}
.reload-page:hover{background:#b71c1c;}