/* Branded placeholder shown on hotel search-result cards that have no
   uploaded photo yet, instead of leaving the whole image area blank. */
.agz-card-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 100%;
	min-height: 200px;
	padding: 30px 20px;
	background:
		radial-gradient(circle at 15% 20%, rgba(36, 192, 216, 0.18), transparent 55%),
		radial-gradient(circle at 85% 80%, rgba(240, 72, 108, 0.14), transparent 55%),
		#0d1b2a;
	border-radius: inherit;
}

.agz-card-placeholder img {
	max-width: 110px;
	opacity: 0.95;
}

.agz-card-placeholder span {
	color: rgba(255, 255, 255, 0.75);
	font-size: 12px;
	font-weight: 700;
}

/* Real hotel star-classification badge (from the "types" taxonomy),
   distinct from BABE's own (always-empty, review-based) rating block. */
.agz-star-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
	padding: 4px 12px;
	border-radius: 30px;
	background: #fff7e0;
	color: #b8860b;
	font-size: 12px;
	font-weight: 800;
}

/* Dedicated search-results page ([hotel_search_results]) - a modern,
   branded grid replacing gotur-addon's unreliable filter=yes template. */
.agz-search-results {
	direction: rtl;
	text-align: right;
	width: min(1200px, 92%);
	margin: 50px auto;
	font-family: Tahoma, Arial, sans-serif;
}

.agz-filter-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 16px;
	margin-bottom: 20px;
	padding: 20px;
	border-radius: 18px;
	background: #fff;
	border: 1px solid #e7edf3;
	box-shadow: 0 12px 35px rgba(7, 27, 83, 0.06);
}

.agz-filter-bar__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 160px;
	flex: 1 1 160px;
}

.agz-filter-bar__field label {
	color: #6b7280;
	font-size: 12px;
	font-weight: 700;
}

.agz-filter-bar__field select {
	padding: 10px 14px;
	border-radius: 10px;
	border: 1px solid #e7edf3;
	background: #f7fbfc;
	color: #071b53;
	font-size: 14px;
	font-weight: 700;
}

.agz-filter-bar__submit {
	flex: 0 0 auto;
	padding: 12px 26px;
	border: none;
	border-radius: 10px;
	background: #071b53;
	color: #fff;
	font-size: 14px;
	font-weight: 800;
	cursor: pointer;
	transition: background 0.2s ease;
}

.agz-filter-bar__submit:hover {
	background: #0895ab;
}

@media (max-width: 620px) {
	.agz-filter-bar {
		flex-direction: column;
		align-items: stretch;
	}
	/* AGZ FIX: .agz-filter-bar__field's own "flex: 1 1 160px" sets its
	   flex-basis to 160px, meant as a sane MINIMUM WIDTH for the desktop
	   row layout above. Once this media query switches the bar to
	   flex-direction:column, the main axis becomes vertical, so that same
	   160px basis is applied to HEIGHT instead - stretching every field
	   (label + one small select, ~70px of real content) to a fixed 160px
	   tall box and creating the large empty gaps under each dropdown the
	   user was seeing. Fixed by resetting the basis so height again
	   follows content, matching every other stacked mobile field. */
	.agz-filter-bar__field {
		flex: 0 0 auto;
	}
	.agz-filter-bar__submit {
		width: 100%;
	}
}

.agz-search-results__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 30px;
	padding: 16px 22px;
	border-radius: 16px;
	background: #f7fbfc;
	border: 1px solid #e7edf3;
	color: #26324a;
	font-size: 14px;
}

.agz-search-results__summary strong {
	color: #071b53;
}

/* flex-basis:100% forces this onto its own full-width row within the
   ".agz-filter-bar { display:flex; flex-wrap:wrap }" card, instead of
   floating as a separate, mismatched-width, disconnected-looking box
   below the card - the earlier version lived outside the filter form
   entirely and never matched its width. The divider reads as "same
   card, next row" rather than "unrelated element". */
.agz-name-search {
	position: relative;
	flex-basis: 100%;
	margin-top: 6px;
	padding-top: 18px;
	border-top: 1px solid #eef1f5;
}
.agz-name-search__icon {
	position: absolute;
	top: 50%;
	right: 18px;
	transform: translateY(-50%);
	color: #9aa5bd;
	pointer-events: none;
	transition: color 0.2s ease;
}
/* The theme's own global reset - "input[type=text] { border-radius:0;
   padding:3px; border:1px solid #eceae0 }" - has higher specificity
   than a single class (element+attribute selector beats a plain class)
   and was silently collapsing this field's padding down to a uniform
   3px, which pushed its text directly under the icon instead of beside
   it - confirmed via computed style, not a guess. !important on every
   property that reset also sets closes this for good. */
.agz-name-search__input {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 14px 50px 14px 20px !important;
	border-radius: 999px !important;
	border: 1px solid #e7edf3 !important;
	background: #fff !important;
	font-size: 14.5px !important;
	font-family: inherit !important;
	color: #071b53 !important;
	box-shadow: 0 4px 14px rgba(7, 27, 83, 0.05) !important;
	transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}
.agz-name-search__input::placeholder {
	color: #9aa5bd;
}
.agz-name-search__input:focus {
	outline: none !important;
	border-color: #0895ab !important;
	box-shadow: 0 0 0 4px rgba(8, 149, 171, 0.14), 0 4px 14px rgba(7, 27, 83, 0.05) !important;
}
.agz-name-search__input:focus ~ .agz-name-search__icon {
	color: #0895ab;
}
.agz-search-results__no-match {
	text-align: center;
	padding: 30px 20px;
	color: #6b7280;
	font-size: 14px;
}

.agz-search-results__count {
	color: #6b7280;
	font-size: 13px;
}

.agz-search-results__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

@media (max-width: 992px) {
	.agz-search-results__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
	.agz-search-results__grid { grid-template-columns: 1fr; }
}

.agz-search-card {
	--card-navy: #071b53;
	--card-cyan: #20bdd4;
	--card-cyan-dark: #0895ab;
	--card-coral: #f4476b;
	--card-gold: #b8860b;
	--card-green: #21b76b;
	--card-muted: #6b7280;
	--card-border: #e7edf3;

	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--card-border);
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 15px 40px rgba(7, 27, 83, 0.07);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.agz-search-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 24px 60px rgba(7, 27, 83, 0.15);
}

.agz-search-card__image {
	position: relative;
	height: 210px;
	flex: 0 0 auto;
}

.agz-search-card__image a {
	display: block;
	height: 100%;
}

/* Targets .agz-search-card__photo specifically (a class given only to the
   real cover-photo <img> in includes/search-results.php), NOT a generic
   ".agz-search-card__image img" descendant selector: that used to also
   catch the small placeholder logo AND, worse, the browser's own
   <img class="emoji"> replacement for the 📍 in the location badge -
   WordPress's own "img.emoji{width:1em!important}" rule lost to this
   one's !important on source order, ballooning a tiny pin emoji up to
   291x291px and covering almost the entire card. !important is still
   needed here (some theme/plugin CSS ships a same-specificity plain "img"
   rule that can otherwise force height:auto on load order, letting a
   portrait photo's natural aspect ratio blow the card out to a different
   height than its neighbours) - it just needs a selector that can't
   accidentally match anything else. */
.agz-search-card__photo {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	transition: transform 0.4s ease;
}

.agz-search-card:hover .agz-search-card__photo {
	transform: scale(1.06);
}

.agz-search-card__image .agz-card-placeholder {
	min-height: 210px;
}

.agz-search-card__tier {
	position: absolute;
	top: 14px;
	right: 14px;
	padding: 5px 14px;
	border-radius: 30px;
	background: linear-gradient(120deg, var(--card-coral), #ff7a93);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	box-shadow: 0 8px 18px rgba(244, 71, 107, 0.35);
}

.agz-search-card__location-pin {
	position: absolute;
	bottom: 14px;
	right: 14px;
	padding: 5px 13px;
	border-radius: 30px;
	background: rgba(7, 27, 83, 0.82);
	backdrop-filter: blur(3px);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

/* Real-demand badge (agz_get_whatsapp_click_count) - opposite corner from
   the star-tier badge so both can show at once without colliding. */
.agz-search-card__trending {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 5px 14px;
	border-radius: 30px;
	background: linear-gradient(120deg, #ff9a3c, #ff6b35);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	box-shadow: 0 8px 18px rgba(255, 107, 53, 0.35);
}

.agz-search-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 20px 22px 22px;
}

.agz-search-card__title {
	margin: 0 0 8px;
	font-size: 18px;
	line-height: 1.4;
}

.agz-search-card__title a {
	color: var(--card-navy);
	text-decoration: none;
}

.agz-search-card__title a:hover {
	color: var(--card-cyan-dark);
}

.agz-search-card__stars {
	margin-bottom: 12px;
	color: var(--card-gold);
	font-size: 15px;
	letter-spacing: 1px;
}

.agz-search-card__stars span {
	margin-inline-start: 8px;
	color: var(--card-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0;
}

.agz-search-card__facilities {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.agz-search-card__facilities li {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #f7fbfc;
	border: 1px solid var(--card-border);
	font-size: 15px;
	cursor: default;
}

.agz-search-card__price-row {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid #eef1f5;
}

.agz-search-card__price {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.agz-search-card__price strong {
	color: var(--card-coral);
	font-size: 20px;
	font-weight: 800;
	white-space: nowrap;
}

.agz-search-card__price strong small {
	font-size: 12px;
	font-weight: 700;
}

.agz-search-card__price span {
	color: var(--card-muted);
	font-size: 12px;
}

.agz-search-card__price--none strong {
	color: var(--card-muted);
	font-size: 14px;
}

.agz-search-card__child-policy {
	/* Brand cyan instead of green - green is already the WhatsApp button's
	   color on this same card, so a green info box read as a second CTA. */
	margin: 10px 0 0;
	padding: 9px 12px;
	border-radius: 10px;
	background: #e8f9fc;
	color: #0895ab;
	font-size: 12px;
	line-height: 1.6;
}

.agz-search-card__actions {
	display: flex;
	gap: 10px;
	margin-top: 16px;
}

.agz-search-card__btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 10px 12px;
	border-radius: 12px;
	font-size: 13px;
	font-weight: 800;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.agz-search-card__btn--ghost {
	border: 1.5px solid var(--card-border);
	color: var(--card-navy);
	background: #fff;
}

.agz-search-card__btn--ghost:hover {
	border-color: var(--card-cyan);
	background: #f5fdff;
}

.agz-search-card__btn--primary {
	border: none;
	background: var(--card-green);
	color: #fff !important;
}

.agz-search-card__btn--primary:hover,
.agz-search-card__btn--primary:focus {
	background: #178a51;
	color: #fff !important;
}

.agz-search-results__empty {
	padding: 50px 30px;
	text-align: center;
	border-radius: 20px;
	background: #f7fbfc;
	border: 1px solid #e7edf3;
}

.agz-search-results__empty p {
	margin: 0 0 10px;
	color: #26324a;
}

.agz-search-results__whatsapp {
	display: inline-flex;
	margin-top: 14px;
	padding: 12px 26px;
	border-radius: 30px;
	background: #21b76b;
	color: #fff !important;
	font-weight: 800;
	text-decoration: none;
	transition: background 0.2s ease;
}

.agz-search-results__whatsapp:hover,
.agz-search-results__whatsapp:focus {
	background: #178a51;
	color: #fff !important;
}

/* [hotel_offers] shortcode - promotions tied to a real hotel page
   (includes/offers.php). Same card language as .agz-search-card. */
.agz-offers-intro {
	direction: rtl;
	text-align: center;
	max-width: 760px;
	margin: 0 auto 30px;
	font-family: Tahoma, Arial, sans-serif;
}

.agz-offers-intro__eyebrow {
	display: inline-block;
	padding: 5px 16px;
	border-radius: 30px;
	background: #fff0f4;
	color: #f4476b;
	font-size: 12px;
	font-weight: 800;
	margin-bottom: 14px;
}

.agz-offers-intro__title {
	margin: 0;
	font-size: clamp(24px, 4vw, 34px);
	color: #071b53;
}

.agz-offers-intro__title span {
	color: #20bdd4;
	font-style: italic;
}

/* A featured hotel (agz-search-card, reused as-is) shown in the offers
   grid because its own page has "عرض مميز" ticked - real hotel data
   (price/photo/facilities), not separately-authored offer copy. */
.agz-offers-grid__featured-card {
	position: relative;
}

.agz-offers-grid__featured-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	padding: 5px 14px;
	border-radius: 30px;
	background: linear-gradient(120deg, #f4476b, #ff7a93);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	box-shadow: 0 8px 18px rgba(244, 71, 107, 0.35);
}

.agz-offers-grid {
	direction: rtl;
	text-align: right;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	width: min(1200px, 92%);
	margin: 40px auto;
	font-family: Tahoma, Arial, sans-serif;
}

@media (max-width: 992px) {
	.agz-offers-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
	.agz-offers-grid { grid-template-columns: 1fr; }
}

.agz-offer-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid #e7edf3;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 15px 40px rgba(7, 27, 83, 0.07);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.agz-offer-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 24px 60px rgba(7, 27, 83, 0.15);
}

.agz-offer-card__image {
	position: relative;
	height: 190px;
	flex: 0 0 auto;
}

.agz-offer-card__photo {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.agz-offer-card__badge {
	position: absolute;
	top: 14px;
	right: 14px;
	padding: 5px 14px;
	border-radius: 30px;
	background: linear-gradient(120deg, #f4476b, #ff7a93);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	box-shadow: 0 8px 18px rgba(244, 71, 107, 0.35);
}

.agz-offer-card__body {
	display: flex;
	flex-direction: column;
	padding: 18px 20px 20px;
}

.agz-offer-card__title {
	margin: 0 0 6px;
	color: #071b53;
	font-size: 17px;
}

.agz-offer-card__hotel {
	margin: 0 0 8px;
	font-size: 12px;
	color: #6b7280;
}

.agz-offer-card__hotel a {
	color: #0895ab;
	text-decoration: none;
}

.agz-offer-card__discount {
	margin: 0 0 8px;
	color: #f4476b;
	font-weight: 800;
	font-size: 15px;
}

.agz-offer-card__desc {
	margin: 0 0 14px;
	color: #26324a;
	font-size: 13px;
	line-height: 1.7;
}

.agz-offer-card__btn {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 10px 12px;
	border-radius: 12px;
	background: #21b76b;
	color: #fff !important;
	font-size: 13px;
	font-weight: 800;
	text-decoration: none;
	transition: background 0.2s ease;
}

.agz-offer-card__btn:hover,
.agz-offer-card__btn:focus {
	background: #178a51;
	color: #fff !important;
}