@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap');

/* ============================================
   Play With Me 親子客廳 - SimplyBook.me CSS
   
   品牌色彩：
   - 薄荷綠 #bbddd8
   - 咖啡棕 #5C4B3C （主要標題/按鈕）
   - 深灰棕 #6B5B4F （內文）
   - 暖木棕 #B8996D （Service/Add-on 區域）
   ============================================ */


/* ============================================
   首頁 Homepage
   ============================================ */

/* 首頁內容區域修復 - 防止溢出 */
.decor-wrap.clearfix {
    max-width: 100% !important;
    overflow: hidden !important;
}

.index-data-wrapper {
    max-width: 100% !important;
    overflow: hidden !important;
}

/* 公司名稱 - Play With Me */
h2.title-main {
    color: #5C4B3C !important;
}

/* 副標題 - Play With Me 親子客廳 */
.standard-markdown strong {
    color: #5C4B3C !important;
}

/* 描述文字 */
p.font-claude-response-body {
    color: #6B5B4F !important;
}

/* Book Now 按鈕 */
.btn.booking_button.custom {
    background-color: #5C4B3C !important;
    border-color: #5C4B3C !important;
}

.btn.booking_button.custom a {
    color: #fff !important;
}

.btn.booking_button.custom:hover {
    background-color: #4a3d31 !important;
}

/* Show on map 按鈕 */
.btn.map.btn-with-image.custom {
    background-color: #bbddd8 !important;
    border-color: #bbddd8 !important;
}

.btn.map.btn-with-image.custom a {
    color: #fff !important;
}

/* Opening Hours 區塊 */
.working-hours-block h2.title-main {
    color: #5C4B3C !important;
}


/* ============================================
   步驟導航列 Step Navigation
   ============================================ */

/* 步驟標題文字 */
.step_info_item .title-small {
    color: #5C4B3C !important;
}


/* ============================================
   服務列表頁 Service List
   ★ 保持暖木棕 #B8996D
   ============================================ */

/* 服務標題 */
.cap.short {
    color: #B8996D !important;
}

/* 服務描述 */
.txt.short {
    color: #6B5B4F !important;
}

/* 價格 */
.badge.price.right {
    color: #B8996D !important;
}

/* 時間長度 */
.time span {
    color: #888888 !important;
}

/* Read more 連結 */
.read-more {
    color: #B8996D !important;
}

.read-more:hover {
    color: #a68a5f !important;
}

/* Select 按鈕 - 保持暖木棕 */
.btn.select.custom {
    background-color: #B8996D !important;
    border-color: #B8996D !important;
    color: #fff !important;
    border-radius: 8px !important;
}

.btn.select.custom:hover {
    background-color: #a68a5f !important;
}


/* ============================================
   Add-on 加購頁面
   ★ 保持暖木棕 #B8996D
   ============================================ */

/* 頁面標題 "Do you want to enjoy some extras..." */
.title-main {
    color: #B8996D !important;
}

/* 覆蓋首頁的 title-main 設定 */
.top-index-block h2.title-main,
.working-hours-block h2.title-main {
    color: #5C4B3C !important;
}

/* Add-on 卡片 */
.product-item.paid-attr__item {
    border-radius: 12px !important;
}

/* Add-on 標題 - 咖啡棕 */
.one-line {
    color: #5C4B3C !important;
}

/* Add-on 描述 */
.item-description.paid-attr__description {
    color: #6B5B4F !important;
}

/* Next 按鈕 - 用咖啡棕（導航按鈕） */
.sb-next.btn.next {
    background-color: #5C4B3C !important;
    border-color: #5C4B3C !important;
    color: #fff !important;
    border-radius: 8px !important;
}

.sb-next.btn.next:hover {
    background-color: #4a3d31 !important;
}

/* Back 連結 */
#sb_back_button a {
    color: #5C4B3C !important;
}

#sb_back_button a:hover {
    color: #4a3d31 !important;
}


/* ============================================
   時間選擇頁面 Time Selection
   ============================================ */

/* Prev Month / Next Date 按鈕 */
#sb_prev_month,
.sb-date-navigate {
    color: #5C4B3C !important;
}

#sb_prev_month:hover,
.sb-date-navigate:hover {
    color: #4a3d31 !important;
}

/* 日曆 - 可選日期 */
a.day-on.sb-available-date {
    color: #5C4B3C !important;
}

a.day-on.sb-available-date:hover {
    background-color: #bbddd8 !important;
    border-radius: 50% !important;
}

/* 日曆 - 已選日期 */
.date.selected {
    background-color: #bbddd8 !important;
    border-radius: 50% !important;
}

.date.selected a {
    color: #5C4B3C !important;
}

/* 時段 - 可選 ★ 暖木棕，溫暖活潑 */
a.cell.sb-cell.free {
    background-color: #B8996D !important;
    color: #fff !important;
    border-radius: 8px !important;
}

a.cell.sb-cell.free:hover {
    background-color: #a68a5f !important;
}

/* 時段 - 已預約 */
.cell.sb-cell.reserved {
    background-color: #e0e0e0 !important;
    color: #999 !important;
    border-radius: 8px !important;
}


/* ============================================
   底部資訊列 Footer
   ============================================ */

/* Total duration */
.paid-attribute-totals__duration {
    color: #6B5B4F !important;
}

/* Subtotal 金額 */
.paid-attribute-totals__subtotal {
    color: #5C4B3C !important;
}


/* ============================================
   客戶資料頁面 Client Form
   ============================================ */

/* 表單標籤 */
label.control-label {
    color: #5C4B3C !important;
}

/* 輸入框 */
input.form-control {
    border-color: #ddd !important;
    border-radius: 8px !important;
}

input.form-control:focus {
    border-color: #5C4B3C !important;
    box-shadow: 0 0 0 2px rgba(92, 75, 60, 0.2) !important;
}

/* Confirm booking 按鈕 */
#sb_book_btn.btn {
    background-color: #5C4B3C !important;
    border-color: #5C4B3C !important;
    color: #fff !important;
    border-radius: 8px !important;
}

#sb_book_btn.btn:hover {
    background-color: #4a3d31 !important;
}


/* ============================================
   通用樣式 General
   ============================================ */

/* 字距調整 - 1.5pt */
.cap.short,
.txt.short,
.one-line,
h2.title-main,
.title-main,
.title-small,
.item-description.paid-attr__description,
p.font-claude-response-body,
.standard-markdown,
label.control-label,
.read-more,
.badge.price.right,
.time span,
.paid-attribute-totals__duration,
.paid-attribute-totals__subtotal,
#sb_back_button a,
.sb-date-navigate {
    letter-spacing: 1.5pt !important;
}

/* 字體 - Zen Maru Gothic */
.cap.short,
h2.title-main,
.title-main,
.one-line,
.txt.short,
.item-description.paid-attr__description,
p.font-claude-response-body,
.standard-markdown,
.title-small,
label.control-label,
input.form-control,
.read-more,
.badge.price.right,
.time span,
.paid-attribute-totals__duration,
.paid-attribute-totals__subtotal,
#sb_back_button a,
.sb-date-navigate,
.btn,
.btn.select.custom,
.sb-next.btn.next,
#sb_book_btn.btn,
.btn.booking_button.custom a,
.btn.map.btn-with-image.custom a,
a.cell.sb-cell.free,
.cell.sb-cell.reserved {
    font-family: 'Zen Maru Gothic', sans-serif !important;
}

/* 所有主要按鈕的圓角 */
.btn {
    border-radius: 8px !important;
}

/* 連結顏色 */
a {
    color: #5C4B3C;
}

a:hover {
    color: #4a3d31;
}