/* ==========================================================================
   หน้าแรกระบบจองเข้าชม - จองเข้าชมศูนย์การเรียนรู้ทีละขั้น (frontend/home/home + home/wizard/*)
   --------------------------------------------------------------------------
   สเกลเดียวกับหน้ากิจกรรมพิเศษ: เนื้อหาอยู่ใน .container (กว้างสุด 1320px) ขนาดเป็น px คงที่
   ไม่ขยายตาม vw - แบบดีไซน์วาดที่จอ 1920 ห้ามยกขนาดในภาพมาใช้ตรง ๆ
   แบนเนอร์ / breadcrumb / แท็บ 3 ช่อง อยู่ใน booking.css
   ========================================================================== */

.bw-page {
    --bw-navy:   #002777;
    --bw-text:   #1f2a44;
    --bw-muted:  #454f69;   /* WCAG AAA 7:1 (เดิม #636e88 = 5.1:1) */
    --bw-line:   #dfe5f0;
    --bw-field:  #cfd8e6;
    --bw-blue:   #3f6ad8;
    --bw-sky:    #e6edf9;
    --bw-green:  #0b5a3a;   /* WCAG AAA: ตัวขาวบนพื้นเขียว 8.3:1 (เดิม #12873d = 4.6:1) */
    --bw-amber:  #906600;   /* เดิม #d99a00 - ใช้เป็นตัวหนังสือบนพื้นเหลืองอ่อน ต้องผ่าน 4.5:1 */
    --bw-red:    #a8151c;   /* WCAG AAA 7:1 (เดิม #cc1d23 = 5.6:1) */
    --bw-shadow: 0 2px 14px rgba(0, 39, 119, .08);
    --bw-gap:    40px;   /* ช่องห่างระหว่างขั้นในแถบเลื่อน - ต้องกว้างกว่า padding ของ .bw-viewport */
    padding-bottom: 64px;
}

.bw-tabs { margin-top: 40px; }

.bw-head { margin: 40px 0 20px; }
.bw-head-title {
    margin: 0;
    color: var(--bw-navy);
    font-family: var(--bs-font-primary);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.35;
}
.bw-head-sub {
    margin: 4px 0 0;
    color: #3a4a72;
    font-size: 15px;
    line-height: 1.6;
}

/* ── แถบขั้นตอน ─────────────────────────────────────────────────────── */
.bw-steps {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 24px;
    padding: 14px 24px;
    list-style: none;
    background: #fff;
    border-radius: 8px;
    box-shadow: var(--bw-shadow);
}
.bw-step-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--bw-navy);
    font: inherit;
    text-align: left;
    cursor: default;
}
/* disabled = ยังกดไม่ได้ (ขั้นปัจจุบัน/ขั้นถัดไป) แต่ต้องไม่จางลงแบบปุ่ม disabled ทั่วไป */
.bw-step-btn:disabled { opacity: 1; color: var(--bw-navy); }
.bw-step.is-done .bw-step-btn:not(:disabled) { cursor: pointer; }
.bw-step.is-done .bw-step-btn:not(:disabled):hover .bw-step-label { text-decoration: underline; }
.bw-step-btn:focus-visible { outline: 3px solid rgba(85, 112, 208, .55); outline-offset: 4px; border-radius: 4px; }

.bw-step-no {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e9eef6;
    color: #8e98ae;
    font-weight: 700;
    font-size: 16px;
    transition: background-color .3s, color .3s;
}
.bw-step-no i {
    position: absolute;
    opacity: 0;
    transform: scale(.4);
    font-size: 14px;
    transition: opacity .25s, transform .25s;
}
.bw-step-no .num { transition: opacity .2s; }
.bw-step.is-active .bw-step-no { background: var(--bw-navy); color: #fff; }
.bw-step.is-done .bw-step-no   { background: var(--bw-green); color: #fff; }
.bw-step.is-done .bw-step-no .num { opacity: 0; }
.bw-step.is-done .bw-step-no i    { opacity: 1; transform: scale(1); }

.bw-step-label {
    font-family: var(--bs-font-primary);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.35;
}

/* ── โครง: ขั้นตอน (ซ้าย) | สรุปการจอง (ขวา ติดจอ) ───────────────────── */
.bw-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
}

/* ก่อน js ทำงาน: ทุกขั้นเรียงลงมา (ขั้นที่ 3 ยังว่าง ซ่อนไว้) */
.bw-panel + .bw-panel { margin-top: 24px; }
.bw-panel[data-step="3"] { display: none; }
.bw-panel > .bw-card + .bw-card { margin-top: 24px; }

/* js ทำงานแล้ว (.is-ready): ขั้นเรียงแนวนอนในแถบเลื่อน เห็นทีละขั้น
   viewport ขยายออก 16px รอบด้านเผื่อเงาการ์ดไม่ให้โดนตัด */
.bw.is-ready .bw-viewport {
    overflow: hidden;
    margin: -16px;
    padding: 16px;
}
.bw.is-ready .bw-track {
    display: flex;
    align-items: flex-start;
    gap: var(--bw-gap);
    transition: transform .5s cubic-bezier(.22, .8, .3, 1), height .35s ease;
    will-change: transform;
}
.bw.is-ready .bw-panel {
    flex: 0 0 100%;
    min-width: 0;
    margin-top: 0;
    opacity: .35;
    transition: opacity .4s ease;
}
.bw.is-ready .bw-panel.is-active { opacity: 1; }
.bw.is-ready .bw-panel[data-step="3"] { display: block; }
.bw.no-anim .bw-track,
.bw.no-anim .bw-panel { transition: none !important; }

/* ── การ์ด ─────────────────────────────────────────────────────────── */
.bw-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: var(--bw-shadow);
    padding: 24px;
}
.bw-card-head {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--bw-line);
}
.bw-card-head.is-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
}
.bw-card-title {
    margin: 0;
    color: var(--bw-navy);
    font-family: var(--bs-font-primary);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.35;
}
.bw-card-sub {
    margin: 2px 0 0;
    color: #454f69;
    font-size: 14px;
    line-height: 1.55;
}
.bw-card-body { padding-top: 20px; }

/* ── 1. ปฏิทิน ───────────────────────────────────────────────────────
   ตัวครอบที่โหลดใหม่ (.js-bw-calendar) เป็น display: contents
   ปุ่มเลื่อนเดือนจึงไปอยู่แถวเดียวกับหัวการ์ด (ชิดขวา) ส่วนตารางวันอยู่แถวล่าง */
.bw-card-cal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
}
.bw-card-cal .bw-card-head { grid-column: 1; grid-row: 1; border-bottom: 0; }
.bw-card-cal .js-bw-calendar { display: contents; }

.bw-month {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}
.bw-month-label {
    min-width: 128px;
    color: var(--bw-navy);
    font-family: var(--bs-font-primary);
    font-weight: 700;
    font-size: 18px;
    text-align: center;
}
.bw-month-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--bw-navy);
    font-size: 14px;
    cursor: pointer;
    transition: background-color .15s;
}
.bw-month-nav:hover:not(:disabled) { background: var(--bw-sky); }
.bw-month-nav:disabled { color: #c9d1e1; cursor: default; }
.bw-month-nav:focus-visible { outline: 3px solid rgba(85, 112, 208, .55); outline-offset: 1px; }

.bw-cal {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    row-gap: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--bw-line);
}
.bw-cal-dow {
    padding: 8px 0;
    color: var(--bw-navy);
    font-family: var(--bs-font-primary);
    font-weight: 700;
    font-size: 16px;
    text-align: center;
}
/* ช่องวัน = ปุ่มเต็มช่อง ตัวเลขเป็นวงกลมขนาดคงที่ (ไม่ยืดตามความกว้างคอลัมน์) */
.bw-day {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bw-text);
    font-size: 15px;
    cursor: pointer;
}
.bw-day span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    transition: background-color .15s, color .15s;
}
.bw-day:hover:not(:disabled):not(.is-selected) span { background: var(--bw-sky); }
.bw-day.is-today span { box-shadow: inset 0 0 0 1px #9fb2dc; }
.bw-day.is-muted { color: #50596d; } /* วันของเดือนข้างเคียงที่ยังกดจองได้ - บนพื้นขาว 7:1 (AAA) เดิม #a9b2c6 ได้ 2.13:1 */
.bw-day:disabled { color: #c3cbdb; cursor: default; }
.bw-day.is-selected span {
    background: var(--bw-green);
    color: #fff;
    font-weight: 700;
    box-shadow: none;
    animation: bw-pop .32s cubic-bezier(.34, 1.56, .64, 1);
}
.bw-day:focus-visible { outline: none; }
.bw-day:focus-visible span { outline: 3px solid rgba(85, 112, 208, .55); outline-offset: 1px; }

/* ── 2. รอบเวลา ──────────────────────────────────────────────────── */
.bw-date-pill {
    padding: 5px 18px;
    border-radius: 50rem;
    background: var(--bw-sky);
    color: var(--bw-navy);
    font-family: var(--bs-font-primary);
    font-weight: 700;
    font-size: 16px;
    white-space: nowrap;
}

.bw-slots { display: flex; flex-direction: column; gap: 12px; }
.bw-slot {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 52px;
    margin: 0;
    padding: 8px 18px;
    border: 1px solid var(--bw-field);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.bw-slot:hover:not(.is-disabled) { border-color: #9fb2dc; }
.bw-slot.is-selected { background: var(--bw-sky); border-color: #7f9be0; }
.bw-slot.is-disabled { background: #f3f4f7; cursor: not-allowed; }
.bw-slot input { position: absolute; opacity: 0; pointer-events: none; }
.bw-slot:has(input:focus-visible) { outline: 3px solid rgba(85, 112, 208, .55); outline-offset: 2px; }

/* radio วาดเอง */
.bw-slot-radio {
    flex: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid #9aa4bd;
    border-radius: 50%;
    transition: border-color .15s, border-width .15s;
}
.bw-slot.is-selected .bw-slot-radio { border: 4.5px solid var(--bw-blue); }
.bw-slot.is-disabled .bw-slot-radio { border-color: #c9d1e1; }

.bw-slot-time {
    flex: 1 1 auto;
    color: var(--bw-text);
    font-size: 15px;
    font-weight: 500;
}
/* รอบที่จองไม่ได้: บอกด้วยป้าย "ปิดรับจอง/เต็ม" ข้างหลัง - เวลายังต้องอ่านออก 7:1 */
.bw-slot.is-disabled .bw-slot-time { color: #454f69; }

/* ป้ายที่นั่ง - เขียว = ว่าง / เหลือง = ใกล้เต็ม / แดง = เต็ม / เทา = ปิดรับ */
.bw-pill {
    flex: none;
    padding: 4px 14px;
    border-radius: 50rem;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.bw-pill.is-available   { background: #e3f6ea; color: #0b5a3a; }
.bw-pill.is-nearly_full { background: #fff3d6; color: var(--bw-amber); }
.bw-pill.is-full        { background: #fde4e4; color: var(--bw-red); }
.bw-pill.is-closed      { background: #eceff4; color: #3d4660; }

.bw-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 16px;
    border: 1px dashed var(--bw-field);
    border-radius: 6px;
    color: var(--bw-muted);
    font-size: 15px;
    text-align: center;
}
.bw-empty i { font-size: 26px; color: #c3cee3; }

/* ระหว่างโหลดปฏิทิน/รอบ */
.bw .js-bw-calendar > *,
.bw .js-bw-slots { transition: opacity .2s; }
.bw.is-loading .js-bw-calendar > *,
.bw.is-loading .js-bw-slots { opacity: .5; pointer-events: none; }

/* ── 3. ฟอร์มผู้จอง ──────────────────────────────────────────────── */
.bw-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 16px;
}
.bw-field { min-width: 0; }
.bw-field.is-full { grid-column: 1 / -1; }

.bw-label {
    display: block;
    margin-bottom: 6px;
    color: var(--bw-navy);
    font-family: var(--bs-font-primary);
    font-weight: 700;
    font-size: 16px;
}
.bw-label .req { margin-left: 2px; color: var(--bw-red); }

.bw-input {
    display: block;
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--bw-field);
    border-radius: 4px;
    background: #fff;
    color: var(--bw-text);
    font-size: 15px;
    transition: border-color .15s, box-shadow .15s;
}
.bw-input::placeholder { color: #a3adc2; }
.bw-input:focus { outline: 0; border-color: var(--bw-blue); box-shadow: 0 0 0 3px rgba(63, 106, 216, .14); }
.bw-input.is-invalid { border-color: var(--bw-red); }
.bw-select {
    padding-right: 40px;
    appearance: none;
    background: #fff;
    cursor: pointer;
}
/* ลูกศรลงอยู่ที่กรอบครอบ (.bw-select-wrap::after) ไม่ใช่ background-image ของ select
   (WCAG: ตัวเลือกใน select ไม่ถูกมองว่าวางบนรูปพื้นหลัง) */
.bw-select-wrap { position: relative; display: block; }
.bw-select-wrap::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 12px;
    height: 8px;
    transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23002777' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
}

/* กลุ่มรอบเวลาเป็น <fieldset> (WCAG H71) - ไม่มีกรอบ/ระยะของ fieldset */
fieldset.bw-slots { margin: 0; padding: 0; border: 0; min-width: 0; }

.bw-consent { margin-top: 20px; }
.bw-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    color: var(--bw-text);
    font-size: 14px;
    line-height: 1.6;
    cursor: pointer;
}
.bw-check input {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    accent-color: var(--bw-navy);
}
.bw-check input.is-invalid { outline: 2px solid var(--bw-red); outline-offset: 1px; }
.bw-check a { color: var(--bw-navy); font-weight: 700; }

.bw-captcha { margin-top: 18px; }

.bw-error {
    margin-top: 5px;
    color: var(--bw-red);
    font-size: 13px;
}

/* ── แจ้งเตือนในการ์ด ─────────────────────────────────────────────── */
.bw-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.6;
}
.bw-alert[hidden] { display: none; }
.bw-alert i { margin-top: 4px; }
.bw-alert.is-danger  { background: #fde4e4; color: #a3161c; }
.bw-alert.is-warning { background: #fff5e0; color: #8a5a00; }

/* ── สรุปการจอง (ขวา) ─────────────────────────────────────────────── */
.bw-aside {
    position: sticky;
    top: 108px;   /* ใต้ header ที่ติดจอ (สูง 88px) + ระยะ 20px */
}
.bw-summary-title {
    margin: 0;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--bw-line);
    color: var(--bw-navy);
    font-family: var(--bs-font-primary);
    font-weight: 700;
    font-size: 22px;
}
.bw-summary-list { margin: 8px 0 0; }
.bw-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
}
.bw-summary-row[hidden] { display: none; }
.bw-summary-row dt { margin: 0; color: #454f69; font-size: 14px; font-weight: 400; white-space: nowrap; }
.bw-summary-row dd { margin: 0; color: var(--bw-text); font-size: 15px; font-weight: 600; text-align: right; }
.bw-summary-row.is-code dd { color: var(--bw-navy); font-size: 16px; font-weight: 700; letter-spacing: .02em; }

.bw-auto {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid #c9ebd6;
    border-radius: 6px;
    background: #ecf8f1;
}
.bw-auto-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #0b5a3a;
    font-size: 14px;
    font-weight: 700;
}
.bw-auto-desc { margin: 4px 0 0; color: #454f69; font-size: 13px; line-height: 1.6; }

.bw-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

/* ปุ่มตามขั้น: ขั้น 1 ถัดไป / ขั้น 2 ยืนยัน + ย้อนกลับ / ขั้น 3 จองรายการใหม่ (ไม่มี js = ยืนยันอย่างเดียว) */
.bw .js-bw-next,
.bw .js-bw-back,
.bw .js-bw-again { display: none; }
.bw.is-ready .js-bw-submit { display: none; }
.bw.is-ready[data-step="1"] .js-bw-next,
.bw.is-ready[data-step="2"] .js-bw-submit,
.bw.is-ready[data-step="2"] .js-bw-back,
.bw.is-done .js-bw-again { display: inline-flex; }

/* ── ปุ่ม ─────────────────────────────────────────────────────────── */
.bw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 24px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s, color .18s, border-color .18s, opacity .18s;
}
.bw-btn.is-primary { background: var(--bw-navy); color: #fff; }
.bw-btn.is-primary:hover { background: #0b3bb8; color: #fff; }
.bw-btn.is-outline { background: #fff; border-color: var(--bw-navy); color: var(--bw-navy); }
.bw-btn.is-outline:hover { background: var(--bw-navy); color: #fff; }
.bw-btn.is-ghost { background: #e9ecf1; color: #5b6784; }
.bw-btn.is-ghost:hover { background: #dde2ea; color: var(--bw-navy); }
.bw-btn.is-danger { background: #d82028; color: #fff; }
.bw-btn.is-danger:hover { background: #b81a21; color: #fff; }
.bw-btn:disabled { opacity: .45; cursor: not-allowed; }
.bw-btn:focus-visible { outline: 3px solid rgba(85, 112, 208, .55); outline-offset: 2px; }
.bw-btn:active:not(:disabled) { transform: translateY(1px); }

.bw-btn-spin {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: bw-spin .8s linear infinite;
}
.bw-btn.is-busy { opacity: .85; cursor: progress; }
.bw-btn.is-busy .bw-btn-spin { display: inline-block; }

/* ── ขั้นที่ 3: จองสำเร็จ ─────────────────────────────────────────── */
.bw-done-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--bw-line);
}
.bw-done-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bw-green);
    color: #fff;
    font-size: 24px;
    box-shadow: 0 0 0 8px #e3f6ea;
}
.bw.is-ready .bw-panel.is-active .bw-done-icon { animation: bw-pop .5s .25s cubic-bezier(.34, 1.56, .64, 1) both; }
.bw-done-title {
    margin: 0;
    color: var(--bw-navy);
    font-family: var(--bs-font-primary);
    font-weight: 700;
    font-size: 24px;
    outline: none;
}
.bw-done-sub { margin: 2px 0 0; color: #3a4a72; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.bw-done-sub strong { color: var(--bw-navy); }

.bw-done-body {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}
.bw-done-qr {
    width: 200px;
    height: 200px;
    padding: 10px;
    border: 1px solid var(--bw-line);
    border-radius: 8px;
    background: #fff;
}
.bw-done-qr svg { display: block; width: 100%; height: 100%; }
.bw-done-code-label { color: #454f69; font-size: 14px; }
.bw-done-code {
    display: inline-block;
    margin: 4px 0 12px;
    padding: 6px 18px;
    border-radius: 6px;
    background: var(--bw-sky);
    color: var(--bw-navy);
    font-family: var(--bs-font-primary);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: .03em;
}
.bw-done-list { margin: 0; }
.bw-done-list > div {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 12px;
    padding: 5px 0;
    font-size: 15px;
}
.bw-done-list dt { margin: 0; color: #454f69; font-weight: 400; }
.bw-done-list dd { margin: 0; color: var(--bw-text); font-weight: 600; overflow-wrap: anywhere; }
.bw-done-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
    color: #0b5a3a;
    font-size: 14px;
}
.bw-done-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--bw-line);
}

/* ── ลูกเล่น ──────────────────────────────────────────────────────── */
@keyframes bw-pop {
    0%   { transform: scale(.72); }
    60%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}
@keyframes bw-spin { to { transform: rotate(360deg); } }
@keyframes bw-shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}
.bw-shake { animation: bw-shake .5s cubic-bezier(.36, .07, .19, .97) both; }

@media (prefers-reduced-motion: reduce) {
    .bw.is-ready .bw-track,
    .bw.is-ready .bw-panel { transition: none; }
    .bw-day.is-selected span,
    .bw.is-ready .bw-panel.is-active .bw-done-icon,
    .bw-shake { animation: none !important; }
}

/* ── จอเล็ก ───────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) {
    .bw-layout { grid-template-columns: minmax(0, 1fr) 320px; }
}

/* สรุปการจองลงไปอยู่ใต้ขั้นตอน (ไม่ติดจอ) */
@media (max-width: 991.98px) {
    .bw-layout { grid-template-columns: minmax(0, 1fr); }
    .bw-aside { position: static; }
}

@media (max-width: 767.98px) {
    .bw-tabs { margin-top: 24px; }
    .bw-head { margin-top: 28px; }
    .bw-head-title { font-size: 22px; }

    /* แถบขั้นตอน: วงตัวเลขเรียงแถวเดียว ป้ายอยู่ใต้วง */
    .bw-steps { padding: 12px; gap: 8px; }
    .bw-step { flex: 1 1 0; min-width: 0; }
    .bw-step-btn { flex-direction: column; gap: 6px; width: 100%; text-align: center; }
    .bw-step-label { font-size: 13px; }

    .bw-card { padding: 18px 16px; }
    .bw-card-title { font-size: 20px; }

    .bw-card-cal { grid-template-columns: minmax(0, 1fr); }
    .bw-month { grid-column: 1; grid-row: 2; justify-content: center; margin: 0 0 8px; }
    .bw-cal { grid-row: 3; }
    .bw-cal-dow { font-size: 14px; }
    .bw-day span { width: 32px; height: 32px; }

    .bw-slot { gap: 12px; padding: 8px 12px; flex-wrap: wrap; }
    .bw-pill { margin-left: 28px; }

    .bw-form { grid-template-columns: minmax(0, 1fr); }

    .bw-done-head { align-items: flex-start; }
    .bw-done-body { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    .bw-done-info { width: 100%; text-align: center; }
    .bw-done-list > div { text-align: left; }
    .bw-done-actions .bw-btn { width: 100%; }
}

/* ==========================================================================
   ส่วนอื่นของหน้าแรก (.bh-*) - กิจกรรมพิเศษ / ตรวจสอบหรือยกเลิกการจอง / เงื่อนไขและวิธีการจอง
   ========================================================================== */

/* ปลายทางของแท็บ 3 ช่อง - เลื่อนมาแล้วหัวส่วนไม่จมใต้ header ที่ติดจอ */
.bh-anchor { scroll-margin-top: 108px; }   /* header 88px + 20px */

.bh-section { margin-top: 64px; }
/* แถบพื้นขาวเต็มความกว้าง (กิจกรรมพิเศษ) */
.bh-band {
    margin-top: 64px;
    padding: 64px 0;
    background: #fff;
}

.bh-head { margin-bottom: 28px; }
.bh-title {
    margin: 0;
    color: var(--bw-navy);
    font-family: var(--bs-font-primary);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.35;
}
.bh-sub {
    margin: 4px 0 0;
    color: #3a4a72;
    font-size: 15px;
    line-height: 1.6;
}

/* ── กิจกรรมพิเศษ (การ์ด = event-list.css) ── */
.bh-more {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

/* ── ตรวจสอบหรือยกเลิกการจอง ── */
.bh-check {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 28px;
    align-items: start;
}
.bh-card-title {
    margin: 0 0 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--bw-line);
    color: var(--bw-navy);
    font-family: var(--bs-font-primary);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.35;
}
.bh-lookup .bw-field + .bw-field { margin-top: 18px; }
.bh-lookup-actions { margin-top: 24px; }

.bh-result-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 220px;
    color: var(--bw-muted);
    font-size: 15px;
    line-height: 1.6;
    text-align: center;
}
.bh-result-empty p { margin: 0; }
.bh-result-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bw-sky);
    color: var(--bw-navy);
    font-size: 22px;
}

.bh-result-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--bw-line);
}
.bh-result-label { color: #454f69; font-size: 14px; }
.bh-result-code {
    color: var(--bw-navy);
    font-family: var(--bs-font-primary);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: .02em;
    overflow-wrap: anywhere;
}

/* สถานะ - โทนจาก Booking::status_tone / BookingEventRegistration::status_tone */
.bh-status {
    flex: none;
    padding: 5px 14px;
    border-radius: 50rem;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.bh-status.is-success   { background: #e3f6ea; color: #0b5a3a; }
.bh-status.is-danger    { background: #fde4e4; color: var(--bw-red); }
.bh-status.is-info      { background: var(--bw-sky); color: var(--bw-navy); }
.bh-status.is-warning   { background: #fff3d6; color: var(--bw-amber); }
.bh-status.is-secondary { background: #eceff4; color: #3d4660; }

.bh-result-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
}
.bh-result-list { margin: 0; }
.bh-result-list > div {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 8px;
    padding: 5px 0;
    font-size: 15px;
    line-height: 1.5;
}
.bh-result-list dt {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    color: #454f69;
    font-weight: 400;
}
.bh-result-list dt i { width: 16px; color: var(--bw-navy); font-size: 13px; text-align: center; }
.bh-result-list dd { margin: 0; color: var(--bw-text); font-weight: 700; overflow-wrap: anywhere; }

.bh-result-qr {
    width: 148px;
    height: 148px;
    padding: 7px;
    border: 1px solid var(--bw-line);
    border-radius: 6px;
    background: #fff;
}
.bh-result-qr svg { display: block; width: 100%; height: 100%; }

.bh-result-note { margin: 16px 0 0; }

.bh-result-actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 14px;
    margin-top: 22px;
}

/* ── เงื่อนไขและวิธีการจอง ── */
.bh-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 44px;
    margin: 0;
    padding: 22px 28px;
    list-style: none;
    border-radius: 6px;
    background: var(--bw-navy);
    color: #fff;
}
.bh-flow-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
/* ลูกศรระหว่างขั้น - วางกลางช่องห่าง */
.bh-flow-step:not(:last-child)::after {
    content: "\2192";
    position: absolute;
    top: 50%;
    right: -31px;
    transform: translateY(-50%);
    font-size: 20px;
    line-height: 1;
}
.bh-flow-no {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    color: var(--bw-navy);
    font-weight: 700;
    font-size: 17px;
}
.bh-flow-title {
    display: block;
    font-family: var(--bs-font-primary);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
}
.bh-flow-desc {
    display: block;
    margin-top: 2px;
    color: #c9d3ee;
    font-size: 13px;
    line-height: 1.45;
}

.bh-notes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin-top: 40px;
}
.bh-note-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
    border-radius: 6px;
    background: var(--bw-sky);
    color: var(--bw-navy);
    font-size: 20px;
}
.bh-note-title {
    margin: 0 0 6px;
    color: var(--bw-navy);
    font-family: var(--bs-font-primary);
    font-weight: 700;
    font-size: 18px;
}
.bh-note-desc {
    margin: 0;
    color: var(--bw-muted);
    font-size: 14px;
    line-height: 1.7;
}

/* ── จอเล็ก ── */
@media (max-width: 1199.98px) {
    /* 4 ใบ: แถวละ 2 ดีกว่า 3+1 */
    .bh-events.el-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
    .bh-check { grid-template-columns: minmax(0, 1fr); }
    .bh-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; }
    .bh-flow-step::after { display: none; }
    .bh-notes { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

@media (max-width: 767.98px) {
    .bh-section,
    .bh-band { margin-top: 48px; }
    .bh-band { padding: 48px 0; }
    .bh-title { font-size: 22px; }
    .bh-card-title { font-size: 20px; }
}

@media (max-width: 575.98px) {
    .bh-events.el-grid { grid-template-columns: minmax(0, 1fr); }
    .bh-flow { grid-template-columns: minmax(0, 1fr); padding: 20px; }
    .bh-result-body { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    .bh-result-list { width: 100%; }
    .bh-result-actions { grid-auto-flow: row; }
}