/* ==========================================================================
   Search Form (ฟอร์มค้นหาตั๋วเรือ) + Flatpickr
   ========================================================================== */

/* === Search Form === */
.search-section {
    padding: 0 !important;
    position: relative;
    z-index: 20;

    .search-box {
        padding: 24px;
        border-radius: var(--rd-lg);
        background-color: var(--white);
        box-shadow: 0 18px 50px rgba(6, 42, 90, 0.18);
    }

    /* หัวฟอร์ม */
    .search-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 18px;

        .head-title {
            h2 {
                font-size: var(--fs-xl);
                color: var(--theme-dark);
            }

            p {
                color: var(--text-muted);
                font-size: var(--fs-sm);
            }
        }
    }

    /* แจ้งเตือนตอนกรอกไม่ครบ */
    .search-alert {
        margin-top: 12px;
        padding: 10px 14px;
        border-radius: var(--rd-sm);
        background-color: #fdecec;
        color: #b02a37;
        font-size: var(--fs-sm);
        font-weight: var(--fw-md);
        text-align: center;
    }

    /* แถวช่องกรอก */
    .search-fields {
        display: grid;
        grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 0.95fr) 148px;
        gap: 10px;
        align-items: stretch;
    }

    .box-field {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        min-width: 0;
        min-height: 66px;
        padding: 10px 16px;
        cursor: pointer;
        border: 1px solid var(--border-color);
        border-radius: var(--rd-md);
        background-color: var(--white);
        transition: var(--transition);

        label {
            display: block;
            color: var(--text-muted);
            font-size: 11px;
            letter-spacing: 0.4px;
            text-transform: uppercase;
        }

        .field-input {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            padding: 0;
            border: 0;
            background: none;
            text-align: left;
            outline: none;

            &:focus,
            &:focus-visible {
                outline: none;
                box-shadow: none;
            }

            >i:first-child {
                color: var(--theme-color);
                font-size: var(--fs-md);
            }

            input {
                width: 100%;
                min-width: 0;
                padding: 0;
                white-space: nowrap;
                border: 0;
                background: none;
                color: var(--text-color);
                font-size: var(--fs-sm);
                font-weight: var(--fw-md);
                text-overflow: ellipsis;
                outline: none;
                cursor: pointer;

                &::placeholder {
                    color: var(--text-muted);
                    font-weight: 400;
                }
            }
        }

        &:hover,
        &.open {
            border-color: var(--theme-color);
        }

        &:focus-within {
            border-color: var(--theme-color);
            box-shadow: 0 0 0 3px var(--theme-light);
        }
    }

    /* ต้นทาง - ปลายทาง */
    .box-route {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        min-width: 0;

        .route-swap {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 5;
            transform: translate(-50%, -50%);
            width: 34px;
            height: 34px;
            display: grid;
            place-items: center;
            border: 1px solid var(--border-color);
            border-radius: 50%;
            background-color: var(--white);
            color: var(--theme-color);
            font-size: var(--fs-sm);
            transition: transform 0.3s ease, background-color var(--transition);

            &:hover {
                background-color: var(--theme-light);
            }

            &.swapped {
                transform: translate(-50%, -50%) rotate(180deg);
            }
        }

        .field-place:first-child {
            padding-right: 28px;
        }

        .field-place:last-child {
            padding-left: 28px;
        }
    }

    /* วันเดินทาง + ปุ่มลบวันขากลับ */
    .field-date {
        .date-clear {
            flex-shrink: 0;
            display: grid;
            place-items: center;
            width: 20px;
            height: 20px;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background-color: var(--bg-soft);
            color: var(--text-muted);
            font-size: 10px;
            transition: var(--transition);

            &:hover {
                background-color: var(--theme-light);
                color: var(--theme-color);
            }
        }
    }

    /* ผู้โดยสาร */
    .field-passenger {
        .passenger-toggle {
            justify-content: space-between;
            cursor: pointer;

            .passenger-text {
                flex: 1;
                min-width: 0;
                color: var(--text-color);
                font-size: var(--fs-sm);
                font-weight: var(--fw-md);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .toggle-arrow {
                color: var(--text-muted);
                font-size: var(--fs-xs);
                transition: var(--transition);
            }
        }

        &.open .toggle-arrow {
            transform: rotate(180deg);
        }
    }

    /* ปุ่มค้นหา */
    .box-action {
        .action-search {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            height: 100%;
            min-height: 66px;
            padding: 0 20px;
            border: 0;
            border-radius: var(--rd-md);
            background-color: var(--theme-color);
            color: var(--white);
            font-size: var(--fs-md);
            font-weight: var(--fw-lg);
            white-space: nowrap;
            transition: var(--transition);

            &:hover {
                background-color: var(--theme-color-hover);
            }
        }
    }

    /* หัวโมดัล + ช่องค้นหาในโมดัล ใช้เฉพาะจอมือถือ (<= 768px) */
    .dropdown-head,
    .dropdown-search {
        display: none;
    }

    /* Dropdown (ขนาดเท่ากันทุกช่อง) */
    .field-dropdown {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        z-index: 30;
        width: 100%;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        pointer-events: none;
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
        min-width: 300px;
        padding: 8px;
        border: 1px solid var(--border-color);
        border-radius: var(--rd-md);
        background-color: var(--white);
        box-shadow: var(--shadow-md);

        .dropdown-list {
            max-height: 268px;
            overflow-y: auto;

            .dropdown-item {
                display: grid;
                grid-template-columns: auto 1fr;
                align-items: center;
                column-gap: 10px;
                min-height: 44px;
                padding: 8px 12px;
                border-radius: var(--rd-sm);
                font-size: var(--fs-sm);
                cursor: pointer;

                >i {
                    grid-row: 1 / -1;
                    color: var(--text-muted);
                    font-size: var(--fs-sm);
                }

                .item-name {
                    grid-column: 2;
                    line-height: 1.35;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .item-area {
                    grid-column: 2;
                    color: var(--text-muted);
                    font-size: 11px;
                    line-height: 1.3;
                }

                &:hover,
                &.active {
                    background-color: var(--theme-light);
                    color: var(--theme-color);

                    .item-area {
                        color: var(--theme-color);
                        opacity: 0.75;
                    }
                }
            }
        }

        .dropdown-empty {
            height: 44px;
            display: grid;
            place-items: center;
            color: var(--text-muted);
            font-size: var(--fs-sm);
        }
    }

    .box-field.open .field-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    /* ให้ dropdown ของช่องท้ายแถวไม่ล้นขอบขวา */
    .field-passenger .field-dropdown {
        left: auto;
        right: 0;
        min-width: 200px;
    }

    @media (max-width: 1200px) {
        .search-fields {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);

            .box-route {
                grid-column: 1 / -1;
            }

            .box-action {
                grid-column: 3 / -1;
            }
        }
    }

    @media (max-width: 992px) {
        .search-head {
            flex-direction: column;
            align-items: flex-start;
            gap: 14px;
        }

        .search-fields {
            grid-template-columns: 1fr 1fr;

            .box-action {
                grid-column: 1 / -1;
            }
        }
    }

    @media (max-width: 768px) {
        .search-box {
            padding: 14px;
            border-radius: var(--rd-md);
        }

        .search-head {
            margin-bottom: 12px;
            gap: 10px;

            .head-title {
                h2 {
                    font-size: var(--fs-lg);
                }

                p {
                    display: none;
                }
            }
        }

        /* มือถือ: วันไป-วันกลับอยู่บรรทัดเดียวกัน ช่องอื่นเต็มความกว้าง
           minmax(0, 1fr) กันช่องขยายตามข้อความจนล้นจอ */
        .search-fields {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: 8px;

            .box-route,
            .field-passenger,
            .box-action {
                grid-column: 1 / -1;
            }
        }

        .box-field {
            padding: 9px 14px;

            label {
                font-size: 10px;
            }

            .field-input {
                gap: 8px;

                >i:first-child {
                    font-size: var(--fs-sm);
                }
            }
        }

        .box-route {
            grid-template-columns: 1fr;
            gap: 8px;

            .route-swap {
                top: 50%;
                left: auto;
                right: 12px;
                width: 30px;
                height: 30px;
                transform: translateY(-50%) rotate(90deg);

                &.swapped {
                    transform: translateY(-50%) rotate(270deg);
                }
            }

            .field-place:first-child,
            .field-place:last-child {
                padding-right: 52px;
                padding-left: 14px;
            }
        }

        /* หัวโมดัล ใช้ร่วมกันทั้ง dropdown จุดจอด/ผู้โดยสาร และปฏิทินวันเดินทาง */
        .dropdown-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-shrink: 0;
            padding: 14px 16px;
            border-bottom: 1px solid var(--border-color);
            background-color: var(--white);

            .head-title {
                font-size: var(--fs-md);
                font-weight: var(--fw-lg);
                color: var(--theme-dark);
            }

            .head-close {
                display: grid;
                place-items: center;
                width: 34px;
                height: 34px;
                padding: 0;
                border: 0;
                border-radius: var(--rd-full);
                background-color: var(--bg-soft);
                color: var(--text-color);
                font-size: var(--fs-sm);
            }
        }

        /* ==================================================================
           มือถือ: dropdown เปลี่ยนเป็น modal เต็มจอ
           ตัวการ์ดยังเป็น .box-field เดิม เปลี่ยนแค่การวางตัวของ .field-dropdown
           ================================================================== */
        .field-dropdown {
            position: fixed;
            inset: 0;
            z-index: 1000;
            width: 100%;
            min-width: 0;
            height: 100vh;
            height: 100dvh;
            display: flex;
            flex-direction: column;
            padding: 0;
            border: 0;
            border-radius: 0;
            transform: translateY(100%);
            transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;

            .dropdown-search {
                position: relative;
                display: block;
                flex-shrink: 0;
                padding: 12px 16px;

                >i {
                    position: absolute;
                    top: 50%;
                    left: 30px;
                    transform: translateY(-50%);
                    color: var(--text-muted);
                    font-size: var(--fs-sm);
                }

                .dropdown-input {
                    width: 100%;
                    height: 44px;
                    padding: 0 14px 0 38px;
                    border: 1px solid var(--border-color);
                    border-radius: var(--rd-sm);
                    background-color: var(--white);
                    color: var(--text-color);
                    font-size: var(--fs-sm);
                    outline: 0;

                    &:focus {
                        border-color: var(--theme-color);
                    }
                }
            }

            .dropdown-list {
                flex: 1;
                max-height: none;
                padding: 4px 8px 16px;

                .dropdown-item {
                    min-height: 52px;
                    padding: 10px 12px;
                    font-size: var(--fs-md);
                }
            }

            .dropdown-empty {
                height: auto;
                padding: 24px 0;
            }
        }

        .box-field.open .field-dropdown {
            transform: translateY(0);
        }

        /* ช่องผู้โดยสารเคยชิดขวาบนจอใหญ่ บนมือถือใช้เต็มจอเหมือนช่องอื่น */
        .field-passenger .field-dropdown {
            left: 0;
            right: 0;
        }

        .box-action .action-search {
            min-height: 50px;
            font-size: var(--fs-sm);
        }
    }
}

/* ฟอร์มค้นหาเกยขึ้นแบนเนอร์ เฉพาะหน้าที่มี hero */
.hero-section+.search-section {
    margin-top: -56px;

    @media (max-width: 992px) {
        & {
            margin-top: -40px;
        }
    }

    @media (max-width: 768px) {
        & {
            margin-top: -20px;
        }

        /* มือถือหน้าแรก: ตัดหัวฟอร์มออก ให้เห็นช่องกรอกเลย */
        .search-head {
            display: none;
        }
    }
}

/* Flatpickr: ให้หน้าตา + ตำแหน่ง เหมือน dropdown ของฟอร์มค้นหา */
.search-section .flatpickr-wrapper {
    width: 100%;
}

.search-section .box-field .flatpickr-calendar.static {
    top: calc(100% + 20px);
    left: -17px;
    width: calc(100% + 34px);
    min-width: 316px;

    &.open {
        animation: dropdown-in 0.18s ease;
    }
}

@keyframes dropdown-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.flatpickr-calendar {
    width: 316px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--rd-md);
    background-color: var(--white);
    box-shadow: var(--shadow-md);
    font-family: 'Sukhumvit Set', 'Segoe UI', sans-serif;

    &::before,
    &::after {
        display: none;
    }

    .flatpickr-months {
        padding: 4px 0 10px;

        .flatpickr-month {
            height: 34px;
            color: var(--theme-dark);
        }

        .flatpickr-current-month {
            padding-top: 6px;
            font-size: var(--fs-sm);
            font-weight: var(--fw-lg);

            .cur-month {
                margin-right: 4px;
            }

            .numInputWrapper:hover,
            input.cur-year {
                background: none;
            }
        }

        .flatpickr-prev-month,
        .flatpickr-next-month {
            top: 2px;
            padding: 8px 10px;
            border-radius: var(--rd-sm);
            fill: var(--theme-color);

            &:hover {
                background-color: var(--theme-light);

                svg {
                    fill: var(--theme-color);
                }
            }
        }
    }

    .flatpickr-weekdays {
        height: 26px;

        .flatpickr-weekday {
            color: var(--text-muted);
            font-size: 11px;
            font-weight: var(--fw-md);
            text-transform: uppercase;
        }
    }

    .flatpickr-days {
        width: 300px;

        .dayContainer {
            width: 300px;
            min-width: 300px;
            max-width: 300px;
            padding: 2px 0;
        }
    }

    .flatpickr-day {
        max-width: 40px;
        height: 38px;
        line-height: 38px;
        border: 0;
        border-radius: var(--rd-sm);
        color: var(--text-color);
        font-size: var(--fs-sm);

        &:hover {
            background-color: var(--theme-light);
            color: var(--theme-color);
        }

        &.today {
            background-color: var(--bg-soft);
            color: var(--theme-color);
            font-weight: var(--fw-lg);
        }

        &.selected,
        &.selected:hover,
        &.startRange,
        &.endRange {
            background-color: var(--theme-color);
            color: var(--white);
            font-weight: var(--fw-lg);
        }

        &.flatpickr-disabled,
        &.prevMonthDay,
        &.nextMonthDay {
            color: var(--text-muted);
            opacity: 0.45;
        }
    }
}

/* ==========================================================================
   มือถือ: ปฏิทินวันเดินทางเป็น modal เต็มจอ
   ต้องอยู่ท้ายไฟล์ เพราะกฎ .flatpickr-calendar ของจอใหญ่ประกาศไว้ด้านบน
   .dropdown-head ถูกยัดเข้าไปใน calendarContainer โดย search-form.js
   ========================================================================== */
@media (max-width: 768px) {
    .search-section .box-field .flatpickr-calendar.static {
        position: fixed;
        inset: 0;
        top: 0;
        left: 0;
        right: auto;
        z-index: 1000;
        width: 100%;
        max-width: none;
        min-width: 0;
        height: 100vh;
        height: 100dvh;
        /* flatpickr ตั้ง max-height: 640px ไว้ตอนเปิด ต้องปลดก่อนถึงจะเต็มจอ */
        max-height: none;
        overflow-y: auto;
        display: none;
        flex-direction: column;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;

        &.open {
            display: flex;
            animation: none;
        }

        /* flatpickr ตั้งปุ่มเลื่อนเดือนเป็น position: absolute แต่ .flatpickr-months
           ไม่ได้ตั้ง position ไว้ พอ calendarContainer กลายเป็น fixed เต็มจอ
           ปุ่มเลยไปเกาะขอบบนของจอแทนที่จะเกาะแถวชื่อเดือน */
        .flatpickr-months {
            position: relative;
        }

        .flatpickr-innerContainer {
            flex: 1;
            align-items: flex-start;
            padding: 8px 12px 20px;
        }

        .flatpickr-rContainer,
        .dayContainer {
            width: 100%;
            max-width: none;
            min-width: 0;
        }

        .flatpickr-days {
            width: 100%;
        }

        .flatpickr-day {
            max-width: none;
            height: 46px;
            line-height: 46px;
        }
    }
}

/* ==========================================================================
   .search-section ตั้ง z-index ไว้ = เป็น stacking context
   โมดัลที่อยู่ข้างในจึงขึ้นไม่พ้น header (z-index 50) และ cookie (z-index 90)
   เปิดโมดัลเมื่อไหร่ ยกทั้ง section ขึ้นมาก่อน
   ========================================================================== */
body.search-modal-open .search-section {
    z-index: 200;
}