/* =============================================================================
   Component: nav-search - ช่องค้นหา + autocomplete บน top nav
   ใช้ร่วมกันระหว่าง mrta-portal และ mrta-learnext (ไฟล์เนื้อหาเดียวกัน แก้ที่หนึ่งให้แก้อีกที่ด้วย)
     portal   : resources/views/frontend/components/nav-search.blade.php      + public/front/css|js/nav-search.*
     learnext : resources/views/frontend/theme_mrta/modules/components/nav-search.blade.php
                + public/front/theme_mrta/css|js/nav-search.*
   จอ xl+ (1200px ขึ้นไป) : overlay ทับแถบเมนูด้านขวา - อ้างอิง .navbar ที่ position:relative
   จอเล็ก                 : แถบเต็มความกว้างบนสุดของจอ + autofocus
   ============================================================================= */

/* ── แผง (desktop) ── */
.nav-search-panel {
    display: none;
    position: absolute;
    left: auto;
    right: 250px;
    /* ชิดขวา เว้นพื้นที่ให้ login/lang ~250px */
    width: 35%;
    top: 0;
    bottom: 0;
    align-items: center;
    padding: 0 100px;
    gap: .6rem;
    z-index: 200;
}

.nav-search-panel.show {
    display: flex;
    padding-left: 2.375rem;
}

/* ซ่อนปุ่มแว่นขยายเมื่อแผงเปิด - ยึดที่ไว้ด้วย visibility (JS ใส่ .nav-search-open ให้ .navbar) */
.nav-search-open [data-nav-search-toggle] {
    visibility: hidden;
}

/* ── จอเล็ก: แถบค้นหาเต็มความกว้างบนสุด ──
   ต้องประกาศ "หลัง" .nav-search-panel { display:none } ด้านบน ไม่งั้นโดนทับ */
@media (max-width: 1199.98px) {
    .nav-search-panel {
        display: none;
        position: fixed;
        inset: 0 0 auto 0;
        width: 100%;
        height: auto;
        min-height: 72px;
        padding: 12px 12px 12px 16px;
        margin: 0;
        gap: 8px;
        background: var(--bs-primary-900, #213069);
        z-index: 1045;
    }

    .nav-search-panel.show {
        display: flex;
        align-items: center;
        padding-left: 16px;
    }

    .nav-search-input {
        width: 100% !important;
        font-size: 16px;
        /* 16px กัน iOS ซูมเข้าอัตโนมัติตอนโฟกัส */
    }

    .nav-search-panel .ac-dropdown {
        width: 100%;
    }

    .nav-search-close {
        flex: none;
        width: 44px;
        height: 44px;
        font-size: 18px;
    }
}

/* ── ช่องพิมพ์ ── */
.nav-search-inner {
    display: flex;
    align-items: center;
    flex: 1;
    gap: .5rem;
    position: relative;
    /* for ac-dropdown */
    min-width: 0;
}

.nav-search-input-wrap {
    display: flex;
    align-items: center;
    flex: 1;
    border: 1.5px solid #dee2e6;
    border-radius: 40px;
    overflow: hidden;
    background: #f8f9fa;
    transition: border-color .2s;
    min-width: 0;
}

.nav-search-input-wrap:focus-within {
    border-color: var(--bs-secondary-900, #D82028);
    background: #fff;
}

.nav-search-input-wrap > i {
    padding: .5rem .5rem .5rem .75rem;
    color: #90a4ae;
    font-size: .95rem;
}

.nav-search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: .5rem .75rem;
    font-size: .95rem;
    outline: none;
    min-width: 0;
    width: 300px !important;
}

/* ตัวช่องพิมพ์ไม่ต้องมีกรอบโฟกัสของตัวเอง - กรอบของ .nav-search-input-wrap เปลี่ยนสีบอกโฟกัสแทน
   (กรอบโฟกัสที่ระบบใส่ให้ทุก element เช่นโหมด keyboard ของ learnext จะโดนขอบมนตัดเป็นแถบแปลก ๆ) */
.nav-search-panel .nav-search-input:focus,
.nav-search-panel .nav-search-input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.nav-search-close {
    background: none;
    border: none;
    color: var(--bs-gray-500, #adb5bd);
    padding: .45rem .5rem;
    cursor: pointer;
    font-size: 1rem;
    flex-shrink: 0;
}

.nav-search-close:hover {
    color: var(--bs-gray-300, #dee2e6);
}

/* ── Autocomplete dropdown ── */
.ac-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    z-index: 9999;
    overflow: hidden;
    display: none;
}

.ac-dropdown.show {
    display: block;
}

.ac-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .85rem;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
    text-decoration: none;
    color: inherit;
    transition: background .1s;
}

.ac-item:last-child {
    border-bottom: none;
}

.ac-item:hover,
.ac-item.active {
    background: #e0f7fa;
}

/* ปก */
.ac-cover {
    width: 38px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
    background: #e8eaf6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ac-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ไม่มีปก (ข่าว ฯลฯ) -> พื้นไล่สีเข้ม + ไอคอน */
.ac-cover.ac-cover-news {
    background: linear-gradient(135deg, #1a237e 0%, #283593 55%, #37474f 100%);
}

.ac-cover.ac-cover-news i {
    color: rgba(255, 255, 255, .75);
    font-size: .85rem;
}

/* ป้าย + ชื่อ + รายละเอียด เรียงลงมา */
.ac-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.ac-badge {
    width: fit-content;
    font-size: .68rem;
    font-weight: 600;
    border-radius: .8rem;
    padding: .18em .6em;
    flex-shrink: 0;
    background: var(--bs-secondary-900, #D82028);
    color: #fff;
}

.ac-title {
    font-size: .88rem;
    font-weight: 600;
    color: #1a237e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ac-sub {
    font-size: .75rem;
    color: #90a4ae;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ac-footer {
    padding: .45rem .85rem;
    font-size: .8rem;
    text-align: center;
    color: var(--bs-secondary-900, #D82028);
    cursor: pointer;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
}

.ac-footer:hover {
    background: var(--bs-gray-100, #f8f9fa);
}

.ac-empty {
    padding: .9rem;
    text-align: center;
    font-size: .85rem;
    color: #b0bec5;
}

/* กำลังค้นหา... (โชว์ระหว่างพิมพ์) */
.ac-searching {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    padding: .75rem .85rem;
    color: #90a4ae;
    font-size: .85rem;
    text-align: center;
}

.ac-searching i {
    animation: ac-spin .8s linear infinite;
}

@keyframes ac-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}