@charset "UTF-8";

/* =========================================================================
   Event Booking Package Test - Layout & Design
   ========================================================================= */

/* Layout: 2 Columns */
.event-layout-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 40px;
}

.event-main-content {
    width: 60%;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 60%;
    flex: 1 1 60%;
    /* Transition to allow smooth full-width expansion */
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.event-booking-sidebar {
    width: 35%;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 35%;
    flex: 0 0 35%;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* Sticky behavior for sidebar */
.booking-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
    /* Basic Card Styling based on constraints */
    background-color: #f2eee8;
    border-radius: 12px;
    padding: 20px;
    -webkit-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* 
  Booking Package Content Overrides 
  !important is heavily used because booking plugins often use inline styles or specific IDs 
*/

/* 1. Header and Year/Month text to 25px */
.booking-sticky * {
    font-family: inherit;
}

.booking-sticky .ui-datepicker-title,
.booking-sticky .booking-package-month-year,
.booking-sticky .bp-month-year,
/* common class names */
.booking-sticky .bp-calendar-header h2,
.booking-sticky .bp-calendar-header {
    font-size: 25px !important;
    font-weight: bold;
    color: #4a453e;
}

/* 2. White circular prev/next arrows & hide month text in buttons */
#booking-package_calendarPage .ui-datepicker-prev,
#booking-package_calendarPage .ui-datepicker-next,
#booking-package_calendarPage button.bp-prev,
#booking-package_calendarPage button.bp-next,
#booking-package_calendarPage button#last-month,
#booking-package_calendarPage button#next-month,
#booking-package_calendarPage .bp-calendar-button {
    background-color: #fff !important;
    border-radius: 50% !important;
    border: none !important;
    width: 40px !important;
    height: 40px !important;
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
    cursor: pointer;
    color: #4a453e !important;
    font-size: 20px !important;
    /* To keep the bracket icon size */
}

/* Hide the text node inside the button if any, except material-icons */
#booking-package_calendarPage button#next-month span:not(.material-icons),
#booking-package_calendarPage button#last-month span:not(.material-icons) {
    display: none !important;
}

/* =========================================================================
   2.5. Calendar Header & Custom Arrow Labels
   ========================================================================= */
/* カレンダーヘッダー全体の背景色 */
#booking-package_calendarPage .calendarHeader {
    background-color: #f2eee8 !important;
    border-radius: 8px !important;
    padding: 4px 8px !important;
}

/* label型の矢印（arrowLeft / arrowRight） */
#booking-package_calendarPage .arrowLeft,
#booking-package_calendarPage .arrowRight {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    cursor: pointer;
}

/* 月の数字（<span>05</span>）を非表示 */
#booking-package_calendarPage .arrowLeft>span,
#booking-package_calendarPage .arrowRight>span {
    display: none !important;
}

/* 矢印アイコン（.arrowFont）に白丸背景＋小さめサイズ */
#booking-package_calendarPage .arrowLeft .arrowFont,
#booking-package_calendarPage .arrowRight .arrowFont {
    font-size: 20px !important;
    width: 32px !important;
    height: 32px !important;
    background-color: #fff !important;
    border-radius: 50% !important;
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08) !important;
    color: #4a453e !important;
}

/* 3. Calendar Day Header Colors (Japanese replacement) */
#booking-package_calendarPage .week_slot {
    font-weight: bold !important;
    padding-bottom: 10px !important;
    font-size: 0 !important;
    /* Hide original english dates */
}

#booking-package_calendarPage .week_slot::after {
    font-size: 14px !important;
    display: block !important;
}

#booking-package_calendarPage .week_slot.sun::after {
    content: "日";
    color: #d32f2f !important;
}

#booking-package_calendarPage .week_slot.mon::after {
    content: "月";
    color: #333 !important;
}

#booking-package_calendarPage .week_slot.tue::after {
    content: "火";
    color: #333 !important;
}

#booking-package_calendarPage .week_slot.wed::after {
    content: "水";
    color: #333 !important;
}

#booking-package_calendarPage .week_slot.thu::after {
    content: "木";
    color: #333 !important;
}

#booking-package_calendarPage .week_slot.fri::after {
    content: "金";
    color: #333 !important;
}

#booking-package_calendarPage .week_slot.sat::after {
    content: "土";
    color: #1976d2 !important;
}

/* 4. Rounded border box for calendar grid & white background inside */
#booking-package_calendarPage .calendar {
    background-color: #fff !important;
    border: 1px solid #e0d9d0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

#booking-package,
#booking-package_calendarPage table,
#booking-package_calendarPage .bp-calendar-container,
#booking-package_calendarPage table td,
#booking-package_calendarPage table th {
    background-color: #fff !important;
    border-radius: 8px !important;
    border: none !important;
    /* Remove borders */
    border-color: transparent !important;
}

/* 5. Unavailable (No reservation) days: white background, #999999 text */
/* Specific plugin classes for disabled/past days */
#booking-package_calendarPage td.pastDay,
#booking-package_calendarPage .pastDay,
#booking-package_calendarPage td.closingDay,
#booking-package_calendarPage .closingDay,
#booking-package_calendarPage td.bp-disable,
#booking-package_calendarPage td.disable,
#booking-package_calendarPage td[data-status="disable"],
#booking-package_calendarPage td.unavailable,
#booking-package_calendarPage td.bp-past-day {
    background-color: #fff !important;
    color: #999999 !important;
}

#booking-package_calendarPage td {
    padding: 10px 5px !important;
    text-align: center !important;
}

/* 〇、△、×等の記号と、横線の位置を1em上に上げる */
#booking-package_calendarPage .symbolPanel,
#booking-package_calendarPage .numberInsteadOfSymbols {
    position: relative !important;
    top: -1em !important;
    display: inline-block !important;
    /* inline要素でtransform類が効かない影響を回避 */
}

/* 記号自体（丸や三角）の大きさを1.3emにする */
#booking-package_calendarPage .symbolPanel {
    font-size: 1.3em !important;
}

/* 予約不可の日に「ー」を表示 */
#booking-package_calendarPage .pastDay::after,
#booking-package_calendarPage .closingDay::after,
#booking-package_calendarPage td.disable::after,
#booking-package_calendarPage td[data-status="disable"]::after,
#booking-package_calendarPage td.unavailable::after {
    content: "ー" !important;
    display: block !important;
    color: #999999 !important;
    font-size: 16px !important;
    font-weight: normal !important;
    position: relative !important;
    /* 要素の相対移動を用いる */
    top: -1em !important;
    margin-top: 0 !important;
}

/* =========================================================================
   6. Time Selection Screen Weekdays (Japanese replacement via JS)
   ========================================================================= */
/* この部分にあったCSSによる英語曜日の強制非表示・日本語乗せは、JavaScriptによる完全なテキスト書き換えへ移行したため削除しました。 */

/* =========================================================================
   6.5. Schedule Page Inner Column Layout (Days vs Time Slots)
   ========================================================================= */
/* 左側（日付リスト） 横幅25% + 内容が多い場合は内部スクロール */
#booking-package_schedulePage #daysListPanel {
    width: 25% !important;
    max-height: calc(100vh - 220px) !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: #d4c4b0 transparent;
}

/* 右側（時刻リスト） 左から起劝25% 横幅75% */
#booking-package_schedulePage .courseListPanel {
    left: 25% !important;
    width: 75% !important;
}

#booking-package_schedulePage #daysListPanel::-webkit-scrollbar {
    width: 3px;
}

#booking-package_schedulePage #daysListPanel::-webkit-scrollbar-thumb {
    background-color: #d4c4b0;
    border-radius: 3px;
}

/* 右側（時刻リスト）を狭く + 内容が多い場合は内部スクロール */
#booking-package_schedulePage #scheduleMainPanel,
#booking-package_schedulePage #courseMainPanel {
    height: 450px;
    float: right !important;
    max-height: calc(100vh - 220px) !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: #d4c4b0 transparent;
    font-size: 15px;
}

#booking-package_schedulePage #scheduleMainPanel::-webkit-scrollbar,
#booking-package_schedulePage #courseMainPanel::-webkit-scrollbar {
    width: 3px;
}

#booking-package_schedulePage #scheduleMainPanel::-webkit-scrollbar-thumb,
#booking-package_schedulePage #courseMainPanel::-webkit-scrollbar-thumb {
    background-color: #d4c4b0;
    border-radius: 3px;
}

/* =========================================================================
   6.8. Borders and Selected States (Schedule Page)
   ========================================================================= */
/* ボーダー色を白に統一 */
#booking-package .selectable_time_slot,
#booking-package_schedulePage .selectable_day_slot,
#booking-package_schedulePage .daysListPanel {
    border-color: #fff !important;
}

/* 選択中の日付スロットの背景色と角丸 */
#booking-package_schedulePage .selected_day_slot {
    background-color: #F5F5F5 !important;
    border-radius: 5px !important;
}

/* 予約枠が埋まっている・終了しているもの（closed）の文字色 */
#booking-package_schedulePage .closed {
    color: #999999 !important;
}

/* =========================================================================
   7. Buttons Styling & Text Replacement
   ========================================================================= */
/* Setup base button style (rounded, #b9a18c bg, white text) */
#booking-package button.return_button,
#booking-package button.next_button,
#booking-package button.submit_button,
#booking-package .returnButton,
#booking-package .cancelButton,
#booking-package button.cancel_user_booking_button,
#booking-package button.book_now_button,
#booking-package button.next_page_button,
#booking-package button.return_form_button,
#booking-package button.apply_button,
/* フォームパネル内のボタンも全適用 */
#booking-package_inputFormPanel button {
    background-color: #b9a18c !important;
    color: #fff !important;
    border-radius: 100px !important;
    /* 角を丸くできるまで丸く */
    border: none !important;
    width: 100px !important;
    /* 指定サイズ（100px） */
    padding: 10px 0 !important;
    /* 左右の余白を0にして幅を維持 */
    font-weight: bold !important;
    cursor: pointer;
    -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

/* Ensure Calendar prev/next buttons (the white circles) are unaffected */
#booking-package_calendarPage button#last-month,
#booking-package_calendarPage button#next-month {
    background-color: #fff !important;
    color: #4a453e !important;
    border-radius: 50% !important;
    padding: 0 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
    width: 40px !important;
    height: 40px !important;
}

/* Translate Buttons (Hide english text, insert Japanese via pseudo-element) */
#returnToCalendarButton,
#returnToDayListButton,
#booking-package-myBookingDetails_returnButton {
    font-size: 0 !important;
    /* Hide 'Return' */
}

#returnToCalendarButton::after,
#returnToDayListButton::after,
#booking-package-myBookingDetails_returnButton::after {
    content: "戻る";
    font-size: 16px !important;
}

/* Specific size override for Return to Day List */
#booking-package button#returnToDayListButton {
    width: 100px !important;
}

/* Specific margin override for Return to Schedules */
#booking-package button#returnToSchedules {
    margin: 0 !important;
}

#nextButton {
    font-size: 0 !important;
    /* Hide 'Next' */
}

#nextButton::after {
    content: "予約する";
    /* Assuming Next means proceed to booking */
    font-size: 16px !important;
}

/* =========================================================================
   8. Input Form Layout (No border, Width 80% on PC)
   ========================================================================= */
/* Removes border everywhere */
#booking-package_inputFormPanel .row,
#booking-package_myBookingDetails .row,
#booking-package_serviceDetails .row,
#booking-package_myBookingDetailsFroVisitor .row,
#booking-package-user-form .row,
#booking-package-loginform .row,
#booking-package-user-edit-form .row {
    border: none !important;
}

@media screen and (min-width: 768px) {

    /* Form panel inner rows 80% width and centered */
    #booking-package_inputFormPanel .row,
    #booking-package_myBookingDetails .row,
    #booking-package_serviceDetails .row,
    #booking-package_myBookingDetailsFroVisitor .row,
    #booking-package-user-form .row,
    #booking-package-loginform .row,
    #booking-package-user-edit-form .row {
        width: 80% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Entire form input screen 80% width */
    #booking-package_inputFormPanel {
        width: 80% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Form Expanded Overlay state */
/* When JS detects form open, it applies .is-form-active to .event-layout-container */
.event-layout-container.is-form-active {
    display: block;
    /* Break flex layout */
}

.event-layout-container.is-form-active .event-main-content {
    display: none;
    /* Hide main article depending on requirement, or just stack it */
}

.event-layout-container.is-form-active .event-booking-sidebar {
    width: 100%;
    max-width: 100%;
}

.event-layout-container.is-form-active .booking-sticky {
    position: relative;
    top: auto;
    width: 100%;
}

/* Mobile Fixed Reserve Button */
.sp-fixed-reserve-btn {
    display: none;
}

/* =========================================================================
   Responsive (Smartphones)
   ========================================================================= */
@media screen and (max-width: 768px) {
    .event-layout-container {
        display: block;
    }

    .event-main-content {
        width: 100%;
        margin-bottom: 40px;
    }

    .event-booking-sidebar {
        width: 100%;
    }

    .booking-sticky {
        position: static;
        top: auto;
    }

    /* Show Floating Button on Mobile */
    .sp-fixed-reserve-btn {
        display: block;
        position: fixed;
        bottom: 80px;
        /* Above the return to top button typically at 20-30px */
        right: 20px;
        z-index: 999;
    }

    .sp-fixed-reserve-btn a {
        display: block;
        background-color: #5d5142;
        /* Adjust to match theme or image */
        color: #fff !important;
        font-weight: bold;
        text-align: center;
        padding: 15px 30px;
        border-radius: 50px;
        text-decoration: none;
        -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    }
}

/* =========================================================================
   9. Calendar Legend & Contact Info
   ========================================================================= */
.booking-legend {
    margin-top: 2rem;
    color: #4a453e;
    /* ダークブラウン等の文字色 */
    padding: 0 10px;
    font-family: inherit;
}

.booking-legend .legend-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.booking-legend .legend-list li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14px;
    letter-spacing: 0.05em;
}

.booking-legend .legend-list i.material-icons {
    font-size: 1.5em;
    /* 記号を大きめに */
    margin-right: 15px;
    color: #4a453e;
    /* 画像のような強い色 */
}

.booking-legend .contact-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 0.05em;
}

.booking-legend .contact-info i.material-icons {
    font-size: 1.3em;
    margin-right: 10px;
}

.booking-legend .contact-info .tel-number {
    font-size: 14px;
    margin-left: 10px;
    font-family: sans-serif;
    /* もしあれば英数フォント */
}

/* フォーム表示時は案内枠（レジェンド）を非表示にする */
.event-layout-container.is-form-active .booking-legend {
    display: none !important;
}

/* =========================================================================
   10. Hover States (Calendar and Time Slots)
   ========================================================================= */
/* カレンダー日付、時刻表示画面等のホバー */
#booking-package_calendarPage .pointer:hover,
#booking-package_calendarPage .available_day:hover,
#booking-package_calendarPage td:not(.bp-disable):not(.closingDay):not(.pastDay):hover,
/* td自体にホバーがかかる場合用 */
#booking-package .selectable_time_slot:hover,
#booking-package .selectable_service_slot:hover,
#booking-package_schedulePage .selectable_day_slot:hover {
    background-color: #F5F5F5 !important;
    border-radius: 8px !important;
    /* 少し角丸に */
}