/* Hajazco Hotels — theme-matched search UI */
.hjh-wrap { display: flex; flex-direction: column; gap: 1.6rem; }

.hjh-form {
	display: grid; grid-template-columns: 1.6fr 1fr 1fr 0.7fr auto;
	gap: 0.9rem; align-items: end;
	background: var(--card, #fff); border-radius: var(--radius-lg, 20px);
	padding: 1.2rem 1.3rem; box-shadow: var(--shadow-1, 0 8px 28px rgba(9, 27, 18, 0.08));
}
.hjh-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted, #5f6b76); }
html[lang^="ar"] .hjh-form label { letter-spacing: 0; font-size: 0.84rem; }
.hjh-form input, .hjh-form select {
	border: 1px solid var(--line, rgba(9, 27, 18, 0.1)); border-radius: 10px; background: #fbfaf7;
	padding: 0.62rem 0.75rem; font: inherit; color: var(--ink, #0d2318); min-height: 46px;
}
.hjh-form input:focus, .hjh-form select:focus { outline: none; border-color: var(--gold, #b98a3a); box-shadow: 0 0 0 3px rgba(185, 138, 58, 0.18); }

.hjh-note {
	margin: 0; padding: 0.7rem 1rem; border-radius: 10px; font-size: 0.9rem; font-weight: 600;
	background: var(--gold-soft, rgba(185, 138, 58, 0.12)); color: var(--gold, #b98a3a);
	display: inline-flex; align-items: center; gap: 0.5rem; align-self: start;
}

.hjh-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.1rem, 2.2vw, 1.7rem); }

.hjh-card {
	background: var(--card, #fff); border-radius: var(--radius-lg, 20px); overflow: hidden;
	box-shadow: 0 2px 8px rgba(9, 27, 18, 0.05), 0 14px 34px rgba(9, 27, 18, 0.09);
	display: flex; flex-direction: column;
	opacity: 0; transform: perspective(1000px) rotateX(10deg) translateY(26px);
	animation: hjhIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	animation-delay: var(--d, 0s);
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s;
}
@keyframes hjhIn { to { opacity: 1; transform: none; } }
.hjh-card:hover { transform: translateY(-7px); box-shadow: 0 4px 14px rgba(9, 27, 18, 0.08), 0 30px 64px rgba(9, 27, 18, 0.17); }

.hjh-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #e9e4d8; }
.hjh-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.hjh-card:hover .hjh-card__media img { transform: scale(1.07); }
.hjh-card__provider {
	position: absolute; top: 0.8rem; inset-inline-start: 0.8rem;
	background: rgba(7, 21, 14, 0.75); color: #fff; backdrop-filter: blur(6px);
	font-size: 0.72rem; font-weight: 600; padding: 0.3rem 0.65rem; border-radius: 999px;
}
.hjh-card__body { padding: 1.15rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.hjh-card__stars { color: var(--gold, #b98a3a); font-size: 0.85rem; letter-spacing: 0.12em; }
.hjh-card__name { font-family: var(--ff-display, inherit); font-size: 1.16rem; font-weight: 700; line-height: 1.3; }
.hjh-card__area { color: var(--muted, #5f6b76); font-size: 0.88rem; margin: 0; }
.hjh-card__foot { display: flex; align-items: center; justify-content: space-between; border-block-start: 1px solid var(--line, rgba(9, 27, 18, 0.1)); padding-block-start: 0.85rem; margin-block-start: auto; }
.hjh-card__price { font-family: var(--ff-display, inherit); font-weight: 700; font-size: 1.25rem; color: var(--ink, #0d2318); }
.hjh-card__price small { font-family: var(--ff-body, inherit); font-weight: 500; color: var(--muted, #5f6b76); font-size: 0.78rem; }
.hjh-card__cta { font-weight: 700; font-size: 0.9rem; color: var(--gold, #b98a3a); border-block-end: 2px solid currentColor; }
.hjh-card__cta:hover { color: var(--ink, #0d2318); }

.hjh-skel { border-radius: var(--radius-lg, 20px); background: linear-gradient(100deg, #eee9de 40%, #f7f3ea 50%, #eee9de 60%); background-size: 200% 100%; animation: hjhShimmer 1.3s infinite linear; min-height: 330px; }
@keyframes hjhShimmer { to { background-position: -200% 0; } }

@media (max-width: 1100px) {
	.hjh-form { grid-template-columns: 1fr 1fr; }
	.hjh-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
	.hjh-form { grid-template-columns: 1fr; }
	.hjh-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.hjh-card { animation: none; opacity: 1; transform: none; }
	.hjh-skel { animation: none; }
}