/* デバイス特化型モーダル高さ調整 CSS
 * Based on iziModal.js v1.6.1 device detection patterns
 * iPhone/iPadのサファリナビゲーション対応およびAndroidブラウザ互換性向上
 */

/* Device Detection & Modal Height Base Settings */
.custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* iziModal pattern: use top/bottom instead of height */
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    transition: all 0.3s ease;

    /* Body scroll prevention */
    overflow: hidden;

    /* Flexbox for proper centering */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    /* Minimal padding */
    box-sizing: border-box;
}

.modal-overlay {
    background-color: rgba(0, 0, 0, .85);
    z-index: 1001;
    width: 100dvw;
    height: 100dvh;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.modal-win {
    display: none;
    opacity: 0;
    width: auto;
    max-height: calc(100dvh - 1px) !important;
    width: min(100% - 1.25rem, 800px);
    padding: 0;/* 0 */
    /* position: fixed; */
    z-index: 1002;
    /* transform: translate(-50%, -50%); */
    overflow: visible;/*closeボタン表示*/

    left: 50%;
    top: 90px;/*ここでtop位置指定 custom_modal.cssの.modal-close-btnの位置に関連する*/
    transform: translateX(-50%)!important;
}

.modal-win-main {
    padding: 0;
}
/* Modal Wrapper with Scroll Capability - follow iziModal pattern */
.modal-win-body {
    position: relative;
    width: 100%;
    /*2025.09.13
    max-width: 90%;
    */
    height: auto;
    /* 2025.09.13Follow iziModal's minimal margin pattern
    max-height: calc(100vh - 20px);
    */
    overflow-y: auto;
    overflow-x: hidden;

    /* iOS smooth scrolling */
    -webkit-overflow-scrolling: touch;

    /* Prevent body scroll interference */
    overscroll-behavior: contain;

    padding: 10px;/* */

    max-height: calc(100dvh - 80px) !important;/*ここで高さ指定*/
}

    body.cs12-mobile-portrait .modal-win {
        top: 60px !important;
    }
    body.cs12-mobile-landscape .modal-win {
        top: 60px !important;
    }
/*
*
*   PC
*
*/
body.cs12-desktop-device .custom-modal-wrapper-scroll,
body.cs12-desktop-device .modal-win-body {
    max-height: calc(100vh - 80px) !important;
}

/* iOS Safari Navigation Bar対応 - URL bar height variations */
@supports (-webkit-touch-callout: none) {

    /* iOS Safari viewport adjustments - follow iziModal pattern */
    .custom-modal-overlay {
        /* Safari URL bar variations対応 - use top/bottom pattern */
        top: 0 !important;
        bottom: 0 !important;
        height: auto !important;
    }

    /*
body.cs12-mobile-landscape
body.cs12-mobile-portrait
body.cs12-desktop-device
*/


    body.cs12-mobile-landscape .custom-modal-wrapper-scroll {
        max-height: calc(95dvh - 80px) !important;
    }

    body.cs12-mobile-portrait .custom-modal-wrapper-scroll,
    body.cs12-mobile-portrait .modal-win-body  {
        max-height: calc(100dvh - 60px) !important;
    }

    body.cs12-mobile-landscape .custom-modal-overlay,
    body.cs12-mobile-landscape .modal-win-body {
        top: 0 !important;
        bottom: 0 !important;
        padding: 5px !important;
    }

    body.cs12-mobile-landscape .custom-modal-content {
        /* Remove conflicting max-height */
        min-height: 200px;
    }

    body.cs12-mobile-portrait .custom-modal-overlay {
        /* iPhone Safari URL bar shrink/expand 対応 */
        top: 0 !important;
        bottom: 0 !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        /* Minimal padding to maximize modal height */
        padding: 5px !important;
    }

    body.cs12-mobile-portrait .custom-modal-content {
        /* Remove conflicting max-height */
        min-height: 300px;
    }






    /* Android Browser & Chrome Mobile 対応 */
    @media screen and (pointer: coarse) and (hover: none) {

        /* Android device detection pattern based on iziModal mobile check */
        .custom-modal-overlay {
            /* Android bottom navigation bar 対応 - use iziModal pattern */
            top: 0 !important;
            bottom: 0 !important;
            height: auto !important;
            padding-bottom: env(keyboard-inset-height, 0px) !important;
            /* Minimal padding for maximum height */
            padding: 5px !important;
        }

        /* Android Portrait - Bottom navigation interference prevention */
        @media (orientation: portrait) {

            .custom-modal-overlay {
                top: 0 !important;
                bottom: 0 !important;
            }
            .custom-modal-content {
                margin-bottom: 0;
                min-height: 300px;
            }
        }

        /* Android Landscape - Status bar + navigation adjustments */
        @media (orientation: landscape) {

            .custom-modal-overlay {
                top: 0 !important;
                bottom: 0 !important;
            }
            .custom-modal-content {
                min-height: 200px;
            }
        }
    }

    /* Touch Device General Optimizations - iziModal pattern adaptation */
    @media (hover: none) and (pointer: coarse) {
        .custom-modal-wrapper-scroll {
            /* Touch interaction improvements */
            /* 2025.09.16 修正: 末尾の重複ブロック(389-393行)との統合でautoに変更 */
            -webkit-overflow-scrolling: auto;
            overscroll-behavior: contain;

            /* Prevent modal height jumping during scrolling */
            position: relative;
            overflow-y: auto;

            /* Safe area insets for notched devices */
            padding-left: env(safe-area-inset-left, 0px);
            padding-right: env(safe-area-inset-right, 0px);
        }

        .custom-modal-content {
            /* Remove max-height conflicts */
            width: 100%;
            min-height: 200px;

            /* Safe area insets for content */
            padding-left: env(safe-area-inset-left, 0px);
            padding-right: env(safe-area-inset-right, 0px);
        }

        /* Modal positioning adjustments for mobile */
        .custom-modal-overlay {
            /* Already handled in base styles */
            padding: 10px;
        }
    }

    /* Fallback for older browsers without viewport units support */
    @media screen and (max-width: 768px) {
        /*2025.09.13 　これがSafeArea　*/
        .custom-modal-overlay {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            height: 100vh !important;
            height: 100dvh !important;
        }

        .custom-modal-wrapper-scroll {
            /*2025.09.12 22:30 2025.09.13　次は241行
		max-height: calc(100dvh - 20px) !important;
        */
            overflow-y: auto !important;
            margin: auto;
        }

        .custom-modal-content {
            /* Remove conflicting max-height */
            min-height: 200px;
        }
    }

    /* High DPI displays - Retina optimization */
    @media (-webkit-min-device-pixel-ratio: 2),
    (min-resolution: 192dpi) {
        .custom-modal-content {
            /* Crisp rendering on high DPI */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    }

    /*2025.09.13　 ここで高さを設定している*/
    /* Keyboard avoidance for mobile input fields */
    @media screen and (max-height: 500px) {

        .custom-modal-content {
            padding: 10px;
            min-height: 150px;
        }

        .custom-modal-overlay {
            align-items: flex-start;
            padding-top: 10px;
        }
    }

    /* Device-specific modal sizing based on iziModal recalcLayout patterns */
    .custom-modal-content {
        background: white;
        border-radius: 8px;
        width: 100%;
        /* Remove max-height to prevent conflicts with wrapper scroll */
        overflow: visible;
        position: relative;

        /* Smooth transitions for device rotation */
        transition: height 0.3s ease;

        /* Minimum content height */
        min-height: 200px;
    }

    /* Body scroll prevention when modal is open */
    /*2025.09.18
    body.modal-open{
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }
*/
    /* Debug helper and position logger */
    .custom-modal-debug {
        position: fixed;
        top: 10px;
        right: 10px;
        background: rgba(0, 0, 0, 0.9);
        color: white;
        padding: 8px;
        font-size: 11px;
        z-index: 9999;
        border-radius: 4px;
        font-family: monospace;
        max-width: 300px;
        line-height: 1.3;
        display: block;
        /* Enable for debugging */
    }

    .custom-modal-debug .debug-section {
        margin-bottom: 5px;
        padding: 3px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }

    .custom-modal-debug .debug-section:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }

    /* 横向きモード（ランドスケープ）専用調整 */
    @media screen and (orientation: landscape) and (max-height: 500px) {

        .custom-modal-wrapper-scroll {
            /*2025.09.13 次は299行
            max-height: calc(100dvh - 40px) !important;
            */
            padding: 10px !important;
        }

        /* 横向き時のコンテンツエリア調整 */
        .point-modal .modal-content-area {
            padding: 10px !important;
        }

        /* 横向き時の画像サイズ調整 */
        .point-modal img {
            max-height: 120px !important;
            width: auto !important;
        }
    }

    /*2025.09.13 */
    /* iPadMini横向き専用スクロール修正 - 2025.09.13 */
    @media screen and (width: 1024px) and (orientation: landscape) {

        /* オーバーレイ全体の調整 */
        .custom-modal-overlay {
            align-items: flex-start !important;
            padding: 20px 10px !important;
            overflow: hidden !important;
        }

        /* point-modalの上マージン削除 */
        .point-modal {
            overflow: visible !important;
            height: auto !important;
        }

        /* custom-modal-wrapper自体の高さ制限 */
        .custom-modal-wrapper {
            overflow: visible !important;
            display: flex !important;
            flex-direction: column !important;
        }

        /* iPadMini横向き：スクロールとスクロールバー強制表示 */
        .custom-modal-wrapper-scroll {
            height: auto !important;
            overflow-y: scroll !important;
            overflow-x: hidden !important;
            -webkit-overflow-scrolling: touch !important;
            overscroll-behavior: contain !important;
            flex: 1 1 auto !important;
        }

        /* モーダル全体の高さ調整 */
        .custom-modal-wrapper {
            overflow: visible !important;
        }
    }
}