/* Shared search panel (inc/presentation/search-panel.php). The revival finder, the church
   directory, and the home page all use it, so a change here changes every search.
   Scoped to .sr-sp so GeneratePress button, input, and select defaults never leak in. */

.sr-sp { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px; border: 1px solid var(--sr-border-soft); border-radius: var(--sr-radius-lg); background: var(--sr-white); box-shadow: var(--sr-shadow-card); color: var(--sr-ink); text-align: left; }
.sr-sp--overlap { margin-top: -48px; }
.sr-sp [hidden] { display: none !important; }
.sr-sp :focus-visible { outline: 3px solid var(--sr-blue-700); outline-offset: 2px; }
.sr-sp .sr-button { gap: 8px; }
.sr-sp .sr-sp-i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Rows and fields */
.sr-sp .sr-sp-advanced { display: grid; gap: 14px; }
.sr-sp .sr-sp-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.sr-sp .sr-sp-field { display: grid; gap: 6px; min-width: 0; }
.sr-sp .sr-sp-field > label, .sr-sp .sr-sp-label { margin: 0; color: var(--sr-navy-900); font-size: var(--sr-text-label) !important; font-weight: 600; line-height: 1.2 !important; }
.sr-sp .sr-sp-field--search { flex: 1 1 320px; }
.sr-sp .sr-sp-field--state { flex: 0 1 200px; }
.sr-sp .sr-sp-field--city { flex: 1 1 190px; }
.sr-sp .sr-sp-field--when { flex: 1 1 220px; }
.sr-sp .sr-sp-field--dates { flex: 1 1 320px; }
.sr-sp .sr-sp-dates { display: flex; gap: 8px; align-items: center; color: var(--sr-muted); }
.sr-sp .sr-sp-dates .sr-sp-input { flex: 1 1 0; min-width: 0; }

/* Search box */
.sr-sp .sr-sp-searchbox { position: relative; }
.sr-sp .sr-sp-searchbox > .sr-sp-i { position: absolute; top: 50%; left: 14px; color: var(--sr-muted); transform: translateY(-50%); pointer-events: none; }
.sr-sp .sr-sp-searchbox kbd { position: absolute; top: 50%; right: 12px; padding: 1px 7px; border: 1px solid var(--sr-border-strong); border-radius: 5px; background: var(--sr-white); color: var(--sr-muted); font: 600 0.8rem var(--sr-font-body); transform: translateY(-50%); }
.sr-sp .sr-sp-searchbox:focus-within kbd { display: none; }
@media (hover: none) { .sr-sp .sr-sp-searchbox kbd { display: none; } }

/* Inputs and selects (the results Sort select below the panel shares them) */
.sr-sp .sr-sp-input, .sr-sp .sr-sp-select, .sr-sp-sort .sr-sp-select { width: 100%; min-height: 48px; margin: 0; padding: 0 14px; border: 1px solid var(--sr-border-strong); border-radius: var(--sr-radius); background-color: var(--sr-surface-soft); color: var(--sr-ink); font: 400 1rem var(--sr-font-body); transition: border-color var(--sr-duration-fast), background-color var(--sr-duration-fast); -webkit-appearance: none; appearance: none; }
.sr-sp .sr-sp-searchbox .sr-sp-input { padding-right: 44px; padding-left: 44px; }
.sr-sp .sr-sp-input::-webkit-search-cancel-button { display: none; }
.sr-sp .sr-sp-select, .sr-sp-sort .sr-sp-select { padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6676' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-position: right 12px center; background-repeat: no-repeat; background-size: 16px; cursor: pointer; }
.sr-sp .sr-sp-select:disabled { color: var(--sr-muted); cursor: not-allowed; opacity: 0.7; }
.sr-sp .sr-sp-input:hover, .sr-sp .sr-sp-select:hover:not(:disabled), .sr-sp-sort .sr-sp-select:hover { border-color: var(--sr-blue-500); }
.sr-sp .sr-sp-input:focus, .sr-sp .sr-sp-select:focus, .sr-sp-sort .sr-sp-select:focus { border-color: var(--sr-blue-700); background-color: var(--sr-white); outline: 3px solid rgba(31, 95, 157, 0.22); outline-offset: 0; }
.sr-sp .sr-sp-input[aria-invalid="true"] { border-color: #b42318; }

/* Results Sort select */
.sr-sp-sort { display: flex; gap: 8px; margin: 0; align-items: center; color: var(--sr-muted); font-size: 0.9rem; font-weight: 600; white-space: nowrap; }
.sr-sp-sort .sr-sp-select { width: auto; min-height: 40px; background-color: var(--sr-white); font-size: 0.95rem; }

/* Status tabs */
.sr-sp .sr-sp-tabs { display: flex; gap: 6px; margin: -4px -4px 0; padding: 4px; overflow-x: auto; scrollbar-width: none; }
.sr-sp .sr-sp-tabs::-webkit-scrollbar { display: none; }
.sr-sp .sr-sp-tab { display: inline-flex; flex: none; min-height: 44px; gap: 8px; padding: 0 16px; border: 1px solid var(--sr-border-strong); border-radius: var(--sr-radius-pill); align-items: center; background: var(--sr-white); color: var(--sr-navy-900); font-size: 0.98rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background var(--sr-duration-fast), border-color var(--sr-duration-fast); }
.sr-sp .sr-sp-tab:hover { border-color: var(--sr-navy-900); color: var(--sr-navy-900); }
.sr-sp .sr-sp-tab b { min-width: 24px; padding: 1px 8px; border-radius: var(--sr-radius-pill); background: var(--sr-mist); font-size: 0.8rem; text-align: center; }
.sr-sp .sr-sp-tab[aria-current="true"] { border-color: var(--sr-navy-900); background: var(--sr-navy-900); color: var(--sr-white); }
.sr-sp .sr-sp-tab[aria-current="true"] b { background: var(--sr-gold-400); color: var(--sr-navy-950); }
.sr-sp .sr-sp-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #1fa463; box-shadow: 0 0 0 0 rgba(31, 164, 99, 0.5); animation: sr-sp-pulse 1.8s ease-out infinite; }
@keyframes sr-sp-pulse { 70% { box-shadow: 0 0 0 7px rgba(31, 164, 99, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 164, 99, 0); } }

/* "Show only" chips: a toggle button (aria-pressed) or, with --live, a styled checkbox */
.sr-sp .sr-sp-chip, .sr-sp .sr-sp-chip:focus { position: relative; display: inline-flex; min-height: 48px; gap: 8px; margin: 0; padding: 0 16px; border: 1px solid var(--sr-border-strong); border-radius: var(--sr-radius); align-items: center; background: var(--sr-white); color: var(--sr-navy-900); font: 600 1rem var(--sr-font-body); white-space: nowrap; cursor: pointer; transition: background var(--sr-duration-fast), border-color var(--sr-duration-fast); }
.sr-sp .sr-sp-chip:hover { border-color: var(--sr-gold-600); background: var(--sr-white); color: var(--sr-navy-900); }
.sr-sp .sr-sp-chip b { padding: 1px 8px; border-radius: var(--sr-radius-pill); background: var(--sr-mist); color: var(--sr-navy-900); font-size: 0.8rem; }
.sr-sp .sr-sp-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sr-gold-400); box-shadow: 0 0 0 2px var(--sr-gold-600) inset; }
.sr-sp .sr-sp-chip[aria-pressed="true"], .sr-sp .sr-sp-chip:has(input:checked) { border-color: var(--sr-gold-600); background: var(--sr-status-gold-bg); color: var(--sr-status-gold-text); }
.sr-sp .sr-sp-chip[aria-pressed="true"] b, .sr-sp .sr-sp-chip:has(input:checked) b { background: var(--sr-gold-400); color: var(--sr-navy-950); }
.sr-sp .sr-sp-chip input { position: absolute; opacity: 0; pointer-events: none; }
.sr-sp .sr-sp-chip:focus-within { outline: 3px solid var(--sr-blue-700); outline-offset: 2px; }
.sr-sp .sr-sp-chip--live:hover { border-color: #b42318; }
.sr-sp .sr-sp-chip--live:has(input:checked) { border-color: #b42318; background: #fde8e7; color: #8f1c13; }
.sr-sp .sr-sp-chip--live:has(input:checked) b { background: #b42318; color: var(--sr-white); }

/* Near me */
.sr-sp .sr-sp-loc { padding-top: 14px; border-top: 1px solid var(--sr-border-soft); align-items: center; }
.sr-sp .sr-sp-loc__label { margin: 0; color: var(--sr-navy-900); font-size: var(--sr-text-label) !important; font-weight: 600 !important; }
.sr-sp .sr-sp-near[aria-pressed="true"] { border-color: var(--sr-navy-900); background: var(--sr-navy-900); color: var(--sr-white); }
.sr-sp .sr-sp-near[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.sr-sp .sr-sp-or { color: var(--sr-muted); font-size: 0.9rem; }
.sr-sp .sr-sp-zip { display: flex; gap: 8px; }
.sr-sp .sr-sp-zip .sr-sp-input { width: 130px; }
.sr-sp .sr-sp-zip .sr-sp-select { width: 120px; }
.sr-sp .sr-sp-notice { flex-basis: 100%; margin: 0; padding: 10px 12px; border-radius: var(--sr-radius); background: var(--sr-status-gold-bg); color: var(--sr-status-gold-text); font-size: 0.92rem !important; line-height: 1.45 !important; }
.sr-sp .sr-sp-reset { color: var(--sr-blue-700); font-weight: 600; }

/* Phones. Panels marked --drawer keep search and tabs visible and fold the rest into a Filters drawer
   once the page script adds .is-ready. */
.sr-sp .sr-sp-more { display: none; }
@media (max-width: 760px) {
	.sr-sp { padding: 14px; }
	.is-ready .sr-sp--drawer .sr-sp-advanced { display: none; padding-top: 14px; border-top: 1px solid var(--sr-border-soft); }
	.is-ready .sr-sp--drawer.is-open .sr-sp-advanced { display: grid; }
	.sr-sp .sr-sp-more, .sr-sp .sr-sp-more:focus { display: inline-flex; min-height: 48px; gap: 8px; padding: 0 16px; border: 1px solid var(--sr-border-strong); border-radius: var(--sr-radius); align-items: center; background: var(--sr-white); color: var(--sr-navy-900); font: 600 1rem var(--sr-font-body); cursor: pointer; }
	.sr-sp .sr-sp-more[aria-expanded="true"] { border-color: var(--sr-navy-900); background: var(--sr-mist); }
	.sr-sp .sr-sp-more b { padding: 1px 8px; border-radius: var(--sr-radius-pill); background: var(--sr-gold-400); color: var(--sr-navy-950); font-size: 0.8rem; }
	.sr-sp--drawer .sr-sp-field--search { flex: 1 1 0; }
	.sr-sp .sr-sp-field--state { flex: 1 1 110px; }
	.sr-sp .sr-sp-field--chip, .sr-sp .sr-sp-chip, .sr-sp .sr-sp-near, .sr-sp .sr-sp-zip { flex: 1 1 100%; width: 100%; }
	.sr-sp .sr-sp-or { display: none; }
	.sr-sp .sr-sp-zip .sr-sp-input, .sr-sp .sr-sp-zip .sr-sp-select { width: auto; min-width: 0; flex: 1 1 0; }
}

@media (prefers-reduced-motion: reduce) {
	.sr-sp *, .sr-sp *::before, .sr-sp *::after { transition: none !important; animation: none !important; }
}