@layer components {
    /* Shared */
    .search__icon {
        width: 20px;
        height: 20px;
    }

    .search__cat {
        display: none;
    }

    /* Icon variant — trigger */
    .search__trigger--plain {
        box-shadow: none !important;
        background: transparent !important;
        border: none !important;
        width: auto;
        height: auto;
    }

    /* Overlay */
    .search__overlay {
        --_c: var(--search-color, #fff);
        --input-color: var(--_c);
        --select-color: var(--_c);
        position: fixed;
        inset: 0;
        z-index: var(--z-search-overlay);
        display: flex;
        align-items: center;
        justify-content: var(--search-panel-justify, center);
        padding-block: var(--search-overlay-padding, var(--spacing-xl));
        padding-inline: clamp(1rem, 4vw, var(--search-overlay-padding, var(--spacing-xl)));
        visibility: hidden;
        pointer-events: none;
        transition: visibility 0s var(--anim-speed, 200ms);
    }

    .search__overlay.is-open {
        visibility: visible;
        pointer-events: auto;
        transition: visibility 0s;
    }

    /* Backdrop */
    .search__backdrop,
    .search__backdrop ~ .backdrop__blur {
        position: absolute;
        --backdrop-z: 0;
        --backdrop-speed: var(--anim-speed, 200ms);
    }

    .search__overlay.is-open .search__backdrop,
    .search__overlay.is-open .search__backdrop ~ .backdrop__blur {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity var(--anim-speed, 200ms) ease,
                    visibility var(--anim-speed, 200ms);
    }

    /* Panel — animation handled by global anim-- classes */
    .search__panel {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: var(--search-panel-max-width, 600px);
        text-align: var(--search-content-align, center);
    }

    /* Close button */
    .search__close {
        position: absolute;
        top: var(--spacing-lg);
        inset-inline-end: var(--spacing-lg);
        z-index: 2;
        color: var(--_c);
        --button-radius: 0;
        opacity: 0;
        transition: opacity var(--anim-speed, 200ms), background var(--transition-speed, 200ms);
    }

    .search__overlay.is-open .search__close {
        opacity: 1;
    }

    /* Category pills */
    .search__pills-wrap {
        margin-block-start: var(--spacing-lg);
    }

    .search__categories {
        display: flex;
        flex-wrap: wrap;
        justify-content: var(--search-content-align, center);
        align-items: center;
        gap: var(--search-pill-gap, var(--spacing-sm));
        max-width: var(--search-pills-max-width, none);
        margin-inline: auto;
    }

    .search__pill {
        padding: var(--search-pill-padding, var(--spacing-xs) var(--spacing-md));
        border: var(--search-pill-border, 1px solid color-mix(in srgb, var(--_c) 30%, transparent));
        border-radius: var(--search-pill-radius, var(--radius-full));
        background: var(--search-pill-bg, transparent);
        color: var(--search-pill-color, color-mix(in srgb, var(--_c) 80%, transparent));
        font-family: var(--font-body);
        font-size: var(--search-pill-font, var(--font-size-lg));
        cursor: pointer;
        transition: background var(--transition-speed), border-color var(--transition-speed), color var(--transition-speed);
    }

    .search__pill:hover {
        background: var(--search-pill-hover-bg, color-mix(in srgb, var(--_c) 10%, transparent));
        border-color: var(--search-pill-hover-border, color-mix(in srgb, var(--_c) 50%, transparent));
    }

    .search__pill--active {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-on-primary);
    }

    .search__pill--active:hover {
        background: var(--color-primary);
        border-color: var(--color-primary);
    }

    /* Select spacing */
    .search__select {
        margin-block-start: var(--spacing-lg);
    }

    /* Submit button */
    .search__submit {
        margin-block-start: var(--spacing-lg);
        min-width: var(--search-submit-min-width, 160px);
        --button-radius: var(--search-pill-radius, var(--radius-sm));
        --button-pad-y: var(--search-pill-padding-block, var(--_pad-y));
        line-height: inherit;
    }

    /* Nav menu */
    .search__nav {
        margin-block-start: var(--spacing-lg);
    }

    .search__nav ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: var(--search-content-align, center);
        gap: var(--spacing-sm) var(--spacing-md);
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .search__nav a {
        color: inherit;
        text-decoration: none;
        font-size: var(--search-nav-font-size, var(--font-size-body-sm));
        opacity: 0.6;
        transition: opacity var(--transition-speed, 200ms) ease;
    }

    .search__nav a:hover {
        opacity: 1;
    }

    /* Stagger — form children animate in sequence */
    .search--stagger .search__panel {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }

    .search--stagger .search__form > * {
        opacity: 0;
        transform: translateY(var(--anim-slide-distance, var(--anim-distance, 8px)));
        transition: opacity var(--anim-speed, 200ms) var(--anim-easing, ease),
                    transform var(--anim-speed, 200ms) var(--anim-easing, ease);
    }

    .search--stagger .search__form > :nth-child(1) { --_si: 0; }
    .search--stagger .search__form > :nth-child(2) { --_si: 1; }
    .search--stagger .search__form > :nth-child(3) { --_si: 2; }
    .search--stagger .search__form > :nth-child(4) { --_si: 3; }

    .search--stagger.is-open .search__form > * {
        opacity: 1;
        transform: none;
        transition-delay: calc(var(--_si, 0) * var(--search-stagger, 100ms));
    }

    /* Labels */
    .search__label {
        display: block;
        font-size: var(--search-pill-font, var(--font-size-lg));
        color: var(--_c);
        margin-block-start: var(--spacing-lg);
        margin-block-end: var(--spacing-xs);
    }

    @media (max-width: 500px) {
        .search__form .input--inline,
        .search__form .select--label-inline {
            display: block;
        }

        .search__form .input--inline .input__label,
        .search__form .select--label-inline .select__label {
            margin-block-end: var(--spacing-xs);
            padding-block: 0;
            white-space: normal;
        }

        .search__form .select {
            width: 100%;
        }
    }

    /* Admin bar offset */
    .admin-bar .search__overlay {
        top: var(--wp-admin--admin-bar--height, 32px);
    }

    @media (max-width: 782px) {
        .admin-bar .search__overlay {
            top: 0;
        }
    }

    /* Mobile menu search */
    .mobile-menu__search {
        display: flex;
        padding: var(--spacing-md) var(--spacing-lg);
        width: 100%;
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
        .search__backdrop,
        .search__close,
        .search--stagger .search__form > * {
            transition-duration: 0.01ms;
            transition-delay: 0s;
        }
    }

    /* Print */
    @media print {
        .search {
            display: none;
        }
    }
}