/* Mall Engage — the tenant portal as a page of its own: the mall's look, no theme around it. Shared pieces live in me-ui.css.
 * The accent colour (--me-accent, --me-accent-dark, --me-accent-ink) is set by the page from Mall Engage > Settings. */
body.me-standalone {
	--me-accent: #c8372f;
	--me-accent-dark: #a42d27;
	--me-accent-ink: #fff;
	--me-ink: #1d2327;
	--me-muted: #5c534e;
	--me-line: #eadfd8;
	--me-bg: #fff8f4;
	--me-card: #fff;
	--me-ok: #14683b;
	--me-ok-bg: #e6f4ec;
	--me-warn: #6b4600;
	--me-warn-bg: #fcf0c3;
	--me-bad: #a12122;
	--me-bad-bg: #fbe9e9;
	--me-focus: #1a5fb4;
	--me-serif: Georgia, "Times New Roman", serif;
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--me-bg);
	color: var(--me-ink);
	font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
}
body.me-standalone *, body.me-standalone *::before, body.me-standalone *::after { box-sizing: border-box; }
body.me-standalone [hidden] { display: none !important; }
body.me-standalone main { flex: 1 0 auto; width: 100%; max-width: 960px; margin: 0 auto; padding: 20px 16px 28px; }

/* top bar: the mall's colour, its name (or logo) and "Tenant portal" */
.me-topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 16px 20px; background: linear-gradient(135deg, var(--me-accent) 0%, var(--me-accent-dark) 100%); color: var(--me-accent-ink); }
.me-brand { font-family: var(--me-serif); font-size: 1.7rem; line-height: 1.1; letter-spacing: -.01em; }
.me-logo { display: block; max-height: 40px; max-width: 200px; width: auto; height: auto; }
.me-brand-sub { font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; opacity: .92; padding-left: 16px; border-left: 1px solid currentColor; border-left-color: rgba(255, 255, 255, .45); }
.me-foot { flex: none; padding: 18px 16px 26px; text-align: center; color: var(--me-muted); font-size: .85rem; }

/* inside the page the shared box needs no frame of its own */
.me-standalone .me-ui { max-width: none; padding: 0; background: transparent; border-radius: 0; }
.me-standalone #me-portal.me-portal .me-head { margin-top: 2px; }
.me-standalone .me-title, .me-standalone .me-auth__title, .me-standalone .me-card h3, .me-standalone .me-h { font-family: var(--me-serif); font-weight: 400; letter-spacing: -.005em; }
.me-standalone .me-title { font-size: 1.7rem; }
.me-who { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; color: var(--me-muted); }

/* shapes: pill buttons, soft cards (like the visitor app) */
.me-standalone .me-btn { border-radius: 999px; }
.me-standalone .me-btn--primary { background: var(--me-accent); border-color: var(--me-accent); color: var(--me-accent-ink); }
.me-standalone .me-card, .me-standalone .me-tile { border: 1px solid var(--me-line); border-radius: 16px; box-shadow: 0 1px 2px rgba(20, 17, 15, .05), 0 12px 28px -18px rgba(20, 17, 15, .28); }
.me-standalone .me-tab { color: var(--me-muted); }
.me-standalone .me-tab.is-active { color: var(--me-ink); border-bottom-color: var(--me-accent); }
.me-standalone .me-tabs { border-bottom-color: var(--me-line); }
.me-standalone .me-ui input[type=text], .me-standalone .me-ui input[type=password], .me-standalone .me-ui input[type=email], .me-standalone .me-ui input[type=url],
.me-standalone .me-ui input[type=search], .me-standalone .me-ui input[type=number], .me-standalone .me-ui input[type=datetime-local], .me-standalone .me-ui select, .me-standalone .me-ui textarea { border-radius: 12px; border-color: #b9aea8; }
.me-btn--small { min-height: 36px; padding: 4px 14px; font-size: .9rem; }

/* sign in, forgot password, choose a password */
.me-standalone .me-auth { display: flex; justify-content: center; padding-top: 28px; }
.me-auth__card { width: 100%; max-width: 420px; padding: 24px 22px 18px; border-top: 4px solid var(--me-accent) !important; }
.me-auth__title { font-size: 1.6rem; margin: 0 0 6px; }
.me-auth__alt { margin: 14px 0 0; text-align: center; }
.me-link { appearance: none; border: 0; background: transparent; color: #0a4b9e; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px 4px; min-height: 36px; }
.me-pw { display: flex; gap: 8px; }
.me-pw input { flex: 1 1 auto; min-width: 0; }
.me-formerror { background: var(--me-bad-bg); color: var(--me-bad); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; }
.me-form { display: block; }
.me-ui .me-btn--block { display: flex; width: 100%; justify-content: center; }
.me-portal .me-code { font-size: 1.4rem; }
.me-portal .me-card--ok .me-actions .me-btn--big { flex: 1 1 220px; }
.me-linkbox { width: 100%; box-sizing: border-box; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; margin: 6px 0 0; }
.me-qr { margin: 14px auto 4px; width: min(240px, 70vw); line-height: 0; border: 1px solid #d8d8d8; border-radius: 8px; overflow: hidden; background: #fff; }
.me-qr svg { display: block; width: 100%; height: auto; max-width: none; }
.me-staff .me-card h3 { margin: 0 0 4px; }
.me-till .me-title { overflow-wrap: anywhere; }

@media (max-width: 560px) {
	body.me-standalone main { padding: 14px 12px 22px; }
	.me-standalone .me-auth { padding-top: 10px; }
	.me-topbar { padding: 14px 16px; }
	.me-brand { font-size: 1.45rem; }
}