/* OPL Search modal — feature-flagged via OPL_NEW_SEARCH_ENABLED */

body.opl-search-locked { overflow: hidden; }

.opl-search-modal {
	position: fixed; inset: 0; z-index: 999999;
	display: none;
	font: inherit;
}
.opl-search-modal.is-open { display: block; }

.opl-search-backdrop {
	position: absolute; inset: 0;
	background: rgba(15, 15, 20, 0.55);
	backdrop-filter: blur(2px);
}

.opl-search-panel {
	position: relative;
	max-width: 760px;
	margin: 6vh auto 0;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 24px 80px rgba(0,0,0,0.25);
	overflow: hidden;
	max-height: 84vh;
	display: flex; flex-direction: column;
}

.opl-search-header {
	display: flex; align-items: center; gap: 12px;
	padding: 16px 18px;
	border-bottom: 1px solid #eee;
}
.opl-search-icon { color: #7a7a85; flex-shrink: 0; }
.opl-search-input {
	flex: 1;
	border: none; outline: none;
	font-size: 18px;
	background: transparent;
	color: #111;
}
.opl-search-input::placeholder { color: #b0b0b8; }
.opl-search-close {
	background: none; border: none;
	font-size: 28px; line-height: 1;
	color: #888; cursor: pointer;
	padding: 0 6px;
}
.opl-search-close:hover { color: #111; }

.opl-search-body {
	flex: 1; overflow-y: auto;
	padding: 14px 18px 18px;
}

.opl-search-status {
	color: #888; font-size: 14px;
	padding: 12px 4px;
}

.opl-search-section { margin-bottom: 18px; }
.opl-search-label {
	display: block;
	font-size: 11px; text-transform: uppercase;
	letter-spacing: 0.06em; color: #888;
	margin-bottom: 8px;
}

.opl-search-pill {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px;
	margin: 0 6px 6px 0;
	background: #f3f3f5;
	border-radius: 999px;
	color: #222; text-decoration: none;
	font-size: 14px;
	transition: background 0.12s;
}
.opl-search-pill:hover { background: #e7e7eb; }
.opl-search-pill.is-matched {
	background: #fff0e5;
	color: #c4410f;
}
.opl-search-pill.is-matched:hover { background: #ffe2cc; }
.opl-search-pill small {
	font-size: 10px; text-transform: uppercase;
	letter-spacing: 0.05em; color: #999;
}
.opl-search-pill em {
	font-style: normal;
	color: #999;
	font-size: 12px;
}

.opl-search-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
.opl-search-card {
	display: flex; gap: 12px;
	padding: 10px;
	border-radius: 10px;
	color: inherit; text-decoration: none;
	transition: background 0.12s;
}
.opl-search-card:hover { background: #f6f6f8; }
.opl-search-card-thumb {
	width: 96px; height: 64px;
	background: #ddd center/cover no-repeat;
	border-radius: 6px; flex-shrink: 0;
}
.opl-search-card-body {
	display: flex; flex-direction: column;
	min-width: 0; justify-content: center;
}
.opl-search-card-body strong {
	font-size: 14px; color: #111;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.opl-search-card-body small {
	font-size: 12px; color: #888;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.opl-search-footer {
	padding: 10px 18px;
	border-top: 1px solid #eee;
	font-size: 12px; color: #888;
}
.opl-search-footer a { color: #555; }
.opl-search-footer kbd {
	background: #eee; border-radius: 4px;
	padding: 1px 6px; font-size: 11px;
	font-family: ui-monospace, Menlo, monospace;
}

@media (max-width: 600px) {
	.opl-search-panel { margin: 0; max-height: 100vh; border-radius: 0; }
	.opl-search-grid { grid-template-columns: 1fr; }
}