/* FCA Global Search — Popover & Centered Search */

/* ================================================================
   Centered search bar
   ================================================================ */

.fca-gs-search-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(640px, 100%);
    max-width: min(640px, 54vw);
    z-index: 1001;
}

.fca-gs-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--fcom-secondary-border, #CED0D4);
    background: var(--fcom-primary-bg, #fff);
    transition: border-color 150ms ease;
}

.fca-gs-search-wrap:focus-within {
    border-color: var(--fcom-text-link, #216FDB);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fcom-text-link, #216FDB) 12%, transparent);
}

.fca-gs-search-icon {
    display: inline-flex;
    align-items: center;
    width: 18px; height: 18px; flex: 0 0 18px;
    color: var(--fcom-secondary-text, #65676B);
    transition: color 150ms ease;
}

.fca-gs-search-wrap:focus-within .fca-gs-search-icon {
    color: var(--fcom-text-link, #216FDB);
}

.fca-gs-search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0; margin: 0; border: 0; outline: 0;
    background: transparent;
    color: var(--fcom-primary-text, #19283a);
    font-size: 14px; font-weight: 400; line-height: 1.4;
}

.fca-gs-search-input::placeholder {
    color: var(--fcom-secondary-text, #65676B);
}

.fca-gs-search-kbd {
    display: inline-flex;
    align-items: center; justify-content: center;
    min-width: 22px; height: 20px;
    padding: 0 6px;
    border-radius: 4px;
    border: 1px solid var(--fcom-primary-border, #DADDE1);
    background: var(--fcom-secondary-bg, #F0F2F5);
    color: var(--fcom-secondary-text, #65676B);
    font-size: 11px; font-weight: 600; line-height: 1;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* ================================================================
   Dropdown (shared by center and right-side modes)
   ================================================================ */

.fca-gs-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    min-width: 360px;
    overflow: hidden auto;
    max-height: 460px;
    padding: 4px;
    border: 1px solid var(--fcom-primary-border, #DADDE1);
    border-radius: 10px;
    background: var(--fcom-primary-bg, #fff);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 9999;
    scrollbar-width: thin;
    animation: fca-gs-dd-in 140ms ease-out;
}

/* Right-side mode: align to the right edge of the form */
.fca_search_form .fca-gs-dropdown {
    min-width: 400px;
    right: 0;
    left: auto;
}

@keyframes fca-gs-dd-in {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Section ---- */

.fca-gs-dd-section {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px 0;
}

.fca-gs-dd-section + .fca-gs-dd-section {
    border-top: 1px solid var(--fcom-primary-border, #EAEDF0);
    padding-top: 4px;
}

.fca-gs-dd-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 4px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fcom-secondary-text, #65676B);
}

.fca-gs-dd-more {
    font-weight: 500; font-size: 10px;
    color: var(--fcom-text-off, #8A8D91);
    text-transform: none; letter-spacing: 0;
}

/* ---- Result item ---- */

.fca-gs-dd-item {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 100ms ease;
}

.fca-gs-dd-item:hover,
.fca-gs-dd-item.fca-gs-active {
    background: var(--fcom-highlight-bg, #F0F2F5);
}

.fca-gs-dd-item.fca-gs-active {
    box-shadow: inset 3px 0 0 var(--fcom-text-link, #216FDB);
}

.fca-gs-dd-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 6px;
    background: var(--fcom-secondary-bg, #F0F2F5);
    color: var(--fcom-secondary-text, #65676B);
}

.fca-gs-dd-item:hover .fca-gs-dd-icon,
.fca-gs-dd-item.fca-gs-active .fca-gs-dd-icon {
    color: var(--fcom-text-link, #216FDB);
}

.fca-gs-dd-icon svg {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none;
    stroke-width: 1.5;
}

.fca-gs-dd-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.fca-gs-dd-title {
    font-size: 13px; font-weight: 500;
    color: var(--fcom-primary-text, #19283a);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.3;
}

.fca-gs-dd-sub {
    font-size: 11px;
    color: var(--fcom-text-off, #8A8D91);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.3;
}

/* ---- Footer ---- */

.fca-gs-dd-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    margin-top: 2px;
    border-top: 1px solid var(--fcom-primary-border, #EAEDF0);
    border-radius: 0 0 6px 6px;
    font-size: 13px;
    color: var(--fcom-text-link, #216FDB);
    cursor: pointer;
    transition: background 100ms ease;
}

.fca-gs-dd-footer:hover,
.fca-gs-dd-footer.fca-gs-active {
    background: var(--fcom-highlight-bg, #F0F2F5);
}

.fca-gs-dd-footer svg { flex-shrink: 0; }
.fca-gs-dd-footer strong { font-weight: 600; }

/* ---- Empty state ---- */

.fca-gs-dd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 28px 20px 24px;
    text-align: center;
}

.fca-gs-dd-empty-icon {
    display: flex;
    align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 8px;
    background: var(--fcom-secondary-bg, #F0F2F5);
    color: var(--fcom-secondary-text, #65676B);
    margin-bottom: 4px;
}

.fca-gs-dd-empty-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }

.fca-gs-dd-empty-title {
    font-size: 13px; font-weight: 600;
    color: var(--fcom-primary-text, #19283a);
}

.fca-gs-dd-empty-sub {
    font-size: 12px;
    color: var(--fcom-secondary-text, #65676B);
    line-height: 1.4;
}

/* ---- Loading ---- */

.fca-gs-dd-loading {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 4px;
}

.fca-gs-dd-loading-row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 6px;
}

.fca-gs-dd-loading-icon,
.fca-gs-dd-loading-line,
.fca-gs-dd-loading-line-sm {
    border-radius: 4px;
    background: var(--fcom-secondary-bg, #F0F2F5);
    animation: fca-gs-shimmer 1.4s linear infinite;
    background-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.03) 50%, transparent 100%);
    background-repeat: no-repeat;
    background-size: 200px 100%;
}

.fca-gs-dd-loading-icon { width: 30px; height: 30px; }
.fca-gs-dd-loading-line { height: 11px; width: 68%; }
.fca-gs-dd-loading-line-sm { height: 9px; width: 42%; margin-top: 3px; }

@keyframes fca-gs-shimmer {
    from { background-position: -200px 0; }
    to   { background-position: calc(100% + 200px) 0; }
}

/* ================================================================
   Hide search page input when centered mode is active (desktop only).
   The header already has the search bar, so the page just shows results.
   On mobile the centered bar is hidden, so the page input must remain.
   ================================================================ */

@media (min-width: 769px) {
    body.fca-gs-centered .fca-search-header .fca-search-input-wrapper,
    body.fca-gs-centered .fca-search-header .fca-search-results-badge {
        display: none !important;
    }
}

/* ================================================================
   Responsive
   ================================================================ */

@media (max-width: 1200px) {
    .fca-gs-search-center { max-width: min(560px, 48vw); }
}

@media (max-width: 1024px) {
    .fca-gs-search-center { max-width: min(480px, 42vw); }
    .fca-gs-search-kbd { display: none; }
}

@media (max-width: 768px) {
    /* Centered bar is hidden on mobile by Plugin.php inline CSS;
       the right-side popover dropdown should adapt for small screens */
    .fca_search_form .fca-gs-dropdown {
        min-width: 0;
        left: 0; right: 0;
        max-height: 60vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fca-gs-dropdown { animation: none; }
    .fca-gs-dd-loading-icon,
    .fca-gs-dd-loading-line,
    .fca-gs-dd-loading-line-sm { animation: none; }
}