/* =========================================================
    Component: Stay Sidebar
    File: assets/css/3_components/stay-sidebar.css
    役割: 予約サイドバー（アクションカード）の装飾 ＆ 追従設定
   ========================================================= */

.p-staySidebar {
    width: 100%;
}

/* --- 追従レイアウトの設定 --- */
/* PC版（1025px以上）でサイドバー全体を追従させる */
@media screen and (min-width: 1025px) {
    .l-twoColLayout__side {
        width: 320px;
        flex-shrink: 0;
        
        position: -webkit-sticky;
        position: sticky;
        top: 100px; /* ヘッダーの高さ＋余白に合わせて調整してください */
        z-index: 10;
        
        /* サイドバーが親要素の高さ一杯に伸びるのを防ぐ（追従に必須） */
        align-self: flex-start; 
    }
}

/* =========================================================
   新しい予約カード（ボタン・PV数）の装飾
   ========================================================= */

.p-staySidebar__card {
    background-color: #fff;
    border: 2px solid var(--wan-color-brand, #ff7a00);
    border-radius: var(--wan-r-lg, 12px);
    padding: var(--wan-s-6, 24px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* PV数（煽り文句）のエリア */
.p-staySidebar__pv {
    margin-bottom: 20px;
}

.p-staySidebar__pvText strong {
    font-size: 1.6rem;
    text-decoration: underline;
}

/* スマホ（SP）表示の微調整 */
@media screen and (max-width: 1024px) {
    .p-staySidebar__card {
        padding: 16px;
        border-width: 1px;
    }

    .p-staySidebar__btn {
        height: 56px;
        font-size: 1.6rem;
    }
}

/* スマホ（SP）表示：画面下部に固定する特化レイアウト */
@media screen and (max-width: 1024px) {
    /* サイドバーの親要素の制限を解除 */
    .l-twoColLayout__side {
        width: 100%;
        position: static;
    }

    /* 内側の枠を画面下部に固定 */
    .p-staySidebar__inner {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 999; /* 他の要素より常に手前に出す */
        background-color: rgba(255, 255, 255, 0.95); /* 少しだけ透けさせて圧迫感を減らす */
        box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1); /* 上に向かって影を落とす */
        padding: 12px 16px;
        backdrop-filter: blur(4px); /* 背景の文字をぼかす（iPhone風） */
    }

    /* カードの装飾を消してシンプルに */
    .p-staySidebar__card {
        border: none;
        padding: 0;
        box-shadow: none;
        background: transparent;
    }

    /* PV数のテキストを極小サイズにして邪魔にならないように */
    .p-staySidebar__pv {
        margin-bottom: 8px;
        padding: 0;
        background: transparent;
        justify-content: center;
    }
    .p-staySidebar__pvIcon {
        width: 16px;
        height: 16px;
    }
    .p-staySidebar__pvText {
        font-size: 1.1rem;
    }
    .p-staySidebar__pvText strong {
        font-size: 1.3rem;
    }

    /* ボタンを少しスリムに */
    .p-staySidebar__btn {
        height: 48px;
        font-size: 1.5rem;
    }

    /* 注意書きはスマホでは非表示（高さを節約するため） */
    .p-staySidebar__note {
        display: none;
    }
}