/* Thai Train Ticket Tools. Everything is scoped to .ttb* and inherits the theme's font and text colour.
   Colours come from Settings > Train Tools (--ttb-c = buttons, --ttb-p = prices). */
.ttb, .ttb-btn, .ttb-price { --ttb-c: #3835ea; --ttb-p: #dc2626; }
.ttb { margin: 1.5em 0; font-size: 17px; line-height: 1.5; color: inherit; }
.ttb *, .ttb *::before, .ttb *::after { box-sizing: border-box; }
.ttb .ttb-title { margin: 0 0 .6em; font-weight: 600; font-size: 1.1em; }
.ttb .ttb-head { margin: 0 0 .7em; font-size: 20px; font-weight: 600; line-height: 1.35; }
.ttb .ttb-note { margin: .8em 0 0; font-size: 15px; opacity: .8; }
.ttb .ttb-more { margin: .8em 0 0; font-size: 16px; }
.ttb .ttb-err { margin: .8em 0 0; color: #b42318; }
.ttb a:focus-visible, .ttb button:focus-visible, .ttb select:focus-visible, .ttb input:focus-visible, .ttb-btn:focus-visible { outline: 3px solid var(--ttb-c); outline-offset: 2px; }

/* buttons */
.ttb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border: 0; border-radius: 10px; background: var(--ttb-c); color: #fff !important; font: inherit; font-weight: 500; line-height: 1.2; text-decoration: none !important; cursor: pointer; transition: filter .15s; }
.ttb-btn:hover { filter: brightness(.9); color: #fff !important; }
.ttb-btn.ttb-sm { padding: 7px 16px; font-size: 16px; }

/* inline price */
.ttb-price { color: var(--ttb-p); font-weight: 600; white-space: nowrap; }

/* timetable */
.ttb .ttb-tw { overflow-x: auto; }
.ttb .ttb-tbl { width: 100%; margin: 0; border-collapse: collapse; border: 0; background: none; }
.ttb .ttb-tbl th, .ttb .ttb-tbl td { font-size: 17px; padding: 12px 12px; border: 0; border-bottom: 1px solid rgba(128, 128, 128, .28); background: none; text-align: left; vertical-align: middle; white-space: nowrap; }
.ttb .ttb-tbl th { color: inherit; font-size: 15px; font-weight: 500; text-transform: none; letter-spacing: 0; }
/* themes often stripe rows or set white header text: neutralise it so the table always reads clearly */
.ttb .ttb-tbl, .ttb .ttb-tbl thead, .ttb .ttb-tbl tbody, .ttb .ttb-tbl tr, .ttb .ttb-tbl td { background: none !important; }
.ttb .ttb-tbl th { background: rgba(128, 128, 128, .14) !important; }
.ttb .ttb-tbl tr.main:has(+ tr.opt) td { border-bottom: 0; }
.ttb .ttb-tbl .c-price { color: var(--ttb-p); }
.ttb .ttb-tbl .c-price strong { font-size: 18px; font-weight: 600; }
.ttb .ttb-cls { display: block; font-size: 14px; font-weight: 400; color: inherit; opacity: .75; }
.ttb .ttb-nd { display: block; font-size: 13px; font-weight: 400; opacity: .7; }
.ttb .ttb-tag { margin-left: 6px; padding: 1px 8px; border: 1px solid rgba(128, 128, 128, .4); border-radius: 999px; font-size: 13px; font-weight: 400; opacity: .85; }

/* other classes */
.ttb details.ttb-fares { margin: 0; padding: 4px 0 0; border: 0; background: none; }
.ttb .ttb-fares summary { padding: 6px 0; cursor: pointer; font-size: 16px; font-weight: 500; color: var(--ttb-c); }
.ttb .ttb-fares ul { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.ttb .ttb-fares li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; font-size: 17px; border: 1px solid rgba(128, 128, 128, .28); border-radius: 10px; }
.ttb .ttb-fares .fn { flex: 1; min-width: 0; }
.ttb .ttb-fares .fp { color: var(--ttb-p); font-weight: 600; white-space: nowrap; }

/* live date bar + search form */
.ttb .ttb-live { margin-top: 1em; }
.ttb .ttb-datebar { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.ttb label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 15px; font-weight: 400; }
.ttb select, .ttb input[type="date"] { width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 8px 12px; border: 1px solid rgba(128, 128, 128, .5); border-radius: 10px; background: transparent; color: inherit; font: inherit; font-size: 16px; }
.ttb .ttb-datebar input[type="date"] { width: auto; }
.ttb .ttb-st { margin: 0; font-size: 16px; opacity: .85; }
.ttb .ttb-out { margin-top: 12px; }
.ttb .ttb-form { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 170px) auto; gap: 10px; align-items: end; }
.ttb .ttb-swap { width: 44px; height: 44px; padding: 0; border: 1px solid rgba(128, 128, 128, .5); border-radius: 10px; background: transparent; color: inherit; font-size: 18px; cursor: pointer; }
.ttb .ttb-form .ttb-btn { min-height: 44px; }
.ttb .ttb-search .ttb-st { margin-top: 10px; }

/* route summary */
.ttb .ttb-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ttb .ttb-card { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid rgba(128, 128, 128, .28); border-left: 4px solid var(--ttb-c); border-radius: 12px; }
.ttb .ttb-card .k { font-size: 15px; opacity: .8; }
.ttb .ttb-card strong { font-size: 24px; font-weight: 600; line-height: 1.25; }
.ttb .ttb-card .s { font-size: 15px; opacity: .8; }
.ttb .ttb-pricecard strong { color: var(--ttb-p); }

@media (max-width: 900px) {
    .ttb .ttb-form { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
    .ttb .ttb-form label:nth-of-type(3) { grid-column: 1 / -1; }
    .ttb .ttb-form button[type="submit"] { grid-column: 1 / -1; width: 100%; }
}
@media (max-width: 700px) {
    .ttb .ttb-cards { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .ttb .ttb-form { grid-template-columns: minmax(0, 1fr); }
    .ttb .ttb-swap { justify-self: start; }
    .ttb .ttb-datebar .ttb-btn, .ttb .ttb-datebar label { width: 100%; }
    .ttb .ttb-datebar input[type="date"] { width: 100%; }
}

/* mobile: each train becomes a card */
@media (max-width: 640px) {
    .ttb .ttb-tw { overflow: visible; }
    .ttb .ttb-tbl, .ttb .ttb-tbl tbody, .ttb .ttb-tbl tr, .ttb .ttb-tbl td { display: block; }
    .ttb .ttb-tbl thead { display: none; }
    .ttb .ttb-tbl tbody { margin: 0 0 10px; padding: 14px; border: 1px solid rgba(128, 128, 128, .35); border-radius: 12px; }
    .ttb .ttb-tbl td { padding: 0; border: 0; white-space: normal; }
    .ttb .ttb-tbl tr.main { display: grid; grid-template-columns: auto auto 1fr auto; grid-template-areas: "train train train price" "dep arr dur price" "book book book book"; gap: 4px 0; }
    .ttb .ttb-tbl .c-train { grid-area: train; font-size: 18px; }
    .ttb .ttb-tbl .c-dep { grid-area: dep; font-size: 22px; font-weight: 600; }
    .ttb .ttb-tbl .c-dep::after { content: "\2192"; margin: 0 8px; font-weight: 400; opacity: .6; }
    .ttb .ttb-tbl .c-arr { grid-area: arr; font-size: 22px; font-weight: 600; }
    .ttb .ttb-tbl .ttb-nd { display: inline; margin-left: 4px; }
    .ttb .ttb-tbl .c-dur { grid-area: dur; align-self: center; margin-left: 12px; font-size: 15px; opacity: .8; }
    .ttb .ttb-tbl .c-price { grid-area: price; max-width: 150px; margin-left: 12px; text-align: right; }
    .ttb .ttb-tbl .c-price strong { font-size: 20px; }
    .ttb .ttb-tbl .c-book { grid-area: book; margin-top: 10px; }
    .ttb .ttb-tbl .c-book .ttb-btn { width: 100%; min-height: 46px; font-size: 17px; }
    .ttb .ttb-tbl tr.opt { margin-top: 10px; }
    .ttb .ttb-fares .ttb-btn { width: auto; min-height: 38px; }
}
@media (prefers-reduced-motion: reduce) { .ttb-btn { transition: none; } }