/* ============================================================================
 * Your Reference — UI Enhancements
 * Update-safe overrides for the ListingHive/HivePress theme. All targets
 * verified against the live DOM. Tightly scoped to avoid side effects.
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * Typography — lift sub-readable text + prevent iOS zoom on focus
 * ------------------------------------------------------------------------- */
.hp-listing__category,
.hp-listing__category a,
.hp-listing__categories a {
	font-size: 12px !important;
}
@media (max-width: 767px) {
	.hp-form input[type="text"],
	.hp-form input[type="search"],
	.hp-form input[type="email"],
	.hp-form input[type="tel"],
	input.hp-field,
	.hp-field--text input,
	.hp-search input,
	select.hp-field {
		font-size: 16px !important;
	}
}

/* ===========================================================================
 * CATEGORY ICON GRID  (#hp-categories-list)
 * 6 per row everywhere · equal-size cards · icons aligned & centered ·
 * tight icon↔label spacing · side margins on first/last · titles capped at
 * 2 lines so every card matches (talabat-style).
 * ========================================================================= */
#hp-categories-list > .e-con-inner {
	display: grid !important;
	grid-template-columns: repeat(6, 1fr) !important;
	grid-auto-rows: 1fr !important;
	align-items: stretch !important;
	align-content: start !important;
	gap: 12px !important;
	flex-direction: initial !important;
	padding-left: 40px !important;   /* breathing room for first/last cards */
	padding-right: 40px !important;
}
/* size to content (the section reserved extra height) */
#hp-categories-list,
#hp-categories-list > .e-con-inner {
	height: auto !important;
	min-height: 0 !important;
}

/* Tile fills its track; the white card fills the tile */
#hp-categories-list > .e-con-inner > .e-con {
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	height: 100% !important;
	align-self: stretch !important;
	padding: 0 !important;
}
#hp-categories-list > .e-con-inner > .e-con > .elementor-widget-icon-box {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	height: 100% !important;
	width: 100% !important;
}
/* The white card: content top-aligned so every icon sits at the same height */
#hp-categories-list .elementor-widget-icon-box > .elementor-widget-container {
	flex: 1 1 auto !important;
	width: 100% !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-start !important;
	align-items: center !important;
	text-align: center !important;
	padding: 16px 8px !important;
}
#hp-categories-list .elementor-icon-box-wrapper {
	width: 100% !important;
	text-align: center !important;
}
/* Icon: centered, small consistent gap to the label */
#hp-categories-list .elementor-icon-box-icon {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	text-align: center !important;
	margin: 0 0 4px 0 !important;
	padding: 0 !important;
}
#hp-categories-list .elementor-icon-box-icon .elementor-icon {
	margin: 0 auto !important;
	float: none !important;
}
#hp-categories-list .elementor-icon {
	width: 50px !important;
	height: 50px !important;
	line-height: 50px !important;
}
#hp-categories-list .elementor-icon i,
#hp-categories-list .elementor-icon svg {
	font-size: 24px !important;
}
#hp-categories-list .elementor-icon-box-content {
	width: 100% !important;
	text-align: center !important;
	margin: -13px 0 0 0 !important;   /* pull label up to tighten icon↔label gap */
	padding: 0 !important;
}
/* Title: exactly a 2-line slot (clamped) so all labels align & cards match */
#hp-categories-list .elementor-icon-box-title,
#hp-categories-list .elementor-icon-box-title a {
	font-size: 13px !important;
	line-height: 1.2 !important;
	margin: 0 !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}
#hp-categories-list .elementor-icon-box-title {
	min-height: 2.4em !important;   /* reserve 2 lines */
}

@media (max-width: 767px) {
	#hp-categories-list > .e-con-inner {
		gap: 6px !important;
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
	#hp-categories-list .elementor-widget-icon-box > .elementor-widget-container {
		padding: 10px 4px !important;
	}
	#hp-categories-list .elementor-icon {
		width: 34px !important;
		height: 34px !important;
		line-height: 34px !important;
	}
	#hp-categories-list .elementor-icon i,
	#hp-categories-list .elementor-icon svg {
		font-size: 16px !important;
	}
	#hp-categories-list .elementor-icon-box-icon {
		margin-bottom: 5px !important;
	}
	#hp-categories-list .elementor-icon-box-title,
	#hp-categories-list .elementor-icon-box-title a {
		font-size: 10px !important;
		line-height: 1.15 !important;
	}
	#hp-categories-list .elementor-icon-box-title {
		min-height: 2.3em !important;
	}
}

/* ===========================================================================
 * LISTING CARDS  (.hp-listing--view-block)
 * Shorter cards: drop the date, overlay the action icons onto the image,
 * keep the title to a single line. Applies to all listing grids; the single
 * listing page (.hp-listing--view-page) is untouched.
 * ========================================================================= */
/* Drop "Added on …" */
.hp-listing--view-block .hp-listing__details--primary,
.hp-listing--view-block .hp-listing__created-date,
.hp-listing--view-block .hp-listing__date {
	display: none !important;
}
/* Overlay message/favourite actions onto the image (top-right) */
.hp-listing--view-block {
	position: relative !important;
}
.hp-listing--view-block .hp-listing__footer {
	position: absolute !important;
	top: 8px;
	right: 8px;
	left: auto;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	z-index: 6;
}
.hp-listing--view-block .hp-listing__actions--primary {
	display: flex !important;
	gap: 6px !important;
	margin: 0 !important;
}
.hp-listing--view-block .hp-listing__footer .hp-listing__action {
	width: 30px !important;
	height: 30px !important;
	margin: 0 !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.92) !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #2f6473 !important;
}
.hp-listing--view-block .hp-listing__footer .hp-listing__action i {
	font-size: 13px !important;
	margin: 0 !important;
}
/* Single-line title (ellipsis instead of wrapping) */
.hp-listing--view-block .hp-listing__title,
.hp-listing--view-block .hp-listing__title a {
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	display: block !important;
}

/* Listings 3 per row on mobile (was 1) to cut scrolling */
@media (max-width: 767px) {
	.hp-listings .hp-grid__item,
	.hp-listings .hp-row > .hp-col-xs-12 {
		width: 33.3333% !important;
		max-width: 33.3333% !important;
		flex: 0 0 33.3333% !important;
	}
	.hp-listing--view-block .hp-listing__title,
	.hp-listing--view-block .hp-listing__title a {
		font-size: 12px !important;
		line-height: 1.3 !important;
	}
	.hp-listing--view-block .hp-listing__category,
	.hp-listing--view-block .hp-listing__category a {
		font-size: 9.5px !important;
	}
}

/* ===========================================================================
 * REVIEWS  (.hp-reviews)  — 3 per row on mobile too, equal width & height
 * (text clamped so every card matches). Desktop is already 3-up; clamp keeps
 * those equal as well.
 * ========================================================================= */
.hp-reviews .hp-row {
	align-items: stretch !important;
}
.hp-reviews .hp-grid__item {
	display: flex !important;
}
.hp-reviews .hp-review--view-block {
	width: 100% !important;
	height: 100% !important;
	display: flex !important;
	flex-direction: column !important;
}
.hp-reviews .hp-review__text {
	display: -webkit-box !important;
	-webkit-line-clamp: 5 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}
/* Mobile: reviews intentionally stay 1 per row. Forcing 3-up at 390px yields
 * ~81px-wide cards (≈1 character per line = unreadable). Desktop keeps native
 * 3-up, equalized via the clamp above. To force mobile 3-up anyway, re-add a
 * 33.3333% width rule here. */
@media (max-width: 767px) {
	.hp-reviews .hp-review__text {
		-webkit-line-clamp: 8 !important;
	}
}

/* ---------------------------------------------------------------------------
 * Tap targets — burger + Add Listing button >= 44px on touch
 * ------------------------------------------------------------------------- */
.header-navbar__burger > a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}
.header-navbar__burger > a > i {
	font-size: 20px;
}
@media (max-width: 767px) {
	.hp-menu__item--listing-submit {
		min-width: 44px;
		min-height: 44px;
		padding: 8px 12px !important;
	}
	.hp-menu__item--listing-submit i {
		font-size: 16px;
	}
}

/* ---------------------------------------------------------------------------
 * Hero readability — shadow behind the hero heading over the pattern
 * ------------------------------------------------------------------------- */
.elementor-element-8873092 .elementor-heading-title {
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45) !important;
}

/* ---------------------------------------------------------------------------
 * Center sparse listing rows on the homepage
 * ------------------------------------------------------------------------- */
.home .hp-listings .hp-row {
	justify-content: center;
}

/* ---------------------------------------------------------------------------
 * Soften empty image placeholders
 * ------------------------------------------------------------------------- */
.hp-listing__image {
	background-color: #eef2f4;
}

/* ---------------------------------------------------------------------------
 * Blacklist badge spacing on the single listing page
 * ------------------------------------------------------------------------- */
.hp-listing--view-page .lbl-blacklist-badge {
	top: 14px;
	left: 14px;
}
.hp-listing--view-page.lbl-blacklisted .hp-listing__categories,
body.lbl-single-blacklisted .hp-listing--view-page .hp-listing__categories {
	margin-top: 36px !important;
}

/* ---------------------------------------------------------------------------
 * RTL — JS adds dir="auto" to listing text; keep alignment sane.
 * ------------------------------------------------------------------------- */
.hp-listing__title[dir="auto"],
.hp-listing__title a[dir="auto"],
.hp-listing__description[dir="auto"] {
	text-align: start;
}