/* ===================================================
Umino24 ポップアップカレンダー
最終整理版
・Beds24標準activeの二重表示を解除
・日付セル上下の薄い線を削除
・宿泊帯の縦区切りだけ白線
・★チェックイン残像バグの保険ルール追加
=================================================== */


/* ===================================================
① 日付セルの標準装飾をリセット
=================================================== */

.bootstrap-datetimepicker-widget .datepicker-days td.day {

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    border-radius: 0 !important;

    background-image: none !important;

    text-shadow: none !important;

    box-sizing: border-box !important;
}


/* ===================================================
② Beds24 / datetimepicker標準 active をリセット

宿泊帯の色は後述の
date-stay-* だけで描画する
=================================================== */

.bootstrap-datetimepicker-widget .datepicker-days td.day.active,

.bootstrap-datetimepicker-widget .datepicker-days td.day.active:hover {

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    border-radius: 0 !important;

    background-image: none !important;

    text-shadow: none !important;
}


/* activeに疑似要素があれば解除 */
.bootstrap-datetimepicker-widget .datepicker-days td.day.active::before,

.bootstrap-datetimepicker-widget .datepicker-days td.day.active::after {

    content: none !important;
    display: none !important;
}


/* ===================================================
③ 選択可能日
=================================================== */

.bootstrap-datetimepicker-widget table td.day.date-available {

    position: relative;

    background: #ffffff !important;

    color: #292a2f !important;

    font-weight: 500;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}


/* ===================================================
④ 選択可能日：ホバー
=================================================== */

.bootstrap-datetimepicker-widget table td.day.date-available:hover {

    background: rgba(87, 226, 208, 0.14) !important;

    color: #292a2f !important;

    cursor: pointer;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}


/* ===================================================
⑤ 選択不可日
薄いグレー＋薄い打消し線
=================================================== */

.bootstrap-datetimepicker-widget table td.day.date-unavailable,

.bootstrap-datetimepicker-widget table td.day.date-unpublished {

    position: relative;

    background: #ffffff !important;

    color: #d5d5d5 !important;

    pointer-events: none;

    text-decoration-line: line-through;
    text-decoration-color: #d5d5d5;
    text-decoration-thickness: 1px;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}


/* 以前使っていた×などを完全解除 */
.bootstrap-datetimepicker-widget table td.day.date-unavailable::before,

.bootstrap-datetimepicker-widget table td.day.date-unavailable::after,

.bootstrap-datetimepicker-widget table td.day.date-unpublished::before,

.bootstrap-datetimepicker-widget table td.day.date-unpublished::after {

    content: none !important;
    display: none !important;
}


/* ===================================================
⑥ datetimepicker標準 disabled
=================================================== */

.bootstrap-datetimepicker-widget table td.day.disabled {

    background: #ffffff !important;

    color: #d5d5d5 !important;

    text-decoration-line: line-through;
    text-decoration-color: #d5d5d5;
    text-decoration-thickness: 1px;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}


/* ===================================================
⑦ CHECK-IN画面

カレンダーを開いただけでは
既存activeに色を付けない
=================================================== */

.bootstrap-datetimepicker-widget.umino-checkin-mode table td.day.active,

.bootstrap-datetimepicker-widget.umino-checkin-mode table td.day.active:hover {

    background: #ffffff !important;

    color: #292a2f !important;

    text-decoration: none !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}


/* ===================================================
⑦-2 ★追加：CHECK-IN画面の保険ルール

JSのクラス削除が1フレーム分
間に合わなかった場合でも、
umino-checkin-modeが付いている間は
宿泊帯(date-stay-*)を強制的に
「白い通常セル」に見せる。

＝チェックアウト画面から
チェックインへ戻した瞬間に
前の宿泊帯がチラッと見える現象への保険
=================================================== */

.bootstrap-datetimepicker-widget.umino-checkin-mode table td.day.date-stay-in,

.bootstrap-datetimepicker-widget.umino-checkin-mode table td.day.date-stay-middle,

.bootstrap-datetimepicker-widget.umino-checkin-mode table td.day.date-stay-out {

    background: #ffffff !important;

    color: #292a2f !important;

    font-weight: 500 !important;

    text-decoration: none !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    border-radius: 0 !important;
}


/* ===================================================
⑧ 今回新しく選択したIN

白 → ミント
=================================================== */

.bootstrap-datetimepicker-widget table td.day.date-picked-now {

    background:
        linear-gradient(135deg,
            #ffffff 0%,
            #ffffff 49%,
            #57e2d0 50%,
            #57e2d0 100%) !important;

    color: #292a2f !important;

    font-weight: 600;

    text-decoration: none !important;

    border: 0 !important;
    outline: 0 !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    box-sizing: border-box !important;
}


/* ===================================================
⑨ CHECK-OUT画面：IN

白 → ミント

右側にだけ白い区切り線
=================================================== */

.bootstrap-datetimepicker-widget table td.day.date-stay-in,

.bootstrap-datetimepicker-widget table td.day.active.date-stay-in,

.bootstrap-datetimepicker-widget table td.day.date-stay-in:hover,

.bootstrap-datetimepicker-widget table td.day.active.date-stay-in:hover {

    background:
        linear-gradient(135deg,
            #ffffff 0%,
            #ffffff 49%,
            #57e2d0 50%,
            #57e2d0 100%) !important;

    color: #292a2f !important;

    font-weight: 600;

    text-decoration: none !important;

    border: 0 !important;
    outline: 0 !important;

    border-radius: 0 !important;

    /*
     * 次の日との境界だけ白線
     * borderではなく内側shadowにすることで
     * 上下の線を出さない
     */
    box-shadow:
        inset -1px 0 0 #ffffff !important;

    box-sizing: border-box !important;
}


/* ===================================================
⑩ CHECK-OUT画面：滞在中

全面ミント
右側にだけ白い区切り線
=================================================== */

.bootstrap-datetimepicker-widget table td.day.date-stay-middle,

.bootstrap-datetimepicker-widget table td.day.active.date-stay-middle,

.bootstrap-datetimepicker-widget table td.day.date-stay-middle:hover,

.bootstrap-datetimepicker-widget table td.day.active.date-stay-middle:hover {

    background: #57e2d0 !important;

    color: #ffffff !important;

    font-weight: 600;

    text-decoration: none !important;

    border: 0 !important;
    outline: 0 !important;

    border-radius: 0 !important;

    /*
     * 日付と日付の間だけ白線
     */
    box-shadow:
        inset -1px 0 0 #ffffff !important;

    box-sizing: border-box !important;
}


/* ===================================================
⑪ CHECK-OUT画面：OUT

ミント → 白

右端の水色残りも白でマスク
=================================================== */

.bootstrap-datetimepicker-widget table td.day.date-stay-out,

.bootstrap-datetimepicker-widget table td.day.active.date-stay-out,

.bootstrap-datetimepicker-widget table td.day.date-stay-out:hover,

.bootstrap-datetimepicker-widget table td.day.active.date-stay-out:hover {

    background:
        linear-gradient(135deg,
            #57e2d0 0%,
            #57e2d0 49%,
            #ffffff 50%,
            #ffffff 100%) !important;

    color: #292a2f !important;

    font-weight: 600;

    text-decoration: none !important;

    border: 0 !important;
    outline: 0 !important;

    border-radius: 0 !important;

    /*
     * OUT右側に残る
     * Beds24側の水色ラインを白で隠す
     */
    box-shadow:
        inset -2px 0 0 #ffffff !important;

    box-sizing: border-box !important;
}


/* ===================================================
⑫ 宿泊帯の疑似要素も完全解除

背景はCSSのbackgroundだけで描画
=================================================== */

.bootstrap-datetimepicker-widget table td.day.date-picked-now::before,

.bootstrap-datetimepicker-widget table td.day.date-picked-now::after,

.bootstrap-datetimepicker-widget table td.day.date-stay-in::before,

.bootstrap-datetimepicker-widget table td.day.date-stay-in::after,

.bootstrap-datetimepicker-widget table td.day.date-stay-middle::before,

.bootstrap-datetimepicker-widget table td.day.date-stay-middle::after,

.bootstrap-datetimepicker-widget table td.day.date-stay-out::before,

.bootstrap-datetimepicker-widget table td.day.date-stay-out::after {

    content: none !important;
    display: none !important;
}


/* ===================================================
⑬ カレンダー全体
PC
=================================================== */

.bootstrap-datetimepicker-widget {

    width: 405px !important;

    max-width: 94vw !important;

    padding: 10px 14px 8px !important;
}


.bootstrap-datetimepicker-widget table {

    width: 100% !important;
}


/* ===================================================
⑭ 日付マス・曜日
PC
=================================================== */

.bootstrap-datetimepicker-widget table td,

.bootstrap-datetimepicker-widget table th {

    height: 38px !important;

    line-height: 38px !important;

    padding: 0 !important;

    font-size: 14px !important;
}


/*
 * 日付セルは上下左右の線なし
 */
.bootstrap-datetimepicker-widget .datepicker-days td.day {

    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
}


/* ===================================================
⑮ 月ヘッダー
=================================================== */

.bootstrap-datetimepicker-widget .picker-switch {

    font-size: 16px !important;

    font-weight: 600 !important;
}


/* ===================================================
⑯ 前月・翌月の日付を非表示
=================================================== */

.bootstrap-datetimepicker-widget table td.day.old,

.bootstrap-datetimepicker-widget table td.day.new {

    visibility: hidden !important;

    pointer-events: none !important;
}


/* ===================================================
⑰ スマホ
画面中央固定＋コンパクト表示
=================================================== */

@media (max-width: 520px) {


    .bootstrap-datetimepicker-widget,
    .bootstrap-datetimepicker-widget.dropdown-menu {

        position: fixed !important;

        left: 50% !important;
        right: auto !important;

        top: 50% !important;
        bottom: auto !important;

        transform:
            translate(-50%, -50%) !important;

        width:
            calc(100vw - 20px) !important;

        max-width: none !important;

        margin: 0 !important;

        padding:
            8px 10px 7px !important;

        z-index: 99999 !important;
    }


    /* -----------------------------------------------
    曜日・日付
    ----------------------------------------------- */

    .bootstrap-datetimepicker-widget table td,

    .bootstrap-datetimepicker-widget table th {

        height: 34px !important;

        line-height: 34px !important;

        padding: 0 !important;

        font-size: 14px !important;
    }


    /* -----------------------------------------------
    日付セル

    スマホで縦長になる原因になる
    min-height等も念のため解除
    ----------------------------------------------- */

    .bootstrap-datetimepicker-widget .datepicker-days td.day {

        height: 34px !important;

        min-height: 0 !important;

        line-height: 34px !important;

        padding: 0 !important;

        border: 0 !important;

        border-radius: 0 !important;
    }


    /* -----------------------------------------------
    月ヘッダー
    ----------------------------------------------- */

    .bootstrap-datetimepicker-widget .picker-switch {

        font-size: 16px !important;
    }


    /* -----------------------------------------------
    スマホ宿泊帯

    高さも日付セル34pxに合わせる
    ----------------------------------------------- */

    .bootstrap-datetimepicker-widget td.day.date-picked-now,

    .bootstrap-datetimepicker-widget td.day.date-stay-in,

    .bootstrap-datetimepicker-widget td.day.date-stay-middle,

    .bootstrap-datetimepicker-widget td.day.date-stay-out {

        height: 34px !important;

        line-height: 34px !important;

        padding: 0 !important;

        border-top: 0 !important;
        border-bottom: 0 !important;
    }
}

/* ===================================================
CHECK-IN画面
選択済み(active)でも予約不可日は
薄いグレー＋打消し線を維持
=================================================== */

.bootstrap-datetimepicker-widget.umino-checkin-mode table td.day.active.date-unavailable,

.bootstrap-datetimepicker-widget.umino-checkin-mode table td.day.active.date-unpublished,

.bootstrap-datetimepicker-widget.umino-checkin-mode table td.day.active.disabled {

    background: #ffffff !important;

    color: #d5d5d5 !important;

    text-decoration-line: line-through !important;
    text-decoration-color: #d5d5d5 !important;
    text-decoration-thickness: 1px !important;

    font-weight: 400 !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    pointer-events: none !important;
}

/* ===================================================
予約可能日の文字を少し太めに
=================================================== */

.bootstrap-datetimepicker-widget table td.day.date-available {
    font-weight: 700 !important;
}