/* ===================== 全域變數與基底 ===================== */
.rtm-booking-page {
    --wrap: 1180px;
    --c-brand: #604C3E;
    --c-brown: #AA978A;       /* 按鈕深色 */
    --c-brown-hover: #604C3E; /* 按鈕 Hover */
    --c-accent: #C49C69;      /* 黃棕色：強調色 */
    --c-text: #604C3E;        /* 核心深棕色 */
    --c-bg: #F4F4F4;          /* 全域背景色 */
    --c-title: #1E1E1E; 

    font-family: "Noto Serif TC", Sans-serif !important;
    color: var(--c-text);
    padding-bottom: 60px;
}

/* 移除裝飾背景圖 */
.rtm-booking-page { background-image: none; background-color: var(--c-bg) !important;}
.rtm-bg { background-color: var(--c-bg) !important; }

/* 確保內部所有區塊背景也是 #F4F4F4 */
#sec-hours.rtm-hours,
#sec-doctors.rtm-section-doctors,
.rtm-section-notes-map {
    background-color: var(--c-bg) !important;
    background: var(--c-bg) !important;
}

/* 手機版：所有以 sec- 開頭之 section 寬度滿版 */
@media (max-width: 980px) {
    .rtm-booking-page section[id^="sec-"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
}

/* ===================== 區塊標題共用樣式 (保留 Icon) ===================== */
.rtm-doc-head { 
    text-align: center;
    margin-bottom: 28px;
}
/* ⭐ 這裡保留了標題上方的 Icon */
.rtm-doc-head .ico { 
    width: 36px; height: 36px; margin: 0 auto 8px;
    background: url("/wp-content/uploads/title_icon.png") center / contain no-repeat;
}
.rtm-doc-head h2, .rtm-doc-head h1, h1,h2 {
    margin: 0; 
    font-weight: 700; 
    letter-spacing: .08em;
    font-size: 30px;
    line-height: 1.2;
    color: var(--c-title);
}

/* ===================== 頁面頂部 Header ===================== */
.rtm-booking-header {
    text-align: center;
    padding: 30px 15px;
    margin-bottom: 20px;
}
.rtm-booking-header .rtm-main-title {
    margin-bottom: 35px;
}
.rtm-booking-header .rtm-main-title h1 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: .08em;
}

/* ===================== 快捷導航 (改為長條按鈕) ===================== */
.rtm-quicknav {
    max-width: var(--wrap);
    margin: 0 auto 0px;
    /* ⭐ 改為 Flex 佈局 */
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 0 12px;
    /* height: 80px; */ /* 移除固定高度，避免換行時被切掉 */
}

/* 長條按鈕樣式 */
.rtm-quicknav .rtm-qbtn {
    /* ⭐ 計算寬度：讓一列剛好塞下 5 個 (扣除間距) */
    min-width: 160px; /* 防止太窄 */
    
    display: flex;
    flex-direction: row; /* Icon 左，文字右 */
    align-items: center;
    justify-content: center;
    
    border-radius: 50px; /* 膠囊形狀 */
    background: var(--c-brown);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .06em;
    font-size: 20px;
    padding: 8px 20px; /* 上下左右留白 */
    margin: 0; /* 確保無額外邊距 */
    box-sizing: border-box; /* 確保邊框計算準確 */
    
    box-shadow: 0 4px 10px rgba(0,0,0,.1);
    transition: transform .12s ease, box-shadow .2s ease, background-color .2s ease;
}

/* 按鈕內的 Icon */
.rtm-quicknav .rtm-qbtn img {
    width: 24px;       /* 縮小 Icon 以適配長條按鈕 */
    height: auto;
    display: block;
    margin-bottom: 0;  /* 覆蓋舊樣式 */
    margin-right: 10px;/* Icon 與文字間距 */
    object-fit: contain;
}

/* 按鈕文字 */
.rtm-quicknav .rtm-qbtn span {
    line-height: 1;
    white-space: nowrap;
}

svg.e-font-icon-svg {
    width: 26px;
    height: 26px;
    min-width: 26px; /* 強制最小寬度，避免縮放 */
    min-height: 26px;
    fill: #ffffff !important; 
    margin-right: 10px;
    flex-shrink: 0; /* 防止被壓縮 */
}

/* Hover 效果 */
.rtm-quicknav .rtm-qbtn:hover, .rtm-quicknav .rtm-qbtn:focus {
    background: var(--c-brown-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(0,0,0,.15);
    outline: none;
}

/* 特殊按鈕顏色 */
.rtm-quicknav .primary-link { background: #C49C69; }
.rtm-quicknav .primary-link:hover { background: #b68b5a; }
.rtm-quicknav .line-link { background: #00B900; }
.rtm-quicknav .line-link:hover { background: #00a200; }

.rtm-line-cta {
    font-size: 22px;
    color: var(--c-accent);
    margin-top: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    display: inline-flex;
    align-items: center;
    gap: 8px; /* 文字與圖片間距 */
}

.rtm-line-cta .line-icon {
    width: 30px;  /* 圖片大小你可以調整 */
    height: auto;
    vertical-align: middle;
}

/* RWD：快捷按鈕 (手機版自動換行) */
@media (max-width: 1024px) {
    .rtm-quicknav .rtm-qbtn {
        width: calc((100% - 32px) / 3); /* 平板一列3個 */
    }
}
@media (max-width: 600px) {
    .rtm-quicknav .rtm-qbtn {
        width: calc((100% - 16px) / 2); /* 手機一列2個 */
        font-size: 14px;
        padding: 10px 10px;
    }
}

/* ===================== 門診時間 (sec-hours) ===================== */
#sec-hours.rtm-hours {
    position: relative;
    padding: 40px 0 0px;
    color: var(--rtm-text);
}
#sec-hours .rtm-hours-wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 16px;
    text-align: center;
}
.rtm-schedule {
    padding-top: 0px;
    /* ⭐ 確保內容置中 */
    display: flex;
    flex-direction: column;
    align-items: center;
}
.rtm-schedule img {     
    display: block;
    width: 80%;
    height: auto;
    margin: auto;
    padding-bottom: 30px;
}

/* Fallback Table */
.rtm-schedule-table-fallback {
    max-width: 800px;
    margin: 0 auto;
    overflow-x: auto;
}
.rtm-schedule-table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    margin: 0 auto;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border-radius: 8px;
    overflow: hidden;
    background: #fff; /* 表格保留白底比較清楚 */
}
.rtm-schedule-table th, .rtm-schedule-table td {
    padding: 10px;
    border: 1px solid #e0d9cf;
    text-align: center;
    font-size: 0.9rem;
}
.rtm-schedule-table thead th {
    background: var(--c-brown);
    color: #fff;
    font-weight: 500;
}
.rtm-schedule-table tbody th {
    background: #e0d9cf;
    font-weight: bold;
    color: var(--c-brown);
}
.rtm-schedule-note {
    text-align: center;
    font-size: 0.85rem;
    color: var(--c-accent);
    margin-top: 15px;
}
.rtm-fb-link {
    display: inline-block;
    color: #fff;
    background: var(--c-brown);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    text-align: center;
    line-height: 1.2;
    font-weight: bold;
    text-decoration: none;
    font-family: Arial, sans-serif;
}
@media (max-width: 980px) {
    .rtm-schedule img { width: 100%; }
}

/* ===================== 醫師陣容 (sec-doctors) ===================== */
#sec-doctors.rtm-section-doctors {
    position: relative;
    padding: 40px 0 60px;
}
#sec-doctors .rtm-doc-wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 16px;
}
#sec-doctors .rtm-doc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 36px;
}
.rtm-doc-card { 
    text-align: center; 
    border: none;
    background: transparent;
    box-shadow: none;
}
.rtm-doc-card .pic {
    position: relative; border-radius: 8px; overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 28px rgba(0,0,0,.08);
    aspect-ratio: 3 / 4;
}
.rtm-doc-card .pic img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform .25s ease;
}
.rtm-doc-card .rtm-doc-link:hover .pic img { transform: scale(1.03); }

.rtm-doc-card .name {
    margin: 10px 0 2px;
    font-weight: 700;
    color: var(--c-text);
}
.rtm-doc-card .role {
    color: var(--c-accent);
    font-size: 14px; letter-spacing: .06em; font-weight: 700;
}
.rtm-doc-card .rtm-doc-link { display: block; text-decoration: none; color: inherit; }
.rtm-doc-cta-area { margin-top: 10px; }
.rtm-doc-booking-btn {
    display: inline-block;
    padding: 8px 18px;
    font-size: 15px;
    font-weight: 700;
    color: var(--c-accent);
    background: transparent;
    border: 2px solid var(--c-accent);
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.25s ease;
}
.rtm-doc-booking-btn:hover {
    background: var(--c-accent);
    color: #fff;
}
@media (max-width: 1100px) {
    #sec-doctors .rtm-doc-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    #sec-doctors .rtm-doc-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 16px; }
}

/* ===================== 掛號注意事項與地圖 (全部置中) ===================== */
.rtm-section-notes-map {
    padding: 0 0 0px;
    color: var(--c-text);
}

.rtm-section-notes-map .rtm-hours-wrap {
    max-width: 800px; /* 限制寬度讓置中更集中 */
    margin: 0 auto;
    padding: 0 16px;
    /* ⭐ 改為垂直排列 + 置中 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}

/* 注意事項區塊 */
.rtm-section-notes-map .rtm-notes {
    width: 100%;
    text-align: center; /* 讓標題置中 */
}
.rtm-section-notes-map .rtm-notes h4 {
    text-align: center; /* 標題置中 */
    color: var(--c-text);
    font-weight: 800;
    letter-spacing: .08em;
    margin: 0 0 20px;
    font-size: 24px;
}

/* 清單本身使用 inline-block 讓區塊居中，但文字靠左比較好閱讀 */
.rtm-section-notes-map .rtm-notes ol { 
    display: inline-block;
    text-align: left;
    margin: 0 auto;
    padding-left: 1.5em;
    list-style-type: decimal;
    margin-top: 15px;
}
.rtm-section-notes-map .rtm-notes li { 
    margin: .5em 0; 
    color: #333;
    font-size: 18px;
    line-height: 1.8;
    font-weight: 600;
}

/* 地圖容器 */
.rtm-map-card {
    width: 97vw;
    height: 400px;
}
.rtm-map-card iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* RWD */
@media (max-width: 768px) {
    .rtm-map-card { height: 280px; }
    .rtm-section-notes-map .rtm-hours-wrap { gap: 0px; }
}

@media (max-width: 600px) {
    .rtm-quicknav .rtm-qbtn {
        width: calc((100% - 12px) / 2);
        font-size: 20px;
        padding: 12px 8px;
        border-radius: 40px;
    }

    .rtm-quicknav svg.e-font-icon-svg,
    .rtm-quicknav img {
        width: 20px;
        margin-right: 6px;
    }
}



@media (max-width: 600px) {
    .rtm-line-cta {
        font-size: 16px;
        text-align: center;
        gap: 6px;
    }

    .rtm-line-cta .line-icon {
        width: 22px;
    }
}