/* วางแผนการเดินทาง (passenger planner) — tv- visual language */
.tv-plan{ width: min(900px, calc(100% - 2rem)); margin: 1rem auto 3rem; }
.tv-plan-title{ color: #540906; font-size: 1.6rem; display: flex; align-items: center; gap: .6rem; margin: .5rem 0 1rem; }
[data-bs-theme="dark"] .tv-plan-title{ color: #cf8983; }

.tv-plan-card{ background: #fff; border: 1px solid #e8edf3; border-radius: 1rem; padding: 1.1rem 1.2rem; box-shadow: 0 2px 10px rgba(16,24,40,.06); }
[data-bs-theme="dark"] .tv-plan-card{ background: #1d1f24; border-color: #2c2f37; box-shadow: none; }
.tv-plan-field{ display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.tv-plan-field > label{ font-size: .82rem; font-weight: 600; color: #6b7280; }
[data-bs-theme="dark"] .tv-plan-field > label{ color: #9aa4b2; }

.tv-plan-od{ display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: .7rem; }
.tv-plan-swap{ border: 1.5px solid #d8bdbb; background: #fff; color: #540906; width: 2.4rem; height: 2.4rem; border-radius: 50%; flex: 0 0 auto; margin-bottom: .15rem; cursor: pointer; transition: .12s; }
.tv-plan-swap:hover{ background: #f7ecec; border-color: #540906; }
[data-bs-theme="dark"] .tv-plan-swap{ background: #2a2a2a; border-color: #4a4a4a; color: #cf8983; }

.tv-plan-when{ display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: .7rem; margin-top: .9rem; }
.tv-plan-seg{ display: inline-flex; background: #f3ebeb; border-radius: 999px; padding: .2rem; gap: .15rem; }
[data-bs-theme="dark"] .tv-plan-seg{ background: #2a3340; }
.tv-seg{ border: 0; background: transparent; color: #41506a; font-weight: 600; font-size: .9rem; padding: .35rem .85rem; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: .12s; }
.tv-seg.active{ background: #540906; color: #fff; }
[data-bs-theme="dark"] .tv-seg{ color: #9aa4b2; } [data-bs-theme="dark"] .tv-seg.active{ background: #540906; color: #fff; }

.tv-plan-actions{ display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }
.tv-plan-sort{ display: flex; flex-direction: column; gap: .25rem; }
.tv-plan-sort label{ font-size: .82rem; font-weight: 600; color: #6b7280; }
.tv-plan-sort select{ min-width: 200px; }
.tv-plan-search{ border: 0; background: #540906; color: #fff; border-radius: .7rem; padding: .7rem 1.6rem; font-size: 1.05rem; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; transition: .12s; }
.tv-plan-search:hover{ background: #3a0604; }

/* responsive */
@media (max-width: 640px){
    .tv-plan-when{ grid-template-columns: 1fr; }
    .tv-plan-actions{ flex-direction: column; align-items: stretch; }
    .tv-plan-sort select{ width: 100%; }
    .tv-plan-search{ justify-content: center; }
    .tv-plan-seg{ flex-wrap: wrap; }
}

/* warning วันอดีต [ข้อ 5] */
.tv-plan-warn{ background: #fff3cd; border: 1px solid #ffe69c; border-radius: .8rem; padding: 1rem 1.1rem; margin-top: 1rem; }
.tv-plan-warn-txt{ color: #8a6d00; font-weight: 600; margin-bottom: .7rem; }
.tv-plan-warn-act{ display: flex; gap: .6rem; flex-wrap: wrap; }
.tv-plan-warn-yes{ border: 0; background: #540906; color: #fff; border-radius: .6rem; padding: .45rem 1.1rem; font-weight: 600; cursor: pointer; }
.tv-plan-warn-no{ border: 1.5px solid #d8bdbb; background: #fff; color: #41506a; border-radius: .6rem; padding: .45rem 1.1rem; font-weight: 600; cursor: pointer; }
[data-bs-theme="dark"] .tv-plan-warn{ background: #3a3413; border-color: #5a5020; } [data-bs-theme="dark"] .tv-plan-warn-txt{ color: #e6cf6a; }

.tv-plan-msg{ text-align: center; color: #6b7280; font-weight: 600; padding: 2rem 1rem; }
[data-bs-theme="dark"] .tv-plan-msg{ color: #9aa4b2; }

/* journey cards */
.tv-jcard{ background: #fff; border: 1px solid #e8edf3; border-left: 4px solid #540906; border-radius: .8rem; padding: .9rem 1.1rem; margin-top: .8rem; cursor: pointer; transition: box-shadow .14s, transform .08s; }
.tv-jcard:hover{ box-shadow: 0 5px 16px rgba(16,24,40,.1); transform: translateY(-1px); }
[data-bs-theme="dark"] .tv-jcard{ background: #1d1f24; border-color: #2c2f37; border-left-color: #cf8983; }
.tv-jhead{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.tv-jtime{ display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.45rem; color: #1c2b45; }
[data-bs-theme="dark"] .tv-jtime{ color: #e4ebf5; }
.tv-jt-arrow{ font-size: 1rem; opacity: .5; }
.tv-jdur{ color: #16864a; font-weight: 700; font-size: .95rem; }
[data-bs-theme="dark"] .tv-jdur{ color: #5fcf8b; }
.tv-jtrains{ display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-top: .5rem; }
.tv-jtrain{ background: #004AAD; color: #fff; font-weight: 700; font-size: .9rem; padding: .12rem .55rem; border-radius: .4rem; }
.tv-jsep{ opacity: .4; font-size: .8rem; }
.tv-jbadges{ display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .55rem; }
.tv-jbadge{ font-size: .8rem; font-weight: 600; padding: .15rem .6rem; border-radius: 999px; }
.tv-jbadge-direct{ background: #e3f4e9; color: #1f7a3d; }
.tv-jbadge-trf{ background: #e7e9ee; color: #41506a; }
.tv-jbadge-warn{ background: #fff3cd; color: #8a6d00; }
[data-bs-theme="dark"] .tv-jbadge-direct{ background:#16361f; color:#7fd69b; } [data-bs-theme="dark"] .tv-jbadge-trf{ background:#2c3340; color:#aeb9c9; } [data-bs-theme="dark"] .tv-jbadge-warn{ background:#3a3413; color:#e6cf6a; }

.tv-plan-more{ text-align: center; margin-top: 1rem; }
.tv-plan-morebtn{ border: 1.5px solid #d8bdbb; background: #fff; color: #540906; border-radius: 999px; padding: .5rem 1.5rem; font-weight: 600; cursor: pointer; }
[data-bs-theme="dark"] .tv-plan-morebtn{ background: #2a2a2a; border-color: #4a4a4a; color: #cf8983; }

/* modal */
.tv-plan-mhead{ align-items: flex-start; }
.tv-plan-mtitle{ font-size: 1.2rem; color: #1c2b45; }
[data-bs-theme="dark"] .tv-plan-mtitle{ color: #e4ebf5; }
.tv-plan-mdate{ font-size: .85rem; color: #6b7280; margin-top: .15rem; }
.tv-plan-live{ background: #f4e4e4; color: #540906; font-weight: 600; font-size: .85rem; padding: .5rem .8rem; border-radius: .6rem; margin-bottom: .9rem; }
[data-bs-theme="dark"] .tv-plan-live{ background: #2a1614; color: #cf8983; }
.tv-leg{ border-left: 2px dashed #d8bdbb; padding: 0 0 .3rem 1rem; margin-left: .5rem; position: relative; }
.tv-leg-train{ display: flex; align-items: center; gap: .5rem; margin: .5rem 0 .35rem; flex-wrap: wrap; }
.tv-leg-route{ font-size: .82rem; color: #6b7280; }
.tv-leg-stop{ display: flex; align-items: center; gap: .5rem; font-size: .98rem; margin: .2rem 0; color: #29415f; }
[data-bs-theme="dark"] .tv-leg-stop{ color: #c7d4e6; }
.tv-leg-time{ font-weight: 700; min-width: 3.2rem; }
.tv-leg-late{ color: #e04a3a; font-size: .82rem; font-weight: 600; }
.tv-leg-early{ color: #0d52c2; font-size: .82rem; font-weight: 600; }
.tv-leg-transfer{ background: #f4f8fd; color: #41506a; font-size: .85rem; font-weight: 600; padding: .35rem .7rem; border-radius: .5rem; margin: .5rem 0; }
.tv-leg-transfer.tight{ background: #fff3cd; color: #8a6d00; }
[data-bs-theme="dark"] .tv-leg-transfer{ background: #232730; color: #aeb9c9; }
.tv-leg-tip{ background: #f7ecec; color: #540906; font-size: .85rem; padding: .45rem .7rem; border-radius: .5rem; margin-top: .5rem; }
[data-bs-theme="dark"] .tv-leg-tip{ background: #2a1614; color: #cf8983; }

/* ── planner ฝังในกล่องค้นหา (#searchType) — compact ── */
.tv-plan-embed{ padding: .4rem .1rem .1rem; }
.tv-plan-embed *{ max-width: 100%; }
.tv-plan-embed .tv-plan-field > label{ font-size: .76rem; margin-bottom: .08rem; }
.tv-plan-embed .form-select, .tv-plan-embed .form-control{ font-size: .92rem; padding: .35rem .6rem; }
.tv-plan-embed .select2-container{ text-align: left; }
.tv-plan-embed .select2-selection--single{ height: calc(1.5em + .7rem + 2px) !important; }
.tv-plan-embed .select2-selection__rendered{ line-height: calc(1.5em + .5rem) !important; }
.tv-plan-embed .select2-selection__arrow{ height: calc(1.5em + .7rem) !important; }
/* O-D */
.tv-plan-embed .tv-plan-od{ margin-bottom: .5rem; grid-template-columns: 1fr auto 1fr; gap: .5rem; }
.tv-plan-embed .tv-plan-swap{ width: 2rem; height: 2rem; }
/* ค้นหาจาก: seg เต็มแถว 3 ปุ่มเท่ากัน */
.tv-plan-basis{ margin-bottom: .5rem; }
.tv-plan-embed .tv-plan-basis .tv-plan-seg{ display: grid; grid-template-columns: 1fr 1fr 1fr; width: 100%; }
.tv-plan-embed .tv-seg{ font-size: .82rem; padding: .3rem .15rem; text-align: center; }
/* filter: วัน + เวลา/ขบวน แถวเดียวกัน */
.tv-plan-filter{ display: grid; grid-template-columns: 1fr 1.3fr; gap: .55rem; align-items: end; margin-bottom: .55rem; }
.tv-plan-time2{ display: flex; align-items: center; gap: .25rem; }
.tv-plan-time2 .form-select{ text-align: center; }
.tv-plan-colon{ font-weight: 700; }
/* เรียงตาม + ค้นหา */
.tv-plan-embed .tv-plan-actions{ display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .6rem; margin-top: 0; }
.tv-plan-embed .tv-plan-sort{ min-width: 0; } .tv-plan-embed .tv-plan-sort select{ min-width: 0; width: 100%; }
.tv-plan-embed .tv-plan-search{ padding: .5rem 1.1rem; font-size: .96rem; white-space: nowrap; }
.tv-jbadge-board{ background: #f4e4e4; color: #540906; }
[data-bs-theme="dark"] .tv-jbadge-board{ background:#2a1614; color:#cf8983; }
.tv-plan-livetoggle{ display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: #6b7280; margin: 0 0 .5rem; cursor: pointer; }
.tv-plan-livetoggle input{ cursor: pointer; }
[data-bs-theme="dark"] .tv-plan-livetoggle{ color: #9aa4b2; }
/* จอเล็กมาก: filter/actions เป็น 1 คอลัมน์ */
@media (max-width: 440px){ .tv-plan-filter{ grid-template-columns: 1fr; } .tv-plan-embed .tv-plan-actions{ grid-template-columns: 1fr; } .tv-plan-embed .tv-plan-search{ justify-content:center; } }

/* ════ หน้าผลวางแผนการเดินทาง /v3/plan/ (plan-page.js) ════ */
.pp-wrap{ max-width: 1100px; }
.pp-head{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pp-head h4{ color: #1c2b45; } [data-bs-theme="dark"] .pp-head h4{ color: #e4ebf5; }
.pp-home{ text-decoration: none; color: #540906; font-weight: 600; white-space: nowrap; }
[data-bs-theme="dark"] .pp-home{ color: #cf8983; }
.pp-formcard{ border-radius: 1rem; }
.pp-formcard .tv-plan-embed{ padding: .3rem .1rem 0; }

.pp-hint{ text-align: center; color: #6b7280; font-weight: 600; padding: 2.5rem 1rem; }
[data-bs-theme="dark"] .pp-hint{ color: #9aa4b2; }
.pp-banner{ background: #f6eaea; color: #540906; font-size: .9rem; font-weight: 600; padding: .55rem .85rem; border-radius: .6rem; margin-bottom: .6rem; }
.pp-banner-live{ background: #fff3cd; color: #8a6d00; }
[data-bs-theme="dark"] .pp-banner{ background: #2a1614; color: #cf8983; } [data-bs-theme="dark"] .pp-banner-live{ background: #3a3413; color: #e6cf6a; }
.pp-warn{ background: #fff3cd; border: 1px solid #ffe69c; border-radius: .8rem; padding: 1.2rem; text-align: center; }
.pp-warn-txt{ color: #8a6d00; font-weight: 700; margin-bottom: .8rem; }
[data-bs-theme="dark"] .pp-warn{ background:#3a3413; border-color:#5a5020; } [data-bs-theme="dark"] .pp-warn-txt{ color:#e6cf6a; }

/* ตาราง cols */
.pp-table table{ font-size: .9rem; }
.pp-table thead th{ background: #25324a; color: #fff; vertical-align: middle; font-weight: 600; white-space: nowrap; }
.pp-th-train{ background: #004AAD !important; }
.pp-th-xfer{ background: #c8870d !important; }
.pp-table tbody td{ vertical-align: top; }
/* คอลัมน์ "เส้นทาง" (แรกสุด) — กันหดจนอ่านยากเมื่อมีหลายขบวน + ตรึงไว้ซ้ายขณะเลื่อนตารางแนวนอน */
.pp-table th:first-child, .pp-table td:first-child{ min-width: 185px; position: sticky; left: 0; z-index: 1; }
.pp-table tbody td:first-child{ background: #fff; }
[data-bs-theme="dark"] .pp-table tbody td:first-child{ background: #1d1f24; }
.pp-row-gone td:first-child{ background: #faf0ee !important; }
[data-bs-theme="dark"] .pp-row-gone td:first-child{ background: #2a1f1d !important; }
.pp-legcell{ min-width: 175px; }
.pp-xfercell{ background: #fff7e6; min-width: 110px; }
[data-bs-theme="dark"] .pp-xfercell{ background: #2c2718; }
.pp-train b{ color: #004AAD; } [data-bs-theme="dark"] .pp-train b{ color: #6ea8fe; }
.pp-dep, .pp-dur{ font-weight: 700; white-space: nowrap; }
.pp-dur{ color: #16864a; } [data-bs-theme="dark"] .pp-dur{ color: #5fcf8b; }
.pp-badge{ display: inline-block; font-size: .78rem; font-weight: 600; padding: .12rem .5rem; border-radius: 999px; }
.pp-badge-direct{ background: #e3f4e9; color: #1f7a3d; }
.pp-badge-xfer{ background: #fdeccd; color: #8a5a00; }
.pp-badge-joint{ background: #e4eefb; color: #0d52c2; }
[data-bs-theme="dark"] .pp-badge-direct{ background:#16361f; color:#7fd69b; } [data-bs-theme="dark"] .pp-badge-xfer{ background:#3a2f13; color:#e6b860; } [data-bs-theme="dark"] .pp-badge-joint{ background:#16263f; color:#7fb0f5; }
.pp-strike{ color: #9aa4b2; text-decoration: line-through; }
.pp-late{ color: #e04a3a; font-weight: 600; white-space: nowrap; }
.pp-early{ color: #0d52c2; font-weight: 600; }
.pp-sub{ font-size: .78rem; color: #6b7280; margin-top: .15rem; }
.pp-sub-danger{ color: #e04a3a; font-weight: 600; }
.pp-board{ color: #540906; font-weight: 600; margin-top: .2rem; } [data-bs-theme="dark"] .pp-board{ color:#cf8983; }
.pp-tip{ background: #f7ecec; color: #540906; font-size: .78rem; padding: .35rem .5rem; border-radius: .4rem; margin-top: .35rem; }
[data-bs-theme="dark"] .pp-tip{ background:#2a1614; color:#cf8983; }

/* infinite scroll: ตัวโหลดเพิ่ม + ท้ายรายการ */
.pp-sentinel{ text-align: center; color: #6b7280; padding: 1.1rem; font-weight: 600; }
.pp-end{ text-align: center; color: #9aa4b2; padding: .9rem; font-size: .85rem; }
[data-bs-theme="dark"] .pp-sentinel{ color: #9aa4b2; }

/* ── checkbox live-time: ขนาดปกติ (กันใหญ่เกิน) + ปุ่มค้นหาเต็มแถวหลังย้าย sort ออก ── */
.tv-plan-livetoggle input[type="checkbox"]{ width: .95rem; height: .95rem; min-width: .95rem; transform: none; flex: 0 0 auto; accent-color: #540906; margin: 0; }
.tv-plan-actions-search{ display: block; }
.tv-plan-actions-search .tv-plan-search{ width: 100%; justify-content: center; }

/* ── แถบตัวกรอง/เรียง เหนือผลค้นหา ── */
.pp-filterbar{ display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; align-items: center; padding: .5rem .1rem .7rem; margin-bottom: .5rem; border-bottom: 1px solid #e8edf3; }
.pp-fgroup{ display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.pp-flabel{ font-size: .8rem; color: #6b7280; font-weight: 600; }
.pp-chip{ border: 1.5px solid #d8bdbb; background: #fff; color: #41506a; border-radius: 999px; padding: .25rem .75rem; font-size: .82rem; font-weight: 600; cursor: pointer; transition: .12s; }
.pp-chip:hover{ border-color: #540906; color: #540906; }
.pp-chip.active{ background: #540906; color: #fff; border-color: #540906; }
.pp-fsel{ border: 1.5px solid #d8bdbb; border-radius: .5rem; padding: .22rem .55rem; font-size: .82rem; background: #fff; color: #29415f; }
[data-bs-theme="dark"] .pp-filterbar{ border-bottom-color: #2c2f37; }
[data-bs-theme="dark"] .pp-flabel{ color: #9aa4b2; }
[data-bs-theme="dark"] .pp-chip{ background: #2a2a2a; border-color: #4a4a4a; color: #c7d4e6; }
[data-bs-theme="dark"] .pp-chip:hover{ border-color: #cf8983; color: #cf8983; }
[data-bs-theme="dark"] .pp-chip.active{ background: #540906; color: #fff; border-color: #540906; }
[data-bs-theme="dark"] .pp-fsel{ background: #232323; border-color: #4a4a4a; color: #e6edf3; }

/* ── layout: sidebar ตัวกรอง (gutter ซ้าย นอก container) + ผลค้นหา ── */
/* ขยายออกนอก container (ใช้ที่ว่างด้านข้าง) → sidebar ไปอยู่ gutter ซ้าย, ผลกว้างขึ้น */
.pp-layout{ display: flex; gap: 1.3rem; align-items: flex-start; width: min(1480px, calc(100vw - 1.5rem)); margin-left: 50%; transform: translateX(-50%); }
.pp-results{ flex: 1 1 auto; min-width: 0; }
.pp-sidebar{ flex: 0 0 220px; width: 220px; background: #f7f9fc; border: 1px solid #e8edf3; border-radius: .8rem; padding: .9rem; position: sticky; top: 1rem; }
.pp-sidebar .pp-fgroup{ display: block; margin-bottom: .9rem; }
.pp-sidebar .pp-fgroup:last-child{ margin-bottom: 0; }
.pp-flabel{ display: block; font-size: .8rem; color: #6b7280; font-weight: 700; margin-bottom: .4rem; }
.pp-chips{ display: flex; flex-wrap: wrap; gap: .35rem; }
.pp-sidebar .pp-fsel{ width: 100%; }
.pp-filter-toggle{ display: none; border: 1.5px solid #d8bdbb; background: #fff; color: #540906; border-radius: .6rem; padding: .4rem .9rem; font-weight: 600; font-size: .9rem; cursor: pointer; margin-bottom: .6rem; align-items: center; gap: .4rem; }
[data-bs-theme="dark"] .pp-sidebar{ background: #1d2127; border-color: #2c2f37; }
[data-bs-theme="dark"] .pp-filter-toggle{ background: #2a2a2a; border-color: #4a4a4a; color: #cf8983; }
@media (max-width: 820px){
  .pp-layout{ display: block; }
  .pp-filter-toggle{ display: inline-flex; }
  .pp-sidebar{ display: none; width: auto; position: static; margin-bottom: .7rem; }
  .pp-sidebar.open{ display: block; }
  .pp-sidebar .pp-fgroup{ display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
  .pp-flabel{ margin-bottom: 0; }
}
/* ปุ่ม "ตอนนี้" ในแถวเวลา */
.tv-plan-now{ border: 1.5px solid #d8bdbb; background: #f7ecec; color: #540906; border-radius: .5rem; padding: .2rem .55rem; font-size: .82rem; font-weight: 600; cursor: pointer; white-space: nowrap; flex: 0 0 auto; }
.tv-plan-now:hover{ background: #efdcdc; border-color: #540906; }
[data-bs-theme="dark"] .tv-plan-now{ background: #2a1614; border-color: #4a4a4a; color: #cf8983; }

/* เตือน "ขบวนนี้ออกไปแล้ว" (live + ออกก่อนเวลาปัจจุบัน) */
.pp-sub-gone{ color: #9a6a00; font-weight: 700; }
[data-bs-theme="dark"] .pp-sub-gone{ color: #e6c057; }

/* "ขบวนนี้ออกไปแล้ว" — ป้ายแดงเด่น + หรี่ทั้งแถว (text เทา, badge ยังเด่น) */
.pp-gone-badge{ display: inline-flex; align-items: center; gap: .3rem; background: #e04a3a; color: #fff; font-weight: 700; font-size: .8rem; padding: .22rem .65rem; border-radius: .5rem; margin-bottom: .4rem; box-shadow: 0 1px 5px rgba(224,74,58,.4); }
.pp-row-gone{ background: #faf0ee; }
.pp-row-gone .pp-legcell, .pp-row-gone .pp-dep, .pp-row-gone td .small, .pp-row-gone .pp-dur{ color: #a39794; }
.pp-row-gone .pp-train b{ color: #a39794; }
[data-bs-theme="dark"] .pp-row-gone{ background: #2a1f1d; }
[data-bs-theme="dark"] .pp-row-gone .pp-legcell, [data-bs-theme="dark"] .pp-row-gone .pp-dep, [data-bs-theme="dark"] .pp-row-gone td .small, [data-bs-theme="dark"] .pp-row-gone .pp-dur, [data-bs-theme="dark"] .pp-row-gone .pp-train b{ color: #8a807e; }

/* ── จุดเปลี่ยนรถ (transfer cell) — cross-station layout + ปุ่มรายละเอียด ── */
.pp-xfercell{ vertical-align: middle; min-width: 9rem; text-align: center; }
.pp-xf-icon{ color: #540906; font-size: 1rem; margin: .2rem 0; display: block; text-align: center; }
.pp-xf-stn{ font-size: .9rem; line-height: 1.25; text-align: center; }
/* เลขขบวนรถเรา = ลิงก์ดูตารางเวลา (qType=22) */
.pp-train-link{ color: inherit; text-decoration: none; cursor: pointer; }
.pp-train-link:hover{ text-decoration: underline; }
.pp-train-link .pp-train-cal{ font-size: .78rem; opacity: .55; margin-left: .1rem; }
[data-bs-theme="dark"] .pp-train-link .pp-train-cal{ opacity: .7; }
.pp-xf-lbl{ font-size: .72rem; color: #8a93a3; font-weight: 600; }
.pp-xf-self{ color: #b3631a; font-weight: 700; margin-top: .15rem; }
.pp-xf-more{ border: 1px solid #d8bdbb; background: #fff; color: #540906; font-size: .76rem; font-weight: 600; padding: .12rem .55rem; border-radius: 999px; margin-top: .35rem; cursor: pointer; transition: .12s; }
.pp-xf-more:hover{ background: #f7ecec; }
.pp-xf-more.open{ background: #f4e4e4; }
.pp-xf-det{ margin-top: .35rem; text-align: left; background: #f6f8fb; border-radius: .5rem; padding: .4rem .55rem; }
[data-bs-theme="dark"] .pp-xf-icon{ color: #cf8983; }
[data-bs-theme="dark"] .pp-xf-lbl{ color: #7c869a; }
[data-bs-theme="dark"] .pp-xf-self{ color: #e0a060; }
[data-bs-theme="dark"] .pp-xf-more{ background: #2a2a2a; border-color: #4a4a4a; color: #cf8983; }
[data-bs-theme="dark"] .pp-xf-more.open{ background: #2a1614; }
[data-bs-theme="dark"] .pp-xf-det{ background: #232730; }

/* สถานีลง/ขึ้น "ตรงขบวน" ที่เป็นการเปลี่ยนข้ามสถานี (เดินเอง) — สีต่าง + ดาว [#7] */
.pp-stn-cross{ color: #b3631a; font-weight: 700; }
.pp-cross-star{ color: #b3631a; font-size: .7em; margin-left: 1px; }
[data-bs-theme="dark"] .pp-stn-cross, [data-bs-theme="dark"] .pp-cross-star{ color: #e0a060; }

/* รอขบวนแรกนานเกิน 6 ชม. → mark "รอนาน" [#11] */
.pp-longwait{ color: #b3631a; font-weight: 600; }
.pp-longwait-tag{ background: #fff1df; color: #b3631a; font-weight: 700; font-size: .72rem; padding: .08rem .4rem; border-radius: 999px; margin-left: .2rem; white-space: nowrap; }
[data-bs-theme="dark"] .pp-longwait{ color: #e0a060; }
[data-bs-theme="dark"] .pp-longwait-tag{ background: #3a2c18; color: #e0a060; }

/* รายละเอียดการเปลี่ยนสถานี (hub tips) ในปุ่มรายละเอียด — จัดเป็นรายการ [#1b] */
.pp-xf-dethead{ font-weight: 700; font-size: .78rem; color: #29415f; margin-bottom: .3rem; }
.pp-xf-tip{ display: flex; gap: .4rem; align-items: flex-start; font-size: .78rem; line-height: 1.35; color: #41506a; margin-bottom: .35rem; }
.pp-xf-tip i{ color: #540906; margin-top: .15rem; flex: 0 0 auto; }
[data-bs-theme="dark"] .pp-xf-dethead{ color: #c7d4e6; }
[data-bs-theme="dark"] .pp-xf-tip{ color: #aeb9c9; }
[data-bs-theme="dark"] .pp-xf-tip i{ color: #cf8983; }

/* เดินเชื่อมสถานีข้างเคียง (walk เช่น บางซื่อ↔อภิวัฒน์) — teal แยกจาก self(ส้ม)/train(น้ำเงิน)/brand(maroon) [#3] */
.pp-xf-walk{ color: #0d8a7d; font-weight: 600; }
.pp-stn-walk{ color: #0d8a7d; font-weight: 700; }
.pp-walk-star{ color: #0d8a7d; font-size: .7em; margin-left: 1px; }
[data-bs-theme="dark"] .pp-xf-walk, [data-bs-theme="dark"] .pp-stn-walk, [data-bs-theme="dark"] .pp-walk-star{ color: #4fbfb0; }

/* รถไฟฟ้าสายสีแดง — แดง (#d6322a) แยกจากเลขขบวน รฟท. */
.pp-metro-name{ color: #d6322a; }
.pp-train-metro{ font-weight: 700; }
.pp-xf-metro{ color: #d6322a; font-weight: 700; margin-top: .15rem; }
.pp-stn-metro{ color: #d6322a; font-weight: 700; }
.pp-metro-star{ color: #d6322a; font-size: .7em; margin-left: 1px; }
.pp-metro-svc{ color: #8a8f99; font-weight: 500; }
[data-bs-theme="dark"] .pp-metro-name, [data-bs-theme="dark"] .pp-xf-metro,
[data-bs-theme="dark"] .pp-stn-metro, [data-bs-theme="dark"] .pp-metro-star{ color: #f08a82; }
[data-bs-theme="dark"] .pp-metro-svc{ color: #9aa0aa; }