/* นำโค้ดนี้ไปวางทับไฟล์ style.css เดิม (รวมทั้งหมดไว้ที่นี่) */
:root {
    /* Light Mode Defaults - ธีม เหลือง ดำ ขาว */
    --primary-color: #FFC700;  /* สีเหลืองหลัก */
    --primary-text-color: #111111; /* สีตัวอักษรบนพื้นเหลือง (ดำ) */

    --background-color: #FFFFFF; /* สีพื้นหลังทั่วไป (ขาว) */
    --card-background-color: #FFFFFF; /* สีพื้นหลังการ์ด (ขาว) */
    --input-background-color: #F8F8F8; /* สีพื้นหลังของการ์ดบริการ/input (ขาวเทา) */
    --header-background-color: #F0F0F0; /* สีพื้นหลังของ summary (เทาอ่อน) */
    --primary-light-background: #FFFBE6; /* สีพื้นหลังอ่อนๆ เมื่อเลือกการ์ด (เหลืองอ่อนมาก) */
    
    --text-color-primary: #1C1E21; /* สีตัวอักษรหลัก (ดำ) */
    --text-color-secondary: #65676B; /* สีตัวอักษรรอง (เทาเข้ม) */
    --border-color: #E0E0E0; /* สีเส้นขอบทั่วไป */
    --border-color-light: #F0F0F0; /* สำหรับเส้นขอบการ์dบริการ */

    --shadow-small: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.12);

    --font-family: "IBM Plex Sans Thai", "Noto Sans Thai", system-ui, -apple-system,
              "Segoe UI", Roboto, "Helvetica Neue", Arial, "Tahoma", sans-serif;

    /* Status Colors (ปรับให้เป็นเฉดเหลือง/ดำ/เทา หรือสีที่เข้ากับธีม) */
    --status-confirmed-bg: #FFEB3B; /* เหลืองอ่อนสำหรับพื้นหลัง CONFIRMED */
    --status-confirmed-text: #111111; /* ดำสำหรับข้อความ CONFIRMED */
    --status-cancelled-bg: #FFE6E6; /* แดงอ่อน (ถ้ายังต้องการใช้แดง) */
    --status-cancelled-text: #DC3545; /* แดงเข้ม */
    --status-completed-bg: #E0F2F7; /* ฟ้าอ่อน (ถ้ายังต้องการใช้ฟ้า) */
    --status-completed-text: #17A2B8; /* ฟ้าเข้ม */

    /* Button Colors (เพื่อให้สอดคล้องกับธีมเหลือง ดำ ขาว) */
    --button-primary-bg: var(--primary-color); /* ปุ่มหลักใช้สีเหลือง */
    --button-primary-text: var(--primary-text-color); /* ตัวอักษรบนปุ่มหลักใช้สีดำ */

    --button-secondary-bg: #E4E6EB; /* ปุ่มรอง: เทาอ่อน */
    --button-secondary-text: #1C1E21; /* ปุ่มรอง: ตัวอักษรดำ */
    --button-secondary-border: #CED4DA; /* ปุ่มรอง: เส้นขอบเทา */
    --button-secondary-hover-bg: #D8DBE0; /* ปุ่มรอง: เทาเข้มขึ้นเมื่อ hover */

    --button-danger-bg: #DC3545; /* ปุ่มอันตราย: แดง */
    --button-danger-hover-bg: #C82333; /* ปุ่มอันตราย: แดงเข้มขึ้นเมื่อ hover */
    --button-danger-text: white; /* ตัวอักษรบนปุ่มอันตราย: ขาว */

    --button-booked-bg: #E9ECEF; /* ปุ่มเวลาที่ถูกจอง: เทาอ่อนใน Light Mode */
    --button-booked-text: #6C757D; /* ปุ่มเวลาที่ถูกจอง: เทาเข้ม */
    --button-booked-border: #CED4DA;

    --text-brandnew-color: #065f46; /* สีหลักสำหรับลิงก์หรือข้อความที่ต้องการเน้น */
    --text-popular-color: #1C1E21; /* สีหลักสำหรับลิงก์หรือข้อความที่ต้องการเน้น */
    --text-branch-created-color: #374151; /* สีหลักสำหรับข้อความที่ต้องการเน้น */

}

body.dark-mode {
    /* Dark Mode - ธีม เหลือง ดำ ขาว */
    --primary-color: #FFD32A; /* สีเหลืองหลักใน Dark Mode */
    --primary-text-color: #111111; /* สีตัวอักษรบนพื้นเหลือง (ดำ) */

    --background-color: #121212; /* สีพื้นหลังทั่วไป (ดำ) */
    --card-background-color: #1E1E1E; /* สีพื้นหลังการ์ด (ดำเข้ม) */
    --input-background-color: #2A2A2A; /* สีพื้นหลังของการ์ดบริการ/input (ดำเทา) */
    --header-background-color: #2D2D2D; /* สีพื้นหลังของ summary (ดำเทา) */
    --primary-light-background: #4A402A; /* สีพื้นหลังอ่อนๆ เมื่อเลือกการ์ด (เหลืองเข้มใน dark mode) */

    --text-color-primary: #ffffff; /* สีตัวอักษรหลัก (ขาว) */
    --text-color-secondary: #ffffff; /* สีตัวอักษรรอง (ใช้ขาวเพื่ออ่านง่ายใน dark mode) */
    --border-color: #3A3B3C; /* สีเส้นขอบทั่วไป */
    --border-color-light: #4A4A4A; /* สำหรับเส้นขอบการ์ดบริการ */

    --shadow-small: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.4);

    /* Status Colors (ปรับให้เข้ากับ Dark Mode) */
    --status-confirmed-bg: #4A402A; /* เหลืองเข้มใน Dark Mode สำหรับพื้นหลัง CONFIRMED */
    --status-confirmed-text: #FFD32A; /* เหลืองสว่างใน Dark Mode สำหรับข้อความ CONFIRMED */
    --status-cancelled-bg: #6B3737;
    --status-cancelled-text: #FF8C8C;
    --status-completed-bg: #375B6B;
    --status-completed-text: #87CEEB;

    /* Button Colors (ปรับให้เข้ากับ Dark Mode) */
    --button-primary-bg: var(--primary-color);
    --button-primary-text: var(--primary-text-color);

    --button-secondary-bg: #3A3B3C;
    --button-secondary-text: var(--text-color-primary);
    --button-secondary-border: #555555;
    --button-secondary-hover-bg: #4A4B4C;

    --button-danger-bg: #C82333;
    --button-danger-hover-bg: #DC3545;
    --button-danger-text: white;

    --button-booked-bg: #343A40; /* ปุ่มเวลาที่ถูกจอง: เทาเข้มใน Dark Mode */
    --button-booked-text: #ADB5BD; /* ปุ่มเวลาที่ถูกจอง: เทาอ่อน */
    --button-booked-border: #495057;

    --text-brandnew-color: #ffff; /* สีหลักสำหรับลิงก์หรือข้อความที่ต้องการเน้น */
    --text-popular-color: #ffff; /* สีหลักสำหรับลิงก์หรือข้อความที่ต้องการเน้น */
    --text-branch-created-color: #ffff; /* สีหลักสำหรับข้อความที่ต้องการเน้น */
}


body {
    font-family: var(--font-family);
    background-color: var(--background-color);
    color: var(--text-color-primary); /* เปลี่ยนเป็น text-color-primary */
    margin: 0;
    padding: 15px;
    transition: background-color 0.3s, color 0.3s;
}

/* Prevent aggressive font autosizing in embedded webviews (e.g., LIFF). */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.container {
    max-width: 480px;
    margin: auto;
    background-color: var(--card-background-color);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: background-color 0.3s;
}

/* Loading Overlay */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
#loading-overlay.active { opacity: 1; visibility: visible; display: flex; /* แสดงผลเมื่อมี class active */}

.spinner {
    border: 4px solid rgba(255, 255, 255, 0.2);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: var(--primary-color);
    animation: spin 1s ease infinite;
    margin-bottom: 10px;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }


/* Header & Theme Toggle */
header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
#user-picture { width: 60px; height: 60px; border-radius: 50%; }
.user-info { flex-grow: 1; }
#user-name { font-size: 1.4em; margin: 0; font-weight: 600; }
.user-info p { margin: 0; color: var(--secondary-text-color); }

#theme-toggle {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.2em;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}
#theme-toggle:hover { background-color: var(--background-color); transform: scale(1.1); }


/* Main Menu */
/* --- เริ่มส่วนของเมนูหลัก --- */

/* กล่องสถานะการจอง (เหมือนเดิม แต่ปรับ margin) */
#booking-status-box {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px; /* เพิ่มระยะห่างด้านล่าง */
    border-left: 4px solid var(--primary-color);
    animation: fadeIn 0.5s ease;
}

/* Container สำหรับกลุ่มปุ่มเมนู */
.main-menu-actions {
    display: flex;
    flex-direction: column; /* เรียงปุ่มจากบนลงล่าง */
    gap: 12px; /* ระยะห่างระหว่างปุ่ม */
    width: 100%;
}

/* สไตล์ร่วมของปุ่มเมนูทุกปุ่ม */
.main-menu-btn {
    background-color: var(--card-bg);
    color: var(--text-color-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 16px;
    width: 100%;
    font-family: var(--font-family);
    display: flex;
    align-items: center;
    gap: 14px; /* ระยะห่างระหว่างไอคอนกับข้อความ */
    text-align: left;
    font-size: 1rem;
    font-weight: 500; /* ใช้น้ำหนักตัวอักษรปกติ */
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.main-menu-btn:hover {
    background-color: var(--card-bg-hover);
    border-color: rgba(255, 255, 255, 0.2);
}

/* สไตล์ไอคอนในปุ่ม */
.main-menu-btn i {
    font-size: 1.2rem;
    color: var(--text-color-secondary);
    width: 20px; /* กำหนดความกว้างให้ไอคอน */
    text-align: center;
}

/* ทำให้ปุ่ม "จองคิวใหม่" ดูเด่นกว่าปุ่มอื่น (Optional) 
   โดยการเปลี่ยนสีพื้นหลังและตัวอักษร
*/
#btn-new-booking {
    background-color: var(--primary-color);
    color: #111; /* สีตัวอักษรเข้ม */
    border-color: var(--primary-color);
}
#btn-new-booking i {
    color: #111;
}
#btn-new-booking:hover {
    background-color: #eab308; /* สีเหลืองเข้มขึ้นเมื่อ hover */
    border-color: #eab308;
}

/* --- เพิ่มส่วนนี้สำหรับจัดแถวปุ่มเล็ก --- */

.menu-button-row {
    display: flex; /* ทำให้ปุ่มข้างในเรียงแนวนอน */
    gap: 12px;     /* สร้างระยะห่างระหว่างปุ่ม */
    font-family: var(--font-family);
}


body.dark-mode .menu-button:hover { background-color: #3A3B3C; }


/* Booking Flow & Common Styles */
.input-field {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-size: 1em;
    font-family: var(--font-family);
    box-sizing: border-box;
    background-color: var(--card-background-color); /* ใช้ card-background-color */
    color: var(--text-color-primary); /* ใช้ text-color-primary */
}
.summary-box { background-color: var(--card-background-color); /* (ที่เหลือเหมือนเดิม) */ }

/* Chips (Barber & Time) */
.barber-chip, .time-slot {
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    background-color: var(--input-background-color); /* ใช้ input-background-color */
    color: var(--text-color-primary); /* ใช้ text-color-primary */
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
}
.barber-chip.selected, .time-slot.selected {
    background-color: var(--primary-color);
    color: var(--primary-text-color);
    border-color: var(--primary-color);
    font-weight: 600;
}

/* สไตล์สำหรับปุ่มเวลาที่ถูกจองแล้ว (สีเทา กดไม่ได้) */
.time-slot.booked {
    background-color: var(--button-booked-bg); /* ใช้สีที่กำหนดใน var */
    color: var(--button-booked-text); /* ใช้สีที่กำหนดใน var */
    border-color: var(--button-booked-border); /* ใช้สีที่กำหนดใน var */
    cursor: not-allowed;
    opacity: 0.7;
}

.time-slot.booked:hover {
    background-color: var(--button-booked-bg); /* ไม่เปลี่ยนสีเมื่อ hover */
    transform: none; /* ไม่ขยับเมื่อ hover */
    box-shadow: none; /* ไม่มีเงาเมื่อ hover */
}


/* Buttons */

/* สไตล์ปุ่มพื้นฐาน (ใช้ได้กับทุกปุ่ม) */
.btn-primary, .btn-secondary, .btn-danger {
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-family: var(--font-family);
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
    flex-grow: 1;
}

/* ทำให้ปุ่มดูจางลงเมื่อ hover */
.btn-primary:hover, .btn-secondary:hover, .btn-danger:hover {
    opacity: 0.85;
}

/* สไตล์สำหรับปุ่มหลัก (ยืนยัน) */
.btn-primary {
    background-color: var(--primary-color);
    color: var(--primary-text-color);
}
.btn-primary:disabled {
    background-color: #a9a9a9;
    color: #e0e0e0;
    cursor: not-allowed;
    opacity: 1;
}
body.dark-mode .btn-primary:disabled {
    background-color: #555;
    color: #888;
}

/* สไตล์สำหรับปุ่มรอง (ย้อนกลับ) */
.btn-secondary {
    background-color: var(--button-secondary-bg); /* ใช้ var */
    color: var(--button-secondary-text); /* ใช้ var */
    border: 1px solid var(--button-secondary-border); /* ใช้ var */
}
.btn-secondary:hover { background-color: var(--button-secondary-hover-bg); }


/* (แนะนำ) เพิ่มสไตล์สำหรับปุ่มอันตราย (ยกเลิก) */
.btn-danger {
    background-color: var(--button-danger-bg); /* ใช้ var */
    color: var(--button-danger-text); /* ใช้ var */
}
.btn-danger:hover { background-color: var(--button-danger-hover-bg); }

.navigation-buttons {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px;
}


.hidden { display: none !important; }

.service-item {
    margin-bottom: 10px;
}

/* ซ่อน input (radio/checkbox) ของจริงไปเลย */
.service-item input {
    display: none;
}

.service-card {
    display: flex;
    flex-direction: column; /* เปลี่ยนเป็น column เพื่อให้ข้อมูลจัดเรียงเป็นแนวตั้ง */
    justify-content: space-between;
    padding: 15px;
    border: 2px solid var(--border-color-light); /* ใช้ border-color-light */
    border-radius: 10px; /* ทำให้โค้งมนขึ้น */
    background-color: var(--input-background-color); /* ใช้ input-background-color */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    min-height: 120px; /* กำหนดความสูงขั้นต่ำ */
}

.service-card:hover {
    border-color: var(--primary-color); /* เปลี่ยนเป็นสีเหลืองเมื่อ hover */
    transform: translateY(-2px);
}

/* สไตล์เมื่อการ์ดถูกเลือก (ใช้พลังของ CSS pseudo-selector :checked) */
.service-item input:checked + .service-card {
    border-color: var(--primary-color);
    background-color: var(--primary-light-background); /* ใช้ primary-light-background */
    box-shadow: 0 0 0 3px rgba(255, 199, 0, 0.3); /* เปลี่ยน glow เป็นสีเหลือง (ค่าจาก primary-color) */
}


.service-info {
    margin-bottom: 10px; /* เพิ่มระยะห่างด้านล่าง */
}

.service-name {
    font-weight: 600;
    font-size: 1.1em;
    color: var(--text-color-primary);
    display: block;
    margin-bottom: 5px;
}

.service-description {
    font-size: 0.9em;
    color: var(--text-color-secondary);
}

.service-price-duration {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9em;
    color: var(--text-color-secondary);
    border-top: 1px dashed var(--border-color-light); /* ใช้ border-color-light */
    padding-top: 8px;
    margin-top: auto; /* ดันส่วนนี้ไปอยู่ด้านล่างสุด */
}

.service-price {
    font-weight: 600;
    font-size: 1.1em;
    display: block;
    color: var(--primary-color); /* ราคาใช้สีเหลือง */
}

.service-duration {
    font-size: 0.9em;
    color: var(--text-color-secondary);
    display: block;
}

/* Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- ส่วนสำหรับประวัติการจอง (History View) --- */

#history-view {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

#history-view h2 {
    text-align: center;
    margin-bottom: 25px;
    color: var(--text-color-primary);
}

#history-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

@media (min-width: 600px) {
    #history-list {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

.history-card {
    background-color: var(--card-background-color);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow-small);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid var(--border-color);
}

.history-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

.history-card h3 {
    font-size: 1.3em;
    margin-bottom: 10px;
    color: var(--primary-color); /* เน้นชื่อสาขาใช้สีเหลือง */
}

.history-card p {
    font-size: 0.95em;
    margin-bottom: 8px;
    color: var(--text-color-secondary);
    line-height: 1.4;
}

.history-card p strong {
    color: var(--text-color-primary);
}

/* สไตล์สำหรับสถานะ */
.history-card .status {
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-block;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.history-card .status.confirmed {
    background-color: var(--status-confirmed-bg); /* ใช้สีเหลืองที่กำหนดไว้ใน var */
    color: var(--status-confirmed-text); /* ใช้สีดำที่กำหนดไว้ใน var */
}

.history-card .status.cancelled {
    background-color: var(--status-cancelled-bg); /* ใช้สีแดงที่กำหนดไว้ใน var */
    color: var(--status-cancelled-text); /* ใช้สีแดงเข้มที่กำหนดไว้ใน var */
}

/* Container สำหรับปุ่ม Action */
.history-actions {
    margin-top: 15px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.history-actions button {
    flex-grow: 1;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    border: none;
}

/* สไตล์ปุ่มรอง (จองอีกครั้ง) */
.history-actions .btn-secondary {
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    border: 1px solid var(--button-secondary-border);
}

.history-actions .btn-secondary:hover {
    background-color: var(--button-secondary-hover-bg);
    transform: translateY(-2px);
}

/* สไตล์ปุ่มอันตราย (ยกเลิก) */
.history-actions .btn-danger {
    background-color: var(--button-danger-bg);
    color: var(--button-danger-text); /* ใช้ var */
}

.history-actions .btn-danger:hover {
    background-color: var(--button-danger-hover-bg);
    transform: translateY(-2px);
}

/* ปุ่มกลับเมนูหลักด้านล่าง */
#history-view .btn-back-main {
    display: block;
    width: fit-content;
    margin: 30px auto 0 auto;
    padding: 12px 25px;
    border-radius: 10px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    background-color: var(--primary-color);
    color: var(--primary-text-color); /* ใช้ var */
    border: none;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

#history-view .btn-back-main:hover {
    background-color: var(--primary-dark-color);
    transform: translateY(-2px);
}

/* --- ในส่วนของ .service-category summary --- */

.service-category summary {
    display: flex; /* ใช้ flexbox จัดเรียงหัวข้อและไอคอน */
    justify-content: space-between; /* กระจายช่องว่างระหว่างหัวข้อและไอคอน */
    align-items: center; /* จัดกึ่งกลางแนวตั้ง */
    padding: 15px 20px;
    cursor: pointer;
    background-color: var(--header-background-color);
    color: var(--text-color-primary);
    font-size: 1.2em;
    font-weight: bold;
    border-bottom: 1px solid var(--border-color);
    list-style: none; /* ซ่อนเครื่องหมายสามเหลี่ยมเริ่มต้นของ summary */
    -webkit-tap-highlight-color: transparent;

    /* เพิ่มการจัดวางสำหรับเนื้อหาใน summary */
    position: relative; /* สำหรับตำแหน่งของ pseudo-element */
    padding-right: 40px; /* เพิ่ม padding ขวาให้มีที่สำหรับไอคอน */
}

/* ซ่อนเครื่องหมายสามเหลี่ยมเริ่มต้นของ summary สำหรับทุกเบราว์เซอร์ */
.service-category summary::-webkit-details-marker {
    display: none;
}
.service-category summary::marker {
    display: none;
}

/* สร้างไอคอนขยาย/ย่อด้วย pseudo-element ::after */
.service-category summary::after {
    content: '+'; /* Default: แสดงเป็นเครื่องหมายบวก */
    font-size: 1.5em;
    line-height: 1;
    position: absolute; /* วางตำแหน่งไอคอนให้ลอยอยู่ */
    right: 20px; /* จัดตำแหน่งด้านขวา */
    top: 50%; /* จัดกึ่งกลางแนวตั้ง */
    transform: translateY(-50%); /* ปรับตำแหน่งให้กึ่งกลางจริง */
    width: 24px; /* กำหนดขนาดเพื่อความสมมาตร */
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    color: var(--text-color-secondary); /* สีของไอคอน */
}

/* เมื่อ details เปิดอยู่ (ขยาย) */
.service-category[open] summary::after {
    content: 'x'; /* เปลี่ยนเป็นเครื่องหมายกากบาท */
    transform: translateY(-50%) rotate(0deg); /* ไม่ต้องหมุนเพราะ 'x' ไม่ต้องหมุน */
}

/* สำหรับไอคอนลูกศรเดิมที่เบราว์เซอร์สร้างขึ้นมา */
.service-category h3 { /* ปรับขนาด h3 ภายใน summary */
    margin: 0; /* ลบ margin เริ่มต้นของ h3 */
    font-size: 1em; /* ใช้ขนาด font ที่เหมาะสมกับ summary */
    flex-grow: 1; /* ให้ h3 ขยายเต็มพื้นที่ที่เหลือ */
}

/* --- ในส่วนของ .step (ในไฟล์ style.css เดิม) --- */
.step {
    margin-bottom: 25px;
    padding-top: 15px; /* เพิ่ม padding ด้านบนของแต่ละ step เพื่อให้มีระยะห่าง */
}

/* --- ในส่วนของ Time Slots Container --- */

/* สไตล์สำหรับหัวข้อ "เลือกเวลา" */
.time-selection-header {
    font-size: 1.2em;
    color: var(--text-color-primary);
    margin-top: 20px; /* เพิ่มระยะห่างจากตัวเลือกวัน */
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--primary-color); /* มีเส้นใต้สีเหลือง */
}

/* Container สำหรับปุ่มเวลาที่จัดเรียงเป็น Grid */
.time-buttons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); /* 3 คอลัมน์โดยประมาณ */
    gap: 10px; /* ระยะห่างระหว่างปุ่มเวลา */
    margin-top: 15px;
    justify-content: center; /* จัดกึ่งกลางหากมีคอลัมน์ไม่ครบ */
}

/* สไตล์พื้นฐานของปุ่มเวลา */
.time-slot {
    padding: 12px 0; /* ปรับ padding ให้ดูเป็นกล่องมากขึ้น */
    border: 1px solid var(--border-color);
    background-color: var(--input-background-color);
    color: var(--text-color-primary); /* ใช้สีตัวอักษรหลัก */
    border-radius: 8px; /* ขอบมน */
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center; /* จัดตัวอักษรให้อยู่ตรงกลาง */
    font-weight: 500;
    font-size: 1em;
}

.time-slot:hover:not(.booked) { /* ไม่ให้เปลี่ยนสีเมื่อ hover ถ้าเป็น booked */
    background-color: var(--primary-light-background); /* เหลืองอ่อนๆ */
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-small);
}

/* สไตล์เมื่อปุ่มเวลาถูกเลือก */
.time-slot.selected {
    background-color: var(--primary-color); /* สีเหลือง */
    color: var(--primary-text-color); /* ตัวอักษรสีดำบนพื้นเหลือง */
    border-color: var(--primary-color);
    font-weight: 600;
    box-shadow: 0 0 0 3px rgba(255, 199, 0, 0.3); /* เพิ่ม glow effect สีเหลือง */
}

/* สไตล์สำหรับปุ่มเวลาที่ถูกจองแล้ว (สีเทา กดไม่ได้) */
.time-slot.booked {
    background-color: var(--button-booked-bg);
    color: var(--button-booked-text);
    border-color: var(--button-booked-border);
    cursor: not-allowed;
    opacity: 0.7;
    box-shadow: none; /* ไม่มีเงาสำหรับปุ่มที่ถูกจอง */
}

.time-slot.booked:hover { /* ทำให้ไม่มีเอฟเฟกต์เมื่อ hover บนปุ่มที่จองแล้ว */
    background-color: var(--button-booked-bg);
    transform: none;
    box-shadow: none;
}
/* --- ส่วนสำหรับประวัติการจอง (History View) --- */

/* Section Headers (การจองที่จะมาถึง, ประวัติการจอง) */
.history-section-header {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 1.5em;
    color: var(--primary-color); /* ใช้สีเหลือง */
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 8px;
}

/* สไตล์ของการ์ดประวัติการจองแต่ละใบ (เหมือนเดิมแต่เพิ่ม details/summary) */
.history-card {
    background-color: var(--card-background-color);
    border-radius: 12px;
    margin-bottom: 15px; /* ระยะห่างระหว่างการ์ด */
    box-shadow: var(--shadow-small);
    border: 1px solid var(--border-color);
    overflow: hidden; /* เพื่อให้ border-radius แสดงผลถูกต้อง */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* สไตล์สำหรับ summary (ส่วนหัวของการ์ดที่มองเห็นเมื่อพับ) */
.history-card summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
    background-color: var(--header-background-color); /* สีพื้นหลังของ summary */
    color: var(--text-color-primary);
    font-weight: bold;
    border-bottom: 1px solid var(--border-color);
    list-style: none; /* ซ่อนเครื่องหมายสามเหลี่ยมเริ่มต้น */
    -webkit-tap-highlight-color: transparent;
    position: relative;
    padding-right: 40px; /* เพิ่มพื้นที่สำหรับไอคอน */
}

.history-card summary::-webkit-details-marker { display: none; }
.history-card summary::marker { display: none; }

/* ไอคอนขยาย/ย่อใน summary ของประวัติการจอง */
.history-card summary .collapse-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    content: '+'; /* Default: แสดงเป็นเครื่องหมายบวก */
    font-size: 1.5em;
    line-height: 1;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-color-secondary);
}

.history-card[open] summary .collapse-icon {
    transform: rotate(45deg); /* หมุนเครื่องหมายบวกเป็นกากบาท */
    content: 'x';
}

/* สไตล์สำหรับข้อมูลที่แสดงใน summary */
.history-card .summary-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.history-card .summary-info h4 {
    font-size: 1.2em; /* ขนาดชื่อสาขาใน summary */
    margin: 0 0 5px 0;
    color: var(--primary-color);
}
.history-card .summary-info p {
    margin: 0 0 5px 0;
    font-size: 0.9em;
    color: var(--text-color-secondary);
}
.history-card .summary-info .status {
    font-size: 0.8em; /* ขนาด status ใน summary */
    padding: 3px 6px;
    margin-top: 5px;
}


/* ส่วนเนื้อหาที่ถูกซ่อน/ขยาย */
.history-details-content {
    padding: 15px 20px 20px 20px; /* Padding ด้านในของรายละเอียด */
    background-color: var(--card-background-color); /* อาจจะปรับสีให้ต่างออกไปเล็กน้อย */
    animation: fadeIn 0.3s ease-out; /* เพิ่ม animation ตอนขยาย */
}

/* ข้อความแจ้งเตือน/ข้อมูลด้านล่าง */
.history-details-content .alert-message {
    color: var(--button-danger-bg); /* ใช้สีแดง */
    font-weight: bold;
    margin-top: 10px;
    text-align: center;
}
.history-details-content .info-message {
    color: var(--text-color-secondary);
    margin-top: 10px;
    text-align: center;
    font-style: italic;
}

/* ปรับสไตล์ปุ่ม Rebook ให้เด่นขึ้น (เป็น Primary Button) */
.history-actions .btn-rebook {
    background-color: var(--button-primary-bg); /* ใช้สีเหลืองหลัก */
    color: var(--button-primary-text); /* ใช้สีดำ */
    border: none;
    font-size: 1em; /* ทำให้ใหญ่ขึ้นเล็กน้อย */
}
.history-actions .btn-rebook:hover {
    opacity: 0.85; /* ใช้ opacity */
    transform: none; /* ไม่มี transform เหมือนปุ่มอื่น */
}

/* สไตล์ปุ่มติดต่อสาขา (ใหม่) */
.history-actions .contact-branch-btn {
    background-color: var(--primary-color); /* ใช้สีเหลือง */
    color: var(--primary-text-color); /* ใช้สีดำ */
    border: none;
    font-size: 1em;
    font-weight: 600;
}
.history-actions .contact-branch-btn:hover {
    opacity: 0.85;
}

/* --- เพิ่ม Variables สำหรับ Dark/Light Mode เพื่อความยืดหยุ่น --- */
/* ใน :root (Light Mode) */
:root {
    /* ... (Variables เดิมของคุณ) ... */
    --header-background-color: #F0F0F0; /* สีพื้นหลัง summary ของการ์ด */
    /* ... (Variables อื่นๆ) ... */
}

/* ใน .dark-mode */
body.dark-mode {
    /* ... (Variables เดิมของคุณ) ... */
    --header-background-color: #2D2D2D; /* สีพื้นหลัง summary ใน Dark Mode */
    /* ... (Variables อื่นๆ) ... */
}
/* --- ส่วนสำหรับประวัติการจอง (History View) --- */

/* ส่วนหัวแบ่งหมวด (ถ้าคุณยังต้องการใช้) */
.history-section-header {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 1.5em;
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 8px;
}

/* สไตล์ของการ์ดประวัติการจองแต่ละใบ */
.history-card {
    background-color: var(--card-background-color);
    border-radius: 12px;
    margin-bottom: 15px; /* ระยะห่างระหว่างการ์ด */
    box-shadow: var(--shadow-small);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.history-card:hover {
    transform: translateY(-3px); /* ลดการยกขึ้นเล็กน้อย */
    box-shadow: var(--shadow-medium);
}
.history-card.upcoming {
    border-left: 5px solid var(--primary-color); /* เน้นการจองที่กำลังจะมาถึง */
}

/* สไตล์สำหรับ summary (ส่วนหัวของการ์ดที่มองเห็นเมื่อพับ - Cleaner UI) */
.history-card summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px; /* ลด padding ลงเล็กน้อย */
    cursor: pointer;
    background-color: var(--header-background-color);
    color: var(--text-color-primary);
    font-weight: bold;
    border-bottom: 1px solid var(--border-color);
    list-style: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    padding-right: 40px; /* เพิ่มพื้นที่สำหรับไอคอน */
}

/* ไอคอนขยาย/ย่อใน summary ของประวัติการจอง */
.history-card summary .collapse-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    content: '▼'; /* ใช้ไอคอนลูกศรลง */
    font-size: 1em; /* ปรับขนาด */
    line-height: 1;
    position: absolute;
    right: 15px; /* ปรับตำแหน่ง */
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-color-secondary);
}

.history-card[open] summary .collapse-icon {
    transform: translateY(-50%) rotate(180deg); /* หมุนลูกศรขึ้นเมื่อเปิด */
}

/* สไตล์สำหรับข้อมูลที่แสดงใน summary */
.history-card .summary-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.history-card .summary-info .branch-name-summary {
    font-size: 1.1em; /* ขนาดชื่อสาขาใน summary */
    margin: 0;
    color: var(--primary-color);
}
.history-card .summary-info .datetime-summary {
    margin: 3px 0 0 0;
    font-size: 0.85em;
    color: var(--text-color-secondary);
}
.history-card .summary-info .status {
    font-size: 0.75em; /* ขนาด status ใน summary */
    padding: 2px 5px; /* ลด padding */
    margin-top: 5px;
}

/* ส่วนเนื้อหาที่ถูกซ่อน/ขยาย */
.history-details-content {
    padding: 15px 20px 20px 20px;
    background-color: var(--card-background-color);
    animation: fadeIn 0.3s ease-out;
}
.history-details-content p {
    margin-bottom: 8px; /* ระยะห่างระหว่าง p */
}

/* ข้อความแจ้งเตือน/ข้อมูลด้านล่าง */
.history-details-content .alert-message {
    background-color: #FFF3CD; /* สีเหลืองอ่อนสำหรับแจ้งเตือน */
    color: #856404; /* สีตัวอักษรสำหรับแจ้งเตือน */
    border: 1px solid #FFECB3;
    border-radius: 8px;
    padding: 10px;
    font-weight: bold;
    margin-top: 15px; /* ระยะห่างจากปุ่ม */
    text-align: center;
    font-size: 0.9em;
}
body.dark-mode .history-details-content .alert-message {
    background-color: #4A402A; /* สีเหลืองเข้มใน Dark Mode */
    color: #FFD32A;
    border-color: #6C5E35;
}

.history-details-content .info-message {
    color: var(--text-color-secondary);
    margin-top: 15px;
    text-align: center;
    font-style: italic;
    font-size: 0.9em;
}

/* ปรับสไตล์ปุ่ม Rebook ให้เด่นขึ้น (เป็น Primary Button) */
.history-actions .btn-rebook {
    background-color: var(--button-primary-bg);
    color: var(--button-primary-text);
    font-size: 1em;
}
.history-actions .btn-rebook:hover { opacity: 0.9; } /* ปรับ opacity ให้สอดคล้องกัน */

/* สไตล์ปุ่มติดต่อสาขา (ใหม่) */
.history-actions .contact-branch-btn {
    background-color: var(--primary-color);
    color: var(--primary-text-color);
    font-size: 1em;
    font-weight: 600;
}
.history-actions .contact-branch-btn:hover { opacity: 0.9; }

/* --- Pagination Controls --- */
.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 0.95em;
    color: var(--text-color-primary);
    flex-wrap: wrap;  
}

.pagination-controls label {
    font-weight: 500;
}

.pagination-controls select {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--card-background-color);
    color: var(--text-color-primary);
    font-family: var(--font-family);
    cursor: pointer;
    outline: none;
    appearance: none; /* ซ่อน default arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2365676b'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); /* custom arrow */
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 20px;
    min-width: 120px;
}
body.dark-mode .pagination-controls select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23B0B3B8'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}

.pagination-controls button {
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    border: 1px solid var(--border-color);
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
}

.pagination-controls button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--button-secondary-bg); /* คงสีเดิมเมื่อ disabled */
}

/* --- Nearby Stores Modal Styles --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* พื้นหลังมืดๆ */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* ให้ลอยอยู่เหนือทุกอย่าง */
    backdrop-filter: blur(5px); /* เพิ่มเอฟเฟกต์ blur */
    -webkit-backdrop-filter: blur(5px); /* สำหรับ Safari */
    transition: opacity 0.3s ease;
    opacity: 1; /* เริ่มต้นให้แสดง */
}

#payment-session-modal {
    z-index: 1300;
}

#custom-confirm-modal {
    z-index: 1400;
}

.modal-overlay.hidden {
    opacity: 0;
    pointer-events: none; /* ทำให้ไม่สามารถคลิกผ่านได้เมื่อซ่อน */
}

.modal-content {
    background-color: var(--card-background-color);
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 450px; /* จำกัดความกว้าง */
    max-height: 80vh; /* จำกัดความสูง */
    overflow-y: auto; /* มี scrollbar ถ้าเนื้อหายาวเกิน */
    position: relative;
    transform: scale(1);
    transition: transform 0.3s ease;
}

.modal-overlay.hidden .modal-content {
    transform: scale(0.95); /* ทำให้มี animate เล็กน้อยตอนปิด */
}

.modal-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.8em;
    color: var(--text-color-secondary);
    cursor: pointer;
    line-height: 1;
    padding: 5px;
    transition: color 0.2s ease;
}
.modal-close-btn:hover {
    color: var(--primary-color);
}

.modal-title {
    font-size: 1.8em;
    text-align: center;
    color: var(--primary-color);
    margin-bottom: 20px;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
}

/* User location display in modal */
.nearby-location-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 5px;
    padding: 5px;
    border-radius: 8px;
    background-color: var(--input-background-color);
    border: 1px solid var(--border-color-light);
}
#nearby-user-location-display {
    font-size: 0.95em;
    font-weight: 500;
    color: var(--text-color-primary); /* จะถูก overrides ด้วย JS */
    flex-grow: 1;
    text-align: center;
}
.btn-icon {
    background: none;
    border: none;
    color: var(--text-color-secondary);
    font-size: 1.1em;
    cursor: pointer;
    transition: color 0.2s ease;
}
.btn-icon:hover {
    color: var(--primary-color);
}

/* Container for nearby branches */
#nearby-list-container {
    padding: 10px 0;
}

/* Styles for individual nearby branch cards - Cleaner & Actionable */
.nearby-card {
    background-color: var(--input-background-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 10px; /* Space between cards */
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-small);
}

.nearby-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(255, 199, 0, 0.2); /* Subtle glow */
    transform: translateY(-2px);
}

.nearby-card h4 {
    font-size: 1.2em;
    color: var(--primary-color);
    margin: 0 0 5px 0;
}

.nearby-card p {
    font-size: 0.9em;
    color: var(--text-color-secondary);
    margin: 0;
}
.nearby-card .distance-info {
    font-weight: bold;
    color: var(--text-color-primary);
    margin-bottom: 5px;
}
.nearby-card .hours-info {
    font-style: italic;
    font-size: 0.8em;
}

/* Message for no nearby stores */
#no-nearby-stores-message {
    text-align: center;
    color: var(--text-color-secondary);
    margin-top: 20px;
    font-size: 1.1em;
}

/* --- Custom Confirmation Modal Styles --- */

/* Modal Overlay (ใช้ class .modal-overlay และ .hidden เดิม) */
/* .modal-overlay และ .modal-overlay.hidden สไตล์จะเหมือนกับ nearby-stores-modal */

/* Modal Content (ใช้ class .modal-content เดิม) */
.modal-content.small-modal {
    max-width: 350px; /* จำกัดความกว้างให้เล็กลงสำหรับ modal ยืนยัน */
    padding: 20px;
}

.modal-actions {
    display: flex;
    justify-content: center;
    gap: 15px; /* ระยะห่างระหว่างปุ่ม */
    margin-top: 15px;
}

.modal-actions button {
    flex-grow: 1; /* ทำให้ปุ่มขยายเท่ากัน */
    max-width: 120px; /* จำกัดขนาดปุ่ม */
    padding: 12px 15px;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
    border: none;
}
/* สไตล์ปุ่ม danger และ secondary ถูกกำหนดไว้แล้วใน global button styles */

/* หากต้องการให้ปุ่ม "ไม่ใช่" ดูเด่นน้อยกว่า "ใช่" */
.modal-actions #confirm-modal-no-btn {
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    border: 1px solid var(--button-secondary-border);
}
.modal-actions #confirm-modal-no-btn:hover {
    background-color: var(--button-secondary-hover-bg);
    opacity: 1; /* ใช้ opacity 1 เพื่อให้คงสีเดิม */
}
.modal-actions #confirm-modal-yes-btn {
    background-color: var(--primary-color);
    color: var(--primary-text-color);
}
.modal-actions #confirm-modal-yes-btn:hover {
    opacity: 0.85;
}

/* --- ใน style.css --- */

/* Modal Content (ใช้ class .modal-content เดิม) */
.modal-content.small-modal {
    max-width: 380px; /* เพิ่มความกว้างเล็กน้อยสำหรับข้อความที่ยาวขึ้น */
    padding: 25px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
}

.modal-title {
    font-size: 1.6em; /* ปรับขนาดหัวข้อ */
    text-align: center;
    color: var(--primary-color);
    margin-bottom: 20px;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
}

.modal-message {
    font-size: 1.05em; /* ปรับขนาดข้อความ */
    text-align: center;
    color: var(--text-color-primary);
    margin-bottom: 25px;
    line-height: 1.5;
    white-space: pre-wrap; /* เพื่อให้ขึ้นบรรทัดใหม่ตาม \n */
}

.modal-actions {
    display: flex;
    justify-content: center;
    gap: 15px; /* ระยะห่างระหว่างปุ่ม */
    margin-top: 15px;
}

.modal-actions button {
    flex-grow: 1;
    max-width: 140px; /* จำกัดขนาดปุ่ม */
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
    border: none;
}


/* สำหรับปุ่ม "ตกลง" ใน Status Modal (btn-primary) */
#status-modal-ok-btn.btn-primary {
    background-color: var(--button-primary-bg);
    color: var(--button-primary-text);
}
#status-modal-ok-btn.btn-primary:hover {
    opacity: 0.85;
}

/* สำหรับปุ่ม "ตกลง" ใน Status Modal (btn-danger) */
#status-modal-ok-btn.btn-danger {
    background-color: var(--button-danger-bg);
    color: var(--button-danger-text);
}
#status-modal-ok-btn.btn-danger:hover {
    opacity: 0.85;
}

.selected-list {
    background-color: var(--input-background-color);
    border-radius: 8px;
    padding: 8px 15px;
    border: 1px solid var(--border-color);
    margin-bottom: 20px; /* เพิ่มระยะห่างจากรายการบริการ */
    min-height: 50px; /* กำหนดความสูงขั้นต่ำ */
    display: flex;
    flex-direction: column;
    gap: 8px; /* ระยะห่างระหว่างรายการที่เลือก */
}

.selected-item {
    display: flex;
    align-items: center;
    background-color: var(--card-background-color);
    padding: 8px 12px;
    border-radius: 6px;
    box-shadow: var(--shadow-small);
    animation: fadeIn 0.3s ease;
}

.selected-service-name {
    flex-grow: 1; /* ดันราคาและปุ่มไปด้านขวา */
    font-weight: 500;
}

.selected-service-price {
    color: var(--text-color-secondary);
    font-weight: 500;
}

.remove-btn {
    background: none;
    border: none;
    color: var(--button-danger-bg);
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    margin-left: 15px;
    padding: 0 5px;
    line-height: 1;
    transition: transform 0.2s, color 0.2s;
}

.remove-btn:hover {
    color: var(--button-danger-hover-bg);
    transform: scale(1.1);
}

.empty-selection {
    color: var(--text-color-secondary);
    padding: 15px 0;
    text-align: center;
    font-style: italic;
    width: 100%;
}


/* Horizontal Date Slider */
.date-carousel{
    display:flex; gap:10px; padding:8px 4px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling: touch;
  }

/* Rewards page styles */
.rewards-list{ display:flex; flex-direction:column; gap:14px; margin-top:12px; }
.reward-card{ display:flex; align-items:center; gap:12px; padding:12px; border:2px solid var(--border-color); border-radius:12px; background:var(--card-background-color); }
.reward-icon{ width:72px; height:72px; flex:0 0 72px; display:grid; place-items:center; border-radius:10px; overflow:hidden; background: #fff; }
.reward-icon img{ width:100%; height:100%; object-fit:cover; }
.reward-info{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:6px; }
.reward-top{ display:flex; justify-content:space-between; align-items:center; }
.reward-name{ font-weight:800; font-size:1.05rem; color:var(--text-color-primary); display:block; overflow:hidden; }
/* clamp name to 2 lines with ellipsis */
.reward-name{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; line-clamp:2; }
.reward-name .price-inline{ font-weight:700; color:var(--text-color-secondary); margin-left:8px; font-size:0.95rem; }
.reward-meta{ display:flex; justify-content:flex-end; align-items:center; gap:12px; font-size:0.95rem; color:var(--text-color-secondary); margin-top:6px; }
.reward-meta .price{ font-weight:700; color:var(--text-color-secondary); min-width:64px; text-align:right; }
.reward-meta .points-wrap{ min-width:92px; text-align:right; }
.reward-action{ margin-left:12px; }
.reward-action .btn-primary{ padding:8px 12px; border-radius:12px; }

/* Points display in header */
.points-display{ margin-left:auto; text-align:center; padding:0; border-radius:0; border:none; background:transparent; }
.points-number{ font-size:28px; font-weight:900; color:var(--primary-color); }
.points-label{ font-size:0.9rem; color:var(--text-color-secondary); }

@media (max-width:420px){
    .reward-card{ padding:10px; }
    .reward-icon{ width:56px; height:56px; flex:0 0 56px; }
    .points-number{ font-size:22px; }
    .reward-meta .points-wrap{ min-width:72px; }
}

/* points coloring */
.reward-meta { display:flex; align-items:baseline; gap:6px; }
.points-current.can-redeem { color: var(--primary-color); font-weight:800; }
.points-current.cannot-redeem { color: #dc3545; font-weight:800; }
.points-required { color: var(--text-color-secondary); }
.need-more { margin-top:6px; color:#dc3545; font-size:0.85rem; }

/* exchange note under rewards list */
.exchange-note{ margin-top:12px; color:var(--text-color-secondary); font-size:0.9rem; text-align:center; }

@media (max-width:420px){
    .need-more { font-size:0.8rem; }
    .exchange-note { font-size:0.82rem; }
}

/* action row tiles */
.action-row{ display:flex; gap:12px; margin-top:18px; }
.action-tile{ flex:1; display:flex; align-items:center; gap:12px; padding:12px; border-radius:12px; border:2px solid var(--border-color); background:var(--card-background-color); cursor:pointer; }
/* action tile icon: center icon, remove border so it's a flat icon area */
.action-ico{ width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:transparent; border: none; }
.action-ico i{ font-size:20px; }
.action-label{ font-weight:800; }

/* Tile text/icon color: black in light theme, white in dark theme */
.action-tile { color: var(--text-color-primary); text-decoration: none; }
.action-tile .action-ico i { color: var(--text-color-primary); }
.dark-mode .action-tile { color: #fff; }
.dark-mode .action-tile .action-ico i { color: #fff; }

/* unify button font with app font */
.action-tile, .main-menu-btn, button { font-family: 'IBM Plex Sans Thai', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }

/* vertical tile: icon above label, centered, single-line label */
.action-tile.vertical{ flex-direction:column; align-items:center; justify-content:center; padding:10px 10px; gap:8px; text-align:center; min-height:72px; }
.action-tile.vertical .action-ico{ width:40px; height:40px; }
.action-tile.vertical .action-label{ font-size:0.98rem; font-weight:800; color:var(--text-color-primary); line-height:1; }

/* Responsive: smaller devices */
@media (max-width: 480px) {
    .action-tile.vertical { padding:8px 8px; min-height:64px; }
    .action-tile.vertical .action-ico { width:36px; height:36px; }
    .action-tile.vertical .action-label { font-size:0.92rem; }
    .reward-card .reward-name { font-size:1rem; }
    .points-current, .points-required { font-size:0.95rem; }
}

@media (max-width: 360px) {
    .action-tile.vertical { padding:6px 6px; min-height:56px; }
    .action-tile.vertical .action-ico { width:32px; height:32px; }
    .action-tile.vertical .action-label { font-size:0.88rem; }
    .reward-card .reward-name { font-size:0.95rem; }
    .points-current, .points-required { font-size:0.9rem; }
}
.dark-mode .action-tile.vertical .action-label{ color:var(--text-color-primary); }
.action-tile.vertical { border:2px solid var(--border-color); }

  .date-carousel::-webkit-scrollbar{ display:none; }
  
  .date-chip{
    min-width:64px; padding:8px 10px; border-radius:10px;
    border:1px solid var(--border-color);
    background:var(--input-background-color);
    color:var(--text-color-primary);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    scroll-snap-align:center;
  }
  .date-chip .dow{ font-size:.75rem; color:var(--text-color-secondary); line-height:1 }
  .date-chip .dom{ font-size:1.1rem; font-weight:700; line-height:1.2 }
  
  .date-chip.selected{
    background:var(--primary-color);
    color:var(--primary-text-color);
    border-color:var(--primary-color);
  }
  .date-chip.disabled{
    opacity:.5; pointer-events:none;
    background:var(--button-booked-bg);
    color:var(--button-booked-text);
    border-color:var(--button-booked-border);
  }
  
  /* optional: ปุ่มเลื่อนซ้าย/ขวา */
  .hcal-nav-wrap{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
  .hcal-nav{
    width:36px; height:36px; border-radius:999px;
    border:1px solid var(--border-color); background:transparent; cursor:pointer;
  }
  .hcal-title{ font-weight:600; }

/* --- Branch Card Styles --- */
.card-container {
    display: grid;
    grid-template-columns: 1fr; /* 1 คอลัมน์บนมือถือ */
    gap: 20px; /* ระยะห่างระหว่างการ์ด */
}

.branch-card {
    background-color: var(--card-background-color);
    border-radius: 12px;
    box-shadow: var(--shadow-medium);
    overflow: hidden; /* ทำให้ขอบมนแสดงผลกับรูปภาพถูกต้อง */
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
}

.branch-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.branch-image {
    width: 100%;
    height: 150px; /* กำหนดความสูงของรูปภาพ */
    object-fit: cover; /* ทำให้รูปภาพเต็มพื้นที่โดยไม่เสียสัดส่วน */
}

.branch-card-content {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}


.branch-info {
    font-size: 0.9em;
    color: var(--text-color-secondary);
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 8px; /* ระยะห่างระหว่างไอคอนกับข้อความ */
}

.branch-info .fas { /* สไตล์สำหรับไอคอน FontAwesome */
    color: var(--primary-color);
}

.branch-actions {
    margin-top: auto; /* ดันปุ่มไปอยู่ด้านล่างสุดของการ์ด */
    padding-top: 15px;
    display: flex;
    gap: 10px;
}

.branch-actions button {
    flex-grow: 1; /* ทำให้ปุ่มขยายเต็มพื้นที่ */
    font-size: 1em;
}

/* --- Branch Filter & Sort Controls --- */
.branch-filter-controls {
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.search-wrapper {
    position: relative;
}

.search-wrapper .fa-search {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: var(--text-color-secondary);
}

.search-wrapper .input-field {
    padding-left: 40px;
    width: 100%;
    box-sizing: border-box; /* สำคัญมาก */
}

.sort-buttons-wrapper {
    display: flex;
    gap: 10px;
    overflow-x: auto; /* ทำให้เลื่อนได้บนจอเล็ก */
}

.sort-btn {
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    background-color: var(--card-background-color);
    color: var(--text-color-secondary);
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    font-family: var(--font-family);
}

.sort-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.sort-btn.active {
    background-color: var(--primary-color);
    color: var(--primary-text-color);
    border-color: var(--primary-color);
    font-weight: 600;
}

.no-data-message {
    text-align: center;
    color: var(--text-color-secondary);
    padding: 40px 20px;
}


/* สไตล์สำหรับ Modal (ใช้ร่วมกับ showCustomConfirm) */
/* ----- Overlay ----- */
.custom-confirm-overlay{
    position: fixed;
    inset: 0;
    display: grid;               /* ให้กล่องไปกลางจอ */
    place-items: center;
    background: rgba(0,0,0,.6);
    z-index: 10000;              /* สูงกว่า modal/loader อื่น ๆ */
    opacity: 0;
    transition: opacity .2s;
    pointer-events: auto;        /* รับคลิกแน่ ๆ */
  }
  
.custom-confirm-overlay.active{ opacity: 1; pointer-events: auto; }
  
.custom-confirm-box.active {
    transform: scale(1);
}

.custom-confirm-box{
    background: var(--card-background-color);
    color: var(--text-color-primary);
    border-radius: 16px;
    padding: 24px;
    min-width: 280px;
    max-width: 90vw;
    transform: scale(.9);
    transition: transform .2s;
    pointer-events: auto;        /* กล่องรับคลิกได้ */
  }

body.modal-open { overflow: hidden; }
.custom-confirm-overlay.active .custom-confirm-box{ transform: scale(1); }

.custom-confirm-box h2{
    margin:0 0 10px;
    font-size: clamp(18px, 5vw, 22px);
    font-weight: 800;
    letter-spacing:.2px;
  }

  .custom-confirm-box p{ 
    margin:0 0 16px;
    color:#d6d6d6;
    font-size: clamp(14px, 3.6vw, 16px);
  }

.custom-confirm-actions {
    display: flex;
    justify-content: center; /* จัดปุ่มให้อยู่ตรงกลางสำหรับ Alert */
    gap: 15px;
}

.custom-confirm-actions button {
    padding: 10px 25px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.custom-confirm-actions button:active {
    transform: scale(0.95);
}

.custom-confirm-actions .btn-confirm-yes {
    background-color: #facc15; /* สีเหลือง */
    color: #1e1e1e; /* สีตัวอักษรเข้ม */
}

.custom-confirm-actions .btn-confirm-yes:hover {
    background-color: #eab308;
}

#loading-overlay { pointer-events: none; }
#loading-overlay.active { pointer-events: auto; }
#loading-overlay.non-blocking,
#loading-overlay.non-blocking.active {
    pointer-events: none;
}

/* Container สำหรับ Header ของ View */
.view-header {
    width: 100%;
    padding: 10px 0; /* เพิ่มระยะห่างบน-ล่างเล็กน้อย */
    position: relative; /* ทำให้สามารถจัดตำแหน่งปุ่มได้ */
    display: flex; /* จัดให้ปุ่มอยู่ชิดซ้าย */
    justify-content: flex-start;
}

/* สไตล์ของปุ่มย้อนกลับ */
.btn-icon-back {
    background-color: rgba(255, 255, 255, 0.1); /* สีพื้นหลังโปร่งแสงเล็กน้อย */
    border: none;
    border-radius: 50%; /* ทำให้ปุ่มเป็นวงกลม */
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.btn-icon-back:hover {
    background-color: rgba(255, 255, 255, 0.2); /* สว่างขึ้นเมื่อเมาส์ชี้ */
}

/* สไตล์ของไอคอน SVG ที่อยู่ในปุ่ม */
.btn-icon-back svg {
    width: 22px;
    height: 22px; /* ✅ แก้ไขแล้ว */
    color: #ffffff;
}

/* สไตล์สำหรับปุ่มแก้ไขเบอร์โทร */
.btn-edit-profile {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.2); /* เส้นขอบบางๆ */
    color: var(--text-color-secondary); /* สีตัวอักษรอ่อน */
    padding: 4px 10px;
    border-radius: 20px; /* ทำให้ขอบมน */
    font-size: 0.8rem;
    cursor: pointer;
    display: inline-flex; /* จัดไอคอนกับข้อความให้อยู่ด้วยกัน */
    align-items: center;
    gap: 6px; /* ระยะห่างระหว่างไอคอนกับข้อความ */
    margin-top: 8px;
    transition: all 0.2s ease;
}



/* --- Booking Status Box & Feedback Form --- */
#booking-status-box {
    background-color: var(--card-bg);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    border-left: 5px solid var(--primary-color);
    animation: fadeIn 0.5s ease;
}

#booking-status-box p {
    margin: 0 0 12px 0;
    color: var(--text-color-primary);
    font-size: 0.95rem;
}

#booking-status-box strong {
    color: var(--primary-color);
    font-size: 1.1rem;
}

.feedback-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

/* --- Star Rating --- */
.rating-group {
    margin-bottom: 15px;
}

.rating-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-color-secondary);
}

.star-rating {
    display: flex;
    flex-direction: row-reverse; /* ทำให้ดาวดวงแรกอยู่ขวาสุด */
    justify-content: flex-end;
    font-size: 2rem;
}

.star-rating input {
    display: none;
}

.star-rating label {
    color: #444;
    cursor: pointer;
    transition: color 0.2s;
}

.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
    color: #facc15; /* สีดาวเมื่อถูกเลือกหรือ hover */
}

/* --- Remarks Text Area --- */
.remarks-group {
    margin-top: 15px;
}

.remarks-group textarea {
    width: 100%;
    background-color: var(--input-background-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    color: var(--text-color-primary);
    min-height: 80px;
    resize: vertical;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* สไตล์สำหรับกล่องสถานะแบบ "ไม่มีนัดหมาย" */
.booking-status-box.neutral {
    border-left-color: #555; /* เปลี่ยนสีเส้นด้านซ้ายเป็นสีเทา */
    background-color: transparent; /* อาจทำให้โปร่งใสไปเลย */
    border: 1px solid var(--border-color); /* หรือใช้เส้นขอบปกติ */
}

.no-appointment-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-color-secondary); /* สีตัวอักษรอ่อน */
    font-size: 0.9rem;
    padding: 8px 0; /* เพิ่ม padding บน-ล่างเล็กน้อย */
    margin: 0 !important; /* ลบ margin ที่อาจติดมา */
}

.no-appointment-message i {
    font-size: 1.1rem;
}


/* --- สไตล์สำหรับกล่องสถานะที่มีรายละเอียด --- */

/* ข้อความแจ้งเตือนเวลา */
.status-time-alert {
    margin: 0 0 -4px 0 !important;
    font-size: 1.1rem;
    text-align: center;
    margin-top: 20px;
}
.status-time-alert strong {
    color: var(--primary-color);
    font-size: 1.1rem;
}

/* รายการรายละเอียดการจอง */
.booking-details-list {
    margin-bottom: 16px;
}
.booking-details-list p {
    margin: 0 0 8px 0 !important;
    color: var(--text-color-secondary);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.booking-details-list p strong {
    color: var(--text-color-primary);
    font-size: 0.9rem;
}
.booking-details-list p i {
    color: var(--text-color-secondary);
    width: 16px;
    text-align: center;
}

/* ปุ่มดูรายละเอียด */
#btn-view-history-detail {
    width: 100%;
    padding: 8px;
    font-size: 0.9rem;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.1);
}

/* --- สไตล์สำหรับ Modal แก้ไขเบอร์โทร --- */
.edit-phone-input-group {
    margin: 6px 0 18px; 
    width: 90%;
}

.edit-phone-input {
    width: 100%;
    padding: 12px;
    font-size: 1.2rem;
    text-align: center;
    background-color: var(--input-background-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-color-primary);
    letter-spacing: 2px; /* ทำให้ตัวเลขมีช่องไฟ อ่านง่าย */
}

.edit-phone-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.3);
}

.error-message {
    color: var(--button-danger-bg);
    font-size: 0.85rem;
    margin-top: 8px;
    text-align: left;
}

/* Container สำหรับกลุ่มปุ่ม (ดูรายละเอียด, ดูแผนที่) */
.status-box-actions {
    margin-top: 16px;
    display: flex; /* ทำให้ปุ่มเรียงแนวนอน */
    gap: 12px;     /* ระยะห่างระหว่างปุ่ม */
}

/* ใช้ > * เพื่อกำหนดสไตล์ให้กับ "ทุก element ที่อยู่ข้างใน" 
  ซึ่งก็คือปุ่ม <button> และลิงก์ <a> ทำให้มีดีไซน์เหมือนกัน
*/
.status-box-actions > * {
    flex: 1; /* << ทำให้ปุ่มทั้งสองแบ่งพื้นที่เท่ากันพอดี */
    
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--text-color-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;

    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

/* สไตล์เมื่อนำเมาส์ไปชี้ */
.status-box-actions > *:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--text-color-primary);
}

/* --- Barber Selection Step --- */

/* Container หลักของตัวเลือกช่าง */
.barber-selector {
    display: flex;
    flex-wrap: wrap; /* ทำให้ขึ้นแถวใหม่เมื่อไม่พอ */
    gap: 12px;
}

/* ปุ่ม "ไม่ระบุช่าง" (ยังคงเป็น chip) */
.barber-chip {
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background-color: var(--card-bg);
    color: var(--text-color-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

/* การ์ดของช่าง */
.barber-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%; /* ให้เต็มความกว้างบนมือถือ */
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
}

/* รูปโปรไฟล์ช่าง */
.barber-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

/* ข้อมูลชื่อและคะแนน */
.barber-info {
    flex: 1;
}
.barber-name {
    margin: 0 0 4px 0;
    font-size: 1rem;
    color: var(--text-color-primary);
}
.barber-rating {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* การแสดงผลดาว */
.star-rating-display {
    color: #facc15; /* สีดาว */
    font-size: 0.9rem;
}
.rating-text {
    font-size: 0.8rem;
    color: var(--text-color-secondary);
}

/* สไตล์เมื่อถูกเลือก */
.barber-chip.selected,
.barber-card.selected {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #111;
}
.barber-card.selected .barber-name,
.barber-card.selected .rating-text {
    color: #111;
}


.main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
  }
  
  .main-header h1 {
    font-size: 1rem;
    font-weight: bold;
  }
  
  .btn-back {
    background: transparent;
    border: none;
    color: var(--button-secondary-text);
    cursor: pointer;
    padding: 4px;
  }
  .btn-edit {
    background: transparent;
    border: none;
    color: #000;
    cursor: pointer;
    padding: 4px;
  }
  .btn-theme-toggle {
    width: 40px;              /* กำหนดความกว้าง */
    height: 40px;             /* กำหนดความสูง */
    border-radius: 50%;       /* ทำให้เป็นวงกลม */
    border: 2px solid #ccc;   /* เส้นขอบรอบวงกลม */
    display: flex;            /* จัดให้อยู่กลาง */
    align-items: center;
    justify-content: center;
    background-color: white;  /* พื้นหลังปุ่ม */
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .btn-theme-toggle:hover {
    background-color: #f0f0f0; /* เปลี่ยนสีเวลา hover */
  }
  
  .btn-theme-toggle i {
    font-size: 18px; /* ขนาดไอคอน */
    color: #333;     /* สีไอคอน */
  }

  .btn-edit-profile:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-color-primary);
}

/* ขนาดไอคอนในปุ่ม */
  .btn-edit-profile svg {
        width: 14px;
        height: 14px;
    }
  

  
  .profile-icon {
    width: 77px;
    height: 77px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #efefef;
  }

  .profile-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ครอบเต็มวงกลม */
  }
  

  
  .welcome-text {
    margin: 0;
    font-size: 1rem;
  }
  
  .sub-text {
    margin: 0;
    color: #666;
    font-size: 0.6rem;
  }

  /* Container สำหรับกลุ่มปุ่มเมนู */
  .main-menu-actions {
    display: flex;
    gap: 12px;
    margin-top: 10px;
  }
  
  .menu-button-row {
    display: flex;
    gap: 10px;
  }
  
  .main-menu-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 50px;
    padding: 12px;
    font-size: 1rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
  }
  
  .main-menu-btn.outline {
    border: 1px solid #000;
    background: white;
  }
  
  .main-menu-btn.filled {
    background: #fcb900;
    border: 1px solid #fcb900;
    color: #000;
  }
  
  .location-info {
    margin-top: 10px;
    font-size: 0.95rem;
  }

  .user-profile-dup {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 56px 20px 24px;  /* padding เผื่อบนใต้ avatar */
    border: 1.5px solid #e5e5e5;
    border-radius: 20px;
    background: #fff;
    position: relative;
    margin: 36px 0 20px;  /* เอา 16px ด้านข้างออกให้เต็ม */
    width: 100%;
    box-sizing: border-box;
  }
  .user-profile-dup .profile-icon{
    width: 96px; height: 96px;
    border-radius:50%;
    transform: translate(-50%, -50%);
    display:grid; 
    top: 0; left: 50%;
    border-radius: 50%;
    place-items:center; 
    background:#f4f4f4; 
    flex:0 0 72px;
    position: absolute;
  }

  .user-profile-dup .profile-icon img{
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 6px solid #fff;     /* วงแหวนรอบรูป */
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
  }

  .user-profile-dup .btn-edit{
    position: absolute;
    top: 14px; right: 16px;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid #d9d9d9;
    border-radius: 12px;
    background: #fff;
  }

  .user-profile-dup .welcome-text{
    font-size: 22px;
    font-weight: 600;
    line-height: 1.35;
    margin: 12px 0 6px;
  }

  .profile-info{
    flex: 1; /* ให้พื้นที่เหลือเต็มที่ */
    position: relative; /* เพื่อให้ปุ่มแก้ไขอยู่ในตำแหน่งที่ถูกต้อง */
    text-align: center; /* จัดข้อความให้ชิดซ้าย */
  }

  .user-profile-dup .profile-info {
    text-align: center;       /* จัดกลางแนวนอน */
    display: flex;
    flex-direction: column;   /* เรียงข้อความลงมาเป็นบรรทัด */
    align-items: center;      /* จัดกลางในแกน X */
    justify-content: center;  /* จัดกลางในแกน Y (ถ้าสูงเกิน) */
  }

  .user-profile-dup .profile-info .welcome-text{
    font-size:22px; font-weight:600; color:#111; line-height:1.35; text-align: center;
  }
  .user-profile-dup .btn-edit{
    margin-left:auto; border:none; background:transparent; cursor:pointer;
    font-size:18px; padding:8px; border-radius:10px;
  }
  .user-profile-dup .btn-edit:focus{ outline:2px solid #ffb300; outline-offset:2px; }
  
  .user-profile-dup .user-name{ font-weight: 800; }
  .user-profile-dup .user-phone{ margin-left: .25rem; }
  .user-profile-dup .sub-text{
    margin-top:6px;
    color: #6b6b6b;
    font-size: clamp(14px, 3.5vw, 16px);
    margin: 0;
  }

/* Specific adjustments for rewards page profile card (#points-profile) to match index layout */
#points-profile { position: relative; display:flex; align-items:center; gap:16px; padding:56px 20px 24px; border: 1.5px solid var(--border-color); border-radius:20px; background:var(--card-background-color); margin-top:18px; }
#points-profile .profile-icon { position:absolute; top:-36px; left:50%; transform:translateX(-50%); width:96px; height:96px; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:0 4px 12px rgba(0,0,0,0.06); }
#points-profile .profile-icon img{ width:100%; height:100%; border-radius:50%; object-fit:cover; border:6px solid var(--card-background-color); }
#points-profile .profile-info{ margin-top:24px; text-align:center; flex:1; }
#points-profile .welcome-text{ font-size:20px; font-weight:700; margin:6px 0 2px; }
#points-profile .user-phone{ margin-left:6px; font-weight:700; }
#points-profile .points-sub{ color:var(--text-color-secondary); margin:0; font-size:0.95rem; }
#points-profile .points-display{ position: static; margin: 8px auto 0; }
#points-profile .points-display.points-display-large{ padding:0; border-radius:0; display:block; }
#points-profile .points-display.points-display-large .points-number{ font-size:28px; font-weight:800; color:var(--primary-color); text-align:center; }
#points-profile .points-display.points-display-large .points-label{ font-size:0.9rem; color:var(--text-color-secondary); margin-top:4px; text-align:center; }
#points-profile .btn-edit{ position:absolute; right:14px; top:12px; }
    /* show small red dot when profile is incomplete */
    .user-profile-dup .btn-edit.incomplete::after,
    #points-profile .btn-edit.incomplete::after {
        content: '';
        position: absolute;
        top: 6px;
        right: 6px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #dc3545;
        box-shadow: 0 0 0 2px var(--card-background-color);
    }

    /* make edit icon readable in dark mode: index icon should be black, rewards page icon stays white */
    .dark-mode #points-profile .btn-edit i { color: #ffffff; }
    .dark-mode .user-profile-dup .btn-edit i { color: #111111; }
    .dark-mode #points-profile .btn-edit,
    .dark-mode .user-profile-dup .btn-edit {
        border-color: rgba(255,255,255,0.12);
        background: transparent;
    }
/* dark-mode adjustments for profile text */
.dark-mode #points-profile .welcome-text, .dark-mode #points-profile .user-phone, .dark-mode #points-profile .points-sub { color: var(--text-color-primary); }
  @media (max-width: 420px){
    .user-profile-dup{ padding: 56px 18px 22px; margin-top: 30px; }
    .user-profile-dup .profile-icon{ width: 84px; height: 84px; }
    .user-profile-dup .profile-icon img{ border-width: 5px; }
    .user-profile-dup .welcome-text{ font-size: 20px; }
    .user-profile-dup .sub-text{ font-size: 15px; }
  }
  

  /* ถ้าหน้าจอกว้างน้อยกว่า 480px */
  @media (max-width: 480px) {
    .main-header h1 {
      font-size: 18px; /* ย่อขนาดลง */
    }
    .custom-confirm-box {
        width: 90%; /* ทำให้กล่องเล็กลง */
        padding: 20px; /* ลด padding */
      }
  }


  /* ถ้าหน้าจอกว้างน้อยกว่า 360px */
  @media (max-width: 360px) {
    .custom-confirm-box {
      width: 90%; /* ทำให้กล่องเล็กลง */
      padding: 20px; /* ลด padding */
    }
    .main-header h1 {
      font-size: 16px; /* ย่อเล็กลงอีก */
    }
  }

  .custom-btn {
    display: flex;
    flex-direction: column; /* วางเนื้อหาแนวตั้ง */
    align-items: center;    /* จัดกึ่งกลางแนวนอน */
    justify-content: center;/* จัดกึ่งกลางแนวตั้ง */
    gap: 4px;               /* ระยะห่างไอคอนกับข้อความ */
    padding: 10px 16px;
    border: 1px solid #000;
    border-radius: 8px;
    background-color: white;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    margin: auto;
  }

  .custom-btn i {
    font-size: 18px; /* ขนาดไอคอน */
    margin-top: 4px; /* ระยะห่างไอคอนกับข้อความ */
    color: #555;
  }
  .custom-btn span {
    color: #000;
  }

  



  /* ===== Branch list (new card style) ===== */
.branch-list { display: grid; gap: 18px; }

.branch-item{
    display:grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    column-gap:16px;
    align-items:center;
    padding:16px 0;
  }

.branch-divider {
  height: 1px;
  border: 0;
  background: #e9e9e9;
  margin: 0 6px;
}

/* รูป */
.branch-thumb{
    width:72px;height:72px;border-radius:16px;object-fit:cover;display:block;
  }

.branch-title{
    font-size:22px;font-weight:800;line-height:1.2;margin:0 0 6px 0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.branch-logo {
    width:64px; 
    height:64px; 
    border-radius:12px; 
    object-fit:cover; 
    background:#ffb70310; 
    border:1px solid #f1f1f1; 
}

.branch-info{
    display:flex;
    flex-direction:column;  /* <<< สำคัญ */
    align-items:flex-start;
    min-width:0;            /* กันข้อความล้น */
  }

/* --- Style for distance info in branch card --- */
.branch-info.distance {
    font-weight: 600; /* ทำให้เป็นตัวหนา */
    color: var(--primary-color); /* ใช้สีเหลืองหลักของธีม */
    font-size: 1em; /* เพิ่มขนาดตัวอักษรเล็กน้อย */
}

.branch-info.distance .fas {
    color: var(--primary-color); /* ทำให้ไอคอนเป็นสีเดียวกับข้อความ */
}
.branch-name {
    font-size:18px;
    font-weight:600;
    margin:0 0 4px 0;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    display:block;
    overflow-wrap:anywhere;
    word-break:break-word;
    color:var(--text-color-primary, #111);
}

.branch-distance {
  margin: 0;
  font-size: 15px;
  color: var(--text-color-secondary, #555);
}
.branch-distance strong { font-weight: 600; }

/* actions: จองคิว + โทรจอง */
.branch-actions {
    display: flex;        /* ใช้ flex แทน grid */
    align-items: center;  /* จัดปุ่มให้อยู่กลางแนวตั้ง */
    gap: 8px;              /* ระยะห่างระหว่างปุ่ม */
    margin-top: auto;
    white-space:nowrap;
  }

.btn-branch-book {
  padding: 10px 16px;
  border-radius: 14px;
  border: 2px solid #111;
  background: #f6b617; /* เหลือง */
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
}
.btn-branch-book[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

.btn-branch-book[disabled]{ opacity:.5; cursor:not-allowed; }

.btn-branch-call {
  display: grid;
  justify-items: center;
  gap: 4px;
  text-decoration: none;
  color: #111;
  font-weight: 700;
  font-size: 14px;
}
.btn-branch-call .icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
}
.btn-branch-call i { font-size: 14px;  margin-bottom: 20px;}
.btn-branch-call span { font-size: 14px;  color: var(--text-color-primary);}

  /* จอเล็ก: ลดไซส์แต่ “เลย์เอาต์เดิม” */
  @media (max-width: 390px){
    .branch-item{ grid-template-columns: 60px 1fr auto; column-gap:12px; }
    .branch-thumb{ width:60px;height:60px;border-radius:14px; }
    .branch-title{ font-size:19px; }
    .branch-name { font-size: 15px; margin: 0 0 0px 5px;}
    .branch-distance{ font-size:10px; margin: -5px 0 0 5px; }
    .btn-branch-book{ margin: 0 0 -25px 0; border-radius:16px; }
    .branch-actions{ gap:14px; }
    .branch-actions button {font-size: 10px;}
    .btn-branch-call span {margin-bottom: -50px;font-size: 10px;}
    .btn-branch-call .icon {margin-bottom: -30px;}


    .pagination-controls{ gap: 6px 8px; padding: 0 8px; }
    .pagination-controls .btn-secondary{ padding: 6px 10px; font-size: 13px; }
    .pagination-controls select{ max-width: 140px; font-size: 13px; }
  }
  
/* dark mode (ถ้าใช้ .dark-mode ที่ body อยู่แล้ว) */
.dark-mode .branch-divider { background: #2a2a2a; }
.dark-mode .branch-name { color: #f5f5f5; }
.dark-mode .branch-distance { color: #cfcfcf; }


.step { margin-bottom: 25px; }
.step h2 { font-size: 1.2em; border-bottom: 2px solid var(--primary-color); padding-bottom: 5px; margin-bottom: 15px; }
h2, .step h2 {
    font-size: clamp(18px, 2.8vw, 24px);
  }
 #branch-card-container{ display:grid; gap:20px; }


 .svc-grid{
    display:grid;
    grid-template-columns: repeat(2,1fr);
    gap:16px;
    margin-top:12px;
  }
  .svc-tile{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:8px; padding:22px 16px; border:2px solid var(--border-color);
    border-radius:22px; background:var(--card-background-color); cursor:pointer;
    transition:transform .12s, box-shadow .12s, border-color .12s;
  }
  .svc-tile .svc-ico{ font-size:32px; line-height:1; }
  .svc-tile .svc-title{ font-weight:800; font-size:1.25rem; }
  .svc-tile .svc-sub{ font-size:.95rem; color:var(--text-color-secondary); }
  .svc-tile:hover{ transform:translateY(-2px); box-shadow:var(--shadow-small); }
  .svc-tile.selected{
    border-color:var(--primary-color);
    box-shadow:0 0 0 3px rgba(255,199,0,.25);
    background:var(--primary-light-background);
    box-shadow: 0 4px 15px rgba(255, 204, 0, 0.2);
    opacity: 1;
  }

  .svc-checkbox {
    display: none;
}

.svc-tile {
    cursor: pointer;
    border: 2px solid #e0e0e0;
    transition: all 0.2s ease-in-out;
    opacity: 0.8;
}

.svc-ico svg {
    width: 2rem; /* กำหนดขนาด */
    height: 2rem;
    color: #333; /* สีปกติ */
  }
  

  .barber-badge-off{
    display:inline-block;
    margin-top:6px;
    padding:4px 8px;
    border-radius:999px;
    font-size:.8rem;
    background: var(--status-cancelled-bg, #6B3737);
    color: var(--status-cancelled-text, #FF8C8C);
  }
  .barber-card.barber-off{
    opacity:.6;
    filter:grayscale(20%);
    cursor:not-allowed;
  }



  /* เมื่อเป็น Dark Mode */
body.dark-theme .svc-ico svg {
    color: #fff; /* เปลี่ยนเป็นสีขาว */
  }

.fa-solid-sevice{
    margin-left: 15px;
}

.branch-subtext{
    display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; margin-top:2px;
  }
  
  .branch-popular{
    display:inline-flex; align-items:center; gap:6px;
    padding:3px 8px; border-radius:999px;
    background:rgba(255,214,10,.15); color:var(--text-branch-popular-color); font-size:12px; line-height:1.2;
  }
  .branch-popular i{ font-size:12px; color:#f59e0b; }
  
  /* สาขาเปิดใหม่ (สีเขียวอ่อน) */
  .branch-new{
    display:inline-flex; align-items:center; gap:6px;
    padding:3px 8px; border-radius:999px;
    background:rgba(16,185,129,.14); color:var(--text-brandnew-color); font-size:12px; line-height:1.2;
  }
  .branch-new i{ font-size:12px; }
  
  /* แสดงวันที่เข้าระบบเฉยๆ (เทาอ่อน) */
.branch-created{
    display:inline-flex; align-items:center; gap:6px;
    padding:3px 8px; border-radius:999px;
    background:rgba(107,114,128,.12); color:var(--text-branch-created-color); font-size:12px; line-height:1.2;
  }
  .branch-created i{ font-size:12px; }

  .branch-dev-debug-banner{
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #111;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
  }

  .branch-dev-inactive-badge{
    display:inline-flex; align-items:center; gap:6px;
    padding:3px 8px; border-radius:999px;
    background:#fff3cd; color:#7a4b00; font-size:12px; line-height:1.2; font-weight:700;
  }
  
  .branch-distance{ font-size:12px; color:#6b7280; }
  
  @media (max-width: 360px){
    .branch-popular, .branch-new, .branch-created, .branch-distance{ font-size:11px; }
  }
  
  /* กล่องรูป */
.status-modal-media{
    display:flex; justify-content:center;
    margin: 8px 0 10px;
    /* ค่าดีฟอลต์ ถ้าไม่ส่งจาก JS */
    --media-size: 160px;        /* ปรับค่าเริ่มต้นให้ใหญ่ขึ้นได้ที่นี่ */
  }
  
  /* รูปภาพในโมดัล */
  .status-modal-media img{
    width: var(--media-size);
    height: var(--media-size);
    object-fit: contain;
    display: block;
  
    /* กันล้นจอเล็ก: ไม่เกิน 64vw */
    max-width: 64vw;
    max-height: 64vw;
  }

  .subtext{
    font-size: 12px;
    color: #DC3545;
    margin-top: 20px;
    text-align: center;

  }

/* --- สไตล์สำหรับ Modal แก้ไขเบอร์โทร --- */
.edit-phone-input-group {
    margin: 6px 0 18px; 
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.edit-phone-input {
    width: 100%;
    padding: 12px;
    font-size: 1.2rem;
    text-align: center;
    background-color: var(--input-background-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-color-primary);
    letter-spacing: 2px; /* ทำให้ตัวเลขมีช่องไฟ อ่านง่าย */
}

.edit-phone-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.3);
}

.error-message {
    color: var(--button-danger-bg);
    font-size: 0.85rem;
    margin-top: 8px;
    text-align: center;
  }

/* --- Points History --- */

/* ปุ่มที่ทำให้ดูเหมือนข้อความที่คลิกได้ */
.btn-link-style {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: inherit;
}
.btn-link-style strong {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
}
.btn-link-style:hover strong {
    text-decoration-style: solid;
}

/* สไตล์สำหรับหน้าประวัติคะแนน */
#points-history-view h2 {
    text-align: center;
    color: var(--primary-color);
    margin-bottom: 20px;
}

#points-history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.points-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background-color: var(--input-background-color);
    border-radius: 8px;
    border-left: 4px solid; /* สีจะถูกกำหนดโดย class .points-earned หรือ .points-voided */
}

.points-history-item.points-earned {
    border-left-color: #28a745;
}
.points-history-item.points-voided {
    border-left-color: #dc3545;
}
body.dark-mode .points-history-item.points-earned { border-left-color: #34D399; }
body.dark-mode .points-history-item.points-voided { border-left-color: #F87171; }

.points-history-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.points-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-color-primary);
}

.points-details {
    font-size: 0.9em;
    color: var(--text-color-secondary);
}

.points-date {
    font-size: 0.8em;
    color: var(--text-color-secondary);
    margin-top: 4px;
}

.points-value {
    font-size: 1.3em;
    font-weight: 700;
    white-space: nowrap;
    margin-left: 15px;
}

.points-history-item.points-earned .points-value { color: #28a745; }
.points-history-item.points-voided .points-value { color: #dc3545; text-decoration: line-through; opacity: 0.7; }
body.dark-mode .points-history-item.points-earned .points-value { color: #34D399; }
body.dark-mode .points-history-item.points-voided .points-value { color: #F87171; }

.history-card .status.booked,
.history-card .status.payment_pending_confirmation,
.history-card .status.pending_payment,
.history-card .status.payment_expired,
.payment-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 700;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}

.history-card .status.booked {
    background-color: var(--status-confirmed-bg);
    color: var(--status-confirmed-text);
}

.history-card .status.pending_payment,
.payment-status-badge.waiting_for_payment,
.payment-status-badge.draft_created {
    background-color: #fff3cd;
    color: #8a6d1f;
}

.history-card .status.payment_pending_confirmation,
.payment-status-badge.payment_pending_confirmation {
    background-color: #e8f0ff;
    color: #244f99;
}

.payment-status-badge.payment_success {
    background-color: #e8f7ea;
    color: #1f7a38;
}

.history-card .status.payment_expired,
.payment-status-badge.payment_expired {
    background-color: #ffe5e5;
    color: #b42318;
}

.payment-pending-note {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--primary-light-background);
    color: var(--text-color-primary);
}

.payment-modal {
    max-width: 420px;
}

.payment-session-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0;
}

.payment-session-summary-item {
    background: var(--input-background-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px;
}

.payment-session-summary-item span {
    display: block;
    color: var(--text-color-secondary);
    font-size: 0.9rem;
    margin-bottom: 6px;
}

.payment-session-summary-item strong {
    font-size: 1.05rem;
    color: var(--text-color-primary);
}

.payment-qr-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    margin: 18px 0;
    padding: 14px;
    border-radius: 14px;
    background: var(--input-background-color);
    border: 1px dashed var(--border-color);
}

.payment-qr-container img {
    width: min(240px, 100%);
    border-radius: 12px;
    background: #fff;
    padding: 10px;
}

.payment-qr-payload {
    width: 100%;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-color-secondary);
}

.payment-reference {
    margin: 0 0 12px;
    color: var(--text-color-secondary);
    font-size: 0.9rem;
}

.payment-screenshot-note {
    margin: -6px 0 12px;
    color: var(--text-color-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.payment-actions {
    display: flex;
    flex-wrap: wrap;
}

.payment-actions .btn-primary,
.payment-actions .btn-secondary,
.payment-actions .btn-danger {
    text-align: center;
    text-decoration: none;
}

@media (max-width: 480px) {
    .payment-session-summary {
        grid-template-columns: 1fr;
    }
}

.legal-footer {
    max-width: 480px;
    margin: 18px auto 0;
    padding: 8px 12px 2px;
    text-align: center;
}

.legal-footer-links {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--text-color-secondary);
}

.legal-footer-links a {
    color: var(--text-color-secondary);
    text-decoration: none;
}

.legal-footer-links a:hover {
    color: var(--text-color-primary);
    text-decoration: underline;
}

.legal-footer-version {
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--text-color-secondary);
    opacity: 0.85;
}

.legal-doc-container {
    max-width: 760px;
    margin: 20px auto;
    padding: 20px;
    background: var(--card-background-color);
    border-radius: 12px;
    box-shadow: var(--shadow-small);
}

.legal-doc-container h1 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--text-color-primary);
}

.legal-doc-container h2 {
    margin-top: 20px;
    margin-bottom: 8px;
    color: var(--text-color-primary);
    font-size: 1.1rem;
}

.legal-doc-container p,
.legal-doc-container li {
    color: var(--text-color-secondary);
    line-height: 1.7;
}

.legal-doc-meta {
    margin-bottom: 16px;
    color: var(--text-color-secondary);
    font-size: 0.92rem;
}

.legal-doc-actions {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.legal-doc-actions .btn-primary,
.legal-doc-actions .btn-secondary {
    flex: 1 1 220px;
    min-width: 0;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.25;
    font-size: 16px;
    padding: 10px 14px;
    text-decoration: none;
}

@media (max-width: 420px) {
    .legal-doc-actions .btn-primary,
    .legal-doc-actions .btn-secondary {
        flex-basis: 100%;
    }
}