/* ============================================================
   TR Search Panel — techreview.com.tr
   ============================================================ */

/* ---------- Panel Container (covers whole viewport) ---------- */
.tr-search-panel {
	position: fixed;
	inset: 0;
	z-index: 99999;
	pointer-events: none;
}
.tr-search-panel.is-open {
	pointer-events: auto;
}

/* ---------- Overlay ---------- */
.tr-search-panel__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0);
	transition: background 0.35s ease;
	cursor: pointer;
}
.tr-search-panel.is-open .tr-search-panel__overlay {
	background: rgba(0,0,0,0.55);
}

/* ---------- Drawer (positioned via JS for correct top offset) ---------- */
.tr-search-panel__drawer {
	position: absolute;
	/* top / right / bottom set by JS dynamically */
	top: 16px;
	right: 16px;
	bottom: 16px;
	width: 440px;
	max-width: calc(100vw - 32px);
	background: #ffffff;
	border-radius: 16px;
	transform: translateX(calc(100% + 32px));
	transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
	            opacity  0.38s cubic-bezier(0.4, 0, 0.2, 1);
	opacity: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 8px 48px rgba(0,0,0,0.18), 0 2px 12px rgba(0,0,0,0.08);
}
.tr-search-panel.is-open .tr-search-panel__drawer {
	transform: translateX(0);
	opacity: 1;
}

/* Dark scheme */
[data-scheme="dark"] .tr-search-panel__drawer {
	background: #1a1d23;
}

/* ---------- Header row ---------- */
.tr-search-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 22px 16px;
	flex-shrink: 0;
}
.tr-search-panel__title {
	font-size: 20px;
	font-weight: 700;
	color: #0f1117;
	letter-spacing: -0.01em;
	line-height: 1;
}
[data-scheme="dark"] .tr-search-panel__title { color: #f0f0f0; }

.tr-search-panel__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	background: #f3f4f6;
	border-radius: 50%;
	cursor: pointer;
	color: #6b7280;
	transition: background 0.2s, color 0.2s;
	padding: 0;
	flex-shrink: 0;
	line-height: 1;
}
.tr-search-panel__close:hover { background: #e5e7eb; color: #111827; }
[data-scheme="dark"] .tr-search-panel__close { background: #2a2d35; color: #9ca3af; }
[data-scheme="dark"] .tr-search-panel__close:hover { background: #374151; color: #f9fafb; }

/* ---------- Input ---------- */
.tr-search-panel__input-wrap {
	position: relative;
	padding: 0 22px 16px;
	flex-shrink: 0;
}

/* Icon: centred vertically within the input area */
.tr-search-panel__input-icon {
	position: absolute;
	left: 34px;          /* 22px wrap-padding + 12px from input left edge */
	top: 0;
	height: 48px;        /* same as input height */
	display: flex;
	align-items: center;
	color: #9ca3af;
	pointer-events: none;
	line-height: 0;
}

.tr-search-panel__input {
	width: 100%;
	height: 48px;
	/* 22px wrap-padding + 14px to icon left + 16px icon width + 10px gap = 62px */
	padding: 0 14px 0 38px;
	border: 1.5px solid #e5e7eb;
	border-radius: 10px;
	font-size: 15px;
	background: #ffffff;
	color: #111827;
	outline: none;
	box-sizing: border-box;
	transition: border-color 0.2s, box-shadow 0.2s;
	-webkit-appearance: none;
	appearance: none;
}
.tr-search-panel__input:focus {
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.tr-search-panel__input::-webkit-search-cancel-button { -webkit-appearance: none; }

[data-scheme="dark"] .tr-search-panel__input {
	background: #23262f;
	border-color: #374151;
	color: #f9fafb;
}
[data-scheme="dark"] .tr-search-panel__input:focus { border-color: #3b82f6; }

/* ---------- Divider ---------- */
.tr-search-panel__divider {
	height: 1px;
	background: #f0f0f0;
	margin: 0 22px;
	flex-shrink: 0;
}
[data-scheme="dark"] .tr-search-panel__divider { background: #2a2d35; }

/* ---------- Results ---------- */
.tr-search-panel__results {
	flex: 1;
	overflow-y: auto;
	padding: 6px 0 0;
	-webkit-overflow-scrolling: touch;
}
.tr-search-panel__results::-webkit-scrollbar { width: 4px; }
.tr-search-panel__results::-webkit-scrollbar-thumb {
	background: #e5e7eb;
	border-radius: 4px;
}

/* Loading */
.tr-search-panel__loader {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 24px;
	color: #9ca3af;
	font-size: 14px;
	gap: 10px;
}
.tr-search-panel__spinner {
	width: 20px;
	height: 20px;
	border: 2px solid #e5e7eb;
	border-top-color: #2563eb;
	border-radius: 50%;
	animation: trSearchSpin 0.7s linear infinite;
	flex-shrink: 0;
}
@keyframes trSearchSpin { to { transform: rotate(360deg); } }

/* Empty */
.tr-search-panel__empty {
	padding: 48px 24px;
	text-align: center;
	color: #9ca3af;
	font-size: 14px;
}

/* Result item */
.tr-search-panel__item {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 10px 22px;
	text-decoration: none !important;
	transition: background 0.15s;
}
.tr-search-panel__item:hover { background: #fff1f1; }
[data-scheme="dark"] .tr-search-panel__item:hover { background: #1f2332; }

.tr-search-panel__item-thumb {
	width: 58px;
	height: 58px;
	min-width: 58px;
	border-radius: 8px;
	object-fit: cover;
	display: block;
	background: #f3f4f6;
}
.tr-search-panel__item-thumb-placeholder {
	width: 58px;
	height: 58px;
	min-width: 58px;
	border-radius: 8px;
	background: #f3f4f6;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #d1d5db;
}
[data-scheme="dark"] .tr-search-panel__item-thumb-placeholder {
	background: #2a2d35;
	color: #4b5563;
}

.tr-search-panel__item-info { flex: 1; min-width: 0; }
.tr-search-panel__item-title {
	font-size: 13.5px;
	font-weight: 500;
	color: #111827;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
}
[data-scheme="dark"] .tr-search-panel__item-title { color: #e5e7eb; }

.tr-search-panel__item-meta {
	font-size: 11.5px;
	color: #6b7280;
	margin-top: 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------- Footer ---------- */
.tr-search-panel__footer {
	padding: 12px 22px 20px;
	flex-shrink: 0;
}
.tr-search-panel__footer-divider {
	height: 1px;
	background: #f0f0f0;
	margin-bottom: 12px;
}
[data-scheme="dark"] .tr-search-panel__footer-divider { background: #2a2d35; }

.tr-search-panel__all-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 13px;
	border-radius: 10px;
	background: #be0303;
	color: #ffffff !important;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none !important;
	transition: background 0.2s;
	box-sizing: border-box;
}
.tr-search-panel__all-link:hover { background: #1f2937; }
[data-scheme="dark"] .tr-search-panel__all-link { background: #2563eb; }
[data-scheme="dark"] .tr-search-panel__all-link:hover { background: #1d4ed8; }

/* ---------- Body lock ---------- */
body.tr-search-open { overflow: hidden; }

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
	.tr-search-panel__drawer {
		/* JS will set top; right/bottom stay at 12px on mobile too */
		right: 12px;
		bottom: 12px;
		width: calc(100vw - 24px);
		max-width: calc(100vw - 24px);
		border-radius: 14px;
	}
	.tr-search-panel__header { padding: 16px 18px 13px; }
	.tr-search-panel__input-wrap { padding: 0 18px 13px; }
	.tr-search-panel__input-icon { left: 32px; }
	.tr-search-panel__item { padding: 10px 18px; }
	.tr-search-panel__footer { padding: 10px 18px 16px; }
	.tr-search-panel__divider { margin: 0 18px; }
}