/* =========================================================
    File: stay-search-modal.css
    Description: モーダル共通の土台（背景、外側閉じボタン）
========================================================= */

/* ---------------------------------------------------------
    1. Common & Backdrop (共通設定)
--------------------------------------------------------- */
.wan-modal-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
	z-index: 9998;
}

.wan-modal-backdrop.is-active {
    display: block;
}

/* ---------------------------------------------------------
    2. Modal Structural Base (PCデフォルト設定)
--------------------------------------------------------- */
.wan-dog-modal,
.wan-area-modal {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    background: #fff;
    z-index: 9999;
}

/* 表示切り替え */
.wan-dog-modal.is-active,
.wan-area-modal.is-active {
    display: block;
}

/* PCでは不要な要素を完全に非表示にする（親テーマ干渉対策） */
.modal-header-sp,
.modal-close-sp,
.modal-close-outside {
    display: none !important;
}

/* ---------------------------------------------------------
    3. Mobile Specific (768px以下)
--------------------------------------------------------- */
@media screen and (max-width: 768px) {
    /* モーダル表示時のスクロール禁止 */
    body.is-modal-open {
        overflow: hidden;
    }

    /* モーダルのボトムシート化 */
    .wan-dog-modal, .wan-area-modal {
        display: block !important;
        position: fixed;
        top: auto;
        bottom: -100%;
        left: 0;
        width: 100%;
        border: none;
        border-radius: 24px 24px 0 0;
        padding: 12px;
        transition: bottom 0.35s cubic-bezier(0.25, 0.1, 0.25, 1.0);
    }

    /* スマホ版アクティブ表示 */
    .wan-dog-modal.is-active, .wan-area-modal.is-active {
        bottom: 0 !important;
    }

    /* ボタン配置の基準点 */
    .wan-area-modal-inner,
    .wan-dog-modal-inner {
        position: relative;
    }

    /* モーダルのすぐ上に浮かせる閉じるボタン */
    .modal-close-outside {
        display: flex !important;
        position: absolute;
        top: -60px;
        right: 0px;
        z-index: 10;
        width: 44px;
        height: 44px;
        background: none;
        color: #fff;
        border: none;
        font-size: 48px;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        line-height: 1;
    }

    /* モバイル用内側閉じボタン（予備） */
    .modal-close-sp {
        display: flex !important;
        position: absolute;
        top: 50%;
        right: 5px;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        background: none !important;
        border: none !important;
        padding: 0 !important;
        font-size: 28px;
        color: #999;
        align-items: center;
        justify-content: center;
    }
}

/* ---------------------------------------------------------
    4. PC Specific (769px以上)
--------------------------------------------------------- */
@media screen and (min-width: 769px) {
    .modal-close-outside {
        display: none !important;
    }
}