/* Grande Search — tampilan default profesional.
   Semua warna, jarak, radius, shadow, dsb di sini adalah FALLBACK yang sudah
   enak dilihat kalau admin tidak mengubah apapun di panel Style Elementor.
   Setiap nilai penting punya kontrol yang menimpanya lewat selector
   {{WRAPPER}} ... lihat class-grs-search-widget.php. */

.grs-search-wrapper {
	position: relative;
	width: 100%;
}

/* ---------------------------------------------------------------------
 * SEARCH BAR
 * ------------------------------------------------------------------- */

.grs-search-bar {
	/* Search bar HARUS selalu bisa diklik & diketik, bahkan saat modal hasil
	   sedang terbuka -- makanya z-index-nya sengaja dibuat lebih tinggi dari
	   .grs-search-modal (100000), supaya klik/ketik di kolom pencarian tidak
	   pernah "ketutup" overlay modal. */
	position: relative;
	z-index: 100001;
	display: flex;
	align-items: stretch;
	gap: 10px;
	flex-wrap: wrap;
}

.grs-search-input-wrap {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 240px;
	min-width: 0;
	background-color: #ffffff;
	border: 1px solid #e2e4e9;
	border-radius: 10px;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.grs-search-input-wrap:focus-within {
	border-color: #4f46e5;
	box-shadow: 0 0 0 4px rgba( 79, 70, 229, 0.15 );
}

.grs-search-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding-left: 14px;
	color: #9ca3af;
	pointer-events: none;
}
.grs-search-icon svg {
	width: 18px;
	height: 18px;
	display: block;
}

.grs-search-input {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	padding: 12px 16px;
	font-size: 15px;
	line-height: 1.4;
	color: #111827;
	background: transparent;
	border: none;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}
.grs-search-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}
.grs-search-input::placeholder {
	color: #9ca3af;
}

.grs-search-clear {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin-right: 6px;
	padding: 0;
	font-size: 18px;
	line-height: 1;
	color: #9ca3af;
	background: none;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	transition: color 140ms ease, background-color 140ms ease;
}
.grs-search-clear:hover {
	color: #374151;
	background-color: #f3f4f6;
}
.grs-search-clear[hidden] {
	display: none;
}

.grs-search-select-wrap {
	position: relative;
	flex: 0 0 180px;
	min-width: 0;
	max-width: 100%;
	display: flex;
}

.grs-search-category {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	padding: 12px 16px;
	font-size: 14px;
	color: #111827;
	background-color: #ffffff;
	border: 1px solid #e2e4e9;
	border-radius: 10px;
	cursor: pointer;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}
.grs-search-category:focus-visible {
	outline: none;
	border-color: #4f46e5;
	box-shadow: 0 0 0 4px rgba( 79, 70, 229, 0.15 );
}

/* ---------------------------------------------------------------------
 * MODAL / POPUP
 * ------------------------------------------------------------------- */

/* Modal dibuat fixed-position TAPI tetap sebagai anak DOM dari
   .grs-search-wrapper (tidak dipindah ke document.body) supaya style
   {{WRAPPER}} dari Elementor tetap berlaku ke dalamnya. */
.grs-search-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.grs-search-modal[hidden] {
	display: none;
}

.grs-search-modal-overlay {
	position: absolute;
	inset: 0;
	background-color: rgba( 15, 17, 21, 0.6 );
	backdrop-filter: blur( 4px );
	-webkit-backdrop-filter: blur( 4px );
	opacity: 0;
	transition: opacity 220ms ease;
}

.grs-search-modal-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 960px;
	max-height: 82vh;
	overflow: hidden;
	background-color: #ffffff;
	border-radius: 16px;
	box-shadow: 0 20px 45px -10px rgba( 15, 17, 21, 0.35 );
	opacity: 0;
	transform: translateY( 12px ) scale( 0.98 );
	transition: opacity 220ms ease, transform 220ms ease;
}

/* Animasi masuk: kelas ditambahkan sesaat setelah modal ditampilkan supaya
   transition sempat "dilihat" oleh browser (lihat search-widget.js). */
.grs-search-modal.grs-is-open .grs-search-modal-overlay {
	opacity: 1;
}
.grs-search-modal.grs-is-open .grs-search-modal-panel {
	opacity: 1;
	transform: translateY( 0 ) scale( 1 );
}

/* Header SELALU menempel (sticky) di atas panel dan berada di atas grid
   hasil -- ini yang mencegah judul/tombol tutup tumpang tindih dengan card
   hasil saat area di bawahnya di-scroll. */
.grs-search-modal-header {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex: 0 0 auto;
	padding: 18px 24px;
	background-color: #ffffff;
	border-bottom: 1px solid #eef0f3;
}

.grs-search-modal-title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: #111827;
}

.grs-search-modal-count {
	margin-left: 6px;
	font-size: 14px;
	font-weight: 500;
	color: #9ca3af;
}

.grs-search-modal-close {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	color: #6b7280;
	background-color: #f3f4f6;
	border: none;
	border-radius: 999px;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: color 140ms ease, background-color 140ms ease;
}
.grs-search-modal-close:hover {
	color: #111827;
	background-color: #e5e7eb;
}

.grs-search-modal-body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 20px 24px 24px;
	-webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------------------
 * GRID & CARD
 * ------------------------------------------------------------------- */

.grs-search-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 160px, 1fr ) );
	gap: 18px;
}

.grs-search-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: #ffffff;
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba( 15, 17, 21, 0.08 );
	transition: transform 180ms ease, box-shadow 180ms ease;
}
.grs-search-card:hover {
	transform: translateY( -4px );
	box-shadow: 0 14px 28px rgba( 15, 17, 21, 0.14 );
}

.grs-search-card-img-wrap {
	width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	display: block;
	background-color: #f3f4f6;
}
.grs-search-card-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 300ms ease;
}
.grs-search-card:hover .grs-search-card-img-wrap img {
	transform: scale( 1.04 );
}

/* Body (judul + tombol) sengaja diberi padding-top kecil supaya menempel
   dekat dengan gambar -- inilah yang menjaga jarak tombol ke gambar tidak
   terlalu jauh. Jaraknya bisa diatur lewat panel Style > Card Hasil. */
.grs-search-card-body {
	display: flex;
	flex-direction: column;
	padding: 10px 2px 12px;
}

.grs-search-card-title {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	color: #111827;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.grs-search-card-buttons {
	display: flex;
	flex-direction: row;
	gap: 8px;
	margin-top: 8px;
}
.grs-search-card-buttons a {
	flex: 1 1 0;
	display: block;
	min-width: 0;
	box-sizing: border-box;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 9px 8px;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 8px;
	transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.grs-search-btn-preview {
	background-color: #f3f4f6;
	color: #374151;
}
.grs-search-btn-preview:hover {
	background-color: #e5e7eb;
}
.grs-search-btn-order {
	background-color: #4f46e5;
	color: #ffffff;
	border: 1px solid #4f46e5;
}
.grs-search-btn-order:hover {
	background-color: #4338ca;
	border-color: #4338ca;
}

/* ---------------------------------------------------------------------
 * STATUS (mencari / kosong / error)
 * ------------------------------------------------------------------- */

.grs-search-status {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
	padding: 56px 16px;
	font-size: 14px;
	color: #6b7280;
}

.grs-search-spinner {
	width: 26px;
	height: 26px;
	border: 3px solid #e5e7eb;
	border-top-color: #4f46e5;
	border-radius: 50%;
	animation: grs-search-spin 700ms linear infinite;
}

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

body.grs-search-modal-open {
	overflow: hidden;
}

/* ---------------------------------------------------------------------
 * RESPONSIVE
 * ------------------------------------------------------------------- */

@media ( max-width: 480px ) {
	.grs-search-modal {
		padding: 12px;
	}
	.grs-search-modal-panel {
		max-height: 92vh;
		border-radius: 14px;
	}
	.grs-search-modal-header {
		padding: 14px 16px;
	}
	.grs-search-modal-body {
		padding: 16px 14px 20px;
	}
	.grs-search-select-wrap {
		flex-basis: 100%;
	}
}