#splashScreen {
    background-image: url(./images/museo-delle-biccherne-sala.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#languageScreen {
    background-image: url(./images/museo-delle-biccherne-sala.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}



#languageScreen .overlay, #modeScreen .overlay {
    background: #346288;
}


.logo {
    width: 180px;
    height: 180px;
    border-radius: 20px;
    background-color: rgba(0, 0, 0, 0.6);
    margin-bottom: 20px;
    display: flex
;
    justify-content: center;
    align-items: flex-end;
    font-size: 1.0rem;
    background-image: url(./images/logo-museo-delle-biccherne.jpg);
    background-size: cover;
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    padding: 12px;
}


.toggle-button, #languageButton, #modeButton, .modeButton, .toggle-button:hover, #languageButton:hover, #modeButton:hover, #languageButtonList, #languageButtonList:hover, #modeButtonList, #modeButtonList:hover  {
    color: white;
    background: #346288 !important;
}

#listScreen {
    background: #346288 !important;
}

.list-item-content {
    color: #346288 !important;
}

.btn:focus, .btn-large:focus, .btn-small:focus, .btn-floating:focus {
    background: #346288 !important;
}

#cameraScreen, #listScreen, #detailScreen {
    background: #346288 !important;
}
#modeScreenInstruction {
    color: lightgray !important;
}

#orientationOverlay {
    background-image: url(./images/museo-delle-biccherne-sala.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.audio-player {
    background: #346288 !important;
    color: white;
    }

.overlay {

    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.75) 90%);

}



.download-btn {
    position: absolute;
    top: 50px;
    right: 20px;
    z-index: 2;
}




body .container-center .btn-large {

    background-color: #b1783a !important;
    color: #fff;
}

.title {
    height: 30%;
}

.container-center {
    height: 70%;
}

/*a:has(.flag-icon-es, .flag-icon-fr, .flag-icon-de) {
    display: none !important;
}*/

#languageContainer {
    grid-template-columns: repeat(2, 1fr);
}

#matchOverlay {
    z-index: 9999 !important;
}

#matchOverlay img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: left center !important;
    display: block;
}

.zoom-slider {
    top: auto !important;
    right: auto !important;
    bottom: 20% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

.loghi {
    height: 36px;
    background-image: url(./images/loghi-museo-delle-biccherne.jpg) !important;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: fixed;
    z-index: 10;
    width: 100%;
    margin: 0 auto;
    top: 0;
    background-color: #d7d8d7 !important;
}

#poweredLogo {
    height: 1.6rem;
    margin-top: 0.5rem;
}

#modeContainer .mode-button[data-mode="child"] {
    display: none !important;
}

.mode-container {
    width: 55% !important;
}

.container-center {
    top: 6% !important;
    justify-content: flex-start !important;
}

/* SOLO splashScreen: evita il bug dei 100vh in in-app browser */
#splashScreen {
    height: 100svh !important;              /* la più sicura quando le barre sono visibili */
    height: 100dvh !important;              /* se supportata, segue le barre dinamiche */
    padding-bottom: env(safe-area-inset-bottom) !important;
    box-sizing: border-box !important;
}

.swiper-container {
    height: 100svh !important;              /* la più sicura quando le barre sono visibili */
    height: 100dvh !important;              /* se supportata, segue le barre dinamiche */
    padding-bottom: env(safe-area-inset-bottom) !important;
    box-sizing: border-box !important;
}

/* Fallback iOS/webview (Safari) */
@supports (-webkit-touch-callout: none) {
    #splashScreen, .swiper-container {
        height: -webkit-fill-available !important;
    }
}