/* Own font */
@font-face {
    font-family: Noto;
    src: url('../fonts/noto.ttf');
}

/* Page setup */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: hidden;
    position: fixed;
    cursor: default;
}

/* Logo overlay container */
#logo-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    width: 100px;
}
#logo-overlay img {
    width: 100px;
    opacity: 0.7;
    transition: opacity 0.3s;
}
#logo-overlay img:hover {
    opacity: 1;
}

/* Model-viewer and Pannellum */
model-viewer, #panorama, .pnlm-container {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;
}
.pnlm-panorama-info {
    border-radius: 0px;
}

/* Custom Hotspots */
.scene, .time, .monastery, .architecture, .archeology, .photography, .history, .model, .video {
    width: 5vw;
    height: 5vw;
    border-radius: 50%;
    background-image: url(../images/icons/clock.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 3px solid black;
}
.monastery, .architecture, .archeology, .photography, .history, .model, .video {
    background-color: rgba(248, 248, 255, 0.5);
}
.scene {
    background-image: url(../images/icons/scene.png);
    background-color: rgba(151, 251, 151, 0.5);
}
.time {
    background-image: url(../images/icons/time.png);
    background-color: rgb(252, 195, 115, 0.5);
}
.monastery {
    background-image: url(../images/icons/monastery.png);
}
.architecture {
    background-image: url(../images/icons/architecture.png);
}
.archeology {
    background-image: url(../images/icons/archeology.png);
}
.photography {
    background-image: url(../images/icons/photography.png);
}
.history {
    background-image: url(../images/icons/history.png);
}
.model {
    background-image: url(../images/icons/model.png);
}
.video {
    background-image: url(../images/icons/video.png);
}
.scene:hover {
    border: 3px solid rgb(56, 251, 56);;
}
.time:hover {
    border: 3px solid rgba(255, 149, 0, 0.608);;
    }
.monastery:hover {
    border: 3px solid rgb(0, 127, 0);;
}
.architecture:hover {
    border: 3px solid rgb(255, 166, 0);;
}
.archeology:hover {
    border: 3px solid rgb(255, 0, 0);;
}
.photography:hover {
    border: 3px solid rgb(0, 255, 255);;
}
.history:hover {
    border: 3px solid rgb(126, 0, 126);;
}
.model:hover {
    border: 3px solid rgb(0, 255, 106);;
}
.video:hover {
    border: 3px solid rgb(255, 0, 174);;
}

/* Pop-up setup */
.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(255, 255, 255);
    padding: 20px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: none;
    overflow-y: auto;
    max-height: 70vh;
    width: 90%;
    height: auto;
}
.popup-content {
    font-family: Noto;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    overflow-y: auto;
    max-height: 100%;
    box-sizing: border-box;
}
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
}
.video-container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.popup-content model-viewer {
    width: 100%;
    height: 400px;
}
.show-more-text {
    font-weight: bold;
    cursor: pointer;
}
.extra-content {
    display: none;
    margin-top: 20px;
}
.extra-content p {
    line-height: 1.6;
    margin-bottom: 15px;
}
.image-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}
.image-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.image-box img {
    height: 300px;
    width: auto;
    object-fit: cover;
    display: block;
}

/* Own button */
.close-button {
    font-family: Noto;
    margin-top: 10px;
    padding: 8px 16px;
    background-color: rgb(240, 174, 62);
    color: rgb(255, 255, 255);
    border: none;
    cursor: pointer;
    border-radius: 5px;
    float: right;
}
.close-button:hover {
    background-color: rgb(160, 101, 0);
}

/* Turn off icons for fullscreen and orientation */
.pnlm-controls-container {
    display: none;
}
/* Custom splash screen */
.splash {
    display: block;
}

/* Guide and legend */
img.scene,
img.time, 
img.monastery, 
img.architecture, 
img.archeology, 
img.photography, 
img.history, 
img.model, 
img.video {
    vertical-align: middle;
    scale: 0.75;
}

/* Mobile optimization */
@media (max-width: 768px) {
    #logo-overlay img {
        max-width: 30%;
    }

    /* Scale popups for small screens */
    .popup {
        width: 80%;
        max-height: 80vh;
        padding: 15px;
    }

    .popup-content {
        font-size: 12px;
    }

    .image-box img {
        height: auto;
        width: 80%;
    }

    /* Make hotspots slightly larger for touch */
    .time, .scene, .monastery, .architecture, .archeology, .photography, .history, .model, .video {
        width: 8vw;
        height: 8vw;
    }
}