/* ══════════════════════════════════════════════════════════════════════════
   หน้าตาของกล่อง select2 ให้เข้ากับฟอร์มของเว็บลูกค้า
   (init อัตโนมัติอยู่ที่ wwwroot/js/select2-auto.js)

   ธีมที่ใช้คือ bootstrap4 ของ select2 ซึ่งวาดตามฟอร์ม Bootstrap 4 แต่เว็บนี้ใช้
   Bootstrap 5 และช่องกรอกของขั้นตอนการจองเป็นสไตล์ของตัวเอง (.bkf-inp
   ใน booking-flow.css — ขอบ 1px #d7e0ec, มุม 9px, padding 10px 12px,
   โฟกัสน้ำเงิน #0A4174) ไฟล์นี้จึงดึงกล่อง select2 ให้ตรงกับช่องกรอกที่อยู่ข้าง ๆ

   ⚠ ค่าสีเขียนตรง ๆ ไม่ใช้ var(--bkf-*) เพราะตัวแปรชุดนั้นอยู่ใต้ .bkf
     ซึ่งมีเฉพาะหน้าจอง แต่ไฟล์นี้ใช้ทุกหน้า
   ══════════════════════════════════════════════════════════════════════════ */

.select2-container--bootstrap4 .select2-selection {
    border: 1px solid #d7e0ec;
    border-radius: 9px;
    background: #fff;
}

/* ธีม bootstrap4 ล็อกความสูงไว้ด้วย height:calc(...)!important (สูตรของ Bootstrap 4)
   ต้องสู้ด้วย !important ไม่งั้นเดิมต้องไปพึ่ง min-height ซึ่งได้ 41px
   เตี้ยกว่า .bkf-inp ที่อยู่ข้าง ๆ 1.5px — พอวางเรียงกันจะเห็นว่าไม่เท่ากัน
   ตอนนี้ตรึงความสูงไว้ที่ 42.5px เท่า .bkf-inp (padding 10px x2 + ขอบ 2px + บรรทัด .87rem)
   แล้วจัดตัวหนังสือกึ่งกลางด้วย flex ไม่ต้องคำนวณ line-height ให้พอดีเอง */
.select2-container--bootstrap4 .select2-selection--single {
    height: auto !important;
    min-height: 42.5px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
}

/* ข้อความค่าที่เลือก — ต้องเว้นทางขวาให้ลูกศร ไม่งั้นค่าที่ยาว (เช่นชื่อโรงแรมจุดรับ)
   จะมุดไปอยู่ใต้ลูกศร เพราะกล่องข้อความกินพื้นที่เลยตำแหน่งลูกศรไป ~10px */
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 16px 0 0;
    line-height: normal;
    font-size: .87rem;
    color: #10203a;
}

/* ช่องไหนมีปุ่มล้างค่าด้วย ต้องเว้นเพิ่มอีก เพราะปุ่มไปนั่งข้างซ้ายลูกศร */
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered:has(.select2-selection__clear) {
    padding-right: 34px;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
    line-height: normal;
    color: #9aa8bb;
}

/* ── ปุ่มกากบาทล้างค่า ─────────────────────────────────────────────────────
   ธีม bootstrap4 วาดปุ่มนี้เป็น "วงกลมเทาทึบ" (background #c8c8c8 + border-radius 100%
   ขนาด .9em) แล้วให้ตัว × เป็นสีขาวนวล พอกล่องเราใช้ฟอนต์ใหญ่กว่าวงกลม ตัว × เลยล้น
   ออกนอกวงจนอ่านไม่ออก คนเห็นเป็นแค่จุดเทากลม ๆ ลอยอยู่ข้างลูกศร ไม่รู้ว่าคืออะไร
   → ถอดวงกลมออก เหลือกากบาทจาง ๆ แล้วค่อยขึ้นสีตอนชี้เมาส์
   และวางแบบ absolute (ของเดิม float:right ลอยอยู่ในบรรทัดข้อความ จึงทับตัวหนังสือ) */
.select2-container--bootstrap4 .select2-selection--single .select2-selection__clear {
    position: absolute;
    top: 50%;
    right: 26px;
    transform: translateY(-50%);
    float: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 50%;
    color: #9aa8bb;
    font-size: 1rem;
    line-height: 1;
    transition: background-color .15s ease, color .15s ease;
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__clear:hover {
    background: #fbeaea;
    color: #b91c1c;
}

/* ── ลูกศร ────────────────────────────────────────────────────────────────
   ธีมวาง <b> ไว้ที่ top:60% ซึ่งพอดีกับกล่องเตี้ยแบบ Bootstrap 4
   แต่กล่องของเราสูงกว่า ลูกศรเลยเยื้องลงล่างประมาณ 6px ดูเหมือนวางพลาด
   + สีเดิม #343a40 เข้มกว่าเส้นกรอบทั้งฟอร์ม */
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow { height: 100%; top: 0; }
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
    top: 50%;
    border-top-color: #7c8ba1;
}
/* ตอนเปิดอยู่ให้พลิกลูกศรขึ้นเหมือน dropdown ทั่วไป (ธีมนี้ไม่ได้ทำให้) */
.select2-container--bootstrap4.select2-container--open .select2-selection--single .select2-selection__arrow b {
    margin-top: -3px;
    border-color: transparent transparent #0A4174 transparent;
    border-width: 0 4px 5px;
}

/* โฟกัส/เปิดอยู่ ใช้เงาเดียวกับ .bkf-inp:focus เพื่อไม่ให้ฟอร์มมีสองภาษาภาพ */
.select2-container--bootstrap4.select2-container--focus .select2-selection,
.select2-container--bootstrap4.select2-container--open .select2-selection {
    border-color: #0A4174;
    box-shadow: 0 0 0 3px rgba(10, 65, 116, .13);
}

/* แผงตัวเลือก — ธีมออกแบบให้ "กลืน" กับกล่อง (มุมด้านที่ติดกันเป็นเหลี่ยม + ตัดขอบล่างของกล่องทิ้ง)
   แต่ของเราเป็นแผงลอยมีเงา มุมจึงต้องมนครบทั้งใบและกล่องต้องมีขอบครบเหมือนเดิม
   selector ต้องยาวเท่าของธีม (.select2-container--open.select2-container--below ...)
   ไม่งั้นสู้ specificity ไม่ได้ */
.select2-container--bootstrap4 .select2-dropdown,
.select2-container--bootstrap4 .select2-dropdown.select2-dropdown--below,
.select2-container--bootstrap4 .select2-dropdown.select2-dropdown--above {
    border: 1px solid #0A4174;
    border-radius: 9px;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(16, 32, 58, .12);
}
/* เว้นระยะจากกล่องนิดหนึ่ง ไม่ให้แผงลอยไปชนขอบกล่องพอดีจนดูเป็นก้อนเดียว
   (คลาส --below/--above อยู่ที่ตัว dropdown ไม่ใช่ที่ container ที่ครอบอยู่) */
.select2-container--bootstrap4 .select2-dropdown.select2-dropdown--below { margin-top: 4px; }
.select2-container--bootstrap4 .select2-dropdown.select2-dropdown--above { margin-top: -4px; }

.select2-container--bootstrap4.select2-container--open.select2-container--below .select2-selection,
.select2-container--bootstrap4.select2-container--open.select2-container--above .select2-selection,
.select2-container--bootstrap4.select2-container--focus.select2-container--open .select2-selection {
    border: 1px solid #0A4174;
    border-radius: 9px;
}

.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field {
    border: 1px solid #d7e0ec;
    border-radius: 7px;
    padding: 8px 10px;
    font-size: .87rem;
}
.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field:focus {
    outline: none;
    border-color: #0A4174;
}

.select2-container--bootstrap4 .select2-results__option {
    font-size: .87rem;
    padding: 8px 12px;
    color: #37475f;
}
/* ธีมทาสีแถวที่ชี้อยู่เป็นน้ำเงิน #007bff ของ Bootstrap และแถวที่เลือกไว้เป็นเทา #f2f2f2
   ด้วย selector ที่ลึกกว่าของเดิมในไฟล์นี้ (0,4,0) — ที่ผ่านมาจึงสู้ไม่ได้ ทั้งที่ตั้งใจใช้สีแบรนด์
   ต้องเขียน selector ให้ยาวเท่ากันแล้วอาศัยว่าไฟล์นี้โหลดทีหลัง */
.select2-container--bootstrap4 .select2-results__option--highlighted,
.select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected="true"] {
    background: #eef4fb;
    color: #0A4174;
}
/* แถวที่เลือกไว้อยู่แล้ว — ทึบเข้มไว้ให้เห็นว่าตอนนี้ค่าคืออันไหน */
.select2-container--bootstrap4 .select2-dropdown .select2-results__option[aria-selected="true"] {
    background: #0A4174;
    color: #fff;
}

/* ── ช่องที่อยู่ในฟอร์มขั้นตอนการจอง ──────────────────────────────────────
   ช่องรหัสประเทศถูกจำกัดความกว้างด้วย flex ของแถว (flex:0 0 180px ที่ <select> เดิม)
   ซึ่ง select2 ไม่ได้ลอกมาให้กล่องของมัน — ต้องกันไม่ให้กล่องล้นแถว */
.bkf-field .select2-container,
.bkf-row .select2-container { max-width: 100%; }