/*
 * style.css
 * 乾淨的共用樣式 (v11 - 改用 background-image)
 */

/* --- v8 的所有樣式 (保持不變) --- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f4f7f6;
    min-height: 100vh;
    margin: 0;
    padding: 2rem 0;
}
.container {
    background-color: #ffffff;
    padding: 2.5rem;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
    margin: auto;
}
.container-dashboard {
    background-color: #ffffff;
    padding: 2.5rem;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: 900px; 
    box-sizing: border-box;
    margin: 2rem auto; 
}
body.dashboard-page { display: block; }
h2 {
    text-align: center;
    color: #333;
    margin-top: 0;
    margin-bottom: 1.5rem;
}
h3 {
    color: #333;
    margin-top: 2rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap; 
}
.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; margin-bottom: 0.5rem; color: #555; font-weight: 500; }
.form-group input { width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 5px; box-sizing: border-box; }
.btn { width: 100%; padding: 0.85rem; border: none; border-radius: 5px; background-color: #007bff; color: white; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background-color 0.3s ease; }
.btn:hover { background-color: #0056b3; }
.form-link { text-align: center; margin-top: 1.25rem; font-size: 0.9rem; }
.form-link a { color: #007bff; text-decoration: none; }
.form-link a:hover { text-decoration: underline; }
.message { padding: 0.8rem; margin-bottom: 1rem; border-radius: 5px; text-align: center; }
.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.header-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid #eee; }
.header-nav .nav-links-left { display: flex; gap: 1rem; align-items: center;}
.header-nav .nav-links-right { display: flex; gap: 1rem; align-items: center; }
.header-nav .nav-btn { display: inline-block; padding: 0.5rem 1rem; border-radius: 5px; background-color: #007bff; color: white; text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: background-color 0.3s ease; }
.header-nav .nav-btn:hover { background-color: #0056b3; }
.header-nav .nav-btn-logout { background-color: #dc3545; }
.header-nav .nav-btn-logout:hover { background-color: #c82333; }
.header-nav .nav-btn-secondary { background-color: #6c757d; }
.header-nav .nav-btn-secondary:hover { background-color: #5a6268; }
.payment-reminder { font-size: 0.85rem; font-weight: 500; color: #d9534f; margin-left: 1rem; margin-bottom: 0.2rem; }
.member-info p { font-size: 1.1rem; color: #333; margin: 0.5rem 0; }
.member-info p strong { color: #000; min-width: 100px; display: inline-block; }
.table-responsive { width: 100%; overflow-x: auto; margin-top: 1rem; }
.booking-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.booking-table th, .booking-table td { border: 1px solid #ddd; padding: 0.8rem; text-align: left; white-space: nowrap; vertical-align: middle; }
.booking-table th { background-color: #f9f9f9; font-weight: 600; color: #333; }
.booking-table tr:nth-child(even) { background-color: #fdfdfd; }
.booking-table tr:hover { background-color: #f1f1f1; }
.no-records { text-align: center; color: #777; padding: 2rem; }
.table-actions { display: flex; gap: 0.5rem; }
.btn-table { display: inline-block; padding: 0.5rem 1rem; font-size: 0.9rem; font-weight: 500; text-decoration: none; border-radius: 5px; color: white; text-align: center; transition: background-color 0.3s ease; white-space: nowrap; border: none; cursor: pointer; }
.btn-pay { background-color: #28a745; }
.btn-pay:hover { background-color: #218838; }
.btn-cancel { background-color: #dc3545; }
.btn-cancel:hover { background-color: #c82333; }
.message-list { list-style: none; padding: 0; margin: 1rem 0 0 0; }
.message-item { background-color: #fdfdfd; border: 1px solid #eee; border-radius: 5px; margin-bottom: 0.5rem; }
.message-toggle { padding: 1rem 1.5rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background-color 0.2s ease; }
.message-toggle:hover { background-color: #f7f7f7; }
.message-title { font-size: 1.1rem; font-weight: 600; color: #333; }
.message-date { font-size: 0.85rem; color: #777; padding-left: 1rem; }
.message-content { display: none; padding: 1rem 1.5rem; padding-top: 0.5rem; border-top: 1px solid #f0f0f0; font-size: 0.95rem; color: #555; line-height: 1.6; }
.message-item.active .message-content { display: block; }
.message-toggle::after { content: '▼'; font-size: 0.7rem; color: #999; margin-left: 1rem; transition: transform 0.2s ease; }
.message-item.active .message-toggle::after { transform: rotate(180deg); }
.no-messages { text-align: center; color: #777; padding: 2rem; }
.message-item.message-hidden { display: none; }
.show-all-container { text-align: center; margin-top: 1rem; }
.btn-show-all { display: inline-block; padding: 0.6rem 1.5rem; border: none; border-radius: 5px; background-color: #007bff; color: white; font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: background-color 0.3s ease; }
.btn-show-all:hover { background-color: #0056b3; }
.booking-limit-warning { display: inline-block; padding: 0.5rem 1rem; font-size: 0.9rem; font-weight: 500; color: #721c24; background-color: #f8d7da; border: 1px solid #f5c6cb; border-radius: 5px; }
.container-payment { background-color: #ffffff; padding: 2.5rem; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); width: 100%; max-width: 600px; box-sizing: border-box; margin: 2rem auto; }
body.payment-page { display: block; }
.payment-nav { margin-bottom: 1.5rem; }
.payment-nav .btn-cancel { text-decoration: none; }
.order-details { list-style: none; padding: 0; margin: 1.5rem 0; border: 1px solid #eee; border-radius: 5px; }
.order-details li { padding: 0.8rem 1.2rem; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; }
.order-details li:last-child { border-bottom: none; }
.order-details li strong { color: #333; }
.order-details li.total-price { font-size: 1.2rem; font-weight: 600; background-color: #f9f9f9; }
.payment-form .form-group { padding-bottom: 1rem; border-bottom: 1px solid #f0f0f0; }
.points-group { display: flex; gap: 1rem; align-items: center; }
.points-group input[type="number"] { max-width: 150px; }
.points-group .points-info { font-size: 0.9rem; color: #555; }
.payment-methods { display: flex; gap: 1.5rem; }
.payment-methods label { display: flex; align-items: center; gap: 0.3rem; font-size: 1rem; }
.final-amount { text-align: right; margin: 1.5rem 0; }
.final-amount span { font-size: 1.5rem; font-weight: 700; color: #dc3545; margin-left: 1rem; }
.btn-confirm-payment { width: 100%; padding: 0.8rem; font-size: 1.1rem; font-weight: 600; background-color: #28a745; border: none; border-radius: 5px; color: white; cursor: pointer; transition: background-color 0.3s ease; }
.btn-confirm-payment:hover { background-color: #218838; }


/* --- v11: 房型介紹 (room_types.php) 樣式 --- */

/* 房型頁的圖片容器 (改用 background-image) */
.room-image-container {
    width: 100%;
    height: 300px; /* 固定高度 (取代 max-height) */
    border-radius: 5px;
    overflow: hidden; 
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    background-color: #f0f0f0;

    /* v11: 核心 - 背景圖片屬性 */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom; /* 對齊底部 */
}

/* v11: 隱藏 img (不再需要) */
.room-image-container img {
    display: none; 
}

/* 讓 member-info 的 h3 更突出 */
.member-info h3 {
    font-size: 1.5rem;
    color: #007bff;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 0.5rem;
}