/* =============================================================================
   /ypac/ypac.css - Yellow Pages Vietnam International
   VERSION: v1.0 (2026-08-13) - Panel styling for ypac.js
   REPLACES: autocomplete_home.css v2.2 AND autocomplete_pages.css v2.2

   WHY ONE FILE INSTEAD OF TWO
   ---------------------------
   The two legacy files were 95% identical. Their real differences were:
     - border #00502a vs #00512b   (one hex digit apart, invisible on screen)
     - font-weight bold vs normal  (bold was too heavy, normal wins)
     - top:69px vs top:71px        (both hardcodes are gone - the panel now
                                    anchors with calc(100% + 8px))
   Everything else, including each file's "defensive" copy of the other's
   overrides, was duplicated. Two files meant two places to fix every bug.

   CARRIED FORWARD (hard-won, do not delete)
   -----------------------------------------
   - .div_box_search { overflow: visible !important; }
       css_home_new.css sets overflow:hidden on the hero to contain its radial
       gradients. overflow:hidden CLIPS the panel regardless of z-index, and
       anchoring inside .nut_what does not change that.
   - .div_box_search > .container { z-index: auto !important; }
       z-index:2 there creates a local stacking context that traps the panel.
   - z-index 1090 (above Bootstrap 5.2 tooltip at 1080).
   - #searchField { width:200px }
       An id rule beating the .nut_what_input class rule - it was silently
       controlling the hero input width. Kept verbatim so the hero does not
       shift when the legacy stylesheet stops loading.

   INNER PAGES: the search box there lives inside #yellowpages_search_modal
   in a .sticky-top header. No override is written for it here on purpose -
   speculative selectors are how CSS fixes turn into dead code. Inspect the
   rendered modal first, then append a verified block under the marker at the
   bottom of this file.

   PALETTE (existing YP surface colours only, nothing new introduced)
     #00512b  brand green             group labels, active marker, action icon
     #ffe593  YP signature highlight  active / hover row
     #fff8e7  action row rest state
     #1c2b23  body text
     #7d8a83  muted text
============================================================================= */

/* -- Search input (preserved from the legacy stylesheets) ------------------- */
#searchField {
    width: 200px;
    background-color: #ffffff;
}

/* -- ROOT CAUSE FIX: unclip the hero + release trapped stacking contexts ---- */
.div_box_search {
    overflow: visible !important;
}

.div_box_search > .container {
    z-index: auto !important;
}

.div_form_input,
.nut_what,
.nut_where {
    z-index: auto !important;
    isolation: auto !important;
}

/* -- Panel ----------------------------------------------------------------- */
.ypac-list {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 1090;
    margin: 0;
    padding: 6px;
    list-style: none;
    text-align: left;
    background: #ffffff;
    border: 1px solid #cfd9d2;
    border-radius: 10px;
    box-shadow: 0 18px 40px -18px rgba(0, 32, 16, .45);
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    font-family: inherit;
}

.ypac-list[hidden] { display: none; }

/* -- Rows ------------------------------------------------------------------ */
.ypac-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 15px;
    font-weight: normal;
    line-height: 1.35;
    color: #1c2b23;
}

.ypac-item::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #dfe6e1;
}

.ypac-item.is-active,
.ypac-item:hover {
    background: #ffe593;
    color: #1c2b23;
}

.ypac-item.is-active::before,
.ypac-item:hover::before {
    background: #00512b;
}

/* Matched fragment. Yellow-on-yellow would disappear on a highlighted row,
   so the mark inverts to a light wash there. */
.ypac-item mark {
    background: #fff0a0;
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
    font-weight: 700;
}

.ypac-item.is-active mark,
.ypac-item:hover mark {
    background: rgba(255, 255, 255, .7);
}

/* -- Group label (Categories / Products & Services) ------------------------ */
.ypac-group {
    margin: 0;
    padding: 9px 12px 3px;
    list-style: none;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #00512b;
    pointer-events: none;
}

.ypac-item + .ypac-group {
    margin-top: 4px;
    padding-top: 9px;
    border-top: 1px solid #eef2ef;
}

/* -- Action row (company-name search) -------------------------------------- */
.ypac-sep {
    height: 1px;
    margin: 6px 6px 4px;
    padding: 0;
    background: #eef2ef;
    list-style: none;
}

.ypac-item.ypac-action {
    background: #fff8e7;
    font-weight: 600;
}

.ypac-item.ypac-action::before {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: #00512b;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

.ypac-item.ypac-action.is-active,
.ypac-item.ypac-action:hover {
    background: #ffe593;
}

.ypac-item.ypac-action strong { font-weight: 800; }

/* -- Note row (only rendered when emptyText is set) ------------------------ */
.ypac-note {
    padding: 11px 12px;
    font-size: 13px;
    color: #7d8a83;
}

/* -- Screen-reader status --------------------------------------------------- */
.ypac-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* -- Motion ----------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .ypac-item { transition: background-color 120ms ease; }
}

/* -- Touch targets ---------------------------------------------------------- */
@media screen and (max-width: 991px) {
    .ypac-list { max-height: 56vh; padding: 5px; }
    .ypac-item { padding: 12px 12px; font-size: 15.5px; }
}

/* ===== INNER-PAGE OVERRIDES - append below after inspecting the real modal ==
   Verify in DevTools which ancestor of #searchField clips or traps the panel
   on an inner page, then write the override against the selector that is
   actually rendered. Nothing speculative goes here.
   ========================================================================== */