/*
 * KMS Matrimony Search - front-end styles.
 *
 * Builds on the profile card styles of KMS Matrimony Profiles (.kms-list,
 * .kms-item, .kms-btn, .kms-notice, .kms-pagination).
 *
 * COLOURS: change them in one place, for example in Pagelayer > Custom CSS:
 *
 *   :root { --kms-ms-primary: #0b2a5b; --kms-ms-accent: #d71920; }
 *
 * Inside the search plugin's elements, the profiles plugin's own variables
 * (--kms-primary, --kms-accent, ...) are mapped to these navy/red values, so
 * the cards match without editing the other plugin.
 */
:root {
	--kms-ms-primary: #1b2a5c;       /* navy */
	--kms-ms-primary-dark: #111c40;
	--kms-ms-accent: #c8102e;        /* red */
	--kms-ms-accent-dark: #a00d25;
	--kms-ms-text: #1a2038;
	--kms-ms-muted: #5b6480;
	--kms-ms-bg: #ffffff;
	--kms-ms-surface: #f3f5fa;
	--kms-ms-border: #d6dcec;
	--kms-ms-radius: 10px;
	--kms-ms-gap: 20px;
	--kms-ms-sidebar-width: 300px;
}

.kms-ms {
	--kms-primary: var(--kms-ms-primary);
	--kms-primary-dark: var(--kms-ms-primary-dark);
	--kms-accent: var(--kms-ms-accent);
	--kms-text: var(--kms-ms-text);
	--kms-muted: var(--kms-ms-muted);
	--kms-bg: var(--kms-ms-bg);
	--kms-surface: var(--kms-ms-surface);
	--kms-border: var(--kms-ms-border);
	--kms-radius: var(--kms-ms-radius);
	--kms-gap: var(--kms-ms-gap);
}

/* Visually hidden, still read by screen readers. */
.kms-ms .kms-ms-sr {
	position: absolute !important;
	width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Buttons: red call to action, navy outline for secondary actions. */
.kms-ms .kms-btn--primary { background: var(--kms-ms-accent); border-color: var(--kms-ms-accent); color: #fff; }
.kms-ms .kms-btn--primary:hover { background: var(--kms-ms-accent-dark); border-color: var(--kms-ms-accent-dark); }
.kms-ms .kms-item .kms-btn--small:hover { background: var(--kms-ms-primary); border-color: var(--kms-ms-primary); color: #fff; }

/* ---------- Layout for [kms_search] ---------- */
.kms-ms-layout { display: grid; gap: calc(var(--kms-ms-gap) + 4px); align-items: start; }
.kms-ms-layout--sidebar { grid-template-columns: var(--kms-ms-sidebar-width) minmax(0, 1fr); }
.kms-ms-layout--top { grid-template-columns: minmax(0, 1fr); }
.kms-ms-layout__filters, .kms-ms-layout__results { min-width: 0; }

/* ---------- Filter form ---------- */
.kms-ms-formwrap { background: var(--kms-ms-bg); border: 1px solid var(--kms-ms-border); border-top: 4px solid var(--kms-ms-primary); border-radius: var(--kms-ms-radius); padding: 18px 20px 20px; }
.kms-ms-title { margin: 0 0 14px; font-size: 1.2em; line-height: 1.25; color: var(--kms-ms-primary); }
.kms-ms-form { margin: 0; }

.kms-ms-fields { display: grid; gap: 14px 16px; }
.kms-ms-formwrap--vertical .kms-ms-fields { grid-template-columns: minmax(0, 1fr); }
.kms-ms-formwrap--horizontal .kms-ms-fields { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.kms-ms .kms-ms-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.kms-ms .kms-ms-field label,
.kms-ms .kms-ms-range legend { font-weight: 600; font-size: .95em; padding: 0; margin: 0 0 6px; color: var(--kms-ms-text); }
.kms-ms .kms-ms-range legend { float: none; display: block; width: 100%; }
.kms-ms .kms-ms-field input[type="text"],
.kms-ms .kms-ms-field input[type="number"],
.kms-ms .kms-ms-field select {
	width: 100%; max-width: 100%; padding: 10px 12px; font: inherit; line-height: 1.3;
	color: var(--kms-ms-text); background: var(--kms-ms-bg);
	border: 1.5px solid var(--kms-ms-border); border-radius: var(--kms-ms-radius);
}
.kms-ms .kms-ms-field input:focus,
.kms-ms .kms-ms-field select:focus { border-color: var(--kms-ms-primary); }

.kms-ms-range__inputs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; }
.kms-ms-range__inputs--select { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.kms-ms-note { margin: 12px 0 0; }

.kms-ms-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.kms-ms-actions .kms-btn { flex: 1 1 auto; text-align: center; }
.kms-ms-formwrap--horizontal .kms-ms-actions .kms-btn { flex: 0 0 auto; min-width: 140px; }

/* Mobile toggle button (shown only when JS is active, see media query). */
.kms-ms .kms-ms-toggle { display: none; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin: 0 0 12px; }
.kms-ms-badge { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--kms-ms-accent); color: #fff; font-size: .8em; line-height: 1.5; text-align: center; }
.kms-ms-badge[data-count="0"] { display: none; }

/* ---------- Results ---------- */
.kms-ms-results { min-width: 0; transition: opacity .15s ease; }
.kms-ms-results.is-loading .kms-list,
.kms-ms-results.is-loading .kms-ms-toolbar { opacity: .45; pointer-events: none; }
.kms-ms-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin: 0 0 var(--kms-ms-gap); }
.kms-ms-count { margin: 0; font-weight: 600; color: var(--kms-ms-primary); }
.kms-ms-count:focus, .kms-ms-empty:focus { outline: none; }
.kms-ms-sort { display: flex; align-items: center; gap: 8px; margin: 0; }
.kms-ms-sort label { font-weight: 600; font-size: .95em; }
.kms-ms-sort select { padding: 8px 10px; font: inherit; color: var(--kms-ms-text); background: var(--kms-ms-bg); border: 1.5px solid var(--kms-ms-border); border-radius: var(--kms-ms-radius); }
.kms-ms-empty ul { margin: 8px 0 12px 20px; }
.kms-ms-results .kms-pagination .current { background: var(--kms-ms-primary); border-color: var(--kms-ms-primary); color: #fff; }
.kms-ms-results .kms-pagination a:hover { border-color: var(--kms-ms-accent); color: var(--kms-ms-accent); }

/* ---------- Quick search widget ---------- */
.kms-ms-quick { background: var(--kms-ms-bg); border: 1px solid var(--kms-ms-border); border-top: 4px solid var(--kms-ms-accent); border-radius: var(--kms-ms-radius); padding: 18px 20px; }
.kms-ms-quick form { margin: 0; }
.kms-ms-quick__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 16px; align-items: end; }
.kms-ms-quick__submit .kms-btn { width: 100%; text-align: center; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.kms-ms-layout--sidebar { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
	/* The panel collapses only when JavaScript can reopen it. */
	.kms-ms--js .kms-ms-toggle { display: flex; }
	.kms-ms--js .kms-ms-panel { display: none; }
	.kms-ms--js .kms-ms-panel.is-open { display: block; }
	.kms-ms-formwrap { padding: 14px 14px 16px; }
	.kms-ms-formwrap--horizontal .kms-ms-actions .kms-btn { flex: 1 1 auto; }
	.kms-ms-toolbar { flex-direction: column; align-items: flex-start; }
	.kms-ms-sort { width: 100%; }
	.kms-ms-sort select { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
	.kms-ms-results { transition: none; }
}