/* =====================================================================
   MODERN-OVERRIDES.CSS
   A complete visual re-skin layered on top of the original style.css /
   responsive.css. No theme PHP logic, hooks, options, or JS behaviour
   is changed by this file — it is purely additive/overriding CSS.

   Design system: "Aurora" — a bold, gradient-led, modern marketplace
   look (violet -> magenta -> ember) over a clean light app surface,
   with a dark glowing hero as the signature moment.

   Loaded last (see functions.php enqueue), after style.css and
   responsive.css, so it can safely override colour/typography/spacing.
   Layout-critical legacy mechanics (the 3-column float/negative-margin
   skeleton, the JS-driven mobile nav slideDown, the country-list
   expand/collapse, the owl-carousel engine, the star-rating sprite)
   are intentionally left alone — only their *decoration* is restyled.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------------------- */
:root {
	/* Aurora palette */
	--mx-ink: #140C24;          /* near-black violet — header/hero/footer base */
	--mx-ink-soft: #1E1432;     /* lifted ink surface for cards-on-dark */
	--mx-velvet: #7C3AED;       /* gradient start — violet */
	--mx-flame: #F0266E;        /* gradient mid — magenta/pink */
	--mx-ember: #FF7A45;        /* gradient end — warm coral */
	--mx-cloud: #FAF8FC;        /* app background — near-white, faint violet warmth */
	--mx-surface: #FFFFFF;      /* card surface */
	--mx-graphite: #241B36;     /* heading / primary text */
	--mx-slate: #6E6580;        /* secondary / muted text */
	--mx-line: #ECE7F3;         /* hairline borders on light surfaces */
	--mx-line-soft: #F2EEF9;
	--mx-success: #16B981;      /* verified / online green-teal */
	--mx-success-dark: #0E8F66;

	/* Aurora gradient — the signature, used sparingly & consistently */
	--mx-aurora: linear-gradient(135deg, var(--mx-velvet) 0%, var(--mx-flame) 55%, var(--mx-ember) 100%);
	--mx-aurora-soft: linear-gradient(135deg, rgba(124,58,237,0.12) 0%, rgba(240,38,110,0.12) 55%, rgba(255,122,69,0.12) 100%);
	--mx-aurora-text: linear-gradient(100deg, #C9A6FF 0%, #FF8FC0 50%, #FFB088 100%);

	/* Type */
	--mx-font-display: 'Sora', 'Plus Jakarta Sans', "Helvetica Neue", Arial, sans-serif;
	--mx-font-body: 'Plus Jakarta Sans', "Helvetica Neue", Arial, sans-serif;

	/* Shape & motion */
	--mx-radius-sm: 10px;
	--mx-radius-md: 16px;
	--mx-radius-lg: 24px;
	--mx-radius-pill: 999px;
	--mx-shadow-sm: 0 2px 8px rgba(36,27,54,0.06);
	--mx-shadow-md: 0 8px 24px rgba(36,27,54,0.10);
	--mx-shadow-lg: 0 20px 48px rgba(20,12,36,0.18);
	--mx-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------------
   2. RESET LAYER
   Neutralise specific legacy decorative properties on elements we are
   re-skinning, so the new design isn't fighting the old one. Scoped to
   exact selectors only — never touches `display` on JS-managed nodes
   (header-nav, hamburger-menu, country-list, owl-carousel internals).
   --------------------------------------------------------------------- */
body {
	background: var(--mx-cloud) !important;
	color: var(--mx-graphite) !important;
	font-family: var(--mx-font-body) !important;
}
.body {
	border-left: none !important;
	border-right: none !important;
}
.bodybox {
	background-color: transparent !important;
	border-bottom: none !important;
	padding: 0 !important;
	overflow: visible !important;
}
.bodybox h3 {
	color: inherit !important;
	text-align: left !important;
	font-size: inherit !important;
	padding-bottom: 0 !important;
}
.bodybox-homepage h3 {
	color: inherit !important;
	font-size: inherit !important;
	padding-bottom: 0 !important;
}
/* Legacy float clear-fix separators are obsolete under CSS Grid */
.mx-card-grid .show-separator {
	display: none !important;
}
/* Neutralise the JS vcenter() inline margin-top hack — we centre with flexbox instead */
.vcenter {
	margin-top: 0 !important;
}

/* ---------------------------------------------------------------------
   3. GLOBAL BASE
   --------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--mx-font-display);
	color: var(--mx-graphite);
	letter-spacing: -0.01em;
}
a {
	color: var(--mx-flame);
}
a:hover {
	color: var(--mx-velvet);
}
::selection {
	background: var(--mx-flame);
	color: #fff;
}
:focus-visible {
	outline: 2px solid var(--mx-ember);
	outline-offset: 2px;
	border-radius: 4px;
}
/* Webkit scrollbar — subtle, on-brand */
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
::-webkit-scrollbar-track {
	background: var(--mx-cloud);
}
::-webkit-scrollbar-thumb {
	background: #D9D0E8;
	border-radius: var(--mx-radius-pill);
	border: 2px solid var(--mx-cloud);
}
::-webkit-scrollbar-thumb:hover {
	background: var(--mx-velvet);
}

.mx-contentwrapper {
	max-width: 1600px;
	margin: 0 auto;
}
.mx-body {
	padding: 0 32px 64px;
}

/* ---------------------------------------------------------------------
   4. BUTTON SYSTEM
   Restyles the theme's existing global button classes wherever they
   appear, site-wide — including templates outside this redesign's
   scope (sidebar-right.php payment/upgrade buttons, single profile
   pages, forms) — so the whole site reads as one consistent system
   without needing those files touched.
   --------------------------------------------------------------------- */
.pinkbutton, .pinkdegrade,
.blueishbutton, .orangebutton, .redbutton, .greenbutton {
	background: var(--mx-aurora) !important;
	border: none !important;
	color: #fff !important;
	font-family: var(--mx-font-body);
	font-weight: 600;
	letter-spacing: 0.01em;
	box-shadow: 0 6px 16px rgba(240,38,110,0.28);
	transition: transform 0.2s var(--mx-ease), box-shadow 0.2s var(--mx-ease), filter 0.2s var(--mx-ease);
}
.pinkbutton:hover, .pinkdegrade:hover,
.blueishbutton:hover, .orangebutton:hover, .redbutton:hover, .greenbutton:hover {
	background: var(--mx-aurora) !important;
	filter: brightness(1.08) saturate(1.05);
	box-shadow: 0 10px 24px rgba(240,38,110,0.36);
	transform: translateY(-1px);
	color: #fff !important;
}
.whitebutton, .whitedegrade, .graybutton {
	background: #fff !important;
	border: 1.5px solid var(--mx-line) !important;
	color: var(--mx-graphite) !important;
	font-weight: 600;
	transition: border-color 0.2s var(--mx-ease), color 0.2s var(--mx-ease), background 0.2s var(--mx-ease);
}
.whitebutton:hover, .whitedegrade:hover, .graybutton:hover {
	border-color: var(--mx-flame) !important;
	color: var(--mx-flame) !important;
	background: #fff !important;
}

/* Pill button primitives used by the new markup */
.mx-btn-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 26px;
	border-radius: var(--mx-radius-pill);
	font-family: var(--mx-font-body);
	font-weight: 600;
	font-size: 0.95em;
	text-decoration: none;
	transition: transform 0.2s var(--mx-ease), box-shadow 0.2s var(--mx-ease), filter 0.2s var(--mx-ease), background 0.2s var(--mx-ease), color 0.2s var(--mx-ease);
	white-space: nowrap;
}
.mx-btn-pill-light {
	background: #fff;
	color: var(--mx-graphite) !important;
	box-shadow: 0 8px 20px rgba(20,12,36,0.18);
}
.mx-btn-pill-light:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 28px rgba(20,12,36,0.24);
}
.mx-btn-pill-outline {
	background: rgba(255,255,255,0.06);
	border: 1.5px solid rgba(255,255,255,0.28);
	color: #fff !important;
	backdrop-filter: blur(6px);
}
.mx-btn-pill-outline:hover {
	background: rgba(255,255,255,0.14);
	border-color: rgba(255,255,255,0.5);
}
.mx-dot-live {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #3DDC97;
	box-shadow: 0 0 0 0 rgba(61,220,151,0.6);
	animation: mx-pulse 2s var(--mx-ease) infinite;
	flex-shrink: 0;
}
@keyframes mx-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(61,220,151,0.55); }
	70%  { box-shadow: 0 0 0 8px rgba(61,220,151,0); }
	100% { box-shadow: 0 0 0 0 rgba(61,220,151,0); }
}

/* ---------------------------------------------------------------------
   5. HEADER
   Sticky, frosted-glass bar over the dark ink Aurora gradient. The
   `.header-nav` / `.hamburger-menu` display toggling at <=960px is left
   entirely to the original responsive.css + dolceescort.js (slideDown);
   we only ever set `display` on them outside that breakpoint, and never
   with !important, so the JS toggle always wins.
   --------------------------------------------------------------------- */
.mx-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background: linear-gradient(180deg, var(--mx-ink) 0%, #1B1130 100%);
	box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 12px 32px rgba(20,12,36,0.22);
}
.mx-header-top-bar {
	max-width: 1600px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 14px 32px;
	position: relative;
}

/* Logo */
.mx-logo {
	flex: 0 0 auto;
}
.mx-logo h1 {
	margin: 0;
	font-family: var(--mx-font-display);
	font-size: 1.5em;
	font-weight: 800;
	line-height: 1;
}
.mx-logo h1 a {
	display: inline-block;
	background: var(--mx-aurora-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--mx-aurora-text);
	text-decoration: none;
	letter-spacing: -0.02em;
}
.mx-logo img.l {
	max-height: 40px;
	width: auto;
	filter: drop-shadow(0 4px 12px rgba(124,58,237,0.35));
}

/* Primary nav */
.mx-nav {
	flex: 1 1 auto;
	display: flex;
	min-width: 0;
}
.mx-nav .header-menu {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.mx-nav .header-menu > li {
	position: relative;
	list-style: none;
}
.mx-nav .header-menu > li > a {
	display: inline-flex;
	align-items: center;
	padding: 9px 16px;
	border-radius: var(--mx-radius-pill);
	color: rgba(255,255,255,0.78);
	font-family: var(--mx-font-body);
	font-weight: 600;
	font-size: 0.92em;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s var(--mx-ease), color 0.2s var(--mx-ease);
}
.mx-nav .header-menu > li > a:hover {
	background: rgba(255,255,255,0.08);
	color: #fff;
}
.mx-nav .header-menu > li.current_page_item > a {
	background: var(--mx-aurora);
	color: #fff;
	box-shadow: 0 4px 14px rgba(240,38,110,0.35);
}
/* Dropdown (gender/etc submenu) */
.mx-nav .header-menu > li > ul {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 200px;
	background: var(--mx-surface);
	border-radius: var(--mx-radius-md);
	box-shadow: var(--mx-shadow-lg);
	padding: 8px;
	list-style: none;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.18s var(--mx-ease), transform 0.18s var(--mx-ease), visibility 0.18s;
	z-index: 50;
}
.mx-nav .header-menu > li:hover > ul {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.mx-nav .header-menu > li > ul li {
	list-style: none;
}
.mx-nav .header-menu > li > ul li a {
	display: block;
	padding: 9px 12px;
	border-radius: var(--mx-radius-sm);
	color: var(--mx-graphite);
	font-weight: 500;
	font-size: 0.92em;
	text-decoration: none;
	transition: background 0.15s var(--mx-ease), color 0.15s var(--mx-ease);
}
.mx-nav .header-menu > li > ul li a:hover {
	background: var(--mx-aurora-soft);
	color: var(--mx-flame);
}

/* Hamburger (mobile <=960px, behaviour driven by dolceescort.js) */
.mx-hamburger {
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
	padding: 10px 16px !important;
	border-radius: var(--mx-radius-pill) !important;
	background: var(--mx-aurora) !important;
	color: #fff;
	font-family: var(--mx-font-body);
	font-weight: 600;
	font-size: 0.9em;
	cursor: pointer;
}
.mx-hamburger:hover {
	filter: brightness(1.08);
}
.mx-hamburger .label {
	display: inline;
}

/* Subnav: register/login + icons */
.mx-subnav {
	flex: 0 0 auto;
}
.mx-subnav .subnav-menu {
	display: flex;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.mx-subnav .subnav-menu li {
	list-style: none;
}
.mx-subnav .mx-btn a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border-radius: var(--mx-radius-pill);
	font-family: var(--mx-font-body);
	font-weight: 600;
	font-size: 0.88em;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.2s var(--mx-ease), background 0.2s var(--mx-ease), border-color 0.2s var(--mx-ease);
}
.mx-subnav .mx-btn-ghost a {
	background: rgba(255,255,255,0.06);
	border: 1.5px solid rgba(255,255,255,0.2);
	color: rgba(255,255,255,0.88);
}
.mx-subnav .mx-btn-ghost a:hover {
	border-color: rgba(255,255,255,0.5);
	color: #fff;
}
.mx-subnav .mx-btn-solid a {
	background: var(--mx-aurora);
	color: #fff;
	box-shadow: 0 4px 14px rgba(240,38,110,0.35);
}
.mx-subnav .mx-btn-solid a:hover {
	transform: translateY(-1px);
}
.mx-subnav .mx-icon-btn a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255,255,255,0.06);
	border: 1.5px solid rgba(255,255,255,0.16);
	color: rgba(255,255,255,0.85);
	text-decoration: none;
	transition: background 0.2s var(--mx-ease), color 0.2s var(--mx-ease), border-color 0.2s var(--mx-ease);
}
.mx-subnav .mx-icon-btn a:hover {
	background: var(--mx-aurora);
	border-color: transparent;
	color: #fff;
}

/* Header responsive: mirrors the theme's existing 960px mobile-nav
   breakpoint. We never set `display` here with !important — the
   slideDown()/hide() calls in dolceescort.js set inline styles that
   must always be able to win. */
@media all and (max-width: 960px) {
	.mx-header-top-bar {
		flex-wrap: wrap;
		padding: 14px 16px;
		gap: 12px;
	}
	.mx-nav {
		flex-basis: 100%;
		order: 3;
		background: var(--mx-ink-soft);
		border-radius: var(--mx-radius-md);
		padding: 10px;
		margin-top: 4px;
	}
	.mx-nav .header-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}
	.mx-nav .header-menu > li > a {
		width: 100%;
		border-radius: var(--mx-radius-sm);
	}
	.mx-nav .header-menu > li > ul {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		background: rgba(255,255,255,0.04);
		display: none;
		margin: 4px 0 4px 12px;
	}
	.mx-nav .header-menu > li:hover > ul,
	.mx-nav .header-menu > li.current_page_item > ul {
		display: block;
	}
	.mx-nav .header-menu > li > ul li a {
		color: rgba(255,255,255,0.78);
	}
	.mx-nav .header-menu > li > ul li a:hover {
		background: rgba(255,255,255,0.08);
		color: #fff;
	}
	.mx-subnav {
		order: 2;
		margin-left: auto;
	}
	.mx-subnav .subnav-menu-btn .label,
	.mx-subnav .mx-btn a span:not(.icon) {
		display: none;
	}
	.mx-subnav .mx-btn a {
		padding: 9px 11px;
	}
}
@media all and (max-width: 520px) {
	.mx-logo h1 {
		font-size: 1.2em;
	}
	.mx-subnav .mx-btn-ghost {
		display: none;
	}
}

/* ---------------------------------------------------------------------
   6. HERO — the signature Aurora glow band
   --------------------------------------------------------------------- */
.mx-hero {
	position: relative;
	overflow: hidden;
	background: var(--mx-ink);
	padding: 88px 32px 120px;
	text-align: center;
}
.mx-hero-glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.55;
	pointer-events: none;
}
.mx-hero-glow-1 {
	width: 560px;
	height: 560px;
	background: var(--mx-velvet);
	top: -220px;
	left: -120px;
}
.mx-hero-glow-2 {
	width: 620px;
	height: 620px;
	background: var(--mx-flame);
	bottom: -280px;
	right: -160px;
	opacity: 0.45;
}
.mx-hero-inner {
	position: relative;
	z-index: 2;
	max-width: 760px;
	margin: 0 auto;
}
.mx-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 16px;
	border-radius: var(--mx-radius-pill);
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.16);
	color: #fff;
	font-family: var(--mx-font-body);
	font-weight: 600;
	font-size: 0.78em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 22px;
	backdrop-filter: blur(6px);
}
.mx-hero-title {
	font-family: var(--mx-font-display);
	font-weight: 800;
	font-size: clamp(2rem, 4.4vw, 3.2rem);
	line-height: 1.08;
	color: #fff;
	margin: 0 0 18px;
	letter-spacing: -0.02em;
}
.mx-hero-sub {
	font-family: var(--mx-font-body);
	font-size: 1.08em;
	line-height: 1.6;
	color: rgba(255,255,255,0.72);
	max-width: 560px;
	margin: 0 auto 34px;
}
.mx-hero-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}
@media all and (max-width: 600px) {
	.mx-hero {
		padding: 64px 20px 84px;
	}
	.mx-hero-glow-1, .mx-hero-glow-2 {
		width: 380px;
		height: 380px;
		filter: blur(60px);
	}
}

/* ---------------------------------------------------------------------
   7. FEATURED SLIDER (header-slider.php)
   Sits inside <header>, so it continues the dark ink surface. We only
   skin owl-carousel's generated nav buttons — never touch .owl-stage /
   .owl-item, which the plugin positions via inline transforms/widths.
   --------------------------------------------------------------------- */
.mx-slider-wrap {
	background: var(--mx-ink);
	padding: 4px 32px 36px;
}
.mx-sliderall {
	max-width: 1600px;
	margin: 0 auto;
	position: relative;
}
.mx-slide {
	border-radius: var(--mx-radius-md);
	overflow: hidden;
}
.mx-slide-link {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	border-radius: var(--mx-radius-md);
	overflow: hidden;
	text-decoration: none;
	box-shadow: var(--mx-shadow-md);
}
.mx-slide-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--mx-ease);
}
.mx-slide-link:hover .mx-slide-img {
	transform: scale(1.06);
}
.mx-slide-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20,12,36,0) 38%, rgba(20,12,36,0.78) 100%);
	pointer-events: none;
}
.mx-slide-info {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 14px;
	z-index: 2;
}
.mx-slide-name {
	display: block;
	color: #fff;
	font-family: var(--mx-font-display);
	font-weight: 700;
	font-size: 1.05em;
	line-height: 1.2;
}
.mx-slide-location {
	display: flex;
	align-items: center;
	gap: 4px;
	color: rgba(255,255,255,0.72);
	font-size: 0.8em;
	margin-top: 2px;
}
.mx-labels {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
}
.mx-label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 9px;
	border-radius: var(--mx-radius-pill);
	font-family: var(--mx-font-body);
	font-weight: 700;
	font-size: 0.62em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff !important;
	background: rgba(20,12,36,0.55);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(255,255,255,0.18);
}
.mx-label-new {
	background: var(--mx-aurora) !important;
	border-color: transparent;
}
.mx-label-private {
	background: rgba(220,38,38,0.85) !important;
	border-color: transparent;
}
.mx-label-verified {
	background: var(--mx-success) !important;
	border-color: transparent;
}
.mx-label-online {
	background: rgba(20,12,36,0.6) !important;
}
.mx-label-online::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #3DDC97;
	box-shadow: 0 0 0 0 rgba(61,220,151,0.6);
	animation: mx-pulse 2s var(--mx-ease) infinite;
	flex-shrink: 0;
}
.mx-label-online .icon-circle {
	display: none;
}
.mx-vip-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	background: var(--mx-aurora) !important;
	color: #fff;
	font-family: var(--mx-font-body);
	font-weight: 800;
	font-size: 0.68em;
	letter-spacing: 0.04em;
	padding: 5px 10px;
	border-radius: var(--mx-radius-pill);
	box-shadow: 0 4px 12px rgba(240,38,110,0.4);
}
.mx-vip-badge span {
	color: #fff;
}
.mx-video-badge {
	position: absolute;
	bottom: 10px;
	right: 10px;
	z-index: 3;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(20,12,36,0.6);
	backdrop-filter: blur(4px);
}
.mx-video-badge img {
	width: 13px;
	height: auto;
	opacity: 0.95;
}

/* Owl carousel nav arrows — only decorating the plugin's own buttons */
.mx-slider-wrap .owl-nav {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.mx-slider-wrap .owl-nav button.owl-prev,
.mx-slider-wrap .owl-nav button.owl-next {
	pointer-events: auto;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(20,12,36,0.65) !important;
	border: 1px solid rgba(255,255,255,0.2);
	color: #fff !important;
	font-size: 1.1em;
	backdrop-filter: blur(6px);
	transition: background 0.2s var(--mx-ease);
}
.mx-slider-wrap .owl-nav button.owl-prev:hover,
.mx-slider-wrap .owl-nav button.owl-next:hover {
	background: var(--mx-aurora) !important;
}
.mx-slider-wrap .owl-nav button.owl-prev { left: -6px; }
.mx-slider-wrap .owl-nav button.owl-next { right: -6px; }
.mx-slider-wrap .owl-nav button span {
	color: #fff;
}

/* ---------------------------------------------------------------------
   8. PROFILE CARD — .girl / .thumb / .mx-card
   The JS-driven `responsive-img-url` swap and the `show-separator` hide
   logic are left to dolceescort.js. We replace the float-based grid
   with CSS Grid so cards are exactly equal-width and equal-height inside
   every viewport, while keeping the .girl / .thumb / .thumbwrapper
   selectors the original JS / responsive.css expects.
   --------------------------------------------------------------------- */

/* Grid container (index.php, all-profiles.php, taxonomy templates) */
.mx-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 20px;
	padding: 0;
}
@media all and (max-width: 768px) {
	.mx-card-grid {
		grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
		gap: 14px;
	}
}
@media all and (max-width: 460px) {
	.mx-card-grid {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}
}

/* Card shell */
.mx-card {
	width: auto !important;   /* override legacy percentage widths */
	float: none !important;
	margin: 0 !important;
	background: var(--mx-surface);
	border-radius: var(--mx-radius-md);
	box-shadow: var(--mx-shadow-sm);
	overflow: hidden;
	transition: transform 0.26s var(--mx-ease), box-shadow 0.26s var(--mx-ease);
}
.mx-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--mx-shadow-md);
}

/* Thumb wrapper — becomes the aspect-ratio image container */
.mx-card .mx-card-thumb,
.mx-card .thumb {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}
.mx-card .mx-card-thumbwrapper,
.mx-card .thumbwrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	border-radius: var(--mx-radius-md);
}
.mx-card-link {
	position: absolute;
	inset: 0;
	display: block;
	text-decoration: none;
}

/* Card image */
.mx-card-img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: 0 !important;
	transition: transform 0.5s var(--mx-ease);
}
.mx-card:hover .mx-card-img {
	transform: scale(1.06);
}

/* Overlay info — appears on hover */
.mx-card-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background: linear-gradient(180deg, rgba(20,12,36,0) 38%, rgba(20,12,36,0.82) 100%);
	opacity: 0;
	transition: opacity 0.28s var(--mx-ease);
	z-index: 3;
}
.mx-card:hover .mx-card-overlay {
	opacity: 1;
}
.mx-card-desc {
	padding: 10px 12px 14px;
}
.mx-card-name {
	color: #fff;
	font-family: var(--mx-font-display);
	font-weight: 700;
	font-size: 0.95em;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mx-card-location {
	color: rgba(255,255,255,0.72);
	font-size: 0.76em;
	margin-top: 3px;
	display: flex;
	align-items: center;
	gap: 3px;
}

/* Labels within card (from get_escort_labels() — unmodified PHP output) */
.mx-card .thumbwrapper .labels,
.mx-card .mx-card-overlay .labels {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}
/* Restyle the theme's existing .label, .label-new, .label-verified etc. */
.mx-card .labels .label,
.mx-card .labels .online-label,
.mx-card .labels .online-status {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 9px;
	border-radius: var(--mx-radius-pill);
	font-family: var(--mx-font-body);
	font-weight: 700;
	font-size: 0.6em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	background: rgba(20,12,36,0.55);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(255,255,255,0.14);
	float: none;
}
.mx-card .labels .label-new.pinkdegrade {
	background: var(--mx-aurora) !important;
	border-color: transparent;
	box-shadow: none;
}
.mx-card .labels .label-private.reddegrade {
	background: rgba(220,38,38,0.85) !important;
	border-color: transparent;
}
.mx-card .labels .label-verified.greendegrade {
	background: var(--mx-success) !important;
	border-color: transparent;
}
/* Online animated dot inside the card */
.mx-card .notification-circle {
	display: inline-flex;
	align-items: center;
}
.mx-card .notification-circle-outside {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #3DDC97;
	box-shadow: 0 0 0 0 rgba(61,220,151,0.6);
	animation: mx-pulse 2s var(--mx-ease) infinite;
	display: inline-block;
}
.mx-card .notification-circle-inside {
	display: none;
}

/* VIP badge on card */
.mx-card .premiumlabel,
.mx-card .mx-vip-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 4;
	background: var(--mx-aurora) !important;
	color: #fff;
	font-family: var(--mx-font-body);
	font-weight: 800;
	font-size: 0.62em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: var(--mx-radius-pill) !important;
	box-shadow: 0 4px 12px rgba(240,38,110,0.4);
}
.mx-card .premiumlabel span,
.mx-card .mx-vip-badge span {
	color: #fff;
}
/* Video badge on card */
.mx-card .label-video,
.mx-card .mx-video-badge {
	position: absolute;
	bottom: 10px;
	right: 10px;
	z-index: 4;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(20,12,36,0.6);
	backdrop-filter: blur(4px);
}
.mx-card .label-video img,
.mx-card .mx-video-badge img {
	width: 13px;
	height: auto;
}

/* VIP card variant — aurora border glow */
.mx-card.girlpremium {
	box-shadow: 0 0 0 2px rgba(124,58,237,0.45), var(--mx-shadow-sm);
}
.mx-card.girlpremium:hover {
	box-shadow: 0 0 0 2.5px rgba(240,38,110,0.6), var(--mx-shadow-md);
}

/* ---------------------------------------------------------------------
   9. SECTION HEADS (index.php — VIP+, Online, Newly Added, Reviews)
   --------------------------------------------------------------------- */
.mx-page-body {
	background: var(--mx-cloud);
}
.mx-section {
	padding: 40px 0 20px;
	border-bottom: 1px solid var(--mx-line);
}
.mx-section:last-child {
	border-bottom: none;
}
.mx-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 24px;
}
.mx-section-title {
	font-family: var(--mx-font-display) !important;
	font-weight: 700 !important;
	font-size: 1.42em !important;
	color: var(--mx-graphite) !important;
	letter-spacing: -0.01em;
	display: flex;
	align-items: center;
	gap: 10px;
	line-height: 1.2;
	float: none !important;
}
.mx-title-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-size: 0.75em;
	font-style: normal;
	flex-shrink: 0;
}
.mx-title-icon-vip {
	background: var(--mx-aurora);
	color: #fff;
	box-shadow: 0 4px 12px rgba(240,38,110,0.4);
}
.mx-title-icon-online {
	background: var(--mx-success);
	width: 14px;
	height: 14px;
	border-radius: 50%;
	box-shadow: 0 0 0 4px rgba(22,185,129,0.2);
	animation: mx-pulse 2s var(--mx-ease) infinite;
}
.mx-title-icon-new {
	background: var(--mx-velvet);
	color: #fff;
	font-size: 1em;
	font-weight: 800;
}
.mx-title-icon-review {
	background: linear-gradient(135deg, #F59E0B, #EF4444);
	color: #fff;
	font-size: 0.7em;
}
/* "See all" link in section head */
.mx-section-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 18px;
	border-radius: var(--mx-radius-pill);
	background: none;
	border: 1.5px solid var(--mx-line);
	color: var(--mx-slate) !important;
	font-family: var(--mx-font-body);
	font-weight: 600;
	font-size: 0.85em;
	text-decoration: none;
	float: none !important;
	transition: border-color 0.2s var(--mx-ease), color 0.2s var(--mx-ease), background 0.2s var(--mx-ease);
}
.mx-section-link:hover {
	border-color: var(--mx-flame);
	color: var(--mx-flame) !important;
	background: rgba(240,38,110,0.04);
}
.mx-arrow {
	font-size: 1.1em;
	transition: transform 0.2s var(--mx-ease);
}
.mx-section-link:hover .mx-arrow {
	transform: translateX(3px);
}
/* Hide the legacy .see-all-top / .see-all-bottom duplicates */
.mx-section .see-all-top,
.mx-section .see-all-bottom,
.mx-section .see-more-button {
	display: none !important;
}

/* ---------------------------------------------------------------------
   10. REVIEWS SECTION
   --------------------------------------------------------------------- */
.mx-review-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 18px;
	margin-bottom: 20px;
}
@media all and (max-width: 600px) {
	.mx-review-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}
.mx-review-card {
	background: var(--mx-surface);
	border: 1px solid var(--mx-line);
	border-radius: var(--mx-radius-md);
	padding: 20px;
	transition: box-shadow 0.22s var(--mx-ease), border-color 0.22s var(--mx-ease);
	float: none !important;
}
.mx-review-card:hover {
	border-color: rgba(124,58,237,0.22);
	box-shadow: var(--mx-shadow-sm);
}
.mx-review-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}
.mx-review-author {
	display: flex;
	align-items: center;
	gap: 9px;
	font-weight: 600;
	font-size: 0.88em;
	color: var(--mx-graphite);
	float: none !important;
}
.mx-review-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--mx-aurora);
	color: #fff;
	font-weight: 700;
	font-size: 0.72em;
	text-transform: uppercase;
	flex-shrink: 0;
}
.mx-review-text {
	color: var(--mx-slate);
	font-size: 0.9em;
	line-height: 1.6;
}
.mx-review-readmore {
	color: var(--mx-flame);
	font-weight: 600;
	font-size: 0.88em;
	text-decoration: none;
	white-space: nowrap;
}
.mx-review-readmore:hover {
	color: var(--mx-velvet);
}
/* Star-rating sprite — only nudge position, don't break the px-width trick */
.mx-review-card .starrating {
	float: none !important;
	line-height: 1;
}

/* ---------------------------------------------------------------------
   11. ALL-PROFILES PAGE
   --------------------------------------------------------------------- */
.mx-allprofiles-box {
	padding: 32px 0;
}
.mx-allprofiles-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 28px;
}
.mx-allprofiles-title {
	font-family: var(--mx-font-display) !important;
	font-weight: 800 !important;
	font-size: 1.6em !important;
	color: var(--mx-graphite) !important;
	text-align: left !important;
	padding-bottom: 0 !important;
	letter-spacing: -0.02em;
	float: none !important;
	margin: 0 !important;
}
.mx-filter-wrap {
	float: none !important;
}
.mx-filter-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.mx-filter-pills li {
	list-style: none;
}
.mx-pill {
	display: inline-flex !important;
	align-items: center;
	padding: 8px 16px !important;
	border-radius: var(--mx-radius-pill) !important;
	background: var(--mx-surface) !important;
	border: 1.5px solid var(--mx-line) !important;
	color: var(--mx-slate) !important;
	font-family: var(--mx-font-body) !important;
	font-weight: 600 !important;
	font-size: 0.84em !important;
	text-decoration: none;
	box-shadow: none !important;
	transition: border-color 0.18s var(--mx-ease), color 0.18s var(--mx-ease), background 0.18s var(--mx-ease);
}
.mx-pill:hover {
	border-color: var(--mx-flame) !important;
	color: var(--mx-flame) !important;
	background: rgba(240,38,110,0.04) !important;
}
.mx-pill-vip {
	background: var(--mx-aurora) !important;
	border-color: transparent !important;
	color: #fff !important;
}
.mx-pill-vip:hover {
	filter: brightness(1.08) !important;
	color: #fff !important;
}
.mx-pill-online {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
}
.mx-pill-online::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--mx-success);
	box-shadow: 0 0 0 0 rgba(22,185,129,0.5);
	animation: mx-pulse 2s var(--mx-ease) infinite;
}
.mx-allprofiles-content {
	color: var(--mx-slate);
	font-size: 0.95em;
	line-height: 1.65;
	max-width: 740px;
	margin-bottom: 24px;
}
/* Pagination */
.mx-pagination {
	margin-top: 40px;
	display: flex;
	justify-content: center;
}
.mx-pagination .page-numbers {
	display: inline-flex;
}
.mx-pagination .page-numbers a,
.mx-pagination .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 6px;
	margin: 0 3px;
	border-radius: var(--mx-radius-sm);
	font-family: var(--mx-font-body);
	font-weight: 600;
	font-size: 0.9em;
	color: var(--mx-graphite);
	border: 1.5px solid var(--mx-line);
	background: var(--mx-surface);
	text-decoration: none;
	transition: border-color 0.18s var(--mx-ease), color 0.18s var(--mx-ease), background 0.18s var(--mx-ease);
}
.mx-pagination .page-numbers a:hover {
	border-color: var(--mx-flame);
	color: var(--mx-flame);
}
.mx-pagination .page-numbers .current {
	background: var(--mx-aurora);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 4px 12px rgba(240,38,110,0.32);
}
.mx-empty-state {
	padding: 56px 32px;
	text-align: center;
	color: var(--mx-slate);
	font-size: 1em;
	border: 1.5px dashed var(--mx-line);
	border-radius: var(--mx-radius-lg);
	background: var(--mx-surface);
}

/* ---------------------------------------------------------------------
   12. SIDEBAR LEFT
   --------------------------------------------------------------------- */
.mx-sidebar-left {
	background: var(--mx-surface) !important;
	border-right: 1px solid var(--mx-line);
}
.mx-widget {
	padding: 24px 20px;
	border-bottom: 1px solid var(--mx-line);
}
.mx-widget:last-child {
	border-bottom: none;
}
.mx-widget-title {
	font-family: var(--mx-font-display) !important;
	font-size: 0.85em !important;
	font-weight: 700 !important;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--mx-slate) !important;
	padding-bottom: 12px !important;
	margin: 0 0 8px;
}
/* Country list — keep JS expand/collapse intact; only reskin colours */
.mx-sidebar-left .countries {
	background: transparent !important;
	padding: 24px 20px !important;
	border-bottom: 1px solid var(--mx-line) !important;
}
.mx-sidebar-left .country-list a {
	color: var(--mx-graphite) !important;
	font-size: 0.9em !important;
	font-weight: 500;
	transition: color 0.15s var(--mx-ease);
}
.mx-sidebar-left .country-list a:hover {
	color: var(--mx-flame) !important;
}
.mx-sidebar-left .country-list .current-cat > a {
	color: var(--mx-flame) !important;
	font-weight: 700;
}
.mx-sidebar-left .country-list .iconlocation {
	color: var(--mx-velvet) !important;
}
.mx-sidebar-left .country-list .iconlocation:hover {
	background: var(--mx-aurora-soft) !important;
	color: var(--mx-velvet) !important;
}
.mx-sidebar-left .country-list li {
	line-height: 2em !important;
}
/* Mobile sidebar treatment (matches responsive.css <=960px re-order) */
@media all and (max-width: 960px) {
	.mx-sidebar-left {
		background: var(--mx-ink) !important;
		border-right: none;
		border-bottom: 1px solid rgba(255,255,255,0.08);
	}
	.mx-sidebar-left .countries {
		background: transparent !important;
		border-bottom: none !important;
	}
	.mx-sidebar-left .countries h4 {
		color: #fff !important;
	}
	.mx-sidebar-left .country-list a {
		color: rgba(255,255,255,0.82) !important;
	}
	.mx-sidebar-left .country-list a:hover {
		color: #fff !important;
	}
}

/* Placeholder widget notice (admins) */
.mx-widget .placeholder-widgettext {
	font-size: 0.88em;
	color: var(--mx-slate);
}
.mx-widget .placeholder-widgettext a {
	color: var(--mx-flame);
	font-weight: 600;
}

/* ---------------------------------------------------------------------
   13. FOOTER
   --------------------------------------------------------------------- */
.mx-footer {
	background: var(--mx-ink) !important;
	padding: 0 !important;
}
.mx-footer-inner {
	max-width: 1600px;
	margin: 0 auto;
	padding: 56px 32px 40px;
}
/* Widget boxes inside footer */
.mx-footer .widgetbox,
.mx-footer .widget {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: rgba(255,255,255,0.72);
}
.mx-footer .widgetbox h3,
.mx-footer .widgetbox h4,
.mx-footer .widget h3,
.mx-footer .widget h4 {
	color: #fff;
	font-family: var(--mx-font-display);
	font-weight: 700;
	font-size: 1em;
	letter-spacing: -0.01em;
}
.mx-footer a {
	color: rgba(255,255,255,0.72);
	text-decoration: none;
	transition: color 0.18s var(--mx-ease);
}
.mx-footer a:hover {
	color: #fff;
}
.mx-footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.mx-footer ul li {
	line-height: 2;
	font-size: 0.9em;
}
.mx-footer p {
	font-size: 0.9em;
	line-height: 1.65;
}
/* Placeholder widget notice visible to admins */
.mx-footer .placeholder-widgettext {
	color: rgba(255,255,255,0.5);
	font-size: 0.88em;
}
.mx-footer .placeholder-widgettext a {
	color: rgba(255,255,255,0.72);
	font-weight: 600;
}
/* Under-footer bar */
.mx-underfooter {
	background: rgba(0,0,0,0.32);
	border-top: 1px solid rgba(255,255,255,0.07);
}
.mx-underfooter-inner {
	max-width: 1600px;
	margin: 0 auto;
	padding: 16px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
}
.mx-underfooter-brand {
	color: rgba(255,255,255,0.48);
	font-size: 0.85em;
	font-weight: 500;
}
.mx-underfooter-tag {
	background: var(--mx-aurora);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
@media all and (max-width: 600px) {
	.mx-footer-inner {
		padding: 40px 16px 32px;
	}
	.mx-underfooter-inner {
		flex-direction: column;
		text-align: center;
		padding: 16px;
	}
}

/* TOS-18 overlay — minimal reskin, keep JS show/hide working */
.tosdisclaimer-overlay {
	background: rgba(20,12,36,0.75) !important;
	backdrop-filter: blur(6px);
}
.tosdisclaimer-wrapper {
	background: var(--mx-surface) !important;
	border-radius: var(--mx-radius-lg) !important;
	box-shadow: var(--mx-shadow-lg) !important;
	border: 1px solid var(--mx-line);
}

/* ---------------------------------------------------------------------
   14. FORMS & SELECT2
   Reskins form inputs and Select2 dropdowns consistently across all
   pages where the theme renders them (registration, search, quicksearch,
   review forms) without altering markup or logic.
   --------------------------------------------------------------------- */
.form-styling .form-input .input,
.form-styling .form-input .textarea,
.form-styling .form-input select,
.ui-datepicker select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
	font-family: var(--mx-font-body) !important;
	border: 1.5px solid var(--mx-line) !important;
	border-radius: var(--mx-radius-sm) !important;
	color: var(--mx-graphite) !important;
	background: var(--mx-surface) !important;
	transition: border-color 0.18s var(--mx-ease), box-shadow 0.18s var(--mx-ease);
}
.form-styling .form-input .input:focus,
.form-styling .form-input .textarea:focus,
input:focus,
textarea:focus,
select:focus {
	border-color: var(--mx-velvet) !important;
	box-shadow: 0 0 0 3px rgba(124,58,237,0.15) !important;
	outline: none !important;
}
input[type="submit"],
button[type="submit"] {
	font-family: var(--mx-font-body) !important;
}

/* Select2 */
.select2-container .select2-selection--single {
	font-family: var(--mx-font-body) !important;
	border: 1.5px solid var(--mx-line) !important;
	border-radius: var(--mx-radius-sm) !important;
	height: 42px !important;
}
.select2-container .select2-selection--single:hover,
.select2-container.select2-container--open .select2-selection--single {
	border-color: var(--mx-velvet) !important;
}
.select2-dropdown {
	border: 1.5px solid var(--mx-velvet) !important;
	border-radius: var(--mx-radius-sm) !important;
	box-shadow: var(--mx-shadow-md) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--mx-aurora) !important;
}
.select2 .select2-selection__rendered {
	font-family: var(--mx-font-body) !important;
	color: var(--mx-graphite) !important;
}

/* Sidebar quicksearch */
.sidebar-right .quicksearch {
	background: var(--mx-surface) !important;
	border-radius: var(--mx-radius-md) !important;
	border: 1px solid var(--mx-line) !important;
}
.sidebar-right .quicksearch h4 {
	font-family: var(--mx-font-display) !important;
	font-weight: 700 !important;
	color: var(--mx-graphite) !important;
}
.sidebar-right .quicksearch .submit-button {
	background: var(--mx-aurora) !important;
	border: none !important;
	border-radius: var(--mx-radius-pill) !important;
	font-family: var(--mx-font-body) !important;
	font-weight: 700 !important;
	color: #fff !important;
}

/* ---------------------------------------------------------------------
   15. SINGLE PROFILE PAGE — minimal overlay so single-profile.php
   picks up the new typography, card labels and button system without
   touching that file. Only structural properties that are safe to
   override globally.
   --------------------------------------------------------------------- */
.girlsingle .profile-title,
.girlsingle h1.girlname {
	font-family: var(--mx-font-display) !important;
	font-weight: 800;
	letter-spacing: -0.02em;
}
.girlsingle .labels .label {
	font-family: var(--mx-font-body);
	font-weight: 700;
}
.girlsingle .label-verified.greendegrade {
	background: var(--mx-success) !important;
}
.girlsingle .label-new.pinkdegrade {
	background: var(--mx-aurora) !important;
}
.girlsingle .review-wrapper .starrating_stars {
	/* keep sprite intact — only reset surrounding context */
	display: inline-block;
}

/* ---------------------------------------------------------------------
   16. UTILITY & GLOBAL OVERRIDES
   Catch-all tweaks for elements that appear across every page and were
   not covered by the sections above.
   --------------------------------------------------------------------- */

/* Widget boxes used site-wide in sidebars */
.widgetbox,
.widgetbox-wrapper {
	background: var(--mx-surface) !important;
	border: 1px solid var(--mx-line) !important;
	border-radius: var(--mx-radius-md) !important;
	box-shadow: var(--mx-shadow-sm);
}
.widgetbox h3,
.widgetbox h4 {
	font-family: var(--mx-font-display) !important;
	color: var(--mx-graphite) !important;
}

/* Notices / alerts */
.notice-box,
.error-message,
.success-message {
	border-radius: var(--mx-radius-md);
	font-family: var(--mx-font-body);
}

/* Clearfix floats still needed by legacy float layouts */
.clear  { clear: both; height: 0; }
.clear5 { clear: both; height: 5px; }
.clear10 { clear: both; height: 10px; }
.clear20 { clear: both; height: 20px; }

/* Responsive body layout (mirrors original .all-body at 960px — 
   the flex column reorder of sidebar-left / content / sidebar-right) */
@media all and (max-width: 960px) {
	.mx-body {
		padding: 0 16px 48px;
	}
	.mx-contentwrapper {
		padding: 0;
	}
}
@media all and (max-width: 600px) {
	.mx-body {
		padding: 0 10px 36px;
	}
	.mx-allprofiles-title {
		font-size: 1.3em !important;
	}
}

/* ---------------------------------------------------------------------
   17. PRINT
   --------------------------------------------------------------------- */
@media print {
	.mx-header,
	.mx-hero,
	.mx-slider-wrap,
	.mx-sidebar-left,
	.sidebar-right,
	.mx-footer,
	.mx-underfooter {
		display: none !important;
	}
	body {
		background: #fff !important;
		color: #000 !important;
	}
}
/* === END MODERN-OVERRIDES.CSS === */