/*
 * Homepage discovery polish
 *
 * A narrow, child-theme-only layer for the home discovery journey. Keep the
 * profile-card radius hierarchy out of this file: it is intentionally deferred
 * to the second design pass.
 */

.home,
.front-page {
	--home-ui-radius: 10px;
}

/* Search and city selection are one compact discovery surface on mobile. */
@media screen and (max-width: 960px) {
	.modern-mobile-discovery-strip {
		padding: 12px var(--spacing-4);
	}

	.modern-mobile-search-band__row {
		gap: 8px;
	}

	.modern-mobile-search-field .mobile-drawer-search-field__input,
	.modern-mobile-location-filter,
	.modern-mobile-search-band__results,
	.modern-mobile-signin,
	.modern-mobile-controls .mobile-menu-icon {
		border-radius: var(--home-ui-radius) !important;
	}

	.modern-mobile-search-field .mobile-drawer-search-field__input,
	.modern-mobile-location-filter {
		border-color: rgba(255, 255, 255, 0.14);
	}

	.modern-mobile-search-field .mobile-drawer-search-field__input:focus,
	.modern-mobile-location-filter:focus-visible {
		border-color: rgba(255, 255, 255, 0.3);
	}

	.modern-mobile-location-filter {
		min-width: 118px;
		padding-inline: 11px 12px;
	}

	.modern-mobile-location-filter__label {
		max-width: 92px;
		font-weight: 700;
	}

	.modern-mobile-location-filter__icon {
		background: rgba(255, 255, 255, 0.045);
	}
}

/* The header keeps the same compact 10px shape at larger breakpoints too. */
.modern-header-actions .modern-post-ad-cta {
	border-radius: var(--home-ui-radius) !important;
}

/* The campaign itself is the visual boundary; it does not need a faint rule. */
.home .homepage-ad-carousel,
.front-page .homepage-ad-carousel {
	border-bottom: 0 !important;
	border-radius: var(--home-ui-radius);
}

.home .homepage-ad-carousel .static-ad-carousel,
.front-page .homepage-ad-carousel .static-ad-carousel {
	padding-bottom: 8px;
}

.home .homepage-ad-carousel .ad-card,
.front-page .homepage-ad-carousel .ad-card,
.home .homepage-ad-carousel .ad-card__image-link,
.front-page .homepage-ad-carousel .ad-card__image-link {
	border-radius: var(--home-ui-radius);
}

.homepage-campaign-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 20px;
	margin: 2px 0 0;
}

.homepage-campaign-pagination__dot {
	width: 6px;
	height: 6px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.27);
	cursor: pointer;
	transition: width 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.homepage-campaign-pagination__dot:hover {
	background: rgba(255, 255, 255, 0.58);
	transform: scale(1.1);
}

.homepage-campaign-pagination__dot.is-active {
	width: 18px;
	background: rgba(236, 236, 236, 0.9);
}

.homepage-campaign-pagination__dot:focus-visible {
	outline: 2px solid var(--focus-ring-color, #fff);
	outline-offset: 3px;
}

/* An empty live rail should hand visitors to a useful next discovery path. */
.home .online-empty-state,
.front-page .online-empty-state {
	padding: var(--spacing-2) 0 var(--spacing-3);
}

.home .online-empty-state__panel,
.front-page .online-empty-state__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	padding: 13px;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: var(--home-ui-radius);
	background: linear-gradient(135deg, rgba(22, 28, 27, 0.96), rgba(15, 16, 18, 0.98));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 12px 26px -24px rgba(0, 0, 0, 0.95);
}

.online-empty-state__content {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	align-items: start;
	gap: 10px;
	min-width: 0;
}

.online-empty-state__signal {
	position: relative;
	display: block;
	width: 30px;
	height: 30px;
	border: 1px solid rgba(16, 185, 129, 0.18);
	border-radius: var(--home-ui-radius);
	background: rgba(16, 185, 129, 0.07);
}

.online-empty-state__signal::before,
.online-empty-state__signal::after {
	position: absolute;
	content: '';
	border-radius: 50%;
}

.online-empty-state__signal::before {
	inset: 8px;
	background: #18b783;
	box-shadow: 0 0 0 4px rgba(24, 183, 131, 0.09);
}

.online-empty-state__signal::after {
	inset: 5px;
	border: 1px solid rgba(24, 183, 131, 0.22);
}

.online-empty-state__copy p {
	margin: 0;
}

.online-empty-state__eyebrow {
	margin-bottom: 2px !important;
	color: rgba(103, 221, 180, 0.78);
	font-size: 9px;
	font-weight: 750;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.online-empty-state__message {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.online-empty-state__hint {
	margin-top: 2px !important;
	color: var(--text-secondary);
	font-size: 11px;
	line-height: 1.35;
}

.online-empty-state__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 38px;
	padding: 0 11px 0 12px;
	border: 1px solid rgba(16, 185, 129, 0.24);
	border-radius: var(--home-ui-radius);
	background: rgba(16, 185, 129, 0.1);
	color: rgba(232, 255, 246, 0.94);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1;
	text-transform: none;
	transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.online-empty-state__action-arrow {
	font-size: 15px;
	line-height: 1;
}

.online-empty-state__action:hover,
.online-empty-state__action:focus-visible {
	border-color: rgba(76, 219, 170, 0.5);
	background: rgba(16, 185, 129, 0.17);
	transform: translateY(-1px);
}

.online-empty-state__action:focus-visible {
	outline: 2px solid var(--focus-ring-color, #fff);
	outline-offset: 3px;
}

/* Two rows, two jobs: explore first, then refine. */
.home .filter-chips-section,
.front-page .filter-chips-section,
.home .online-stories-section,
.front-page .online-stories-section {
	border-radius: var(--home-ui-radius);
}

.home .filter-chips-section,
.front-page .filter-chips-section {
	border-bottom: 0 !important;
	padding: var(--spacing-3) !important;
	margin-bottom: var(--spacing-2) !important;
}

/* The next listing starts from the filter outcome, not a new isolated card. */
.home .filter-chips-section + .featured-section,
.front-page .filter-chips-section + .featured-section {
	padding-top: 0 !important;
}

/* Unlockable results live in the New section; empty VIP/Premium sections add no value. */
@supports selector(body:has(*)) {
	body.home:has(.filter-chip[data-filter-type="private"].is-active) #vip-escorts-section,
	body.home:has(.filter-chip[data-filter-type="private"].is-active) .premium-section,
	body.front-page:has(.filter-chip[data-filter-type="private"].is-active) #vip-escorts-section,
	body.front-page:has(.filter-chip[data-filter-type="private"].is-active) .premium-section {
		display: none !important;
	}
}

.filter-chip-row {
	gap: 8px;
	padding-bottom: 4px;
	scroll-padding-inline: 1px;
}

.filter-chip-row--refine {
	margin-top: 2px;
}

.filter-chip-row--refine > .filter-chip,
.filter-switch-group,
.filter-chip-row__actions {
	flex: 0 0 auto;
}

.filter-chip-row__actions {
	display: flex;
	gap: 8px;
	min-width: max-content;
}

/*
 * The two personal discovery tools are one quiet instrument. Unlockable owns
 * a persistent filter state; Find my type owns a dialog state. Their switch
 * tracks communicate that difference without adding two more button styles to
 * an already dense rail.
 */
.filter-switch-group {
	display: inline-flex;
	align-items: stretch;
	min-width: max-content;
	min-height: 44px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.11);
	border-radius: var(--home-ui-radius);
	background: rgba(255, 255, 255, 0.025);
}

.filter-switch-group > .filter-switch,
.filter-switch-group > .mx-find-type--switch {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 9px;
	min-width: 0;
	min-height: 44px;
	padding: 0 10px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--text-secondary);
	font-family: var(--ex-font-product, 'Manrope', sans-serif);
	font-size: 12px;
	font-weight: 650;
	letter-spacing: 0;
	line-height: 1;
	transform: none;
	transition: color 150ms cubic-bezier(0.25, 1, 0.5, 1), background-color 150ms cubic-bezier(0.25, 1, 0.5, 1);
}

.filter-switch-group > .mx-find-type--switch {
	border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.filter-switch-group > .filter-switch:hover,
.filter-switch-group > .mx-find-type--switch:hover {
	border-color: transparent;
	background: rgba(255, 255, 255, 0.045);
	box-shadow: none;
	color: var(--text-primary);
	transform: none;
}

.filter-switch-group > .filter-switch:focus-visible,
.filter-switch-group > .mx-find-type--switch:focus-visible {
	position: relative;
	z-index: 1;
	outline: 2px solid var(--focus-ring-color, #E6C46A);
	outline-offset: -3px;
}

.filter-switch-group > .filter-switch:active,
.filter-switch-group > .mx-find-type--switch:active {
	transform: none;
}

.filter-switch__label,
.mx-find-type--switch .mx-find-type__label {
	white-space: nowrap;
}

.filter-switch__track {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex: 0 0 32px;
	width: 32px;
	height: 18px;
	padding: 2px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	transition: background-color 180ms cubic-bezier(0.25, 1, 0.5, 1), border-color 180ms cubic-bezier(0.25, 1, 0.5, 1);
}

.filter-switch__thumb {
	display: block;
	width: 12px;
	height: 12px;
	border-radius: 999px;
	background: rgba(236, 236, 236, 0.78);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.42);
	transform: translateX(0);
	transition: transform 180ms cubic-bezier(0.25, 1, 0.5, 1), background-color 180ms cubic-bezier(0.25, 1, 0.5, 1);
}

.filter-switch-group > .filter-switch.is-active,
.filter-switch-group > .filter-switch[aria-pressed="true"],
.filter-switch-group > .mx-find-type--switch[aria-expanded="true"] {
	background: rgba(139, 10, 26, 0.08);
	color: var(--text-primary);
}

.filter-switch-group > .filter-switch.is-active::before {
	display: none;
}

.filter-switch.is-active .filter-switch__track,
.filter-switch[aria-pressed="true"] .filter-switch__track,
.mx-find-type--switch[aria-expanded="true"] .filter-switch__track {
	border-color: rgba(196, 24, 56, 0.72);
	background: var(--brand-primary, #8B0A1A);
}

.filter-switch.is-active .filter-switch__thumb,
.filter-switch[aria-pressed="true"] .filter-switch__thumb,
.mx-find-type--switch[aria-expanded="true"] .filter-switch__thumb {
	background: var(--text-primary, #ECECEC);
	transform: translateX(14px);
}

.filter-switch-group > :active .filter-switch__thumb {
	transform: scale(0.88);
}

.filter-switch-group > .filter-switch.is-active:active .filter-switch__thumb,
.filter-switch-group > .filter-switch[aria-pressed="true"]:active .filter-switch__thumb,
.filter-switch-group > .mx-find-type--switch[aria-expanded="true"]:active .filter-switch__thumb {
	transform: translateX(14px) scale(0.88);
}

.filter-chip {
	min-height: 44px;
	border-radius: var(--home-ui-radius);
	padding-inline: 13px;
	letter-spacing: 0;
}

.filter-chip--private:not(.filter-switch) {
	border-color: rgba(190, 75, 91, 0.42);
	background: linear-gradient(180deg, rgba(103, 18, 31, 0.23), rgba(30, 22, 24, 0.58));
	color: rgba(255, 239, 235, 0.96);
}

.filter-chip--private:not(.filter-switch):hover {
	border-color: rgba(190, 75, 91, 0.64);
	background: linear-gradient(180deg, rgba(113, 22, 36, 0.36), rgba(33, 23, 26, 0.7));
}

.filter-chip--private:not(.filter-switch) .filter-chip__lock {
	color: #f0c4b9;
}

.filter-chip--private:not(.filter-switch).is-active {
	border-color: rgba(220, 111, 126, 0.76);
	background: linear-gradient(180deg, rgba(114, 22, 37, 0.74), rgba(66, 17, 28, 0.9));
}

.filter-chip--drawer-toggle {
	min-width: 140px;
	border-color: rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.055);
}

.filter-chip--drawer-toggle.is-active {
	border-color: rgba(255, 255, 255, 0.42);
	background: rgba(255, 255, 255, 0.11);
}

.filter-chip--drawer-toggle__icon {
	width: 17px;
	height: 17px;
	flex: 0 0 17px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-width: 1.8;
}

/* Replace the former CSS-drawn generic bars with the intentional SVG above. */
.filter-chip--drawer-toggle__icon::before,
.filter-chip--drawer-toggle__icon::after {
	display: none;
}

.filter-results-summary {
	min-height: 44px;
	margin-top: 10px;
	padding: 8px 10px;
	border-radius: var(--home-ui-radius);
	border-color: rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.025);
	box-shadow: none;
}

.filter-results-summary__separator {
	color: var(--text-tertiary);
}

.filter-results-summary__clear {
	min-height: 32px;
	border-radius: var(--home-ui-radius);
}

@media screen and (max-width: 640px) {
	.home .online-empty-state__panel,
	.front-page .online-empty-state__panel {
		gap: 10px;
		padding: 12px;
	}

	.online-empty-state__action {
		min-width: 120px;
	}

	.home .homepage-ad-carousel,
	.front-page .homepage-ad-carousel {
		margin-bottom: var(--spacing-4);
	}

	.home .homepage-ad-carousel .static-ad-carousel,
	.front-page .homepage-ad-carousel .static-ad-carousel {
		gap: 12px;
		padding-right: 12px;
	}

	.home .homepage-ad-carousel .static-ad-carousel .ad-card,
	.front-page .homepage-ad-carousel .static-ad-carousel .ad-card {
		flex-basis: 82%;
		min-width: 82%;
	}

	.filter-chip {
		font-size: 12px;
		padding-inline: 12px;
	}

	/* Keep exactly two rails: primary states, then refinements and actions. */
	.filter-chip-row--refine {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-padding-inline: 1px;
	}

	.filter-chip-row__actions {
		display: contents;
	}

	.filter-switch-group {
		order: -1;
	}

	.filter-chip--drawer-toggle {
		order: 1;
		width: auto;
		min-width: 136px;
	}

	.filter-results-summary {
		display: flex;
		justify-content: flex-start;
		gap: 7px;
	}

	.filter-results-summary__count,
	.filter-results-summary__label {
		font-size: 11px;
	}

	.filter-results-summary__clear {
		margin-left: auto;
	}
}

@media screen and (max-width: 390px) {
	.home .online-empty-state__panel,
	.front-page .online-empty-state__panel {
		grid-template-columns: 1fr;
	}

	.online-empty-state__action {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.filter-switch-group > .filter-switch,
	.filter-switch-group > .mx-find-type--switch,
	.filter-switch__track,
	.filter-switch__thumb {
		transition: none;
	}

	.homepage-campaign-pagination__dot {
		transition: none;
	}

	.homepage-campaign-pagination__dot:hover {
		transform: none;
	}
}