/* SIG Digital Signage Player Styles */
:root {
    --content-padding: 40px;
    --video-margin: 20px;
    --safe-area-margin: 10vmin; /* Added for better responsive sizing */
}

/* Typography */
.sig-ds-player {
    font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
h1, h2, h3, h4, h5, h6 { color: attr(text-color) !important; }

#sig-ds-container,
.sig-ds-slide,
.sig-ds-text-content,
.sig-ds-clock,
.sig-ds-date,
.sig-ds-weather-location,
.sig-ds-weather-temp,
.sig-ds-weather-desc,
.sig-ds-weather-detail {
    font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Ensure all text elements use Manrope */
.sig-ds-text-content h1,
.sig-ds-text-content h2,
.sig-ds-text-content h3,
.sig-ds-text-content h4,
.sig-ds-text-content h5,
.sig-ds-text-content h6,
.sig-ds-text-content p {
    font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Font weight variables */
:root {
    --sig-ds-font-light: 300;
    --sig-ds-font-regular: 400;
    --sig-ds-font-medium: 500;
    --sig-ds-font-semibold: 600;
    --sig-ds-font-bold: 700;
}

.sig-ds-clock {
    font-weight: var(--sig-ds-font-bold);
}

.sig-ds-weather-temp {
    font-weight: var(--sig-ds-font-bold);
}

.sig-ds-text-content h1,
.sig-ds-text-content h2,
.sig-ds-text-content h3 {
    font-weight: var(--sig-ds-font-semibold);
}

/* Main css */
.sig-ds-player {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #000;
}

#sig-ds-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
}

#sig-ds-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

div#sig-ds-content > div {
    width: 100%;
    height: 100%;
}

/* FIXED: Crossfade transition system */
.sig-ds-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.sig-ds-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.8s ease-in-out;
    z-index: 1;
}

.sig-ds-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* Crossfade mode - FIXED */
.sig-ds-container.crossfade-mode .sig-ds-slide {
    transition: opacity 1.2s ease-in-out, visibility 1.2s ease-in-out;
}

.sig-ds-container.crossfade-mode .sig-ds-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 3;
}

.sig-ds-container.crossfade-mode .sig-ds-slide.previous {
    opacity: 0;
    visibility: hidden;
    z-index: 2;
    pointer-events: none; /* Prevent interaction with hidden slide */
}

/* Ensure all slide types work with crossfade */
.sig-ds-image-slide,
.sig-ds-text-slide,
.sig-ds-video-slide,
.sig-ds-youtube-slide,
.sig-ds-vimeo-slide,
.sig-ds-pdf-slide,
.sig-ds-clock-slide,
.sig-ds-weather-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Fix for YouTube/Vimeo iframe positioning in crossfade */
.sig-ds-container.crossfade-mode .sig-ds-video-embed {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

/* Force hardware acceleration for smoother transitions */
.sig-ds-slide {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Slide transitions - FIXED positioning */
.sig-ds-slide.slide-left {
    transform: translateX(100%);
}

.sig-ds-slide.slide-left.active {
    transform: translateX(0%);
}

.sig-ds-slide.slide-right {
    transform: translateX(-100%);
}

.sig-ds-slide.slide-right.active {
    transform: translateX(0%);
}

.sig-ds-slide.slide-up {
    transform: translateY(100%);
}

.sig-ds-slide.slide-up.active {
    transform: translateY(0%);
}

.sig-ds-slide.slide-down {
    transform: translateY(-100%);
}

.sig-ds-slide.slide-down.active {
    transform: translateY(0%);
}

/* No transition */
.sig-ds-slide.none {
    transition: none;
}

/* QR Code transitions */
.sig-ds-qr-code {
    transition: opacity 0.6s ease-in-out;
    z-index: 100;
}

.sig-ds-qr-code.fade-in {
    opacity: 1;
}

.sig-ds-qr-code.fade-out {
    opacity: 0;
}

.sig-ds-qr-code.stationary {
    transition: none;
    opacity: 1;
}

/* Image slides */
.sig-ds-image-slide {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #000;
}

/* Image slide container */
.sig-ds-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: inherit;
}

/* Ensure image container inherits transitions properly */
.sig-ds-slide.slide-left .sig-ds-image-container,
.sig-ds-slide.slide-right .sig-ds-image-container,
.sig-ds-slide.slide-up .sig-ds-image-container,
.sig-ds-slide.slide-down .sig-ds-image-container {
    transition: inherit;
}

/* Crossfade specific styling for image container */
.sig-ds-container.crossfade-mode .sig-ds-image-container {
    transition: opacity 1.2s ease-in-out, visibility 1.2s ease-in-out;
}

/* Text slides */
.sig-ds-text-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--content-padding);
    text-align: center;
}

.sig-ds-text-content {
    max-width: 90%;
    max-height: 90%;
    overflow: hidden;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.sig-ds-text-content h1,
.sig-ds-text-content h2,
.sig-ds-text-content h3,
.sig-ds-text-content h4,
.sig-ds-text-content h5,
.sig-ds-text-content h6 {
    margin: 0 0 20px 0;
    line-height: 1.2;
}

.sig-ds-text-content p {
    margin: 0 0 15px 0;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* Video slides - FIXED aspect ratio handling */
.sig-ds-video-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sig-ds-video-slide video {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.sig-ds-slide.sig-ds-video-slide:not(.cover-mode) video {
    padding:var(--safe-area-margin);
    max-width: calc(100% - calc(2 * var(--safe-area-margin)));
    max-height: calc(100% - calc(2 * var(--safe-area-margin)));
}
.sig-ds-slide.sig-ds-video-slide.cover-mode video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sig-ds-slide.sig-ds-image-slide:not(.cover-mode) .sig-ds-image-container{
    margin:var(--safe-area-margin);
    max-width: calc(100vw - calc(2 * var(--safe-area-margin)));
    max-height: calc(100vh - calc(2 * var(--safe-area-margin)));
    background-size: contain;
}
.sig-ds-slide.sig-ds-image-slide.cover-mode .sig-ds-image-container {
    width: 100%;
    height: 100%;
    background-size: cover;
}

/* YouTube/Vimeo slides - FIXED aspect ratio */
/*.sig-ds-video-embed {
    position: relative;
    width: calc(100% - 2 * var(--video-margin));
    height: calc(100% - 2 * var(--video-margin));
    margin: var(--video-margin);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sig-ds-video-embed iframe {
    width: 100%;
    height: 100%;/
    border: *none;
}

/* YouTube specific styling for proper aspect ratio 
.sig-ds-video-embed.youtube-contain iframe {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.sig-ds-video-embed.youtube-cover iframe {
    width: 100%;
    height: 100%;
}*/

.sig-ds-slide.sig-ds-youtube-slide.cover-mode .youtube-iframe-wrapper  {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

.sig-ds-slide.sig-ds-youtube-slide.cover-mode .youtube-iframe-wrapper iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%);
}

@media (min-aspect-ratio: 16/9) {
  .sig-ds-slide.sig-ds-youtube-slide.cover-mode .youtube-iframe-wrapper iframe {
    /* height = 100 * (9 / 16) = 56.25 */
    height: 56.25vw;
    height: calc(100vw * var(--aspect-ratio));
  }
}
@media (max-aspect-ratio: 16/9) {
  .sig-ds-slide.sig-ds-youtube-slide.cover-mode .youtube-iframe-wrapper iframe {
    /* width = 100 / (9 / 16) = 177.777777 */
    width: 177.78vh;
    width: calc(100vh / var(--aspect-ratio));
  }
}


.sig-ds-slide.sig-ds-youtube-slide.contain-mode .youtube-iframe-wrapper {
    padding:var(--safe-area-margin);
    width: calc(100% - calc(2 * var(--safe-area-margin)));
    height: calc(100% - calc(2 * var(--safe-area-margin)));
    position: relative;
}
.sig-ds-slide.sig-ds-youtube-slide.contain-mode .youtube-iframe-wrapper iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: min(calc(100vw - calc(2 * var(--safe-area-margin))) , calc(calc(100vw - calc(2 * var(--safe-area-margin))) / var(--aspect-ratio)));
    max-height: calc(100vh - calc(2 * var(--safe-area-margin)));
/*    max-width: calc(min(var(--aspect-ratio, 9/16), calc(calc(100vh - calc(2 * var(--safe-area-margin))) / calc(100vw - calc(2 * var(--safe-area-margin))))) * 100vw);
 */   
  width : 100%;
  height: auto;
  aspect-ratio: calc( 1 / var(--aspect-ratio, 9/16));
}

/* PDF slides */
.sig-ds-pdf-slide {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sig-ds-pdf-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sig-ds-pdf-container canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Clock slides */
.sig-ds-clock-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    color: #fff;
    flex-direction: column;
    line-height: 1;
}

.sig-ds-clock-slide .sig-ds-clock {
    font-size: 15vw;
    font-weight: bold;
    text-align: center;
}

.sig-ds-clock-slide .sig-ds-date {
    font-size: 5vw;
    margin-top: 20px;
    text-align: center;
}

/* Weather slides */
.sig-ds-weather-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    color: #fff;
    flex-direction: column;
    padding: var(--content-padding);
}

.sig-ds-weather-location {
    font-size: 2.5vw;
    text-align: center;
}

.sig-ds-weather-temp {
    font-size: 15vw;
    font-weight: bold;
    line-height: 1;
}

.sig-ds-weather-desc {
    font-size: 3vw;
    margin-top: 10px;
    text-align: center;
}

.sig-ds-weather-details {
    display: flex;
    margin-top: 30px;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
}

.sig-ds-weather-detail {
    text-align: center;
    font-size: 2vw;
    min-width: 80px;
}

.sig-ds-weather-detail span {
    display: block;
    font-size: 3vw;
    font-weight: bold;
}

.sig-ds-weather-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    gap: 15px;
    flex-wrap: wrap;
}

.sig-ds-weather-icon {
    width: 80px;
    height: 80px;
    display: block;
    margin: 0 auto;
}

.sig-ds-weather-loading {
    text-align: center;
    padding: 40px;
}

.sig-ds-weather-spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.sig-ds-weather-error {
    text-align: center;
    padding: 40px;
    color: #e74c3c;
}

.sig-ds-weather-error-icon {
    font-size: 3em;
    margin-bottom: 15px;
}

.sig-ds-weather-error-detail {
    font-size: 0.8em;
    margin-top: 10px;
    opacity: 0.7;
}

/* Branding */
#sig-ds-branding {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1000; /* Higher z-index to stay on top */
}

.sig-ds-logo {
    max-height: 60px;
    max-width: 200px;
}

/* QR Code */
.sig-ds-qr-code {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 1000; /* Higher z-index to stay on top */
    background: #fff;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.sig-ds-qr-code img {
    width: 100px;
    height: 100px;
    display: block;
    margin: 0 auto;
}

.sig-ds-qr-code .sig-ds-qr-url {
    font-size: 10px;
    margin-top: 8px;
    color: #666;
    word-break: break-all;
    max-width: 100px;
}

.sig-ds-qr-error {
    padding: 10px;
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ef5350;
    border-radius: 4px;
    text-align: center;
    font-size: 12px;
    margin: 5px 0;
}

/* Clock styles */
.sig-ds-clock-container {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000; /* Higher z-index to stay on top */
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    text-align: center;
}

.sig-ds-clock-container .sig-ds-time {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 5px;
}

.sig-ds-clock-container .sig-ds-date {
    font-size: 14px;
}

/* Error message */
#sig-ds-error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 20px 30px;
    border-radius: 5px;
    font-size: 18px;
    text-align: center;
    z-index: 2000; /* Highest z-index for errors */
}

.sig-ds-hidden {
    display: none !important;
}

/* Loading indicator */
.sig-ds-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 18px;
    z-index: 2000;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    :root {
        --content-padding: 20px;
        --video-margin: 10px;
        --safe-area-margin: 3%;
    }
    
    .sig-ds-clock {
        font-size: 20vw;
    }
    
    .sig-ds-date {
        font-size: 8vw;
    }
    
    .sig-ds-weather-temp {
        font-size: 20vw;
    }
    
    .sig-ds-weather-desc {
        font-size: 5vw;
    }
    
    .sig-ds-weather-detail {
        font-size: 4vw;
    }
    
    .sig-ds-weather-detail span {
        font-size: 5vw;
    }
    
    .sig-ds-weather-icon {
        width: 60px;
        height: 60px;
    }
    
    .sig-ds-weather-location {
        font-size: 4vw;
    }
    
    .sig-ds-text-content {
        max-width: 95%;
    }
    
    .sig-ds-qr-code {
        bottom: 10px;
        right: 10px;
        padding: 8px;
    }
    
    .sig-ds-qr-code img {
        width: 80px;
        height: 80px;
    }
}

/* Fullscreen handling */
:-webkit-full-screen #sig-ds-container {
    width: 100%;
    height: 100%;
}

:-moz-full-screen #sig-ds-container {
    width: 100%;
    height: 100%;
}

:-ms-fullscreen #sig-ds-container {
    width: 100%;
    height: 100%;
}

:fullscreen #sig-ds-container {
    width: 100%;
    height: 100%;
}

/* Safe area support for modern browsers */
@supports (padding: max(0px)) {
    .sig-ds-text-slide {
        padding-left: max(var(--content-padding), env(safe-area-inset-left));
        padding-right: max(var(--content-padding), env(safe-area-inset-right));
        padding-top: max(var(--content-padding), env(safe-area-inset-top));
        padding-bottom: max(var(--content-padding), env(safe-area-inset-bottom));
    }
    
    .sig-ds-video-embed {
        margin-left: max(var(--video-margin), env(safe-area-inset-left));
        margin-right: max(var(--video-margin), env(safe-area-inset-right));
        margin-top: max(var(--video-margin), env(safe-area-inset-top));
        margin-bottom: max(var(--video-margin), env(safe-area-inset-bottom));
    }
}


/* Spacebar feedback animation */
#sig-ds-spacebar-feedback {
    animation: pulseFeedback 1s ease-in-out;
}

@keyframes pulseFeedback {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* tables */
table.tablepress { 
    border-spacing: 0;
    border-collapse: collapse;
}
table.tablepress thead tr {
    border-bottom: 2px solid;
    border-color: attr(text-color);
}
table.tablepress th, table.tablepress td {position:relative; padding: 0.125rem .5rem!important;}
table.tablepress th:not(:last-child):after, table.tablepress td:not(:last-child):after {
    content: "";
    position: absolute;
    width: 0;
    height: 60%;
    right: 0;
    top: 20%;
    opacity: 0.125;
    border-right: 1px solid;
    border-collapse: collapse;
    border-color: attr(text-color);
}
table.tablepress tr { border-collapse: collapse; }

table.tablepress tr td:before {
    content: "";
    position: absolute;
    width: calc(100% - 0%);
    height: 100%;
    left: 0;
    bottom: 0;
    opacity: 0.25;
    border-bottom: 1px solid;
    border-color: attr(text-color) !important;
}




/************************************/



/* YouTube loading indicator */
.youtube-loading {
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-family: "Manrope", sans-serif;
}