/* ============================================================
   บริการรถรับส่ง (/transfer)
   ต้องมี tokens.css มาก่อน
   ============================================================ */

/*
    แบนเนอร์ของหน้านี้เว้นล่างเพิ่ม เพราะการ์ดตัวกรองถูกดึงขึ้นมาเกยขอบล่าง
    ถ้าใช้ระยะ 36px ตามค่ามาตรฐาน (.tl-hero-overlay > .container) การ์ดจะทับคำโปรยใต้หัวข้อ
*/
.tf-hero .tl-hero-overlay > .container { padding-bottom: 64px; }
@media (min-width: 768px) { .tf-hero .tl-hero-overlay > .container { padding-bottom: 88px; } }

/* ---------- ตัวกรอง ---------- */
/*
    การ์ดตัวกรองเกยขอบล่างของแบนเนอร์

    ดึงขึ้นด้วย margin-top ติดลบ แล้วเว้นล่างคืนให้เนื้อหาถัดไปไม่ถูกทับ
    ใช้ระยะติดลบน้อยกว่าความสูงการ์ดเสมอ เพื่อให้ขอบบนของการ์ดยังอยู่บนรูป
    ไม่ลอยพ้นขึ้นไปจนบังหัวข้อในแบนเนอร์

    z-index: 2 เพราะ .tl-hero มี overlay ทับรูปอยู่ ถ้าไม่ยกขึ้นการ์ดจะจมอยู่ใต้ overlay
*/
.tf-filter-wrap {
    position: relative;
    z-index: 2;
    margin-top: -40px;
    padding-bottom: var(--section-y);
}
@media (min-width: 768px) { .tf-filter-wrap { margin-top: -64px; } }

.tff {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 6px 18px -14px rgba(16, 34, 54, .35);
}
@media (min-width: 768px) { .tff { padding: 20px 22px; } }

/* ---------- ช่องกรอก ---------- */
.tff__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.tff__field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 170px; min-width: 0; }
.tff__field--pax { flex: 0 1 130px; }
.tff__label { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
/*
    ลูกศรวาดเองด้วย background-image ไม่ใช้ของเบราว์เซอร์

    ลูกศรที่เบราว์เซอร์วาดให้ติดขอบขวาเสมอ padding-right ดันมันไม่ได้
    (padding ดันได้แค่ตัวหนังสือ) จึงต้องปิดด้วย appearance: none แล้ววาดเอง
    คราวนี้ background-position คุมระยะห่างจากขอบได้จริง
*/
.tff__input {
    width: 100%;
    min-height: 46px;
    padding: 0 38px 0 12px;
    border: 1px solid var(--line-2);
    border-radius: 10px;
    color: var(--ink);
    font-size: 14px;
    font-family: inherit;

    appearance: none;
    -webkit-appearance: none;
    background-color: var(--surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b8794' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
}
/* ---------- ดรอปดาวน์ที่จัดหน้าตาเอง ---------- */
/*
    <select> ตัวจริงยังอยู่ในฟอร์ม แค่ถูกซ่อน ค่าจึงถูกส่งไปกับ GET ตามปกติ
    ซ่อนด้วย position: absolute + opacity ไม่ใช่ display: none
    เพราะ display: none ทำให้ scrollIntoView และการโฟกัสในบางเบราว์เซอร์ทำงานเพี้ยน
*/
.rjs { position: relative; }
.rjs__native {
    position: absolute; inset: 0;
    opacity: 0; pointer-events: none;
}

.rjs__btn {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%;
    min-height: 46px;
    padding: 0 12px;
    border: 1px solid var(--line-2);
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink);
    font-size: 14px; font-family: inherit; text-align: start;
    cursor: pointer;
}
.rjs__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rjs__arrow { flex-shrink: 0; font-size: 18px; color: var(--ink-3); transition: transform .16s ease; }
.rjs.is-open .rjs__btn { border-color: var(--brand); }
.rjs.is-open .rjs__arrow { transform: rotate(180deg); }
.rjs.is-disabled .rjs__btn { background: #eef1f5; color: var(--ink-3); cursor: not-allowed; }

/*
    แผงตัวเลือก - จำกัดความสูงแล้วเลื่อนเอง
    บางเมืองมีจุดรับ-ส่งสิบกว่าจุด ถ้าปล่อยยาวตามเนื้อหาแผงจะยาวเกินจอบนมือถือ
*/
.rjs__list {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    z-index: 20;
    max-height: 260px; overflow-y: auto;
    margin: 0; padding: 6px;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 12px 28px -18px rgba(16, 34, 54, .5);
}
.rjs__opt {
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
    cursor: pointer;
}
.rjs__opt:hover { background: var(--bg-soft); }
.rjs__opt[aria-selected="true"] { background: var(--brand-soft); color: var(--brand-dark); font-weight: 600; }

/* ช่องที่ยังเลือกไม่ได้ ต้องดูออกว่ารอเมืองอยู่ ไม่ใช่ดูเหมือนหน้าค้าง */
.tff__input:disabled { background-color: #eef1f5; color: var(--ink-3); cursor: not-allowed; }
.tff__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    flex: 1 1 100%;
    min-height: 46px; padding: 0 26px;
    border: 0; border-radius: 10px;
    background: var(--brand); color: #fff;
    font-size: 14.5px; font-weight: 600;
    cursor: pointer;
    transition: background .16s ease;
}
/* จอกว้างพอ ปุ่มค้นหาอยู่ท้ายแถวเดียวกับช่องกรอก ไม่ต้องกินเต็มบรรทัด */
@media (min-width: 768px) { .tff__btn { flex: 0 0 auto; } }
.tff__btn:hover { background: var(--brand-hover); }
.tff__clear { align-self: flex-start; font-size: 13.5px; color: var(--ink-3); text-decoration: underline; }
.tff__clear:hover { color: var(--ink-2); }

.tf-empty { grid-column: 1 / -1; text-align: center; font-size: 14.5px; color: var(--ink-3); }
.tf-empty a { color: var(--brand); text-decoration: underline; margin-inline-start: 6px; }

/*
    สองคอลัมน์ตั้งแต่มือถือ ตามแบบที่ให้มา แล้วไล่ขึ้นเป็นสี่บนเดสก์ท็อป
    รายละเอียดเส้นทางถูกยุบไว้ใน <details> การ์ดจึงเตี้ยพอจะวางคู่กันได้
*/
/*
    section เมืองไม่เว้นบน เพราะการ์ดตัวกรองด้านบนมี padding-bottom เท่าระยะ section อยู่แล้ว
    ถ้าเว้นซ้ำจะกลายเป็นช่องว่างสองเท่าระหว่างตัวกรองกับรถคันแรก
*/
.tf-city.home-section { padding-top: 0; }

.tf-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 10px;
}
@media (min-width: 640px)  { .tf-grid { gap: 16px; } }
@media (min-width: 1024px) { .tf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .tf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/*
    หัวใจมุมขวาบนของรูป - ไอคอนขาวมีเงา ไม่มีวงกลมพื้นรอง
    ชุดเดียวกับหัวใจบนการ์ดทัวร์ (ดู .package-img .wishlist-toggle ใน compat.css)
    drop-shadow อ้างรูปทรงจริงของไอคอน จึงอ่านออกทั้งบนรูปสว่างและรูปมืด
*/
.tf-fav {
    position: absolute; top: 8px; right: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0;
    border: 0; background: none;
    color: #fff; font-size: 21px; line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(16, 24, 34, .55));
    cursor: pointer;
    transition: color .16s ease, transform .12s ease;
}
.tf-fav:active { transform: scale(.92); }
.tf-fav__on { display: none; }
.tf-fav.is-on { color: #ff4d5e; }
.tf-fav.is-on .tf-fav__off { display: none; }
.tf-fav.is-on .tf-fav__on { display: inline; }

/* หมายเหตุเหนือปุ่มจอง บอกครั้งเดียวต่อการ์ด */
.tf-vat { margin: -2px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }

/*
    ปุ่มชิดขวา กว้างตามข้อความ ไม่ยืดเต็มการ์ด

    align-self: flex-end เพราะ .htf-card__body เป็น flex column
    ลูกทุกตัวจึงถูกยืดเต็มความกว้างเป็นค่าตั้งต้น ต้องสั่งเป็นรายตัว

    margin-top: auto ยังอยู่ ปุ่มจึงเกาะก้นการ์ดเสมอ
    การ์ดที่เนื้อหาสั้นกว่าเพื่อนก็ยังมีปุ่มอยู่ระดับเดียวกันทั้งแถว
*/
.tf-cta {
    margin-top: auto;
    align-self: flex-end;
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 36px; padding: 0 16px;
    border-radius: 8px;
    background: var(--brand); color: #fff;
    font-size: 13px; font-weight: 600;
    text-decoration: none;
    transition: background .16s ease;
}
.tf-cta:hover { background: var(--brand-hover); color: #fff; }

/* ============================================================
   หน้าเช่ารถ (/car-rent) — ตัวกรอง + การ์ดรถรับส่ง
   ============================================================ */

/*
    ตัวกรอง - แถวเดียวบนจอกว้าง ตกลงเป็นบรรทัดของตัวเองบนจอแคบ
    ไม่ใส่กรอบการ์ดครอบ เพราะมันอยู่ใต้แบนเนอร์ปกซึ่งมีน้ำหนักมากอยู่แล้ว
    กรอบอีกชั้นจะกลายเป็นสองก้อนหนักซ้อนกันตั้งแต่ต้นหน้า
*/
.crf {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--bg-soft);
}
.crf__field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 180px; min-width: 0; }
.crf__label { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
.crf__input {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--line-2);
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink);
    font-size: 14px;
    font-family: inherit;
}
.crf__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px; padding: 0 22px;
    border: 0; border-radius: 10px;
    background: var(--brand); color: #fff;
    font-size: 14.5px; font-weight: 600;
    cursor: pointer;
    transition: background .16s ease;
}
.crf__btn:hover { background: var(--brand-hover); }
.crf__clear {
    align-self: center;
    font-size: 13.5px; color: var(--ink-3); text-decoration: underline;
}
.crf__clear:hover { color: var(--ink-2); }

/* ---------- การ์ดรถรับส่งบนหน้าเช่ารถ ---------- */
/*
    การ์ดสรุปสั้น ๆ ไม่กางตารางเส้นทางเหมือนหน้า /transfer
    หน้านี้เป็นหน้ารวมบริการ คนยังเลือกไม่ได้ว่าจะเอาแบบไหน
    รายละเอียดเส้นทางกับราคาทุกช่องอยู่ที่หน้า /transfer ซึ่งเป็นหน้าของเรื่องนี้โดยตรง
*/
.crtf-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 10px;
}
@media (min-width: 640px)  { .crtf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .crtf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.crtf-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    background: var(--surface);
}
.crtf-card__img {
    aspect-ratio: 3 / 2;
    background: var(--bg-soft);
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-3); font-size: 28px;
}
.crtf-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crtf-card__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.crtf-card__name { margin: 0; font-size: 15.5px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.crtf-card__meta { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.crtf-card__price { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.crtf-card__price b { font-size: 18px; color: var(--brand); }
.crtf-card__cta {
    margin-top: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 40px; padding: 0 16px;
    border: 1px solid var(--line-2);
    border-radius: 10px;
    color: var(--ink-2);
    font-size: 14px; font-weight: 600;
    text-decoration: none;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.crtf-card__cta:hover { background: var(--bg-soft); border-color: var(--ink-3); color: var(--ink); }


/* ============================================================
   มือถือ — การ์ดกระชับขึ้น
   ============================================================ */
/* ============================================================
   มือถือ — ตัวกรองต้องไม่กินจอ
   ============================================================ */
@media (max-width: 639.98px) {
    /*
        สี่ช่องเรียงลงทีละบรรทัดกินความสูงเกือบ 370px ซึ่งเกินครึ่งจอโทรศัพท์
        คนเปิดหน้ามาจึงเห็นแต่ฟอร์ม ไม่เห็นรถสักคันจนกว่าจะเลื่อน
        ทั้งที่รถคือสิ่งที่มาดู ส่วนฟอร์มเป็นเครื่องมือที่ใช้เมื่อรายการยาวเกินไป

        จัดเป็นตาราง 2 คอลัมน์แล้วย่อความสูงช่องลง เหลือราว 190px
        การ์ดใบแรกจึงโผล่พ้นจอมาพร้อมกับฟอร์ม
    */
    .tf-filter-wrap { padding-bottom: 20px; }
    .tff { gap: 10px; padding: 12px; }
    .tff__row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        align-items: end;
    }
    .tff__field,
    .tff__field--pax { min-width: 0; }
    .tff__label { font-size: 11.5px; }
    .tff__input {
        min-height: 40px;
        padding: 0 30px 0 10px;
        font-size: 13px;
        background-position: right 10px center;
        background-size: 14px 14px;
    }
    .rjs__btn { min-height: 40px; padding: 0 10px; font-size: 13px; }
    .rjs__arrow { font-size: 16px; }
    .rjs__opt { font-size: 13px; padding: 8px 10px; }
    /* ปุ่มค้นหากินเต็มแถวล่าง กดง่ายกว่าปุ่มครึ่งช่องที่อยู่ข้างช่องเลือก */
    .tff__btn { grid-column: 1 / -1; min-height: 40px; font-size: 13.5px; }
    .tff__clear { font-size: 12.5px; }

    .tf-card__price-num { font-size: 17px; }
    .tf-card__price-label,
    .tf-card__price-unit { font-size: 11px; }
    /*
        การ์ดกว้างราว 158px บนจอ 360px ทุกอย่างในการ์ดจึงต้องเล็กลงหนึ่งขั้น
        รูปเป็น 4:3 ไม่ใช่ 3:2 เพราะที่ความกว้างเท่านี้ 3:2 ได้รูปเตี้ยจนดูเหมือนแถบสี
    */
    .tf-card__img { aspect-ratio: 4 / 3; }
    .tf-card__body { gap: 8px; padding: 10px; }
    .tf-card__name { font-size: 13.5px; }
    .tf-card__specs { gap: 2px 8px; }
    .tf-card__specs span { font-size: 11.5px; }
    .tf-vat { font-size: 11px; }
    .tf-cta { min-height: 32px; padding: 0 12px; font-size: 12px; }

}


/* ============================================================
   แถบรถรับส่งบนหน้าแรก (.htf-*)
   ============================================================ */
/* overflow: hidden ต้องประกาศเอง เพราะหน้านี้ไม่ได้โหลด swiper.css ของ Swiper */
.htf-swiper { overflow: hidden; }
/* การ์ดสูงเท่ากันทั้งแถว Swiper ตั้งความสูง slide ให้แล้ว เหลือยืดการ์ดเต็ม slide */
.htf-swiper .swiper-slide { height: auto; display: flex; }

.htf-card {
    display: flex; flex-direction: column;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    background: var(--surface);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.htf-card:hover {
    transform: translateY(-2px);
    border-color: transparent;
    box-shadow: 0 8px 22px -14px rgba(16, 34, 54, .5);
}

.htf-card__img {
    /* relative เพราะหน้า /transfer วางปุ่มหัวใจทับมุมขวาบนของรูป */
    position: relative;
    aspect-ratio: 3 / 2;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-soft);
    color: var(--ink-3); font-size: 26px;
    overflow: hidden;
}
.htf-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.htf-card__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 5px; padding: 12px 14px 14px; }
.htf-card__name { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--ink); }

/*
    เม็ดที่นั่ง/ผู้โดยสาร - ตัวเลขหนาและใหญ่กว่าคำกำกับรอบตัว

    ก่อนหน้านี้อยู่ในบรรทัดเดียวกับชื่อเมือง สีเทาขนาดเท่ากันหมด
    ทั้งที่ "นั่งได้กี่คน" คือสิ่งที่ลูกค้าใช้ตัดตัวเลือกก่อนดูราคาด้วยซ้ำ
    (คนสี่คนไม่สนใจรถสามที่นั่งไม่ว่าราคาจะถูกแค่ไหน)

    พื้นเทาอ่อนไม่ใช่สีแบรนด์ เพราะการ์ดใบหนึ่งมีสองเม็ด และยังมีราคากับปุ่มอยู่ข้างล่าง
    ถ้าใช้สีเน้นจะกลายเป็นสี่จุดแย่งสายตากันเองในการ์ดเดียว
*/
.htf-card__specs { display: flex; flex-wrap: wrap; gap: 6px; }
.htf-spec {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--bg-soft);
    font-size: 11px; line-height: 1.5; color: var(--ink-3);
    white-space: nowrap;
}
.htf-spec i { font-size: 12px; color: var(--ink-3); }

/*
    เม็ดที่นั่งใช้พื้นฟ้าอ่อน อีกเม็ดเป็นเทาตามปกติ

    ให้ความเด่นด้วยพื้นสีเม็ดเดียว ไม่ใช่ทำตัวเลขให้หนากว่าคำรอบตัว
    ตัวเลขหนาในเม็ดเล็ก ๆ อ่านเป็นสองน้ำหนักในกล่องเดียว ซึ่งดูกระโดดกว่าที่ควร
    ทั้งเม็ดเป็นสีเดียวกันหมดจึงยังอ่านเป็นก้อนเดียว แค่ก้อนนั้นเด่นกว่าเพื่อน
*/
.htf-spec--seat {
    background: var(--brand-soft);
    color: var(--brand-dark);
}
.htf-spec--seat i { color: var(--brand); }

/*
    เมืองเป็นเม็ดเหมือนกัน ไม่ใช่บรรทัดข้อความลอยอยู่ข้างบน

    สามอย่างนี้ (เมือง ที่นั่ง ผู้โดยสาร) เป็นข้อมูลระดับเดียวกันคือ "รถคันนี้คืออะไร"
    อยู่คนละรูปแบบทำให้อ่านเป็นคนละชั้นทั้งที่ไม่ใช่
    เม็ดเมืองยาวได้ตามชื่อ จึงไม่ล็อก white-space เหมือนเม็ดตัวเลข
*/
.htf-spec--place { white-space: normal; }
/* ราคาเกาะก้นการ์ดด้วย margin-top: auto จึงอยู่ระดับเดียวกันทุกใบไม่ว่าชื่อจะยาวแค่ไหน */
.htf-card__price { margin: auto 0 0; padding-top: 4px; font-size: 12.5px; color: var(--ink-2); }
.htf-card__price b { font-size: 17px; color: var(--ink); }

/*
    การ์ดบนหน้า /transfer ใช้โครงเดียวกับหน้าแรก แต่มีปุ่มจองอยู่ท้ายการ์ด
    ราคาจึงไม่ต้องดันตัวเองลงก้นการ์ดอีก ปล่อยให้ปุ่มเป็นตัวที่เกาะก้นแทน
*/
.htf-card--tf .htf-card__price { margin-top: 0; }

/*
    ไม่มีเอฟเฟกต์ตอนเอาเมาส์ไปวาง

    บนหน้าแรกการ์ดทั้งใบเป็นลิงก์ การยกขึ้นตอน hover จึงบอกว่ากดได้
    หน้านี้การ์ดไม่ใช่ลิงก์ ของที่กดได้คือปุ่มจองกับหัวใจเท่านั้น
    ถ้ายกทั้งใบจะชวนให้กดตรงไหนก็ได้แล้วไม่มีอะไรเกิดขึ้น

    ปิด transition ด้วย ไม่ใช่แค่ทับค่าปลายทาง ไม่งั้นยังมีจังหวะไล่สีของเส้นขอบให้เห็น
*/
.htf-card--tf { transition: none; }
.htf-card--tf:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--line);
}