/* Görsel menü QR — global layout (klasik masa QR ile aynı mantık) */

.vm-phone-frame {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.to-phone-frame {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.vm-phone-frame > .vm-app-shell,
.to-phone-frame > .vm-app-shell {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
}

.vm-app-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    width: 100%;
    position: relative;
    --to-bottom-nav-height: calc(4.5rem + env(safe-area-inset-bottom, 0px));
}

.vm-app-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.vm-app-main > .vm-gallery-page,
.vm-app-main > .to-menu-page,
.vm-app-main > .to-tracking-page,
.vm-app-main > .to-cart-page,
.vm-app-main > .vm-favorites-page,
.vm-app-main > .to-splash,
.vm-app-main > .to-join-page,
.vm-app-main > .to-error-page {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

.vm-app-main > .vm-gallery-page,
.vm-app-main > .to-menu-page,
.vm-app-main > .to-tracking-page,
.vm-app-main > .to-cart-page,
.vm-app-main > .vm-favorites-page {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.vm-app-shell > .to-bottom-nav {
    flex-shrink: 0;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    z-index: 250 !important;
}

.vm-app-shell > .to-panel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--to-bottom-nav-height) !important;
    z-index: 180 !important;
    pointer-events: auto;
}

.vm-phone-frame .vm-gallery-scroll,
.vm-phone-frame .to-menu-items,
.vm-phone-frame .to-tracking-scroll,
.vm-phone-frame .to-cart-page,
.to-phone-frame .to-menu-items,
.to-phone-frame .to-tracking-scroll,
.to-phone-frame .to-cart-page {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.vm-phone-frame .vm-gallery-scroll::-webkit-scrollbar,
.vm-phone-frame .to-menu-items::-webkit-scrollbar,
.vm-phone-frame .to-tracking-scroll::-webkit-scrollbar,
.vm-phone-frame .to-cart-page::-webkit-scrollbar,
.to-phone-frame .to-menu-items::-webkit-scrollbar,
.to-phone-frame .to-tracking-scroll::-webkit-scrollbar,
.to-phone-frame .to-cart-page::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.vm-phone-frame .to-cart-bar,
.vm-phone-frame .to-cart-actions {
    flex-shrink: 0;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Eski flex/overflow kurallarını geçersiz kıl — sayfa gövdesi kayar */
.vm-phone-shell .vm-phone-frame {
    overflow-x: hidden;
    touch-action: auto;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 479px) {
    .vm-phone-shell .vm-phone-frame {
        height: 100%;
        min-height: 0;
        max-height: 100%;
        transform: none;
        max-width: 100%;
    }
}

.vm-app-main .to-modal-overlay,
.to-phone-frame .to-modal-overlay,
.vm-app-shell .to-panel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--to-bottom-nav-height, 0);
}

@media (min-width: 480px) {
    .vm-app-main > .to-menu-page,
    .vm-app-main > .vm-gallery-page,
    .vm-app-main > .to-tracking-page,
    .vm-app-main > .to-cart-page,
    .vm-app-main > .vm-favorites-page,
    .vm-app-main > .to-splash,
    .vm-app-main > .to-join-page,
    .vm-app-main > .to-error-page {
        min-height: 100%;
    }

    .vm-app-shell .to-modal-overlay,
    .vm-app-main .to-modal-overlay,
    .vm-phone-shell .vm-phone-frame .to-modal-overlay,
    .to-phone-shell .to-phone-frame .to-modal-overlay {
        position: absolute !important;
        inset: 0 !important;
    }

    /* Masadaki kişiler paneli alt navigasyonun üstünde kalmalı */
    .vm-app-shell > .to-panel-overlay {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: var(--to-bottom-nav-height) !important;
        z-index: 180 !important;
    }

    .vm-phone-shell .vm-phone-frame .vm-campaign-overlay {
        position: absolute !important;
        inset: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 100% !important;
    }
}



.vm-phone-frame .vm-gallery-page,

.vm-phone-frame .to-menu-page,

.vm-phone-frame .to-tracking-page,

.vm-phone-frame .to-cart-page {

    overflow-x: hidden;

    width: 100%;

    max-width: 100%;

    box-sizing: border-box;

}



.vm-phone-frame .to-menu-items,

.vm-phone-frame .to-tracking-scroll,

.vm-phone-frame .vm-gallery-scroll {

    min-width: 0;

}



/* Giriş galerisi — grid taşmasını önle */

.vm-phone-frame .vm-gallery-row {

    width: 100%;

    max-width: 100%;

    min-width: 0;

}



.vm-phone-frame .vm-tile {

    width: 100%;

    min-width: 0;

    max-width: 100%;

}



.vm-phone-frame .vm-tile-img,

.vm-phone-frame .vm-tile-video {

    width: 100%;

    height: 100%;

    max-width: 100%;

    object-fit: cover;

    object-position: center center;

}



/* Kaydırma çubuğu gizli — mobil dokunmatik kaydırma */

.vm-phone-frame .to-modal,
.vm-phone-frame .to-panel-list {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.vm-phone-frame .to-modal::-webkit-scrollbar,
.vm-phone-frame .to-panel-list::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}



/* Kampanya — telefon çerçevesi içinde */
.vm-phone-frame .vm-campaign-overlay {
    z-index: 10000;
}

@media (max-width: 479px) {
    .vm-phone-frame .vm-campaign-overlay {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 430px;
    }
}



.mc-preview-phone .vm-campaign-overlay {

    position: absolute !important;

    inset: 0 !important;

    left: 0 !important;

    transform: none !important;

    width: 100% !important;

    max-width: none !important;

    height: 100% !important;

}