/* ==========================================================================
   Khodroban — styles for the custom Elementor widgets.
   Colours come from the Elementor Global Kit wherever the widget exposes a
   control; the values here are only the structural defaults.
   ========================================================================== */

.kb-icon {
	display: block;
	flex: none;
}

/* --------------------------------------------------------------------------
   Hero search bar
   -------------------------------------------------------------------------- */

.kb-search {
	--kb-search-height: 48px;
	--kb-search-text: #111318;
	--kb-search-icon: #9aa1ac;
	--kb-search-divider: #e7e9ee;

	display: flex;
	align-items: center;
	gap: 4px;
	width: 100%;
	background: #fff;
	border-radius: 12px;
	padding: 8px;
	box-sizing: border-box;
}

.kb-search__field {
	display: flex;
	align-items: center;
	gap: 8px;
	height: var(--kb-search-height);
	padding: 0 12px;
	min-width: 0;
	position: relative;
}

.kb-search__field--text {
	flex: 1 1 auto;
}

.kb-search__field--select {
	flex: 0 0 auto;
}

.kb-search__icon {
	display: flex;
	color: var(--kb-search-icon);
	flex: none;
}

/* The element+attribute selectors are deliberate: the theme styles
   `input[type="search"]` and would otherwise draw its own border and radius
   inside the pill. */
.kb-search input.kb-search__input,
.kb-search select.kb-search__select {
	width: 100%;
	min-width: 0;
	height: auto;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--kb-search-text);
	font: inherit;
	line-height: 1.5;
	padding: 0;
	margin: 0;
	outline: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.kb-search input.kb-search__input::-webkit-search-decoration,
.kb-search input.kb-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.kb-search__input::placeholder {
	color: var(--kb-search-icon);
}

.kb-search__select {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	padding-inline-end: 18px;
}

.kb-search__caret {
	position: absolute;
	inset-inline-end: 4px;
	width: 8px;
	height: 8px;
	border-inline-start: 1.6px solid var(--kb-search-icon);
	border-bottom: 1.6px solid var(--kb-search-icon);
	transform: rotate(-45deg);
	pointer-events: none;
}

.kb-search__divider {
	width: 1px;
	height: 24px;
	background: var(--kb-search-divider);
	flex: none;
}

.kb-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: var(--kb-search-height);
	min-width: var(--kb-search-height);
	padding: 0 12px;
	border: 0;
	border-radius: 8px;
	background: #e63329;
	color: #fff;
	cursor: pointer;
	transition: background-color .2s ease;
	flex: none;
}

.kb-search__submit--labeled {
	padding: 0 20px;
}

.kb-search .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Mobile: a two-row grid — the text field spans the full width with the submit
   button sitting inside its inline-end edge, and the three selects share the
   second row. Grid placement is used instead of flex order + negative margins,
   which is what made the fields overlap. */
@media (max-width: 767px) {
	/* !important is needed for background/padding: the widget's own style
	   controls generate a far more specific rule than a plain media query. */
	.kb-search {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
		background: transparent !important;
		padding: 0 !important;
		box-shadow: none !important;
	}

	.kb-search__field--text {
		grid-column: 1 / -1;
		grid-row: 1;
		height: 46px;
		background: #fff;
		border-radius: 10px;
		/* Room for the submit button that overlays this cell. */
		padding-inline-end: 46px;
	}

	.kb-search__field--text .kb-search__icon {
		display: none;
	}

	.kb-search .kb-search__submit {
		grid-column: 1 / -1;
		grid-row: 1;
		justify-self: end;
		align-self: center;
		width: 42px;
		min-width: 42px;
		height: 42px;
		padding: 0;
		margin-inline-end: 3px;
		background: transparent !important;
		color: var(--kb-search-text) !important;
		box-shadow: none;
	}

	.kb-search__field--select {
		grid-row: 2;
		height: 42px;
		gap: 4px;
		padding: 0 8px;
		background: #fff;
		border-radius: 10px;
	}

	/* Three chips on a 390px screen have ~100px each — the pin icon would eat
	   enough of that to truncate "همه شهرها". */
	.kb-search__field--select .kb-search__icon {
		display: none;
	}

	.kb-search__select {
		font-size: 12px;
	}

	.kb-search__divider {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Section heading — "دسته‌بندی خدمات ....... مشاهده همه ←"
   -------------------------------------------------------------------------- */

.kb-sechead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
}

.kb-sechead__title {
	margin: 0;
	color: #111318;
}

.kb-sechead__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #e63329;
	text-decoration: none;
	white-space: nowrap;
}

.kb-sechead__link:hover {
	text-decoration: underline;
}

.kb-sechead__arrow {
	font-size: 1.1em;
	line-height: 1;
}

/* --------------------------------------------------------------------------
   Service category tiles
   -------------------------------------------------------------------------- */

.kb-cats {
	display: grid;
	grid-template-columns: repeat(9, minmax(0, 1fr));
	gap: 12px;
	width: 100%;
}

.kb-cat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 18px 10px 14px;
	background: #fff;
	border: 1px solid #e7e9ee;
	border-radius: 12px;
	text-decoration: none;
	text-align: center;
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.kb-cat__icon {
	display: flex;
	color: #e63329;
}

.kb-cat__label {
	color: #111318;
	line-height: 1.5;
}

.kb-cat--more .kb-cat__icon {
	color: #6b7280;
}

/* --------------------------------------------------------------------------
   Mobile bottom navigation
   -------------------------------------------------------------------------- */

.kb-bottomnav {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 999;
	display: flex;
	align-items: flex-end;
	justify-content: space-around;
	gap: 2px;
	background: #fff;
	box-shadow: 0 -2px 16px rgba(17, 19, 24, .1);
	padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
}

.kb-bottomnav__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	flex: 1 1 0;
	min-width: 0;
	padding: 4px 2px;
	color: #6b7280;
	text-decoration: none;
	text-align: center;
}

.kb-bottomnav__item.is-active {
	color: #e63329;
}

.kb-bottomnav__label,
.kb-bottomnav__fab-label {
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.kb-bottomnav__fab-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	flex: 1 1 0;
	min-width: 0;
	color: #6b7280;
	text-decoration: none;
	text-align: center;
}

.kb-bottomnav__fab {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-top: -30px;
	border-radius: 50%;
	background: #e63329;
	color: #fff;
	box-shadow: 0 6px 16px rgba(230, 51, 41, .38);
	border: 4px solid #fff;
	box-sizing: border-box;
}

.kb-bottomnav--mobile-only {
	display: none;
}

@media (max-width: 767px) {
	.kb-bottomnav--mobile-only {
		display: flex;
	}

	/* Keeps the last section clear of the fixed bar. */
	body:has(.kb-bottomnav--mobile-only) {
		padding-bottom: 76px;
	}
}

/* --------------------------------------------------------------------------
   Loop helpers

   Elementor exposes no flex-grow control for widgets, so a Loop Grid cannot
   stretch to fill the column it sits in. These two classes are set from the
   widgets' "CSS Classes" field and do exactly that: the grid fills the panel,
   and inside each stretched card the image absorbs the leftover height —
   which is what keeps the "آگهی‌های ویژه" panel from ending in dead space.
   -------------------------------------------------------------------------- */

.e-con > .kb-fill,
.kb-fill > .elementor-widget-container {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
}

.kb-fill .elementor-loop-container {
	flex: 1 1 auto;
}

/* `.e-con.e-flex` resolves `flex` from its own custom properties and is loaded
   after this file at the same specificity, so a plain `flex: 1 1 auto` here
   loses. Setting the variables instead works with Elementor rather than against
   it. */
.e-con.e-flex.kb-fill-media {
	--flex-grow: 1;
	--flex-shrink: 1;
	--flex-basis: auto;
	min-height: 110px;
	/* Keeps the crop from turning into a tall portrait strip when the
	   neighbouring columns happen to be much taller. */
	max-height: 165px;
}

.e-con.e-flex.kb-fill-media .elementor-widget-theme-post-featured-image,
.e-con.e-flex.kb-fill-media .elementor-widget-container,
.e-con.e-flex.kb-fill-media figure,
.e-con.e-flex.kb-fill-media a {
	height: 100%;
}

.e-con.e-flex.kb-fill-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --------------------------------------------------------------------------
   Account dashboard
   -------------------------------------------------------------------------- */

.kb-account {
	--kb-account-bg: #fff;
	--kb-account-accent: #e63329;

	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 100%;
}

.kb-account--guest {
	background: var(--kb-account-bg);
	border: 1px solid #e7e9ee;
	border-radius: 12px;
	padding: 24px;
	text-align: center;
}

.kb-account__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	background: var(--kb-account-bg);
	border: 1px solid #e7e9ee;
	border-radius: 12px;
	padding: 16px;
}

.kb-account__user {
	display: flex;
	align-items: center;
	gap: 10px;
}

.kb-account__user em {
	display: block;
	color: #6b7280;
	font-size: .85em;
	font-style: normal;
}

.kb-account__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #f5f6f8;
	color: var(--kb-account-accent);
	flex: none;
}

.kb-account__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.kb-account__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 16px;
	border: 1px solid #e7e9ee;
	border-radius: 8px;
	color: #111318;
	text-decoration: none;
	font-size: .9em;
	font-weight: 700;
	transition: background-color .2s ease, color .2s ease;
}

.kb-account__btn--primary {
	background: var(--kb-account-accent);
	border-color: var(--kb-account-accent);
	color: #fff;
}

.kb-account__btn--ghost {
	color: #6b7280;
}

.kb-account__btn:hover {
	background: #f5f6f8;
	color: #111318;
}

.kb-account__btn--primary:hover {
	background: #c82820;
	color: #fff;
}

.kb-account__section {
	background: var(--kb-account-bg);
	border: 1px solid #e7e9ee;
	border-radius: 12px;
	padding: 16px;
}

.kb-account__title {
	margin: 0 0 12px;
	font-size: 1.05em;
}

.kb-account__empty {
	margin: 0;
	color: #6b7280;
}

.kb-account__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.kb-account__item {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 10px 12px;
	background: #f8f9fb;
	border-radius: 8px;
}

.kb-account__item-title {
	flex: 1 1 auto;
	min-width: 0;
	color: #111318;
	font-weight: 700;
	text-decoration: none;
}

.kb-account__item-title:hover {
	color: var(--kb-account-accent);
}

.kb-account__meta {
	color: #6b7280;
	font-size: .85em;
}

.kb-account__status {
	padding: 3px 10px;
	border-radius: 20px;
	font-size: .78em;
	font-weight: 700;
	background: #eef6f0;
	color: #1f9254;
}

.kb-account__status--pending {
	background: #fff7e6;
	color: #b45309;
}

.kb-account__status--draft {
	background: #f1f2f4;
	color: #6b7280;
}

/* --------------------------------------------------------------------------
   Notification bell
   -------------------------------------------------------------------------- */

.kb-bell {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #111318;
	text-decoration: none;
}

.kb-bell__badge {
	position: absolute;
	top: -6px;
	inset-inline-end: -8px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9px;
	background: #e63329;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	box-sizing: border-box;
}