/* ------------------------------
   基本フォント
------------------------------ */
#booking-package,
#booking-package_calendarPage {
    font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
    color: #333333;
}


/* ------------------------------
   カレンダー曜日・祝日の基本色
------------------------------ */
#booking-package .sun {
    background-color: #fff6f6;
    color: #c94a4a;
}

#booking-package .sat {
    background-color: #f5f9ff;
    color: #3f78c5;
}

#booking-package .nationalHoliday {
    background-color: #fff3f3;
    color: #c94a4a;
}

#booking-package_calendarPage .dateField {
    font-weight: 500;
}


/* ------------------------------
   曜日見出しを日本語化
------------------------------ */
#booking-package_calendarPage .week_slot.mon,
#booking-package_calendarPage .week_slot.tue,
#booking-package_calendarPage .week_slot.wed,
#booking-package_calendarPage .week_slot.thu,
#booking-package_calendarPage .week_slot.fri,
#booking-package_calendarPage .week_slot.sat,
#booking-package_calendarPage .week_slot.sun {
    font-size: 0 !important;
    position: relative;
}

#booking-package_calendarPage .week_slot.mon::after { content: "月"; font-size: 18px; }
#booking-package_calendarPage .week_slot.tue::after { content: "火"; font-size: 18px; }
#booking-package_calendarPage .week_slot.wed::after { content: "水"; font-size: 18px; }
#booking-package_calendarPage .week_slot.thu::after { content: "木"; font-size: 18px; }
#booking-package_calendarPage .week_slot.fri::after { content: "金"; font-size: 18px; }
#booking-package_calendarPage .week_slot.sat::after { content: "土"; font-size: 18px; }
#booking-package_calendarPage .week_slot.sun::after { content: "日"; font-size: 18px; }


/* ------------------------------
   日付選択後の曜日表示を日本語化
------------------------------ */
#booking-package .weekPanel {
    font-size: 0 !important;
}

#booking-package .weekPanel[class~="0_OfWeek"]::after { content: "日"; font-size: 18px; }
#booking-package .weekPanel[class~="1_OfWeek"]::after { content: "月"; font-size: 18px; }
#booking-package .weekPanel[class~="2_OfWeek"]::after { content: "火"; font-size: 18px; }
#booking-package .weekPanel[class~="3_OfWeek"]::after { content: "水"; font-size: 18px; }
#booking-package .weekPanel[class~="4_OfWeek"]::after { content: "木"; font-size: 18px; }
#booking-package .weekPanel[class~="5_OfWeek"]::after { content: "金"; font-size: 18px; }
#booking-package .weekPanel[class~="6_OfWeek"]::after { content: "土"; font-size: 18px; }


/* ------------------------------
   カレンダーの日付セル
   ここが重要：予約可は available_day + data-onclick="1" のみ
------------------------------ */

/* まず全日付セルの疑似表示をリセット */
#booking-package .day_slot::after {
    content: "" !important;
    display: none !important;
}

/* 本当に予約可能な日だけボタンっぽく表示 */
#booking-package .day_slot.available_day[data-onclick="1"]:not(.pastDay) {
    background-color: #ffffff !important;
    cursor: pointer !important;
    position: relative !important;
    box-shadow: inset 0 0 0 2px rgba(16, 163, 127, 0.25) !important;
}

/* 予約可能な日の日付を少し強調 */
#booking-package .day_slot.available_day[data-onclick="1"]:not(.pastDay) .dateField {
    font-weight: 700 !important;
}

/* 予約可能な日だけ「予約可」表示 */
#booking-package .day_slot.available_day[data-onclick="1"]:not(.pastDay)::after {
    content: "予約可" !important;
    display: block !important;
    font-size: 11px;
    line-height: 1.2;
    color: #10a37f;
    margin-top: 4px;
    font-weight: 600;
}

/* 締切・受付終了の日 */
#booking-package .day_slot.closingDay,
#booking-package .day_slot.holidayPanel {
    background-color: #f2f2f2 !important;
    color: #999999 !important;
    cursor: not-allowed !important;
    position: relative !important;
    box-shadow: none !important;
}

#booking-package .day_slot.closingDay .dateField,
#booking-package .day_slot.holidayPanel .dateField {
    color: #999999 !important;
    font-weight: 600 !important;
}

/* 全時間pauseなどで受付できない日だけ「受付終了」 */
#booking-package .day_slot.closingDay::after {
    content: "受付終了" !important;
    display: block !important;
    font-size: 11px;
    line-height: 1.2;
    color: #999999;
    margin-top: 4px;
    font-weight: 600;
}

/* 休業日は「休業」表示 */#booking-package .day_slot.holidayPanel::after {    content: "休業" !important;    display: block !important;    font-size: 11px;    line-height: 1.2;    color: #999999;    margin-top: 4px;    font-weight: 600;}

/* 過去日は押せない感じに */
#booking-package .day_slot.pastDay {
    cursor: default !important;
    opacity: 0.75;
}


/* ------------------------------
   満員・予約不可っぽい日の表示
   Booking Packageがこのクラスを付ける場合用
------------------------------ */
#booking-package_calendarPage .startDateOfFullRoom {
    background-image: repeating-linear-gradient(270deg, #eeeeee 0px 50%, transparent 0% 100%) !important;
    color: #999999 !important;
}

#booking-package_calendarPage .dateOfFullRoom {
    background: #eeeeee !important;
    color: #999999 !important;
}

#booking-package_calendarPage .endDateOfFullRoom {
    background-image: repeating-linear-gradient(90deg, #eeeeee 0px 50%, transparent 0% 100%) !important;
    color: #999999 !important;
}


/* ------------------------------
   日付選択後の左側の日付リスト
------------------------------ */
#booking-package .selectable_day_slot {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 64px !important;
    padding: 8px 6px !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid #dddddd !important;
    font-weight: 600 !important;
}

/* 左側リストの曜日 */
#booking-package .selectable_day_slot .weekPanel {
    flex: 0 0 32px !important;
    width: 32px !important;
    text-align: center !important;
    font-size: 0 !important;
}

#booking-package .selectable_day_slot .weekPanel::after {
    display: block !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
}

/* 左側リストの日付数字 */
#booking-package .selectable_day_slot > div:last-child {
    flex: 0 0 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    text-align: center !important;
    font-size: 20px !important;
}

/* 選択中の日付 */
#booking-package .selectable_day_slot.selected_day_slot {
    background-color: #e9f7f2 !important;
    color: #333333 !important;
    box-shadow: inset 4px 0 0 #10a37f !important;
}

#booking-package .selectable_day_slot.selected_day_slot * {
    color: #333333 !important;
}

/* 予約できる日 */
#booking-package .selectable_day_slot:not(.closed):not([data-status="0"]) {
    cursor: pointer !important;
}

/* 予約できない日 */
#booking-package .selectable_day_slot.closed,
#booking-package .selectable_day_slot[data-status="0"] {
    background-color: #f2f2f2 !important;
    color: #aaaaaa !important;
    cursor: not-allowed !important;
}

#booking-package .selectable_day_slot.closed *,
#booking-package .selectable_day_slot[data-status="0"] * {
    color: #aaaaaa !important;
}


/* ------------------------------
   時間枠
------------------------------ */
#booking-package .selectable_time_slot.closed,
.selectable_time_slot.closed,
div.selectable_time_slot.closed,
div[data-status="0"].selectable_time_slot {
    background-color: #f2f2f2 !important;
    color: #999999 !important;
    cursor: not-allowed !important;
}

#booking-package .selectable_time_slot.closed .timeSlot,
.selectable_time_slot.closed .timeSlot,
div.selectable_time_slot.closed span.timeSlot,
div[data-status="0"].selectable_time_slot span.timeSlot {
    color: #999999 !important;
    font-weight: 400 !important;
}

#booking-package .selectable_time_slot.closed:hover,
.selectable_time_slot.closed:hover,
div[data-status="0"].selectable_time_slot:hover {
    background-color: #f2f2f2 !important;
    color: #999999 !important;
}


/* ------------------------------
   サービス選択カード
------------------------------ */
#booking-package .selectable_service_slot {
    cursor: pointer !important;
    background-color: #ffffff !important;
    border: 2px solid #10a37f !important;
    border-radius: 8px !important;
    padding: 14px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
    box-sizing: border-box !important;
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    margin: 8px auto !important;
}

#booking-package .selectable_service_slot .service_name_cost span {
    font-weight: 700 !important;
}

/* 「時間を選択する」表示 */
#booking-package .selectable_service_slot::after {
    content: "時間を選択する";
    display: block;
    box-sizing: border-box !important;
    width: 100% !important;
    margin-top: 10px;
    padding: 8px 10px;
    background-color: #10a37f;
    color: #ffffff;
    text-align: center;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
}


/* ------------------------------
   日付選択後のサービス説明エリア
------------------------------ */
#booking-package_calendarPage .courseName,
#booking-package_calendarPage .serviceName {
    font-weight: 600;
}

#booking-package_calendarPage .courseCost,
#booking-package_calendarPage .serviceCost {
    font-size: 16px;
    font-weight: 500;
}

#booking-package_calendarPage .courseDescription,
#booking-package_calendarPage .serviceDescription {
    font-size: 14px;
    line-height: 1.6;
}