#booking-package .sun {
    color: rgb(247, 0, 0);
}

#booking-package .mon {
    
}

#booking-package .tue {
    
}

#booking-package .wed {
    
}

#booking-package .thu {
    
}

#booking-package .fri {
    
}

#booking-package .sat {
    color: rgb(0, 127, 219)
}

#booking-package .nationalHoliday {
    
}

#booking-package_calendarPage .dateField {
    /**
    background-color: #0f9b79;
    color: #fff;
    font-weight: 400;
    **/
}

.start_booking_package {
    width: 90%;
    max-width: 1300px;
    margin: 0 auto
}

#booking-package_calendarPage .startDateOfFullRoom {
    background-image: repeating-linear-gradient(270deg, #ff8989 0px 50%, transparent 0% 100%);
}

#booking-package_calendarPage .dateOfFullRoom {
    background: #ff8989;
}

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

/* custom */
#booking-package_durationStay *,
#booking-package_inputFormPanel * {
    box-sizing: border-box !important;
}
#booking-package_durationStay .bookingDetailsTitle {
    border: 0 !important;
}
#booking-package_durationStay .row {
    padding: 0 8px .8em !important;
    border: 0 !important;
}
#booking-package_durationStay .name {
    position: relative;
    width: calc(100% + 16px) !important;
    margin: 0 0 .5em -8px;
    padding: .5em;
    border-bottom: 2px solid rgb(200,200,200);
    background: white;
    font-weight: bold !important;
}
#checkInDate,
#checkOutDate {
    letter-spacing: 1px;
    text-indent: 1px;
}
#booking-package_durationStay .clearLabel {
    display: inline-block;
    margin-right: -8px;
    padding: .5em 1em;
    border: 1px solid rgb(51,51,51);
    color: currentColor !important;
    font-size: 12px;
    transform: translateY(-.4em);
}
#booking-package_durationStay .guests_row {
    padding: 0 0 .8em !important;
}
#booking-package_durationStay .guestsTitle,
.options_in_panel .optionsTitle {
    display: none;
}
#booking-package_durationStay select {
    padding: .6em .5em !important;
    outline: none;
}
.form_select,
.form_select::picker(select) {
    border-radius: 2px;
    appearance: base-select;
    transition: background .3s;
}
.form_select::picker(select) {
    box-shadow: 0 0 5px rgba(0,0,0,.2);
}
.form_select:hover,
.form_select option:hover {
    background: rgb(231, 234, 238);
}
#booking-package_durationStay select option {
    padding: .5em;
    cursor: pointer;
}
#guestsListPanel .options_row {
    padding: 0 0 .5em !important;
}
#booking-package_inputFormPanel .description,
#booking-package_durationStay .description {
    font-size: 13px;
}
.options_row:has(#optionsValue_0_3) .name::after,
.options_row:has(#optionsValue_0_4) .name::after,
.options_row:has(#optionsValue_0_5) .name::after,
.options_row:has(#optionsValue_0_6) .name::after,
.options_row:has(#optionsValue_0_7) .name::after,
.options_row:has(#optionsValue_0_8) .name::after {
    content: "お料理追加";
    margin-left: .5em;
    font-weight: normal;
    font-size: 12px;
}
#booking-package_durationStay .row.errorPanel {
    margin-bottom: .8em;
}

#booking-package_calendarPage {
    position: sticky;
    top: 70px
}

.summaryTitle {
    display: inline-block;
    margin-top: .2em;
    font-size: 13px
}
summaryValue {
    display: inline-block;
    font-weight: bold;
    font-size: 16px
}
.summaryNightsValue {
    color: currentColor !important;
    font-weight: bold
}
#bookingPrice.value {
    font-weight: bold;
    font-size: 1.1em;
    text-align: right !important
}
#booking-package_durationStay button,
#booking-package_inputFormPanel .book_now_button {
    padding: .8em 1em;
    border-radius: 2px;
    border: 0;
    background: rgb(224, 232, 236);
    color: rgb(51,51,51);
    font-size: 14px !important;
    cursor: pointer;
}
#booking-package_inputFormPanel .return_form_button {
    padding: .8em 1em;
    border-radius: 2px;
    border: 1px solid rgb(200,200,200);
    background: transparent;
    font-size: 14px !important
}

#booking-package_calendarPage .available_day {
    transition: background .3s ease-in-out
}

/* 色分け */
#booking-package_calendarPage .available_day:hover,
#booking-package_calendarPage .selected_day_slot {
    background: rgb(200, 223, 236) !important
}

/* form */
#booking-package input[type=text] {
    padding: .6em .5em;
    outline: none;
    font-size: 16px;
}
#booking-package_inputFormPanel .title_in_form {
    font-weight: bold !important;
    font-size: 14px !important
}

#booking_package_verificationCodeContent input {
    padding: 1em;
    font-size: 22px
}
#booking_package_verificationCodeContent button {
    padding: 1em;
    border-radius: 2px;
    border: 0;
    background: rgb(56,119,1);
    color: white
}
#booking-package_inputFormPanel .row {
    border: 0 !important
}
#booking-package input[type=text],
#booking-package textarea,
#booking-package-user-form input[type=text],
#booking-package-user-form input[type=password],
#booking-package-user-form textarea,
#booking-package-loginform input[type=text],
#booking-package-loginform input[type=password],
#booking-package-loginform textarea,
#booking-package-user-edit-form input[type=text],
#booking-package-user-edit-form input[type=password], 
#booking-package-user-edit-form textarea {
    background: rgb(250,250,250)
}
#booking-package input[type=text]:focus,
#booking-package textarea:focus,
#booking-package-user-form input[type=text]:focus,
#booking-package-user-form input[type=password]:focus,
#booking-package-user-form textarea:focus,
#booking-package-loginform input[type=text]:focus,
#booking-package-loginform input[type=password]:focus,
#booking-package-loginform textarea:focus,
#booking-package-user-edit-form input[type=text]:focus,
#booking-package-user-edit-form input[type=password]:focus, 
#booking-package-user-edit-form textarea:focus {
    border-color: rgb(51,51,51);
    background: white
}

/* safari対策 */
.is-webkit #booking-package_durationStay select {
    padding: 1em !important;
    background: white !important;
    font-size: 16px;
    -webkit-appearance: none;
    appearance: none;
}

@media screen and (min-width: 920px) {
    #paymentPanel.cartPanel {
        width: calc(50% - 6px);
        margin-left: auto;
    }
    #nextAndReturnPanel.bottomBarPanel {
        width: calc(50% - 6px);
        margin-top: -3.5em !important
    }
}

#booking-package_inputFormPanel .title_in_form,
#booking-package_myBookingDetails .selectedDate {
    z-index: 1 !important
}
#booking-package_inputFormPanel .book_now_button,
#booking-package_inputFormPanel .next_page_button,
#booking-package-subscription_form .book_now_button,
#booking-package_inputFormPanel .return_form_button {
    height: 4em
}
#booking-package button {
    margin: 0 !important
}

/* dashboard calendar */
.day_slot.available_day:has(.remainderPanel) {
  background: red
}

#booking-package_calendarPage::after {
    content: "";
    display: block;
    width: 100%;
    max-width: 250px;
    aspect-ratio: 1105/572;
    margin: 10px 0;
    background: url(/wp-content/themes/resola/assets/images/calendar-supplement.webp) top left /contain no-repeat
}

/* 祝前日 */
.holiday-eve,
.special-day {
    position: relative
}
.available_day.holiday-eve,
.available_day.fri {
    background: rgb(255, 249, 226)
}
.available_day.sat {
    background: rgb(251, 233, 252)
}
.available_day.special-day {
    background: rgb(175, 232, 152)
}
.holiday-eve-label,
.special-day-label {
    display: inline-block;
    position: absolute;
    bottom: 5px;
    left: 50%;
    padding: .3em 1em;
    border-radius: 100px;
    background: white;
    font-size: 11px;
    white-space: nowrap;
    transform: translateX(-50%)
}

/* ============================================================================================
	FUGU PLAN OUT OF SEASON STYLING
============================================================================================ */

/* 河豚プラン期間外日付のグレーアウト */
#booking-calendar .fugu-out-of-season {
	background-color: #f5f5f5 !important;
	color: #999 !important;
	opacity: 0.5 !important;
	cursor: not-allowed !important;
	position: relative;
}

/* 期間外日付のホバー効果を無効化 */
#booking-calendar .fugu-out-of-season:hover {
	background-color: #f5f5f5 !important;
	color: #999 !important;
	transform: none !important;
	opacity: 0.6 !important;
}

/* 期間外日付のクリック効果を無効化 */
#booking-calendar .fugu-out-of-season:active {
	background-color: #f5f5f5 !important;
	color: #999 !important;
	transform: none !important;
}

/* 期間外マーク（斜線パターン）*/
#booking-calendar .fugu-out-of-season::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: repeating-linear-gradient(
		45deg,
		transparent,
		transparent 2px,
		rgba(0, 0, 0, 0.1) 2px,
		rgba(0, 0, 0, 0.1) 4px
	);
	pointer-events: none;
	z-index: 1;
}

/* ツールチップスタイル */
#booking-calendar .fugu-out-of-season:hover::after {
	content: attr(title);
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.9);
	color: white;
	padding: 8px 12px;
	border-radius: 4px;
	font-size: 12px;
	white-space: nowrap;
	z-index: 1000;
	pointer-events: none;
	margin-bottom: 5px;
}
.list .stayAndOptionsPanel:nth-of-type(2)::after {
    content: "(お子様分お料理追加数)";
    font-size: 12px
}
#collectionOptionsPanel_0 .options_row:has(#optionsValue_0_3) .name::before,
#collectionOptionsPanel_0 .options_row:has(#optionsValue_0_4) .name::before,
#collectionOptionsPanel_0 .options_row:has(#optionsValue_0_5) .name::before,
#collectionOptionsPanel_0 .options_row:has(#optionsValue_0_6) .name::before,
#collectionOptionsPanel_0 .options_row:has(#optionsValue_0_7) .name::before,
#collectionOptionsPanel_0 .options_row:has(#optionsValue_0_8) .name::before {
    content: "";
    display: inline-block;
    width: 30px;
    aspect-ratio: 514/512;
    margin-right: 5px;
    vertical-align: middle;
    background: url(https://re-sola-villa.com/wp-content/uploads/2025/07/resola-booking-child.webp) center center /cover no-repeat
}
#collectionOptionsPanel_0 .options_row:has(#optionsValue_0_9) .name::before {
    content: "";
    display: inline-block;
    width: 30px;
    aspect-ratio: 514/512;
    margin-right: 5px;
    vertical-align: middle;
    background: url(https://re-sola-villa.com/wp-content/uploads/2025/07/bbq.webp) center center /cover no-repeat
}

/* 7/1〜8/31 */
[data-month="7"].available_day.sun,
[data-month="7"].available_day.mon,
[data-month="7"].available_day.tue,
[data-month="7"].available_day.wed,
[data-month="7"].available_day.thu,

[data-month="8"].available_day.sun,
[data-month="8"].available_day.mon,
[data-month="8"].available_day.tue,
[data-month="8"].available_day.wed,
[data-month="8"].available_day.thu {
    background: rgb(255, 249, 226)
}
[data-month="7"].available_day.fri,
[data-month="7"].available_day.sat,
[data-month="7"].available_day.holiday-eve,

[data-month="8"].available_day.fri,
[data-month="8"].available_day.sat,
[data-month="8"].available_day.holiday-eve {
    background: rgb(251, 233, 252)
}
[data-month="8"].available_day.special-day {
    background: rgb(175, 232, 152)
}

#optionsSelect_0_3 .description,
#optionsSelect_0_4 .description,
#optionsSelect_0_5 .description,
#optionsSelect_0_6 .description,
#optionsSelect_0_7 .description,
#optionsSelect_0_8 .description {
    padding: .5em;
    background: rgb(235, 255, 182)
}