/* VnGuide global search overlay + autocomplete */

.vnguide-search-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    background: #fff;
    transition: background 0.15s ease;
}
.vnguide-search-btn:hover { background: #f3f4f6; }

.vnguide-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 20px 20px;
}
.vnguide-search-overlay[hidden] { display: none; }

.vnguide-search-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 24, 38, 0.55);
    backdrop-filter: blur(2px);
}

.vnguide-search-overlay__panel {
    position: relative;
    background: #fff;
    width: 100%;
    max-width: 720px;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    padding: 16px 20px 20px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

.vnguide-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 2px solid #f3f4f6;
    padding-bottom: 10px;
}
.vnguide-search-input {
    flex: 1;
    border: 0;
    outline: none;
    font-size: 18px;
    line-height: 1.4;
    padding: 10px 8px;
    background: transparent;
}
.vnguide-search-submit,
.vnguide-search-close {
    background: transparent;
    border: 0;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    border-radius: 6px;
    font-size: 22px;
}
.vnguide-search-submit:hover,
.vnguide-search-close:hover { background: #f3f4f6; color: #111; }

.vnguide-search-suggest {
    margin-top: 16px;
}
.vnguide-search-suggest__group {
    margin-bottom: 14px;
}
.vnguide-search-suggest__group-label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
    padding: 0 4px;
}
.vnguide-search-suggest__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 8px;
    color: #111;
    text-decoration: none;
    transition: background 0.1s ease;
}
.vnguide-search-suggest__item:hover,
.vnguide-search-suggest__item.is-active {
    background: #f3f4f6;
    color: #111;
    text-decoration: none;
}
.vnguide-search-suggest__thumb {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    background: #e5e7eb;
    flex-shrink: 0;
    overflow: hidden;
}
.vnguide-search-suggest__thumb img { width: 100%; height: 100%; object-fit: cover; }
.vnguide-search-suggest__title { font-weight: 600; font-size: 15px; line-height: 1.3; }
.vnguide-search-suggest__meta { font-size: 12px; color: #6b7280; margin-top: 2px; }

.vnguide-search-suggest mark { background: #fef08a; padding: 0; }

.vnguide-search-recent,
.vnguide-search-popular { margin-top: 18px; }
.vnguide-search-recent__label,
.vnguide-search-popular__label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.vnguide-search-recent__items,
.vnguide-search-popular__items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.vnguide-search-chip {
    background: #f3f4f6;
    border: 0;
    border-radius: 9999px;
    padding: 6px 14px;
    font-size: 13px;
    color: #111;
    cursor: pointer;
    transition: background 0.1s ease;
}
.vnguide-search-chip:hover { background: #e5e7eb; }

.vnguide-search-empty {
    text-align: center;
    color: #6b7280;
    padding: 30px 12px;
}

@media (max-width: 480px) {
    .vnguide-search-overlay { padding: 20px 12px; }
    .vnguide-search-overlay__panel { max-height: calc(100vh - 40px); padding: 12px 14px 16px; }
    .vnguide-search-input { font-size: 16px; }
}

/* Hide search btn on very small screens to avoid header crowding (icon menu still accessible) */
@media (max-width: 360px) {
    .vnguide-header-search-trigger { display: none !important; }
}

/* Mobile/tablet header search icon (< 1200px), in [data-x="header-mobile-icons"] next to the
   account icon. The desktop pill lives in .header-menu.menu-right, which GoTrip turns into an
   inert drawer below 1200px. */
.vnguide-mobile-search-btn {
    position: relative;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
/* 44x44 hit area without changing the 22px icon rhythm of the row (WCAG 2.5.5). */
.vnguide-mobile-search-btn::after {
    content: "";
    position: absolute;
    inset: -11px;
}

/* The form label uses .visually-hidden, which this theme's Bootstrap build does not ship:
   it rendered as a visible "Tìm kiếm" and squeezed the input. */
.vnguide-search-form .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}