/*
 * SS Matrimony – front-end styles.
 * One design system for every page: tokens → base → buttons → forms → components → pages.
 * Theme styles are neutralised inside .msahu-wrap (hence the !important on key properties).
 * Re-skin by overriding the --msahu-* variables (the primary colour comes from Sahu Matrimony → Settings).
 */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
	--msahu-primary: #b9377a;
	--msahu-primary-dark: color-mix(in srgb, var(--msahu-primary) 82%, #000);
	--msahu-primary-soft: color-mix(in srgb, var(--msahu-primary) 8%, #fff);
	--msahu-primary-tint: color-mix(in srgb, var(--msahu-primary) 22%, #fff);
	--msahu-primary-ring: color-mix(in srgb, var(--msahu-primary) 18%, transparent);
	--msahu-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--msahu-text: #24242c;
	--msahu-muted: #6b6b78;
	--msahu-faint: #8a8a96;
	--msahu-border: #ebe6ee;
	--msahu-input-border: #dcd5e1;
	--msahu-bg: #faf7fb;
	--msahu-card: #fff;
	--msahu-success: #1f8a4c;
	--msahu-warning: #b7791f;
	--msahu-danger: #c53030;
	--msahu-radius: 16px;
	--msahu-radius-sm: 10px;
	--msahu-shadow: 0 2px 12px rgba(40, 20, 45, .06);
	--msahu-shadow-hover: 0 10px 28px rgba(40, 20, 45, .12);
}

/* 2. Base ------------------------------------------------------------------ */
.msahu-wrap { max-width: 1180px; margin: 0 auto; font-family: var(--msahu-font) !important; font-size: 15px; line-height: 1.55; color: var(--msahu-text); box-sizing: border-box; }
.msahu-wrap *, .msahu-wrap *::before, .msahu-wrap *::after { box-sizing: border-box; }
/* Preferred width = the screen (but never wider than the space or 1180px): page builders that wrap items
   in a flex column (Elementor on phones uses flex-wrap: wrap) measure an item's height at its preferred
   width. Without this the plugin's content was measured too narrow – and so too short – and the
   footer covered the last profile cards. */
.msahu-wrap { width: 100vw; max-width: min(100%, 1180px); }
.msahu-wrap img { max-width: 100%; height: auto; }
.msahu-wrap a { color: var(--msahu-primary); text-decoration: none !important; box-shadow: none !important; }
.msahu-wrap p a:hover, .msahu-wrap .msahu-notice a:hover, .msahu-wrap .msahu-auth-links a:hover { text-decoration: underline !important; }
.msahu-wrap h1, .msahu-wrap h2, .msahu-wrap h3, .msahu-wrap h4 { font-family: var(--msahu-font) !important; font-style: normal !important; color: var(--msahu-text); text-transform: none !important; letter-spacing: normal !important; line-height: 1.3 !important; }
/* Themes / page builders style labels, legends and checkbox text with their own (often serif) font. */
.msahu-wrap :is(label, legend, small, strong, span, li, button) { font-family: var(--msahu-font) !important; font-style: normal; }
.msahu-wrap p { margin: 0 0 12px; }
.msahu-muted { color: var(--msahu-muted); }
.msahu-small { font-size: 13px; }
.msahu-accent { color: var(--msahu-primary); }
.msahu-text-center { text-align: center; }
.msahu-sr-only, .msahu-hp { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; opacity: 0 !important; }

/* 3. Layout helpers -------------------------------------------------------- */
.msahu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.msahu-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.msahu-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.msahu-btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.msahu-section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 16px; }
.msahu-section-head h3, .msahu-section-head .msahu-title { margin: 0 !important; }
.msahu-page-head { margin-bottom: 20px; }
.msahu-page-head .msahu-title { margin-bottom: 4px !important; }
.msahu-page-head p { margin: 0; }

/* 4. Components ------------------------------------------------------------ */
.msahu-card { background: var(--msahu-card); border: 1px solid var(--msahu-border); border-radius: var(--msahu-radius); box-shadow: var(--msahu-shadow); padding: 24px; margin-bottom: 20px; }
.msahu-wrap .msahu-card h3 { margin: 0 0 12px !important; font-size: 17px !important; font-weight: 600 !important; }
.msahu-wrap .msahu-title { margin: 0 0 16px !important; padding: 0 !important; font-size: 24px !important; font-weight: 700 !important; color: var(--msahu-text) !important; }

.msahu-notice { padding: 12px 16px; border-radius: var(--msahu-radius-sm); margin: 0 0 18px; border: 1px solid transparent; border-left-width: 4px; background: #f6f6f8; font-size: 14px; }
.msahu-notice ul { margin: 0; padding-left: 18px; }
.msahu-success { border-color: #bfe6cd; border-left-color: var(--msahu-success); background: #eef9f2; }
.msahu-error { border-color: #f4c9c9; border-left-color: var(--msahu-danger); background: #fdf0f0; }
.msahu-warning { border-color: #f1ddb3; border-left-color: var(--msahu-warning); background: #fdf7ea; }
.msahu-info { border-color: var(--msahu-primary-tint); border-left-color: var(--msahu-primary); background: var(--msahu-primary-soft); }
.msahu-no-email p { margin: 0 0 10px; line-height: 1.55; }
.msahu-no-email p:last-child { margin-bottom: 0; }
.msahu-membership-notice { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.msahu-membership-notice > span { flex: 1 1 260px; }

/* Admin notices: "Important" banner on every dashboard tab, and the list in the Notices tab. */
.msahu-admin-notice-banner { display: flex; align-items: flex-start; gap: 12px; }
.msahu-admin-notice-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.msahu-wrap .msahu-admin-notice-text p { margin: 4px 0 0 !important; }
.msahu-wrap .msahu-admin-notice-close { flex-shrink: 0; width: 30px; height: 30px; margin: -4px -6px 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50%; background: transparent !important; color: var(--msahu-muted) !important; font-size: 22px !important; line-height: 1 !important; cursor: pointer; }
.msahu-wrap .msahu-admin-notice-close:hover { background: rgba(0, 0, 0, .06) !important; color: var(--msahu-text) !important; }
.msahu-notice-list { display: flex; flex-direction: column; gap: 14px; }
.msahu-wrap .msahu-notice-item { margin: 0; padding: 18px 20px; border-left: 4px solid var(--msahu-primary); }
.msahu-notice-item.msahu-notice-success { border-left-color: var(--msahu-success); }
.msahu-notice-item.msahu-notice-warning { border-left-color: var(--msahu-warning); }
.msahu-notice-item.msahu-notice-important { border-left-color: var(--msahu-danger); }
.msahu-notice-item.is-unread { background: var(--msahu-primary-soft); }
.msahu-notice-item-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.msahu-wrap .msahu-notice-item-head h3 { margin: 0 !important; font-size: 17px !important; overflow-wrap: anywhere; }
.msahu-badge.msahu-badge-new { background: var(--msahu-primary); color: #fff; }
.msahu-notice-item-body { font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.msahu-wrap .msahu-notice-item-body p { margin: 0 0 8px !important; }
.msahu-notice-item-date { margin-top: 8px; color: var(--msahu-muted); font-size: 13px; }
.msahu-wrap .msahu-email-pending p { margin: 0 0 10px !important; }
.msahu-wrap .msahu-username-line { margin: 0 0 16px !important; padding: 10px 14px; border-radius: 10px; background: #f6f6f8; font-size: 14px; }
.msahu-email-pending form { margin: 0; }
.msahu-cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.msahu-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; background: #efedf1; color: #55556a; line-height: 1.4; }
.msahu-badge-premium { background: linear-gradient(135deg, #f6c453, #e0982e); color: #4a2c00; }
.msahu-badge-verified, .msahu-badge-accepted, .msahu-badge-approved { background: #e3f6ea; color: var(--msahu-success); }
.msahu-badge-pending { background: #fdf2dc; color: var(--msahu-warning); }
.msahu-badge-declined, .msahu-badge-rejected, .msahu-badge-suspended { background: #fde6e6; color: var(--msahu-danger); }
.msahu-code { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .03em; color: var(--msahu-muted); background: #f2eff4; border-radius: 6px; padding: 2px 8px; }
.msahu-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--msahu-primary); color: #fff; font-size: 11px; font-weight: 700; }
.msahu-card-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; background: var(--msahu-primary-soft); color: var(--msahu-primary); }
.msahu-empty { padding: 44px 20px; text-align: center; color: var(--msahu-muted); background: var(--msahu-card); border: 1px dashed var(--msahu-input-border); border-radius: var(--msahu-radius); }
.msahu-progress { height: 10px; background: #f0ecf2; border-radius: 99px; overflow: hidden; margin: 4px 0 12px; }
.msahu-progress span { display: block; height: 100%; background: var(--msahu-primary); border-radius: 99px; }

/* 5. Buttons --------------------------------------------------------------- */
.msahu-wrap .msahu-btn, .msahu-wrap .msahu-login-form input[type=submit] {
	display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
	min-height: 46px; height: auto !important; margin: 0 !important; padding: 0 24px !important;
	border: 1.5px solid transparent !important; border-radius: 999px !important; box-shadow: none !important;
	font-family: var(--msahu-font) !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.2 !important;
	letter-spacing: normal !important; text-transform: none !important; text-decoration: none !important; white-space: nowrap;
	cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, opacity .15s;
}
.msahu-wrap .msahu-btn-primary, .msahu-wrap .msahu-login-form input[type=submit] { background: var(--msahu-primary) !important; border-color: var(--msahu-primary) !important; color: #fff !important; }
.msahu-wrap .msahu-btn-primary:hover, .msahu-wrap .msahu-btn-primary:focus-visible, .msahu-wrap .msahu-login-form input[type=submit]:hover { background: var(--msahu-primary-dark) !important; border-color: var(--msahu-primary-dark) !important; color: #fff !important; box-shadow: 0 6px 16px var(--msahu-primary-ring) !important; }
.msahu-wrap .msahu-btn-outline { background: #fff !important; border-color: var(--msahu-primary) !important; color: var(--msahu-primary) !important; }
.msahu-wrap .msahu-btn-outline:hover { background: var(--msahu-primary-soft) !important; }
.msahu-wrap .msahu-btn-ghost { background: #f1eef3 !important; border-color: #f1eef3 !important; color: #4d4d5c !important; }
.msahu-wrap .msahu-btn-ghost:hover { background: #e6e1ea !important; border-color: #e6e1ea !important; }
.msahu-wrap .msahu-btn-light { background: #fff !important; border-color: #fff !important; color: var(--msahu-primary) !important; }
.msahu-wrap .msahu-btn-light:hover { background: var(--msahu-primary-soft) !important; }
.msahu-wrap .msahu-btn-danger { background: var(--msahu-danger) !important; border-color: var(--msahu-danger) !important; color: #fff !important; }
.msahu-wrap .msahu-btn-link { background: none !important; border-color: transparent !important; color: var(--msahu-muted) !important; padding: 0 12px !important; }
.msahu-wrap .msahu-btn-sm { min-height: 36px; padding: 0 16px !important; font-size: 13px !important; }
.msahu-wrap .msahu-btn-lg { min-height: 52px; padding: 0 32px !important; font-size: 16px !important; }
.msahu-wrap .msahu-btn-block { display: flex !important; width: 100%; }
.msahu-wrap .msahu-btn:disabled, .msahu-wrap .msahu-btn.is-done { opacity: .5; cursor: not-allowed; box-shadow: none !important; }
.msahu-wrap .msahu-btn.is-loading { opacity: .6; pointer-events: none; }
.msahu-wrap .msahu-btn-icon { width: 46px; min-width: 46px; padding: 0 !important; background: #fff !important; border-color: var(--msahu-input-border) !important; color: #b9b3bf !important; font-size: 18px !important; }
.msahu-wrap .msahu-btn-icon:hover, .msahu-wrap .msahu-btn-icon.is-active { color: var(--msahu-primary) !important; border-color: var(--msahu-primary) !important; background: var(--msahu-primary-soft) !important; }

/* 6. Forms ----------------------------------------------------------------- */
.msahu-form fieldset.msahu-section { border: 0; padding: 0; margin: 0 0 24px; min-width: 0; }
.msahu-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.msahu-field-full { grid-column: 1 / -1; }
.msahu-wrap .msahu-field label, .msahu-wrap .msahu-login-form label { display: block; margin: 0 !important; font-size: 14px !important; font-weight: 600 !important; color: #2e2f4f !important; text-transform: none !important; letter-spacing: normal !important; }
.msahu-req { color: var(--msahu-danger); margin-left: 2px; }
.msahu-help { display: block; margin: 0; color: var(--msahu-muted); font-size: 13px; }
.msahu-wrap :is(input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], input[type=number], input[type=search], select, textarea) {
	width: 100% !important; max-width: 100% !important; height: 48px !important; margin: 0 !important; padding: 0 16px !important;
	border: 1.5px solid var(--msahu-input-border) !important; border-radius: var(--msahu-radius-sm) !important; background-color: #fff !important; box-shadow: none !important;
	font-family: var(--msahu-font) !important; font-size: 15px !important; line-height: 1.4 !important; color: var(--msahu-text) !important; transition: border-color .15s, box-shadow .15s;
}
.msahu-wrap textarea { height: auto !important; min-height: 96px; padding: 12px 16px !important; resize: vertical; }
.msahu-wrap select { padding-right: 36px !important; }
.msahu-wrap :is(input, select, textarea)::placeholder { color: #9d9aa6 !important; opacity: 1; }
.msahu-wrap :is(input, select, textarea):focus { outline: none !important; border-color: var(--msahu-primary) !important; box-shadow: 0 0 0 4px var(--msahu-primary-ring) !important; }
.msahu-wrap :is(input, select):disabled { background-color: #f4f2f6 !important; color: var(--msahu-muted) !important; }
.msahu-wrap .is-invalid { border-color: var(--msahu-danger) !important; background-color: #fff6f6 !important; }
.msahu-wrap input[type=file] { font-family: var(--msahu-font); font-size: 14px; }
.msahu-wrap input[type=checkbox], .msahu-wrap input[type=radio] { width: 18px !important; height: 18px !important; margin: 0 !important; accent-color: var(--msahu-primary); flex-shrink: 0; }
.msahu-wrap .msahu-check { display: flex !important; align-items: flex-start; gap: 10px; margin: 18px 0 !important; font-size: 14px !important; font-weight: 400 !important; color: var(--msahu-text) !important; cursor: pointer; }
.msahu-check input { margin-top: 2px !important; }

/* Round photo picker (registration + edit profile) */
.msahu-wrap .msahu-avatar-pick { position: relative !important; display: block !important; flex-shrink: 0; width: 130px !important; height: 130px !important; margin: 0 !important; padding: 0 !important; cursor: pointer; }
.msahu-wrap .msahu-avatar-pick-center { margin: 0 auto 8px !important; }
.msahu-wrap .msahu-avatar-pick img { display: block !important; width: 130px !important; height: 130px !important; max-width: none !important; margin: 0 !important; object-fit: cover !important; border-radius: 50% !important; border: 4px solid var(--msahu-primary) !important; background: #fdeee4; }
.msahu-avatar-pick:hover img, .msahu-avatar-pick:focus-within img { box-shadow: 0 0 0 5px var(--msahu-primary-ring); }
.msahu-avatar-pick-camera { position: absolute; right: 2px; bottom: 4px; width: 38px; height: 38px; border-radius: 50%; background: var(--msahu-primary); color: #fff; display: flex; align-items: center; justify-content: center; border: 3px solid #fff; }

/* 7. Auth: registration + login ------------------------------------------- */
.msahu-wrap.msahu-auth { padding: 10px 0 30px; }
.msahu-auth-card { max-width: 460px; margin: 10px auto; padding: 32px; }
.msahu-reg-card { max-width: 760px; }
.msahu-auth-head { text-align: center; margin-bottom: 24px; }
.msahu-wrap .msahu-auth-title { margin: 0 0 6px !important; padding: 0 !important; font-size: 28px !important; font-weight: 700 !important; color: var(--msahu-text) !important; }
.msahu-auth-head p { margin: 0; }
.msahu-reg-card .msahu-help.msahu-text-center { margin-bottom: 22px; }
.msahu-auth-links { margin: 18px 0 0 !important; text-align: center; font-size: 14px; color: var(--msahu-muted); }
.msahu-wrap .msahu-auth-links a, .msahu-wrap .msahu-check a { color: var(--msahu-primary) !important; font-weight: 600; }
.msahu-wrap .msahu-check a { text-decoration: underline !important; text-underline-offset: 2px; }

/* Registration: side panel + form card */
.msahu-reg-layout { max-width: 760px; margin: 10px auto; }
.msahu-reg-layout.has-panel { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); max-width: 1080px; border-radius: var(--msahu-radius); box-shadow: var(--msahu-shadow); overflow: hidden; background: var(--msahu-card); border: 1px solid var(--msahu-border); }
.msahu-reg-layout.has-panel :is(.msahu-reg-card, .msahu-login-card) { max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; padding: 36px 40px; }
.msahu-reg-panel { position: relative; padding: 40px 32px; color: #fff; background: linear-gradient(160deg, var(--msahu-primary) 0%, var(--msahu-primary-dark) 100%); overflow: hidden; }
.msahu-reg-panel::after { content: ''; position: absolute; right: -90px; bottom: -90px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255, 255, 255, .08); pointer-events: none; }
.msahu-wrap .msahu-reg-panel-kicker { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.msahu-wrap .msahu-reg-panel-title { margin: 0 0 24px !important; font-size: 26px !important; font-weight: 700 !important; color: #fff !important; }
.msahu-wrap .msahu-reg-points { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.msahu-wrap .msahu-reg-points li { display: flex; gap: 12px; align-items: flex-start; margin: 0; font-size: 14.5px; line-height: 1.5; color: #fff; }
.msahu-reg-points svg { flex-shrink: 0; width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.msahu-reg-steps { position: relative; z-index: 1; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .22); }
.msahu-wrap .msahu-reg-steps-title { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.msahu-wrap .msahu-reg-steps ol { list-style: none; counter-reset: msahu-step; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.msahu-wrap .msahu-reg-steps li { counter-increment: msahu-step; display: flex; align-items: center; gap: 12px; margin: 0; font-size: 14px; color: #fff; }
.msahu-reg-steps li::before { content: counter(msahu-step); flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--msahu-primary); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.msahu-reg-card .msahu-auth-head { margin-bottom: 18px; }
.msahu-wrap .msahu-reg-card .msahu-avatar-pick, .msahu-wrap .msahu-reg-card .msahu-avatar-pick img { width: 110px !important; height: 110px !important; }
.msahu-reg-card .msahu-avatar-pick-camera { width: 34px; height: 34px; right: 0; bottom: 2px; }
.msahu-form fieldset.msahu-reg-section { margin: 0 0 22px; }
.msahu-wrap .msahu-reg-legend { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 16px !important; padding: 0 0 10px !important; border-bottom: 1px solid var(--msahu-border); font-size: 16px !important; font-weight: 600 !important; color: var(--msahu-text) !important; }
.msahu-reg-legend span { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--msahu-primary-soft); color: var(--msahu-primary); font-size: 13px; font-weight: 700; }
.msahu-reg-card .msahu-btn-lg { margin-top: 4px !important; }
.msahu-reg-noemail { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 14px 16px; border-radius: var(--msahu-radius-sm); background: var(--msahu-bg); border: 1px dashed var(--msahu-input-border); font-size: 13.5px; color: var(--msahu-muted); }
.msahu-wrap .msahu-reg-noemail p { flex: 1; margin: 0; line-height: 1.5; }
.msahu-reg-noemail strong { color: var(--msahu-text); }

/* Login: same panel, narrower card */
.msahu-login-layout { max-width: 460px; }
.msahu-login-layout.has-panel { max-width: 900px; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
.msahu-login-layout.has-panel .msahu-login-card { display: flex; flex-direction: column; justify-content: center; padding: 40px 44px; }
.msahu-wrap .msahu-login-form .msahu-login-forgot { margin: -8px 0 14px !important; text-align: right; font-size: 13.5px; }
.msahu-wrap .msahu-login-forgot a { color: var(--msahu-primary) !important; font-weight: 600; }
.msahu-login-form [data-msahu-pass-for]:not(.is-placed) { display: none; } /* Until the script moves it into the password box. */
.msahu-login-new { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--msahu-border); font-size: 14px; color: var(--msahu-muted); }
.msahu-wrap .msahu-login-noemail { margin: 16px 0 0; text-align: center; font-size: 13px; line-height: 1.5; color: var(--msahu-muted); }
.msahu-wrap .msahu-login-noemail a { color: var(--msahu-primary) !important; font-weight: 600; }

/* Profile updates (dashboard) + "Updated" tag */
.msahu-badge-updated { background: #e6f0fb; color: #1d5fa8; }
.msahu-wrap .msahu-updates-card h3 { display: flex; align-items: center; gap: 8px; }
.msahu-updates-card h3 svg { color: var(--msahu-primary); }
.msahu-updates-list { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.msahu-update-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--msahu-border); border-radius: var(--msahu-radius-sm); background: var(--msahu-bg); }
.msahu-update-row .msahu-avatar-sm { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.msahu-update-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.msahu-update-actions { display: flex; gap: 6px; flex-shrink: 0; }
.msahu-update-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* Shortlist: one line per member (like Interests) */
.msahu-shortlist-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.msahu-wrap .msahu-shortlist-row .msahu-list-actions .msahu-btn { min-height: 36px; padding: 0 16px !important; font-size: 13px !important; }
.msahu-wrap .msahu-shortlist-remove { color: var(--msahu-danger) !important; }
@media (max-width: 640px) {
	.msahu-shortlist-row .msahu-list-actions { flex-wrap: nowrap; gap: 6px; }
	.msahu-wrap .msahu-shortlist-row .msahu-list-actions .msahu-btn { flex: 1 1 auto; padding: 0 8px !important; font-size: 12.5px !important; white-space: nowrap; }
}
/* Chat header: the name in the brand colour, not the theme's link colour */
.msahu-wrap .msahu-chat-head > a, .msahu-wrap .msahu-chat-head > a strong { color: var(--msahu-primary) !important; font-weight: 700; }
@media (max-width: 640px) {
	.msahu-update-row { flex-wrap: wrap; }
	.msahu-update-actions { width: 100%; }
	.msahu-update-actions .msahu-btn { flex: 1; }
}

/* Photo gallery: Edit Profile → My photos */
.msahu-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 14px 0 18px; }
@media (max-width: 640px) {
	.msahu-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.msahu-wrap .msahu-pf-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
}
.msahu-gallery-item { display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid var(--msahu-border); border-radius: var(--msahu-radius-sm); background: #fff; }
.msahu-gallery-thumb { aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #f2eff4; }
.msahu-wrap .msahu-gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.msahu-gallery-item.is-rejected .msahu-gallery-thumb img { opacity: .45; filter: grayscale(1); }
.msahu-wrap .msahu-gallery-status { align-self: flex-start; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.is-pending .msahu-gallery-status { background: #fdf2dc; color: var(--msahu-warning); }
.is-approved .msahu-gallery-status { background: #e3f6ea; color: var(--msahu-success); }
.is-rejected .msahu-gallery-status { background: #fde6e6; color: var(--msahu-danger); }
.msahu-gallery-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.msahu-wrap .msahu-gallery-reason { display: block; margin: -2px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--msahu-danger); }
.msahu-gallery-actions form { margin: 0; }
.msahu-wrap .msahu-gallery-actions .msahu-btn-sm { min-height: 32px; padding: 0 12px !important; font-size: 12.5px !important; }
.msahu-gallery-upload { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.msahu-wrap .msahu-dropzone { position: relative; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 150px; margin: 0 !important; padding: 22px 16px !important; text-align: center; border: 2px dashed var(--msahu-input-border); border-radius: var(--msahu-radius); background: var(--msahu-bg); cursor: pointer; transition: border-color .15s, background-color .15s; }
.msahu-dropzone:hover, .msahu-dropzone:focus-within, .msahu-dropzone.is-over { border-color: var(--msahu-primary); background: var(--msahu-primary-soft); }
.msahu-dropzone input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.msahu-dropzone-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 6px; border-radius: 50%; background: var(--msahu-primary-tint); color: var(--msahu-primary); }
.msahu-wrap .msahu-dropzone strong { font-size: 15px; color: var(--msahu-text); }
.msahu-dropzone-notes { width: 100%; }
.msahu-dropzone-notes .msahu-notice { margin: 0; }
.msahu-dropzone-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; width: 100%; }
.msahu-dropzone-preview:empty { display: none; }
.msahu-dropzone-item { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #f2eff4; }
.msahu-wrap .msahu-dropzone-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.msahu-wrap .msahu-dropzone-remove { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; margin: 0 !important; padding: 0 !important; display: flex; align-items: center; justify-content: center; border: 0 !important; border-radius: 50%; background: rgba(20, 16, 26, .7) !important; color: #fff !important; font-size: 18px !important; line-height: 1 !important; cursor: pointer; }
@media (hover: none) { .msahu-dropzone-drag { display: none; } } /* Phones: no dragging. */

/* Photo gallery on the profile page + large view */
.msahu-pf-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.msahu-wrap .msahu-pf-gallery-item { display: block; aspect-ratio: 1; border-radius: var(--msahu-radius-sm); overflow: hidden; background: #f2eff4; }
.msahu-wrap .msahu-pf-gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.msahu-pf-gallery-item:hover img { transform: scale(1.04); }
.msahu-wrap .msahu-pf-gallery-locked { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; color: var(--msahu-muted); }
.msahu-lightbox { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; background: rgba(15, 12, 20, .92); }
.msahu-lightbox[hidden] { display: none; }
.msahu-lightbox img { max-width: calc(100% - 32px); max-height: calc(100% - 96px); border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.msahu-lightbox button { position: absolute; border: 0; background: rgba(255, 255, 255, .15); color: #fff; font-size: 34px; line-height: 1; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; }
.msahu-lightbox button:hover { background: rgba(255, 255, 255, .3); }
.msahu-lightbox-close { top: 16px; right: 16px; }
.msahu-lightbox-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.msahu-lightbox-next { right: 16px; top: 50%; transform: translateY(-50%); }
body.msahu-lightbox-open { overflow: hidden; }

/* Show / hide password */
.msahu-pass { position: relative; }
.msahu-wrap .msahu-pass input { padding-right: 48px !important; }
.msahu-wrap .msahu-pass-toggle { position: absolute; top: 0; right: 0; width: 48px; height: 48px; margin: 0 !important; padding: 0 !important; display: flex; align-items: center; justify-content: center; border: 0 !important; background: none !important; box-shadow: none !important; color: #9d9aa6 !important; cursor: pointer; border-radius: 0 var(--msahu-radius-sm) var(--msahu-radius-sm) 0; }
.msahu-wrap .msahu-pass-toggle:hover, .msahu-wrap .msahu-pass-toggle:focus-visible { color: var(--msahu-primary) !important; }
.msahu-pass-toggle .msahu-eye-hide, .msahu-pass-toggle.is-shown .msahu-eye-show { display: none; }
.msahu-pass-toggle.is-shown .msahu-eye-hide { display: block; }
@media (max-width: 860px) {
	.msahu-reg-layout.has-panel { display: block; max-width: 640px; }
	.msahu-reg-panel { padding: 24px 22px; }
	.msahu-wrap .msahu-reg-panel-title { font-size: 21px !important; margin-bottom: 16px !important; }
	.msahu-wrap .msahu-reg-points { margin: 0; gap: 10px; }
	.msahu-wrap .msahu-reg-points li { font-size: 14px; }
	.msahu-reg-steps { display: none; }
	.msahu-reg-layout.has-panel .msahu-reg-card, .msahu-login-layout.has-panel .msahu-login-card { padding: 26px 22px; }
	.msahu-login-layout.has-panel { max-width: 460px; }
}
@media (max-width: 640px) {
	.msahu-reg-noemail { flex-direction: column; align-items: flex-start; gap: 10px; }
}
.msahu-verify-card { max-width: 520px; }
.msahu-verify-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 14px; border-radius: 50%; background: var(--msahu-primary-soft); color: var(--msahu-primary); }
.msahu-wrap .msahu-verify-tips { margin: 0 0 20px !important; padding: 14px 16px 14px 34px !important; border-radius: 12px; background: #faf8fb; color: var(--msahu-muted); font-size: 14px; line-height: 1.6; }
.msahu-verify-change { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--msahu-border); }
.msahu-verify-change summary { cursor: pointer; text-align: center; font-size: 14px; font-weight: 600; color: var(--msahu-primary); }
.msahu-verify-change[open] summary { margin-bottom: 16px; }
.msahu-verify-change .msahu-field { margin-bottom: 14px; }
.msahu-verify-delete summary { color: var(--msahu-muted); font-weight: 500; }
.msahu-wrap .msahu-verify-delete .msahu-muted { margin: 0 0 14px !important; font-size: 13px; }
.msahu-login-form form p { margin: 0 0 16px; }
.msahu-login-form label { margin-bottom: 8px !important; }
.msahu-wrap .msahu-login-form .login-remember label { display: flex !important; align-items: center; gap: 8px; font-weight: 400 !important; }
.msahu-wrap .msahu-login-form input[type=submit] { width: 100%; min-height: 50px; }

/* 8. Dashboard ------------------------------------------------------------- */
.msahu-dash-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 24px; align-items: start; }
.msahu-dash-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(20px + env(safe-area-inset-top, 0px)); }
.msahu-dash-side .msahu-card { margin: 0; }
.msahu-dash-user { display: flex; gap: 14px; align-items: center; padding: 18px; background: linear-gradient(135deg, var(--msahu-primary-soft), #fff); }
.msahu-wrap .msahu-dash-user img { width: 60px !important; height: 60px !important; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .1); flex-shrink: 0; }
.msahu-dash-user-info { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.msahu-dash-user-info strong { font-size: 16px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.msahu-dash-user-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* "Username: rahul_sharma" – its own full-width row at the bottom of the user card, always shown in full. */
.msahu-dash-user { flex-wrap: wrap; }
.msahu-dash-username { flex: 1 1 100%; margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--msahu-border); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.msahu-dash-username-label { color: var(--msahu-muted); }
.msahu-dash-username-value { color: var(--msahu-text); font-weight: 500; }
.msahu-dash-nav { display: flex; flex-direction: column; gap: 2px; padding: 10px; }
.msahu-wrap .msahu-dash-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--msahu-radius-sm); color: #45455a !important; font-size: 15px; font-weight: 500; transition: background .15s, color .15s; }
.msahu-dash-nav a svg { flex-shrink: 0; color: var(--msahu-faint); transition: color .15s; }
.msahu-dash-nav a > span:first-of-type { flex: 1; }
.msahu-wrap .msahu-dash-nav a:hover { background: #f6f3f7; color: var(--msahu-text) !important; }
.msahu-wrap .msahu-dash-nav a.is-active { background: var(--msahu-primary-soft); color: var(--msahu-primary) !important; font-weight: 600; }
.msahu-dash-nav a.is-active svg, .msahu-dash-nav a:hover svg { color: var(--msahu-primary); }
.msahu-wrap .msahu-dash-nav a.msahu-dash-logout, .msahu-dash-nav a.msahu-dash-logout svg { color: var(--msahu-danger) !important; }
.msahu-dash-sep { height: 1px; margin: 8px 6px; background: var(--msahu-border); }

/* Bottom menu for phones / tablets (shown in the 960px media query, which hides the sidebar menu). */
.msahu-bottom-wrap { display: none; }
.msahu-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; display: flex; align-items: stretch; padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid var(--msahu-border); box-shadow: 0 -4px 16px rgba(30, 20, 40, .08); font-family: var(--msahu-font); }
.msahu-bottom-nav > .msahu-bottom-item, .msahu-bottom-more { flex: 1 1 0; min-width: 0; }
.msahu-wrap .msahu-bottom-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 100%; padding: 4px 2px; border-radius: 10px; color: #6b6b78 !important; font-size: 11px; font-weight: 600; line-height: 1.2; text-decoration: none !important; list-style: none; cursor: pointer; }
.msahu-bottom-more > summary::-webkit-details-marker { display: none; }
.msahu-wrap .msahu-bottom-item.is-active, .msahu-wrap .msahu-bottom-more.is-active > summary, .msahu-wrap .msahu-bottom-more[open] > summary { color: var(--msahu-primary) !important; }
.msahu-bottom-item.is-active .msahu-bottom-icon { background: var(--msahu-primary-soft); }
.msahu-bottom-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 28px; border-radius: 14px; }
.msahu-bottom-count { position: absolute; top: -5px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--msahu-danger); color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; }
.msahu-count[hidden], .msahu-bottom-count[hidden] { display: none !important; }
/* Live update popup ("You have a new message"), tappable. */
.msahu-wrap .msahu-live-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 9995; transform: translate(-50%, 20px); display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 24px); padding: 12px 18px; border-radius: 999px; background: #1f1d2b; color: #fff !important; font-size: 14px; font-weight: 600; text-decoration: none !important; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.msahu-wrap .msahu-live-toast.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }.msahu-bottom-label { max-width: 100%; text-align: center; overflow-wrap: anywhere; }
.msahu-bottom-sheet { position: fixed; left: 8px; right: 8px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 2px; max-height: 70vh; overflow-y: auto; padding: 8px; background: #fff; border: 1px solid var(--msahu-border); border-radius: 16px; box-shadow: 0 10px 30px rgba(30, 20, 40, .18); }
.msahu-wrap .msahu-bottom-sheet a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; color: #45455a !important; font-size: 15px; font-weight: 500; text-decoration: none !important; }
.msahu-bottom-sheet a > span:first-of-type { flex: 1; }
.msahu-bottom-sheet a svg { flex-shrink: 0; color: var(--msahu-faint); }
.msahu-wrap .msahu-bottom-sheet a.is-active { background: var(--msahu-primary-soft); color: var(--msahu-primary) !important; }
.msahu-wrap .msahu-bottom-sheet a.msahu-dash-logout, .msahu-bottom-sheet a.msahu-dash-logout svg { color: var(--msahu-danger) !important; }
.msahu-bottom-sheet .msahu-dash-sep { display: block; width: auto; height: 1px; margin: 6px; }
.msahu-dash-main { min-width: 0; }

.msahu-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
/* Dashboard stat cards: round coloured icon on the left, number + label on the right. */
.msahu-wrap .msahu-stat { --stat-fg: var(--msahu-primary); --stat-bg: var(--msahu-primary-soft); display: flex; flex-direction: row; align-items: center; gap: 12px; margin: 0; padding: 16px; color: var(--msahu-text) !important; text-decoration: none !important; transition: transform .15s, box-shadow .15s, border-color .15s; }
.msahu-wrap .msahu-stat:hover { transform: translateY(-2px); box-shadow: var(--msahu-shadow-hover); }
.msahu-wrap .msahu-stat.msahu-stat-views { --stat-fg: #2f7de1; --stat-bg: #e8f1fd; }
.msahu-wrap .msahu-stat.msahu-stat-interests { --stat-fg: #d63b6f; --stat-bg: #fde8ef; }
.msahu-wrap .msahu-stat.msahu-stat-connections { --stat-fg: #1f9d63; --stat-bg: #e4f6ec; }
.msahu-wrap .msahu-stat.msahu-stat-shortlist { --stat-fg: #c98a0c; --stat-bg: #fdf3dc; }
.msahu-wrap .msahu-stat.msahu-stat-messages { --stat-fg: #7a4fd6; --stat-bg: #efe9fb; }
.msahu-stat-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--stat-bg); color: var(--stat-fg); }
.msahu-stat-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.msahu-stat-num { font-size: 24px; font-weight: 700; line-height: 1.1; color: var(--msahu-text); }
.msahu-stat-label { font-size: 13px; line-height: 1.3; color: var(--msahu-muted); }
.msahu-stat.is-zero .msahu-stat-num { color: #a8a6b3; }
.msahu-stat.is-new .msahu-stat-num { color: var(--stat-fg); }
.msahu-wrap .msahu-stat.is-new { border-color: var(--stat-fg); }

.msahu-info-card { display: flex; flex-direction: column; align-items: flex-start; margin: 0; }
.msahu-info-card-head { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 14px; }
.msahu-wrap .msahu-info-card-head h3 { flex: 1; margin: 0 !important; }
.msahu-info-card-value { font-size: 20px; font-weight: 700; color: var(--msahu-primary); }
.msahu-info-card .msahu-progress { width: 100%; }
.msahu-membership-line { margin-bottom: 2px !important; }

.msahu-cta-banner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 26px 28px; border-radius: var(--msahu-radius); background: linear-gradient(120deg, var(--msahu-primary) 0%, var(--msahu-primary-dark) 100%); color: #fff; box-shadow: var(--msahu-shadow); }
.msahu-wrap .msahu-cta-banner h3 { margin: 0 0 4px !important; font-size: 22px !important; font-weight: 700 !important; color: #fff !important; }
.msahu-cta-banner p { margin: 0; opacity: .9; }

.msahu-subtabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.msahu-wrap .msahu-subtabs a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--msahu-input-border); background: #fff; color: var(--msahu-text) !important; font-size: 14px; font-weight: 500; }
.msahu-wrap .msahu-subtabs a.is-active { background: var(--msahu-primary); border-color: var(--msahu-primary); color: #fff !important; }
.msahu-benefits { padding-left: 20px; margin: 0 0 14px; }
.msahu-premium-info { background: var(--msahu-primary-soft); padding: 14px 16px; border-radius: var(--msahu-radius-sm); }
.msahu-danger-zone { border-color: #f3c9c9; }

.msahu-list-item { display: flex; gap: 14px; align-items: center; padding: 16px 18px; margin-bottom: 12px; }
.msahu-wrap .msahu-avatar { width: 64px !important; height: 64px !important; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.msahu-wrap .msahu-avatar-sm { width: 42px !important; height: 42px !important; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.msahu-list-body { flex: 1; min-width: 0; }
.msahu-wrap .msahu-list-body a strong { color: var(--msahu-text); }
.msahu-list-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* 9. Edit Profile – step-wise form ---------------------------------------- */
.msahu-wizard-card { padding: 28px; }
.msahu-photo-edit { display: flex; align-items: center; gap: 22px; margin: 0 0 28px; padding: 0 0 26px; border-bottom: 1px solid var(--msahu-border); }
.msahu-photo-edit-text { display: flex; flex-direction: column; gap: 6px; }
.msahu-photo-edit-text strong { font-size: 17px; }
.msahu-photo-edit-text small { font-size: 13px; color: var(--msahu-muted); }
.msahu-wrap .msahu-photo-edit-remove { display: flex !important; align-items: center; gap: 8px; margin: 4px 0 0 !important; font-size: 14px !important; font-weight: 400 !important; color: var(--msahu-danger) !important; cursor: pointer; }
.msahu-photo-edit-remove input { accent-color: var(--msahu-danger) !important; }
.msahu-photo-form { margin: 0; }
.msahu-photo-edit-buttons { margin-top: 4px; }
.msahu-wrap .msahu-photo-save:disabled { opacity: .45; }
.msahu-wrap .msahu-photo-save.is-ready:not(:disabled) { box-shadow: 0 0 0 4px var(--msahu-primary-ring) !important; }
.msahu-wrap .msahu-btn-danger-text { color: var(--msahu-danger) !important; }
.msahu-wrap .msahu-photo-edit-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 13.5px; font-weight: 600; }
.msahu-wizard.is-js .msahu-wiz-step { display: none; }
.msahu-wizard.is-js .msahu-wiz-step.is-active { display: block; }
.msahu-wizard .msahu-wiz-step + .msahu-wiz-step { margin-top: 40px; }
.msahu-wizard.is-js .msahu-wiz-step + .msahu-wiz-step { margin-top: 0; }
.msahu-wiz-count { display: inline-block; margin-bottom: 6px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--msahu-primary); }
.msahu-wrap .msahu-wiz-title { margin: 0 0 20px !important; padding: 0 !important; font-size: 24px !important; font-weight: 700 !important; color: var(--msahu-text) !important; }
.msahu-wiz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.msahu-wiz-nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--msahu-border); }

/* 10. Payment screen -------------------------------------------------------- */
.msahu-pay { position: relative; overflow: hidden; text-align: center; background: #fff; border: 1px solid var(--msahu-border); border-radius: var(--msahu-radius); box-shadow: var(--msahu-shadow); padding: 34px 24px 36px; color: var(--msahu-muted); }
.msahu-pay > *:not(.msahu-pay-hearts) { position: relative; z-index: 1; }
.msahu-pay::after { content: ""; position: absolute; top: -70px; right: -70px; width: 180px; height: 180px; border-radius: 50%; background: var(--msahu-primary-soft); }
.msahu-pay-hearts span { position: absolute; color: var(--msahu-primary-tint); font-size: 16px; line-height: 1; animation: msahu-float 6s ease-in-out infinite; }
.msahu-pay-hearts span:nth-child(1) { top: 3%; left: 36%; }
.msahu-pay-hearts span:nth-child(2) { top: 12%; left: 5%; animation-delay: -1s; }
.msahu-pay-hearts span:nth-child(3) { top: 20%; left: 54%; animation-delay: -2s; }
.msahu-pay-hearts span:nth-child(4) { top: 22%; left: 70%; animation-delay: -3s; }
.msahu-pay-hearts span:nth-child(5) { top: 36%; left: 45%; font-size: 13px; animation-delay: -4s; }
.msahu-pay-hearts span:nth-child(6) { top: 55%; left: 11%; animation-delay: -1.5s; }
.msahu-pay-hearts span:nth-child(7) { top: 80%; left: 7%; animation-delay: -2.5s; }
.msahu-pay-hearts span:nth-child(8) { top: 78%; left: 74%; animation-delay: -3.5s; }
@keyframes msahu-float { 0%, 100% { transform: translateY(0) rotate(-12deg); } 50% { transform: translateY(-10px) rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .msahu-pay-hearts span { animation: none; } }
.msahu-pay-check { width: 110px; height: 110px; margin: 0 auto 20px; border-radius: 50%; background: linear-gradient(135deg, var(--msahu-primary), var(--msahu-primary-dark)); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px var(--msahu-primary-ring); }
.msahu-wrap .msahu-pay .msahu-pay-greeting { margin: 0 0 4px !important; font-size: 28px !important; font-weight: 700 !important; color: var(--msahu-text) !important; }
.msahu-pay-name { font-family: 'Dancing Script', 'Brush Script MT', cursive; font-size: 40px; font-weight: 600; color: var(--msahu-primary); line-height: 1.3; }
.msahu-pay-line { display: block; width: 72px; height: 3px; margin: 8px auto 24px; border-radius: 3px; background: linear-gradient(90deg, var(--msahu-primary-tint), var(--msahu-primary), var(--msahu-primary-tint)); }
.msahu-pay-text { max-width: 760px; margin: 0 auto 20px !important; font-size: 17px; line-height: 1.7; }
.msahu-wrap .msahu-pay-text p { margin: 0 0 10px !important; }
.msahu-wrap .msahu-pay-text p:last-child { margin-bottom: 0 !important; }
.msahu-pay-text ul, .msahu-pay-text ol { display: inline-block; margin: 0 0 10px; padding-left: 20px; text-align: left; }
.msahu-pay-qr { margin: 0 auto 28px; }
.msahu-wrap .msahu-pay-qr img { display: block; width: 240px !important; height: 240px !important; max-width: 100%; object-fit: contain; margin: 0 auto 8px; padding: 10px; background: #fff; border: 1px solid var(--msahu-border); border-radius: var(--msahu-radius-sm); }
.msahu-pay-qr figcaption { font-size: 14px; }
.msahu-pay-form, .msahu-pay-done { max-width: 620px; margin: 0 auto 28px; padding: 24px; border: 1.5px dashed var(--msahu-primary-tint); border-radius: var(--msahu-radius); background: var(--msahu-primary-soft); text-align: left; }
.msahu-wrap .msahu-pay-form h3, .msahu-wrap .msahu-pay-done h3 { margin: 0 0 16px !important; font-size: 18px !important; font-weight: 600 !important; text-align: center; }
.msahu-pay-done { text-align: center; border-style: solid; }
.msahu-pay-done p { margin: 0; }
.msahu-pay-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.msahu-wrap .msahu-pay-form .msahu-btn { display: flex !important; margin: 0 auto !important; }
.msahu-pay-contact { max-width: 760px; margin: 0 auto; padding: 8px 28px; background: #f7f6f9; border-radius: var(--msahu-radius); text-align: left; }
.msahu-pay-contact p { display: flex; align-items: center; gap: 16px; margin: 14px 0; font-size: 15px; }
.msahu-pay-contact svg { color: var(--msahu-primary); flex-shrink: 0; }
.msahu-wrap .msahu-pay-contact a { color: var(--msahu-text) !important; }

/* 11. Search, profile cards, pagination ----------------------------------- */
/* Filters in a sidebar on the left, results on the right. */
.msahu-search { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; }
.msahu-wrap .msahu-search-filters > summary { display: none !important; } /* Only the phone layout has the "Filters" button. */
.msahu-search-form { margin: 0; padding: 20px; }
.msahu-wrap .msahu-search-title { margin: 0 0 14px !important; font-size: 17px !important; font-style: normal !important; }
.msahu-search-fields { display: grid; gap: 14px; }
.msahu-search-fields .msahu-field { gap: 6px; }
.msahu-wrap .msahu-search-fields :is(input[type=text], select) { height: 42px !important; padding: 0 12px !important; font-size: 14px !important; }
.msahu-wrap .msahu-search-fields select { padding-right: 30px !important; }
.msahu-wrap .msahu-search-fields .msahu-check { margin: 2px 0 0 !important; }
.msahu-age-range { display: flex; align-items: center; gap: 8px; }
.msahu-wrap .msahu-age-range select { flex: 1 1 0; min-width: 0; }
.msahu-age-range span { color: var(--msahu-muted); font-size: 14px; }
.msahu-search-actions { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.msahu-wrap .msahu-search-actions .msahu-btn-primary { flex: 1; }
.msahu-filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 10px; background: var(--msahu-primary); color: #fff; font-size: 12px; }
.msahu-search-main .msahu-section-head { margin-top: 0; }
.msahu-wrap .msahu-sort select { width: auto !important; height: 40px !important; font-size: 14px !important; }

/* Cards per row come from Settings → General (--msahu-cards-desktop / -tablet / -phone, set inline). */
.msahu-grid-cards { display: grid; grid-template-columns: repeat(var(--msahu-cards-desktop, 4), minmax(0, 1fr)); gap: 22px; margin-bottom: 20px; }
/* Each card sizes its text to its width (msahu-cw-* classes below, set by msahu-public.js), so any setting fits.
   Not CSS container queries: they made page builders (Elementor) measure the page height wrongly. */
.msahu-profile-card { min-width: 0; background: var(--msahu-card); border: 1px solid var(--msahu-border); border-radius: var(--msahu-radius); overflow: hidden; box-shadow: var(--msahu-shadow); display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; }
.msahu-profile-card:hover { transform: translateY(-3px); box-shadow: var(--msahu-shadow-hover); }
.msahu-card-photo { position: relative; display: block; aspect-ratio: 4 / 4.4; background: #f3eff5; overflow: hidden; }
.msahu-wrap .msahu-card-photo > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.msahu-card-badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.msahu-card-body { padding: 16px 18px 8px; flex: 1; }
.msahu-card-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--msahu-border); }
.msahu-wrap .msahu-card-name { display: flex; align-items: center; gap: 6px; margin: 0 !important; padding: 0 !important; font-size: 18px !important; font-weight: 600 !important; line-height: 1.25 !important; overflow-wrap: anywhere; }
.msahu-wrap .msahu-card-name a { min-width: 0; }
.msahu-wrap .msahu-card-name a { color: var(--msahu-text) !important; }
.msahu-wrap .msahu-card-name a:hover { color: var(--msahu-primary) !important; }
.msahu-card-verified { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--msahu-success); color: #fff; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.msahu-wrap .msahu-card-details { display: flex; flex-direction: column; gap: 10px; margin: 0 !important; padding: 0 !important; }
.msahu-card-row { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 10px; align-items: center; }
.msahu-card-row .msahu-card-icon { grid-row: span 2; }
.msahu-wrap .msahu-card-row dt { margin: 0 !important; padding: 0 !important; font-size: 11px !important; font-weight: 500 !important; line-height: 1.3 !important; letter-spacing: .04em; text-transform: uppercase; color: var(--msahu-faint) !important; }
.msahu-wrap .msahu-card-row dd { margin: 0 !important; padding: 0 !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.35 !important; color: var(--msahu-text) !important; overflow-wrap: anywhere; }
.msahu-card-actions { display: flex; gap: 8px; padding: 12px 18px 18px; }
.msahu-card-actions .msahu-btn:first-child { flex: 1; min-width: 0; }
.msahu-wrap .msahu-card-actions .msahu-btn { white-space: normal; text-align: center; }

/* Narrower cards (more per row, or small screens): smaller text and buttons, nothing cut off.
   msahu-cw-250 / -200 / -150 = cards at most that many px wide (all that apply are set). */
.msahu-cw-250 .msahu-card-body { padding: 12px 14px 6px; }
.msahu-cw-250 .msahu-card-head { padding-bottom: 10px; margin-bottom: 10px; }
.msahu-wrap .msahu-cw-250 .msahu-card-name { font-size: 16px !important; }
.msahu-wrap .msahu-cw-250 .msahu-card-details { gap: 8px; }
.msahu-cw-250 .msahu-card-row { grid-template-columns: 26px minmax(0, 1fr); column-gap: 8px; }
.msahu-cw-250 .msahu-card-row .msahu-card-icon { width: 26px; height: 26px; border-radius: 7px; }
.msahu-cw-250 .msahu-card-row .msahu-card-icon svg { width: 13px; height: 13px; }
.msahu-wrap .msahu-cw-250 .msahu-card-row dd { font-size: 13px !important; }
.msahu-cw-250 .msahu-card-actions { gap: 6px; padding: 10px 14px 14px; }
.msahu-wrap .msahu-cw-250 .msahu-card-actions .msahu-btn { min-height: 40px; padding: 0 12px !important; font-size: 13px !important; }
.msahu-wrap .msahu-cw-250 .msahu-card-actions .msahu-btn-icon { width: 40px; min-width: 40px; padding: 0 !important; font-size: 16px !important; }

.msahu-cw-200 .msahu-card-badges { top: 6px; left: 6px; gap: 4px; }
.msahu-cw-200 .msahu-card-badges .msahu-badge { font-size: 9px; padding: 2px 6px; }
.msahu-cw-200 .msahu-card-body { padding: 10px 10px 4px; }
.msahu-cw-200 .msahu-card-head { gap: 4px; padding-bottom: 8px; margin-bottom: 8px; }
.msahu-wrap .msahu-cw-200 .msahu-card-name { font-size: 14px !important; }
.msahu-cw-200 .msahu-card-head .msahu-code { font-size: 10px; padding: 1px 6px; }
.msahu-wrap .msahu-cw-200 .msahu-card-details { gap: 6px; }
.msahu-cw-200 .msahu-card-row { grid-template-columns: minmax(0, 1fr); }
.msahu-cw-200 .msahu-card-row .msahu-card-icon { display: none; }
.msahu-wrap .msahu-cw-200 .msahu-card-row dt { font-size: 9px !important; }
.msahu-wrap .msahu-cw-200 .msahu-card-row dd { font-size: 12px !important; }
.msahu-cw-200 .msahu-card-actions { padding: 8px 10px 10px; }
.msahu-wrap .msahu-cw-200 .msahu-card-actions .msahu-btn { min-height: 34px; padding: 0 8px !important; font-size: 12px !important; }
.msahu-wrap .msahu-cw-200 .msahu-card-actions .msahu-btn-icon { width: 34px; min-width: 34px; font-size: 15px !important; }

.msahu-wrap .msahu-cw-150 .msahu-card-name { font-size: 13px !important; }
.msahu-wrap .msahu-cw-150 .msahu-card-row dd { font-size: 11px !important; }
.msahu-cw-150 .msahu-card-actions { flex-wrap: wrap; }
.msahu-cw-150 .msahu-card-actions .msahu-btn:first-child { flex: 1 1 100%; }
.msahu-wrap .msahu-cw-150 .msahu-card-actions .msahu-btn-icon { width: 100%; min-width: 0; min-height: 30px; }

.msahu-pagination { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 10px 0 30px; }
.msahu-wrap .msahu-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1.5px solid var(--msahu-input-border); border-radius: var(--msahu-radius-sm); background: #fff; color: var(--msahu-text) !important; font-weight: 500; }
.msahu-wrap .msahu-pagination .current { background: var(--msahu-primary); border-color: var(--msahu-primary); color: #fff !important; }

/* 12. Profile page ---------------------------------------------------------- */
.msahu-pf-hero { position: relative; background: #fff; border: 1px solid var(--msahu-border); border-radius: 18px; box-shadow: var(--msahu-shadow); overflow: hidden; margin-bottom: 22px; }
.msahu-pf-cover { height: 110px; background: linear-gradient(120deg, var(--msahu-primary-tint) 0%, var(--msahu-primary) 100%); }
.msahu-pf-hero-inner { display: flex; gap: 28px; padding: 0 28px 26px; }
.msahu-pf-photo { flex-shrink: 0; width: 220px; margin-top: -70px; }
.msahu-wrap .msahu-pf-photo > img { display: block; width: 220px !important; height: 260px !important; max-width: none !important; object-fit: cover; border-radius: 16px; border: 5px solid #fff; box-shadow: 0 8px 24px rgba(40, 20, 40, .15); background: #f3eff5; }

/* Blurred photos (visitors / members not approved yet): a tiny copy, scaled up and blurred. */
/* Only the photo itself (> img): WordPress may turn emoji or icons inside the label into small images too. */
.msahu-card-photo.is-blurred > img { filter: blur(10px); transform: scale(1.15); }
.msahu-pf-photo.is-blurred { position: relative; box-sizing: border-box; overflow: hidden; border: 5px solid #fff; border-radius: 16px; box-shadow: 0 8px 24px rgba(40, 20, 40, .15); background: #f3eff5; }
.msahu-wrap .msahu-pf-photo.is-blurred > img { width: 100% !important; height: 250px !important; border: 0; border-radius: 0; box-shadow: none; filter: blur(10px); transform: scale(1.15); }
/* Label on a blurred photo; !important keeps theme link styles from moving it. */
.msahu-wrap .msahu-photo-lock { position: absolute !important; left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; z-index: 2; display: inline-flex !important; align-items: center; justify-content: center; gap: 5px; width: max-content; max-width: 86%; margin: 0 !important; padding: 6px 12px !important; border-radius: 999px; background: rgba(20, 20, 30, .62) !important; color: #fff !important; font-size: 12px; font-weight: 600; line-height: 1.3; text-align: center; text-decoration: none !important; }
.msahu-wrap .msahu-photo-lock svg { flex-shrink: 0; width: 12px; height: 12px; }
.msahu-wrap a.msahu-photo-lock:hover { background: var(--msahu-primary) !important; }
.msahu-wrap .msahu-cw-200 .msahu-photo-lock { font-size: 10px; padding: 4px 8px !important; gap: 3px; }
.msahu-wrap .msahu-cw-200 .msahu-photo-lock svg { width: 10px; height: 10px; }
.msahu-pf-info { flex: 1; min-width: 0; padding-top: 18px; }
.msahu-wrap .msahu-pf-name { display: flex; align-items: center; gap: 8px; margin: 0 0 8px !important; padding: 0 !important; font-size: 30px !important; font-weight: 700 !important; line-height: 1.2 !important; }
.msahu-pf-verified { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--msahu-success); color: #fff; }
.msahu-pf-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 18px; }
.msahu-wrap .msahu-pf-facts { list-style: none !important; margin: 0 0 22px !important; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.msahu-wrap .msahu-pf-facts li { display: flex; align-items: center; gap: 10px; margin: 0 !important; padding: 0 !important; font-size: 15px; font-weight: 500; }
.msahu-pf-facts li > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.msahu-pf-facts small { font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--msahu-faint); }
.msahu-pf-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.msahu-wrap .msahu-pf-actions .msahu-btn:first-child { min-width: 180px; }
.msahu-pf-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.msahu-pf-main, .msahu-pf-side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.msahu-pf-section { background: #fff; border: 1px solid var(--msahu-border); border-radius: var(--msahu-radius); box-shadow: var(--msahu-shadow); padding: 22px 24px; }
.msahu-wrap .msahu-pf-section-title { display: flex; align-items: center; gap: 10px; margin: 0 0 18px !important; padding: 0 !important; font-size: 18px !important; font-weight: 600 !important; }
.msahu-pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.msahu-pf-tile { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--msahu-radius-sm); background: var(--msahu-bg); border: 1px solid var(--msahu-border); min-width: 0; }
.msahu-pf-tile span { font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--msahu-faint); }
.msahu-pf-tile strong { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.msahu-wrap .msahu-pf-steps { list-style: none !important; counter-reset: msahu-step; margin: 0 0 16px !important; padding: 0 !important; display: flex; flex-direction: column; gap: 14px; }
.msahu-wrap .msahu-pf-steps li { counter-increment: msahu-step; position: relative; display: flex; flex-direction: column; gap: 2px; margin: 0 !important; padding: 0 0 0 40px !important; }
.msahu-pf-steps li::before { content: counter(msahu-step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--msahu-primary); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.msahu-pf-steps strong { font-size: 14px; }
.msahu-pf-steps span { font-size: 13px; color: var(--msahu-muted); line-height: 1.45; }
.msahu-pf-safety { display: flex; gap: 10px; align-items: flex-start; margin: 0 !important; padding: 12px 14px; border-radius: var(--msahu-radius-sm); background: #eef9f2; color: #1f6b3e; font-size: 13px; line-height: 1.45; }
.msahu-pf-safety svg { flex-shrink: 0; margin-top: 1px; }
.msahu-pf-since { margin: 0 !important; padding: 0 6px; font-size: 13px; color: var(--msahu-faint); }

/* 13. Messages ------------------------------------------------------------- */
.msahu-inbox { display: grid; grid-template-columns: 260px minmax(0, 1fr); padding: 0; overflow: hidden; min-height: 460px; }
.msahu-inbox-list { border-right: 1px solid var(--msahu-border); overflow-y: auto; max-height: 560px; }
.msahu-wrap .msahu-inbox-item { display: flex; gap: 10px; align-items: center; padding: 12px 14px; color: var(--msahu-text) !important; border-bottom: 1px solid var(--msahu-border); }
.msahu-inbox-item > span:nth-child(2) { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; }
.msahu-inbox-item small { display: block; font-weight: 400; color: var(--msahu-muted); }
.msahu-inbox-item.is-active, .msahu-inbox-item:hover { background: var(--msahu-primary-soft); }

/* Online status ("Online now" / "Active 25 mins ago") */
.msahu-avatar-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.msahu-online-dot { position: absolute; right: 0; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; }
.msahu-presence { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--msahu-muted); }
.msahu-presence i { width: 8px; height: 8px; border-radius: 50%; background: #c4c4cc; flex-shrink: 0; }
.msahu-presence.is-online { color: #15803d; }
.msahu-presence.is-online i { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
.msahu-presence[hidden] { display: none; }
.msahu-card-badges .msahu-presence { padding: 3px 9px; border-radius: 99px; background: rgba(255, 255, 255, .92); }
.msahu-pf-chips .msahu-presence { padding: 3px 10px; border-radius: 99px; background: #f3f3f6; }
.msahu-pf-chips .msahu-presence.is-online { background: #e8f8ee; }
.msahu-inbox-thread { display: flex; flex-direction: column; min-width: 0; }
.msahu-inbox-thread > .msahu-empty { margin: auto; border: 0; }
.msahu-chat { display: flex; flex-direction: column; height: 100%; min-height: 460px; }
.msahu-chat-head { padding: 14px 18px; border-bottom: 1px solid var(--msahu-border); display: flex; gap: 10px; align-items: center; }
.msahu-chat-messages { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; max-height: 440px; background: var(--msahu-bg); }
.msahu-msg { max-width: 75%; padding: 10px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--msahu-border); align-self: flex-start; }
.msahu-msg p { margin: 0 !important; white-space: pre-wrap; overflow-wrap: anywhere; }
.msahu-msg.is-mine { align-self: flex-end; background: var(--msahu-primary); border-color: var(--msahu-primary); color: #fff; }
.msahu-msg-time { display: block; font-size: 11px; opacity: .7; margin-top: 3px; }
.msahu-msg.is-mine .msahu-msg-time { display: flex; align-items: center; justify-content: flex-end; gap: 4px; opacity: .85; }
.msahu-tick { display: inline-flex; line-height: 0; color: rgba(255, 255, 255, .75); }
.msahu-tick.is-read { color: #7fe3ff; } /* Two light-blue ticks on the pink bubble = seen. */
.msahu-chat-form { display: flex; gap: 10px; padding: 12px; border-top: 1px solid var(--msahu-border); align-items: flex-end; }
.msahu-wrap .msahu-chat-form textarea { min-height: 48px; resize: none; }

/* 14. Toast ----------------------------------------------------------------- */
.msahu-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(20px); background: #2b2b33; color: #fff; padding: 12px 20px; border-radius: var(--msahu-radius-sm); font-family: var(--msahu-font); font-size: 14px; z-index: 100000; opacity: 0; transition: opacity .2s, transform .2s; max-width: calc(100% - 32px); box-shadow: 0 6px 20px rgba(0, 0, 0, .2); }
.msahu-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.msahu-toast.is-error { background: var(--msahu-danger); }
.msahu-toast.is-success { background: var(--msahu-success); }

/* 15. Responsive ------------------------------------------------------------ */
@media (max-width: 1100px) {
	.msahu-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
	.msahu-dash-layout, .msahu-pf-body { grid-template-columns: minmax(0, 1fr); }
	.msahu-dash-side { position: static; }
	.msahu-dash-nav { flex-direction: row; overflow-x: auto; padding: 6px; }
	.msahu-wrap .msahu-dash-nav a { white-space: nowrap; padding: 10px 12px; }
	.msahu-dash-sep { width: 1px; height: auto; margin: 6px 4px; }
	/* App-style menu at the bottom instead of the sideways-scrolling sidebar menu. */
	.msahu-dash-nav { display: none !important; }
	.msahu-bottom-wrap { display: block; }
	body:not(.msahu-has-bottom-nav) .msahu-dashboard { padding-bottom: 76px; } /* Room for the menu if the script did not run. */
	body.msahu-has-bottom-nav { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
	body.msahu-has-bottom-nav .msahu-wrap .msahu-live-toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } /* Above the bottom menu. */
	.msahu-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.msahu-grid-cards { grid-template-columns: repeat(var(--msahu-cards-tablet, 3), minmax(0, 1fr)); gap: 16px; }
	/* Search: filters fold into a "Filters" button above the results. */
	.msahu-search { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.msahu-wrap .msahu-search-filters > summary { display: inline-flex !important; align-items: center; list-style: none; cursor: pointer; }
	.msahu-search-filters > summary::-webkit-details-marker { display: none; }
	.msahu-search-filters[open] > summary { margin-bottom: 12px; }
}
@media (max-width: 640px) {
	.msahu-card, .msahu-wizard-card, .msahu-auth-card { padding: 18px; }
	.msahu-grid, .msahu-grid-4, .msahu-two-col, .msahu-wiz-grid, .msahu-pay-fields, .msahu-pf-grid { grid-template-columns: minmax(0, 1fr); }
	.msahu-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.msahu-stats > .msahu-stat:last-child:nth-child(odd) { grid-column: 1 / -1; } /* 5th card: full row instead of half. */
	.msahu-wrap .msahu-stat { padding: 14px 12px; gap: 10px; }
	.msahu-stat-icon { width: 40px; height: 40px; }
	.msahu-wrap .msahu-title, .msahu-wrap .msahu-wiz-title { font-size: 21px !important; }
	.msahu-wrap .msahu-auth-title { font-size: 24px !important; }
	.msahu-wiz-nav { justify-content: stretch; }
	.msahu-wiz-nav .msahu-btn { flex: 1; }
	.msahu-photo-edit { flex-direction: column; text-align: center; }
	.msahu-photo-edit-remove { justify-content: center; }
	.msahu-photo-edit-buttons { justify-content: center; }
	.msahu-wrap .msahu-photo-edit-more { justify-content: center; }
	.msahu-cta-banner { padding: 22px; }
	.msahu-list-item { flex-wrap: wrap; }
	.msahu-list-actions { width: 100%; justify-content: flex-start; }
	.msahu-inbox { grid-template-columns: minmax(0, 1fr); }
	.msahu-inbox-list { border-right: 0; border-bottom: 1px solid var(--msahu-border); max-height: 200px; }
	/* Profile cards per row on phones (Settings → General); the cards size their text themselves. */
	.msahu-grid-cards { grid-template-columns: repeat(var(--msahu-cards-phone, 2), minmax(0, 1fr)); gap: 10px; }
	/* iOS Safari zooms into inputs smaller than 16px. */
	.msahu-wrap :is(input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], input[type=number], input[type=search], select, textarea) { font-size: 16px !important; }
	/* Long button labels may wrap instead of overflowing narrow screens. */
	.msahu-wrap .msahu-btn { white-space: normal; text-align: center; }
	.msahu-pay-name { font-size: 32px; }
	.msahu-pay-text { font-size: 15px; }
	.msahu-pay-contact { padding: 6px 18px; }
	.msahu-pf-cover { height: 90px; }
	.msahu-pf-hero-inner { flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 0 18px 22px; }
	.msahu-pf-photo, .msahu-wrap .msahu-pf-photo > img { width: 170px !important; }
	.msahu-wrap .msahu-pf-photo > img { height: 200px !important; }
	.msahu-wrap .msahu-pf-photo.is-blurred > img { width: 100% !important; height: 190px !important; }
	.msahu-pf-info { padding-top: 0; width: 100%; }
	.msahu-wrap .msahu-pf-name { justify-content: center; font-size: 24px !important; }
	.msahu-pf-chips, .msahu-pf-actions { justify-content: center; }
	.msahu-wrap .msahu-pf-facts { grid-template-columns: minmax(0, 1fr); text-align: left; }
	.msahu-pf-section { padding: 18px; }
}

/* 16. Safety (block / report) & renewal ------------------------------------ */
.msahu-chat-head { flex-wrap: wrap; }
.msahu-chat-tools { display: flex; gap: 6px; margin-left: auto; position: relative; }
.msahu-chat-more { display: flex; gap: 6px; }
.msahu-wrap .msahu-chat-more-btn { display: none; }
@media (max-width: 640px) {
	/* Phones: View profile + ⋮; Download chat / Report / Block open from the ⋮ menu. */
	.msahu-chat-tools { width: 100%; align-items: center; }
	.msahu-wrap .msahu-chat-more-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin: 0 0 0 auto !important; padding: 0 !important; border: 1px solid var(--msahu-border) !important; border-radius: 50%; background: #fff !important; color: var(--msahu-text) !important; font-size: 22px !important; line-height: 1 !important; cursor: pointer; }
	.msahu-wrap .msahu-chat-more-btn[aria-expanded="true"] { background: var(--msahu-bg-soft, #f3f4f6) !important; }
	.msahu-chat-more { display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; min-width: 190px; flex-direction: column; gap: 0; padding: 6px; background: #fff; border: 1px solid var(--msahu-border); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .14); }
	.msahu-chat-more.is-open { display: flex; }
	.msahu-wrap .msahu-chat-more .msahu-btn { justify-content: flex-start; width: 100%; padding: 10px 12px !important; border: 0 !important; border-radius: 8px; background: transparent !important; text-align: left; font-size: 15px !important; }
	.msahu-wrap .msahu-chat-more .msahu-btn:hover { background: rgba(0, 0, 0, .05) !important; }
}
.msahu-wrap .msahu-btn-danger-text { color: var(--msahu-danger) !important; }
.msahu-wrap .msahu-chat-older { align-self: center; margin-bottom: 6px !important; }
.msahu-pf-report { padding: 16px 20px; }
.msahu-pf-report summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--msahu-muted); list-style: none; }
.msahu-pf-report summary::-webkit-details-marker { display: none; }
.msahu-pf-report details[open] summary { margin-bottom: 14px; color: var(--msahu-text); }
.msahu-report-form { display: flex; flex-direction: column; gap: 14px; }
.msahu-report-form .msahu-check { margin: 0 !important; }
.msahu-blocked-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--msahu-border); }
.msahu-blocked-row .msahu-blocked-name { flex: 1 1 160px; }
/* Messages: "older than X months are deleted" note */
.msahu-retention-note { display: flex; align-items: flex-start; gap: 8px; }
.msahu-retention-note svg { flex-shrink: 0; margin-top: 2px; color: var(--msahu-primary); }
.msahu-retention-note > span { flex: 1; }
.msahu-wrap .msahu-retention-close { order: 2; flex-shrink: 0; width: 28px; height: 28px; margin: -4px -6px 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50%; background: transparent !important; color: var(--msahu-muted) !important; font-size: 22px !important; line-height: 1 !important; cursor: pointer; }
.msahu-wrap .msahu-retention-close:hover { background: rgba(0, 0, 0, .06) !important; color: var(--msahu-text) !important; }
.msahu-blocked-name { flex: 1; min-width: 0; }
.msahu-pay-renew { max-width: 620px; margin: 0 auto 22px; padding: 18px 22px; border-radius: var(--msahu-radius); background: #fff8e5; border: 1px solid #f1ddb3; text-align: center; }
.msahu-wrap .msahu-pay-renew h3 { margin: 0 0 6px !important; font-size: 18px !important; font-weight: 600 !important; }
.msahu-pay-renew p { margin: 0 !important; font-size: 14px; }
/* Chat: safety note + message-limit status */
.msahu-chat-foot { padding: 0 14px 12px; }
.msahu-wrap .msahu-chat-note { display: flex; align-items: flex-start; gap: 6px; margin: 0 !important; font-size: 12px; line-height: 1.45; color: var(--msahu-faint); }
.msahu-chat-note svg { flex-shrink: 0; margin-top: 2px; color: var(--msahu-success); }
.msahu-wrap .msahu-chat-note + .msahu-chat-note { margin-top: 4px !important; }
.msahu-wrap .msahu-report-note { margin: 2px 0 6px !important; }
.msahu-wrap .msahu-chat-quota { margin: 0 0 8px !important; padding: 8px 12px; border-radius: var(--msahu-radius-sm); font-size: 13px; font-weight: 500; }
.msahu-chat-quota.is-warn { background: #fdf7ea; color: #8a5a00; }
.msahu-chat-quota.is-limit { background: #fdf0f0; color: var(--msahu-danger); }
.msahu-wrap .msahu-chat-form textarea:disabled { background-color: #f4f2f6 !important; cursor: not-allowed; }
/* Dashboard → Rules & Safety */
.msahu-rules-intro { margin: -4px 0 16px; }
.msahu-rules-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.msahu-wrap .msahu-rules-card { margin: 0; padding: 18px 20px; }
.msahu-rules-own { margin-bottom: 16px !important; border-left: 4px solid var(--msahu-primary); }
.msahu-wrap .msahu-rules-card h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 16px; color: var(--msahu-primary); }
.msahu-rules-card h3 svg { flex-shrink: 0; }
.msahu-wrap .msahu-rules-card ul { margin: 0; padding: 0 0 0 18px; }
.msahu-wrap .msahu-rules-card li { margin: 0 0 8px; line-height: 1.5; color: var(--msahu-text); }
.msahu-wrap .msahu-rules-card li:last-child { margin-bottom: 0; }
.msahu-rules-safety { background: var(--msahu-primary-soft); }
.msahu-rules-text > :first-child { margin-top: 0; }
.msahu-rules-text > :last-child { margin-bottom: 0; }
.msahu-rules-links { text-align: center; }
@media (max-width: 900px) { .msahu-rules-grid { grid-template-columns: minmax(0, 1fr); } }
/* Search → "Online now" filter */
.msahu-wrap .msahu-check-online { align-items: center; }
.msahu-wrap .msahu-online-dot { position: static !important; display: inline-block; flex-shrink: 0; width: 8px; height: 8px; margin: 0 -4px 0 0; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }