/* modalWindow — universal iframe modal window (see visuals/js/modal-window.js) */

body.hasModal {
    overflow: hidden;
    padding-right: 1rem;
}

#modalWindow {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.75);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

#modalWindow.shown {
    opacity: 1;
    visibility: visible;
}

#modalWindowWin {
    position: relative;
    display: flex;
    flex-direction: column; 
	padding:0.1rem;
	width:98%;height:var(--frame-h, 98%);
    max-width: min(33.3rem, calc(100vw - 1.9rem));
    max-height: min(34.6rem, calc(100vh - 1.9rem));
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    transform: scale(0.96);
    transition: transform 0.2s ease, height 0.18s ease;
}

#modalWindowWin.shown {
    transform: scale(1);
}

#modalWindow.booking #modalWindowWin {
    max-width: min(32.7rem, calc(100vw - 1.9rem));
    /* --frame-h (booknow-frame.js) sets the exact height; these are
       safety clamps: pre-JS default look, floor, and growth limit */
    min-height: 21.8rem;
    max-height: max(
        min(34.6rem, calc(100vh - 1.9rem)),
        min(var(--frame-h, 0), 98vh)
    );
}

#modalWindow.big #modalWindowWin {
    max-width: min(89.7rem, calc(100vw - 1.9rem));
    max-height: min(89.7rem, calc(100vh - 1.9rem));
}

#modalWindow.rating #modalWindowWin {
    max-width: min(32.7rem, calc(100vw - 1.9rem));
    max-height: min(45rem, calc(100vh - 1.9rem));
}

/* show-on-map: opens in content width (not fullscreen) */
#modalWindow.medium #modalWindowWin {
    max-width: min(70.5rem, calc(100vw - 7rem));
    max-height: calc(100vh - 4rem);
}

#modalWindow.auth #modalWindowWin {
    max-width: min(40rem, calc(100vw - 1.9rem));
    max-height: min(28rem, calc(100vh - 1.9rem));
    border-radius: 0;
}

#modalWindow.auth #modalWindowToolbar {
    padding: 0.15em 0.2em;
}

#modalWindow.video #modalWindowWin {
    width: min(80vw, calc(100vh * 16 / 9 - 1rem));
    height: auto;
    max-width: calc(100vw - 1.9rem);
    max-height: calc(100vh - 1.9rem);
    aspect-ratio: 16 / 9;
    padding: 0;
    background: #000;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

#modalWindow.video #modalWindowLoading {
    background: #000;
    opacity: 0.6;
}

/* video: toolbar is reparented onto the untransformed overlay root by
   modal-window.js, so position:fixed resolves against the viewport corner. */
#modalWindow.video #modalWindowToolbar {
    position: fixed;
    top: 16px; /* ~1rem from the top-right corner */
    right: 16px;
    width: auto;
    height: auto;
    padding: 0;
    justify-content: center;
    background: none;
    z-index: 1;
}

#modalWindow.video #modalWindowToolbar .modalWindowTitle {
    display: none;
}

#modalWindow.video #modalWindowToolbar .modalWindowClose {
    position: static;
    box-sizing: border-box;
    width: 3.2rem;
    height: 3.2rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.35);
    color: #fff;
}

#modalWindow.video #modalWindowToolbar .modalWindowClose .modalWindowCross {
    width: 2.9rem;
    height: 2.9rem;
}

#modalWindow.video #modalWindowToolbar .modalWindowClose:hover {
    color: #e02b20;
    box-shadow: 0 0 0 1px rgba(224, 43, 32, 0.9);
}

/* extern (show-on-map desktop): chrome-less window, close docked outside */
#modalWindow.extern #modalWindowWin {
    padding: 0;
    border: 3px solid #fff;
    border-radius: 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
    overflow: visible;
}

#modalWindow.extern #modalWindowToolbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    padding: 0;
    justify-content: space-between;
    background: transparent;
    pointer-events: none;
}

#modalWindow.extern #modalWindowToolbar .modalWindowTitle {
    display: none;
}

#modalWindow.extern #modalWindowToolbar .modalWindowClose {
    position: absolute;
    top: -2px;
    right: calc(1px - (3.2rem + 5px));
    box-sizing: border-box;
    width: 3.2rem;
    height: 3.2rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.35);
    color: #fff;
    pointer-events: auto;
}

#modalWindow.extern #modalWindowToolbar .modalWindowClose .modalWindowCross {
    width: 2.9rem;
    height: 2.9rem;
}

#modalWindow.extern #modalWindowToolbar .modalWindowClose:hover {
    color: #e02b20;
    box-shadow: 0 0 0 1px rgba(224, 43, 32,0.9);
}

/* extern on small screens: near-fullscreen map, floating close, no radius */
@media (max-width: 750px) {
    #modalWindow.medium #modalWindowWin {
        max-width: calc(100vw - 1rem);   /* ≈98vw */
        max-height: calc(100vh - 1rem);  /* ≈98vh */
    }

    #modalWindow.extern #modalWindowWin {
        padding: 0;
        border: 3px solid #fff;
        border-radius: 0;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
        overflow: hidden;
    }

    #modalWindow.extern #modalWindowToolbar {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 0;
        padding: 0;
        justify-content: space-between;
        background: transparent;
        pointer-events: none;
    }

    #modalWindow.extern #modalWindowToolbar .modalWindowTitle {
        display: none;
    }

    #modalWindow.extern #modalWindowToolbar .modalWindowClose {
        position: absolute;
        top: 0.4rem;
        right: 0.4rem;
        box-sizing: border-box;
        width: 2.9rem;
        height: 2.9rem;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        box-shadow: none;
        color: #111; /* dark cross */
        pointer-events: auto;
    }

    #modalWindow.extern #modalWindowToolbar .modalWindowClose .modalWindowCross {
        width: 2.9rem;
        height: 2.9rem;
    }
}

#modalWindowToolbar {
    flex: none;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.15em 0.2em;
    background: #fff;
}

#modalWindowToolbar .modalWindowTitle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.15em;
    min-width: 0;
    overflow: hidden;
    padding-left: 0.5em;
}

#modalWindowToolbar .row-title {
    font: 500 1.3rem/1.2 Roboto, sans-serif;
    text-transform: uppercase;
    color: #4e394e;
}
#modalWindowToolbar .modalWindowTitle:has( .row-subtitle) .row-title {
 font: 500 0.85rem/1.2 Roboto, sans-serif;color: #8a8a8a;  letter-spacing: 0.12em;
}

#modalWindowToolbar .row-subtitle {
    font: 500 1rem/1.25 Roboto, sans-serif;
    color: #678f40;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#modalWindowToolbar .modalWindowClose {
    appearance: none;
    border: 0;
    padding: 0.3rem;
    background: none;
    color: #111; /* internal: black cross */
    cursor: pointer;
    line-height: 0;
    transition: color 0.15s ease, box-shadow 0.15s ease;
}

#modalWindowToolbar .modalWindowClose .modalWindowCross {
    width: 2.9rem;
    height: 2.9rem;
}

#modalWindowToolbar .modalWindowClose:hover {
    color: #e02b20;
}

#modalWindowFrame {
    flex: 1;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

#modalWindowLoading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}

#modalWindowLoading.shown {
    opacity: 1;
    visibility: visible;
}

#modalWindowLoading::before {
    content: '';
    width: 2.5rem;
    height: 2.5rem;
    background: url('../images/loading.gif') 50% 50% / contain no-repeat;
}