/*
Theme Name: MilkGrow
Theme URI: https://milkgrow.online
Author: MilkGrow
Description: Grow Milk dairy farming app theme. UI matches farm mockups. Data from MilkGrow Engine REST API (mgrow/v1).
Version: 3.3.2
Requires PHP: 7.4
Text Domain: milkgrow
*/

:root {
	--mg-green: #16a34a;
	--mg-green-dark: #15803d;
	--mg-green-light: #dcfce7;
	--mg-green-mid: #22c55e;
	--mg-blue: #2563eb;
	--mg-blue-dark: #1d4ed8;
	--mg-blue-light: #dbeafe;
	--mg-bg: #f0f9ff;
	--mg-bg-2: #ecfdf5;
	--mg-card: #ffffff;
	--mg-text: #0f172a;
	--mg-text-dim: #64748b;
	--mg-text-faint: #94a3b8;
	--mg-border: rgba(15, 23, 42, 0.08);
	--mg-radius: 18px;
	--mg-radius-sm: 12px;
	--mg-radius-pill: 999px;
	--mg-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
	--mg-shadow-lg: 0 10px 40px rgba(15, 23, 42, 0.1);
	--mg-maxw: 480px;
	--mg-font: 'Poppins', 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--mg-red: #ef4444;
	--mg-amber: #f59e0b;
	--mg-purple: #7c3aed;
}

*, *::before, *::after { box-sizing: border-box; }
html, body {
	margin: 0; padding: 0; min-height: 100%;
	font-family: var(--mg-font);
	background: linear-gradient(180deg, #e0f2fe 0%, #ecfdf5 40%, #f0fdf4 100%);
	color: var(--mg-text);
	-webkit-font-smoothing: antialiased;
}
body { overflow-x: hidden; }
a { color: var(--mg-blue); text-decoration: none; }
img { max-width: 100%; height: auto; }

#mg-app {
	max-width: var(--mg-maxw);
	margin: 0 auto;
	min-height: 100vh;
	position: relative;
	background: transparent;
	padding-bottom: 80px;
}

/* ---------- Topbar ---------- */
.mg-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	background: rgba(255,255,255,0.92);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--mg-border);
	position: sticky;
	top: 0;
	z-index: 50;
}
.mg-topbar__center { flex: 1; text-align: center; }
.mg-topbar__actions { display: flex; gap: 8px; align-items: center; }
.mg-icon-btn {
	width: 40px; height: 40px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid var(--mg-border);
	display: flex; align-items: center; justify-content: center;
	font-size: 18px; cursor: pointer;
	box-shadow: var(--mg-shadow);
	position: relative;
}
.mg-badge {
	position: absolute; top: -4px; right: -4px;
	background: var(--mg-red); color: #fff;
	font-size: 10px; font-weight: 700;
	min-width: 18px; height: 18px; border-radius: 9px;
	display: flex; align-items: center; justify-content: center;
	padding: 0 4px;
}

/* ---------- Brand ---------- */
.mg-brand { text-align: center; }
.mg-brand__mark { font-size: 48px; line-height: 1; margin-bottom: 4px; }
.mg-brand__name { font-size: 28px; font-weight: 800; letter-spacing: -0.5px; }
.mg-brand__name .hi { color: var(--mg-green); }
.mg-brand__name .lo { color: var(--mg-blue); }
.mg-brand__tag { font-size: 11.5px; color: var(--mg-text-dim); margin-top: 2px; font-weight: 500; }
.mg-logo { font-size: 42px; }
.mg-logo--sm { font-size: 26px; }

/* ---------- Page head ---------- */
.mg-page-head { text-align: center; margin: 12px 16px 16px; }
.mg-page-head h1 {
	margin: 0; font-size: 24px; font-weight: 800;
	color: var(--mg-text);
}
.mg-page-head h1 .g { color: var(--mg-green); }
.mg-page-head h1 .b { color: var(--mg-blue); }
.mg-page-head p { margin: 6px 0 0; color: var(--mg-text-dim); font-size: 13.5px; }
.mg-back-row { padding: 8px 14px 0; }

/* ---------- Cards ---------- */
.mg-card {
	background: var(--mg-card);
	border-radius: var(--mg-radius);
	box-shadow: var(--mg-shadow);
	border: 1px solid var(--mg-border);
	padding: 16px;
	margin: 0 14px 14px;
}
.mg-card.tight { padding: 12px 14px; }
.mg-center { text-align: center; }

/* ---------- Buttons ---------- */
.mg-btn, .mg-btn-block, button.mg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 14px 20px;
	border: none;
	border-radius: var(--mg-radius-pill);
	background: linear-gradient(135deg, var(--mg-green-mid), var(--mg-green-dark));
	color: #fff !important;
	font-weight: 700;
	font-size: 15.5px;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(22, 163, 74, 0.35);
	transition: transform 0.15s, box-shadow 0.15s;
}
.mg-btn:active { transform: scale(0.98); }
.mg-btn.blue {
	background: linear-gradient(135deg, var(--mg-blue), var(--mg-blue-dark));
	box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3);
}
.mg-btn-sm {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 16px; border-radius: var(--mg-radius-pill);
	background: linear-gradient(135deg, var(--mg-green-mid), var(--mg-green));
	color: #fff; border: none; font-weight: 600; font-size: 13px; cursor: pointer;
}
.mg-btn-emoji { font-size: 18px; }

/* ---------- Fields ---------- */
.mg-field { margin: 0 14px 12px; }
.mg-input-wrap {
	display: flex; align-items: center; gap: 10px;
	background: #fff;
	border: 1.5px solid #e2e8f0;
	border-radius: var(--mg-radius-pill);
	padding: 12px 16px;
	box-shadow: 0 2px 8px rgba(15,23,42,0.03);
}
.mg-input-wrap:focus-within {
	border-color: var(--mg-green);
	box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}
.mg-input-wrap .ico { font-size: 18px; color: var(--mg-green); }
.mg-input-wrap input {
	flex: 1; border: none; outline: none; background: transparent;
	font-size: 14.5px; color: var(--mg-text); font-family: inherit;
}
.mg-input-wrap input::placeholder { color: var(--mg-text-faint); }
.mg-eye { cursor: pointer; font-size: 16px; opacity: 0.6; }
.mg-error { color: var(--mg-red); font-size: 12.5px; margin: 6px 14px; }
.mg-success { color: var(--mg-green); font-size: 12.5px; margin: 6px 14px; }
.mg-hint { font-size: 12px; color: var(--mg-text-faint); }
.mg-divider {
	display: flex; align-items: center; gap: 12px;
	margin: 16px 14px; color: var(--mg-text-faint); font-size: 12px;
}
.mg-divider::before, .mg-divider::after {
	content: ''; flex: 1; height: 1px; background: #e2e8f0;
}
.mg-checkbox-row {
	display: flex; align-items: flex-start; gap: 8px;
	margin: 8px 14px 16px; font-size: 13px; color: var(--mg-text-dim);
}
.mg-checkbox-row input { accent-color: var(--mg-green); margin-top: 2px; }

/* ---------- Hero banner (dashboard) ---------- */
.mg-hero {
	margin: 12px 14px;
	border-radius: 22px;
	overflow: hidden;
	background: linear-gradient(135deg, #bbf7d0 0%, #bfdbfe 50%, #a5f3fc 100%);
	padding: 18px;
	position: relative;
	box-shadow: var(--mg-shadow);
}
.mg-hero__title {
	font-size: 18px; font-weight: 800; color: var(--mg-green-dark);
	line-height: 1.25; max-width: 55%;
}
.mg-hero__emoji { font-size: 64px; position: absolute; right: 12px; bottom: 8px; }
.mg-hero-stats {
	display: flex; align-items: center; justify-content: space-between;
	margin-top: 14px; gap: 10px;
}
.mg-hero-milk {
	background: rgba(255,255,255,0.85);
	border-radius: 14px; padding: 10px 14px;
	font-weight: 700; font-size: 15px;
}
.mg-hero-milk span { display: block; font-size: 11px; color: var(--mg-text-dim); font-weight: 500; }

/* ---------- Action grid ---------- */
.mg-actions {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin: 0 14px 14px;
}
.mg-action-card {
	background: #fff;
	border-radius: 16px;
	padding: 14px 8px;
	text-align: center;
	box-shadow: var(--mg-shadow);
	border: 1px solid var(--mg-border);
	cursor: pointer;
}
.mg-action-card .emoji { font-size: 32px; display: block; margin-bottom: 6px; }
.mg-action-card .t { font-weight: 700; font-size: 12px; color: var(--mg-text); }
.mg-action-card .s { font-size: 10.5px; color: var(--mg-text-dim); margin-top: 2px; }
.mg-action-card .dot {
	width: 28px; height: 28px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 14px; margin-bottom: 4px; color: #fff;
}
.mg-action-card .dot.blue { background: var(--mg-blue); }
.mg-action-card .dot.purple { background: var(--mg-purple); }
.mg-action-card .dot.orange { background: var(--mg-amber); }

/* ---------- Invite bar ---------- */
.mg-invite-bar {
	margin: 0 14px 14px;
	background: linear-gradient(135deg, #f0fdf4, #eff6ff);
	border-radius: 16px;
	padding: 14px;
	display: flex; align-items: center; gap: 12px;
	border: 1px solid var(--mg-border);
}
.mg-invite-bar .ico { font-size: 36px; }
.mg-invite-bar .txt { flex: 1; }
.mg-invite-bar .txt b { display: block; font-size: 14px; }
.mg-invite-bar .txt span { font-size: 11.5px; color: var(--mg-text-dim); }

/* ---------- Bottom nav ---------- */
#mg-bottomnav-slot, .mg-bottomnav {
	position: fixed;
	bottom: 0; left: 50%; transform: translateX(-50%);
	width: 100%; max-width: var(--mg-maxw);
	background: #fff;
	border-top: 1px solid var(--mg-border);
	box-shadow: 0 -4px 24px rgba(15,23,42,0.08);
	display: flex; justify-content: space-around;
	padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
	z-index: 60;
}
.mg-navitem {
	flex: 1; text-align: center; padding: 6px 2px;
	font-size: 10.5px; color: var(--mg-text-faint);
	cursor: pointer; font-weight: 600;
}
.mg-navitem .ico { display: block; font-size: 22px; margin-bottom: 2px; }
.mg-navitem.active { color: var(--mg-green); }

/* ---------- Animal cards ---------- */
.mg-animal-card {
	background: #fff;
	border-radius: 16px;
	padding: 14px;
	margin: 0 14px 12px;
	display: flex; gap: 12px; align-items: center;
	box-shadow: var(--mg-shadow);
	border: 1px solid var(--mg-border);
	cursor: pointer;
}
.mg-animal-ill { font-size: 56px; line-height: 1; flex-shrink: 0; }
.mg-animal-card__body { flex: 1; min-width: 0; }
.mg-animal-card__name { font-weight: 800; font-size: 15px; color: var(--mg-blue-dark); }
.mg-animal-card__price {
	display: inline-block; margin-top: 4px;
	background: var(--mg-green-light); color: var(--mg-green-dark);
	font-weight: 700; font-size: 13px; padding: 4px 10px; border-radius: 8px;
}
.mg-animal-meta {
	display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.mg-chip {
	display: inline-flex; align-items: center; gap: 4px;
	background: #f0fdf4; color: var(--mg-green-dark);
	font-size: 11.5px; font-weight: 600;
	padding: 4px 8px; border-radius: 8px;
}

/* ---------- Farm list ---------- */
.mg-farm-stats {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 8px; margin: 0 14px 14px;
}
.mg-farm-stat {
	background: #fff; border-radius: 12px; padding: 10px 6px;
	text-align: center; box-shadow: var(--mg-shadow); border: 1px solid var(--mg-border);
}
.mg-farm-stat .ico { font-size: 22px; color: var(--mg-green); }
.mg-farm-stat .n { font-weight: 800; font-size: 16px; margin-top: 2px; }
.mg-farm-stat .l { font-size: 10px; color: var(--mg-text-dim); }

.mg-filter-row {
	display: flex; gap: 8px; margin: 0 14px 12px; overflow-x: auto;
}
.mg-filter-btn {
	padding: 8px 16px; border-radius: var(--mg-radius-pill);
	border: 1.5px solid #e2e8f0; background: #fff;
	font-weight: 600; font-size: 13px; white-space: nowrap; cursor: pointer;
}
.mg-filter-btn.active {
	background: linear-gradient(135deg, var(--mg-green-mid), var(--mg-green));
	color: #fff; border-color: transparent;
}

.mg-unit-card {
	background: #fff; border-radius: 16px; padding: 14px;
	margin: 0 14px 12px; box-shadow: var(--mg-shadow); border: 1px solid var(--mg-border);
	display: flex; gap: 12px;
}
.mg-unit-card .ill { font-size: 52px; }
.mg-unit-card .info { flex: 1; }
.mg-unit-card .name { font-weight: 800; font-size: 15px; color: var(--mg-blue-dark); }
.mg-status-pill {
	display: inline-flex; align-items: center; gap: 4px;
	font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 8px;
}
.mg-status-pill.active { background: #dcfce7; color: #15803d; }
.mg-status-pill.pending { background: #fef3c7; color: #b45309; }
.mg-status-pill.inactive { background: #f1f5f9; color: #64748b; }

/* ---------- Buyers ---------- */
.mg-buyer-grid {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 10px; margin: 0 14px 14px;
}
.mg-buyer-card {
	background: #fff; border-radius: 14px; padding: 12px 8px;
	text-align: center; border: 2px solid #e2e8f0; cursor: pointer;
}
.mg-buyer-card.selected {
	border-color: var(--mg-green); background: #f0fdf4;
}
.mg-buyer-card .ico { font-size: 28px; }
.mg-buyer-card .name { font-weight: 700; font-size: 13px; margin-top: 4px; }
.mg-buyer-card .meta { font-size: 11px; color: var(--mg-text-dim); margin-top: 4px; }

/* ---------- Qty stepper ---------- */
.mg-qty {
	display: flex; align-items: center; justify-content: center; gap: 12px;
	margin: 12px 14px;
}
.mg-qty button {
	width: 40px; height: 40px; border-radius: 12px;
	background: var(--mg-green); color: #fff; border: none;
	font-size: 20px; font-weight: 700; cursor: pointer;
}
.mg-qty input {
	width: 70px; text-align: center; font-size: 20px; font-weight: 800;
	border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 8px;
}

/* ---------- Summary rows ---------- */
.mg-summary {
	background: #f0fdf4; border-radius: 14px; padding: 12px 14px;
	margin: 0 14px 14px;
}
.mg-summary-row {
	display: flex; justify-content: space-between; align-items: center;
	padding: 8px 0; font-size: 13.5px; border-bottom: 1px solid rgba(22,163,74,0.1);
}
.mg-summary-row:last-child { border-bottom: none; font-weight: 700; }
.mg-summary-row .label { color: var(--mg-text-dim); display: flex; align-items: center; gap: 6px; }
.mg-summary-row .val { font-weight: 700; color: var(--mg-text); }

/* ---------- Payment method cards ---------- */
.mg-pm-grid {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 10px; margin: 0 14px 14px;
}
.mg-pm-card {
	background: #fff; border-radius: 14px; padding: 14px 8px;
	text-align: center; border: 2px solid #e2e8f0; cursor: pointer;
	font-weight: 600; font-size: 12.5px;
}
.mg-pm-card.selected { border-color: var(--mg-green); background: #f0fdf4; }
.mg-pm-card .ico { font-size: 28px; display: block; margin-bottom: 4px; }

/* ---------- Modal / popup ---------- */
/* old backdrop replaced */ .mg-modal-backdrop-old {
	position: fixed; inset: 0; background: rgba(15,23,42,0.45);
	z-index: 100; display: flex; align-items: center; justify-content: center;
	padding: 20px;
}
.mg-modal {
	background: #fff; border-radius: 20px; padding: 20px;
	width: 100%; max-width: 360px; box-shadow: var(--mg-shadow-lg);
	position: relative;
}
.mg-modal__x {
	position: absolute; top: 12px; right: 14px;
	font-size: 20px; cursor: pointer; color: var(--mg-text-dim);
}
.mg-modal__title { font-weight: 800; font-size: 17px; margin-bottom: 12px; }

/* ---------- Side menu ---------- */
.mg-overlay {
	position: fixed; inset: 0; background: rgba(15,23,42,0.4);
	z-index: 80; display: none;
}
.mg-overlay.show { display: block; }
.mg-sidemenu {
	position: fixed; top: 0; left: 0; bottom: 0;
	width: min(300px, 85vw); background: #fff;
	z-index: 90; transform: translateX(-105%);
	transition: transform 0.25s ease;
	overflow-y: auto; padding: 20px 0;
	box-shadow: 8px 0 32px rgba(15,23,42,0.12);
}
.mg-sidemenu.open { transform: translateX(0); }
.mg-menu-item {
	display: flex; align-items: center; gap: 12px;
	padding: 14px 20px; font-weight: 600; font-size: 14.5px;
	color: var(--mg-text); cursor: pointer;
	border-bottom: 1px solid #f1f5f9;
}
.mg-menu-item .ico { font-size: 22px; width: 28px; text-align: center; }
.mg-menu-item.danger { color: var(--mg-red); }

/* ---------- Toast ---------- */
#mg-toast {
	position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%);
	background: #0f172a; color: #fff; padding: 10px 18px;
	border-radius: 12px; font-size: 13.5px; font-weight: 600;
	z-index: 200; opacity: 0; pointer-events: none;
	transition: opacity 0.25s; max-width: 90%; text-align: center;
}
#mg-toast.show { opacity: 1; }

/* ---------- Notif / TX list ---------- */
.mg-list-item {
	display: flex; gap: 12px; align-items: flex-start;
	background: #fff; border-radius: 14px; padding: 12px 14px;
	margin: 0 14px 10px; box-shadow: var(--mg-shadow); border: 1px solid var(--mg-border);
}
.mg-list-item .ico {
	width: 42px; height: 42px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 20px; background: var(--mg-green-light); flex-shrink: 0;
}
.mg-list-item .body { flex: 1; min-width: 0; }
.mg-list-item .title { font-weight: 700; font-size: 13.5px; }
.mg-list-item .sub { font-size: 12px; color: var(--mg-text-dim); margin-top: 2px; }
.mg-list-item .time { font-size: 11px; color: var(--mg-text-faint); white-space: nowrap; }

/* ---------- Auth hero top ---------- */
.mg-auth-hero {
	text-align: center;
	padding: 24px 16px 8px;
	background: linear-gradient(180deg, #bbf7d0 0%, #bfdbfe 60%, transparent 100%);
	border-radius: 0 0 28px 28px;
	margin-bottom: 8px;
}
.mg-auth-hero .cow { font-size: 72px; line-height: 1; }
.mg-auth-card {
	background: #fff;
	border-radius: 24px 24px 0 0;
	margin-top: -12px;
	padding: 20px 0 40px;
	box-shadow: 0 -8px 32px rgba(15,23,42,0.06);
	min-height: 60vh;
}

/* ---------- Section title ---------- */
.mg-section-title {
	font-weight: 800; font-size: 15px; margin: 8px 14px 10px;
	display: flex; align-items: center; gap: 8px;
	color: var(--mg-blue-dark);
}

/* ---------- Success screen ---------- */
.mg-success-hero {
	text-align: center; padding: 32px 20px 16px;
}
.mg-success-hero .check {
	width: 72px; height: 72px; border-radius: 50%;
	background: linear-gradient(135deg, var(--mg-green-mid), var(--mg-green));
	color: #fff; font-size: 36px;
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: 0 8px 24px rgba(22,163,74,0.35);
	margin-bottom: 12px;
}

/* ---------- Upload zone ---------- */
.mg-upload {
	margin: 12px 14px;
	border: 2px dashed #86efac;
	border-radius: 16px;
	padding: 28px 16px;
	text-align: center;
	background: #f0fdf4;
	cursor: pointer;
	color: var(--mg-green-dark);
}
.mg-upload .ico { font-size: 36px; display: block; margin-bottom: 6px; }

/* ---------- Misc ---------- */
.mg-mt-8 { margin-top: 8px; }
.mg-mb-8 { margin-bottom: 8px; }
.mg-px { padding-left: 14px; padding-right: 14px; }
.mg-fullscreen-center {
	display: flex; align-items: center; justify-content: center;
	min-height: 60vh;
}
.mg-spinner {
	width: 36px; height: 36px; border: 3px solid #e2e8f0;
	border-top-color: var(--mg-green); border-radius: 50%;
	animation: mgspin 0.7s linear infinite;
}
@keyframes mgspin { to { transform: rotate(360deg); } }

.mg-emoji { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.mg-leaf-corner, .mg-decor-bottom, .mg-decor-bottom-bar,
.mg-menu-decor-top, .mg-menu-decor-bottom { display: none !important; }

.mg-hr { border: none; border-top: 1px solid #f1f5f9; margin: 8px 16px; }

/* Safe bottom space for fixed nav */
#mg-view { padding-bottom: 16px; }


/* ===== Centered buy popup (mockup style) ===== */
.mg-modal-backdrop,
#mg-buy-modal.mg-modal-backdrop,
#mg-buy-modal.mg-modal {
	position: fixed !important;
	inset: 0 !important;
	background: rgba(15, 23, 42, 0.5) !important;
	z-index: 200 !important;
	display: none;
	align-items: center !important;
	justify-content: center !important;
	padding: 20px !important;
	margin: 0 !important;
}
#mg-buy-modal[style*="flex"],
.mg-modal-backdrop[style*="flex"] {
	display: flex !important;
}
body.mg-modal-open {
	overflow: hidden !important;
}
.mg-modal {
	background: #fff !important;
	border-radius: 22px !important;
	padding: 22px 18px 18px !important;
	width: 100% !important;
	max-width: 340px !important;
	box-shadow: 0 20px 60px rgba(15,23,42,0.25) !important;
	position: relative !important;
	margin: auto !important;
	animation: mgPopIn 0.22s ease;
}
@keyframes mgPopIn {
	from { opacity: 0; transform: scale(0.92) translateY(12px); }
	to { opacity: 1; transform: scale(1) translateY(0); }
}
.mg-modal__x {
	position: absolute; top: 12px; right: 14px;
	font-size: 20px; cursor: pointer; color: #94a3b8;
	width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
	border-radius: 50%; background: #f1f5f9;
}
.mg-modal__title {
	font-weight: 800; font-size: 17px; margin-bottom: 14px;
	padding-right: 28px; color: #0f172a;
}
.mg-stepper {
	display: flex; align-items: center; gap: 10px;
}
.mg-stepper button {
	width: 36px; height: 36px; border-radius: 10px;
	border: none; background: #dcfce7; color: #15803d;
	font-size: 20px; font-weight: 700; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.mg-stepper .val {
	min-width: 28px; text-align: center;
	font-weight: 800; font-size: 18px;
}

/* Bottom sheet override - force center never bottom */
.mg-modal__sheet {
	background: #fff;
	border-radius: 22px;
	padding: 20px;
	width: 100%;
	max-width: 340px;
	margin: auto;
	position: relative;
}
.mg-modal__backdrop {
	position: absolute; inset: 0;
}


/* In-app admin */
.mg-admin-tabs {
	display: flex; flex-wrap: wrap; gap: 6px;
	margin: 0 14px 14px; overflow-x: auto;
}
.mg-admin-tab {
	padding: 8px 12px; border-radius: 999px; border: 1.5px solid #e2e8f0;
	background: #fff; font-weight: 600; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.mg-admin-tab.on {
	background: linear-gradient(135deg, #16a34a, #15803d);
	color: #fff; border-color: transparent;
}
.mg-btn-outline, .mg-btn.mg-btn-outline {
	background: #fff !important;
	color: #15803d !important;
	border: 2px solid #86efac !important;
	box-shadow: none !important;
}
.mg-stat-row { display: flex; gap: 8px; margin: 0 14px 14px; }
.mg-stat {
	flex: 1; background: #fff; border-radius: 12px; padding: 12px 8px;
	text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,.05);
	border: 1px solid rgba(15,23,42,.06);
}
.mg-stat .n { font-weight: 800; font-size: 18px; color: #0f172a; }
.mg-stat .l { font-size: 10.5px; color: #64748b; margin-top: 2px; }


/* ===== Auth banners + real images ===== */
.mg-auth-wrap { padding-bottom: 24px; }
.mg-banner {
	width: 100%;
	border-radius: 0 0 20px 20px;
	overflow: hidden;
	line-height: 0;
}
.mg-banner__img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	max-height: 220px;
}
.mg-brand-center {
	text-align: center;
	margin: 12px 0 4px;
}
.mg-logo-full {
	max-width: 260px;
	width: 80%;
	height: auto;
	display: inline-block;
}
.mg-logo, .mg-logo--sm {
	max-width: 160px;
	height: auto;
}
.mg-field-ico {
	width: 28px !important;
	height: 28px !important;
	object-fit: contain;
	flex-shrink: 0;
}
.mg-switch-ico {
	width: 40px;
	height: 40px;
	object-fit: contain;
}
.mg-img-btn {
	display: block;
	width: 100%;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	line-height: 0;
	margin: 8px 0;
}
.mg-img-btn__img {
	width: 100%;
	height: auto;
	display: block;
	max-height: 64px;
	object-fit: contain;
}
.mg-auth-switch {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: stretch;
}
.mg-secure-note {
	text-align: center;
	margin-top: 16px;
	font-size: 12px;
	color: var(--mg-text-faint, #94a3b8);
}
.mg-auth-card {
	margin-top: -12px;
	position: relative;
	z-index: 1;
}


/* ===== Auth screens — mobile fit (no long scroll) ===== */
.mg-auth-screen {
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, #7dd3fc 0%, #bae6fd 35%, #f0fdf4 70%, #fff 100%);
	padding: 0 0 12px;
	box-sizing: border-box;
}
.mg-auth-top {
	padding: 10px 16px 6px;
	text-align: center;
	flex-shrink: 0;
}
.mg-auth-logo {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	margin-bottom: 4px;
}
.mg-auth-logo .cow { font-size: 28px; }
.mg-auth-logo b { font-size: 18px; display: block; line-height: 1.1; }
.mg-auth-logo .g { color: #16a34a; }
.mg-auth-logo .b { color: #2563eb; }
.mg-auth-logo small { display: block; font-size: 9.5px; color: #475569; font-weight: 500; }
.mg-auth-hero-row {
	display: flex; align-items: flex-end; justify-content: center; gap: 6px;
	line-height: 1; margin: 2px 0;
}
.mg-auth-hero-row .big-cow { font-size: 52px; }
.mg-auth-hero-row .milk { font-size: 32px; margin-bottom: 4px; }
.mg-auth-tag {
	font-size: 12px; font-weight: 700; color: #15803d;
	font-style: italic; margin-top: 2px;
}
.mg-auth-card {
	flex: 1;
	background: #fff;
	border-radius: 22px 22px 16px 16px;
	margin: 0 10px;
	padding: 14px 14px 12px;
	box-shadow: 0 -4px 24px rgba(15,23,42,0.08);
	border: 1px solid rgba(255,255,255,0.8);
}
.mg-auth-title {
	text-align: center; font-weight: 800; font-size: 20px; color: #1e3a8a;
	margin-bottom: 2px;
}
.mg-auth-title .g { color: #16a34a; }
.mg-auth-title .b { color: #2563eb; }
.mg-auth-title .leaf { font-size: 14px; }
.mg-auth-sub {
	text-align: center; font-size: 12px; color: #64748b;
	margin: 0 0 10px; line-height: 1.35;
}
.mg-auth-screen .mg-field { margin-bottom: 8px; }
.mg-auth-screen .mg-input-wrap {
	padding: 8px 12px; border-radius: 999px;
	border: 1.5px solid #bfdbfe; background: #f8fafc;
	min-height: 42px;
}
.mg-auth-screen .mg-input-wrap input { font-size: 13.5px; }
.mg-auth-row {
	display: flex; justify-content: space-between; align-items: center;
	margin: 6px 0 10px; font-size: 12px;
}
.mg-auth-row a { color: #2563eb; font-weight: 600; text-decoration: none; }
.mg-check {
	display: flex; align-items: center; gap: 6px; font-size: 12px; color: #334155;
}
.mg-btn-green, .mg-btn.mg-btn-green {
	width: 100%;
	background: linear-gradient(180deg, #4ade80, #16a34a) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 12px 16px !important;
	font-weight: 800 !important;
	font-size: 15px !important;
	box-shadow: 0 6px 16px rgba(22,163,74,0.35) !important;
	margin-top: 4px;
}
.mg-or {
	display: flex; align-items: center; gap: 10px;
	margin: 10px 0; color: #94a3b8; font-size: 11px; font-weight: 700;
}
.mg-or::before, .mg-or::after {
	content: ''; flex: 1; height: 1px; background: #e2e8f0;
}
.mg-or span {
	background: #f1f5f9; border-radius: 999px; padding: 2px 10px;
}
.mg-auth-alt {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	background: #f0f9ff; border-radius: 14px; padding: 10px 10px;
	border: 1px solid #dbeafe;
}
.mg-auth-alt .left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.mg-auth-alt .bubble {
	width: 36px; height: 36px; border-radius: 50%;
	background: #2563eb; color: #fff; display: flex; align-items: center;
	justify-content: center; font-size: 14px; flex-shrink: 0;
}
.mg-auth-alt b { display: block; font-size: 12px; color: #1e40af; }
.mg-auth-alt small { display: block; font-size: 10.5px; color: #64748b; }
.mg-btn-blue-sm {
	background: linear-gradient(180deg, #60a5fa, #2563eb) !important;
	color: #fff !important; border: none !important;
	border-radius: 999px !important;
	padding: 8px 12px !important;
	font-weight: 700 !important; font-size: 12.5px !important;
	white-space: nowrap; flex-shrink: 0;
	box-shadow: 0 4px 12px rgba(37,99,235,0.3);
	cursor: pointer;
}
.mg-auth-foot {
	text-align: center; font-size: 11px; color: #64748b;
	margin-top: 10px; font-weight: 600;
}

/* Short phones: even tighter */
@media (max-height: 700px) {
	.mg-auth-hero-row .big-cow { font-size: 36px; }
	.mg-auth-hero-row .milk { font-size: 22px; }
	.mg-auth-tag { display: none; }
	.mg-auth-title { font-size: 17px; }
	.mg-auth-sub { font-size: 11px; margin-bottom: 6px; }
	.mg-auth-card { padding: 10px 12px 8px; }
	.mg-auth-screen .mg-input-wrap { min-height: 38px; padding: 6px 10px; }
	.mg-btn-green, .mg-btn.mg-btn-green { padding: 10px 14px !important; font-size: 14px !important; }
}
@media (max-height: 600px) {
	.mg-auth-hero-row { display: none; }
	.mg-auth-top { padding: 6px 12px 2px; }
}


/* ===== Image-based auth (login/register) — mobile fit ===== */
.mg-auth-screen--img {
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, #7dd3fc 0%, #e0f2fe 40%, #f0fdf4 100%);
	padding-bottom: 12px;
}
.mg-auth-banner {
	width: 100%;
	max-height: 28vh;
	overflow: hidden;
	flex-shrink: 0;
	line-height: 0;
}
.mg-auth-banner__img {
	width: 100%;
	height: auto;
	max-height: 28vh;
	object-fit: cover;
	object-position: center top;
	display: block;
}
.mg-auth-screen--img .mg-auth-card {
	flex: 1;
	margin: -18px 10px 0;
	padding: 12px 14px 10px;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 8px 28px rgba(15,23,42,0.1);
	position: relative;
	z-index: 2;
}
.mg-auth-logo-wrap {
	text-align: center;
	margin: -4px 0 6px;
}
.mg-auth-logo {
	height: 36px;
	width: auto;
	max-width: 180px;
	object-fit: contain;
}
.mg-field-ico {
	width: 22px; height: 22px; object-fit: contain; flex-shrink: 0;
}
.mg-switch-ico {
	width: 36px; height: 36px; object-fit: contain; flex-shrink: 0;
}
.mg-img-btn {
	display: block; width: 100%;
	background: transparent; border: none; padding: 0;
	cursor: pointer; line-height: 0;
}
.mg-img-btn__img {
	width: 100%; height: auto; max-height: 52px;
	object-fit: contain; display: block; margin: 0 auto;
}
.mg-img-btn--sm {
	width: auto; flex-shrink: 0;
}
.mg-img-btn--sm .mg-img-btn__img {
	width: auto; height: 36px; max-width: 120px;
}
.mg-auth-screen--img .mg-field { margin-bottom: 7px; }
.mg-auth-screen--img .mg-input-wrap {
	min-height: 42px; padding: 6px 12px;
	border-radius: 999px; border: 1.5px solid #bfdbfe;
}

@media (max-height: 720px) {
	.mg-auth-banner { max-height: 22vh; }
	.mg-auth-banner__img { max-height: 22vh; }
	.mg-auth-logo { height: 28px; }
}
@media (max-height: 640px) {
	.mg-auth-banner { max-height: 18vh; }
	.mg-auth-banner__img { max-height: 18vh; }
	.mg-auth-sub { display: none; }
	.mg-auth-logo-wrap { margin-bottom: 2px; }
	.mg-img-btn__img { max-height: 44px; }
}


/* ===== Fix: full banner + centered larger logo ===== */
.mg-auth-screen--img .mg-auth-banner {
	max-height: none !important;
	height: auto !important;
	overflow: visible !important;
	line-height: 0;
	text-align: center;
	background: transparent;
}
.mg-auth-screen--img .mg-auth-banner__img {
	width: 100% !important;
	height: auto !important;
	max-height: none !important;
	object-fit: contain !important;
	object-position: center top !important;
	display: block;
	margin: 0 auto;
}
.mg-auth-screen--img .mg-auth-card {
	margin-top: -12px !important;
}
.mg-auth-logo-wrap {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	text-align: center !important;
	width: 100% !important;
	margin: 4px auto 10px !important;
}
.mg-auth-logo-wrap .mg-auth-logo,
.mg-auth-logo {
	display: block !important;
	margin: 0 auto !important;
	height: auto !important;
	width: min(70vw, 240px) !important;
	max-width: 240px !important;
	max-height: 72px !important;
	object-fit: contain !important;
	object-position: center !important;
}
@media (max-height: 700px) {
	.mg-auth-screen--img .mg-auth-banner__img {
		/* still show full image, just allow card to take space */
		width: 100% !important;
		max-height: none !important;
	}
	.mg-auth-logo {
		width: min(60vw, 200px) !important;
		max-height: 56px !important;
	}
}


/* ===== Dashboard with real images ===== */
.mg-topbar--dash { padding: 8px 10px; }
.mg-top-ico { width: 28px; height: 28px; object-fit: contain; }
.mg-top-avatar { width: 34px; height: 34px; object-fit: cover; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.mg-dash-brand { display: flex; align-items: center; gap: 8px; justify-content: center; }
.mg-dash-logo { width: 36px; height: 36px; object-fit: contain; border-radius: 50%; }
.mg-dash-brand-text b { font-size: 15px; display: block; line-height: 1.1; }
.mg-dash-brand-text .g { color: #16a34a; }
.mg-dash-brand-text .b { color: #2563eb; }
.mg-dash-brand-text small { font-size: 9px; color: #64748b; font-weight: 500; }

.mg-dash-hero { margin: 0 0 10px; }
.mg-dash-banner-wrap {
	position: relative;
	margin: 0 10px;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(15,23,42,0.1);
}
.mg-dash-banner {
	width: 100%;
	height: auto;
	display: block;
	vertical-align: top;
}
.mg-dash-balance-overlay {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding: 8px 10px 10px 14px;
	gap: 8px;
	/* sits on white wave area of banner */
	background: linear-gradient(to top, rgba(255,255,255,0.92) 40%, transparent);
}
.mg-dash-balance-text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	padding-left: 4px;
}
.mg-dash-balance-text .lbl {
	font-size: 11px;
	font-weight: 600;
	color: #64748b;
}
.mg-dash-balance-text .val {
	font-size: 26px;
	font-weight: 800;
	color: #1d4ed8;
}
.mg-dash-balance-text .unit {
	font-size: 12px;
	font-weight: 700;
	color: #475569;
}
.mg-collect-btn {
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	line-height: 0;
	flex-shrink: 0;
}
.mg-collect-img {
	height: 44px;
	width: auto;
	max-width: 150px;
	object-fit: contain;
	display: block;
}

.mg-dash-cards {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px;
	padding: 0 10px 10px;
}
.mg-dash-card {
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	line-height: 0;
}
.mg-dash-card-img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 14px;
}

.mg-dash-invite {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 10px 10px;
	padding: 10px 12px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 2px 12px rgba(15,23,42,0.06);
	border: 1px solid rgba(15,23,42,0.05);
	cursor: pointer;
}
.mg-invite-ico { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; }
.mg-dash-invite .txt { flex: 1; min-width: 0; }
.mg-dash-invite .txt b { display: block; font-size: 14px; color: #0f172a; }
.mg-dash-invite .txt span { font-size: 11.5px; color: #64748b; }
.mg-invite-btn { height: 36px; width: auto; object-fit: contain; flex-shrink: 0; }
.mg-download-img { width: 100%; height: auto; display: block; max-height: 52px; object-fit: contain; }

.mg-nav-ico {
	width: 26px; height: 26px; object-fit: contain; display: block; margin: 0 auto 2px;
}
.mg-bottomnav .mg-navitem {
	font-size: 9.5px;
}
.mg-bottomnav .mg-navitem.active .mg-nav-ico {
	filter: drop-shadow(0 2px 4px rgba(22,163,74,0.35));
}

@media (max-width: 380px) {
	.mg-dash-balance-text .val { font-size: 22px; }
	.mg-collect-img { height: 38px; max-width: 120px; }
}


/* ===== Dashboard fix v3.0.1 — match mockup ===== */
.mg-dash-hero { margin: 0 10px 12px; }
.mg-dash-banner-wrap {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(15,23,42,0.12);
	background: #e0f2fe;
}
.mg-dash-banner {
	width: 100% !important;
	height: auto !important;
	display: block !important;
	object-fit: cover;
	object-position: center top;
}
/* White wave strip overlapping bottom of banner */
.mg-dash-wave {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 12px 14px 16px;
	background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.85) 28%, #fff 55%);
	border-radius: 0 0 18px 18px;
}
.mg-dash-balance { flex: 1; min-width: 0; }
.mg-dash-bal-lbl {
	font-size: 12px;
	font-weight: 600;
	color: #64748b;
	margin-bottom: 2px;
}
.mg-dash-bal-row {
	display: flex;
	align-items: baseline;
	gap: 6px;
}
.mg-dash-bal-num {
	font-size: 28px;
	font-weight: 800;
	color: #1d4ed8;
	line-height: 1;
}
.mg-dash-bal-unit {
	font-size: 13px;
	font-weight: 700;
	color: #475569;
}
.mg-collect-btn {
	background: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	cursor: pointer;
	line-height: 0;
	flex-shrink: 0;
}
.mg-collect-img {
	height: 48px !important;
	width: auto !important;
	max-width: 160px;
	object-fit: contain;
	display: block;
}
.mg-dash-cards {
	display: grid !important;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px;
	padding: 0 10px 12px;
}
.mg-dash-card {
	background: none; border: none; padding: 0; cursor: pointer; line-height: 0;
}
.mg-dash-card-img {
	width: 100%; height: auto; display: block; border-radius: 14px;
}
.mg-dash-invite {
	display: flex; align-items: center; gap: 10px;
	margin: 0 10px 12px; padding: 12px;
	background: #fff; border-radius: 16px;
	box-shadow: 0 2px 12px rgba(15,23,42,0.06);
	cursor: pointer;
}
.mg-invite-ico { width: 52px; height: 52px; object-fit: contain; }
.mg-invite-btn { height: 40px; width: auto; object-fit: contain; }
.mg-dash-dl { margin: 0 10px 14px; text-align: center; }
.mg-download-img {
	width: 100% !important;
	max-width: 100%;
	height: auto !important;
	max-height: 56px !important;
	object-fit: contain !important;
	display: block;
	margin: 0 auto;
}


/* ===== Dashboard polish v3.0.2 ===== */
.mg-topbar--dash {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px !important;
	gap: 8px;
}
.mg-topbar--dash .mg-topbar__center {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}
.mg-top-logo-full {
	height: 42px !important;
	width: auto !important;
	max-width: 200px;
	object-fit: contain;
	display: block;
}
.mg-top-logo-full--sm { height: 32px !important; max-width: 160px; }
.mg-top-ico { width: 32px !important; height: 32px !important; object-fit: contain; }
.mg-top-avatar { width: 38px !important; height: 38px !important; }

/* Balance shifted right so bottle/glass on banner stay visible */
.mg-dash-wave {
	padding: 10px 12px 12px 28% !important;
	align-items: center !important;
}
.mg-dash-bal-num { font-size: 26px !important; }
.mg-collect-img { height: 46px !important; max-width: 150px; }

/* Invite: full wide image + blue button on right */
.mg-dash-invite {
	position: relative !important;
	display: block !important;
	margin: 0 10px 12px !important;
	padding: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
	overflow: visible;
}
.mg-invite-banner {
	width: 100% !important;
	height: auto !important;
	display: block !important;
	border-radius: 16px;
}
.mg-invite-btn {
	position: absolute !important;
	right: 8px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	height: 40px !important;
	width: auto !important;
	max-width: 42% !important;
	object-fit: contain !important;
	z-index: 2;
}

/* Download bigger */
.mg-download-img {
	width: 100% !important;
	max-height: 64px !important;
	object-fit: contain !important;
}

/* Bottom nav icons bigger */
.mg-nav-ico {
	width: 30px !important;
	height: 30px !important;
}
.mg-bottomnav .mg-navitem span { font-size: 10px; }


/* ===== Balance further right — bottle/glass fully visible ===== */
.mg-dash-wave {
	padding-left: 38% !important;
	padding-right: 10px !important;
	padding-top: 14px !important;
	padding-bottom: 10px !important;
	background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.55) 35%, rgba(255,255,255,0.95) 70%) !important;
}
.mg-dash-balance {
	padding-left: 8px !important;
}
.mg-dash-bal-lbl {
	font-size: 11px !important;
}
.mg-dash-bal-num {
	font-size: 24px !important;
}
.mg-collect-img {
	height: 42px !important;
	max-width: 140px !important;
}


/* ===== Balance: slight right only (not center) ===== */
.mg-dash-wave {
	padding-left: 22% !important;
	padding-right: 10px !important;
	padding-top: 12px !important;
	padding-bottom: 10px !important;
}
.mg-dash-balance {
	padding-left: 4px !important;
}
.mg-dash-bal-num {
	font-size: 26px !important;
}
.mg-collect-img {
	height: 44px !important;
	max-width: 145px !important;
}


/* ===== Bottle/glass 100% visible ===== */
.mg-dash-wave {
	padding-left: 32% !important;
	padding-right: 8px !important;
	/* lighter overlay so bottle not washed out */
	background: linear-gradient(90deg,
		transparent 0%,
		transparent 28%,
		rgba(255,255,255,0.5) 38%,
		rgba(255,255,255,0.92) 55%) !important;
}
.mg-dash-balance {
	margin-left: 0 !important;
	padding-left: 0 !important;
}
.mg-dash-bal-lbl {
	font-size: 11px !important;
	color: #64748b !important;
}
.mg-dash-bal-num {
	font-size: 25px !important;
	color: #1d4ed8 !important;
}
.mg-dash-bal-unit {
	font-size: 12px !important;
}
.mg-collect-img {
	height: 42px !important;
	max-width: 135px !important;
}

/* Register/Login main action button — always tappable */
.mg-btn-register-main,
#mg-btn-register,
#mg-btn-login {
	width: 100% !important;
	min-height: 52px !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	border-radius: 999px !important;
	margin: 8px 0 4px !important;
	z-index: 5;
	position: relative;
	pointer-events: auto !important;
}
.mg-error {
	display: block !important;
	min-height: 16px;
	padding: 4px 0;
}
.mg-img-btn, .mg-img-btn__img {
	pointer-events: auto !important;
	cursor: pointer !important;
}

/* Large Login / Register image buttons */
.mg-img-btn--main {
	width: 100% !important;
	display: block !important;
	padding: 0 !important;
	margin: 10px 0 6px !important;
	border: none !important;
	background: transparent !important;
	cursor: pointer !important;
	line-height: 0 !important;
	min-height: 56px !important;
}
.mg-img-btn__img--main {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: 64px !important;
	object-fit: contain !important;
	display: block !important;
	margin: 0 auto !important;
}

/* Auth action buttons = full image, always clickable */
.mg-auth-action-btn {
	display: block !important;
	width: 100% !important;
	height: 58px !important;
	min-height: 58px !important;
	max-height: 64px !important;
	border: none !important;
	padding: 0 !important;
	margin: 10px 0 6px !important;
	border-radius: 999px !important;
	cursor: pointer !important;
	background-color: transparent !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	background-size: contain !important;
	-webkit-tap-highlight-color: transparent;
	pointer-events: auto !important;
	position: relative;
	z-index: 10;
}
.mg-auth-action-btn:active {
	transform: scale(0.98);
	opacity: 0.9;
}
.mg-auth-action-btn:disabled {
	opacity: 0.55;
	pointer-events: none;
}

/* Final auth buttons — image look + reliable click */
.mg-auth-action-btn {
	display: block !important;
	width: 100% !important;
	height: 56px !important;
	min-height: 56px !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 12px 0 8px !important;
	border-radius: 999px !important;
	cursor: pointer !important;
	background-color: #16a34a !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	background-size: contain !important;
	-webkit-tap-highlight-color: transparent;
	pointer-events: auto !important;
	touch-action: manipulation !important;
	position: relative !important;
	z-index: 20 !important;
	outline: none !important;
	box-shadow: 0 4px 14px rgba(22,163,74,0.35);
}
.mg-auth-action-btn:active { transform: scale(0.98); opacity: 0.92; }
.mg-auth-action-btn:disabled { opacity: 0.5; pointer-events: none; }

/* Auth buttons: only user image, full width, always clickable */
.mg-auth-img-btn {
	display: block !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 12px 0 8px !important;
	border: none !important;
	background: transparent !important;
	cursor: pointer !important;
	line-height: 0 !important;
	-webkit-tap-highlight-color: transparent;
	position: relative;
	z-index: 20;
}
.mg-auth-img-btn img {
	width: 100% !important;
	height: auto !important;
	max-height: 72px !important;
	object-fit: contain !important;
	display: block !important;
	margin: 0 auto !important;
	pointer-events: none !important; /* click goes to button */
	user-select: none;
	-webkit-user-drag: none;
}
.mg-auth-img-btn:active { opacity: 0.92; transform: scale(0.99); }
.mg-auth-img-btn:disabled { opacity: 0.55; }

/* Auth main buttons — exact image, no black bars, no stretch */
.mg-auth-img-btn {
	display: block !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 14px 0 10px !important;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	cursor: pointer !important;
	line-height: 0 !important;
	overflow: visible !important;
	-webkit-tap-highlight-color: transparent;
	position: relative;
	z-index: 20;
}
.mg-auth-img-btn img {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: none !important;
	object-fit: contain !important;
	object-position: center !important;
	display: block !important;
	margin: 0 auto !important;
	pointer-events: none !important;
	user-select: none;
	-webkit-user-drag: none;
	background: transparent !important;
}
.mg-auth-img-btn:active { opacity: 0.92; transform: scale(0.985); }
.mg-auth-img-btn:disabled { opacity: 0.55; }
.mg-px { padding-left: 4px; padding-right: 4px; }

/* FINAL auth buttons v3.1.9 — exact image, full width */
button.mg-auth-img-btn#mg-btn-login,
button.mg-auth-img-btn#mg-btn-register,
.mg-auth-img-btn {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 12px 0 8px !important;
	border: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	line-height: 0 !important;
	overflow: visible !important;
	cursor: pointer !important;
	-webkit-tap-highlight-color: transparent !important;
}
button.mg-auth-img-btn#mg-btn-login img,
button.mg-auth-img-btn#mg-btn-register img,
.mg-auth-img-btn img {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: none !important;
	min-height: 48px !important;
	object-fit: contain !important;
	object-position: center center !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	pointer-events: none !important;
	user-select: none !important;
}

/* ---------------------------------------------------------------------
 * Added for client reference-image wiring (banners, tier icons, chips,
 * popup buttons, filter tabs, purchase-summary rows, etc.)
 * ------------------------------------------------------------------- */
.mg-flow-logo { max-width: 210px; width: 60%; height: auto; margin: 6px auto 4px; display: block; }
.mg-page-banner { width: 100%; height: auto; display: block; border-radius: 0 0 22px 22px; margin-bottom: 10px; }
.mg-chip-ico { width: 15px; height: 15px; object-fit: contain; vertical-align: -3px; margin-right: 2px; }
.mg-popup-logo-ico { width: 20px; height: 20px; object-fit: contain; }
.mg-qty-btn-img { width: 36px; height: 36px; object-fit: contain; }
.mg-popup-buy-img { width: 52%; max-width: 180px; height: auto; display: block; margin: 8px auto 4px; }
.mg-section-ico { width: 22px; height: 22px; object-fit: contain; vertical-align: -5px; margin-right: 6px; }
.mg-field-ico-img { width: 20px; height: 20px; object-fit: contain; }
/* Mark All as Read image button on notifications */
.mg-img-btn[data-action="mark-all-read"] { display: inline-block; width: auto; max-width: 92%; }
.mg-img-btn[data-action="mark-all-read"] .mg-img-btn__img { width: 100%; max-width: 320px; height: auto; display: block; margin: 0 auto; }
.mg-pay-logo-img { width: 40px; height: 40px; object-fit: contain; border-radius: 10px; }
.mg-summary-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--mg-border, #e2e8f0); }
.mg-summary-row:last-child { border-bottom: none; }
.mg-summary-row .l { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mg-text-dim, #64748b); }
.mg-summary-row .v { font-weight: 700; }
.mg-btn-img-sm { height: 34px; width: auto; object-fit: contain; cursor: pointer; }
.mg-filter-tabs { display: flex; gap: 8px; margin: 10px 0; overflow-x: auto; padding-bottom: 2px; }
.mg-filter-tab-img { height: 40px; width: auto; object-fit: contain; cursor: pointer; flex-shrink: 0; opacity: .62; transition: opacity .15s, transform .15s; }
.mg-filter-tab-img.active { opacity: 1; transform: scale(1.04); }
.mg-farm-filter-row { display: flex; gap: 8px; margin: 10px 0 14px; }
.mg-farm-filter-row img { height: 42px; width: auto; object-fit: contain; cursor: pointer; flex: 1; opacity: .6; }
.mg-farm-filter-row img.active { opacity: 1; }
.mg-tier-notif-ico { width: 40px; height: 40px; object-fit: contain; border-radius: 50%; }
.mg-help-btn-img { width: 100%; height: auto; display: block; margin-bottom: 12px; }
.mg-help-btn-link { display: block; text-decoration: none; }
.mg-farm-stat-ico { width: 26px; height: 26px; object-fit: contain; margin-bottom: 4px; }
.mg-copy-img-btn { border: none; background: none; padding: 0; cursor: pointer; line-height: 0; flex-shrink: 0; margin-left: 8px; }
.mg-qty-img-btn { border: none; background: none; padding: 0; cursor: pointer; line-height: 0; }

/* ---- Added for client reference-image wiring ---- */
.mg-flow-logo { max-width: 220px; width: 60%; height: auto; margin: 6px auto 2px; display: block; }
.mg-chip-ico { width: 14px; height: 14px; object-fit: contain; vertical-align: -2px; margin-right: 2px; }
.mg-popup-logo-ico { width: 20px; height: 20px; object-fit: contain; }
.mg-qty-btn-img { width: 36px; height: 36px; object-fit: contain; }
.mg-popup-buy-img { width: 52%; max-width: 180px; height: auto; display: block; margin: 8px auto 4px; }
.mg-page-banner { width: 100%; height: auto; display: block; border-radius: 0 0 22px 22px; margin-bottom: 10px; }
.mg-field-ico-img { width: 18px; height: 18px; object-fit: contain; }
.mg-pay-logo-ico { width: 22px; height: 22px; object-fit: contain; border-radius: 6px; }
.mg-img-btn-plain { border: none; background: none; padding: 0; cursor: pointer; line-height: 0; display: block; width: 100%; }
.mg-img-btn-plain img { width: 100%; height: auto; display: block; }
.mg-copy-img-btn { border: none; background: none; padding: 0; cursor: pointer; line-height: 0; }
.mg-copy-img-btn img { height: 34px; width: auto; object-fit: contain; }
.mg-section-ico { width: 22px; height: 22px; object-fit: contain; vertical-align: -5px; margin-right: 6px; }
.mg-farm-filter-row { display: flex; gap: 8px; margin: 10px 0 14px; overflow-x: auto; }
.mg-farm-filter-row img { height: 40px; width: auto; object-fit: contain; cursor: pointer; opacity: .6; transition: opacity .15s, transform .15s; }
.mg-farm-filter-row img.selected { opacity: 1; transform: scale(1.03); }
.mg-tx-filter-row { display: flex; gap: 8px; margin: 10px 0 14px; overflow-x: auto; }
.mg-tx-filter-row img { height: 38px; width: auto; object-fit: contain; cursor: pointer; opacity: .55; transition: opacity .15s, transform .15s; }
.mg-tx-filter-row img.selected { opacity: 1; transform: scale(1.03); }
.mg-farm-stat-ico { width: 20px; height: 20px; object-fit: contain; vertical-align: -4px; margin-right: 4px; }
.mg-whatsapp-channel-btn { display: block; width: 100%; margin-top: 10px; }
.mg-whatsapp-channel-btn img { width: 100%; height: auto; display: block; }

/* ===== Mobile-friendly size fixes (client request) ===== */
.mg-animal-img {
	width: 72px !important;
	height: auto !important;
	max-width: 80px !important;
	object-fit: contain !important;
	display: block;
}
.mg-animal-img--lg {
	width: 48px !important;
	max-width: 52px !important;
}
.mg-animal-ill {
	font-size: 0 !important;
	line-height: 1;
	flex-shrink: 0;
	width: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mg-animal-ill .mg-animal-img {
	width: 72px !important;
	max-width: 78px !important;
}
.mg-buyer-img {
	width: 56px !important;
	height: auto !important;
	max-width: 64px !important;
	object-fit: contain !important;
	display: block;
	margin: 0 auto 6px;
}
.mg-buyer-card {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px !important;
	text-align: left !important;
}
.mg-buyer-card .mg-buyer-img {
	margin: 0;
	flex-shrink: 0;
}
.mg-buyer-card__body {
	flex: 1;
	min-width: 0;
}
.mg-hero-ico-lg,
.mg-animal-hero img,
.mg-hero-big img {
	width: 110px !important;
	max-width: 120px !important;
	height: auto !important;
	object-fit: contain !important;
	display: block;
	margin: 8px auto 4px;
}
.mg-animal-hero,
.mg-hero-big {
	text-align: center;
	margin: 8px 0 4px;
}
/* Popup animal image smaller */
#mg-buy-sheet .mg-animal-img,
.mg-modal .mg-animal-img {
	width: 70px !important;
	max-width: 76px !important;
}
/* Larger action buttons (image buttons) */
.mg-img-btn__img {
	max-height: 52px !important;
	height: auto !important;
	width: auto !important;
	max-width: 100%;
}
.mg-img-btn {
	display: block;
	width: 100%;
	text-align: center;
	margin: 10px 0;
}
/* Specific larger buttons */
.mg-btn-submit-lg .mg-img-btn__img,
button[data-action="submit-buy-payment"] .mg-img-btn__img,
button[data-action="submit-sell"] .mg-img-btn__img,
button[data-action="go-sell-account"] .mg-img-btn__img,
button[data-action="do-change-password"] .mg-img-btn__img,
button[data-action="nav-tab"][data-route="/dashboard"] .mg-img-btn__img {
	max-height: 56px !important;
	width: 100% !important;
	max-width: 320px;
	margin: 0 auto;
	display: block;
}
/* Collect milk a bit smaller */
.mg-collect-img,
button[data-action="collect-milk"] img,
.mg-popup-buy-img.mg-collect {
	max-height: 42px !important;
	height: auto !important;
}
/* Invite icons equal size */
.mg-stat-ico-sm {
	width: 36px !important;
	height: 36px !important;
	object-fit: contain !important;
	display: block;
	margin: 0 auto 4px;
}
/* Notif / tx icons smaller */
.mg-tx-ico,
.mg-row__icon img,
.mg-tier-notif-ico {
	width: 36px !important;
	height: 36px !important;
	max-width: 40px !important;
	object-fit: contain !important;
	border-radius: 50%;
}
.mg-row__icon {
	width: 42px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Invite Now button a bit larger */
button[data-action="share-invite"] .mg-img-btn__img {
	max-height: 50px !important;
}
/* Help page as background layout */
.mg-help-hero {
	position: relative;
	width: 100%;
	min-height: 420px;
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	border-radius: 0 0 22px 22px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	padding: 20px 16px 28px;
	box-sizing: border-box;
}
.mg-help-hero .mg-help-btns {
	width: 100%;
	max-width: 320px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.mg-help-hero .mg-help-btn-img {
	width: 100%;
	height: auto;
	display: block;
	margin: 0;
}
.mg-help-hero .mg-back-row {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
}
/* Profile: hide verified tick */
.mg-avatar-verified {
	display: none !important;
}
/* Prevent overflow on mobile */
.mg-animal-card,
.mg-unit-card,
.mg-card,
.mg-buyer-card {
	overflow: hidden;
	max-width: 100%;
}
.mg-page-head h1 {
	font-size: 20px;
	line-height: 1.25;
}
.mg-page-head p {
	font-size: 13px;
	padding: 0 8px;
}
/* Farm unit animal image */
.mg-unit-card .mg-animal-ill {
	width: 70px;
}
.mg-unit-card .mg-animal-img {
	width: 64px !important;
	max-width: 70px !important;
}

.mg-collect-img {
	width: 100% !important;
	max-width: 260px !important;
	height: auto !important;
	max-height: 48px !important;
	object-fit: contain !important;
	display: block;
	margin: 0 auto;
}


/* ===== Extra size fixes from latest feedback ===== */
.mg-hero-ico-lg,
.mg-animal-hero img,
.mg-hero-big img {
	width: 150px !important;
	max-width: 160px !important;
	height: auto !important;
	object-fit: contain !important;
	display: block;
	margin: 12px auto 6px;
}

/* Submit Sell Request + other main action buttons larger */
button[data-action="submit-sell"] .mg-img-btn__img,
button[data-action="submit-buy-payment"] .mg-img-btn__img,
.mg-img-btn[data-action="submit-sell"] img,
.mg-img-btn[data-action="submit-buy-payment"] img {
	max-height: 58px !important;
	width: 100% !important;
	max-width: 340px !important;
	height: auto !important;
	display: block;
	margin: 0 auto;
}

/* Copy Link button on Invite page larger */
.mg-copy-img-btn img,
.mg-btn-img-sm {
	height: 42px !important;
	max-height: 42px !important;
	width: auto !important;
	object-fit: contain !important;
}

/* Help buttons full width below image */
.mg-help-btns {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	max-width: 340px;
	margin: 0 auto;
}
.mg-help-btn-img {
	width: 100% !important;
	height: auto !important;
	display: block;
	margin: 0 !important;
}
.mg-help-btn-link {
	display: block;
	text-decoration: none;
	line-height: 0;
}

/* Dashboard recent activity icons */
.mg-dash-tx-ico {
	width: 40px !important;
	height: 40px !important;
	max-width: 44px !important;
	object-fit: contain !important;
	border-radius: 50%;
	display: block;
}
.mg-list-item .ico {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 0;
}

/* ============================================================
   PROFESSIONAL REDESIGN — match reference mockups (v3.3)
   ============================================================ */

/* --- Auth Login / Register buttons: smaller & balanced --- */
button.mg-auth-img-btn#mg-btn-login,
button.mg-auth-img-btn#mg-btn-register,
.mg-auth-img-btn {
	width: 100% !important;
	max-width: 100% !important;
	margin: 10px auto 6px !important;
	display: flex !important;
	justify-content: center !important;
}
button.mg-auth-img-btn#mg-btn-login img,
button.mg-auth-img-btn#mg-btn-register img,
.mg-auth-img-btn img {
	width: 82% !important;
	max-width: 280px !important;
	height: auto !important;
	max-height: 52px !important;
	min-height: 0 !important;
	object-fit: contain !important;
	margin: 0 auto !important;
}

/* --- Clean list rows (TX + Notifications) --- */
.mg-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: #fff;
	border-radius: 16px;
	padding: 14px 14px;
	margin: 0 14px 10px;
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
	border: 1px solid #e8eef5;
	position: relative;
}
.mg-row.unread {
	background: #f0fdf4;
	border-color: #bbf7d0;
}
.mg-row__icon {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #f0fdf4;
	overflow: hidden;
}
.mg-row__icon img,
.mg-tx-ico {
	width: 40px !important;
	height: 40px !important;
	object-fit: contain !important;
	border-radius: 50%;
}
.mg-row__body {
	flex: 1;
	min-width: 0;
}
.mg-row__title {
	font-weight: 700;
	font-size: 14px;
	color: #0f172a;
	line-height: 1.3;
	margin: 0;
}
.mg-row__sub {
	font-size: 12px;
	color: #64748b;
	margin-top: 3px;
	line-height: 1.35;
}
.mg-row__right {
	text-align: right;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	min-width: 78px;
}
.mg-row__amount {
	font-weight: 800;
	font-size: 14px;
	white-space: nowrap;
}
.mg-row__amount.debit { color: #dc2626; }
.mg-row__amount.credit { color: #16a34a; }
.mg-row__date {
	font-size: 11px;
	color: #94a3b8;
	white-space: nowrap;
}
.mg-row__unread-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #16a34a;
	flex-shrink: 0;
	margin-top: 6px;
}

/* Status / type pills */
.mg-pill {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
}
.mg-pill.active,
.mg-pill.completed,
.mg-pill.approved { background: #dcfce7; color: #15803d; }
.mg-pill.pending { background: #fce7f3; color: #be185d; }
.mg-pill.expired,
.mg-pill.rejected,
.mg-pill.inactive { background: #f1f5f9; color: #64748b; }
.mg-pill.type-buy { background: #e0f2fe; color: #0369a1; }
.mg-pill.type-sell { background: #dcfce7; color: #15803d; }
.mg-pill.type-referral { background: #f3e8ff; color: #7e22ce; }

/* --- My Farm: professional animal cards --- */
.mg-farm-card {
	background: #fff;
	border-radius: 18px;
	padding: 14px;
	margin: 0 14px 12px;
	box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
	border: 1px solid #e8eef5;
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.mg-farm-card__ill {
	width: 72px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mg-farm-card__ill img {
	width: 68px;
	height: 68px;
	object-fit: contain;
}
.mg-farm-card__main {
	flex: 1;
	min-width: 0;
}
.mg-farm-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}
.mg-farm-card__name {
	font-weight: 800;
	font-size: 15.5px;
	color: #0f172a;
	line-height: 1.2;
}
.mg-farm-card__meta {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.mg-farm-meta-row {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: #475569;
}
.mg-farm-meta-row .ico {
	width: 16px;
	height: 16px;
	object-fit: contain;
	flex-shrink: 0;
}
.mg-farm-meta-row .val {
	font-weight: 700;
	color: #0f172a;
	margin-left: auto;
}
.mg-farm-card__total {
	background: #f0fdf4;
	border-radius: 12px;
	padding: 8px 10px;
	text-align: center;
	flex-shrink: 0;
	min-width: 62px;
}
.mg-farm-card__total .ico {
	width: 22px;
	height: 22px;
	object-fit: contain;
	margin: 0 auto 2px;
	display: block;
}
.mg-farm-card__total .n {
	font-weight: 800;
	font-size: 13px;
	color: #15803d;
	line-height: 1.2;
}
.mg-farm-card__total .l {
	font-size: 10px;
	color: #64748b;
	font-weight: 600;
}
.mg-farm-card__footer {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px solid #f1f5f9;
	font-size: 11.5px;
	color: #64748b;
}
.mg-farm-card__footer b {
	color: #0f172a;
}

/* Stats row improvement */
.mg-stat-row.cols-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	margin: 0 12px 12px;
}
.mg-stat-row.cols-4 .mg-stat {
	padding: 10px 4px;
}
.mg-stat-row.cols-4 .mg-stat .n {
	font-size: 15px;
}
.mg-stat-row.cols-4 .mg-stat .l {
	font-size: 9.5px;
}

/* Mini grid fallback (kept clean) */
.mg-mini-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
.mg-mini-box {
	background: #f8fafc;
	border-radius: 10px;
	padding: 8px 10px;
}
.mg-mini-box .l {
	font-size: 10.5px;
	color: #64748b;
	font-weight: 600;
}
.mg-mini-box .n {
	font-size: 13.5px;
	font-weight: 800;
	color: #0f172a;
	margin-top: 2px;
}

/* Collect button centering */
.mg-collect-wrap {
	text-align: center;
	margin: 14px 0 8px;
}
.mg-collect-wrap .mg-collect-img {
	max-height: 48px !important;
	max-width: 260px;
	width: auto;
}


/* ============================================================
   FIXES v3.3.1 — menu logo, payment icons, invite, auth-alt,
   avatar circle crop, buyer/pay sizes
   ============================================================ */

/* Hamburger menu logo */
.mg-menu-brand {
	text-align: center;
	padding: 16px 12px 10px;
}
.mg-menu-logo {
	max-width: 150px;
	width: 68%;
	height: auto;
	display: block;
	margin: 0 auto;
}

/* Payment method cards — slightly larger icons */
.mg-pm-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin: 0 0 14px;
}
.mg-pm-card {
	background: #fff;
	border-radius: 14px;
	padding: 14px 8px 12px;
	text-align: center;
	border: 2px solid #e2e8f0;
	cursor: pointer;
	font-weight: 600;
	font-size: 12px;
}
.mg-pm-card.selected {
	border-color: #16a34a;
	background: #f0fdf4;
	box-shadow: 0 0 0 1px #16a34a;
}
.mg-pm-card .ico,
.mg-pm-card img,
.mg-pm-card .mg-pay-logo-img {
	width: 52px !important;
	height: 52px !important;
	object-fit: contain !important;
	display: block;
	margin: 0 auto 8px;
	border-radius: 10px;
}
.mg-pay-logo-img {
	width: 52px !important;
	height: 52px !important;
	object-fit: contain !important;
}

/* Home Invite button — a bit smaller */
.mg-dash-invite {
	position: relative;
	margin: 8px 12px 10px;
	display: flex;
	align-items: center;
}
.mg-invite-banner {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 16px;
}
.mg-invite-btn {
	position: absolute !important;
	right: 10px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	height: 28px !important;
	width: auto !important;
	max-width: 110px !important;
	object-fit: contain !important;
	flex-shrink: 0;
}

/* Login/Register bottom blue button → right side, text fixed */
.mg-auth-alt {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px !important;
	background: #eef6ff !important;
	border-radius: 16px !important;
	padding: 12px 12px !important;
	margin: 8px 0 4px !important;
}
.mg-auth-alt .left {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	flex: 1 !important;
	min-width: 0 !important;
}
.mg-auth-alt .left > div {
	min-width: 0;
}
.mg-auth-alt b {
	display: block !important;
	font-size: 12.5px !important;
	color: #1e40af !important;
	line-height: 1.25 !important;
	font-weight: 700 !important;
}
.mg-auth-alt small {
	display: block !important;
	font-size: 11px !important;
	color: #64748b !important;
	line-height: 1.3 !important;
	margin-top: 2px !important;
}
.mg-auth-alt .mg-img-btn,
.mg-auth-alt .mg-img-btn--sm,
.mg-auth-alt button,
.mg-auth-alt img {
	flex-shrink: 0 !important;
	margin-left: auto !important;
}
.mg-auth-alt .mg-img-btn__img,
.mg-auth-alt img.mg-img-btn__img,
.mg-auth-alt button img {
	height: 36px !important;
	width: auto !important;
	max-width: 120px !important;
	object-fit: contain !important;
	display: block !important;
}

/* Profile DP always circular, never overflow */
.mg-avatar-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
}
.mg-avatar-circle {
	width: 96px !important;
	height: 96px !important;
	border-radius: 50% !important;
	overflow: hidden !important;
	border: 3px solid #fff;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
	background: #e2e8f0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mg-avatar-circle img,
.mg-avatar-big {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center center !important;
	border-radius: 50% !important;
	display: block !important;
}

/* Topbar avatar circle crop */
.mg-top-avatar {
	width: 36px !important;
	height: 36px !important;
	object-fit: cover !important;
	border-radius: 50% !important;
	border: 2px solid #fff !important;
	box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

/* Notif icons consistent size */
.mg-row__icon img.mg-tx-ico,
.mg-tx-ico {
	width: 40px !important;
	height: 40px !important;
	object-fit: contain !important;
	border-radius: 50%;
}


/* Payment icons inside pm cards — force larger */
.mg-pm-card .mg-pay-logo-ico,
.mg-pm-card img.mg-pay-logo-ico,
.mg-pm-card .ico img {
	width: 54px !important;
	height: 54px !important;
	max-width: 54px !important;
	object-fit: contain !important;
	display: block !important;
	margin: 0 auto 8px !important;
	border-radius: 10px;
}
.mg-pm-card .ico {
	display: block;
	font-size: 0;
	line-height: 0;
	margin-bottom: 4px;
}

/* Auth alt small blue btn stay on the right */
.mg-auth-alt .mg-img-btn.mg-img-btn--sm {
	margin-left: auto !important;
	flex-shrink: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
}
.mg-auth-alt .mg-img-btn.mg-img-btn--sm .mg-img-btn__img {
	height: 38px !important;
	width: auto !important;
	max-width: 130px !important;
}


/* ============================================================
   Auth-alt FIX v3.3.2 — text left readable, blue btn right
   ============================================================ */
.mg-auth-alt {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	background: #eef6ff !important;
	border: 1px solid #dbeafe !important;
	border-radius: 16px !important;
	padding: 12px 14px !important;
	margin: 10px 0 6px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}
.mg-auth-alt__text {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	max-width: none !important;
}
.mg-auth-alt__text b {
	display: block !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: #1e3a8a !important;
	line-height: 1.3 !important;
	white-space: normal !important;
	word-break: normal !important;
	overflow-wrap: normal !important;
}
.mg-auth-alt__text small {
	display: block !important;
	font-size: 11.5px !important;
	color: #64748b !important;
	line-height: 1.35 !important;
	margin-top: 3px !important;
	white-space: normal !important;
	word-break: normal !important;
}
.mg-auth-alt__btn {
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	cursor: pointer !important;
	line-height: 0 !important;
	display: block !important;
}
.mg-auth-alt__btn img {
	height: 38px !important;
	width: auto !important;
	max-width: 140px !important;
	object-fit: contain !important;
	display: block !important;
	margin: 0 !important;
	pointer-events: none;
}

/* Kill old width:100% img-btn rules inside auth-alt */
.mg-auth-alt .mg-img-btn,
.mg-auth-alt .mg-img-btn--sm {
	width: auto !important;
	max-width: 140px !important;
	flex: 0 0 auto !important;
	display: block !important;
}
.mg-auth-alt .mg-img-btn__img {
	width: auto !important;
	height: 38px !important;
	max-width: 140px !important;
}