/* ==========================================================================
   หน้ารายละเอียดกิจกรรมพิเศษ (/events/{slug}) - booking/events/show + events/detail/*
   --------------------------------------------------------------------------
   โหลดต่อจาก booking.css (ตัวแปร --bk-* / breadcrumb / ปุ่ม / ฟอร์ม) และ event-list.css
   (ป้ายสถานะ .el-badge ป้ายที่นั่ง .el-seats ปุ่ม .el-btn และการ์ดในสไลด์ที่เกี่ยวข้อง .el-card)
   สเกลเดียวกับหน้ารายละเอียดกิจกรรมของ mrta-news: เนื้อหาใน .container (กว้างสุด 1320px) ขนาดเป็น px
   การ์ดเนื้อหาแคบกว่าแถวการ์ดที่เกี่ยวข้อง (ตามแบบ ~82%) อยู่กึ่งกลาง
   ========================================================================== */

.ed-page { padding-top: 40px; }

.ed-card {
    max-width: 1080px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(33, 48, 105, .10);
}

/* ── รูปปก 15:7 + ป้ายสถานะ (ซ้ายบน) + ป้ายที่นั่ง (ขวาบน) ─────────────── */
.ed-cover {
    position: relative;
    display: grid;
    margin: 0;
    aspect-ratio: 15 / 7;
    background: var(--bk-navy-soft);
    overflow: hidden;
}
.ed-cover > * { grid-area: 1 / 1; }
.ed-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ed-cover .el-badge {
    margin: 24px 0 0 24px;
    padding: 3px 10px;
    font-size: 14px;
}
.ed-cover-seats {
    position: relative;
    z-index: 1;
    align-self: start;
    justify-self: end;
    margin: 24px 24px 0 0;
    padding: 6px 16px;
    font-size: 15px;
}

.ed-body { padding: 22px 26px 26px; }

/* ── วันและเวลา | สถานที่ | ระยะเวลาลงทะเบียน ─────────────────────────── */
.ed-info {
    display: flex;
    align-items: flex-start;
    margin: 0 0 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--bk-line);
}
.ed-info-item { min-width: 0; }
.ed-info-item + .ed-info-item {
    margin-left: 24px;
    padding-left: 24px;
    border-left: 1px solid var(--bk-line);
}
.ed-info dt {
    margin-bottom: 2px;
    color: var(--bk-text);
    font-family: var(--bs-font-primary);
    font-weight: 600;
    font-size: 19px;
    line-height: 1.4;
}
.ed-info dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    color: var(--bk-navy);
    font-size: 15px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}
.ed-info dd i {
    margin-right: 6px;
    font-size: 13px;
}
.ed-info-sep {
    width: 1px;
    height: 13px;
    margin: 0 10px;
    background: #c9d2e3;
}

/* ── ชื่อ + รายละเอียด (เนื้อหาจากตัวแก้ไขข้อความ - คุมรูป/ตาราง/วิดีโอไม่ให้ล้นกรอบ) ── */
.ed-title {
    margin: 0 0 12px;
    color: #002777;
    font-family: var(--bs-font-primary);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.ed-content {
    margin: 0;
    color: var(--bk-text);
    font-size: 15px;
    line-height: 1.85;
    overflow-wrap: anywhere;
}
.ed-content > :first-child { margin-top: 0; }
.ed-content > :last-child { margin-bottom: 0; }
.ed-content img,
.ed-content iframe { max-width: 100%; height: auto; border-radius: 6px; }
.ed-content iframe { aspect-ratio: 16 / 9; width: 100%; border: 0; }
.ed-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.ed-content th,
.ed-content td { padding: .5rem .75rem; border: 1px solid var(--bk-line); }
.ed-content a { color: #3f6ad8; }
.ed-empty { color: var(--bk-muted); }

/* ── แชร์ + ปุ่มลงทะเบียน (ชิดขวาใต้เส้นคั่น) ─────────────────────────── */
.ed-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px 24px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--bk-line);
}
.ed-register {
    width: auto;
    min-width: 150px;
    border: 0;
}
/* บัญชีนี้ลงทะเบียนแล้ว */
.ed-register.is-done {
    gap: 8px;
    background: #e6f6ec;
    color: #187d40; /* เดิม #1d9a4f เข้มขึ้นให้ผ่าน 4.5:1 */
    cursor: default;
}
.ed-register.is-done:hover { background: #e6f6ec; color: #187d40; }

/* กล่องแชร์ (component share-box) - "Share :" แล้วตามด้วยปุ่มไอคอนกว้างเท่ากัน คั่นด้วยเส้นตั้ง
   ชุดเดียวกับหน้ารายละเอียดของ mrta-news (.nw-detail-share .nw-sharebox) */
.bk-sharebox {
    display: flex;
    align-items: center;
    min-height: 44px;
}
.bk-sharebox-label {
    flex: none;
    padding-right: 8px;
    color: var(--bk-text);
    font-size: 15px;
    white-space: nowrap;
}
.bk-sharebox-btn {
    display: flex;
    flex: 0 0 60px;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--bk-line);
    background: transparent;
    color: #002777;
    font-size: 18px;
    text-decoration: none;
    cursor: pointer;
    transition: color .15s;
}
.bk-sharebox-list,
.bk-sharebox-list > li { display: contents; }
.bk-sharebox-list > li:first-child > .bk-sharebox-btn { border-left: 0; }
.bk-sharebox-btn:hover { color: var(--bk-red); }
.bk-sharebox-btn:focus-visible { outline: 3px solid rgba(85, 112, 208, .55); outline-offset: 2px; border-radius: 6px; }

/* หน้าต่าง QR */
.bk-qr {
    width: min(360px, calc(100% - 32px));
    padding: 0;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 20, 70, .3);
}
.bk-qr::backdrop { background: rgba(10, 25, 60, .55); }
.bk-qr-inner {
    position: relative;
    padding: 28px 24px 24px;
    text-align: center;
}
.bk-qr-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--bk-muted);
    font-size: 18px;
    cursor: pointer;
}
.bk-qr-close:hover { background: var(--bk-navy-soft); color: var(--bk-navy); }
.bk-qr-title {
    margin: 0 0 16px;
    color: #002777;
    font-family: var(--bs-font-primary);
    font-weight: 600;
    font-size: 18px;
}
.bk-qr-code { display: flex; justify-content: center; }
.bk-qr-code svg { width: 200px; height: 200px; }
.bk-qr-link {
    display: flex;
    gap: 8px;
    margin-top: 18px;
}
.bk-qr-link input {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #c9d2e3;
    border-radius: 6px;
    background: var(--bk-page);
    color: var(--bk-text);
    font-size: 13px;
}
.bk-qr-link .bk-btn {
    gap: 6px;
    height: 40px;
    padding: 0 14px;
    font-size: 14px;
}

/* ══════════════════════════════════════════════════════════════════════
   หน้าต่างลงทะเบียน (detail/_register_modal) - เลือกวิธียืนยัน / QR / อีเมล / สำเร็จ / ไม่สำเร็จ
   + หน้ายืนยันจากลิงก์อีเมล-QR (events/confirm) ใช้ชิ้นส่วนเดียวกัน (.bk-reg-title / -event / -code / -btn)
   ══════════════════════════════════════════════════════════════════════ */
.bk-reg-dialog { max-width: 860px; }
.bk-reg-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-top: 10px solid #002777;
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(0, 20, 70, .3);
}
.bk-reg-step { padding: 28px 32px 30px; }

.bk-reg-head { margin-bottom: 22px; }
.bk-reg-title {
    margin: 0;
    color: #002777;
    font-family: var(--bs-font-primary);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.35;
}
.bk-reg-sub {
    margin: 4px 0 0;
    color: #3a4a72;
    font-size: 15px;
    line-height: 1.6;
}
.bk-reg-sub strong { color: #002777; }

/* ── ปุ่ม: รอง (เทา) / หลัก (กรมท่า) จัดกึ่งกลาง ── */
.bk-reg-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 28px;
}
.bk-reg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 110px;
    min-height: 46px;
    padding: 10px 28px;
    border: 0;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s, color .18s;
}
.bk-reg-btn.is-primary { min-width: 200px; background: #002777; color: #fff; }
.bk-reg-btn.is-primary:hover { background: #0b3bb8; color: #fff; }
.bk-reg-btn.is-secondary { background: #e9ecf1; color: #8e98ae; }
.bk-reg-btn.is-secondary:hover { background: #dde2ea; color: #5b6784; }
.bk-reg-btn:focus-visible { outline: 3px solid rgba(85, 112, 208, .55); outline-offset: 2px; }
.bk-reg-btn-spin {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: bk-reg-spin .8s linear infinite;
}
.bk-reg-btn.is-busy { pointer-events: none; opacity: .85; }
.bk-reg-btn.is-busy .bk-reg-btn-spin { display: inline-block; }
@keyframes bk-reg-spin { to { transform: rotate(360deg); } }

/* ── 1. เลือกวิธียืนยัน: การ์ดตัวเลือก 3 ใบ ── */
.bk-reg-methods {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.bk-reg-method {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 186px;
    padding: 18px 18px 16px;
    border: 1.5px solid #34488f;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: background-color .15s, box-shadow .15s;
}
.bk-reg-method:hover { box-shadow: 0 6px 18px rgba(0, 39, 119, .1); }
.bk-reg-method.is-selected { background: #f3f6fd; }
.bk-reg-method input { position: absolute; opacity: 0; pointer-events: none; }
.bk-reg-method:has(input:focus-visible) { outline: 3px solid rgba(85, 112, 208, .55); outline-offset: 2px; }
.bk-reg-method-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-bottom: 14px;
    border-radius: 7px;
    background: #e8eefb;
    color: #002777;
    font-size: 16px;
}
.bk-reg-method.is-selected .bk-reg-method-icon { background: #002777; color: #fff; }
/* ปุ่มวงกลม (radio) วาดเอง */
.bk-reg-radio {
    position: absolute;
    top: 26px;
    right: 18px;
    width: 18px;
    height: 18px;
    border: 1.5px solid #8e98ae;
    border-radius: 50%;
}
.bk-reg-method.is-selected .bk-reg-radio { border: 5px solid #002777; }
.bk-reg-method-title {
    color: #002777;
    font-family: var(--bs-font-primary);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.4;
}
.bk-reg-method-desc {
    margin-top: 2px;
    color: #636e88;
    font-size: 13px;
    line-height: 1.55;
}
.bk-reg-method-extra {
    margin-top: auto;
    padding-top: 10px;
    color: #3a4a72;
    font-size: 14px;
    overflow-wrap: anywhere;
}
.bk-reg-flag { display: none; }
.bk-reg-method.is-selected .bk-reg-flag { display: inline; }

/* ── 2. รอยืนยัน (QR / อีเมล): QR ซ้าย | สถานะ ขั้นตอน เวลาที่เหลือ ขวา ── */
.bk-reg-wait {
    display: grid;
    grid-template-columns: 172px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
.bk-reg-qr {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    padding: 10px;
    border: 1px solid #d5ddec;
    border-radius: 6px;
    background: #fff;
    transition: opacity .2s, filter .2s;
}
.bk-reg-qr svg { width: 100%; height: auto; display: block; }
.bk-reg-qr.is-icon { background: #f3f6fd; color: #002777; font-size: 52px; }
.is-expired .bk-reg-qr { opacity: .35; filter: grayscale(1); }

.bk-reg-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    border-radius: 50rem;
    background: #e8eefb;
    color: #002777;
    font-size: 14px;
    font-weight: 500;
}
.bk-reg-status-dot {
    width: 12px;
    height: 12px;
    border: 2px solid #002777;
    border-right-color: transparent;
    border-radius: 50%;
    animation: bk-reg-spin 1s linear infinite;
}
.is-expired .bk-reg-status { background: #fde6e8; color: var(--bk-red); }
.is-expired .bk-reg-status-dot { border-color: var(--bk-red); animation: none; }

.bk-reg-steps {
    margin: 12px 0 4px;
    padding-left: 22px;
    color: #002777;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.75;
}
.bk-reg-hint {
    margin: 0 0 12px;
    color: #636e88;
    font-size: 13px;
}
.bk-reg-timer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border: 1px solid #e1e7f2;
    border-radius: 8px;
    background: #f8fafd;
}
.bk-reg-timer-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: #636e88;
    font-size: 13px;
    line-height: 1.6;
}
.bk-reg-timer-count {
    flex: none;
    color: #002777;
    font-size: 17px;
    font-variant-numeric: tabular-nums;
}
.is-expired .bk-reg-timer-count { color: var(--bk-red); }
.bk-reg-renew {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 0;
    border: 0;
    background: none;
    color: #002777;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.bk-reg-renew:hover:not(:disabled) { color: var(--bk-red); }
.bk-reg-renew:disabled { color: #a9b3c8; cursor: default; }

/* ── 3. สำเร็จ / ไม่สำเร็จ ── */
.bk-reg-head.is-result {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.bk-reg-result-text { flex: 1; min-width: 0; }
.bk-reg-result-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: #fff;
    font-size: 22px;
}
.bk-reg-result-icon.is-success { background: #22a35a; }
.bk-reg-result-icon.is-error { background: var(--bk-red); }
.bk-reg-code {
    flex: none;
    padding: 8px 16px;
    border-radius: 8px;
    background: #e6f6ec;
    text-align: center;
}
.bk-reg-code small {
    display: block;
    color: #5b6a8f;
    font-size: 12px;
}
.bk-reg-code strong {
    display: block;
    color: #187d40;
    font-size: 18px;
    letter-spacing: .02em;
}
.bk-reg-event {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 12px;
    border: 1px solid #e1e7f2;
    border-radius: 10px;
    background: #f8fafd;
}
.bk-reg-event img {
    flex: none;
    width: 116px;
    aspect-ratio: 16 / 10;
    border-radius: 6px;
    object-fit: cover;
}
.bk-reg-event-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.bk-reg-event-info strong {
    color: #002777;
    font-family: var(--bs-font-primary);
    font-size: 16px;
    line-height: 1.45;
}
.bk-reg-event-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    color: #16306b;
    font-size: 14px;
}
.bk-reg-event-meta i { margin-right: 6px; font-size: 12px; }
.bk-reg-event-sep {
    width: 1px;
    height: 12px;
    margin: 0 10px;
    background: #c9d2e3;
}
.bk-reg-note {
    display: flex;
    gap: 10px;
    align-items: baseline;
    margin: 16px 0 0;
    padding: 10px 14px;
    border-radius: 8px;
    background: #e8eefb;
    color: #16306b;
    font-size: 13px;
}
.bk-reg-note i { color: #002777; }

/* ── หน้ายืนยันจากลิงก์อีเมล / QR (events/confirm) ── */
.bk-confirm { padding-top: 40px; }
.bk-confirm-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 560px;
    margin: 0 auto;
    padding: 28px;
    border-top: 10px solid #002777;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 28px rgba(22, 48, 107, .1);
    text-align: center;
}
.bk-confirm-card .bk-reg-result-icon { margin: 0 auto; }
.bk-confirm-card .bk-reg-event,
.bk-confirm-card .bk-reg-note { text-align: left; margin-top: 0; }
.bk-reg-code.is-block { align-self: center; padding: 10px 28px; }
.bk-confirm-who {
    margin: 0;
    color: #636e88;
    font-size: 14px;
}
.bk-confirm-who dd {
    margin: 2px 0 0;
    color: #002777;
    font-weight: 700;
    font-size: 17px;
}
.bk-confirm-who small {
    display: block;
    color: #636e88;
    font-weight: 400;
    font-size: 13px;
}
.bk-confirm-form .bk-reg-btn { width: 100%; }
.bk-confirm-error {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 0;
    color: var(--bk-red);
    font-size: 14px;
}
.bk-confirm-back {
    color: #002777;
    font-weight: 600;
    text-decoration: none;
}
.bk-confirm-back:hover { color: var(--bk-red); }

@media (max-width: 767.98px) {
    .bk-reg-step { padding: 22px 18px 24px; }
    .bk-reg-title { font-size: 22px; }
    .bk-reg-methods { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .bk-reg-method { min-height: 0; }
    .bk-reg-wait { grid-template-columns: minmax(0, 1fr); }
    .bk-reg-qr { width: 200px; margin: 0 auto; }
    .bk-reg-head.is-result { flex-wrap: wrap; }
    .bk-reg-code { width: 100%; }
    .bk-reg-foot .bk-reg-btn { flex: 1 1 0; min-width: 0; padding-inline: 12px; }
}

/* ── กิจกรรมพิเศษที่เกี่ยวข้อง (สไลด์การ์ด เห็นทีละ 4 ใบ) ─────────────────── */
.ed-related { margin-top: 56px; }
.ed-related-title {
    margin: 0 0 24px;
    color: #002777;
    font-family: var(--bs-font-primary);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.35;
}

/* ความกว้างการ์ด = (ความกว้างแถว - ช่องว่าง) / จำนวนใบ - ใช้คำนวณตำแหน่งลูกศรให้อยู่กลางรูปการ์ดด้วย (cqw) */
.ed-slider {
    --ed-cols: 4;
    --ed-gap: 28px;
    --ed-card-w: calc((100cqw - (var(--ed-cols) - 1) * var(--ed-gap)) / var(--ed-cols));
    position: relative;
    container-type: inline-size;
}
.ed-slider-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--ed-card-w);
    gap: var(--ed-gap);
    /* เผื่อเงา/การ์ดลอยตอน hover ไม่ให้โดนตัด */
    margin: -8px 0 -20px;
    padding: 8px 0 20px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.ed-slider-track::-webkit-scrollbar { display: none; }
.ed-slider-track > * { scroll-snap-align: start; }

/* ลูกศรวงกลมขาว ครึ่งหนึ่งยื่นออกนอกแถว กึ่งกลางความสูงรูปการ์ด (16:10) */
.ed-slider-nav {
    position: absolute;
    z-index: 2;
    top: calc(var(--ed-card-w) / 1.6 / 2);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 20, 70, .18);
    color: #002777;
    font-size: 20px;
    transform: translateY(-50%);
    cursor: pointer;
    transition: opacity .2s, color .15s;
}
.ed-slider-nav.is-prev { left: -26px; }
.ed-slider-nav.is-next { right: -26px; }
.ed-slider-nav:hover:not(:disabled) { color: var(--bk-red); }
.ed-slider-nav:disabled { opacity: .35; cursor: default; }
.ed-slider-nav:focus-visible { outline: 3px solid rgba(85, 112, 208, .55); outline-offset: 2px; }
.ed-slider.is-static .ed-slider-nav { display: none; }

/* ── จอเล็ก ─────────────────────────────────────────────────────────────── */
@media (max-width: 1399.98px) {
    .ed-slider-nav.is-prev { left: -14px; }
    .ed-slider-nav.is-next { right: -14px; }
}
@media (max-width: 1199.98px) {
    .ed-title { font-size: 22px; }
    .ed-info dt { font-size: 18px; }
    .ed-slider { --ed-cols: 3; --ed-gap: 24px; }
}
@media (max-width: 991.98px) {
    .ed-slider { --ed-cols: 2; }
}
@media (max-width: 767.98px) {
    .ed-body { padding: 18px; }
    .ed-cover .el-badge { margin: 12px 0 0 12px; font-size: 13px; }
    .ed-cover-seats { margin: 12px 12px 0 0; padding: 4px 12px; font-size: 13px; }

    /* ข้อมูลเรียงลงมา เส้นคั่นเป็นแนวนอน */
    .ed-info { flex-direction: column; }
    .ed-info-item + .ed-info-item {
        margin: 14px 0 0;
        padding: 14px 0 0;
        border-left: 0;
        border-top: 1px solid var(--bk-line);
    }

    .ed-slider-nav { width: 42px; height: 42px; font-size: 16px; }
    .ed-slider-nav.is-prev { left: 4px; }
    .ed-slider-nav.is-next { right: 4px; }
}
@media (max-width: 575.98px) {
    .ed-title { font-size: 20px; }
    .ed-foot { justify-content: stretch; }
    .bk-sharebox { flex: 1 1 100%; }
    .bk-sharebox-btn { flex: 1 1 0; }
    .ed-register { flex: 1 1 100%; }
    /* เห็นใบถัดไปโผล่มานิดหนึ่ง ให้รู้ว่าปัดได้ */
    .ed-slider { --ed-cols: 1.15; --ed-gap: 16px; }
}