/* ============================================================
   webUI — tüm modal / popup katmanları (mobil uyum)
   Overlay kaydırılabilir, kutu ekranı aşmaz, iOS safe-area,
   tablolar yatay kayar, input zoom engellenir.
   ============================================================ */

html.modal-open,
html.modal-open body {
    overflow: hidden !important;
    overscroll-behavior: none;
}

:is(
    div.fixed.inset-0[id$="-modal"]:not(.hidden),
    div.fixed.inset-0[id$="-popup"]:not(.hidden),
    .ps-viewport-modal:not(.hidden),
    .modal-backdrop:not(.hidden),
    .app-modal-overlay,
    #dealer-wheel-prizes-modal.is-open
) {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: max(0.75rem, env(safe-area-inset-top, 0px))
             max(0.75rem, env(safe-area-inset-right, 0px))
             max(0.75rem, env(safe-area-inset-bottom, 0px))
             max(0.75rem, env(safe-area-inset-left, 0px));
}

:is(
    div.fixed.inset-0[id$="-modal"]:not(.hidden),
    div.fixed.inset-0[id$="-popup"]:not(.hidden),
    .ps-viewport-modal:not(.hidden),
    .modal-backdrop:not(.hidden),
    .app-modal-overlay,
    #dealer-wheel-prizes-modal.is-open
) {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}

#dealer-announcement-popup:not(.hidden) {
    align-items: flex-end;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
}

@media (min-width: 640px) {
    #dealer-announcement-popup:not(.hidden) {
        align-items: center;
        padding: max(0.75rem, env(safe-area-inset-top, 0px))
                 max(0.75rem, env(safe-area-inset-right, 0px))
                 max(0.75rem, env(safe-area-inset-bottom, 0px))
                 max(0.75rem, env(safe-area-inset-left, 0px));
    }
}

:is(
    div.fixed.inset-0[id$="-modal"]:not(.hidden),
    div.fixed.inset-0[id$="-popup"]:not(.hidden),
    .ps-viewport-modal:not(.hidden),
    .modal-backdrop:not(.hidden),
    .app-modal-overlay,
    #dealer-wheel-prizes-modal.is-open
) > :not(.absolute) {
    width: 100%;
    max-width: min(100%, 80rem);
    max-height: min(92dvh, calc(100vh - 1.5rem));
    max-height: min(92dvh, calc(100dvh - 1.5rem));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-sizing: border-box;
    min-width: 0;
}

:is(
    div.fixed.inset-0[id$="-modal"]:not(.hidden),
    .ps-viewport-modal:not(.hidden)
) > .relative {
    margin-left: auto;
    margin-right: auto;
}

:is(
    div.fixed.inset-0[id$="-modal"]:not(.hidden),
    .ps-viewport-modal:not(.hidden),
    .app-modal-overlay
) table {
    max-width: 100%;
}

:is(
    div.fixed.inset-0[id$="-modal"]:not(.hidden),
    .ps-viewport-modal:not(.hidden),
    .app-modal-overlay
) .overflow-x-auto {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

.app-modal-overlay iframe,
div.fixed.inset-0[id$="-modal"]:not(.hidden) iframe {
    width: 100%;
    max-width: 100%;
    max-height: min(70vh, calc(100dvh - 8rem));
}

div.fixed.inset-0[id$="-modal"].hidden,
div.fixed.inset-0[id$="-popup"].hidden,
.ps-viewport-modal.hidden,
.modal-backdrop.hidden,
#dealer-wheel-prizes-modal:not(.is-open) {
    display: none !important;
}

@media (max-width: 767px) {
    :is(
        div.fixed.inset-0[id$="-modal"]:not(.hidden),
        .ps-viewport-modal:not(.hidden),
        .modal-backdrop:not(.hidden),
        .app-modal-overlay,
        #dealer-wheel-prizes-modal.is-open
    ) {
        align-items: flex-start !important;
        justify-content: center !important;
        padding: max(0.5rem, env(safe-area-inset-top, 0px))
                 max(0.5rem, env(safe-area-inset-right, 0px))
                 max(0.5rem, env(safe-area-inset-bottom, 0px))
                 max(0.5rem, env(safe-area-inset-left, 0px)) !important;
    }

    #dealer-announcement-popup:not(.hidden) {
        align-items: flex-end !important;
        padding: env(safe-area-inset-top, 0px) 0 0 0 !important;
    }

    :is(
        div.fixed.inset-0[id$="-modal"]:not(.hidden),
        .ps-viewport-modal:not(.hidden),
        .modal-backdrop:not(.hidden),
        .app-modal-overlay,
        #dealer-wheel-prizes-modal.is-open
    ) > :not(.absolute) {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        max-height: calc(100dvh - 1rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
        border-radius: 0.9rem !important;
    }

    #dealer-announcement-popup:not(.hidden) > :not(.absolute) {
        max-height: calc(100dvh - env(safe-area-inset-top, 0px)) !important;
        border-radius: 1.25rem 1.25rem 0 0 !important;
    }

    :is(
        div.fixed.inset-0[id$="-modal"]:not(.hidden),
        .ps-viewport-modal:not(.hidden)
    ) .px-6,
    :is(
        div.fixed.inset-0[id$="-modal"]:not(.hidden),
        .ps-viewport-modal:not(.hidden)
    ) .p-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    :is(
        div.fixed.inset-0[id$="-modal"]:not(.hidden),
        .ps-viewport-modal:not(.hidden)
    ) .px-5 {
        padding-left: 0.875rem !important;
        padding-right: 0.875rem !important;
    }

    :is(
        div.fixed.inset-0[id$="-modal"]:not(.hidden),
        .ps-viewport-modal:not(.hidden),
        #dealer-announcement-popup:not(.hidden)
    ) h3 {
        font-size: 1.05rem !important;
        line-height: 1.3;
        padding-right: 0.5rem;
        word-break: break-word;
    }

    :is(
        div.fixed.inset-0[id$="-modal"]:not(.hidden),
        .ps-viewport-modal:not(.hidden),
        .app-modal-overlay,
        #dealer-announcement-popup:not(.hidden)
    ) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    :is(
        div.fixed.inset-0[id$="-modal"]:not(.hidden),
        .ps-viewport-modal:not(.hidden),
        .app-modal-overlay,
        #dealer-announcement-popup:not(.hidden)
    ) select,
    :is(
        div.fixed.inset-0[id$="-modal"]:not(.hidden),
        .ps-viewport-modal:not(.hidden),
        .app-modal-overlay,
        #dealer-announcement-popup:not(.hidden)
    ) textarea {
        font-size: 16px !important;
        max-width: 100%;
    }

    :is(
        div.fixed.inset-0[id$="-modal"]:not(.hidden),
        .ps-viewport-modal:not(.hidden)
    ) .grid {
        min-width: 0;
    }

    :is(
        div.fixed.inset-0[id$="-modal"]:not(.hidden),
        .ps-viewport-modal:not(.hidden)
    ) .grid.grid-cols-3,
    :is(
        div.fixed.inset-0[id$="-modal"]:not(.hidden),
        .ps-viewport-modal:not(.hidden)
    ) .grid.grid-cols-4,
    :is(
        div.fixed.inset-0[id$="-modal"]:not(.hidden),
        .ps-viewport-modal:not(.hidden)
    ) .grid.grid-cols-5 {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    :is(
        div.fixed.inset-0[id$="-modal"]:not(.hidden),
        .ps-viewport-modal:not(.hidden)
    ) .flex.items-center.justify-between {
        gap: 0.5rem;
    }

    :is(
        div.fixed.inset-0[id$="-modal"]:not(.hidden),
        .ps-viewport-modal:not(.hidden)
    ) .flex.justify-end,
    :is(
        div.fixed.inset-0[id$="-modal"]:not(.hidden),
        .ps-viewport-modal:not(.hidden)
    ) .flex.justify-center {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    :is(
        div.fixed.inset-0[id$="-modal"]:not(.hidden),
        .ps-viewport-modal:not(.hidden)
    ) .flex.justify-end > button,
    :is(
        div.fixed.inset-0[id$="-modal"]:not(.hidden),
        .ps-viewport-modal:not(.hidden)
    ) .flex.justify-end > a,
    :is(
        div.fixed.inset-0[id$="-modal"]:not(.hidden),
        .ps-viewport-modal:not(.hidden)
    ) .flex.justify-center > button {
        min-height: 44px;
    }

    #package-add-modal .ql-toolbar,
    #package-edit-modal .ql-toolbar {
        flex-wrap: wrap;
        overflow-x: auto;
        max-width: 100%;
    }

    #package-add-modal .package-editor-wrap .ql-editor,
    #package-edit-modal .package-editor-wrap .ql-editor {
        min-height: 140px;
    }

    #dealer-package-modal .h-24.w-24 {
        height: 3.25rem;
        width: 3.25rem;
        border-radius: 0.75rem;
    }

    #package-detail-modal img {
        height: 12rem;
        max-height: 12rem;
    }

    .app-modal-overlay iframe {
        height: calc(100dvh - 7rem) !important;
        max-height: calc(100dvh - 7rem) !important;
    }

    #ihbar-detail-modal .ihbar-modal-content {
        max-height: calc(100dvh - 1rem) !important;
    }
}

#support-media-lightbox:not(.hidden),
.dealer-surprise-overlay.is-open {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: max(0.75rem, env(safe-area-inset-top, 0px))
             max(0.75rem, env(safe-area-inset-right, 0px))
             max(0.75rem, env(safe-area-inset-bottom, 0px))
             max(0.75rem, env(safe-area-inset-left, 0px));
}

#support-media-lightbox:not(.hidden) {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

:is(
    div.fixed.inset-0[id$="-modal"]:not(.hidden),
    .ps-viewport-modal:not(.hidden)
) canvas {
    max-width: 100%;
}

@media (max-width: 767px) {
    #support-media-lightbox:not(.hidden) {
        align-items: flex-start !important;
        padding-top: max(3.25rem, env(safe-area-inset-top, 0px));
    }

    #support-media-lightbox img,
    #support-media-lightbox video {
        max-height: calc(100dvh - 7rem) !important;
        width: 100%;
        object-fit: contain;
    }

    .dealer-surprise-overlay.is-open {
        align-items: flex-start;
        padding: max(0.5rem, env(safe-area-inset-top, 0px))
                 max(0.5rem, env(safe-area-inset-right, 0px))
                 max(0.5rem, env(safe-area-inset-bottom, 0px))
                 max(0.5rem, env(safe-area-inset-left, 0px));
    }

    .dealer-surprise-stage {
        width: min(420px, 100%) !important;
    }
}

@media (max-width: 479px) {
    :is(
        div.fixed.inset-0[id$="-modal"]:not(.hidden),
        .ps-viewport-modal:not(.hidden)
    ) .sm\:grid-cols-2,
    :is(
        div.fixed.inset-0[id$="-modal"]:not(.hidden),
        .ps-viewport-modal:not(.hidden)
    ) .md\:grid-cols-2,
    :is(
        div.fixed.inset-0[id$="-modal"]:not(.hidden),
        .ps-viewport-modal:not(.hidden)
    ) .grid-cols-2 {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}