/* Hizli satis ortak olculeri: sayfa ve body altina tasinan pencereler (DxPopup) ayni degerleri kullanir. */
:root {
    --qs-touch: 44px;
    --qs-touch-lg: 52px;
    --qs-checkout-height: 68px;
    --qs-checkout-space: calc(var(--qs-checkout-height) + env(safe-area-inset-bottom, 0px));
}

/* Hizli satis pencereleri telefonda tam ekran.

   DxPopup pencereyi body altindaki popup kokune tasir; bilesenlerin scoped CSS'i pencere cercevesine
   (dxbl-modal-dialog / icerik / govde) ulasamaz, kurallar bu yuzden burada. Hizli satis pencereleri
   govdeye "qs-modal-body" sinifi verir; secici bu sinifi tasiyan pencereyle sinirli, diger ekranlarin
   pencereleri etkilenmez. Pencere boyutlari satir ici stil (Width / MaxWidth / MaxHeight) oldugu icin
   !important gerekir; genel 768px kuralindaki %90 genislik de burada ezilir. */
@media (max-width: 640px) {
    dxbl-modal-dialog:has(.qs-modal-body),
    dxbl-modal-dialog[style]:has(.qs-modal-body) {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        /* Cihaz klavyesi acikken Android sayfayi kucultmez: pencere tarayicinin gorunur alanina (quick-sale.js visualViewport) siger. */
        height: var(--qs-vv-height, 100dvh) !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        max-height: var(--qs-vv-height, 100dvh) !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    dxbl-modal-dialog:has(.qs-modal-body) .dxbl-modal-content {
        display: flex;
        flex-direction: column;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    dxbl-modal-dialog:has(.qs-modal-body) .dxbl-modal-header,
    dxbl-modal-dialog:has(.qs-modal-body) dxbl-popup-header {
        flex: 0 0 auto;
        border-radius: 0;
        padding-top: max(var(--s-space-12), env(safe-area-inset-top, 0px));
    }

    dxbl-modal-dialog:has(.qs-modal-body) .dxbl-modal-body.qs-modal-body {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        border-radius: 0;
        padding-bottom: calc(var(--s-space-12) + env(safe-area-inset-bottom, 0px));
    }

    dxbl-modal-dialog:has(.qs-modal-body) .dxbl-modal-footer {
        flex: 0 0 auto;
        border-radius: 0;
        padding-bottom: calc(var(--s-space-8) + env(safe-area-inset-bottom, 0px));
    }

    /* Govdenin alt boslugunu alt serit tasir; serit varken govdeye ayrica guvenli alan eklenmez. */
    dxbl-modal-dialog:has(.qs-modal-body):has(.dxbl-modal-footer) .dxbl-modal-body.qs-modal-body {
        padding-bottom: var(--s-space-12);
    }

    dxbl-modal-dialog:has(.qs-modal-body) .dxbl-modal-footer .dxbl-btn,
    dxbl-modal-dialog:has(.qs-modal-body) .dxbl-modal-footer .s-button {
        min-height: var(--qs-touch-lg);
    }
}

/* Pencere koku gorunur alanin ustune hizalanir (iOS klavye acilinca gorunur alani kaydirir). Tablet de dokunmatik
   klavye acar; masaustunde (fare) dokunulmaz. */
@media (max-width: 640px), (pointer: coarse) {
    dxbl-modal-root:has(.qs-modal-body) {
        top: var(--qs-vv-top, 0px) !important;
        bottom: auto !important;
        height: var(--qs-vv-height, 100dvh) !important;
    }
}

/* Telefonda bildirimler alttaki sabit odeme cubugunun ustunde cikar (Bootstrap bottom-0 !important tasir). */
@media (max-width: 640px) {
    body:has([data-testid="qs-mobile-checkout"]) .toast-container.position-fixed {
        bottom: var(--qs-checkout-space) !important;
    }
}