/* Pairmate — page-specific styles. */

/* ============================================================
 * Auth shell (signup + login) — design refs: 02-signup.png, login mirrors
 * the same layout. Two-column full-bleed: left = white form; right = teal
 * marketing panel. Stacks vertically below 880px.
 * Classes are namespaced .pm-auth__* so both templates share one rule set;
 * page-specific tweaks use .pm-auth--signup / .pm-auth--login modifiers.
 * ============================================================ */

.pm-auth {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 100vh;
	background: #fff;
}

.pm-auth__left {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--pm-space-7) var(--pm-space-5);
}

.pm-auth__form-wrap {
	width: 100%;
	max-width: 380px;
}

.pm-auth__brand {
	display: inline-block;
	margin-bottom: var(--pm-space-7);
	text-decoration: none;
}
.pm-auth__brand:hover,
.pm-auth__brand:focus-visible {
	text-decoration: none;
}
.pm-auth__logo {
	height: 56px;
	width: auto;
	display: block;
}
.pm-auth__brand-text {
	font-family: var(--pm-font-serif);
	font-size: var(--pm-text-2xl);
	color: var(--pm-ink);
}

/* Nextend slot — neutralize plugin default chrome where reasonable. */
.pm-auth__nextend {
	margin-bottom: var(--pm-space-4);
}
.pm-auth__nextend .nsl-button {
	width: 100% !important;
	border-radius: var(--pm-radius-pill) !important;
}

/* OR divider */
.pm-auth__or {
	position: relative;
	text-align: center;
	margin: var(--pm-space-4) 0;
	color: var(--pm-muted);
	font-size: var(--pm-text-xs);
	letter-spacing: 0.08em;
}
.pm-auth__or::before,
.pm-auth__or::after {
	content: "";
	position: absolute;
	top: 50%;
	width: calc(50% - 24px);
	height: 1px;
	background: var(--pm-line);
}
.pm-auth__or::before { left: 0; }
.pm-auth__or::after  { right: 0; }
.pm-auth__or span {
	background: #fff;
	padding: 0 var(--pm-space-2);
}

/* Form */
.pm-auth__form .pm-field {
	margin-bottom: var(--pm-space-3);
}

/* Password field with eye toggle */
.pm-auth__password {
	position: relative;
}
.pm-auth__password .pm-input {
	padding-right: 44px;
}
.pm-auth__pw-toggle {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	padding: 4px;
	color: var(--pm-muted);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}
.pm-auth__pw-toggle:hover,
.pm-auth__pw-toggle:focus-visible {
	color: var(--pm-ink);
	outline: none;
}

/* Error region */
.pm-auth__error {
	background: var(--pm-notice-bg);
	border: 1px solid var(--pm-notice-bd);
	color: var(--pm-notice-fg);
	border-radius: var(--pm-radius-md);
	padding: var(--pm-space-3);
	margin-bottom: var(--pm-space-3);
	font-size: var(--pm-text-sm);
}

.pm-auth__submit {
	margin-top: var(--pm-space-3);
}

/* Legal copy */
.pm-auth__legal {
	margin-top: var(--pm-space-4);
	font-size: var(--pm-text-xs);
	color: var(--pm-muted);
	line-height: var(--pm-line-loose);
}
.pm-auth__legal a {
	color: var(--pm-muted);
	text-decoration: underline;
}

/* Reciprocal CTA: "Already have an account? Log in" / "Don't have an account? Sign up" */
.pm-auth__alt {
	margin-top: var(--pm-space-5);
	text-align: center;
	font-size: var(--pm-text-sm);
	color: var(--pm-muted);
}
.pm-auth__alt a {
	color: var(--pm-teal-dark);
	font-weight: 500;
	text-decoration: none;
}
.pm-auth__alt a:hover,
.pm-auth__alt a:focus-visible {
	text-decoration: underline;
}

/* Forgot password link on the login screen */
.pm-auth__forgot {
	display: block;
	text-align: right;
	font-size: var(--pm-text-xs);
	color: var(--pm-muted);
	margin-top: calc(-1 * var(--pm-space-2));
	margin-bottom: var(--pm-space-3);
	text-decoration: none;
}
.pm-auth__forgot:hover,
.pm-auth__forgot:focus-visible {
	color: var(--pm-ink);
	text-decoration: underline;
}

/* Right column — teal marketing panel */
.pm-auth__right {
	background: var(--pm-teal);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--pm-space-7) var(--pm-space-5);
}
.pm-auth__right-inner {
	width: 100%;
	max-width: 420px;
	color: var(--pm-ink);
}
.pm-auth__deck {
	display: flex;
	gap: 8px;
	margin-bottom: var(--pm-space-5);
}
.pm-auth__deck-dot {
	width: 36px;
	height: 36px;
	border-radius: 50%;
}
.pm-auth__deck-dot--red    { background: #E0454C; }
.pm-auth__deck-dot--orange { background: #F2A65A; }
.pm-auth__deck-dot--yellow { background: #F2C94C; }

.pm-auth__tagline {
	font-family: var(--pm-font-serif);
	font-size: var(--pm-text-xl);
	line-height: var(--pm-line-tight);
	color: var(--pm-ink);
	margin: 0 0 var(--pm-space-5);
}

.pm-auth__preview-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--pm-space-3);
}
.pm-auth__preview-card {
	aspect-ratio: 4 / 5;
	background: #fff;
	border-radius: var(--pm-radius-md);
	box-shadow: var(--pm-shadow-sm);
}

@media (max-width: 880px) {
	.pm-auth {
		grid-template-columns: 1fr;
	}
	.pm-auth__right {
		display: none;
	}
}

/* ============================================================
 * Welcome (templates/welcome.php) — design ref: 03-welcome.png
 * Full-bleed blue-grey "account created" celebration.
 * ============================================================ */

.pm-welcome {
	min-height: 100vh;
	background: var(--pm-blue-grey);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--pm-space-5);
}

.pm-welcome__inner {
	text-align: center;
	max-width: 520px;
}

.pm-welcome__icon {
	margin: 0 auto var(--pm-space-5);
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pm-welcome__title {
	font-family: var(--pm-font-serif);
	font-size: var(--pm-text-3xl);
	line-height: var(--pm-line-tight);
	color: #fff;
	margin: 0 0 var(--pm-space-3);
}

.pm-welcome__subtitle {
	color: rgba(255, 255, 255, 0.88);
	font-size: var(--pm-text-md);
	margin: 0 0 var(--pm-space-6);
}

.pm-welcome__cta {
	background: #fff;
	color: var(--pm-blue-grey);
	min-width: 200px;
}
.pm-welcome__cta:hover,
.pm-welcome__cta:focus-visible {
	background: #f1f2f4;
	color: var(--pm-blue-grey);
}

/* ============================================================
 * Onboarding wizard (templates/onboarding.php) — Phase 1b
 * Centered card on the white canvas. Progress bar + step content + nav.
 * Design refs: 04..15-onboarding-*.png
 * ============================================================ */

/* Onboarding fullbleed — white, no topbar, no canvas */
body.page-template-templates-onboarding,
body.page-template-templates-onboarding.pm-fullbleed {
	background: #fff !important;
	min-height: 100vh;
}

.pm-wizard {
	max-width: 520px;
	margin: 0 auto;
	padding: 40px 24px 80px;
	min-height: 100vh;
	background: #fff;
}

.pm-wizard__progress {
	height: 6px;
	background: var(--pm-line-2);
	border-radius: var(--pm-radius-pill);
	overflow: hidden;
	margin-bottom: var(--pm-space-6);
}
.pm-wizard__progress-fill {
	height: 100%;
	width: 0%;
	background: var(--pm-teal);
	transition: width 0.3s ease;
}

.pm-wizard__shell {
	min-height: 360px;
}

.pm-wizard__title {
	font-family: var(--pm-font-serif);
	font-size: var(--pm-text-3xl);
	line-height: var(--pm-line-tight);
	margin: 0 0 var(--pm-space-2);
}
.pm-wizard__subtitle {
	color: var(--pm-muted);
	margin: 0 0 var(--pm-space-5);
}

.pm-wizard__field-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--pm-space-3);
}

.pm-wizard__field-grid .pm-select {
	width: 100%;
}

.pm-wizard__pill-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pm-space-2);
	margin-bottom: var(--pm-space-4);
}

.pm-wizard__pill-row .pm-pill {
	padding: 10px 18px;
	font-size: var(--pm-text-md);
	border: 1px solid var(--pm-line);
	background: #fff;
}
.pm-wizard__pill-row .pm-pill--active,
.pm-wizard__pill-row .pm-pill.pm-pill--active {
	background: var(--pm-teal);
	border-color: var(--pm-teal-dark);
	font-weight: 600;
}

.pm-wizard__error {
	background: var(--pm-notice-bg);
	border: 1px solid var(--pm-notice-bd);
	color: var(--pm-notice-fg);
	border-radius: var(--pm-radius-md);
	padding: var(--pm-space-3);
	margin: var(--pm-space-4) 0 0;
	font-size: var(--pm-text-sm);
}

.pm-wizard__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pm-space-3);
	margin-top: var(--pm-space-6);
	padding-top: var(--pm-space-5);
	border-top: 1px solid var(--pm-line);
}

.pm-wizard__cta-spacer {
	flex: 1;
}

.pm-wizard__back {
	background: transparent;
	color: var(--pm-muted);
	border: none;
	font-weight: 500;
	font-size: var(--pm-text-md);
	cursor: pointer;
	padding: 8px 12px;
}
.pm-wizard__back:hover,
.pm-wizard__back:focus-visible {
	color: var(--pm-ink);
}
.pm-wizard__back:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

@media (max-width: 540px) {
	.pm-wizard__field-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
 * Onboarding Phase 1c — steps 4–7
 * Contact rows, looking-for grid, height select.
 * ============================================================ */

/* Larger pill row variant (step 6 interested-in). */
.pm-wizard__pill-row--lg .pm-pill {
	padding: 12px 28px;
	font-size: var(--pm-text-lg);
	border: 1px solid var(--pm-line);
	background: #fff;
}
.pm-wizard__pill-row--lg .pm-pill--active {
	background: var(--pm-teal);
	border-color: var(--pm-teal-dark);
	font-weight: 600;
}

/* Step 4 — Contact rows */
.pm-contact {
	border: 1px solid var(--pm-line);
	border-radius: var(--pm-radius-md);
	padding: var(--pm-space-4);
	margin-bottom: var(--pm-space-3);
}
.pm-contact__header {
	display: flex;
	align-items: center;
	gap: var(--pm-space-3);
}
.pm-contact__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
}
.pm-contact__label {
	flex: 1;
	font-weight: 500;
	font-size: var(--pm-text-md);
}
.pm-contact__fields {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: var(--pm-space-3);
	margin-top: var(--pm-space-3);
	transition: opacity 0.15s ease;
}
.pm-contact__fields--off {
	opacity: 0.4;
	pointer-events: none;
}
.pm-contact__phone {
	width: 100%;
}

/* Step 5 — Looking-for goal grid */
.pm-goal-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--pm-space-3);
	margin-bottom: var(--pm-space-4);
}
.pm-goal-card {
	background: #fff;
	border: 1px solid var(--pm-line);
	border-radius: var(--pm-radius-md);
	padding: var(--pm-space-4) var(--pm-space-3);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--pm-space-2);
	cursor: pointer;
	text-align: center;
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.pm-goal-card:hover,
.pm-goal-card:focus-visible {
	border-color: var(--pm-teal);
	transform: translateY(-2px);
	outline: none;
}
.pm-goal-card--active {
	border-color: var(--pm-teal);
	box-shadow: 0 0 0 1px var(--pm-teal) inset;
}
.pm-goal-card__img {
	width: 64px;
	height: 64px;
	object-fit: contain;
}
.pm-goal-card__img--placeholder {
	background: var(--pm-line-2);
	border-radius: var(--pm-radius-md);
}
.pm-goal-card__label {
	font-size: var(--pm-text-sm);
	font-weight: 500;
	color: var(--pm-ink);
	line-height: 1.3;
}

@media (max-width: 700px) {
	.pm-goal-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 420px) {
	.pm-contact__fields {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
 * Onboarding Phase 1d — steps 8–12 + completion
 * Interests grid, photo grid, completion screen, skip button.
 * ============================================================ */

/* Step 8 — Interests */
.pm-interest-search {
	margin-bottom: var(--pm-space-3);
}
.pm-interest-counter {
	text-align: right;
	font-weight: 500;
	color: var(--pm-muted);
	margin: 0 0 var(--pm-space-3);
}
.pm-interest-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pm-space-2);
	margin-bottom: var(--pm-space-4);
	max-height: 280px;
	overflow-y: auto;
	padding: var(--pm-space-2);
	border: 1px solid var(--pm-line);
	border-radius: var(--pm-radius-md);
}

/* Step 12 — Photos */
.pm-photo-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--pm-space-3);
	margin-bottom: var(--pm-space-4);
}
.pm-photo-cell {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: var(--pm-radius-md);
	overflow: hidden;
	background: var(--pm-line-2);
}
.pm-photo-cell--empty {
	border: 2px dashed var(--pm-line);
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.pm-photo-cell--empty:hover {
	border-color: var(--pm-teal);
	background: var(--pm-line-2);
}
.pm-photo-cell__plus {
	font-size: 36px;
	color: var(--pm-muted);
	line-height: 1;
}
.pm-photo-cell--filled img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pm-photo-del {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	border: none;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pm-photo-del:hover {
	background: rgba(0, 0, 0, 0.85);
}

@media (max-width: 540px) {
	.pm-photo-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Skip button (steps with skippable: true) */
.pm-wizard__skip {
	background: transparent;
	color: var(--pm-muted);
	border: none;
	font-weight: 500;
	font-size: var(--pm-text-md);
	cursor: pointer;
	padding: 8px 12px;
	margin-right: var(--pm-space-2);
}
.pm-wizard__skip:hover,
.pm-wizard__skip:focus-visible {
	color: var(--pm-ink);
	text-decoration: underline;
}
.pm-wizard__skip:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* ============================================================
 * Onboarding-complete screen (templates/onboarding-complete.php)
 * Full-bleed celebration. Mirrors welcome screen structure.
 * Design ref: 18-onboarding-complete.png
 * ============================================================ */

.pm-onb-complete {
	min-height: 100vh;
	background: var(--pm-blue-grey);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--pm-space-5);
}

.pm-onb-complete__inner {
	text-align: center;
	max-width: 520px;
}

.pm-onb-complete__icon {
	margin: 0 auto var(--pm-space-5);
	width: 96px;
	height: 96px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 50%;
}

.pm-onb-complete__title {
	font-family: var(--pm-font-serif);
	font-size: var(--pm-text-3xl);
	line-height: var(--pm-line-tight);
	color: #fff;
	margin: 0 0 var(--pm-space-3);
}

.pm-onb-complete__subtitle {
	color: rgba(255, 255, 255, 0.88);
	font-size: var(--pm-text-md);
	margin: 0 0 var(--pm-space-6);
}

.pm-onb-complete__cta {
	background: #fff;
	color: var(--pm-blue-grey);
	min-width: 200px;
}
.pm-onb-complete__cta:hover,
.pm-onb-complete__cta:focus-visible {
	background: #f1f2f4;
	color: var(--pm-blue-grey);
}

/* ============================================================
 * Home — design ref: 19-home-page.png
 * Two-column layout (main + AD sidebar), circular avatar rail,
 * category pill row, large card grid with heart overlays.
 * ============================================================ */

.pm-home__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 220px;
	gap: clamp(24px, 3vw, 40px);
	align-items: flex-start;
}
.pm-home__main {
	min-width: 0;
}

/* Shared section heading + subtitle. */
.pm-section__head {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: var(--pm-space-6) 0 var(--pm-space-3);
}
.pm-section__head--with-action {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: var(--pm-space-3);
}
.pm-section__title {
	font-family: 'Instrument Serif', Georgia, serif;
	font-weight: 400;
	font-size: clamp(22px, 2.4vw, 28px);
	margin: 0;
	color: var(--pm-ink);
	line-height: 1.1;
}
.pm-section__sub {
	color: var(--pm-muted);
	font-size: var(--pm-text-sm);
	margin: 0;
}

/* First section sits flush against canvas top. */
.pm-home__rail-section .pm-section__head { margin-top: 0; }

/* Filter trigger — pill button top-right of grid header. */
.pm-filter-trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 1px solid var(--pm-line);
	color: var(--pm-ink);
	border-radius: var(--pm-radius-pill);
	padding: 8px 16px;
	font-size: var(--pm-text-sm);
	cursor: pointer;
	transition: background .15s ease;
}
.pm-filter-trigger:hover { background: var(--pm-line-2); }
.pm-filter-trigger__count {
	color: var(--pm-teal);
	font-weight: 600;
}

/* --- New Members rail (Swiper, circular avatars) ----------------------- */
.pm-rail-wrap {
	width: 100%;
}
.pm-rail-swiper {
	width: 100%;
	overflow: hidden;
}
.pm-rail-swiper .swiper-slide.pm-avatar {
	width: 80px;
	height: 80px;
	flex-shrink: 0;
}
.pm-avatar {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	overflow: hidden;
	background: linear-gradient(135deg, var(--pm-line-2), var(--pm-line));
	border: 3px solid var(--pm-teal);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
	cursor: pointer;
	transition: transform .15s ease;
}
.pm-avatar:hover { transform: scale(1.05); }
.pm-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.pm-rail__placeholder {
	color: var(--pm-muted);
	padding: var(--pm-space-3);
	font-size: var(--pm-text-sm);
}

/* --- Category pill row -------------------------------------------------- */
.pm-category-row {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--pm-space-3);
	margin-top: var(--pm-space-3);
}
.pm-category {
	background: #fff;
	border: 1px solid var(--pm-line);
	border-radius: 14px;
	padding: 14px 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
	font: inherit;
	color: var(--pm-ink);
	text-align: center;
}
.pm-category:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(15, 25, 35, 0.06);
}
.pm-category.is-active {
	border-color: var(--pm-teal);
	box-shadow: 0 0 0 2px rgba(85, 221, 224, 0.18);
}
.pm-category__icon {
	width: 44px;
	height: 44px;
	object-fit: contain;
}
.pm-category__label {
	font-size: 12px;
	line-height: 1.2;
	color: var(--pm-ink);
	font-weight: 500;
}

/* --- Discover grid ------------------------------------------------------ */
.pm-grid--cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--pm-space-4);
	margin-top: var(--pm-space-2);
}
.pm-grid__placeholder,
.pm-grid__empty {
	grid-column: 1 / -1;
	color: var(--pm-muted);
	padding: var(--pm-space-6);
	text-align: center;
}
.pm-grid__sentinel {
	height: 1px;
	margin-top: var(--pm-space-6);
}
.pm-grid__status {
	color: var(--pm-muted);
	text-align: center;
	margin: var(--pm-space-4) 0;
	min-height: 1.2em;
	font-size: var(--pm-text-sm);
}

/* --- Member card -------------------------------------------------------- */
.pm-card {
	background: transparent;
	border: 0;
	border-radius: var(--pm-radius-md);
	overflow: hidden;
	display: block;
	transition: transform .12s ease, box-shadow .12s ease;
	cursor: pointer;
	position: relative;
}
.pm-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 28px rgba(15, 25, 35, 0.18);
}
.pm-card__media {
	position: relative;
	aspect-ratio: 5 / 6; /* squarer per design 19 */
	background: var(--pm-line-2);
	overflow: hidden;
	border-radius: var(--pm-radius-md);
}
.pm-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.pm-card__img--empty {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--pm-line-2), var(--pm-line));
}
.pm-card__heart {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 32px;
	height: 32px;
	background: rgba(255, 255, 255, 0.92);
	border: 0;
	border-radius: 50%;
	color: var(--pm-ink);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease, color .15s ease, transform .12s ease;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	z-index: 2;
}

/* Loading spinner — used by .pm-card__heart AND .pm-profile-panel__like. */
.pm-card__heart.is-loading,
.pm-profile-panel__like.is-loading {
	cursor: progress;
}
.pm-card__heart.is-loading svg,
.pm-profile-panel__like.is-loading svg {
	opacity: 0;
}
.pm-card__heart.is-loading::after,
.pm-profile-panel__like.is-loading::after {
	content: "";
	position: absolute;
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: pm-heart-spin .7s linear infinite;
}
/* .pm-card__heart already has position:absolute (its own positioning context
 * for ::after). .pm-profile-panel__like has no position by default — add
 * relative just for it so the spinner ::after centers correctly. */
.pm-profile-panel__like { position: relative; }

@keyframes pm-heart-spin {
	to { transform: rotate(360deg); }
}

/* Position spinner ::after dead-center on both buttons. */
.pm-card__heart::after,
.pm-profile-panel__like::after {
	top: 50%;
	left: 50%;
	margin-top: -7px;
	margin-left: -7px;
}
.pm-card__heart:hover {
	background: var(--pm-teal);
	color: var(--pm-ink);
	transform: scale(1.05);
}
.pm-card__heart.is-liked {
	background: var(--pm-teal);
	color: var(--pm-ink);
}

/* Bottom gradient overlay — name + location sit on top of the photo. */
.pm-card__overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 32px 14px 14px;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.78) 0%,
		rgba(0, 0, 0, 0.55) 45%,
		rgba(0, 0, 0, 0) 100%
	);
	color: #fff;
	pointer-events: none;
}
.pm-card__name {
	font-size: var(--pm-text-md);
	font-weight: 600;
	margin: 0 0 2px;
	color: #fff;
	line-height: 1.2;
}
.pm-card__loc {
	font-size: var(--pm-text-sm);
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
}

/* --- Skeleton (loading) cards --------------------------------------- */
.pm-card--skeleton { cursor: default; pointer-events: none; }
.pm-card--skeleton .pm-card__media {
	background: var(--pm-line-2);
}
.pm-skeleton-shimmer {
	position: absolute;
	inset: 0;
	background: linear-gradient( 90deg,
		var(--pm-line-2) 0%,
		var(--pm-line)   50%,
		var(--pm-line-2) 100%
	);
	background-size: 200% 100%;
	animation: pm-shimmer 1.2s ease-in-out infinite;
}
.pm-skeleton-line {
	height: 10px;
	background: rgba(255, 255, 255, 0.35);
	border-radius: 6px;
	margin-bottom: 6px;
}
.pm-skeleton-line--wide  { width: 60%; }
.pm-skeleton-line--short { width: 40%; height: 8px; }
@keyframes pm-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* --- AD Space sidebar --------------------------------------------------- */
.pm-home__sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--pm-space-4);
	position: sticky;
	top: 20px;
}
.pm-ad-slot {
	background: var(--pm-line-2);
	border-radius: var(--pm-radius-md);
	min-height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--pm-muted);
	font-size: var(--pm-text-sm);
	letter-spacing: 0.04em;
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1100px) {
	.pm-home__layout {
		grid-template-columns: 1fr;
	}
	.pm-home__sidebar {
		flex-direction: row;
		position: static;
		overflow-x: auto;
	}
	.pm-ad-slot { min-width: 220px; min-height: 140px; flex-shrink: 0; }
}
@media (max-width: 880px) {
	.pm-category-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pm-grid--cards   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
	.pm-category-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pm-avatar { width: 64px; height: 64px; }
	.pm-rail-swiper .swiper-slide.pm-avatar { width: 64px; height: 64px; }
}

/* ============================================================
 * Filter modal — design refs: 20-home-page-filters.png + 21
 * Centered dark modal with collapsible accordion rows.
 * ============================================================ */

html.pm-modal-open,
html.pm-modal-open body {
	overflow: hidden;
}

.pm-fmodal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(12px, 4vw, 32px);
}
.pm-fmodal[hidden] { display: none; }

.pm-fmodal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	animation: pm-fade-in .15s ease;
}

.pm-fmodal__panel {
	position: relative;
	width: min(420px, 100%);
	max-height: min(640px, 92vh);
	background: #1F2228;
	color: #E8ECEF;
	border-radius: 20px;
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: pm-fmodal-in .2s ease;
}

@keyframes pm-fmodal-in {
	from { opacity: 0; transform: scale(0.96); }
	to   { opacity: 1; transform: scale(1); }
}

.pm-fmodal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 24px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.pm-fmodal__title {
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 18px;
	margin: 0;
	color: #fff;
}
.pm-fmodal__close {
	background: transparent;
	border: 0;
	font-size: 26px;
	line-height: 1;
	color: #98A4AB;
	cursor: pointer;
	padding: 0 4px;
}
.pm-fmodal__close:hover { color: #fff; }

.pm-fmodal__body {
	padding: 16px 24px;
	overflow-y: auto;
	flex: 1;
	/* Hide scrollbar — scrolling still works. */
	scrollbar-width: none;        /* Firefox */
	-ms-overflow-style: none;     /* IE / old Edge */
}
.pm-fmodal__body::-webkit-scrollbar {
	display: none;                /* WebKit (Chrome/Safari/new Edge) */
}

/* Accordion rows ----------------------------------------------------- */
.pm-fmodal__row {
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.pm-fmodal__row:last-of-type { border-bottom: 0; }
.pm-fmodal__row > summary {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 24px;
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.pm-fmodal__row > summary::-webkit-details-marker { display: none; }
.pm-fmodal__row[open] > summary {
	background: rgba(255, 255, 255, 0.02);
}

.pm-fmodal__row-label {
	flex: 1;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
}
.pm-fmodal__row-value {
	color: #98A4AB;
	font-size: 13px;
}
.pm-fmodal__caret {
	color: #98A4AB;
	transition: transform .15s ease;
	font-size: 10px;
}
.pm-fmodal__row[open] > summary .pm-fmodal__caret,
.pm-fmodal__sub[open] > summary .pm-fmodal__caret {
	transform: rotate(180deg);
}

.pm-fmodal__row-body {
	padding: 4px 24px 18px;
}
.pm-fmodal__row-body--nested {
	padding: 8px 0 0;
	display: flex;
	flex-direction: column;
}

/* Nested rows (inside Advanced options) ------------------------------ */
.pm-fmodal__sub {
	border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.pm-fmodal__sub > summary {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 24px 12px 36px;
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.pm-fmodal__sub > summary::-webkit-details-marker { display: none; }
.pm-fmodal__sub > summary > span:first-child {
	flex: 1;
	color: #fff;
	font-size: 13px;
}
.pm-fmodal__sub-body {
	padding: 4px 24px 14px 36px;
}

/* Fields inside a row body ------------------------------------------ */
.pm-fmodal__field {
	display: block;
	margin-top: 8px;
}
.pm-fmodal__field-label {
	display: block;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #98A4AB;
	margin-bottom: 6px;
}
.pm-fmodal__pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.pm-fmodal__select,
.pm-fmodal__input {
	display: block;
	width: 100%;
	background: #2A2E36;
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: #fff;
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 14px;
	font-family: inherit;
	outline: none;
}
.pm-fmodal__select:focus,
.pm-fmodal__input:focus {
	border-color: var(--pm-teal);
}

/* Gender card-picker (Show me) -------------------------------------- */
.pm-gender-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-top: 6px;
}
.pm-gender-card {
	background: #2A2E36;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	padding: 14px 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.pm-gender-card input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.pm-gender-card__circle {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
}
.pm-gender-card__label {
	font-size: 12px;
	color: #E8ECEF;
}
.pm-gender-card:has(input:checked) {
	background: rgba(85, 221, 224, 0.1);
	border-color: var(--pm-teal);
}
.pm-gender-card:has(input:checked) .pm-gender-card__circle {
	background: var(--pm-teal);
}

/* Report modal specific -------------------------------------------- */
.pm-report-modal__desc {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.55;
	color: #B0BAC0;
}
.pm-report-modal__reasons {
	border: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.pm-report-modal__notes {
	margin-top: 14px;
}
.pm-report-modal__error {
	margin-top: 12px;
	color: #ff6b6b;
	font-size: 13px;
}

/* Radio-pill options (for drinking/smoking/kids/religion) ------------ */
.pm-fmodal__options {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.pm-fmodal__option {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #2A2E36;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 14px;
	color: #E8ECEF;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.pm-fmodal__option input {
	accent-color: var(--pm-teal);
}
.pm-fmodal__option:has(input:checked) {
	background: rgba(85, 221, 224, 0.1);
	border-color: var(--pm-teal);
	color: #fff;
}

/* Footer ------------------------------------------------------------- */
.pm-fmodal__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	background: rgba(0, 0, 0, 0.12);
	flex-shrink: 0;
}
.pm-fmodal__clear {
	background: transparent;
	border: 0;
	color: #98A4AB;
	font-size: 13px;
	cursor: pointer;
	padding: 8px 4px;
}
.pm-fmodal__clear:hover { color: #fff; }
.pm-fmodal__apply {
	background: rgba(85, 221, 224, 0.25);
	color: #98A4AB;
	border: 0;
	border-radius: var(--pm-radius-pill);
	padding: 10px 22px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
	-webkit-font-smoothing: antialiased;
}
.pm-fmodal__apply.is-armed,
button.pm-fmodal__apply.is-armed {
	background: #0E9AA7;
	color: #ffffff;
	font-weight: 700;
}
.pm-fmodal__apply-count {
	margin-left: 4px;
	font-weight: 600;
}

@keyframes pm-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (max-width: 520px) {
	.pm-fmodal__panel {
		max-height: 92vh;
		border-radius: 16px 16px 0 0;
		align-self: flex-end;
	}
	.pm-fmodal { align-items: flex-end; padding: 0; }
}

/* ============================================================
 * Landing — design ref: 01-landing-page.png
 * Full-bleed dark hero, three-column layout, oversized wordmark.
 * ============================================================ */

body.page-landing,
body.home.pm-fullbleed { /* Front-page that loads Landing inline. */
	background: var(--pm-black);
}

.pm-landing {
	background: var(--pm-black);
	color: #fff;
	min-height: 100vh;
	overflow: hidden;
}
.pm-landing__shell {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.pm-landing__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: clamp(20px, 3vw, 32px) clamp(20px, 4vw, 48px);
}
.pm-landing__brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.pm-landing__logo {
	height: 36px;
	width: auto;
	display: block;
}
.pm-landing__login {
	background: var(--pm-teal);
	color: var(--pm-ink);
	border-radius: var(--pm-radius-pill);
}
.pm-landing__login:hover,
.pm-landing__login:focus-visible {
	background: #44C7CA;
	color: var(--pm-ink);
}

/* Three-column hero — headline | photo stack | CTA. */
.pm-landing__hero {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	align-items: center;
	gap: clamp(24px, 4vw, 56px);
	padding: clamp(20px, 4vw, 40px) clamp(24px, 5vw, 72px);
}

.pm-landing__title {
	font-family: 'Instrument Serif', Georgia, serif;
	font-weight: 400;
	font-size: clamp(34px, 4.6vw, 60px);
	line-height: 1.05;
	margin: 0;
	color: #fff;
	letter-spacing: -0.01em;
}
.pm-landing__title em {
	color: var(--pm-teal);
	font-style: italic;
}

.pm-landing__photo {
	display: flex;
	align-items: center;
	justify-content: center;
}
.pm-landing__photo img {
	max-width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.5));
}

.pm-landing__cta {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 360px;
	justify-self: end;
}
.pm-landing__pitch {
	color: #B6C2C7;
	font-size: 17px;
	line-height: 1.55;
	margin: 0;
}
.pm-landing__cta-btn {
	border-radius: var(--pm-radius-pill);
	padding: 14px 28px;
	align-self: flex-start;
}
.pm-landing__powered {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #6F8089;
	font-size: 13px;
}
.pm-landing__powered img {
	width: 14px;
	height: 14px;
	opacity: 0.5;
}

/* Oversized wordmark bleeding off the bottom. */
.pm-landing__wordmark {
	font-family: 'Instrument Serif', Georgia, serif;
	font-weight: 400;
	color: var(--pm-teal);
	font-size: clamp(80px, 18vw, 260px);
	line-height: 0.85;
	letter-spacing: -0.02em;
	text-align: center;
	padding: 0 20px;
	margin-top: -10px;
	user-select: none;
	pointer-events: none;
}

@media (max-width: 880px) {
	.pm-landing__hero {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 28px;
		padding: 20px 24px 0;
	}
	.pm-landing__cta {
		max-width: 100%;
		justify-self: center;
		align-items: center;
	}
	.pm-landing__cta-btn {
		align-self: center;
	}
	.pm-landing__wordmark {
		font-size: clamp(60px, 22vw, 160px);
	}
}

/* ============================================================
 * Profile detail panel (Phase 3) — design refs: 22, 23
 * Right-slide overlay (~40% on desktop, full-screen on mobile).
 * ============================================================ */

html.pm-profile-panel-open,
html.pm-profile-panel-open body { overflow: hidden; }

.pm-profile-panel {
	position: fixed;
	inset: 0;
	z-index: 150;
	display: flex;
	justify-content: flex-end;
}
.pm-profile-panel[hidden] { display: none; }

.pm-profile-panel__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	animation: pm-fade-in .15s ease;
}

.pm-profile-panel__shell {
	position: relative;
	width: min(960px, 60vw);
	background: #fff;
	box-shadow: -16px 0 40px rgba(0, 0, 0, 0.18);
	overflow-y: auto;
	animation: pm-slide-right .2s ease;
	display: flex;
	flex-direction: column;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.pm-profile-panel__shell::-webkit-scrollbar { display: none; }

@keyframes pm-slide-right {
	from { transform: translateX(100%); }
	to   { transform: translateX(0); }
}

.pm-profile-panel__head {
	position: sticky;
	top: 0;
	z-index: 2;
	background: #fff;
	border-bottom: 1px solid var(--pm-line);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 24px;
}
.pm-profile-panel__title {
	font-family: 'Instrument Serif', Georgia, serif;
	font-weight: 400;
	font-size: var(--pm-text-xl);
	margin: 0;
	color: var(--pm-ink);
}
.pm-profile-panel__head-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}
/* Three-dot kebab menu in the header. */
.pm-profile-panel__menu-wrap { position: relative; }
.pm-profile-panel__menu-trigger {
	background: transparent;
	border: 1px solid var(--pm-line);
	border-radius: 50%;
	color: var(--pm-ink);
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .15s ease;
}
.pm-profile-panel__menu-trigger:hover { background: var(--pm-line-2); }

.pm-profile-panel__menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	background: #fff;
	border: 1px solid var(--pm-line);
	border-radius: 12px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
	min-width: 160px;
	padding: 6px;
	z-index: 5;
}
.pm-profile-panel__menu[hidden] { display: none; }
.pm-profile-panel__menu-item {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	background: transparent;
	border: 0;
	padding: 8px 12px;
	border-radius: 8px;
	color: var(--pm-notice-fg);
	font-size: 13px;
	cursor: pointer;
	text-align: left;
}
.pm-profile-panel__menu-item:hover { background: var(--pm-notice-bg); }

.pm-profile-panel__close {
	background: transparent;
	border: 0;
	font-size: 28px;
	line-height: 1;
	color: var(--pm-muted);
	cursor: pointer;
	padding: 0 4px;
}
.pm-profile-panel__close:hover { color: var(--pm-ink); }

.pm-profile-panel__body { padding: 20px 24px 32px; }
.pm-profile-panel__error {
	background: var(--pm-notice-bg);
	color: var(--pm-notice-fg);
	border: 1px solid var(--pm-notice-bd);
	border-radius: var(--pm-radius-md);
	padding: 12px 16px;
}

.pm-profile-panel__content {
	display: flex;
	flex-direction: row;
	gap: 24px;
	align-items: start;
}
.pm-profile-panel__photos { flex: 1.05; min-width: 0; }
.pm-profile-panel__info   { flex: 1;    min-width: 0; }

/* Photos column — main image (Swiper) + thumb strip + notice. */
.pm-profile-panel__photos {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.pm-profile-swiper { width: 100%; }
.pm-profile-swiper--main {
	border-radius: var(--pm-radius-md);
	overflow: hidden;
	background: var(--pm-line-2);
	position: relative;
}
.pm-profile-panel__photo {
	width: 100%;
	aspect-ratio: 4 / 5;
	background: var(--pm-line-2);
}
.pm-profile-panel__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.pm-profile-panel__photo--empty {
	background: linear-gradient(135deg, var(--pm-line-2), var(--pm-line));
}

/* Main-swiper nav arrows — minimal white circles. */
.pm-profile-swiper--main .swiper-button-prev,
.pm-profile-swiper--main .swiper-button-next {
	width: 32px;
	height: 32px;
	background: rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	color: var(--pm-ink);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	margin-top: -16px;
}
.pm-profile-swiper--main .swiper-button-prev::after,
.pm-profile-swiper--main .swiper-button-next::after {
	font-size: 14px;
	font-weight: 700;
}
.pm-profile-swiper--main .swiper-button-disabled { opacity: 0; pointer-events: none; }

/* Override Swiper default teal/blue theme colors. */
:root {
	--swiper-theme-color: var(--pm-ink);
	--swiper-navigation-color: var(--pm-ink);
	--swiper-pagination-color: var(--pm-teal);
}
.swiper-button-prev,
.swiper-button-next { color: var(--pm-ink); }

/* Thumb strip — horizontal scroll of small thumbnails. */
.pm-profile-swiper--thumbs[hidden] { display: none; }
.pm-profile-swiper--thumbs {
	padding-top: 2px;
}
.pm-profile-panel__thumb {
	width: 72px !important;
	height: 90px;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity .15s ease, outline-color .15s ease;
	outline: 2px solid transparent;
}
.pm-profile-panel__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.pm-profile-panel__thumb.swiper-slide-thumb-active {
	opacity: 1;
	outline-color: var(--pm-teal);
}

/* Info column */
.pm-profile-panel__info {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.pm-profile-panel__id {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
}
.pm-profile-panel__name {
	font-family: 'Instrument Serif', Georgia, serif;
	font-weight: 400;
	font-size: var(--pm-text-2xl);
	color: var(--pm-ink);
	margin: 0 0 4px;
	line-height: 1.1;
}
.pm-profile-panel__meta {
	color: var(--pm-muted);
	font-size: var(--pm-text-sm);
	margin: 0;
}
.pm-profile-panel__like {
	width: 36px;
	height: 36px;
	border: 1px solid var(--pm-line);
	background: #fff;
	border-radius: 50%;
	color: var(--pm-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
	flex-shrink: 0;
}
.pm-profile-panel__like:hover,
.pm-profile-panel__like.is-liked {
	background: var(--pm-teal);
	color: var(--pm-ink);
	border-color: var(--pm-teal);
}

/* Contact buttons: WhatsApp + Telegram with their colored fills.
 * Free viewers get the SAME visual treatment plus a blur+opacity overlay
 * (locked state) so the design stays consistent with ref 23. */
.pm-profile-panel__contact-wrap {
	position: relative;
}
.pm-profile-panel__contact-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.pm-profile-panel__contact-row .pm-btn {
	flex: 1 1 0;
	min-width: 140px;
	gap: 8px;
}
.pm-profile-contact { white-space: nowrap; }

/* Locked: keep colored buttons, blur + dim them. The lock icon overlay
 * sits center; the buttons are not clickable. */
.pm-profile-panel__contact-wrap.is-locked .pm-profile-panel__contact-row {
	filter: blur(2px);
	opacity: 0.55;
	pointer-events: none;
	user-select: none;
}
.pm-profile-panel__contact-wrap.is-locked::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%230E2A33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='10' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>")
		center / 22px 22px no-repeat;
	pointer-events: none;
}

.pm-profile-panel__upgrade {
	margin: 4px 0 0;
	font-size: var(--pm-text-sm);
	text-align: center;
}
.pm-profile-panel__upgrade a {
	color: var(--pm-teal-dark);
	font-weight: 500;
	text-decoration: none;
}
.pm-profile-panel__upgrade a:hover { text-decoration: underline; }

.pm-profile-panel__section { }
.pm-profile-panel__section-title {
	font-size: var(--pm-text-sm);
	font-weight: 600;
	color: var(--pm-ink);
	margin: 0 0 8px;
	text-transform: none;
}
.pm-profile-panel__bio {
	color: var(--pm-ink);
	margin: 0;
	line-height: 1.55;
}
.pm-profile-panel__chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.pm-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 12px;
	background: var(--pm-line-2);
	color: var(--pm-ink);
	border-radius: var(--pm-radius-pill);
	font-size: var(--pm-text-sm);
}
.pm-chip__icon {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	opacity: 0.65;
}
.pm-profile-panel__notice {
	margin: 0;
}
.pm-profile-panel__notice strong { display: block; margin-bottom: 6px; }
.pm-profile-panel__notice p { margin: 0; font-size: var(--pm-text-sm); line-height: 1.55; }

/* ============================================================
 * Reusable empty state — used for "no members match filters"
 * and "no likes yet" / "nothing in this tab" states.
 * Uses assets/images/no-match.png plus a heading + sub.
 * ============================================================ */
.pm-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 12px;
	padding: clamp(32px, 5vw, 56px) 16px;
	color: var(--pm-ink);
	grid-column: 1 / -1; /* span full grid width when used inside .pm-grid */
}
.pm-empty__icon {
	width: clamp(100px, 22vw);
	height: auto;
	display: block;
	margin-bottom: 4px;
}
.pm-empty__title {
	font-family: 'Instrument Serif', Georgia, serif;
	font-weight: 400;
	font-size: clamp(22px, 2.5vw, 28px);
	margin: 0;
	color: var(--pm-ink);
}
.pm-empty__sub {
	max-width: 42ch;
	color: var(--pm-muted);
	font-size: var(--pm-text-sm);
	margin: 0;
}

@media (max-width: 1024px) {
	.pm-profile-panel__shell { width: min(640px, 100%); }
	.pm-profile-panel__content { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
	.pm-profile-panel__shell { width: 100%; }
	.pm-profile-panel__body  { padding: 16px; }
}

/* ============================================================
   Phase 4 — Profile Dashboard
   ============================================================ */

.pm-dashboard {
	display: grid;
	grid-template-columns: 240px 1fr 200px;
	gap: 28px;
	align-items: start;
	padding: 28px 0;
}
/* Main column — photo grid and accordions share the same max-width */
.pm-dashboard__main {
	min-width: 0;
}
.pm-dashboard__photos,
.pm-accordion {
	max-width: 100%;
	width: 100%;
}

/* Sidebar */
.pm-dashboard__sidebar {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.pm-dashboard__avatar-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
}
.pm-dashboard__avatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	overflow: hidden;
	background: #c8c8c8;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}
.pm-dashboard__avatar img { width: 100%; height: 100%; object-fit: cover; }
.pm-dashboard__name { font-weight: 600; font-size: var(--pm-text-md); margin: 0; color: var(--pm-ink); }
.pm-dashboard__looking { font-size: var(--pm-text-sm); color: var(--pm-muted); margin: 0; }

/* Prime card — free */
.pm-dashboard__prime-card--free {
	background: var(--pm-blue-grey);
	border-radius: var(--pm-radius-md);
	padding: 16px;
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.pm-dashboard__prime-hand { font-size: 24px; }
.pm-dashboard__prime-cta-title { font-weight: 700; font-size: 15px; margin: 0; }
.pm-dashboard__prime-cta-sub { font-size: var(--pm-text-sm); margin: 0; opacity: 0.85; }
.pm-dashboard__prime-btn {
	background: #fff;
	color: var(--pm-blue-grey);
	margin-top: 4px;
	font-size: 12px;
	padding: 8px 16px;
}
.pm-dashboard__prime-btn:hover { background: var(--pm-line-2); }
.pm-dashboard__prime-benefits-link { color: #fff; font-size: 12px; text-decoration: underline; text-align: center; }

/* Prime card — active */
.pm-dashboard__prime-card--active {
	border: 1px solid var(--pm-line);
	border-radius: var(--pm-radius-md);
	padding: 14px;
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.pm-dashboard__prime-icon { color: var(--pm-teal); font-size: 18px; margin-top: 2px; }
.pm-dashboard__prime-label { font-size: 11px; color: var(--pm-muted); margin: 0; }
.pm-dashboard__prime-name { font-weight: 600; font-size: 13px; margin: 0; color: var(--pm-ink); }
.pm-dashboard__prime-manage { font-size: 12px; color: var(--pm-teal); text-decoration: none; }
.pm-dashboard__prime-manage:hover { text-decoration: underline; }

/* Sidebar menu */
.pm-dashboard__menu {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.pm-dashboard__menu-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: var(--pm-radius-md);
	color: var(--pm-ink);
	font-size: var(--pm-text-sm);
	text-decoration: none;
	transition: background 0.12s;
}
.pm-dashboard__menu-item:hover { background: var(--pm-line-2); }
.pm-dashboard__menu-item--active { background: var(--pm-line-2); font-weight: 500; }
.pm-dashboard__menu-item--logout { color: #ef4444; margin-top: 8px; }
.pm-dashboard__menu-chevron { margin-left: auto; color: var(--pm-muted); }

/* Main content */
.pm-dashboard__main { display: flex; flex-direction: column; gap: 20px; }
.pm-dashboard__main-header { display: flex; align-items: center; justify-content: space-between; }
.pm-dashboard__title { font-size: 18px; font-weight: 600; margin: 0; color: var(--pm-ink); }

/* Photo grid — matches design: 1 large + 2 medium + 3 small */
.pm-dashboard__photos {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Top section: large left + 2 medium stacked right */
.pm-photos-top {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	grid-template-rows: 145px 145px;
	gap: 8px;
}
.pm-photo-slot--large {
	grid-row: 1 / 3;
	aspect-ratio: unset;
	height: 298px;
}
.pm-photo-slot--medium {
	height: 145px;
}

/* Bottom section: 3 equal small slots */
.pm-photos-bottom {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}
.pm-photo-slot--small {
	height: 110px;
	aspect-ratio: unset;
}

.pm-photo-slot {
	position: relative;
	border-radius: var(--pm-radius-md);
	overflow: hidden;
	background: var(--pm-line-2);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 80px;
}
.pm-photo-slot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	position: absolute;
	inset: 0;
}
.pm-photo-slot__add {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	cursor: pointer;
	color: var(--pm-teal);
}
.pm-photo-slot__add:hover { background: var(--pm-line); }
/* Preview (local blob shown instantly before upload completes) */
.pm-photo-slot__preview {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.5;
}

/* Spinner overlay during upload */
.pm-photo-slot__spinner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.25);
	z-index: 2;
}
.pm-spinner {
	width: 24px;
	height: 24px;
	border: 3px solid rgba(255,255,255,0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: pm-spin 0.7s linear infinite;
}
@keyframes pm-spin { to { transform: rotate(360deg); } }

/* Loading state */
.pm-photo-slot--loading { pointer-events: none; }

/* Error flash */
.pm-photo-slot--error { outline: 2px solid #ef4444; }

.pm-photo-slot__delete {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(0,0,0,0.55);
	color: #fff;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.pm-dashboard__photos-hint {
	grid-column: 1 / -1;
	font-size: 11px;
	color: var(--pm-muted);
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0;
}

/* Accordion */
.pm-accordion {
	border: 1px solid var(--pm-line);
	border-radius: var(--pm-radius-md);
	overflow: visible;
}
.pm-accordion__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px;
	background: none;
	border: none;
	font-size: var(--pm-text-md);
	font-weight: 500;
	color: var(--pm-ink);
	cursor: pointer;
	text-align: left;
}
.pm-accordion__trigger[aria-expanded="true"] .pm-accordion__chevron {
	transform: rotate(180deg);
}
.pm-accordion__chevron { transition: transform 0.2s; flex-shrink: 0; }
.pm-accordion__body { padding: 0 18px 20px; }
.pm-accordion__body--collapsed { display: none; }

/* Form rows */
.pm-form-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.pm-form-label { font-size: var(--pm-text-sm); font-weight: 500; color: var(--pm-ink); }
.pm-form-input {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--pm-teal);
	border-radius: var(--pm-radius-md);
	font-size: var(--pm-text-sm);
	font-family: inherit;
	color: var(--pm-ink);
	background: #fff;
	outline: none;
	box-sizing: border-box;
}
.pm-form-input:focus { border-color: var(--pm-blue-grey); }
.pm-form-input--readonly { background: var(--pm-line-2); color: var(--pm-muted); cursor: default; border-color: var(--pm-line); }
.pm-form-input-wrap { position: relative; }
.pm-form-input-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--pm-muted); pointer-events: none; }
.pm-form-select-wrap { position: relative; }
.pm-form-select {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--pm-line);
	border-radius: var(--pm-radius-md);
	font-size: var(--pm-text-sm);
	font-family: inherit;
	color: var(--pm-ink);
	background: #fff;
	appearance: none;
	cursor: pointer;
	outline: none;
	box-sizing: border-box;
}
.pm-form-hint { font-size: 11px; color: var(--pm-muted); margin: 0; }
.pm-form-actions { display: flex; justify-content: flex-end; margin-top: 8px; }

.pm-form-textarea {
	resize: vertical;
	min-height: 80px;
	line-height: 1.5;
}

/* Contact row — toggle + cc + phone */
.pm-contact-row { display: flex; flex-direction: column; gap: 8px; }
.pm-contact-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: var(--pm-text-sm);
	color: var(--pm-ink);
}
.pm-contact-toggle input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--pm-teal); cursor: pointer; }
.pm-contact-fields { display: flex; gap: 8px; }
.pm-form-input--cc { width: 80px; flex-shrink: 0; }

/* More about you rows */
.pm-more-row {
	border-bottom: 1px solid var(--pm-line);
	padding: 12px 0;
}
.pm-more-row:last-of-type { border-bottom: none; }
.pm-more-row__label { font-size: var(--pm-text-sm); color: var(--pm-muted); margin-bottom: 2px; }
.pm-more-row__value {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
}
.pm-more-row__current { font-size: var(--pm-text-sm); font-weight: 500; color: var(--pm-ink); }
.pm-more-row__picker { padding: 10px 0 4px; }
.pm-pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pm-pill {
	padding: 7px 14px;
	border-radius: var(--pm-radius-pill);
	border: 1px solid var(--pm-line);
	background: #fff;
	font-size: var(--pm-text-sm);
	font-family: inherit;
	color: var(--pm-ink);
	cursor: pointer;
	transition: border-color 0.12s, background 0.12s;
}
.pm-pill:hover { border-color: var(--pm-teal); }
.pm-pill.is-active { border-color: var(--pm-teal); background: var(--pm-teal); color: var(--pm-ink); font-weight: 500; }

/* Ad sidebar */
.pm-dashboard__ads { display: flex; flex-direction: column; gap: 16px; }

/* ============================================================
   Subscription Plans Page
   ============================================================ */

.pm-plans-overlay {
	position: fixed;
	inset: 0;
	background: #0a1118;
	z-index: 800;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 16px;
	overflow-y: auto;
}

.pm-plans-close {
	position: fixed;
	top: 18px;
	right: 18px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255,255,255,0.1);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: background 0.15s;
	z-index: 801;
}
.pm-plans-close:hover { background: rgba(255,255,255,0.2); }

.pm-plans-header {
	text-align: center;
	color: #fff;
	margin-bottom: 40px;
}
.pm-plans-logo { display: none; }
.pm-plans-title {
	font-family: 'Instrument Serif', Georgia, serif;
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 400;
	color: #fff;
	margin: 0 0 12px;
	line-height: 1.2;
}
.pm-plans-subtitle {
	font-size: 15px;
	color: rgba(255,255,255,0.6);
	margin: 0;
}

.pm-plans-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	width: 100%;
	max-width: 780px;
}

.pm-plan-card {
	background: #1a2230;
	border-radius: 20px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	border: 1px solid rgba(255,255,255,0.08);
}
.pm-plan-card--prime {
	border: 1px solid rgba(255,255,255,0.12);
}

.pm-plan-card__top { display: flex; flex-direction: column; gap: 12px; }
.pm-plan-card__name-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pm-plan-card__name { font-size: 20px; font-weight: 500; color: #fff; margin: 0; }
.pm-plan-card__badge {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	background: rgba(85,221,224,0.15);
	color: var(--pm-teal);
	border: 1px solid var(--pm-teal);
	border-radius: var(--pm-radius-pill);
	padding: 4px 12px;
}
.pm-plan-card__price {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	line-height: 1;
}
.pm-plan-card__currency {
	font-size: 20px;
	font-weight: 400;
	color: rgba(255,255,255,0.5);
	align-self: flex-start;
	margin-top: 8px;
}
.pm-plan-card__amount {
	font-size: 52px;
	font-weight: 700;
	color: #fff;
	line-height: 1;
}
.pm-plan-card__period {
	display: flex;
	flex-direction: column;
	font-size: 11px;
	color: rgba(255,255,255,0.45);
	padding-bottom: 6px;
	line-height: 1.5;
}
.pm-plan-card__tagline { font-size: 13px; color: rgba(255,255,255,0.5); margin: 0; }

.pm-plan-card__cta {
	width: 100%;
	justify-content: center;
	padding: 14px;
	font-size: 15px;
	font-weight: 600;
	border-radius: var(--pm-radius-pill);
}
.pm-plan-card--free .pm-plan-card__cta {
	background: transparent;
	border: 1px solid rgba(255,255,255,0.2);
	color: #fff;
	cursor: default;
}
.pm-plan-card--free .pm-plan-card__cta:hover { background: rgba(255,255,255,0.05); }

.pm-plan-card__benefits {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.pm-plan-card__benefits li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: rgba(255,255,255,0.8);
}
.pm-plan-card__benefits li svg { color: var(--pm-teal); flex-shrink: 0; }

.pm-plan-card__promo {
	font-size: 11px;
	color: rgba(255,255,255,0.35);
	margin: 0;
	line-height: 1.6;
	border-top: 1px solid rgba(255,255,255,0.08);
	padding-top: 16px;
	margin-top: auto;
}
.pm-plan-card__current-label {
	font-size: 12px;
	color: rgba(255,255,255,0.35);
	text-align: center;
	margin: 0;
	margin-top: auto;
}

/* ============================================================
   WooCommerce Checkout — dark premium design
   ============================================================ */

/* White checkout + order received pages */
body.woocommerce-checkout,
body.woocommerce-checkout #page,
body.woocommerce-checkout main,
body.woocommerce-checkout .site-main,
body.woocommerce-order-received,
body.woocommerce-order-received #page,
body.woocommerce-order-received main,
body.woocommerce-order-received .site-main { background: #f5f6f8 !important; overflow-x: hidden !important; }

/* ---- Thank you / Order received page ---- */
body.woocommerce-order-received .woocommerce {
	max-width: 820px;
	margin: 40px auto;
	padding: 36px 40px;
	background: #fff;
	border-radius: var(--pm-radius-md);
	box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}
body.woocommerce-order-received .woocommerce-thankyou-order-received {
	font-size: 20px;
	font-weight: 600;
	color: var(--pm-ink);
	margin-bottom: 20px;
}
body.woocommerce-order-received .woocommerce-order-overview {
	background: var(--pm-line-2);
	border-radius: var(--pm-radius-md);
	padding: 16px 20px;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	margin: 0 0 28px;
}
body.woocommerce-order-received .woocommerce-order-overview li {
	font-size: 12px;
	color: var(--pm-muted);
	border: none !important;
	padding: 0 !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
body.woocommerce-order-received .woocommerce-order-overview li strong {
	display: block;
	font-size: 15px;
	color: var(--pm-ink);
	font-weight: 600;
	margin-top: 3px;
	text-transform: none;
	letter-spacing: 0;
}
body.woocommerce-order-received h2 {
	font-size: 17px;
	font-weight: 600;
	color: var(--pm-ink);
	margin: 24px 0 12px;
}
body.woocommerce-order-received .woocommerce-table,
body.woocommerce-order-received .shop_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	border: 1px solid var(--pm-line);
	border-radius: var(--pm-radius-md);
	overflow: hidden;
}
body.woocommerce-order-received .woocommerce-table th,
body.woocommerce-order-received .woocommerce-table td,
body.woocommerce-order-received .shop_table th,
body.woocommerce-order-received .shop_table td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--pm-line);
	color: var(--pm-ink);
	text-align: left;
}
body.woocommerce-order-received .woocommerce-table th,
body.woocommerce-order-received .shop_table th { font-weight: 600; background: var(--pm-line-2); }
body.woocommerce-order-received .woocommerce-table tfoot td,
body.woocommerce-order-received .shop_table tfoot td { font-weight: 600; }
body.woocommerce-order-received .woocommerce-table a,
body.woocommerce-order-received .shop_table a { color: var(--pm-teal); }
body.woocommerce-order-received p { font-size: 14px; color: var(--pm-muted); margin-bottom: 12px; }
body.woocommerce-order-received p a { color: var(--pm-teal); }
body.woocommerce-order-received address { font-size: 13px; color: var(--pm-muted); font-style: normal; line-height: 1.6; }

.pm-checkout-wrap {
	display: grid;
	grid-template-columns: 1fr 340px;
	min-height: 100vh;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	overflow-x: hidden;
	background: transparent;
}

/* Left column */
.pm-checkout__left {
	padding: 40px 48px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	background: transparent;
}
.pm-checkout__back {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--pm-muted);
	text-decoration: none;
	font-size: 13px;
	width: fit-content;
}
.pm-checkout__back:hover { color: var(--pm-ink); }
.pm-checkout__title {
	font-family: 'Instrument Serif', Georgia, serif;
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 400;
	color: var(--pm-ink);
	margin: 0;
	line-height: 1.2;
}

/* Tabs */
.pm-checkout__tabs {
	display: flex;
	border-bottom: 1px solid var(--pm-line);
}
.pm-checkout__tab {
	background: none;
	border: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	color: var(--pm-muted);
	padding: 8px 0;
	margin-right: 28px;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color 0.15s, border-color 0.15s;
}
.pm-checkout__tab.is-active { color: var(--pm-ink); border-bottom-color: var(--pm-teal); }
.pm-checkout__tab:hover { color: var(--pm-ink); }
.pm-checkout__tab-panel--hidden { display: none !important; }
.pm-checkout__tab-panel { margin-top: 16px; }

/* Kill any WC wrappers adding space between tabs and card */
.pm-checkout__tab-panel > .woocommerce-billing-fields,
.pm-checkout__tab-panel > .woocommerce-account-fields,
.pm-checkout__tab-panel > #customer_details,
.pm-checkout__tab-panel > .woocommerce-additional-fields { display: none !important; margin: 0 !important; padding: 0 !important; }

/* Remove extra top margin WC injects on payment sections */
.pm-checkout__payment-wrap > *:first-child { margin-top: 0 !important; }
#wc-stripe-payment-element-form,
.wc-stripe-elements-field { margin: 0 !important; }

/* Hide WC default chrome — scoped to checkout page only */
body.woocommerce-checkout .entry-title,
body.woocommerce-checkout h1.entry-title,
body.woocommerce-checkout .woocommerce-notices-wrapper,
body.woocommerce-checkout .checkout_coupon,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .pm-checkout__hidden-fields { display: none !important; }

.pm-checkout__form h3,
.pm-checkout__form .woocommerce-order-review,
.pm-gateway-fields .woocommerce-terms-and-conditions-wrapper { display: none !important; }
/* Hide radio labels and gateway list but keep payment box visible */
.pm-gateway-fields .wc_payment_methods { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.pm-gateway-fields .wc_payment_method > label { display: none !important; }
.pm-gateway-fields .payment_box { background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; }
.pm-gateway-fields .payment_box::before { display: none !important; }
/* Hide WC place order button only on checkout page — we use our own Accept and Pay button */
body.woocommerce-checkout #place_order { display: none !important; }

/* Gateway card fields wrapper */
.pm-checkout__payment-wrap { margin-top: 0; }
.pm-gateway-fields {
	background: #fff;
	border: 1px solid var(--pm-line);
	border-radius: 14px;
	padding: 18px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* Kill ALL Stripe/WC wrapper spacing */
.pm-gateway-fields > fieldset,
.pm-gateway-fields > .wc-stripe-elements-field,
.pm-gateway-fields > #wc-stripe-payment-element-form,
.pm-gateway-fields .wc-stripe-elements-field-group,
.wc-stripe-elements-field-container { margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; }

/* Hide the "Card" header label Stripe adds */
.pm-gateway-fields .wc-stripe-elements-field-group__title,
.pm-gateway-fields > p.wc-stripe-elements-field { margin: 0 !important; }

/* Force white background containers inside gateway to dark */
.pm-gateway-fields .wc-stripe-elements-field-group,
.pm-gateway-fields .payment_box,
.pm-gateway-fields fieldset,
.pm-gateway-fields > div,
.pm-gateway-fields > div > div { background: transparent !important; }

/* Stripe iframe containers — light theme */
.pm-gateway-fields iframe { background: transparent !important; }
.StripeElement,
.wc-stripe-elements-field,
#wc-stripe-card-element,
#wc-stripe-payment-element,
.wc-stripe-card-element-container,
.wc-stripe-payment-element-container {
	background: #fff !important;
	border: 1px solid var(--pm-line) !important;
	border-radius: 8px !important;
	padding: 10px 14px !important;
}
.StripeElement--focus,
.wc-stripe-elements-field--focus { border-color: var(--pm-teal) !important; box-shadow: 0 0 0 2px rgba(85,221,224,0.15) !important; }
/* Remove any dark outer borders Stripe adds */
.pm-gateway-fields > * { border-color: var(--pm-line) !important; }
.pm-gateway-fields [style*="border"] { border-color: var(--pm-line) !important; }

/* The WC disclaimer text below the card form */
.pm-gateway-fields .wc-stripe-elements-field-disclaimer,
.pm-gateway-fields > p:last-child,
.pm-gateway-fields p { color: rgba(255,255,255,0.45) !important; font-size: 11px !important; line-height: 1.5 !important; margin-top: 12px !important; }

/* Style all gateway inputs light */
.pm-gateway-fields label { color: var(--pm-muted) !important; font-size: 12px !important; margin-bottom: 5px !important; display: block !important; }
.pm-gateway-fields input[type="text"],
.pm-gateway-fields input[type="tel"],
.pm-gateway-fields input[type="number"],
.pm-gateway-fields input[type="email"],
.pm-gateway-fields select {
	background: #f9fafb !important;
	border: 1px solid var(--pm-line) !important;
	border-radius: 8px !important;
	color: var(--pm-ink) !important;
	padding: 11px 14px !important;
	font-family: inherit !important;
	font-size: 14px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	outline: none !important;
}
.pm-gateway-fields input::placeholder { color: var(--pm-muted) !important; }
.pm-gateway-fields input:focus,
.pm-gateway-fields select:focus { border-color: var(--pm-teal) !important; box-shadow: none !important; }
.pm-gateway-fields .form-row { margin-bottom: 12px !important; }
.pm-gateway-fields p { color: var(--pm-muted) !important; font-size: 11px !important; line-height: 1.5 !important; }

/* Hide Country + ZIP — multiple selectors to catch Stripe's varying markup */
.pm-gateway-fields .form-row.address-field,
.pm-gateway-fields p.form-row:has(#billing_country),
.pm-gateway-fields p.form-row:has(#billing_postcode),
.pm-gateway-fields #billing_country_field,
.pm-gateway-fields #billing_postcode_field,
.pm-gateway-fields .wc-stripe-elements-field--postal-code,
.pm-gateway-fields .wc-stripe-elements-field--country,
#billing_country_field,
#billing_postcode_field { display: none !important; }

/* Bank transfer */
.pm-checkout__bank-info { padding: 8px 0; }
.pm-checkout__bank-note { color: var(--pm-muted); font-size: 13px; margin-bottom: 16px; }
.pm-checkout__bank-details {
	background: #f9fafb;
	border: 1px solid var(--pm-line);
	border-radius: 12px;
	padding: 16px 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.pm-checkout__bank-row { display: flex; justify-content: space-between; font-size: 13px; }
.pm-checkout__bank-row span:first-child { color: var(--pm-muted); }
.pm-checkout__bank-row span:last-child { color: var(--pm-ink); font-weight: 500; }

/* Right column — transparent, no border */
.pm-checkout__right {
	background: transparent;
	border: none;
	padding: 40px 28px 40px 24px;
	min-width: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 16px;
	/* Align top with the tabs row on the left (~80px from top = back + title) */
	padding-top: 80px;
}

/* White rounded card — matches design */
.pm-checkout__summary-card {
	background: #fff;
	border-radius: 16px;
	border: 1px solid var(--pm-line);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.pm-checkout__summary { display: flex; flex-direction: column; gap: 16px; }
.pm-checkout__summary-title { font-size: 17px; font-weight: 600; color: var(--pm-ink); margin: 0; }

.pm-checkout__summary-benefits {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: 6px;
}
.pm-checkout__summary-benefits li {
	display: flex; align-items: center; gap: 8px;
	font-size: 13px; color: var(--pm-ink);
	line-height: 1;
}
.pm-checkout__summary-benefits li svg { color: var(--pm-teal); flex-shrink: 0; width: 13px; height: 13px; display: block; }

.pm-checkout__summary-pricing {
	display: flex; flex-direction: column; gap: 10px;
	border-top: 1px solid var(--pm-line);
	padding-top: 16px;
}
.pm-checkout__price-row {
	display: flex; justify-content: space-between; align-items: center;
	font-size: 13px; color: var(--pm-muted);
}
.pm-checkout__price-row--promo .pm-checkout__promo-val { color: var(--pm-teal); font-weight: 500; }
.pm-checkout__price-row--total {
	font-size: 14px; font-weight: 600; color: var(--pm-ink);
	padding-top: 8px; border-top: 1px solid var(--pm-line);
}

.pm-checkout__pay-btn {
	width: 100%; justify-content: center;
	padding: 14px; font-size: 15px; font-weight: 600;
	border-radius: var(--pm-radius-pill);
	white-space: nowrap;
}

.pm-checkout__legal {
	font-size: 11px;
	color: var(--pm-muted);
	line-height: 1.6;
	margin: 0;
	word-wrap: break-word;
}
.pm-checkout__legal a { color: var(--pm-ink); text-decoration: underline; }
.pm-checkout__legal a:hover { color: var(--pm-teal); }

/* ============================================================
   Manage Subscription Page
   ============================================================ */

.pm-manage-wrap {
	display: grid;
	grid-template-columns: 1fr 220px;
	gap: 28px;
	align-items: start;
	padding: 28px 0;
}

.pm-manage__main { display: flex; flex-direction: column; gap: 20px; }

.pm-manage__header {
	display: flex;
	align-items: center;
	gap: 8px;
}
.pm-manage__back {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--pm-ink);
	text-decoration: none;
}
.pm-manage__back:hover { color: var(--pm-teal); }
.pm-manage__title {
	font-size: 18px;
	font-weight: 600;
	color: var(--pm-ink);
	margin: 0;
}

.pm-manage__card {
	border: 1px solid var(--pm-line);
	border-radius: var(--pm-radius-md);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 480px;
}
.pm-manage__card--free {
	gap: 14px;
}
.pm-manage__free-msg {
	font-size: var(--pm-text-sm);
	color: var(--pm-muted);
	margin: 0;
}

.pm-manage__plan-row {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--pm-line-2);
	border-radius: 10px;
	padding: 12px 14px;
}
.pm-manage__plan-icon {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: var(--pm-teal);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--pm-ink);
	flex-shrink: 0;
}
.pm-manage__plan-label {
	font-size: 11px;
	color: var(--pm-muted);
	margin: 0;
}
.pm-manage__plan-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--pm-ink);
	margin: 0;
}

.pm-manage__meta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.pm-manage__due {
	font-size: var(--pm-text-sm);
	color: var(--pm-muted);
}
.pm-manage__benefits-toggle {
	display: flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: none;
	font-size: var(--pm-text-sm);
	color: var(--pm-ink);
	cursor: pointer;
	font-family: inherit;
	padding: 0;
}
.pm-manage__benefits-toggle:hover { color: var(--pm-teal); }
.pm-manage__benefits-chevron { transition: transform 0.2s; }

.pm-manage__benefits {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.pm-manage__benefits li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--pm-text-sm);
	color: var(--pm-ink);
}
.pm-manage__benefits li svg { color: var(--pm-teal); flex-shrink: 0; }

.pm-manage__cancel {
	color: #ef4444;
	font-size: var(--pm-text-sm);
	text-align: center;
	text-decoration: none;
	display: block;
	padding-top: 4px;
}
.pm-manage__cancel:hover { text-decoration: underline; }

.pm-manage__ads { display: flex; flex-direction: column; gap: 16px; }

/* ---- More-about-you field popup modal ---- */
.pm-field-modal {
	position: fixed;
	inset: 0;
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pm-field-modal[hidden] { display: none; }
.pm-field-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.35);
}
.pm-field-modal__card {
	position: relative;
	background: #fff;
	border-radius: 20px;
	padding: 28px 24px 24px;
	width: min(420px, 92vw);
	box-shadow: 0 8px 40px rgba(0,0,0,0.18);
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.pm-field-modal__title {
	font-size: 17px;
	font-weight: 600;
	color: var(--pm-ink);
	margin: 0;
	line-height: 1.3;
}
.pm-field-modal__body { display: flex; flex-direction: column; gap: 14px; }
.pm-field-modal__sublabel {
	font-size: var(--pm-text-sm);
	font-weight: 500;
	color: var(--pm-ink);
	margin: 0;
}
.pm-field-modal__save {
	width: 100%;
	justify-content: center;
	padding: 13px;
}
body.pm-field-modal-open { overflow: hidden; }

/* More-about-you rows — clickable list style */
.pm-more-row {
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid var(--pm-line);
	padding: 13px 0;
	cursor: pointer;
}
.pm-more-row:last-child { border-bottom: none; }
.pm-more-row:hover { background: var(--pm-line-2); margin: 0 -18px; padding: 13px 18px; border-radius: 8px; }
.pm-more-row__label { font-size: var(--pm-text-sm); color: var(--pm-muted); margin-bottom: 2px; }
.pm-more-row__value {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.pm-more-row__trigger { cursor: pointer; }
.pm-more-row__current { font-size: var(--pm-text-sm); font-weight: 500; color: var(--pm-ink); }

/* ============================================================
 * Likes page (Phase 3) — design refs: 25, 25-restricted
 * Tabs (My Likes / Liked Me) + AD sidebar. Free users get a
 * blurred-card + upgrade nudge on the Liked-Me tab.
 * ============================================================ */

.pm-likes {
	min-height: 100%;
}
.pm-likes__tabs {
	display: inline-flex;
	background: var(--pm-line-2);
	border-radius: var(--pm-radius-pill);
	padding: 4px;
	gap: 4px;
	margin-bottom: var(--pm-space-5);
}
.pm-likes__tab {
	background: transparent;
	border: 0;
	color: var(--pm-muted);
	padding: 8px 18px;
	border-radius: var(--pm-radius-pill);
	font-size: 14px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.pm-likes__tab.is-active {
	background: var(--pm-teal);
	color: var(--pm-ink);
	font-weight: 500;
}

.pm-likes__panel { display: none; }
.pm-likes__panel.is-active { display: block; }

.pm-likes__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 220px;
	gap: clamp(24px, 3vw, 40px);
	align-items: flex-start;
}
@media (max-width: 1100px) {
	.pm-likes__layout { grid-template-columns: 1fr; }
}

/* Restricted state on Liked Me for Free users */
.pm-likes__restricted {
	position: relative;
}
.pm-likes__restricted .pm-grid--cards { filter: blur(14px); pointer-events: none; user-select: none; }
.pm-likes__restricted-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 12px;
	padding: 20px;
}
.pm-likes__restricted-icon {
	font-size: 32px;
}
.pm-likes__restricted-title {
	font-family: 'Instrument Serif', Georgia, serif;
	font-weight: 400;
	font-size: var(--pm-text-2xl);
	margin: 0;
	color: var(--pm-ink);
}
.pm-likes__restricted-sub {
	color: var(--pm-muted);
	margin: 0;
	max-width: 36ch;
}

/* ============================================================
 * FAQ & Contact page (templates/faq.php)
 * ============================================================ */

.pm-faq-page {
	max-width: 720px;
	margin: 0 auto;
	padding: var(--pm-space-7) var(--pm-space-5);
}

.pm-faq-page__header {
	text-align: center;
	margin-bottom: var(--pm-space-7);
}
.pm-faq-page__title {
	font-family: var(--pm-font-serif);
	font-size: var(--pm-text-3xl);
	color: var(--pm-ink);
	margin: 0 0 var(--pm-space-2);
}
.pm-faq-page__subtitle {
	color: var(--pm-muted);
	font-size: var(--pm-text-md);
	margin: 0;
}

/* Accordion list */
.pm-faq-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-bottom: var(--pm-space-8);
}
.pm-faq-item {
	border-bottom: 1px solid var(--pm-line);
}
.pm-faq-item__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pm-space-3);
	padding: var(--pm-space-4) 0;
	background: transparent;
	border: 0;
	text-align: left;
	cursor: pointer;
	color: var(--pm-ink);
}
.pm-faq-item__question {
	font-size: var(--pm-text-md);
	font-weight: 500;
	line-height: var(--pm-line-snug);
}
.pm-faq-item__icon {
	flex-shrink: 0;
	color: var(--pm-muted);
	transition: transform .2s ease;
}
.pm-faq-item.is-open .pm-faq-item__icon {
	transform: rotate(180deg);
}
.pm-faq-item__answer {
	padding: 0 0 var(--pm-space-4);
	color: var(--pm-muted);
	font-size: var(--pm-text-md);
	line-height: var(--pm-line-loose);
}
.pm-faq-item__answer p { margin: 0; }

/* Contact section */
.pm-faq-contact {
	background: #fff;
	border: 1px solid var(--pm-line);
	border-radius: var(--pm-radius-lg);
	padding: var(--pm-space-6);
}
.pm-faq-contact__header {
	display: flex;
	align-items: flex-start;
	gap: var(--pm-space-3);
	margin-bottom: var(--pm-space-5);
	color: var(--pm-teal-dark);
}
.pm-faq-contact__title {
	font-size: var(--pm-text-xl);
	font-weight: 600;
	color: var(--pm-ink);
	margin: 0 0 4px;
}
.pm-faq-contact__subtitle {
	color: var(--pm-muted);
	font-size: var(--pm-text-sm);
	margin: 0;
}
.pm-faq-contact__form {
	display: flex;
	flex-direction: column;
	gap: var(--pm-space-4);
}
.pm-faq-contact__row--2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--pm-space-4);
}
.pm-faq-contact__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.pm-faq-contact__label {
	font-size: var(--pm-text-sm);
	font-weight: 500;
	color: var(--pm-ink);
}
.pm-faq-contact__label span {
	color: var(--pm-notice-fg);
}
.pm-faq-contact__input {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--pm-line);
	border-radius: var(--pm-radius-md);
	font-size: var(--pm-text-md);
	font-family: inherit;
	color: var(--pm-ink);
	background: #fff;
	transition: border-color .15s ease;
	box-sizing: border-box;
}
.pm-faq-contact__input:focus {
	outline: none;
	border-color: var(--pm-teal-dark);
}
.pm-faq-contact__textarea {
	resize: vertical;
	min-height: 120px;
}
.pm-faq-contact__submit {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.pm-faq-contact__success {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: var(--pm-space-4);
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: var(--pm-radius-md);
	color: #166534;
	font-size: var(--pm-text-md);
	font-weight: 500;
}
.pm-faq-contact__error {
	padding: var(--pm-space-3) var(--pm-space-4);
	background: var(--pm-notice-bg);
	border: 1px solid var(--pm-notice-bd);
	border-radius: var(--pm-radius-md);
	color: var(--pm-notice-fg);
	font-size: var(--pm-text-sm);
}

@media (max-width: 600px) {
	.pm-faq-contact__row--2col {
		grid-template-columns: 1fr;
	}
	.pm-faq-contact__submit {
		width: 100%;
		justify-content: center;
	}
}