/* 予約カレンダー共通CSS - shop.cssを補完 */

/* パック色（番号順に循環） - 6色 */
.studio_reserve_time_table tbody td.is_pack_1,
.studio_all_reserve_time_table tbody td.is_pack_1 {
    background: #fff3e0;
}
.studio_reserve_time_table tbody td.is_pack_2,
.studio_all_reserve_time_table tbody td.is_pack_2 {
    background: #e3f2fd;
}
.studio_reserve_time_table tbody td.is_pack_3,
.studio_all_reserve_time_table tbody td.is_pack_3 {
    background: #e8f5e9;
}
.studio_reserve_time_table tbody td.is_pack_4,
.studio_all_reserve_time_table tbody td.is_pack_4 {
    background: #f3e5f5;
}
.studio_reserve_time_table tbody td.is_pack_5,
.studio_all_reserve_time_table tbody td.is_pack_5 {
    background: #fce4ec;
}
.studio_reserve_time_table tbody td.is_pack_6,
.studio_all_reserve_time_table tbody td.is_pack_6 {
    background: #fffde7;
}

/* 予約可能セル */
.studio_reserve_time_table tbody td.available,
.studio_all_reserve_time_table tbody td.available {
    cursor: pointer;
}
.studio_reserve_time_table tbody td.available:hover,
.studio_all_reserve_time_table tbody td.available:hover {
    background: #f0f0f0;
}
.studio_reserve_time_table tbody td.is_pack_1:hover { background: #ffe0b2; }
.studio_reserve_time_table tbody td.is_pack_2:hover { background: #bbdefb; }
.studio_reserve_time_table tbody td.is_pack_3:hover { background: #c8e6c9; }
.studio_reserve_time_table tbody td.is_pack_4:hover { background: #e1bee7; }
.studio_reserve_time_table tbody td.is_pack_5:hover { background: #f8bbd0; }
.studio_reserve_time_table tbody td.is_pack_6:hover { background: #fff9c4; }
.studio_all_reserve_time_table tbody td.is_pack_1:hover { background: #ffe0b2; }
.studio_all_reserve_time_table tbody td.is_pack_2:hover { background: #bbdefb; }
.studio_all_reserve_time_table tbody td.is_pack_3:hover { background: #c8e6c9; }
.studio_all_reserve_time_table tbody td.is_pack_4:hover { background: #e1bee7; }
.studio_all_reserve_time_table tbody td.is_pack_5:hover { background: #f8bbd0; }
.studio_all_reserve_time_table tbody td.is_pack_6:hover { background: #fff9c4; }

/* 予約不可（×）セル */
.studio_reserve_time_table tbody td.reserved,
.studio_all_reserve_time_table tbody td.reserved {
    color: #9d9d9d;
}

/* 枠なし（-）セル */
.studio_reserve_time_table tbody td.none,
.studio_all_reserve_time_table tbody td.none {
    color: #ccc;
    background: #f9f9f9;
}

/* ○表示 */
.studio_reserve_time_table tbody td .circle,
.studio_all_reserve_time_table tbody td .circle {
    color: #56badb;
    font-size: 1.6rem;
    font-weight: 700;
}

/* 料金表示 */
.studio_reserve_time_table tbody td .price,
.studio_all_reserve_time_table tbody td .price {
    font-size: 1.1rem;
    line-height: 1.3;
}
.studio_reserve_time_table tbody td .price small,
.studio_all_reserve_time_table tbody td .price small {
    font-size: 1.0rem;
    opacity: 0.85;
}

/* 凡例 */
.studio_reserve_legend {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 8px;
    font-size: 1.3rem;
}
.studio_reserve_legend_item {
    display: flex;
    align-items: center;
    gap: 5px;
}
.studio_reserve_legend_color {
    width: 18px;
    height: 18px;
    border: 1px solid #999;
    display: inline-block;
}

/* 表示切替ボタン */
.studio_reserve_view_toggle {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
    margin-bottom: 10px;
}
.studio_reserve_view_toggle button {
    padding: 6px 16px;
    border: 1px solid #c2c2c2;
    background: #fff;
    cursor: pointer;
    font-size: 1.3rem;
    border-radius: 3px;
    font-weight: 700;
}
.studio_reserve_view_toggle button.active {
    background: #333;
    color: #fff;
    border-color: #333;
}
.studio_reserve_view_toggle button:hover:not(.active) {
    background: #f5f5f5;
}