/* Prestige Auto Spa — member portal.
   Redesigned to match the Club Heritage marketing site (theprestigeautospa.com):
   deep-green full-bleed stage, a centered cream "stationery" card, brass rules,
   Playfair Display + Inter, PA crest. Quiet luxury — restrained, no heavy shadows.
   Palette + type tokens mirror the homepage :root exactly. */

/* Portal-page only (portal.css enqueues just where [pa_portal] renders):
   the full-bleed green stage would otherwise trigger a horizontal scrollbar. */
html,
body {
	overflow-x: clip;
}

.pa-portal {
	--pa-green: #0e2a1f;
	--pa-green-1: #123527;
	--pa-green-2: #1a4230;
	--pa-cream: #f4efe4;
	--pa-cream-2: #efe8d8;
	--pa-cream-in: #fbf8f1;
	--pa-cream-dim: rgba(244, 239, 228, 0.68);
	--pa-cream-faint: rgba(244, 239, 228, 0.42);
	--pa-ink: #1b2420;
	--pa-ink-soft: #3a473f;
	--pa-brass: #b08d3f;
	--pa-brass-light: #c9a95c;
	--pa-brass-dark: #8f7130;
	--pa-brass-soft: rgba(176, 141, 63, 0.34);
	--pa-rule: rgba(244, 239, 228, 0.24);
	--pa-rule-ink: rgba(27, 36, 32, 0.16);
	--pa-muted: #5c6b62;
	--pa-err: #a3341f;
	--pa-ok: #2f6b45;
	--pa-serif: 'Playfair Display', Georgia, serif;
	--pa-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Full-bleed deep-green stage (kept in normal flow so theme header/footer show). */
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: clamp(2rem, 6vw, 5rem) clamp(16px, 4vw, 32px);
	box-sizing: border-box;
	background:
		radial-gradient(120% 82% at 50% 0%, rgba(26, 66, 48, 0.55) 0%, rgba(14, 42, 31, 0) 60%),
		linear-gradient(180deg, #0e2a1f 0%, #0b2016 100%);

	font-family: var(--pa-sans);
	font-weight: 400;
	color: var(--pa-ink);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.pa-portal *,
.pa-portal *::before,
.pa-portal *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- */
/* Stationery card                                                  */
/* ---------------------------------------------------------------- */
.pa-shell {
	position: relative;
	max-width: 880px;
	margin: 0 auto;
	background: var(--pa-cream);
	border: 1px solid var(--pa-brass-soft);
	border-radius: 3px;
	padding: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.25rem);
	box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.7);
	color: var(--pa-ink);
	/* Resting state is upright + fully opaque with NO transform. The entrance
	   animation is added only under prefers-reduced-motion:no-preference below,
	   so if it never runs (iOS throttling, hidden tab) the card is never left
	   translated or skewed. */
}

/* Inset hairline frame — the "stationery" double rule (desktop only). */
.pa-shell::before {
	content: '';
	position: absolute;
	inset: 12px;
	border: 1px solid var(--pa-brass-soft);
	border-radius: 2px;
	pointer-events: none;
}

.pa-portal a {
	color: var(--pa-brass-dark);
	text-decoration: none;
}

/* ---------------------------------------------------------------- */
/* Crest                                                            */
/* ---------------------------------------------------------------- */
.pa-portal .crest {
	display: block;
	flex: none;
	color: var(--pa-brass);
}
.pa-portal .crest .ring-outer {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
}
.pa-portal .crest .ring-inner {
	fill: none;
	stroke: currentColor;
	stroke-width: 0.9;
}
.pa-portal .crest .mono {
	font-family: var(--pa-serif);
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------- */
/* Masthead: crest + title + brass rule                             */
/* ---------------------------------------------------------------- */
.pa-mast {
	display: flex;
	align-items: center;
	gap: 18px;
}
.pa-mast-crest {
	width: 54px;
	height: 54px;
}
.pa-mast-brand {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-right: auto;
	text-decoration: none;
	color: inherit;
	min-width: 0;
	border-radius: 3px;
}
.pa-mast-brand:focus-visible {
	outline: 2px solid var(--pa-brass);
	outline-offset: 4px;
}
.pa-mast-titles {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
	min-width: 0;
}
.pa-mast-right {
	display: flex;
	align-items: center;
	gap: 14px;
}

/* Compact top-right menu — pure-CSS <details>, CSS bars (no icon font). */
.pa-nav {
	position: relative;
	flex: none;
}
.pa-nav-toggle {
	list-style: none;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: 1px solid var(--pa-brass-soft);
	border-radius: 3px;
	background: var(--pa-cream-in);
}
.pa-nav-toggle::-webkit-details-marker { display: none; }
.pa-nav-toggle::marker { content: ''; }
.pa-nav-bars { position: relative; }
.pa-nav-bars,
.pa-nav-bars::before,
.pa-nav-bars::after {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--pa-green);
	border-radius: 2px;
}
.pa-nav-bars::before,
.pa-nav-bars::after {
	content: '';
	position: absolute;
	left: 0;
}
.pa-nav-bars::before { top: -7px; }
.pa-nav-bars::after { top: 7px; }
.pa-nav[open] .pa-nav-toggle { border-color: var(--pa-brass); }
.pa-nav-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	z-index: 30;
	display: flex;
	flex-direction: column;
	min-width: 176px;
	background: var(--pa-cream);
	border: 1px solid var(--pa-brass-soft);
	border-radius: 3px;
	box-shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.5);
	overflow: hidden;
}
.pa-nav-menu a {
	padding: 13px 18px;
	min-height: 44px;
	display: flex;
	align-items: center;
	font-family: var(--pa-sans);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pa-ink-soft);
	border-bottom: 1px solid var(--pa-rule-ink);
}
.pa-nav-menu a:last-child { border-bottom: 0; }
.pa-nav-menu a:hover {
	background: rgba(176, 141, 63, 0.1);
	color: var(--pa-green);
}
.pa-eyebrow {
	font-family: var(--pa-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--pa-brass-dark);
	margin-bottom: 9px;
}
.pa-portal-title {
	font-family: var(--pa-serif);
	font-weight: 600;
	font-size: clamp(1.55rem, 3.4vw, 2.05rem);
	letter-spacing: -0.01em;
	color: var(--pa-green);
	margin: 0;
	line-height: 1.05;
}
.pa-mast-user {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	text-align: right;
}
.pa-mast-hi {
	font-family: var(--pa-serif);
	font-style: italic;
	font-size: 1.05rem;
	color: var(--pa-green);
}
.pa-mast-logout {
	font-family: var(--pa-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pa-brass-dark);
}
.pa-mast-logout:hover {
	color: var(--pa-green);
}
.pa-mast-tag {
	align-self: center;
	font-family: var(--pa-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--pa-brass-dark);
}

.pa-rule-brass {
	height: 0;
	border: 0;
	border-top: 1.5px solid var(--pa-brass);
	width: 100%;
	margin: 1.4rem 0 1.9rem;
	opacity: 0.85;
}

/* ---------------------------------------------------------------- */
/* Sections (were .pa-card boxes; now open sections on the cream)   */
/* ---------------------------------------------------------------- */
.pa-card {
	margin-bottom: 2.6rem;
}
.pa-card:last-child {
	margin-bottom: 0;
}
.pa-card > h3 {
	font-family: var(--pa-serif);
	font-weight: 600;
	font-size: 1.4rem;
	color: var(--pa-green);
	margin: 0 0 1.2rem;
	line-height: 1.15;
}
.pa-card > h3::after {
	content: '';
	display: block;
	width: 44px;
	height: 1.5px;
	background: var(--pa-brass);
	margin-top: 0.7rem;
}

.pa-muted {
	color: var(--pa-muted);
	font-size: 0.9rem;
}
.pa-muted a {
	color: var(--pa-brass-dark);
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease;
}
.pa-muted a:hover {
	border-bottom-color: var(--pa-brass);
}

/* ---------------------------------------------------------------- */
/* Empty-email nudge                                                */
/* ---------------------------------------------------------------- */
.pa-nudge {
	background: rgba(176, 141, 63, 0.08);
	border: 1px solid var(--pa-brass-soft);
	border-left: 3px solid var(--pa-brass);
	border-radius: 2px;
	padding: 1.1rem 1.35rem;
	margin-bottom: 2rem;
}
.pa-nudge-lead {
	font-family: var(--pa-serif);
	font-style: italic;
	font-size: 1.12rem;
	color: var(--pa-green);
	margin: 0 0 0.8rem;
}
.pa-nudge-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75rem;
}
.pa-nudge-form .pa-nudge-label {
	flex: 1 1 220px;
	margin-bottom: 0;
}
.pa-nudge-form .pa-form-msg {
	flex-basis: 100%;
	margin: 0;
}

/* ---------------------------------------------------------------- */
/* Tabs — serif labels, brass active underline                      */
/* ---------------------------------------------------------------- */
.pa-tabs {
	display: flex;
	gap: 2rem;
	border-bottom: 1px solid var(--pa-rule-ink);
	margin-bottom: 2rem;
}
.pa-tab {
	background: none;
	border: 0;
	padding: 0 0 0.85rem;
	margin: 0;
	font-family: var(--pa-serif);
	font-size: 1.18rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--pa-ink-soft);
	cursor: pointer;
	position: relative;
	transition: color 0.25s ease;
}
.pa-tab::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--pa-brass);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}
.pa-tab:hover {
	color: var(--pa-green);
}
.pa-tab.is-active {
	color: var(--pa-green);
}
.pa-tab.is-active::after {
	transform: scaleX(1);
}

.pa-tabpanel {
	display: none;
}
.pa-tabpanel.is-active {
	display: block;
}

/* ---------------------------------------------------------------- */
/* Forms                                                            */
/* ---------------------------------------------------------------- */
.pa-form label {
	display: block;
	font-family: var(--pa-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pa-brass-dark);
	margin-bottom: 1.15rem;
}

.pa-form input,
.pa-form select,
.pa-form textarea {
	display: block;
	width: 100%;
	margin-top: 0.45rem;
	padding: 0.85rem 0.9rem;
	border: 1px solid var(--pa-rule-ink);
	border-radius: 2px;
	font-family: var(--pa-sans);
	font-size: 16px; /* >=16px so iOS Safari never auto-zooms on focus */
	font-weight: 400;
	letter-spacing: 0.005em;
	color: var(--pa-ink);
	background: var(--pa-cream-in);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.pa-form select {
	cursor: pointer;
}
.pa-form textarea {
	min-height: 110px;
	resize: vertical;
}
.pa-form input::placeholder,
.pa-form textarea::placeholder {
	color: #a2a99f;
}
.pa-form input:focus,
.pa-form select:focus,
.pa-form textarea:focus {
	outline: none;
	border-color: var(--pa-brass);
	box-shadow: 0 0 0 3px rgba(176, 141, 63, 0.16);
	background: #fff;
}

.pa-row {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}
.pa-row > label {
	flex: 1 1 140px;
}

/* Buttons — mirror the site .btn */
.pa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 44px;
	font-family: var(--pa-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pa-green);
	background: var(--pa-brass);
	border: 1px solid var(--pa-brass);
	border-radius: 2px;
	padding: 12px 26px;
	cursor: pointer;
	transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease,
		border-color 0.3s ease, color 0.3s ease;
}
.pa-btn:hover {
	background: var(--pa-brass-light);
	border-color: var(--pa-brass-light);
	transform: translateY(-1px);
	box-shadow: 0 10px 30px -12px rgba(176, 141, 63, 0.55);
}
.pa-btn:disabled {
	opacity: 0.55;
	cursor: default;
	transform: none;
	box-shadow: none;
}
.pa-btn-ghost {
	color: var(--pa-green);
	background: transparent;
	border: 1px solid var(--pa-brass-soft);
}
.pa-btn-ghost:hover {
	background: rgba(176, 141, 63, 0.1);
	border-color: var(--pa-brass);
	color: var(--pa-green);
	box-shadow: none;
}

.pa-form-msg {
	font-size: 0.9rem;
	margin: 0.6rem 0;
	min-height: 1.1em;
}
.pa-form-msg.is-err {
	color: var(--pa-err);
}
.pa-form-msg.is-ok {
	color: var(--pa-ok);
}

/* Honeypot */
.pa-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------------------------------------------------------------- */
/* Garage — deep-green "club cards"                                 */
/* ---------------------------------------------------------------- */
.pa-garage-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}
.pa-garage-item {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	background: linear-gradient(180deg, var(--pa-green-1), var(--pa-green));
	border: 1px solid var(--pa-brass-soft);
	border-radius: 3px;
	padding: 1.1rem 1.3rem;
	color: var(--pa-cream);
}
.pa-plate {
	display: inline-block;
	font-family: var(--pa-serif);
	font-weight: 600;
	font-size: 1.45rem;
	letter-spacing: 0.1em;
	color: var(--pa-cream);
	background: rgba(0, 0, 0, 0.14);
	border: 1px solid var(--pa-brass);
	border-radius: 3px;
	padding: 0.32rem 0.8rem;
	white-space: nowrap;
	flex: none;
}
.pa-garage-meta {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}
.pa-garage-item .pa-veh {
	font-family: var(--pa-serif);
	font-weight: 500;
	font-size: 1.14rem;
	color: var(--pa-cream);
}
.pa-garage-sub {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	flex-wrap: wrap;
	font-size: 0.88rem;
	color: var(--pa-cream-dim);
}
.pa-chip {
	display: inline-block;
	font-family: var(--pa-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pa-green);
	background: var(--pa-brass);
	border-radius: 999px;
	padding: 0.22rem 0.62rem;
}
.pa-garage-item .pa-inline {
	margin-left: auto;
}
.pa-garage-item .pa-btn-ghost {
	color: var(--pa-cream);
	border-color: var(--pa-brass-soft);
	min-height: 0;
	padding: 0.5rem 0.95rem;
	font-size: 11px;
}
.pa-garage-item .pa-btn-ghost:hover {
	background: rgba(176, 141, 63, 0.18);
	border-color: var(--pa-brass);
	color: var(--pa-cream);
}

/* Collapsible "Add a car" panel */
.pa-panel {
	border: 1px solid var(--pa-rule-ink);
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.4);
}
.pa-panel-summary {
	list-style: none;
	cursor: pointer;
	padding: 1rem 1.3rem;
	font-family: var(--pa-serif);
	font-weight: 500;
	font-size: 1.2rem;
	color: var(--pa-green);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.pa-panel-summary::-webkit-details-marker {
	display: none;
}
.pa-panel-icon {
	color: var(--pa-brass);
	font-size: 1.5rem;
	line-height: 1;
	flex: none;
	transition: transform 0.3s ease;
}
.pa-panel[open] .pa-panel-icon {
	transform: rotate(45deg);
}
.pa-panel-body {
	padding: 0.4rem 1.3rem 1.5rem;
}

/* ---------------------------------------------------------------- */
/* Booking tiers — mini menu-cards                                  */
/* ---------------------------------------------------------------- */
.pa-tiers {
	border: 0;
	padding: 0;
	margin: 0 0 1.6rem;
	min-width: 0;
}
.pa-tiers-legend {
	font-family: var(--pa-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pa-brass-dark);
	padding: 0;
	margin-bottom: 1rem;
}
.pa-tier-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* Strict source order: Exterior Wash -> Wash + Light Interior -> Full Detail,
	   including when it collapses to one column on mobile. No reordering. */
	grid-auto-flow: row;
	gap: 1rem;
}
.pa-tier-option {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 1.15rem 1.05rem 1.25rem;
	background: var(--pa-cream-in);
	border: 1px solid var(--pa-rule-ink);
	border-radius: 3px;
	cursor: pointer;
	transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease,
		background 0.3s ease;
}
.pa-tier-option:hover {
	border-color: var(--pa-brass);
	transform: translateY(-2px);
}
.pa-tier-option input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}
.pa-tier-name {
	font-family: var(--pa-serif);
	font-weight: 600;
	font-size: 1.1rem;
	line-height: 1.2;
	color: var(--pa-green);
	margin-bottom: 0.7rem;
}
.pa-tier-name::after {
	content: '';
	display: block;
	width: 36px;
	height: 1.5px;
	background: var(--pa-brass);
	margin-top: 0.7rem;
}
.pa-tier-price {
	font-family: var(--pa-serif);
	font-weight: 600;
	font-size: 1.7rem;
	line-height: 1;
	color: var(--pa-green);
}
.pa-tier-option:has(input:checked) {
	border-color: var(--pa-brass);
	background: #fff;
	box-shadow: 0 0 0 2px var(--pa-brass), 0 14px 32px -20px rgba(176, 141, 63, 0.75);
}
.pa-tier-option:has(input:focus-visible) {
	outline: 2px solid var(--pa-brass);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------- */
/* Bookings + status timeline                                       */
/* ---------------------------------------------------------------- */
.pa-job {
	background: var(--pa-cream-in);
	border: 1px solid var(--pa-rule-ink);
	border-radius: 3px;
	padding: 1.2rem 1.35rem;
	margin-bottom: 1.2rem;
}
.pa-job:last-child {
	margin-bottom: 0;
}
.pa-job-head {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	flex-wrap: wrap;
	margin-bottom: 0.4rem;
}
.pa-job .pa-plate {
	font-size: 1.15rem;
	color: var(--pa-green);
	background: #fff;
	border-color: var(--pa-brass-soft);
	letter-spacing: 0.08em;
}
.pa-job .pa-veh {
	font-family: var(--pa-serif);
	font-size: 1.05rem;
	color: var(--pa-green);
}
.pa-job-price {
	font-family: var(--pa-serif);
	font-weight: 600;
	font-size: 1.2rem;
	color: var(--pa-green);
	margin-left: auto;
}
.pa-job-when {
	margin: 0.1rem 0 0;
	font-size: 0.85rem;
	color: var(--pa-muted);
	letter-spacing: 0.01em;
}

.pa-badge {
	font-family: var(--pa-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.28rem 0.7rem;
	border-radius: 999px;
	background: var(--pa-green);
	color: var(--pa-cream);
}
.pa-badge-cancelled {
	background: var(--pa-err);
	color: #fff;
}
.pa-badge-picked_up,
.pa-badge-ready_for_pickup {
	background: var(--pa-brass);
	color: var(--pa-green);
}

.pa-timeline {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
}
.pa-tl {
	position: relative;
	padding: 0 0 1.25rem 1.9rem;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.pa-tl::before {
	content: '';
	position: absolute;
	left: 5px;
	top: 0.55rem;
	bottom: -0.1rem;
	width: 1.5px;
	background: var(--pa-rule-ink);
}
.pa-tl:last-child::before {
	display: none;
}
.pa-tl-dot {
	position: absolute;
	left: 0;
	top: 0.28rem;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	border: 1.5px solid var(--pa-brass);
	background: transparent;
}
.pa-tl.is-done .pa-tl-dot {
	background: var(--pa-brass);
}
.pa-tl.is-done::before {
	background: var(--pa-brass);
}
.pa-tl.is-current .pa-tl-dot {
	background: var(--pa-brass);
	animation: pa-pulse 2s ease-out infinite;
}
.pa-tl.is-future .pa-tl-dot {
	background: transparent;
	border-color: var(--pa-brass-soft);
}
.pa-tl.is-cancelled .pa-tl-dot {
	background: var(--pa-err);
	border-color: var(--pa-err);
}
.pa-tl-label {
	font-family: var(--pa-serif);
	font-weight: 500;
	font-size: 1rem;
	color: var(--pa-green);
}
.pa-tl.is-future .pa-tl-label {
	font-weight: 400;
	color: var(--pa-ink-soft);
	opacity: 0.7;
}
.pa-tl-ts {
	font-size: 0.82rem;
	color: var(--pa-muted);
	letter-spacing: 0.02em;
}

/* Account section forms */
.pa-inline {
	display: inline;
}
.pa-inline-wide {
	max-width: 380px;
}

/* ---------------------------------------------------------------- */
/* Motion                                                           */
/* ---------------------------------------------------------------- */
@keyframes pa-rise {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes pa-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(176, 141, 63, 0.5);
	}
	70% {
		box-shadow: 0 0 0 8px rgba(176, 141, 63, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(176, 141, 63, 0);
	}
}

/* ---------------------------------------------------------------- */
/* Responsive                                                       */
/* ---------------------------------------------------------------- */
@media (max-width: 600px) {
	.pa-portal {
		padding: 1.5rem 0;
	}
	.pa-shell {
		max-width: 100%;
		border-left: 0;
		border-right: 0;
		border-radius: 0;
		box-shadow: none;
		padding: 1.75rem 1.25rem;
	}
	.pa-shell::before {
		display: none;
	}
	.pa-mast {
		flex-wrap: wrap;
		gap: 14px;
	}
	.pa-mast-titles {
		margin-right: 0;
	}
	.pa-mast-user {
		width: 100%;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		text-align: left;
	}
	.pa-mast-tag {
		width: 100%;
		align-self: flex-start;
	}
	.pa-tabs {
		gap: 1.4rem;
	}
	.pa-tab {
		font-size: 1.05rem;
	}
	.pa-tier-grid {
		grid-template-columns: 1fr;
	}
	.pa-row {
		flex-direction: column;
		gap: 0;
	}
	.pa-garage-item {
		flex-wrap: wrap;
	}
	.pa-garage-item .pa-inline {
		margin-left: 0;
		width: 100%;
	}
	.pa-garage-item .pa-btn-ghost {
		width: 100%;
	}
	.pa-nudge-form .pa-btn {
		width: 100%;
	}
	/* Primary buttons go full-width on phones for a bigger, easier tap target. */
	.pa-btn {
		width: 100%;
	}
	/* Keep the claim card comfortably inside a 320px viewport (no h-scroll). */
	.pa-claim {
		max-width: 100%;
	}
	.pa-linkbtn {
		width: 100%;
		justify-content: flex-start;
	}
}

/* Intentionally NO entrance animation on the card, tab panels, or claim card.
   Their resting layout (upright, centered, opaque) is the only state, so a stalled
   or non-advancing animation can never leave them translated or blank — the root
   cause of the mobile "askew"/blank sign-in card. Polish is not worth that risk. */

@media (prefers-reduced-motion: reduce) {
	.pa-shell,
	.pa-tabpanel.is-active {
		animation: none;
	}
	.pa-tl.is-current .pa-tl-dot {
		animation: none;
	}
	.pa-btn,
	.pa-tab,
	.pa-tab::after,
	.pa-tier-option,
	.pa-panel-icon {
		transition: none;
	}
	.pa-btn:hover,
	.pa-tier-option:hover {
		transform: none;
	}
}

/* ---------------------------------------------------------------- */
/* Account claim card ("set your password") + magic sign-in         */
/* ---------------------------------------------------------------- */
.pa-claim {
	max-width: 460px;
	margin: 0 auto;
}
.pa-claim-title {
	font-family: var(--pa-serif);
	font-weight: 600;
	font-size: clamp(1.35rem, 3vw, 1.75rem);
	color: var(--pa-green);
	margin: 0.15rem 0 0.6rem;
	line-height: 1.12;
}
.pa-claim .pa-muted {
	margin-bottom: 1.4rem;
}
.pa-claim-invalid {
	text-align: left;
}
.pa-claim-invalid .pa-btn-ghost {
	margin-top: 0.4rem;
}

/* Magic sign-in reveal under the login form */
.pa-magic {
	margin-top: 1.4rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--pa-brass-soft);
}
.pa-linkbtn {
	background: none;
	border: 0;
	/* Roomy tap target: >=44px tall incl. padding, still looks like a text link. */
	padding: 12px 2px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	font-family: var(--pa-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	/* Ink-soft (not brass) so body-size text clears WCAG AA on cream. */
	color: var(--pa-ink-soft);
	border-bottom: 1px solid var(--pa-brass);
	line-height: 1.2;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.pa-linkbtn:hover {
	color: var(--pa-green);
	border-bottom-color: var(--pa-brass-dark);
}
.pa-magic-form {
	margin-top: 1.1rem;
}
.pa-magic-form[hidden] {
	display: none;
}

/* ---------------------------------------------------------------- */
/* Payment: card on file (Account tab)                              */
/* ---------------------------------------------------------------- */
.pa-pay-testflag {
	display: inline-block;
	font-family: var(--pa-sans);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pa-brass-dark);
	background: rgba(176, 141, 63, 0.12);
	border: 1px solid var(--pa-brass-soft);
	border-radius: 999px;
	padding: 0.25rem 0.7rem;
	margin: 0 0 1rem;
}
.pa-card-onfile {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 1rem 1.15rem;
	background: linear-gradient(180deg, var(--pa-green-1), var(--pa-green));
	border: 1px solid var(--pa-brass-soft);
	border-radius: 3px;
	color: var(--pa-cream);
	margin-bottom: 1.1rem;
}
.pa-card-chip {
	font-size: 1.3rem;
	line-height: 1;
}
.pa-card-onfile-label {
	font-family: var(--pa-serif);
	font-size: 1.12rem;
	color: var(--pa-cream);
}
.pa-card-onfile-sub {
	font-family: var(--pa-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pa-cream-dim);
	margin-left: 0.3rem;
}
.pa-pay-lead {
	font-family: var(--pa-serif);
	font-style: italic;
	font-size: 1.12rem;
	color: var(--pa-green);
	margin: 0 0 1rem;
}
.pa-payment-element {
	margin: 1.1rem 0;
}
.pa-payment-element[hidden] {
	display: none;
}
.pa-pay-confirm[hidden] {
	display: none;
}
.pa-pay-msg {
	font-size: 0.9rem;
	margin: 0.6rem 0;
	min-height: 1.1em;
	color: var(--pa-ink-soft);
}
.pa-pay-msg.is-err {
	color: var(--pa-err);
}
.pa-pay-msg.is-ok {
	color: var(--pa-ok);
}
.pa-pay-consent {
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--pa-muted);
	margin: 1rem 0 0;
	max-width: 46ch;
}

/* ---------------------------------------------------------------- */
/* Tip card (token page) — mobile-first                             */
/* ---------------------------------------------------------------- */
.pa-tipcard {
	max-width: 440px;
	margin: 0 auto;
	text-align: left;
}
.pa-tip-title {
	font-family: var(--pa-serif);
	font-weight: 600;
	font-size: clamp(1.4rem, 5vw, 1.9rem);
	color: var(--pa-green);
	margin: 0.15rem 0 1.1rem;
	line-height: 1.12;
}
.pa-tip-service {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5rem 0.8rem;
	padding: 1rem 1.15rem;
	background: var(--pa-cream-in);
	border: 1px solid var(--pa-rule-ink);
	border-left: 3px solid var(--pa-brass);
	border-radius: 3px;
	margin-bottom: 1.4rem;
}
.pa-tip-svc-name {
	font-family: var(--pa-serif);
	font-size: 1.12rem;
	color: var(--pa-green);
}
.pa-tip-svc-price {
	font-family: var(--pa-serif);
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--pa-green);
	margin-left: auto;
}
.pa-tip-paid {
	font-family: var(--pa-sans);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pa-green);
	background: var(--pa-brass);
	border-radius: 999px;
	padding: 0.22rem 0.6rem;
	white-space: nowrap;
}
.pa-tip-prompt {
	font-family: var(--pa-serif);
	font-style: italic;
	font-size: 1.15rem;
	color: var(--pa-green);
	margin: 0 0 1rem;
}
.pa-tip-options {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
	margin-bottom: 1.2rem;
}
.pa-tip-opt {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.2rem;
	min-height: 66px;
	padding: 0.7rem 0.5rem;
	background: var(--pa-cream-in);
	border: 1px solid var(--pa-rule-ink);
	border-radius: 3px;
	cursor: pointer;
	font-family: var(--pa-sans);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.pa-tip-opt-pct {
	font-family: var(--pa-serif);
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--pa-green);
}
.pa-tip-opt-amt {
	font-size: 12px;
	color: var(--pa-muted);
}
.pa-tip-opt:hover {
	border-color: var(--pa-brass);
}
.pa-tip-opt.is-selected {
	border-color: var(--pa-brass);
	background: #fff;
	box-shadow: 0 0 0 2px var(--pa-brass);
}
.pa-tip-opt:focus-visible {
	outline: 2px solid var(--pa-brass);
	outline-offset: 2px;
}
.pa-tip-customwrap {
	margin-bottom: 1.2rem;
}
.pa-tip-customwrap[hidden] {
	display: none;
}
.pa-tip-custom-label {
	display: block;
	font-family: var(--pa-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pa-brass-dark);
	margin-bottom: 0.4rem;
}
.pa-tip-inputwrap {
	display: flex;
	align-items: center;
	margin-top: 0.45rem;
	border: 1px solid var(--pa-rule-ink);
	border-radius: 2px;
	background: var(--pa-cream-in);
	overflow: hidden;
}
.pa-tip-inputwrap:focus-within {
	border-color: var(--pa-brass);
	box-shadow: 0 0 0 3px rgba(176, 141, 63, 0.16);
	background: #fff;
}
.pa-tip-dollar {
	padding: 0 0.2rem 0 0.9rem;
	font-family: var(--pa-serif);
	font-size: 1.1rem;
	color: var(--pa-ink-soft);
}
.pa-tip-amount {
	border: 0;
	background: transparent;
	width: 100%;
	padding: 0.85rem 0.9rem 0.85rem 0.3rem;
	font-family: var(--pa-sans);
	font-size: 16px; /* >=16px: no iOS zoom */
	color: var(--pa-ink);
}
.pa-tip-amount:focus {
	outline: none;
}
.pa-tip-msg {
	font-size: 0.9rem;
	margin: 0 0 0.8rem;
	min-height: 1.1em;
	color: var(--pa-ink-soft);
}
.pa-tip-msg.is-err {
	color: var(--pa-err);
}
.pa-tip-msg.is-ok {
	color: var(--pa-ok);
}
.pa-tipcard .pa-tip-confirm {
	width: 100%;
}
.pa-tip-none {
	width: 100%;
	justify-content: center;
	margin-top: 0.9rem;
}
.pa-tip-thanksline {
	font-family: var(--pa-serif);
	font-size: 1.12rem;
	color: var(--pa-green);
	line-height: 1.4;
}
.pa-tip-dead .pa-btn,
.pa-tip-done .pa-btn {
	margin-top: 0.6rem;
}

@media (min-width: 520px) {
	.pa-tip-options {
		grid-template-columns: repeat(4, 1fr);
	}
}