/**
 * Showrunner Search — base styles.
 *
 * Owns:
 * - CSS custom properties (--shr-search-*) overridable per site
 * - Form layout (flex) for the standalone shortcode path
 * - Accessible input/select/button base styles (focus-visible, disabled)
 * - The loop loading state (.shr-search-loop.is-loading)
 *
 * Does NOT own anything the Breakdance element controls should win:
 * - Container width/padding, typography, background, borders
 *   -> element css.twig via the designer controls
 *
 * Override --shr-search-* to retheme without specificity wars. The
 * Breakdance EventSearch element's css.twig refines cosmetics via
 * %%SELECTOR%% rules (higher specificity) so designer choices win.
 */

.shr-search {
    --shr-search-primary: #2c3e50;
    --shr-search-primary-text: #fff;
    --shr-search-muted: #6c757d;
    --shr-search-border: #d0d5dd;
    --shr-search-input-bg: #fff;
    --shr-search-input-text: #1a1a2e;
    --shr-search-radius: 6px;
    --shr-search-input-pad: 0.55em 0.8em;
    --shr-search-input-border-width: 1px;
    --shr-search-font: inherit;

    font-family: var(--shr-search-font);
    line-height: 1.5;
    color: var(--shr-search-input-text);
}

/* ─── Form layout (standalone default; element css.twig overrides) ── */

.shr-search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    max-width: 720px;
}

.shr-search-form__fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    width: 100%;
}

.shr-search-form__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.shr-search-form__field--keyword {
    flex: 1 1 220px;
    min-width: 160px;
}

.shr-search-form__field--category,
.shr-search-form__field--venue {
    flex: 0 1 180px;
    min-width: 140px;
}

.shr-search-form__actions {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.shr-search-form__label {
    font-size: 0.85em;
    color: var(--shr-search-muted);
}

/* ─── Inputs & selects ─────────────────────────────────────────── */

.shr-search-form__input,
.shr-search-form__select {
    appearance: none;
    box-sizing: border-box;
    width: 100%;
    padding: var(--shr-search-input-pad);
    border: var(--shr-search-input-border-width) solid var(--shr-search-border);
    border-radius: var(--shr-search-radius);
    background-color: var(--shr-search-input-bg);
    color: var(--shr-search-input-text);
    font-family: var(--shr-search-font);
    font-size: 0.95em;
    line-height: 1.5;
    transition: border-color 0.15s ease;
}

.shr-search-form__input::placeholder {
    color: var(--shr-search-muted);
    opacity: 1;
}

.shr-search-form__input:focus,
.shr-search-form__select:focus {
    border-color: var(--shr-search-primary);
    outline: 2px solid Highlight;
    outline-offset: 2px;
}

/* ─── Buttons ─────────────────────────────────────────────────── */
/*
 * The submit button is a Breakdance button-atom (rendered via
 * \Breakdance\Elements\AtomV1Button\renderFormButton by the element,
 * with a primary fallback here), so it inherits the site's global
 * button styles; per-element refinements come from the element's
 * Search Button design preset. No cosmetic rules here would do
 * anything but fight those. The actions row layout lives in the form
 * layout section above (.shr-search-form__actions).
 */

/* ─── Results loop loading state ────────────────────────────────── */

.shr-search-loop {
    position: relative;
    transition: opacity 0.15s ease;
}

.shr-search-loop.is-loading {
    opacity: 0.45;
    pointer-events: none;
}

.shr-search-loop.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1.5em;
    height: 1.5em;
    border: 2px solid var(--shr-search-border, #d0d5dd);
    border-top-color: var(--shr-search-primary, #2c3e50);
    border-radius: 50%;
    animation: shr-search-spin 0.6s linear infinite;
}

@keyframes shr-search-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ─── Small screens (standalone default) ────────────────────────── */

@media (max-width: 600px) {
    .shr-search-form,
    .shr-search-form__fields {
        flex-direction: column;
        align-items: stretch;
    }

    .shr-search-form__field {
        flex: 1 1 auto;
    }

    .shr-search-form__actions {
        align-items: stretch;
    }

    .shr-search-form__actions .button-atom {
        width: 100%;
    }
}