/* 全局樣式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    padding: 20px;
}

/* 容器樣式 */
.container {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    max-width: 1200px;
    margin: 0 auto; /* 水平居中 */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

/* 師資信息 */
.teacher-info {
    display: flex; /* 使用彈性布局 */
    align-items: flex-start; /* 上方對齊 */
}

/* 師資照片樣式 */
.teacher-photo {
    width: 200px;
    height: 250px;
    border-radius: 10px;
    object-fit: cover;
    margin-right: 20px; /* 右邊距 */
}

/* 帳號樣式 */
.teacher-details {
    flex-grow: 1; /* 讓內容區域填滿剩餘空間 */
}

/* 標題樣式 */
h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 10px;
}

/* 小標題樣式 */
h3 {
    font-size: 20px; /* 可根據需求調整大小 */
    color: #333;
    margin-top: 20px; /* 為小標題加上外邊距 */
    margin-bottom: 10px; /* 可根據需求調整大小 */
}

/* 段落樣式 */
p {
    font-size: 16px;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* 清單樣式 */
ul {
    list-style-type: none; /* 去掉項目符號 */
    text-align: left; /* 文字靠左對齊 */
    margin-bottom: 30px;
    padding-left: 0; /* 去掉左側內邊距 */
}

    ul li {
        font-size: 16px;
        color: #444;
        margin-bottom: 10px;
        text-align: left; /* 確保項目內容也靠左對齊 */
    }

/* 服務按鈕區域 */
.services {
    text-align: left; /* 服務項目靠左對齊 */
}

.time-buttons {
    text-align: left; /* 時間項目靠左對齊 */
}

    /* 按鈕樣式 */
    .service-buttons button, .time-buttons button, .place-buttons button {
        background-color: #e74c3c;
        color: white;
        border: none;
        padding: 10px 20px;
        margin-bottom: 10px; /* 每個按鈕之間的間距 */
        font-size: 16px;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

        /* 按鈕懸停效果 */
        .service-buttons button:hover, .time-buttons button:hover, .place-buttons button:hover {
            background-color: #c0392b;
        }
.booking-buttons {
    text-align: center;
    margin-top:10px;/* 時間項目靠左對齊 */
}

        .booking-buttons button {
            background-color: #c0392b;
            color: white;
            border: none;
            padding: 10px 20px;
            margin-bottom: 10px; /* 每個按鈕之間的間距 */
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }





/* 時間按鈕的外距 */
.time-buttons {
    margin-top: 20px;
}


.schedule-container {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* 每周7天 */
    grid-gap: 10px;
    margin-top: 20px;
}


/*ddddd*/
.container2 {
    margin-top: 20px;
}

.schedule-grid {
    display: grid;
    grid-template-columns: 100px repeat(7, 1fr);
    grid-gap: 1px;
    border: 1px solid #ddd;
}

.schedule-column {
    background-color: #f9f9f9;
    border-bottom: 1px solid #ddd;
    display: grid;
    grid-template-rows: repeat(24, 30px);
}

.time-column {
    background-color: #f9f9f9;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    text-align: center;
    font-weight: bold;
}

    .time-column .time-slot {
        background-color: #f9f9f9;
        border-bottom: 1px solid #ddd;
        height: 30px;
        line-height: 30px;
        cursor: default;
    }

.schedule-column .time-slot {
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    padding: 0px;
    margin: 0;
    height: 30px;
    cursor: pointer;
}

.schedule-info .booking-status {
    font-size: 1em; /* 可依需求調整字體大小 */
    margin: 4px 0; /* 增加間距 */
}
.schedule-info {
    display: flex;
    flex-direction: column;
    align-items: center; /* 垂直置中 */
    justify-content: center; /* 水平置中 */
    font-size: 1.2em; /* 調整字體大小 */
    text-align: center; /* 文字置中 */
    color: black; /* 字體顏色設為黑色 */
}
.available {
    background-color: #f9f9f9;
}

.booked {
    background-color: #007bff;
    color: white;
}


.slotSelected {
    background-color: #dc3545;
}


.disabled {
    background-color: rgba(108, 117, 125, 0.3); /* 透明度 0.3 的淺灰色 */
    color: white;
}

    .disabled.text-not-empty {
        background-color: rgba(255, 182, 193, 0.3); /* 透明度 0.3 的淺粉色 */
        color: black; /* 可調整字體顏色 */
    }



.service-buttons button.selected,
.time-buttons button.selected,
.place-buttons button.selected {
    background-color: #28a745; /* 選中後變為綠色 */
    border: 2px solid #28a745;
    color: white;
}



.selected {
    border: 2px solid #28a745;
}

.ui-timepicker-container {
    z-index: 1151 !important;
}

.navigation-buttons {
    margin-bottom: 20px;
}