/* ==========================================================================
   Membership: wall, upgrade prompt, auth forms, account page, nav items
   Palette: --up-teal #7BC4A8 (primary), --upd-vip-gold #d4a344 (VIP accent),
            --up-terracotta #CC9966 (warm accent), #11202a (dark navy),
            #16242c (dark text on teal/gold)
   ========================================================================== */

/* ---------------- Shared card shell (wall + upgrade panels) --------------- */
.upd-wall,
.upd-upgrade {
	max-width: 460px;
	margin: 2.5rem auto;
	padding: 2rem 1.5rem;
	text-align: center;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 6px 30px rgba(0, 0, 0, .08);
}

.upd-wall__icon,
.upd-upgrade__icon {
	display: flex;
	justify-content: center;
	margin-bottom: .75rem;
	color: #7BC4A8; /* --up-teal */
}

.upd-wall__title,
.upd-upgrade__title {
	font-size: 1.4rem;
	margin: 0 0 .4rem;
}

.upd-wall__sub,
.upd-upgrade__sub {
	color: #555;
	margin: 0 0 1.25rem;
}

.upd-upgrade__note {
	font-size: .85rem;
	color: #888;
	margin-top: .75rem;
}

/* Standalone auth pages (join / login / account) sit on the dark site bg —
   wrap their content in a white card so the form labels/text stay legible. */
.upd-auth-card {
	max-width: 460px;
	margin: 2.5rem auto;
	padding: 2rem 1.75rem;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 6px 30px rgba(0, 0, 0, .08);
	color: #333;
}

.upd-auth-card .upd-account {
	margin: 0;
	max-width: none;
}

/* ---------------- Auth form (join / login pages) -------------------------- */
.upd-auth-form {
	display: flex;
	flex-direction: column;
	gap: .85rem;
	text-align: left;
}

.upd-auth-field {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	font-size: .9rem;
	color: #333;
}

.upd-auth-field input {
	padding: .7rem .8rem;
	border: 1px solid #ccc;
	border-radius: 10px;
	font-size: 1rem;
}

.upd-auth-field input:focus {
	outline: none;
	border-color: #7BC4A8; /* --up-teal */
	box-shadow: 0 0 0 3px rgba(123, 196, 168, .2);
}

.upd-auth-error {
	background: #fde8e8;
	color: #a12;
	padding: .6rem .8rem;
	border-radius: 8px;
	margin: 0;
	font-size: .9rem;
}

.upd-auth-alt {
	font-size: .88rem;
	color: #666;
	margin: .25rem 0 0;
	text-align: center;
}

/* ---------------- Buttons ------------------------------------------------- */
.upd-btn {
	display: inline-block;
	padding: .75rem 1.25rem;
	border: none;
	border-radius: 10px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	transition: background .15s, opacity .15s;
}

/* Primary: teal with dark legible text (matches nav CTA pattern) */
.upd-btn--primary {
	background: #7BC4A8; /* --up-teal */
	color: #16242c;
}

.upd-btn--primary:hover {
	background: #5faf90;
	color: #16242c;
}

/* VIP: bright amber gold — signals premium */
.upd-btn--vip {
	background: var(--upd-vip-gold);
	color: #16242c;
}

.upd-btn--vip:hover {
	background: var(--upd-vip-gold-dark);
	color: #fff;
}

.upd-btn--vip:disabled {
	opacity: .6;
	cursor: not-allowed;
}

/* Ghost: outlined, neutral */
.upd-btn--ghost {
	background: transparent;
	border: 1px solid #ccc;
	color: #333;
}

.upd-btn--ghost:hover {
	background: #f5f5f5;
}

/* Small variant */
.upd-btn--sm {
	padding: .4rem .8rem;
	font-size: .85rem;
}

/* Full-width helper */
.upd-btn--full {
	display: block;
	width: 100%;
}

/* ---------------- Account page -------------------------------------------- */
.upd-account {
	max-width: 460px;
	margin: 2rem auto;
}

/* Upgrade CTA block — distinct section below account info */
.upd-account__upgrade {
	margin-top: 1.75rem;
	padding: 1.25rem 1rem;
	background: #fff8ef;
	border: 1px solid color-mix(in srgb, var(--upd-vip-gold) 35%, transparent); /* VIP gold tint */
	border-radius: 12px;
	text-align: center;
}

/* ---------------- Nav items ----------------------------------------------- */
.upd-nav-login,
.upd-nav-account,
.upd-nav-logout,
.upd-nav-bucketlist {
	margin-left: .75rem;
	font-weight: 600;
}

/* ---------------- Bucketlist: save button, visited, cards ----------------- */
.upd-save {
	background: rgba(255, 255, 255, .92);
	border: none;
	border-radius: 50%;
	width: 38px;
	height: 38px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #16242c;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
	transition: transform .12s, background .15s;
}
.upd-save:hover { transform: scale(1.08); }
.upd-save__on { display: none; }
.upd-save.is-saved .upd-save__off { display: none; }
.upd-save.is-saved .upd-save__on { display: inline-flex; color: #CC9966; }
.upd-save--guest { text-decoration: none; }

.upd-visited {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	background: rgba(255, 255, 255, .04);
	border: 1px solid #2f4a44;
	border-radius: 999px;
	padding: .5rem 1rem;
	cursor: pointer;
	font-size: .9rem;
	font-weight: 600;
	color: #cbd5e1;
	transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.upd-visited:hover {
	background: rgba(123, 196, 168, .12);
	border-color: #7BC4A8;
	color: #fff;
	transform: translateY(-1px);
}
.upd-visited.is-visited {
	background: #7BC4A8;
	border-color: #7BC4A8;
	color: #0d1f18;
	font-weight: 700;
}
.upd-visited.is-visited:hover { background: #6bb89a; border-color: #6bb89a; color: #0d1f18; }
.upd-place__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: .5rem 0 1rem; }

/* ---- Destination action toggle (single-place: Add to bucketlist / Mark as
   visited) --------------------------------------------------------------------
   Off = outline pill [icon label]. On (.is-saved / .is-visited) = teal circle
   with the icon centered: the label fades out and the pill shrinks horizontally
   to a 40px circle. The icon keeps a FIXED 10px left inset (= the circle's icon
   inset), so as the pill collapses the icon never moves — it just ends centered
   in the circle. Both buttons share this class so they are identical. */
/* Sized to match the "Open in Maps" button (padding 7px 14px, 13px/600, 14px
   icon). Both buttons share a fixed off-state WIDTH so they're uniform; on
   toggle the width animates down to a 30px circle (icon stays put via the fixed
   7px left inset). */
.upd-action {
	display: inline-flex;
	flex: 0 0 auto; /* never shrink; wrap instead on narrow screens */
	align-items: center;
	box-sizing: border-box;
	width: auto;    /* dynamic: each pill sizes to its own label (was fixed 174px) */
	padding: 8px 12px 8px 8px; /* left 8 fixed = circle inset; right trimmed to save space */
	border: 1px solid #2f4a44;
	border-radius: 999px;
	background: rgba(255, 255, 255, .04);
	color: #cbd5e1;
	font-size: 14px;
	letter-spacing: -0.02em; /* tighten label; default tracking read too wide */
	font-weight: 600;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
	overflow: hidden;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
	transition: padding .35s cubic-bezier(.4, 0, .2, 1),
	            background-color .25s ease, border-color .25s ease, color .25s ease;
}

.upd-action__icon {
	flex: 0 0 auto;
	display: inline-flex;
	width: 14px;
	height: 14px;
}
.upd-action__icon svg { display: block; width: 14px; height: 14px; }

/* Collapsible label. grid-template-columns 1fr→0fr animates the content width to
   zero jank-free (unlike max-width), so the content-sized button shrinks smoothly
   to the icon-only circle with no fixed width to animate. Inner <span> clips. */
.upd-action__label {
	display: grid;
	grid-template-columns: 1fr;
	margin-left: 6px;
	opacity: 1;
	transition: grid-template-columns .35s cubic-bezier(.4, 0, .2, 1),
	            margin-left .35s cubic-bezier(.4, 0, .2, 1),
	            opacity .2s ease;
}
.upd-action__label > span { min-width: 0; overflow: hidden; white-space: nowrap; }

/* On state → VIP-gold circle. No fixed width: symmetric 8px padding + 14px icon
   collapses to a 32px round (1+8 + 14 + 8+1) once the label grid hits 0fr. */
.upd-action.is-saved,
.upd-action.is-visited {
	padding-right: 8px;
	background: var(--upd-vip-gold);
	border-color: var(--upd-vip-gold);
	color: #16242c;
}
.upd-action.is-saved .upd-action__label,
.upd-action.is-visited .upd-action__label {
	grid-template-columns: 0fr;
	margin-left: 0;
	opacity: 0;
}

/* Touch devices: neutralize the sticky :hover iOS applies after a tap. Astra's
   unguarded gold `button:hover` would otherwise stick as a yellow shade (our
   styled hover below is gated behind @media (hover: hover), so it can't cover
   touch). Placed BEFORE that block so real-hover devices still get it. */
.upd-action:hover {
	background: rgba(255, 255, 255, .04);
	border-color: #2f4a44;
	color: #cbd5e1;
}
.upd-action.is-saved:hover,
.upd-action.is-visited:hover {
	background: var(--upd-vip-gold);
	border-color: var(--upd-vip-gold);
	color: #16242c;
}

/* Hover only on real hover devices — iOS applies a sticky :hover after a tap,
   which was leaving a teal ring on the button. Explicit bg also beats Astra's
   global gold button:hover. */
@media (hover: hover) {
	.upd-action:hover {
		background: rgba(123, 196, 168, .12);
		border-color: #7BC4A8;
		color: #fff;
	}
	.upd-action.is-saved:hover,
	.upd-action.is-visited:hover {
		background: var(--upd-vip-gold-dark);
		border-color: var(--upd-vip-gold-dark);
		color: #16242c;
	}
}

/* Pin focus/active to the state look (Astra's gold button:focus/:active would
   otherwise flash through; blur() in bucketlist.js also clears focus). */
.upd-action:focus,
.upd-action:active {
	background: rgba(255, 255, 255, .04);
	color: #cbd5e1;
	border-color: #2f4a44;
}
.upd-action.is-saved:focus, .upd-action.is-saved:active,
.upd-action.is-visited:focus, .upd-action.is-visited:active {
	background: var(--upd-vip-gold);
	color: #16242c;
	border-color: var(--upd-vip-gold);
}
.upd-action:focus-visible { outline: 2px solid #7BC4A8; outline-offset: 2px; }
.upd-action:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
	.upd-action { transition: none; }
	.upd-action__label { transition: none; }
}

/* Astra's global button:focus/:active accent (gold) outranks our base classes and
   lingers after a click. Pin focus/active to each button's state-driven look so it
   never flashes gold (and blur() in bucketlist.js clears focus after a click). */
.upd-save:focus, .upd-save:active { background: rgba(255, 255, 255, .92); color: #16242c; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.upd-save.is-saved:focus .upd-save__on, .upd-save.is-saved:active .upd-save__on { color: #CC9966; }
.upd-visited:focus, .upd-visited:active { background: rgba(255, 255, 255, .04); color: #cbd5e1; border-color: #2f4a44; }
.upd-visited.is-visited:focus, .upd-visited.is-visited:active { background: #7BC4A8; color: #0d1f18; border-color: #7BC4A8; }
/* keyboard a11y: a clean teal ring on keyboard focus only, none for mouse focus */
.upd-save:focus-visible, .upd-visited:focus-visible { outline: 2px solid #7BC4A8; outline-offset: 2px; }
.upd-save:focus:not(:focus-visible), .upd-visited:focus:not(:focus-visible) { outline: none; }

.upd-card__visited {
	position: absolute;
	top: 10px;
	right: 10px;
	background: #7BC4A8;
	color: #16242c;
	font-size: .75rem;
	font-weight: 700;
	padding: .2rem .5rem;
	border-radius: 6px;
	z-index: 4;
}
.upd-card__nudge { display: block; margin: .4rem 0 0; padding: 0 1rem 1rem; color: #CC9966; font-weight: 600; font-size: .85rem; }
.upd-card__visit { padding: .35rem 1rem 1rem; }
.upd-card__visit .upd-visited { width: 100%; justify-content: center; }

/* Feed/card overlay: Save + Visited icon buttons side by side (Explorer+ only).
   .upd-card__save is positioned top-left by area-archive.css; make it a flex row. */
.upd-card__save { display: flex; gap: 8px; }
/* Compact round Visited toggle that mirrors the .upd-save circle (white → teal when visited). */
.upd-visited--icon {
	width: 38px; height: 38px; padding: 0; gap: 0;
	display: inline-flex; align-items: center; justify-content: center;
	border: none; border-radius: 50%;
	background: rgba(255, 255, 255, .92); color: #16242c;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
	transition: transform .12s, background .15s, color .15s;
}
.upd-visited--icon:hover { transform: scale(1.08); background: rgba(255, 255, 255, .92); color: #16242c; }
.upd-visited--icon.is-visited { background: #7BC4A8; color: #0d1f18; }
.upd-visited--icon.is-visited:hover { background: #6bb89a; color: #0d1f18; }
.upd-visited--icon:focus, .upd-visited--icon:active { background: rgba(255, 255, 255, .92); color: #16242c; }
.upd-visited--icon.is-visited:focus, .upd-visited--icon.is-visited:active { background: #7BC4A8; color: #0d1f18; }
.upd-visited--icon:focus-visible { outline: 2px solid #7BC4A8; outline-offset: 2px; }
.upd-visited--icon:focus:not(:focus-visible) { outline: none; }

.upd-bucketlist-empty { max-width: 460px; margin: 3rem auto; text-align: center; color: #cdd6dc; }
.upd-bucketlist-empty .upd-btn { margin-top: 1rem; }

/* ==========================================================================
   Single-place registration gate — blurred teaser + plan comparison table.
   Mobile-first: cards stack; promote to 3 columns at >=720px.
   ========================================================================== */
.upd-gate {
	max-width: 1040px;
	margin: 1.5rem auto 3rem;
	padding: 0 16px;
}

/* Holds the real place name (non-VIP, crawlable <h1>) or the VIP banner. */
.upd-gate__title {
	margin: 0 0 1.25rem;
}

.upd-gate__teaser {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 6px;
	border-radius: 16px;
	overflow: hidden;
	margin-bottom: 1.75rem;
}
.upd-gate__photo {
	height: 170px;
	background-size: cover;
	background-position: center;
}
.upd-gate__photo--hero { height: 220px; }

.upd-gate__intro { text-align: center; margin-bottom: 1.5rem; }
.upd-gate__heading { font-size: 1.45rem; color: #fff; margin: 0 0 .4rem; font-weight: 700; }
.upd-gate__sub { color: #c7d2cd; margin: 0 auto; max-width: 48ch; }

.upd-plans {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
.upd-plans__col {
	display: flex;
	flex-direction: column;
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 16px;
	padding: 20px;
}
.upd-plans__col--vip {
	border-color: var(--upd-vip-gold);
	box-shadow: inset 0 0 0 1px var(--upd-vip-gold), 0 14px 36px rgba(0, 0, 0, .22);
}
.upd-plans__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding-bottom: 14px;
	margin-bottom: 14px;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.upd-plans__name { font-size: 1.15rem; font-weight: 700; color: #fff; }
.upd-plans__col--vip .upd-plans__name { color: var(--upd-vip-gold); }
.upd-plans__price { font-size: 1rem; font-weight: 700; color: #fff; white-space: nowrap; }

.upd-plans__features {
	flex: 1;
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.upd-plans__feature {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: .92rem;
	line-height: 1.35;
	color: #e8e8e8;
}
.upd-plans__feature .upd-icon { flex: 0 0 auto; margin-top: 1px; }
.upd-plans__feature.is-on .upd-icon { color: var(--up-teal); }
.upd-plans__feature.is-off { opacity: .55; }
.upd-plans__feature.is-off .upd-icon { color: var(--up-sage); }

.upd-plans__cta { margin-top: auto; }
.upd-plans__here {
	display: block;
	text-align: center;
	font-size: .9rem;
	color: #c7d2cd;
	padding: .6rem;
	border: 1px dashed rgba(255, 255, 255, .25);
	border-radius: 8px;
}

.upd-gate__signin { text-align: center; margin-top: 1.5rem; color: #c7d2cd; }
.upd-gate__signin a { font-weight: 600; }

@media (min-width: 720px) {
	.upd-gate__teaser { grid-template-columns: 2fr 1fr; }
	.upd-gate__photo, .upd-gate__photo--hero { height: 260px; }
	.upd-plans { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
	.upd-plans__col--vip { transform: translateY(-8px); }
}