/* ============================================================================================
	Booking Package 上書き用（テーマ）
	- プラグインの style より後に読み込む（functions.php の hightime_enqueue_booking_package_overrides）
	- セレクタは #reservation / .hightime-fitness-reservation で囲み、特異性を上げて !important を減らす
	- どうしても勝てない場合のみこのファイル内で !important を検討する
============================================================================================ */
#booking-package,
#booking-package_servicePage,
#booking-package_servicePage .title,
#booking-package_serviceDetails,
#booking-package_calendarPage,
#booking-package_schedulePage,
#booking-package_schedulePage .topPanel,
#booking-package_schedulePage .selectedDate,
#booking-package_schedulePage .bottomPanel,
#reservationHeader {
	background: var(--wp--preset--color--base) !important;
}

#booking-package_servicePage .list {
	display: flex;
	flex-flow: column;
	gap: 1em
}
#booking-package .selectable_service_slot {
	border-radius: 4px;
	border: 1px solid var(--wp--preset--color--border) !important
}
#booking-package_servicePage .borderColor {
	border: 0 !important
}
#booking-package_servicePage .serviceCost {
	padding: 0 !important
}
#booking-package_serviceDetails .addedService {
	display: flex !important;
	flex-flow: wrap;
	justify-content: space-between;
	align-items: center
}
#booking-package_servicePage .serviceCost {
	float: none !important;
	margin-left: auto !important
}

#booking-package_serviceDetails .title,
#booking-package_servicePage .title,
#booking-package_serviceDetails .name {
	font-size: 14px !important
}
#booking-package_serviceDetails .value {
	font-weight: bold
}
#booking-package_servicePage .selected_element {
	border-left: 10px solid green !important
}
.selectable_service_slot {
	display: flex !important;
	flex-flow: wrap;
	justify-content: space-between;
	align-items: center;
	gap: .5em
}
#booking-package .selectable_service_slot
.descriptionOfService {
	width: 100%
}
.service_name_cost,
.serviceCost.maximumAndMinimum {
	font-weight: bold;
	font-size: 1.1em
}
.descriptionOfService {
	font-size: 14px !important
}
#booking-package_schedulePage .selectable_day_slot,
#booking-package_schedulePage .selectable_service_slot,
#booking-package_schedulePage .selectable_time_slot,
#booking-package_servicePage .selectable_service_slot {
	padding: 1em !important
}

/* confirmation */
#booking-package_inputFormPanel {
	display: flex;
	flex-flow: wrap;
	justify-content: center;
	align-items: center;
	gap: 1em;
	background: var(--wp--preset--color--base) !important
}
#reservationHeader {
	width: 100%;
	font-size: 14px !important;
	text-align: center
}
#booking-package input[type=text] {
	padding: .6em .5em !important;
	font-size: 16px !important
}
#paymentPanel.cartPanel,
#nextAndReturnPanel.bottomBarPanel {
	width: calc(100% /3) !important;
}
#paymentPanel.cartPanel {
	order: 100;
	margin-top: 0 !important
}

.loader {
    display: none !important;
}

#booking-package_servicePage .title {
	z-index: 1
}


/*
	表示しないサービス: [data-service] のIDを指定（Booking 管理のコース key = DOM の data-service）。
*/

/* booking package id - テスト 3 - 4 */

/*
フィットネス 初回限定 60分 - テスト 1 - 6
フィットネス 60分 - テスト 2 - 7
フィットネス 40分 - テスト 3 - 8
*/
/*
ピラティス 初回限定 60分 - テスト 4 - 9
ピラティス 60分 - テスト 5 - 10
ピラティス 40分 - テスト 6 - 11
*/
/*
エステ 初回限定 60分 - テスト 7 - 13
エステ 60分 - テスト 8 - 14
エステ 40分 - テスト 9 - 15
*/
/*
Infinity サーフパンツ試着 30分 - テスト 10 - 16
*/

.selectable_service_slot {
	position: relative
}

/* テスト環境 */
/* フィットネス
#reservation.hightime-fitness-reservation .selectable_service_slot[data-service="4"],
#reservation.hightime-fitness-reservation .selectable_service_slot[data-service="5"],
#reservation.hightime-fitness-reservation .selectable_service_slot[data-service="6"],
#reservation.hightime-fitness-reservation .selectable_service_slot[data-service="7"],
#reservation.hightime-fitness-reservation .selectable_service_slot[data-service="8"],
#reservation.hightime-fitness-reservation .selectable_service_slot[data-service="9"],
#reservation.hightime-fitness-reservation .selectable_service_slot[data-service="15"],
#reservation.hightime-fitness-reservation .selectable_service_slot[data-service="16"],
#reservation.hightime-fitness-reservation .selectable_service_slot[data-service="17"],
#reservation.hightime-fitness-reservation .selectable_service_slot[data-service="18"],
#reservation.hightime-fitness-reservation .selectable_service_slot[data-service="19"] {
	display: none !important
} */
/* ピラティス: メニューパターンは service 4〜6 のみ想定
#reservation.hightime-pilates-reservation .selectable_service_slot[data-service="1"],
#reservation.hightime-pilates-reservation .selectable_service_slot[data-service="2"],
#reservation.hightime-pilates-reservation .selectable_service_slot[data-service="3"],
#reservation.hightime-pilates-reservation .selectable_service_slot[data-service="7"],
#reservation.hightime-pilates-reservation .selectable_service_slot[data-service="8"],
#reservation.hightime-pilates-reservation .selectable_service_slot[data-service="9"],
#reservation.hightime-pilates-reservation .selectable_service_slot[data-service="10"],
#reservation.hightime-pilates-reservation .selectable_service_slot[data-service="15"],
#reservation.hightime-pilates-reservation .selectable_service_slot[data-service="16"],
#reservation.hightime-pilates-reservation .selectable_service_slot[data-service="17"],
#reservation.hightime-pilates-reservation .selectable_service_slot[data-service="18"],
#reservation.hightime-pilates-reservation .selectable_service_slot[data-service="19"] {
	display: none !important
} */
/* エステ: メニューパターンは service 7〜9 のみ想定
#reservation.hightime-spa-reservation .selectable_service_slot[data-service="1"],
#reservation.hightime-spa-reservation .selectable_service_slot[data-service="2"],
#reservation.hightime-spa-reservation .selectable_service_slot[data-service="3"],
#reservation.hightime-spa-reservation .selectable_service_slot[data-service="4"],
#reservation.hightime-spa-reservation .selectable_service_slot[data-service="5"],
#reservation.hightime-spa-reservation .selectable_service_slot[data-service="6"],
#reservation.hightime-spa-reservation .selectable_service_slot[data-service="10"] {
	display: none !important
}
#reservation.hightime-spa-reservation .selectable_service_slot[data-service="15"] {
	margin-top: calc(3em - 9px) !important
}
#reservation.hightime-spa-reservation .selectable_service_slot[data-service="15"]::before {
	content: "";
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	bottom: calc(100% + 4px);
	left: 0;
	width: 100%;
	height: 26px;
	border-top: 2px solid currentColor;
	font-weight: bold;
	font-size: var(--wp--preset--font-size--xx-small)
} */
/* all
.hightime-all-reservation .selectable_service_slot[data-service="1"],
.hightime-all-reservation .selectable_service_slot[data-service="4"],
.hightime-all-reservation .selectable_service_slot[data-service="7"] {
	margin-top: calc(3em - 9px) !important
}
.hightime-all-reservation .selectable_service_slot[data-service="1"]::before,
.hightime-all-reservation .selectable_service_slot[data-service="4"]::before,
.hightime-all-reservation .selectable_service_slot[data-service="7"]::before {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	bottom: calc(100% + 4px);
	left: 0;
	width: 100%;
	height: 3em;
	border-top: 2px solid currentColor;
	font-weight: bold;
	font-size: var(--wp--preset--font-size--xx-small)
}
.hightime-all-reservation .selectable_service_slot[data-service="1"]::before {
	content: "パーソナルフィットネス"
}
.hightime-all-reservation .selectable_service_slot[data-service="4"]::before {
	content: "ピラティス"
}
.hightime-all-reservation .selectable_service_slot[data-service="7"]::before {
	content: "エステ"
} */

/* 本番 */
/* フィットネス */
#reservation.hightime-fitness-reservation .selectable_service_slot[data-service="9"],
#reservation.hightime-fitness-reservation .selectable_service_slot[data-service="10"],
#reservation.hightime-fitness-reservation .selectable_service_slot[data-service="11"],
#reservation.hightime-fitness-reservation .selectable_service_slot[data-service="13"],
#reservation.hightime-fitness-reservation .selectable_service_slot[data-service="14"],
#reservation.hightime-fitness-reservation .selectable_service_slot[data-service="15"],
#reservation.hightime-fitness-reservation .selectable_service_slot[data-service="21"],
#reservation.hightime-fitness-reservation .selectable_service_slot[data-service="22"],
#reservation.hightime-fitness-reservation .selectable_service_slot[data-service="23"],
#reservation.hightime-fitness-reservation .selectable_service_slot[data-service="24"],
#reservation.hightime-fitness-reservation .selectable_service_slot[data-service="25"],
#reservation.hightime-fitness-reservation .selectable_service_slot[data-service="27"],
#reservation.hightime-fitness-reservation .selectable_service_slot[data-service="28"],
#reservation.hightime-fitness-reservation .selectable_service_slot[data-service="29"] {
	display: none !important
}
/* フィットネスセパレータ */
#reservation.hightime-fitness-reservation .selectable_service_slot[data-service="6"],
#reservation.hightime-fitness-reservation .selectable_service_slot[data-service="26"] {
	margin-top: calc(3em - 9px) !important
}
#reservation.hightime-fitness-reservation .selectable_service_slot[data-service="6"]::before,
#reservation.hightime-fitness-reservation .selectable_service_slot[data-service="26"]::before {
	content: "";
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	bottom: calc(100% + 4px);
	left: 0;
	width: 100%;
	height: 26px;
	border-top: 2px solid currentColor;
	font-weight: bold;
	font-size: var(--wp--preset--font-size--xx-small)
}
/* ピラティス */
#reservation.hightime-pilates-reservation .selectable_service_slot[data-service="6"],
#reservation.hightime-pilates-reservation .selectable_service_slot[data-service="7"],
#reservation.hightime-pilates-reservation .selectable_service_slot[data-service="8"],
#reservation.hightime-pilates-reservation .selectable_service_slot[data-service="16"],
#reservation.hightime-pilates-reservation .selectable_service_slot[data-service="13"],
#reservation.hightime-pilates-reservation .selectable_service_slot[data-service="14"],
#reservation.hightime-pilates-reservation .selectable_service_slot[data-service="15"],
#reservation.hightime-pilates-reservation .selectable_service_slot[data-service="16"],
#reservation.hightime-pilates-reservation .selectable_service_slot[data-service="21"],
#reservation.hightime-pilates-reservation .selectable_service_slot[data-service="22"],
#reservation.hightime-pilates-reservation .selectable_service_slot[data-service="23"],
#reservation.hightime-pilates-reservation .selectable_service_slot[data-service="24"],
#reservation.hightime-pilates-reservation .selectable_service_slot[data-service="25"],
#reservation.hightime-pilates-reservation .selectable_service_slot[data-service="26"],
#reservation.hightime-pilates-reservation .selectable_service_slot[data-service="28"],
#reservation.hightime-pilates-reservation .selectable_service_slot[data-service="29"] {
	display: none !important
}
/* ピラティスセパレータ */
#reservation.hightime-pilates-reservation .selectable_service_slot[data-service="27"] {
	margin-top: calc(3em - 9px) !important
}
#reservation.hightime-pilates-reservation .selectable_service_slot[data-service="27"]::before {
	content: "";
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	bottom: calc(100% + 4px);
	left: 0;
	width: 100%;
	height: 26px;
	border-top: 2px solid currentColor;
	font-weight: bold;
	font-size: var(--wp--preset--font-size--xx-small)
}
/* エステ */
#reservation.hightime-spa-reservation .selectable_service_slot[data-service="6"],
#reservation.hightime-spa-reservation .selectable_service_slot[data-service="7"],
#reservation.hightime-spa-reservation .selectable_service_slot[data-service="8"],
#reservation.hightime-spa-reservation .selectable_service_slot[data-service="16"],
#reservation.hightime-spa-reservation .selectable_service_slot[data-service="9"],
#reservation.hightime-spa-reservation .selectable_service_slot[data-service="10"],
#reservation.hightime-spa-reservation .selectable_service_slot[data-service="11"],
#reservation.hightime-spa-reservation .selectable_service_slot[data-service="26"],
#reservation.hightime-spa-reservation .selectable_service_slot[data-service="27"] {
	display: none !important
}
/* エステセパレータ */
#reservation.hightime-spa-reservation .selectable_service_slot[data-service="21"],
#reservation.hightime-spa-reservation .selectable_service_slot[data-service="28"] {
	margin-top: calc(3em - 9px) !important
}
#reservation.hightime-spa-reservation .selectable_service_slot[data-service="21"]::before,
#reservation.hightime-spa-reservation .selectable_service_slot[data-service="28"]::before {
	content: "";
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	bottom: calc(100% + 4px);
	left: 0;
	width: 100%;
	height: 26px;
	border-top: 2px solid currentColor;
	font-weight: bold;
	font-size: var(--wp--preset--font-size--xx-small)
}

/* all */
.hightime-all-reservation .selectable_service_slot[data-service="16"],
.hightime-all-reservation .selectable_service_slot[data-service="6"],
.hightime-all-reservation .selectable_service_slot[data-service="9"],
.hightime-all-reservation .selectable_service_slot[data-service="13"] {
	margin-top: calc(3em - 9px) !important
}
.hightime-all-reservation .selectable_service_slot[data-service="16"]::before,
.hightime-all-reservation .selectable_service_slot[data-service="6"]::before,
.hightime-all-reservation .selectable_service_slot[data-service="9"]::before,
.hightime-all-reservation .selectable_service_slot[data-service="13"]::before {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	bottom: calc(100% + 4px);
	left: 0;
	width: 100%;
	height: 3em;
	border-top: 2px solid currentColor;
	font-weight: bold;
	font-size: var(--wp--preset--font-size--xx-small)
}
.hightime-all-reservation .selectable_service_slot[data-service="16"]::before {
	content: "Infinity"
}
.hightime-all-reservation .selectable_service_slot[data-service="6"]::before {
	content: "パーソナルフィットネス"
}
.hightime-all-reservation .selectable_service_slot[data-service="9"]::before {
	content: "ピラティス"
}
.hightime-all-reservation .selectable_service_slot[data-service="13"]::before {
	content: "エステ"
}

/*
	エステ予約（.hightime-spa-reservation）のみ:
	Booking のカレンダーは .day_slot が兄弟順＝月内の日付順。.today の直後3マスまでをリードタイム対象とし、
	4マス目以降の .available_day を打ち消す。
	プラグインが既に休業（.closingDay 等・.available_day なし）に載せている背景色に、
	さらに opacity を重ねないよう、リード用スタイルは .available_day のマスのみに適用する。
*/
#reservation.hightime-spa-reservation #booking-package_calendarPage .day_slot.today ~ .day_slot.available_day {
	opacity: .45;
	pointer-events: none;
	cursor: not-allowed !important;
}
#reservation.hightime-spa-reservation #booking-package_calendarPage .day_slot.today ~ .day_slot ~ .day_slot ~ .day_slot.available_day {
	opacity: 1;
	pointer-events: auto;
	cursor: pointer !important;
}

/*
	総合予約（.hightime-all-reservation）:
	エステ系が選択されているときだけ assets/js/booking-package.js が
	.hightime-all-reservation--spa-3day-lead を付与する。
	対象サービス key は inc/booking-package-service-rules.php の
	hightime_bp_service_ids_requiring_3day_lead()（サーバー側3日前ルールと同一配列）。
*/
.hightime-all-reservation.hightime-all-reservation--spa-3day-lead #booking-package_calendarPage .day_slot.today ~ .day_slot.available_day {
	opacity: .45;
	pointer-events: none;
	cursor: not-allowed !important;
}
.hightime-all-reservation.hightime-all-reservation--spa-3day-lead #booking-package_calendarPage .day_slot.today ~ .day_slot ~ .day_slot ~ .day_slot.available_day {
	opacity: 1;
	pointer-events: auto;
	cursor: pointer !important;
}

#booking-package_servicePage .selectable_option_element {
	position: relative;
	justify-content: flex-start !important;
	align-items: center !important;
	gap: 1em;
	font-size: 14px !important
}
#booking-package_servicePage .selectable_option_element::before {
	content: "";
	display: block;
	width: 15px;
	height: 15px;
	border: 1px solid currentColor;
	transition: .3s ease-in-out
}
#booking-package_servicePage .selected_element .selected_option_element::after {
	content: "";
    display: block;
    position: absolute;
    top: -4px;
    left: 11px;
    width: 14px;
    height: 25px;
    border-right: 4px solid green;
    border-bottom: 4px solid green;
    transform: rotate(45deg)
}
#booking-package_servicePage .selected_option_element {
	padding-left: 10px !important;
	border: 0 !important
}