/* ===================================================
Umino24
Airbnb風 カスタムカレンダー(新規・試験導入版) CSS

★既存の umino24-calendar.css とは別ファイルです。
  既存ファイルは変更していません。
=================================================== */


/* ===================================================
① Beds24標準カレンダーを完全に見えなくする

  ※ 消してはいない。裏で動かして
  値の受け渡し(datetimepicker API)だけ使う。

  ★「本物のクリックを再現する」方式は
  Beds24側のshow()/focusの内部処理と衝突して
  無限ループを起こしたため一旦中止。
  display:noneの安全な状態に戻す。
=================================================== */

.bootstrap-datetimepicker-widget {

    display: none !important;

    visibility: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;
}


/* ===================================================
①-2 チェックアウトの箱を非表示にして
     チェックインの箱に1本化する

  ※ #inputcheckout自体は消していない
  (display:noneにしているのは列(.b24-selector-checkout)
  ごとまるごと)。日付データの
  やり取り(DateTimePicker API)は
  これまで通り裏で機能する。

  ※ チェックイン側の列幅(.b24-selector-checkin)は
  Bootstrapのグリッドクラスを
  JS側(umino24-airbnb-calendar.js)で
  col-xs-12 / col-sm-6 / col-md-4 / col-lg-4に
  差し替えて、チェックアウト分の幅を
  引き継ぐようにしている。
=================================================== */

.b24-selector-checkout {

    display: none !important;
}


#inputcheckingroup label {

    display: block;

    white-space: nowrap;
}


#inputcheckingroup #checkin {

    width: 100% !important;

    position: relative;
}


/*
 * ★スマホ幅で箱が右に寄って見える場合の保険
 * 横幅・左右位置を強めに指定し直す
 */
@media (max-width: 768px) {

    .b24-selector-checkin {

        float: none !important;

        width: 100% !important;

        max-width: 100% !important;

        flex: 0 0 100% !important;

        margin-left: 0 !important;

        margin-right: 0 !important;

        left: 0 !important;

        right: 0 !important;

        padding-left: 10px !important;

        padding-right: 10px !important;

        box-sizing: border-box !important;
    }

    #inputcheckingroup,

    #inputcheckingroup #checkin {

        width: 100% !important;

        margin-left: 0 !important;

        margin-right: 0 !important;
    }
}


/*
 * まとめ表示になった状態でも
 * 中央寄せにならないよう左詰めのまま
 */
#inputcheckin {

    text-align: left !important;

    white-space: nowrap;

    text-overflow: ellipsis;
}


/* ===================================================
①-3 まとめ表示は「見た目だけ」上から重ねる

  #inputcheckinの実際の値(val)には触れない。
  Beds24自身がこの値を使って下部の料金テーブルを
  再描画しているため、独自フォーマットで
  上書きすると連動しなくなってしまう。

  そのため実際の入力欄の文字は透明にして隠し、
  data-display属性の内容をCSSの::afterで
  上から重ねて表示する。
=================================================== */

#inputcheckin {

    color: transparent !important;
}


#inputcheckingroup #checkin::after {

    display: none;
}


.umino-ac-checkin-overlay {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 40px;

    right: 10px;

    z-index: 5;

    display: flex;

    align-items: center;

    pointer-events: none;

    color: #292a2f !important;

    font-size: 14px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* ===================================================
② オーバーレイ全体
=================================================== */

.umino-ac-overlay {

    display: none;

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, 0.45);

    z-index: 100000;

    align-items: center;

    justify-content: center;

    padding: 16px;

    box-sizing: border-box;
}


.umino-ac-panel {

    background: #ffffff;

    border-radius: 16px;

    width: 100%;

    max-width: 720px;

    max-height: 88vh;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);

    font-family:
        "Zen Kaku Gothic New",
        -apple-system,
        BlinkMacSystemFont,
        "Hiragino Sans",
        "Yu Gothic",
        sans-serif;
}


/* ===================================================
③ ヘッダー
=================================================== */

.umino-ac-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 16px 20px 4px;
}


.umino-ac-title {

    font-size: 18px;

    font-weight: 700;

    color: #292a2f;
}


.umino-ac-header-btns {

    display: flex;

    align-items: center;

    gap: 10px;
}


.umino-ac-clear {

    background: none;

    color: #666666;

    border: 0;

    padding: 8px 4px;

    font-size: 13px;

    font-weight: 600;

    text-decoration: underline;

    cursor: pointer;
}


.umino-ac-clear:hover {

    color: #292a2f;
}


.umino-ac-close {

    background: #292a2f;

    color: #ffffff;

    border: 0;

    border-radius: 999px;

    padding: 8px 18px;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;
}


.umino-ac-close:hover {

    background: #444650;
}


/* ===================================================
④ サマリー行
=================================================== */

.umino-ac-summary {

    padding: 4px 20px 12px;

    font-size: 14px;

    color: #292a2f;

    font-weight: 600;

    border-bottom: 1px solid #eeeeee;
}


/* ===================================================
⑤ 月送りナビ

  デスクトップは2ヶ月分の外側に配置、
  スマホは常時表示の上部固定ナビとして機能
=================================================== */

.umino-ac-nav {

    display: flex;

    justify-content: space-between;

    padding: 6px 20px 0;
}


.umino-ac-nav-btn {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    border: 1px solid #dddddd;

    background: #ffffff;

    font-size: 16px;

    line-height: 1;

    cursor: pointer;

    color: #292a2f;
}


.umino-ac-nav-btn:hover {

    background: #f5f5f5;
}


/* ===================================================
⑥ 月表示エリア(スクロール)
=================================================== */

.umino-ac-months {

    flex: 1;

    overflow-y: auto;

    padding: 12px 20px 20px;

    -webkit-overflow-scrolling: touch;
}


/* デスクトップ:2ヶ月横並び */
.umino-ac-months.is-desktop {

    display: flex;

    gap: 32px;

    align-items: flex-start;
}

.umino-ac-months.is-desktop .umino-ac-month {

    flex: 1;

    min-width: 0;
}


/* スマホ:縦スクロールで月を並べる */
.umino-ac-months.is-mobile {

    display: flex;

    flex-direction: column;

    gap: 24px;
}


/* ===================================================
⑦ 月ブロック
=================================================== */

.umino-ac-month-header {

    text-align: center;

    font-size: 15px;

    font-weight: 700;

    color: #292a2f;

    margin-bottom: 8px;
}


.umino-ac-weekrow {

    display: grid;

    grid-template-columns: repeat(7, 1fr);

    margin-bottom: 4px;
}


.umino-ac-weekday {

    text-align: center;

    font-size: 12px;

    color: #999999;

    padding: 4px 0;
}


.umino-ac-grid {

    display: grid;

    grid-template-columns: repeat(7, 1fr);
}


/* ===================================================
⑧ 日付セル
=================================================== */

.umino-ac-day {

    position: relative;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 14px;

    color: #292a2f;

    cursor: pointer;

    user-select: none;
}


.umino-ac-day-blank {

    cursor: default;
}


/* 選択不可 */
.umino-ac-day.is-disabled {

    color: #d5d5d5;

    text-decoration: line-through;

    text-decoration-color: #d5d5d5;

    cursor: not-allowed;
}


/* 通常ホバー(選択可能日)
   ※範囲プレビュー中のマスには効かせない */
.umino-ac-day:not(.is-disabled):not(.umino-ac-day-blank):not(.is-checkin):not(.is-checkout):not(.is-in-range):not(.is-hover-range):hover {

    background: rgba(87, 226, 208, 0.14);
}


/* ===================================================
⑨ IN / OUT本体

  Beds24標準カレンダー(umino24-calendar.css)と
  同じ手法:linear-gradientで斜めに切って
  「旗」のようにつながって見えるようにする。
  丸(oval)はやめてこちらに統一。

  ※サイト側に body * { font-weight:500 !important; }
  という全体ルールがあるため、!importantで
  確実に太さ700を勝たせる。
=================================================== */

.umino-ac-day.is-checkin {

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

    color: #292a2f !important;

    font-weight: 700 !important;

    border-radius: 0;

    box-shadow: inset -1px 0 0 #ffffff, inset 0 -1px 0 #ffffff;

    box-sizing: border-box;

    z-index: 2;
}


.umino-ac-day.is-checkout {

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

    color: #292a2f !important;

    font-weight: 700 !important;

    border-radius: 0;

    box-shadow: inset -2px 0 0 #ffffff, inset 0 -1px 0 #ffffff;

    box-sizing: border-box;

    z-index: 2;
}


/* ===================================================
⑩ 確定済みの滞在帯(IN〜OUTの間)

  ベタ塗りのミント、文字は#292a2f。
  Airbnb同様、セル同士がつながって見えるように
  左右にpaddingなしで敷き詰め、境界だけ白線

  ★週をまたぐ長期宿泊のときに見やすいよう、
  上下(週と週の間)にも薄い白線を追加
=================================================== */

.umino-ac-day.is-in-range {

    background: #57e2d0;

    color: #292a2f !important;

    font-weight: 700 !important;

    box-shadow: inset -1px 0 0 #ffffff, inset 0 -1px 0 #ffffff;

    box-sizing: border-box;
}


/* ===================================================
⑪ ホバー中のプレビュー帯(PC・OUT未確定時)
=================================================== */

.umino-ac-day.is-hover-range {

    background: #57e2d0;

    color: #292a2f !important;

    font-weight: 700 !important;

    box-shadow: inset -1px 0 0 #ffffff, inset 0 -1px 0 #ffffff;


    box-sizing: border-box;
}


/* ===================================================
⑫ スマホ調整
=================================================== */

@media (max-width: 768px) {

    .umino-ac-panel {

        max-height: 92vh;

        border-radius: 12px;

        position: relative;
    }

    /*
     * ★文字を大きく(年配の方にも見やすく)
     */
    .umino-ac-day {

        height: 46px;

        font-size: 17px;
    }

    .umino-ac-weekday {

        font-size: 14px;
    }

    .umino-ac-month-header {

        font-size: 19px;

        font-weight: 700;
    }

    .umino-ac-months {

        padding: 8px 14px 100px;
    }

    /*
     * ★スマホは縦スクロールで全月を見せるので
     * 前月・翌月の矢印は不要
     */
    .umino-ac-nav {

        display: none;
    }

    /*
     * ★「閉じる」「日付をクリア」を
     * 画面下部に固定(片手操作で押しやすく)
     */
    .umino-ac-header-btns {

        position: fixed;

        left: 24px;

        right: 24px;

        bottom: 24px;

        background: #ffffff;

        padding: 12px 16px;

        border-radius: 14px;

        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.18);

        justify-content: space-between;

        z-index: 3;
    }

    .umino-ac-close {

        flex: 1;

        text-align: center;

        margin-left: 12px;
    }

    /*
     * ★スマホ幅では「チェックイン - チェックアウト」の
     * ラベルが中央寄せになるため、
     * 実際の日付表示も中央寄せに揃える
     */
    .umino-ac-checkin-overlay {

        left: 10px;

        right: 10px;

        justify-content: center;

        text-align: center;
    }
}


/* ===================================================
⑬ Beds24標準の「空室状況確認」ミニカレンダー・
   価格テーブル側:チェックイン日も常に斜めカットにする

  ※これは umino-ac-* (私が作ったオーバーレイ)とは
  別の、Beds24自体のsetsplitdates1という標準機能への
  追加ルール。

  Beds24標準では「前日と空室状況の種類が変わるときだけ」
  斜めに切る仕様のため、チェックイン日の前日がたまたま
  同じ状態(空きあり)だと、チェックイン側だけ斜めカットが
  出ない。チェックアウト側と見た目を揃えるため、
  チェックイン日(datestayの最初の日)は常に斜めカットに
  なるよう強制する。
=================================================== */

/* ===================================================
⑬ Beds24標準の「価格テーブル」側:
   チェックイン日を常に斜めカットにする

  ※これは umino-ac-* (私が作ったオーバーレイ)とは
  別の、Beds24自体のsetsplitdates1という標準機能への
  追加ルール。

  価格テーブルは必ずチェックイン日が一番左の列
  (id末尾が「-0」)になる仕様を利用して、
  そのセルだけをピンポイントで狙う。

  ※前回、宿泊中の日すべてに斜めがかかってしまう
  不具合があったため、「一番左の列」であることを
  必須条件に絞り込んだ。
=================================================== */

.roomofferpricetable td[id$="-0"].dateavail.datestay {

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

.roomofferpricetable td[id$="-0"].daterequest.datestay {

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


/* ===================================================
⑭ 選択中(宿泊日)の文字色・太さ

  Beds24標準は白文字だったのを、
  #292a2f・太さ700に変更
=================================================== */

.datestay,

.at_pricestay,

.at_headstay {

    color: #292a2f !important;

    font-weight: 700 !important;
}


/* ===================================================
⑮ ミニカレンダー側のチェックイン日を斜めカットにする

  JS(umino24-airbnb-calendar.js)側で判定して
  付けている .umino-checkin-cell を対象にする
=================================================== */

.ajaxroomcalendar td.umino-checkin-cell.dateavail,

.ajaxroomcalendar td.umino-checkin-cell.daterequest {

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