/* =====================================================================
   Milan Matchmaking — front-end & admin styles
   Palette: deep maroon primary + warm gold accent + sage success, on a
   soft cream ground. Display type: Cormorant Garamond (serif,
   invitation-card character). Body type: DM Sans (clean, humanist,
   readable in dense forms). Tokens below match the approved mockups
   pixel-for-pixel; component rules throughout the file consume them via
   var(), so this block is the single source of truth for re-skinning.
   ===================================================================== */

:root {
	--mc-ink: #2A1B20;
	--mc-ink-soft: #6B5359;
	--mc-ink-body: #4A3439;
	--mc-bg: #FBF8F8;
	--mc-surface: #ffffff;
	--mc-border: #EDE3E6;
	--mc-border-soft: #F1E8EA;
	--mc-primary: #7A1F3D;
	--mc-primary-dark: #5A142C;
	--mc-gold: #C9A24E;
	--mc-gold-bg: #FBF1DC;
	--mc-gold-ink: #7A5410;
	--mc-sage: #2E7D4F;
	--mc-sage-bg: #E8F3EC;
	--mc-sage-ink: #1F5A35;
	--mc-danger: #b23a3a;
	--mc-radius: 12px;
	--mc-radius-lg: 20px;
	--mc-radius-pill: 999px;
	--mc-font-display: 'Cormorant Garamond', Georgia, 'Iowan Old Style', serif;
	--mc-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--mc-shadow: 0 4px 16px rgba(42, 27, 32, 0.08);
}

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */
.mc-wizard, .mc-directory, .mc-profile-single, .mc-inbox, .mc-wallet,
.mc-logged-in-box, #mc-login-form {
	font-family: var(--mc-font-body);
	color: var(--mc-ink);
	max-width: 720px;
	margin: 0 auto;
}

/* Directory, the registration wizard, and the profile page all live
   inside the wider `.mc-page` shell below and manage their own columns
   via `.mc-page-grid` — so none of them should re-impose a second,
   narrower cap on top of it (that double-narrowing is what was leaving
   the large empty margins either side of the search box, the wizard
   card, and the profile layout). Only the small, single-purpose forms
   above (login, wallet, inbox) keep a deliberately compact width. */
.mc-directory,
.mc-wizard,
.mc-profile-single { max-width: none; }

.mc-inbox { max-width: 1040px; }
.mc-wallet { max-width: 900px; }

.mc-wizard h2, .mc-wizard h3,
.mc-profile-single h2, .mc-profile-single h3,
.mc-inbox h2, .mc-wallet h2,
.mc-admin-wrap h1 {
	font-family: var(--mc-font-display);
	font-weight: 600;
	color: var(--mc-ink);
	letter-spacing: -0.01em;
}

.mc-form h4 {
	font-family: var(--mc-font-display);
	font-weight: 600;
	color: var(--mc-ink);
	font-size: 1.15rem;
	margin: 1.75rem 0 0.75rem;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid var(--mc-border);
}
.mc-form h4:first-of-type { margin-top: 0.5rem; }

.mc-wizard h3 { font-size: 1.35rem; }

.mc-edit-current-photo {
	display: block;
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: var(--mc-radius);
	border: 2px solid var(--mc-gold);
	margin-bottom: 0.75rem;
}

.mc-matches-page h3 { margin-bottom: 1rem; }

.mc-hint, .description { color: var(--mc-ink-soft); font-size: 0.95rem; }

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.mc-btn {
	display: inline-block;
	font-family: var(--mc-font-body);
	font-weight: 600;
	font-size: 1rem;
	padding: 0.75em 1.65em;
	border-radius: var(--mc-radius-pill);
	border: none;
	background: var(--mc-primary);
	color: #fff;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.mc-btn:hover { background: var(--mc-primary-dark); transform: translateY(-1px); box-shadow: var(--mc-shadow); }
.mc-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

.mc-btn-secondary {
	background: transparent;
	color: var(--mc-primary);
	border: 1.5px solid var(--mc-primary);
}
.mc-btn-secondary:hover { background: rgba(122, 31, 61, 0.06); color: var(--mc-primary-dark); }

.mc-btn-small { padding: 0.4em 1em; font-size: 0.8rem; }

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */
.mc-wizard label, .mc-filter-form label, .mc-form label,
.mc-sidebar-box .mc-field-grid > label {
	display: block;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--mc-ink-soft);
	margin-bottom: 1.1rem;
}

.mc-wizard input[type="text"],
.mc-wizard input[type="email"],
.mc-wizard input[type="password"],
.mc-wizard input[type="date"],
.mc-wizard input[type="number"],
.mc-wizard input[type="tel"],
.mc-wizard select,
.mc-wizard textarea,
.mc-form input[type="text"],
.mc-form input[type="email"],
.mc-form input[type="password"],
.mc-form input[type="date"],
.mc-form input[type="number"],
.mc-form input[type="tel"],
.mc-form select,
.mc-form textarea,
.mc-directory input[type="text"],
.mc-directory input[type="number"],
.mc-directory select,
.mc-sidebar-box input[type="text"],
.mc-sidebar-box input[type="number"],
.mc-sidebar-box select,
#mc-login-form input:not([type="checkbox"]):not([type="radio"]) {
	display: block;
	width: 100%;
	margin-top: 0.4rem;
	padding: 0.75em 0.9em;
	font-family: var(--mc-font-body);
	font-size: 1.02rem;
	color: var(--mc-ink);
	background: var(--mc-surface);
	border: 1.5px solid var(--mc-border);
	border-radius: 8px;
	box-sizing: border-box;
	transition: border-color 0.15s ease;
}
.mc-wizard input:focus, .mc-wizard select:focus, .mc-wizard textarea:focus,
.mc-form input:focus, .mc-form select:focus, .mc-form textarea:focus,
.mc-directory input:focus, .mc-directory select:focus,
.mc-sidebar-box input:focus, .mc-sidebar-box select:focus,
#mc-login-form input:not([type="checkbox"]):not([type="radio"]):focus {
	outline: none;
	border-color: var(--mc-primary);
}

#mc-login-form input[type="checkbox"] {
	width: auto;
	display: inline-block;
	padding: 0;
	border: none;
	margin: 0 0.4em 0 0;
	vertical-align: middle;
}
#mc-login-form .login-remember label {
	display: flex;
	align-items: center;
	font-weight: 400;
	font-size: 0.9rem;
	color: var(--mc-ink-soft);
}

.mc-checkbox { display: flex; align-items: center; gap: 0.5em; font-weight: 400; }
.mc-checkbox input { width: auto; margin: 0; }
.mc-checkbox-group { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 0.4rem; }
.mc-checkbox-group .mc-checkbox { font-size: 0.92rem; }

.mc-wizard-message, .mc-wallet-message { min-height: 1.4em; margin: 1rem 0; font-size: 0.9rem; }
.mc-wizard-message.mc-error, .mc-wallet-message.mc-error { color: var(--mc-danger); }
.mc-wizard-message.mc-success { color: var(--mc-sage); }

/* ---------------------------------------------------------------------
   Wizard — signature element: connected-ring step indicator
   --------------------------------------------------------------------- */
.mc-wizard-steps {
	display: flex;
	justify-content: space-between;
	margin-bottom: 2.5rem;
	position: relative;
}
.mc-wizard-steps::before {
	content: '';
	position: absolute;
	top: 15px;
	left: 8%;
	right: 8%;
	height: 1.5px;
	background: var(--mc-border);
	z-index: 0;
}
.mc-step-dot {
	position: relative;
	z-index: 1;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--mc-surface);
	border: 1.5px solid var(--mc-border);
	color: var(--mc-ink-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
	font-weight: 700;
	font-family: var(--mc-font-display);
	transition: all 0.2s ease;
}
.mc-step-dot em {
	position: absolute;
	top: 40px;
	font-style: normal;
	font-weight: 600;
	font-size: 0.7rem;
	color: var(--mc-ink-soft);
	white-space: nowrap;
	left: 50%;
	transform: translateX(-50%);
}
.mc-step-dot.active {
	background: var(--mc-primary);
	border-color: var(--mc-primary);
	color: #fff;
	box-shadow: 0 0 0 3px rgba(201, 162, 78, 0.25); /* gold halo — "ring" motif */
}
.mc-step-dot.active em { color: var(--mc-primary); }

.mc-wizard-step { display: none; animation: mc-fade-in 0.25s ease; }
.mc-wizard-step.active { display: block; }
@keyframes mc-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.mc-wizard-nav { display: flex; justify-content: space-between; margin-top: 2rem; gap: 1rem; }
.mc-wizard-nav .mc-wizard-next, .mc-wizard-nav .mc-wizard-submit { margin-left: auto; }

/* ---------------------------------------------------------------------
   Directory
   --------------------------------------------------------------------- */
.mc-filter-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75rem;
	background: var(--mc-surface);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius);
	padding: 1.25rem;
	margin-bottom: 1.5rem;
}
.mc-filter-form select, .mc-filter-form input[type="text"] { width: auto; min-width: 140px; margin-top: 0; }
.mc-inline-label { display: flex; align-items: center; gap: 0.4em; font-size: 0.85rem; font-weight: 600; color: var(--mc-ink-soft); }
.mc-age-select { width: auto !important; min-width: 70px; }

.mc-directory-meta { font-size: 0.85rem; color: var(--mc-ink-soft); margin-bottom: 1rem; }

.mc-directory-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 1.5rem;
}

.mc-member-card {
	background: var(--mc-surface);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius-lg);
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.mc-member-card:hover { box-shadow: var(--mc-shadow); transform: translateY(-2px); }
.mc-card-photo { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-bottom: 3px solid var(--mc-gold); }
.mc-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.mc-card-body { padding: 1.1rem 1.2rem; }
.mc-card-name { font-family: var(--mc-font-display); font-size: 1.2rem; font-weight: 600; color: var(--mc-ink); text-decoration: none; display: block; }
.mc-card-meta { font-size: 0.88rem; color: var(--mc-ink-soft); margin: 0.4rem 0 0.9rem; }
.mc-card-actions { display: flex; align-items: center; gap: 0.5rem; }
.mc-card-actions .mc-btn:first-child { flex: 1; }
.mc-card-shortlist-btn { flex: 0 0 auto; padding: 0.4em 0.7em; }

.mc-directory-pagination { display: flex; justify-content: center; gap: 0.4rem; margin-top: 2rem; }
.mc-page-btn {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--mc-border);
	background: var(--mc-surface);
	cursor: pointer;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: var(--mc-ink-soft);
}
.mc-page-btn:hover { border-color: var(--mc-primary); color: var(--mc-primary); }
.mc-page-btn.active { background: var(--mc-primary); border-color: var(--mc-primary); color: #fff; }

.mc-loading, .mc-empty, .mc-notice { text-align: center; color: var(--mc-ink-soft); padding: 2rem 1rem; }

/* ---------------------------------------------------------------------
   Single profile
   --------------------------------------------------------------------- */
.mc-profile-header { display: flex; gap: 1.5rem; align-items: flex-start; margin-bottom: 2rem; }
.mc-profile-photo { width: 160px; height: 160px; object-fit: cover; border-radius: var(--mc-radius); border: 3px solid var(--mc-gold); }
.mc-profile-heading h2 { margin: 0 0 0.25rem; font-size: 1.8rem; }
.mc-profile-sub { color: var(--mc-ink-soft); margin: 0 0 1rem; }
.mc-profile-actions { display: flex; gap: 0.75rem; }

.mc-profile-section { margin-bottom: 1.75rem; }
.mc-profile-section h3 { font-size: 1.1rem; margin-bottom: 0.6rem; border-bottom: 1px solid var(--mc-border); padding-bottom: 0.4rem; }
.mc-profile-details { width: 100%; border-collapse: collapse; }
.mc-profile-details th { text-align: left; width: 40%; padding: 0.5rem 0; color: var(--mc-ink-soft); font-weight: 600; font-size: 0.9rem; }
.mc-profile-details td { padding: 0.5rem 0; }

/* ---------------------------------------------------------------------
   PHASE 15 (Task #34) — Member Profile stacked layout: hero basics
   grid + Matrimony ID line, grouped dt/dl detail sections (Education &
   Career / Family Details / Personal Details), hobby chips, and a
   quoted family blurb — replacing the old About/Details/Preferences
   tab switcher with the mockup's single scroll-down flow.
   --------------------------------------------------------------------- */
.mc-profile-matrimony-id { color: var(--mc-ink-soft); font-size: 0.85rem; margin: 0.35rem 0 0; }

.mc-basics-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.9rem 1.25rem;
	margin: 1rem 0 1.25rem;
	padding: 1rem 1.1rem;
	background: var(--mc-bg);
	border-radius: var(--mc-radius);
}
.mc-basics-grid dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mc-ink-soft); margin: 0 0 0.2rem; }
.mc-basics-grid dd { margin: 0; font-weight: 600; color: var(--mc-ink); font-size: 0.92rem; }

.mc-detail-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0.9rem 1.5rem;
	margin: 0;
}
.mc-detail-grid dt { font-size: 0.78rem; color: var(--mc-ink-soft); margin: 0 0 0.2rem; }
.mc-detail-grid dd { margin: 0; font-weight: 600; color: var(--mc-ink); font-size: 0.92rem; }

.mc-hobby-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mc-hobby-chip {
	display: inline-block;
	padding: 0.35em 0.9em;
	border-radius: var(--mc-radius-pill);
	background: var(--mc-bg);
	border: 1px solid var(--mc-border);
	font-size: 0.82rem;
	color: var(--mc-ink);
}

.mc-family-quote {
	margin: 1rem 0 0;
	padding: 0.9rem 1.1rem;
	border-left: 3px solid var(--mc-gold);
	background: var(--mc-gold-bg);
	color: var(--mc-ink);
	font-style: italic;
}

@media (max-width: 700px) {
	.mc-basics-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	.mc-profile-header { flex-direction: column; align-items: center; text-align: center; }
}

/* ---------------------------------------------------------------------
   Messaging (modal + inbox)
   --------------------------------------------------------------------- */
.mc-message-modal {
	position: fixed; inset: 0; background: rgba(42, 27, 32, 0.55);
	display: flex; align-items: center; justify-content: center; z-index: 9999;
}
.mc-message-modal-inner {
	background: var(--mc-surface); border-radius: var(--mc-radius);
	padding: 1.5rem; width: 92%; max-width: 480px; position: relative;
	box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}
.mc-modal-close { position: absolute; top: 0.75rem; right: 1rem; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--mc-ink-soft); }

.mc-conversation-thread { max-height: 280px; overflow-y: auto; margin: 1rem 0; padding: 0.5rem; background: var(--mc-bg); border-radius: 8px; }
.mc-message-bubble { max-width: 78%; padding: 0.55em 0.9em; border-radius: 14px; margin-bottom: 0.5rem; font-size: 0.9rem; line-height: 1.4; }
.mc-message-bubble.mc-mine { background: var(--mc-primary); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.mc-message-bubble.mc-theirs { background: var(--mc-surface); border: 1px solid var(--mc-border); margin-right: auto; border-bottom-left-radius: 4px; }

#mc-quick-message-form textarea, #mc-inbox-send-form textarea {
	width: 100%; border: 1.5px solid var(--mc-border); border-radius: 8px;
	padding: 0.6em 0.8em; font-family: var(--mc-font-body); box-sizing: border-box; resize: vertical;
}
#mc-quick-message-form .mc-btn, #mc-inbox-send-form .mc-btn { margin-top: 0.6rem; }

.mc-inbox { display: grid; grid-template-columns: 280px 1fr; gap: 1.5rem; max-width: 900px; min-height: 420px; }
.mc-inbox-threads { border: 1px solid var(--mc-border); border-radius: var(--mc-radius); overflow-y: auto; max-height: 500px; }
.mc-thread-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem; cursor: pointer; border-bottom: 1px solid var(--mc-border); position: relative; }
.mc-thread-item:hover, .mc-thread-item.active { background: var(--mc-bg); }
.mc-thread-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.mc-thread-meta { display: flex; flex-direction: column; overflow: hidden; }
.mc-thread-name { font-weight: 600; font-size: 0.9rem; }
.mc-thread-preview { font-size: 0.78rem; color: var(--mc-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-thread-unread { margin-left: auto; background: var(--mc-primary); color: #fff; font-size: 0.7rem; font-weight: 700; border-radius: 10px; padding: 0.1em 0.55em; }

.mc-inbox-conversation { border: 1px solid var(--mc-border); border-radius: var(--mc-radius); padding: 1rem; display: flex; flex-direction: column; }
.mc-conversation-header { font-family: var(--mc-font-display); font-weight: 600; font-size: 1.1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--mc-border); margin-bottom: 0.75rem; }
#mc-active-thread { flex: 1; overflow-y: auto; margin-bottom: 0.75rem; }

@media (max-width: 640px) { .mc-inbox { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   Wallet
   --------------------------------------------------------------------- */
.mc-wallet-balance { text-align: center; margin-bottom: 2rem; }
.mc-balance-label { display: block; font-size: 0.85rem; color: var(--mc-ink-soft); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.mc-balance-amount { display: block; font-family: var(--mc-font-display); font-size: 2.75rem; color: var(--mc-primary); }

.mc-credit-packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 640px) { .mc-credit-packages { grid-template-columns: 1fr; } }
.mc-package-card { text-align: center; border: 1.5px solid var(--mc-border); border-radius: var(--mc-radius-lg); padding: 1.5rem 1rem; background: var(--mc-surface); }
.mc-package-credits { font-family: var(--mc-font-display); font-size: 1.4rem; font-weight: 600; color: var(--mc-ink); }
.mc-package-price { color: var(--mc-gold); font-weight: 700; margin: 0.4rem 0 1rem; }
.mc-package-buttons { display: flex; flex-direction: column; gap: 0.5rem; }
.mc-moneris-modal-inner { max-width: 460px; }
#monerisCheckout { min-height: 420px; }

/* ---------------------------------------------------------------------
   Admin panel
   --------------------------------------------------------------------- */
.mc-admin-stats { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0; }
.mc-stat-card { background: #fff; border: 1px solid var(--mc-border); border-left: 4px solid var(--mc-primary); border-radius: 8px; padding: 1rem 1.5rem; min-width: 160px; }
.mc-stat-card.mc-stat-warn { border-left-color: var(--mc-gold); }
.mc-stat-card.mc-stat-danger { border-left-color: var(--mc-danger); }
.mc-stat-number { display: block; font-family: var(--mc-font-display); font-size: 1.8rem; font-weight: 700; color: var(--mc-ink); }
.mc-stat-label { font-size: 0.8rem; color: var(--mc-ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }

.mc-status-badge { padding: 0.2em 0.7em; border-radius: 12px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }
.mc-status-active { background: rgba(46, 125, 79, 0.15); color: var(--mc-sage); }
.mc-status-pending { background: rgba(201, 162, 78, 0.18); color: var(--mc-gold); }
.mc-status-banned { background: rgba(178, 58, 58, 0.15); color: var(--mc-danger); }

.mc-positive { color: var(--mc-sage); font-weight: 600; }
.mc-negative { color: var(--mc-danger); font-weight: 600; }

.mc-admin-links { margin-top: 1.5rem; display: flex; gap: 0.75rem; }

/* =====================================================================
   PHASE 1 — Elevated design system: hero banners, sidebar layouts,
   icon steppers, pill radios, styled dropdowns, badges.
   Applies on top of everything above; existing classes are untouched.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Page shell — hero banner + two-column (main + sidebar) layout used
   by Registration, Search/Directory, and the Dashboard.
   --------------------------------------------------------------------- */
/* `.mc-page` is the shell every front-end screen renders inside. It was
   capped at 1280px, which — on a theme whose content column runs wider
   than that — left wide, dead margins either side of every page; widened
   here so the plugin actually uses the room a modern wide screen gives
   it. The two rings in the backdrop are a quiet nod to the subject
   matter (a wedding-ring motif) rather than a generic decorative blob,
   and they're what fills the gaps between cards instead of flat white. */
.mc-page {
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 1.75rem 3rem;
	position: relative;
}
.mc-page::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		radial-gradient(circle at 6% 18%, rgba(201, 162, 78, 0.10) 0, rgba(201, 162, 78, 0.10) 38px, transparent 39px),
		radial-gradient(circle at 9% 24%, rgba(122, 31, 61, 0.08) 0, rgba(122, 31, 61, 0.08) 38px, transparent 39px),
		radial-gradient(circle at 95% 82%, rgba(201, 162, 78, 0.10) 0, rgba(201, 162, 78, 0.10) 46px, transparent 47px),
		radial-gradient(circle at 91% 76%, rgba(122, 31, 61, 0.08) 0, rgba(122, 31, 61, 0.08) 46px, transparent 47px);
	background-repeat: no-repeat;
}

.mc-hero {
	background: linear-gradient(135deg, #fdf1ef 0%, var(--mc-bg) 60%);
	border: 1px solid var(--mc-border);
	border-radius: 16px;
	padding: 2.75rem 3rem;
	margin-bottom: 2.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	position: relative;
	overflow: hidden;
}
.mc-hero::after {
	content: '';
	position: absolute;
	right: -50px;
	top: -60px;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(201, 162, 78, 0.16) 0%, transparent 70%);
}
/* A second, smaller ring tucked into the bottom-right corner only — far
   enough from the heading/tagline text on either side that it never
   collides with copy regardless of how long a page's title runs. */
.mc-hero::before {
	content: '';
	position: absolute;
	right: 4%;
	bottom: -60px;
	width: 130px;
	height: 130px;
	border: 12px solid rgba(46, 125, 79, 0.08);
	border-radius: 50%;
}
.mc-hero-text h1 {
	font-family: var(--mc-font-display);
	font-size: 2.6rem;
	font-weight: 700;
	color: var(--mc-ink);
	margin: 0 0 0.5rem;
	letter-spacing: -0.01em;
	position: relative;
	z-index: 1;
}
.mc-hero-text p { color: var(--mc-ink-soft); font-size: 1.1rem; margin: 0; position: relative; z-index: 1; }
.mc-hero-tagline {
	font-family: var(--mc-font-display);
	font-style: italic;
	color: var(--mc-primary);
	font-size: 1.15rem;
	text-align: right;
	max-width: 260px;
	line-height: 1.45;
	position: relative;
	z-index: 1;
}
@media (max-width: 720px) {
	.mc-hero { flex-direction: column; text-align: center; padding: 2rem 1.75rem; }
	.mc-hero-tagline { text-align: center; max-width: none; }
}

.mc-page-grid {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 2rem;
	align-items: start;
}
@media (max-width: 900px) {
	.mc-page-grid { grid-template-columns: 1fr; }
}

.mc-page-sidebar {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	position: sticky;
	top: 1.5rem;
}
.mc-page-sidebar .mc-sidebar-box { margin-bottom: 0; }

.mc-panel {
	background: var(--mc-surface);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius-lg);
	padding: 2rem 2.25rem;
	box-shadow: var(--mc-shadow);
}

/* ---------------------------------------------------------------------
   Sidebar benefits box (registration) / info widgets (dashboard)
   --------------------------------------------------------------------- */
.mc-sidebar-box {
	background: var(--mc-surface);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius-lg);
	padding: 1.75rem;
	margin-bottom: 1.25rem;
	box-shadow: var(--mc-shadow);
}
.mc-sidebar-box h4 {
	font-family: var(--mc-font-display);
	font-size: 1.15rem;
	color: var(--mc-ink);
	margin: 0 0 1.1rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.mc-sidebar-box h4 i { color: var(--mc-primary); }

.mc-benefit-item { display: flex; align-items: flex-start; gap: 0.9rem; margin-bottom: 1.2rem; }
.mc-benefit-item:last-child { margin-bottom: 0; }
.mc-icon-circle {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(122, 31, 61, 0.09);
	color: var(--mc-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.02rem;
}
.mc-benefit-text strong { display: block; font-size: 0.98rem; color: var(--mc-ink); }
.mc-benefit-text span { display: block; font-size: 0.86rem; color: var(--mc-ink-soft); }

.mc-quote-box {
	text-align: center;
	font-family: var(--mc-font-display);
	font-style: italic;
	color: var(--mc-primary);
	padding: 1.25rem 0.5rem 0;
	font-size: 1.02rem;
	border-top: 1px dashed var(--mc-border);
	margin-top: 1.25rem;
}

/* ---------------------------------------------------------------------
   Stats bar (bottom of registration / hero pages)
   --------------------------------------------------------------------- */
.mc-stats-bar {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	gap: 1.5rem;
	background: var(--mc-surface);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius-lg);
	padding: 1.5rem;
	margin-top: 2rem;
	text-align: center;
}
.mc-stat-item i { color: var(--mc-primary); font-size: 1.3rem; margin-bottom: 0.4rem; display: block; }
.mc-stat-item strong { display: block; font-family: var(--mc-font-display); font-size: 1.1rem; color: var(--mc-ink); }
.mc-stat-item span { font-size: 0.78rem; color: var(--mc-ink-soft); }

/* ---------------------------------------------------------------------
   Icon stepper (registration) — replaces the plain numbered dots with
   an icon + connecting line, while keeping the same markup/classes so
   nothing else has to change.
   --------------------------------------------------------------------- */
.mc-step-dot i { font-size: 0.85rem; }
.mc-step-dot .mc-step-num { display: none; }
.mc-step-dot.active { transform: scale(1.05); }

/* ---------------------------------------------------------------------
   Styled form controls — pill radios + custom-arrow selects, replacing
   raw browser defaults across every form in the plugin.
   --------------------------------------------------------------------- */
.mc-radio-group { display: flex; gap: 0.75rem; margin-top: 0.4rem; }
.mc-radio-pill {
	flex: 1;
	position: relative;
}
.mc-radio-pill input { position: absolute; opacity: 0; }
.mc-radio-pill label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.65em 1em;
	border: 1.5px solid var(--mc-border);
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--mc-ink-soft);
	cursor: pointer;
	transition: all 0.15s ease;
	text-align: center;
}
.mc-radio-pill input:checked + label {
	border-color: var(--mc-primary);
	background: rgba(122, 31, 61, 0.07);
	color: var(--mc-primary);
}

.mc-wizard select,
.mc-form select,
.mc-sidebar-box select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c4f5e' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 0.75em center;
	background-size: 16px;
	padding-right: 2.2em;
}

.mc-field-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 0 1.75rem;
}

.mc-date-group { display: flex; gap: 0.5rem; }
.mc-date-group select { min-width: 0; }

/* ---------------------------------------------------------------------
   Badges — verified / online / premium / new, used on profile headers
   and directory cards.
   --------------------------------------------------------------------- */
.mc-badge-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.25em 0.75em;
	border-radius: 20px;
	font-size: 0.75rem;
	font-weight: 700;
}
.mc-badge-verified { background: rgba(46, 125, 79, 0.15); color: var(--mc-sage); }
.mc-badge-online { background: rgba(46, 125, 79, 0.12); color: var(--mc-sage); }
.mc-badge-online i { font-size: 0.5rem; }
.mc-badge-premium { background: rgba(201, 162, 78, 0.18); color: var(--mc-gold); }
.mc-badge-new { background: rgba(122, 31, 61, 0.1); color: var(--mc-primary); }

/* ---------------------------------------------------------------------
   Compatibility ring (SVG-free, pure CSS conic-gradient)
   --------------------------------------------------------------------- */
.mc-compat-ring {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	margin: 0 auto 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background: conic-gradient(var(--mc-sage) calc(var(--mc-compat, 70) * 1%), var(--mc-border) 0);
}
.mc-compat-ring::before {
	content: '';
	position: absolute;
	inset: 8px;
	border-radius: 50%;
	background: var(--mc-surface);
}
.mc-compat-ring span {
	position: relative;
	font-family: var(--mc-font-display);
	font-weight: 700;
	font-size: 1.3rem;
	color: var(--mc-ink);
}

/* ---------------------------------------------------------------------
   Photo upload slots (registration Step 5 + Edit Profile) — three cards
   side by side: Formal, Casual, Close-Up. Each hides its raw browser
   file input, keeping it fully functional via the label's `for`.
   --------------------------------------------------------------------- */
.mc-photo-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin: 1rem 0;
}
@media (max-width: 720px) {
	.mc-photo-grid { grid-template-columns: 1fr; }
}
.mc-photo-upload-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.6rem;
	padding: 1.25rem 1rem;
	border: 1px dashed var(--mc-border);
	border-radius: var(--mc-radius);
	background: var(--mc-bg);
}
.mc-photo-slot-label { font-weight: 600; font-size: 0.88rem; color: var(--mc-ink); }
.mc-photo-slot-label em { font-style: normal; font-weight: 400; color: var(--mc-ink-soft); }
.mc-photo-upload-box input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
}
.mc-photo-upload-box label.mc-btn { cursor: pointer; margin: 0; }
.mc-photo-upload-box > label.mc-hint { margin: 0; cursor: pointer; text-decoration: underline; }
.mc-edit-current-photo-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	border-radius: var(--mc-radius);
	border: 2px dashed var(--mc-border);
	color: var(--mc-ink-soft);
	font-size: 1.4rem;
	margin-bottom: 0.75rem;
}

/* ---------------------------------------------------------------------
   Profile photo gallery (profile view) + click-to-enlarge lightbox.
   --------------------------------------------------------------------- */
.mc-photo-gallery { display: flex; flex-wrap: wrap; gap: 1rem; }
.mc-photo-gallery-thumb {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	width: 120px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	font-family: var(--mc-font-body);
}
.mc-photo-gallery-thumb img {
	width: 120px;
	height: 150px;
	object-fit: cover;
	border-radius: var(--mc-radius);
	border: 2px solid var(--mc-border);
	transition: border-color 0.15s ease;
}
.mc-photo-gallery-thumb:hover img,
.mc-photo-gallery-thumb:focus-visible img { border-color: var(--mc-gold); }
.mc-photo-gallery-thumb span { font-size: 0.8rem; color: var(--mc-ink-soft); }

.mc-photo-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(42, 27, 32, 0.82);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 2rem;
}
.mc-photo-lightbox-inner {
	position: relative;
	max-width: min(90vw, 560px);
	text-align: center;
}
.mc-photo-lightbox-viewport {
	max-height: 70vh;
	overflow: auto;
	border-radius: var(--mc-radius);
}
.mc-photo-lightbox-inner img {
	width: 100%;
	max-width: none;
	height: auto;
	display: block;
	margin: 0 auto;
	transition: width 0.15s ease;
}
.mc-photo-lightbox-zoom {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	margin-top: 0.85rem;
}
.mc-photo-lightbox-zoom-btn {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85rem;
	transition: background 0.15s ease;
}
.mc-photo-lightbox-zoom-btn:hover { background: rgba(255, 255, 255, 0.22); }
.mc-photo-lightbox-zoom-btn:disabled { opacity: 0.4; cursor: default; }
.mc-photo-lightbox-zoom-btn:disabled:hover { background: rgba(255, 255, 255, 0.1); }
#mc-photo-lightbox-zoom-level { color: #fff; font-size: 0.82rem; min-width: 3.2em; }
.mc-photo-lightbox-inner p { color: #fff; margin: 0.75rem 0 0; font-size: 0.9rem; }
.mc-photo-lightbox-inner .mc-modal-close {
	position: absolute;
	top: -2.5rem;
	right: -0.5rem;
	background: none;
	border: none;
	color: #fff;
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
}

/* ---------------------------------------------------------------------
   Profile header quick-stats row (Phase 3)
   --------------------------------------------------------------------- */
.mc-quick-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 0.75rem 0 1.1rem;
	font-size: 0.85rem;
	color: var(--mc-ink-soft);
}
.mc-quick-stats span { display: flex; align-items: center; gap: 0.4em; }
.mc-quick-stats i { color: var(--mc-primary); }

/* ---------------------------------------------------------------------
   Dashboard (Phase 5)
   --------------------------------------------------------------------- */
.mc-progress-track { background: var(--mc-bg); border-radius: 20px; height: 10px; overflow: hidden; margin-bottom: 1.5rem; }
.mc-progress-fill { background: var(--mc-primary); height: 100%; border-radius: 20px; transition: width 0.3s ease; }

.mc-completion-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 0.85rem;
}
.mc-completion-card {
	text-align: center;
	border: 1.5px solid var(--mc-border);
	border-radius: 10px;
	padding: 1rem 0.5rem;
	font-size: 0.82rem;
	color: var(--mc-ink-soft);
}
.mc-completion-card i { font-size: 1.2rem; color: var(--mc-gold); display: block; margin-bottom: 0.4rem; }
.mc-completion-card div { font-weight: 600; color: var(--mc-ink); margin-bottom: 0.2rem; }
.mc-completion-card.is-complete { border-color: var(--mc-sage); background: rgba(46, 125, 79, 0.05); }
.mc-completion-card.is-complete i { color: var(--mc-sage); }

.mc-quick-actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1rem;
	margin-top: 1rem;
}
.mc-quick-action-card {
	display: block;
	text-decoration: none;
	border: 1.5px solid var(--mc-border);
	border-radius: 10px;
	padding: 1.25rem 1rem;
	text-align: center;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.mc-quick-action-card:hover { box-shadow: var(--mc-shadow); transform: translateY(-2px); }
.mc-quick-action-card i { font-size: 1.3rem; color: var(--mc-primary); margin-bottom: 0.6rem; display: block; }
.mc-quick-action-card strong { display: block; color: var(--mc-ink); font-size: 0.92rem; margin-bottom: 0.25rem; }
.mc-quick-action-card span { display: block; font-size: 0.78rem; color: var(--mc-ink-soft); }

/* =====================================================================
   PHASE 6 (Task #21) — design-system expansion for the mockup-driven
   rebuild: hero variants, richer plan cards, FAQ accordion, compare
   table, verification rows, similar-profile list, safety text-links.
   ===================================================================== */

/* Centered hero (Premium page — no side tagline, copy is centered). */
.mc-hero-center { justify-content: center; text-align: center; }
.mc-hero-center .mc-hero-text { max-width: 640px; }
.mc-eyebrow {
	display: block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--mc-gold);
	margin: 0 0 0.5rem;
	position: relative;
	z-index: 1;
}

/* Radio-pill group that needs to wrap (registration "profile is for",
   7 options) rather than squeeze evenly into one row like the
   2-3 option groups elsewhere. */
.mc-radio-group-wrap { flex-wrap: wrap; }
.mc-radio-group-wrap .mc-radio-pill { flex: 0 1 auto; min-width: 110px; }

.mc-hint-inline { font-style: normal; font-size: 0.82rem; color: var(--mc-ink-soft); }

.mc-photo-filename { display: block; margin-top: 0.1rem; }

/* ---------------------------------------------------------------------
   Premium plan cards — perk list + "Popular" ribbon
   --------------------------------------------------------------------- */
.mc-package-card { position: relative; text-align: center; }
.mc-package-card.is-popular { border-color: var(--mc-gold); box-shadow: var(--mc-shadow); }
.mc-package-ribbon {
	position: absolute;
	top: -11px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--mc-gold);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.3em 0.9em;
	border-radius: 20px;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba(201, 162, 78, 0.35);
}
.mc-package-perks {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	text-align: left;
	font-size: 0.86rem;
	color: var(--mc-ink-soft);
}
.mc-package-perks li { display: flex; align-items: flex-start; gap: 0.5em; margin-bottom: 0.6em; }
.mc-package-perks li:last-child { margin-bottom: 0; }
.mc-package-perks i { color: var(--mc-sage); margin-top: 0.15em; }

/* Free vs Premium comparison table */
/* What's Included with Premium — single-plan feature checklist (PHASE 16 / Task #36) */
.mc-feature-checklist {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.1rem 1.5rem;
}
.mc-feature-check-item { display: flex; align-items: flex-start; gap: 0.7rem; }
.mc-feature-check-item i { color: var(--mc-sage); font-size: 1.1rem; margin-top: 0.2rem; flex-shrink: 0; }
.mc-feature-check-item strong { display: block; font-size: 0.95rem; color: var(--mc-ink); }
.mc-feature-check-item span { display: block; font-size: 0.84rem; color: var(--mc-ink-soft); margin-top: 0.15rem; }
@media (max-width: 700px) {
	.mc-feature-checklist { grid-template-columns: 1fr; }
}

/* FAQ accordion */
.mc-accordion-item { border-bottom: 1px solid var(--mc-border); }
.mc-accordion-item:last-child { border-bottom: none; }
.mc-accordion-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: none;
	text-align: left;
	font-family: var(--mc-font-body);
	font-weight: 600;
	font-size: 0.98rem;
	color: var(--mc-ink);
	padding: 1em 0.1em;
	cursor: pointer;
}
.mc-accordion-trigger i { color: var(--mc-ink-soft); transition: transform 0.2s ease; font-size: 0.85rem; }
.mc-accordion-item.is-open .mc-accordion-trigger i { transform: rotate(45deg); }
.mc-accordion-panel { display: none; padding: 0 0.1em 1.1em; }
.mc-accordion-item.is-open .mc-accordion-panel { display: block; animation: mc-fade-in 0.2s ease; }
.mc-accordion-panel p { margin: 0; color: var(--mc-ink-soft); font-size: 0.9rem; line-height: 1.55; }

/* ---------------------------------------------------------------------
   Profile page — verification rows, similar-profile list, safety links
   --------------------------------------------------------------------- */
.mc-verify-row { display: flex; align-items: center; gap: 0.6em; font-size: 0.9rem; color: var(--mc-ink); margin-bottom: 0.6em; }
.mc-verify-row:last-child { margin-bottom: 0; }
.mc-verify-yes { color: var(--mc-sage); }
.mc-verify-no { color: var(--mc-ink-soft); opacity: 0.6; }

.mc-similar-profile-row {
	display: flex;
	flex-direction: column;
	padding: 0.65em 0;
	border-bottom: 1px solid var(--mc-border);
	text-decoration: none;
}
.mc-similar-profile-row:last-child { border-bottom: none; padding-bottom: 0; }
.mc-similar-profile-row strong { color: var(--mc-ink); font-size: 0.92rem; }
.mc-similar-profile-row span { color: var(--mc-ink-soft); font-size: 0.8rem; }

.mc-link-btn {
	background: none;
	border: none;
	padding: 0;
	font-family: var(--mc-font-body);
	font-size: 0.85rem;
	color: var(--mc-ink-soft);
	text-decoration: underline;
	cursor: pointer;
}
.mc-link-btn:hover { color: var(--mc-primary); }

.mc-profile-safety-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; margin: 0; color: var(--mc-border); }

/* =====================================================================
   PHASE 7 (Task #22) — Dashboard rebuild: stat tiles, new-matches
   teaser (reuses .mc-directory-grid / member-card.php), activity feed.
   ===================================================================== */

.mc-stat-tile-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	margin-bottom: 1.5rem;
}
@media (max-width: 720px) {
	.mc-stat-tile-row { grid-template-columns: repeat(2, 1fr); }
}
.mc-stat-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	text-decoration: none;
	background: var(--mc-surface);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius-lg);
	padding: 1.25rem 1rem;
	text-align: center;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.mc-stat-tile:hover { box-shadow: var(--mc-shadow); transform: translateY(-2px); }
.mc-stat-tile i { font-size: 1.3rem; color: var(--mc-primary); }
.mc-stat-tile-number { font-family: var(--mc-font-display); font-size: 1.6rem; font-weight: 700; color: var(--mc-ink); }
.mc-stat-tile-label { font-size: 0.78rem; color: var(--mc-ink-soft); }

.mc-activity-feed { display: flex; flex-direction: column; }
.mc-activity-item {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--mc-border);
}
.mc-activity-item:last-child { border-bottom: none; padding-bottom: 0; }
.mc-activity-avatar { position: relative; flex: 0 0 auto; display: block; }
.mc-activity-avatar img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; display: block; }
.mc-activity-avatar i {
	position: absolute;
	bottom: -2px;
	right: -2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--mc-primary);
	color: #fff;
	font-size: 0.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--mc-surface);
}
.mc-activity-body { flex: 1; min-width: 0; }
.mc-activity-body p { margin: 0; font-size: 0.92rem; color: var(--mc-ink); }
.mc-activity-body p a { color: var(--mc-ink); text-decoration: none; }
.mc-activity-body p a:hover { color: var(--mc-primary); }
.mc-activity-body .mc-hint { font-size: 0.78rem; }
.mc-activity-actions { display: flex; gap: 0.5rem; flex: 0 0 auto; }
@media (max-width: 560px) {
	.mc-activity-item { flex-wrap: wrap; }
	.mc-activity-actions { width: 100%; justify-content: flex-end; }
}

/* =====================================================================
   PHASE 8 (Task #23) — Search (plain filter form) + Matches (results)
   pages: quick-filter tab pills, chip/tag style.
   ===================================================================== */
.mc-tab-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-bottom: 1.5rem;
}
.mc-tab-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.55em 1.1em;
	border-radius: 20px;
	border: 1.5px solid var(--mc-border);
	background: var(--mc-surface);
	color: var(--mc-ink-soft);
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.15s ease;
}
.mc-tab-pill:hover { border-color: var(--mc-primary); color: var(--mc-primary); }
.mc-tab-pill.active { background: var(--mc-primary); border-color: var(--mc-primary); color: #fff; }
.mc-tab-pill-count {
	background: rgba(255, 255, 255, 0.3);
	border-radius: 10px;
	padding: 0.1em 0.55em;
	font-size: 0.72rem;
}
.mc-tab-pill:not(.active) .mc-tab-pill-count { background: rgba(122, 31, 61, 0.1); color: var(--mc-primary); }

/* =====================================================================
   PHASE 17 (Task #37) — Edit Profile rebuild: a sticky left section-nav
   that jumps to (and scrollspies) a set of always-visible, stacked
   .mc-panel sections on the right — replacing the old show/hide vertical
   tabs — plus a toggle-switch control for the privacy settings.
   ===================================================================== */
.mc-edit-layout {
	display: flex;
	gap: 2rem;
	align-items: flex-start;
}
.mc-section-nav {
	flex: 0 0 200px;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	position: sticky;
	top: 1.5rem;
}
.mc-section-nav-link {
	display: flex;
	align-items: center;
	gap: 0.6em;
	width: 100%;
	text-align: left;
	padding: 0.65em 0.75em;
	border-left: 2.5px solid transparent;
	border-radius: 6px;
	font-family: var(--mc-font-body);
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--mc-ink-soft);
	text-decoration: none;
	cursor: pointer;
}
.mc-section-nav-link i { width: 16px; text-align: center; }
.mc-section-nav-link:hover { background: var(--mc-bg); color: var(--mc-ink); }
.mc-section-nav-link.active { background: rgba(122, 31, 61, 0.07); border-left-color: var(--mc-primary); color: var(--mc-primary); }
.mc-edit-content { flex: 1; min-width: 0; }
.mc-edit-section {
	margin-bottom: 1.5rem;
	scroll-margin-top: 1.5rem;
}
.mc-edit-section:last-child { margin-bottom: 0; }
@media (max-width: 820px) {
	.mc-edit-layout { flex-direction: column; }
	.mc-section-nav {
		position: static;
		flex-direction: row;
		flex: 0 0 auto;
		width: 100%;
		gap: 0.3rem;
		padding-bottom: 0.75rem;
		border-bottom: 1.5px solid var(--mc-border);
		margin-bottom: 0.5rem;
		overflow-x: auto;
	}
	.mc-section-nav-link { white-space: nowrap; border-left: none; border-bottom: 2.5px solid transparent; }
	.mc-section-nav-link.active { border-bottom-color: var(--mc-primary); }
}

.mc-toggle-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--mc-border);
}
.mc-toggle-row:last-child { border-bottom: none; }
.mc-toggle-row-text strong { display: block; font-size: 0.95rem; color: var(--mc-ink); }
.mc-toggle-row-text span { display: block; font-size: 0.82rem; color: var(--mc-ink-soft); margin-top: 0.15em; }
.mc-toggle-switch { position: relative; flex: 0 0 auto; display: inline-block; width: 42px; height: 24px; }
.mc-toggle-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.mc-toggle-track {
	position: absolute;
	inset: 0;
	background: var(--mc-border);
	border-radius: 14px;
	transition: background 0.2s ease;
	pointer-events: none;
}
.mc-toggle-track::before {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	background: #fff;
	border-radius: 50%;
	transition: left 0.2s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.mc-toggle-switch input:checked ~ .mc-toggle-track { background: var(--mc-primary); }
.mc-toggle-switch input:checked ~ .mc-toggle-track::before { left: 21px; }
.mc-toggle-switch input:focus-visible ~ .mc-toggle-track { box-shadow: 0 0 0 3px rgba(122, 31, 61, 0.25); }

/* "Blur my photos" privacy toggle (Edit Profile > Contact & Privacy) —
   applied to a member's own photo wherever it appears to anyone but
   themselves: member cards, the profile page's main photo and gallery. */
.mc-photo-blurred { filter: blur(14px); }

/* =====================================================================
   PHASE 10 (Task #26) — Who Viewed Me: Premium-gated teaser cards for
   non-Premium members (blurred photo, obscured name, locked action).
   ===================================================================== */
.mc-teaser-card .mc-card-photo { position: relative; }
.mc-teaser-lock {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 1.5rem;
	background: rgba(42, 27, 32, 0.15);
}
.mc-teaser-blur-text {
	display: inline-block;
	filter: blur(4px);
	user-select: none;
	color: var(--mc-ink-soft);
}

/* =====================================================================
   PHASE 11 (Task #26) — Login / Forgot Password: narrow centered auth
   cards, reusing .mc-hero-center + .mc-panel rather than new structure.
   ===================================================================== */
.mc-auth-card { max-width: 440px; margin: 0 auto; }
.mc-icon-circle-lg {
	width: 56px;
	height: 56px;
	font-size: 1.4rem;
	margin: 0 auto 1.25rem;
}
.mc-auth-links {
	margin-top: 1.5rem;
	text-align: center;
	font-size: 0.92rem;
	color: var(--mc-ink-soft);
}
.mc-auth-links a { color: var(--mc-primary); font-weight: 600; text-decoration: none; }
.mc-auth-links a:hover { text-decoration: underline; }
.mc-auth-links p { margin: 0.5rem 0 0; }
.mc-auth-divider { border: none; border-top: 1px solid var(--mc-border); margin: 1.5rem 0; }

/* =====================================================================
   PHASE 14 (Task #33) — Login / Register / Forgot Password: two-panel
   layout matching the mockups (colored trust-building aside + white
   form panel), replacing the old single centered card. mc-auth-split
   is the shared shell; mc-auth-split-wide + mc-auth-form-panel-wide are
   added on Register, whose form is wider (the step wizard) than the
   single-field Login/Forgot Password cards.
   ===================================================================== */
.mc-page-auth { padding-top: 0; }
.mc-auth-split {
	display: grid;
	grid-template-columns: minmax(280px, 0.85fr) 1fr;
	min-height: 560px;
	background: var(--mc-surface);
	border-radius: var(--mc-radius-lg);
	box-shadow: var(--mc-shadow);
	overflow: hidden;
	margin: 1.5rem 0;
}
.mc-auth-split-wide { grid-template-columns: minmax(280px, 0.6fr) 1fr; }

.mc-auth-aside {
	background: linear-gradient(160deg, var(--mc-primary) 0%, var(--mc-primary-dark) 100%);
	color: #fff;
	padding: 3rem 2.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.mc-auth-eyebrow {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--mc-gold);
	margin-bottom: 0.75rem;
}
.mc-auth-aside h2 {
	font-family: var(--mc-font-display);
	font-size: 2rem;
	line-height: 1.15;
	color: #fff;
	margin: 0 0 1rem;
}
.mc-auth-aside-lead { opacity: 0.9; margin: 0 0 2rem; font-size: 1rem; line-height: 1.5; }
.mc-auth-trust-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.15rem; }
.mc-auth-trust-list li { display: flex; align-items: flex-start; gap: 0.85rem; }
.mc-auth-trust-icon {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.95rem;
}
.mc-auth-trust-list strong { display: block; font-size: 0.95rem; }
.mc-auth-trust-list span { display: block; font-size: 0.84rem; opacity: 0.85; margin-top: 0.1rem; }
.mc-auth-aside-quote {
	color: #fff;
	border-top: 1px dashed rgba(255, 255, 255, 0.3);
	opacity: 0.9;
}

.mc-auth-form-panel {
	padding: 2.75rem 2.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow-y: auto;
}
.mc-auth-form-panel-wide { justify-content: flex-start; padding: 2.5rem; }
.mc-auth-form-panel .mc-auth-card { max-width: 420px; margin: 0; box-shadow: none; padding: 0; width: 100%; }
.mc-auth-form-title { font-size: 1.6rem; margin: 0 0 0.35rem; text-align: center; }
.mc-auth-form-sub { color: var(--mc-ink-soft); text-align: center; margin: 0 0 1.5rem; font-size: 0.92rem; }
.mc-auth-form-panel-wide .mc-wizard { max-width: 640px; margin: 0 auto; width: 100%; }
.mc-auth-form-panel-wide .mc-wizard-steps { margin-bottom: 1.5rem; }

@media (max-width: 900px) {
	.mc-auth-split, .mc-auth-split-wide {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.mc-auth-aside { padding: 2.25rem; }
	.mc-auth-form-panel, .mc-auth-form-panel-wide { padding: 2rem 1.5rem; }
}

/* =====================================================================
   PHASE 12 (Task #26, restyled Task #35) — Wallet: transactions table
   with Date/Description/Method/Credits/Status columns, matching the
   mockup (every logged row is a settled, successful transaction, so
   Status is always a "Completed" pill — failed attempts are never
   written to the table in the first place).
   ===================================================================== */
.mc-tx-table { width: 100%; border-collapse: collapse; }
.mc-tx-table th {
	text-align: left;
	padding: 0.6rem 0.75rem;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--mc-ink-soft);
	border-bottom: 1.5px solid var(--mc-border);
}
.mc-tx-table td { padding: 0.75rem; border-bottom: 1px solid var(--mc-border-soft); font-size: 0.92rem; }
.mc-tx-table tr:last-child td { border-bottom: none; }
.mc-tx-table .mc-tx-positive { color: var(--mc-sage-ink); font-weight: 600; }
.mc-tx-table .mc-tx-negative { color: var(--mc-primary); font-weight: 600; }
.mc-badge-tx-completed { background: var(--mc-sage-bg); color: var(--mc-sage-ink); }

/* =====================================================================
   PHASE 13 (Task #30) — persistent top navigation bar, shown on every
   front-end plugin page in place of the old per-page left sidebar nav.
   Mirrors the approved mockups' header: logo/wordmark, five primary
   links, a Wallet balance pill, and an account-menu dropdown.
   ===================================================================== */
.mc-topnav {
	position: relative;
	z-index: 30;
	background: var(--mc-surface);
	border-bottom: 1px solid var(--mc-border);
	margin: 0 0 1.5rem;
}
.mc-topnav-inner {
	max-width: 1600px;
	margin: 0 auto;
	padding: 0.9rem 1.75rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.mc-topnav-logo {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	text-decoration: none;
	color: var(--mc-ink);
	flex: 0 0 auto;
}
.mc-topnav-logo-icon {
	width: 40px;
	height: 40px;
	border-radius: var(--mc-radius);
	background: var(--mc-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	flex: none;
}
.mc-topnav-wordmark-group { display: flex; flex-direction: column; line-height: 1.1; }
.mc-topnav-wordmark { font-family: var(--mc-font-display); font-size: 1.45rem; font-weight: 700; color: var(--mc-ink); }
.mc-topnav-wordmark-sub { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mc-ink-soft); }

.mc-topnav-links { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.mc-topnav-link {
	padding: 0.6em 0.85em;
	border-radius: var(--mc-radius);
	text-decoration: none;
	color: var(--mc-ink);
	font-weight: 500;
	font-size: 0.95rem;
}
.mc-topnav-link:hover { background: var(--mc-bg); }
.mc-topnav-link.active { color: var(--mc-primary); background: rgba(122, 31, 61, 0.08); font-weight: 700; }

.mc-topnav-right { display: flex; align-items: center; gap: 0.75rem; flex: 0 0 auto; }
.mc-wallet-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	min-height: 44px;
	box-sizing: border-box;
	padding: 0 0.9em;
	border-radius: var(--mc-radius-pill);
	border: 1px solid var(--mc-border);
	color: var(--mc-ink);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9rem;
}
.mc-wallet-pill:hover { border-color: var(--mc-primary); color: var(--mc-primary); }
.mc-wallet-pill i { color: var(--mc-primary); }

/* Shared show/hide for every top-nav dropdown (account menu + Support) —
   each wrapper also carries its own specific class for its own sizing/
   placement rules below. */
.mc-dropdown-wrap { position: relative; }
.mc-dropdown-wrap.is-open .mc-dropdown-menu { display: flex; }

.mc-support-menu-wrap { position: relative; }
.mc-support-btn {
	width: 44px;
	height: 44px;
	border-radius: var(--mc-radius-pill);
	border: 1px solid var(--mc-border);
	background: transparent;
	color: var(--mc-ink-soft);
	font-size: 1rem;
	cursor: pointer;
}
.mc-support-btn:hover { background: var(--mc-bg); color: var(--mc-primary); }
.mc-support-menu {
	display: none;
	position: absolute;
	right: 0;
	top: 54px;
	width: 220px;
	background: var(--mc-surface);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius-lg);
	box-shadow: 0 18px 40px rgba(42, 27, 32, 0.14);
	padding: 0.5rem;
	flex-direction: column;
	z-index: 40;
}
.mc-support-menu-item {
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.7em 0.85em;
	border-radius: var(--mc-radius);
	text-decoration: none;
	color: var(--mc-ink);
	font-weight: 600;
	font-size: 0.9rem;
}
.mc-support-menu-item:hover { background: var(--mc-bg); }
.mc-support-menu-item i { color: var(--mc-primary); width: 1.1em; text-align: center; }

.mc-avatar-menu-wrap { position: relative; }
.mc-avatar-btn {
	width: 44px;
	height: 44px;
	border-radius: var(--mc-radius-pill);
	border: 1px solid var(--mc-border);
	background: rgba(122, 31, 61, 0.08);
	color: var(--mc-primary);
	font-weight: 700;
	font-size: 0.9rem;
	cursor: pointer;
}
.mc-avatar-btn:hover { background: rgba(122, 31, 61, 0.14); }
.mc-avatar-menu {
	display: none;
	position: absolute;
	right: 0;
	top: 54px;
	width: 240px;
	background: var(--mc-surface);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius-lg);
	box-shadow: 0 18px 40px rgba(42, 27, 32, 0.14);
	padding: 0.5rem;
	flex-direction: column;
	z-index: 40;
}
.mc-avatar-menu-wrap.is-open .mc-avatar-menu { display: flex; }
.mc-avatar-menu-item {
	padding: 0.7em 0.85em;
	border-radius: var(--mc-radius);
	text-decoration: none;
	color: var(--mc-ink);
	font-weight: 600;
	font-size: 0.9rem;
}
.mc-avatar-menu-item:hover { background: var(--mc-bg); }
.mc-avatar-menu-item.active { color: var(--mc-primary); background: rgba(122, 31, 61, 0.08); }
.mc-avatar-menu-logout { color: var(--mc-ink-soft); }

.mc-topnav-guest-cta { margin: 0; font-size: 0.92rem; color: var(--mc-ink-body); }
.mc-topnav-guest-cta a { color: var(--mc-primary); font-weight: 700; text-decoration: none; }
.mc-topnav-guest-cta a:hover { text-decoration: underline; }
.mc-topnav-guest-cta span { margin: 0 0.4em; color: var(--mc-border); }

@media (max-width: 900px) {
	.mc-topnav-links { order: 3; width: 100%; justify-content: center; border-top: 1px solid var(--mc-border-soft); padding-top: 0.6rem; }
}

/* =====================================================================
   PHASE 18 (Task #53) — Opt-in full-width layout (Settings → "Request
   full-width layout"). Our own pages auto-create with no specific page
   template, so they render inside whatever container the active theme
   wraps around ordinary page content — often a boxed, sidebar-width
   column. We can't know every theme's class names, so this widens the
   handful most WordPress themes actually use for the main content
   column specifically (never header/footer wrappers), and only on
   pages where body_class has added "mc-full-width" (admin opted in AND
   this is one of our own pages — see MC_Pages::add_full_width_body_class()).
   If a theme's Page Attributes offers a Full Width / Canvas / No
   Sidebar template, assigning that to these pages is the cleaner fix.
   ===================================================================== */
body.mc-full-width .site-content,
body.mc-full-width .content-area,
body.mc-full-width .entry-content,
body.mc-full-width #primary {
	max-width: none !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}