/* BLOOOW | Public search focus refinement (October 2026)
 * One quiet, accessible focus indicator per search control; no double blue
 * outline from the search input and its surrounding form/label.
 * Loaded by base.html AFTER each page's final_css so it stays consistent
 * on Home, Business, Events, Offers, Categories and Contact.
 * No search markup, submission behavior or responsive layout changes.
 */
:root {
    --search-focus-edge: #66758a;
    --search-focus-ring: rgba(84, 101, 124, .21);
    --search-focus-shadow: 0 5px 19px rgba(16, 30, 54, .09);
    --search-selection-bg: #cbd5e1;
    --search-selection-ink: #172235;
}

:root[data-theme="dark"] {
    --search-focus-edge: #b4c0d2;
    --search-focus-ring: rgba(177, 193, 215, .25);
    --search-focus-shadow: 0 7px 22px rgba(0, 0, 0, .20);
    --search-selection-bg: #50617b;
    --search-selection-ink: #fff;
}

/* The container signals focus for either mouse/touch or keyboard users.
   This is intentionally neutral instead of the competing blue outlines. */
:root :is(
    .home-page .home-search,
    .business-page .business-search-field,
    .categories-page .category-search,
    .agent-verification-page .agent-name-search
):focus-within {
    border-color: var(--search-focus-edge) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px var(--search-focus-ring),
                var(--search-focus-shadow) !important;
}

/* Give one visual cue, on the parent, not a second outline on the input.
   Keep all other input and button focus styles intact. */
:is(
    .home-page .home-search,
    .business-page .business-search-field,
    .categories-page .category-search,
    .agent-verification-page .agent-name-search
) input[type="search"]:focus,
:is(
    .home-page .home-search,
    .business-page .business-search-field,
    .categories-page .category-search,
    .agent-verification-page .agent-name-search
) input[type="search"]:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* When text is explicitly selected, keep it readable without browser-blue
   blocks. Selection remains clearly visible in either theme. */
:is(
    .home-page .home-search,
    .business-page .business-search-field,
    .categories-page .category-search,
    .agent-verification-page .agent-name-search
) input[type="search"]::selection {
    background: var(--search-selection-bg);
    color: var(--search-selection-ink);
}

/* Legacy business-search control on the old Business placeholder (if used). */
.business-search input[type="search"]:focus,
.business-search input[type="search"]:focus-visible {
    border-color: var(--search-focus-edge) !important;
    outline: 2px solid var(--search-focus-ring) !important;
    outline-offset: 2px;
    box-shadow: none !important;
}

.business-search input[type="search"]::selection {
    background: var(--search-selection-bg);
    color: var(--search-selection-ink);
}