/* Личный кабинет, Фаза A — registration/login/account pages. */

.pt-account-page {
	max-width: 420px;
	margin: 0 auto;
	padding: 2rem 1rem 4rem;
}

.pt-account-form {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.pt-account-form label {
	font-weight: 600;
	font-size: 0.9rem;
}

.pt-account-form input {
	padding: 0.65rem 0.75rem;
	border: 1px solid #d0d0d0;
	border-radius: 6px;
	font-size: 1rem;
}

.pt-account-submit {
	margin-top: 0.5rem;
	padding: 0.75rem 1rem;
	border: none;
	border-radius: 6px;
	background: #1b7a4d;
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

.pt-account-submit:disabled {
	opacity: 0.6;
	cursor: default;
}

.pt-account-submit-danger {
	background: #d6402c;
}

.pt-account-form-error {
	color: #d6402c;
	font-size: 0.9rem;
}

.pt-account-form-message {
	color: #1b7a4d;
	font-size: 0.9rem;
}

.pt-account-alt-link {
	margin-top: 1rem;
	font-size: 0.9rem;
}

.pt-account-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.5rem;
}

.pt-account-danger-zone {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid #e5e5e5;
}

/* "Accedi/Registrati con Google" — OAuthPage::auth_url(). */
.pt-account-oauth-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	margin-top: 1.5rem;
	padding: 0.7rem 1rem;
	border: 1px solid #d0d0d0;
	border-radius: 6px;
	background: #fff;
	color: #1a1a1a;
	font-weight: 600;
	text-decoration: none;
}

.pt-account-oauth-btn:hover {
	background: #f7f7f7;
}

.pt-account-oauth-divider {
	margin: 1rem 0 0;
	text-align: center;
	color: #888;
	font-size: 0.85rem;
	text-transform: uppercase;
}

/* Этап 3 — page-account.php's hub (redesigned 2026-08 to match Figma Frame
   106 — non-Premium — and Frame 121 — Premium — 390px reference width, see
   page-account.php's own docblock). .pt-account-hub overrides
   .pt-account-page's own centered-column layout (max-width: 420px still
   applies) with the frame's own vertical rhythm. */
.pt-account-hub h1 {
	font-size: 1.375rem;
	margin: 0 0 1.25rem;
}

/* page-impostazioni.php's own header/section-heading icon prefix (Figma
   Frame 116) — reuses .pt-account-hub h1's own size for the page title,
   --small brings it down to section-heading scale for the h2s below. */
.pt-account-hub-title-icon {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

h2.pt-account-hub-title-icon--small {
	font-size: 1.125rem;
	margin: 0 0 0.25rem;
}

.pt-account-hub-avatar-wrap {
	position: relative;
	width: fit-content;
	margin: 0 auto 1rem;
}

/* Shared base for the generated initial-on-gradient avatar (Aug 2026,
   pricetracker_avatar_html() in functions.php) — background is a per-user
   inline style, this rule only handles centering the letter and its
   typography. Each size variant below (.pt-account-hub-avatar,
   .pt-famiglia-user-avatar, .pt-famiglia-member-avatar) sets its own
   width/height/font-size and stacks on top of this via multi-class markup. */
.pt-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	user-select: none;
}

.pt-account-hub-avatar {
	width: 5.375rem; /* 86px */
	height: 5.375rem;
	border-radius: 50%;
	font-size: 2rem;
}

/* Frame 121's own avatar badge — a Plus member only, see page-account.php's
   own is_premium check. */
.pt-account-hub-plus-badge {
	position: absolute;
	top: -0.3rem;
	right: -0.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 1.25rem;
	padding: 0 0.6rem;
	border: 1px solid #000;
	border-radius: 999px;
	background: #fff;
	color: #000;
	font-size: 0.625rem;
	font-weight: 500;
	white-space: nowrap;
}

.pt-account-hub-greeting {
	margin: 0;
	color: #000;
	font-size: 1rem;
	font-weight: 500;
	text-align: center;
}

.pt-account-hub-email {
	margin: 0.15rem 0 1.5rem;
	color: rgba( 0, 0, 0, 0.5 );
	font-size: 0.875rem;
	text-align: center;
}

.pt-account-hub-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0 0 1.5rem;
	padding: 1rem;
	border-radius: 16px;
	text-decoration: none;
}

.pt-account-hub-banner-title {
	margin: 0 0 0.3rem;
	font-size: 1rem;
	font-weight: 500;
	color: #fff;
}

.pt-account-hub-banner-desc {
	margin: 0;
	font-size: 0.625rem;
	line-height: 1.4;
	color: rgba( 255, 255, 255, 0.7 );
}

/* Frame 121's own banner — 5 overlapping blurred gradient blobs in Figma
   (Ellipse 88/89/90/91/92), approximated here as one linear-gradient
   through the same exact stop colors in their left-to-right visual order —
   same effect, without needing 5 blurred layers + blend modes for a single
   banner background. */
.pt-account-hub-banner--premium {
	background: linear-gradient( 90deg, #ffbe32, #ff0000, #ff00b2, #be32ff, #00ff88 );
}

.pt-account-hub-banner--upsell {
	background: linear-gradient( 90deg, #5d7784, #171c22, #365363 );
}

/* Figma Frame 171's own banner (measured off the canvas: linear-gradient(
   90deg, #000 -15.64%, #FF2B2B 66.26%, #FF875C 132.26%)) — replaces
   --upsell on the non-premium state of page-account.php now that its own
   arrow-CTA pointed at an upgrade flow that doesn't exist yet (Plus is
   still waitlist-only). */
.pt-account-hub-banner--plus {
	background: linear-gradient( 90deg, #000 -15.64%, #ff2b2b 66.26%, #ff875c 132.26% );
}

.pt-account-hub-banner-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
	height: 2.1875rem; /* 35px */
	padding: 0 0.9rem;
	border: 1px solid #fff;
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.1 );
	color: #fff;
	font-size: 0.75rem;
	font-weight: 500;
	white-space: nowrap;
}

/* Same box as .pt-account-hub-banner-cta (121x35px measured in Figma) but
   dashed border, no icon, not a link — a static "not purchasable yet"
   marker, not a call to action. */
.pt-account-hub-banner-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	height: 2.1875rem; /* 35px */
	padding: 0 0.9rem;
	border: 1px dashed #fff;
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.1 );
	color: #fff;
	font-size: 0.75rem;
	font-weight: 500;
	white-space: nowrap;
}

.pt-account-hub-menu {
	display: flex;
	flex-direction: column;
	margin-top: 0.5rem;
}

/* Frame 171's own section headers ("Account"/"Funzioni"/"Supporto"/
   "Informazioni legali") — measured: 14px, black at 60% opacity. First one
   sits right under the banner without extra top gap; the rest get some
   breathing room from the section above. */
.pt-account-hub-menu-section {
	margin: 1.5rem 0 0.25rem;
	font-size: 0.875rem;
	font-weight: 400;
	color: rgba( 0, 0, 0, 0.6 );
}

.pt-account-hub-menu-section:first-child {
	margin-top: 0.5rem;
}

.pt-account-hub-menu-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	height: 3.75rem; /* 60px */
	padding: 0 0.2rem;
	color: #000;
	text-decoration: none;
	font-size: 1.125rem;
	cursor: pointer;
}

.pt-account-hub-menu-item:active {
	opacity: 0.6;
}

/* Stub rows (Acquisti/Centro assistenza/Domande frequenti/WhatsApp/
   Telegram — no real page or contact behind them yet) aren't links, so
   there's no :active press state to speak of — just a plain row. */
.pt-account-hub-menu-item--stub {
	cursor: default;
}

/* Frame 171's own 40x40 rounded-square icon chip (measured: radius 8px,
   background black at 10% opacity) — the old 4-item menu had bare 28px
   icons with no chip, this is new with the 19-row redesign. WhatsApp/
   Telegram override the background inline (page-account.php's own
   'badge_bg') to their brand color instead of this default. */
.pt-account-hub-menu-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.5rem; /* 40px */
	height: 2.5rem;
	border-radius: 8px;
	background: rgba( 0, 0, 0, 0.1 );
	color: #1a1a1a;
}

.pt-account-hub-menu-label {
	flex: 1;
}

.pt-account-hub-menu-chevron {
	flex-shrink: 0;
	color: #989898;
}

.pt-account-hub-menu-stub-badge {
	margin: 0;
	flex-shrink: 0;
	white-space: nowrap;
}

/* Auto layout (user request, 2026-08) — Frame 106 is a 390px mobile
   reference, but nothing about this hub is inherently phone-only content:
   .pt-account-hub-menu already reads fine as a wrapping grid, not just a
   stacked list, so above the phone width it becomes one instead of staying
   pinned to the frame's own narrow column with growing empty margins on a
   real desktop screen. .pt-account-page's own 420px cap (login/register/
   settings forms, which genuinely don't benefit from stretching) is
   untouched — only .pt-account-hub opts into the wider, grid-ified layout. */
@media ( min-width: 640px ) {
	.pt-account-hub {
		max-width: 640px;
	}

	.pt-account-hub-menu {
		display: grid;
		grid-template-columns: repeat( 2, 1fr );
		gap: 0.75rem 1.25rem;
	}

	.pt-account-hub-menu-item {
		height: auto;
		padding: 1.1rem;
		border: 1px solid var( --pt-color-border );
		border-radius: 12px;
	}

	.pt-account-hub-menu-item:hover {
		background: var( --pt-color-bg-soft );
	}

	.pt-account-hub-banner {
		padding: 1.5rem;
	}

	/* Section headers span both grid columns instead of being squeezed
	   into a single cell alongside the rows they introduce. */
	.pt-account-hub-menu-section {
		grid-column: 1 / -1;
	}
}

/* Этап 3 — page-impostazioni.php's own sections (password/notifications/
   export), same visual rhythm as .pt-account-danger-zone already had. */
.pt-account-section {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid #e5e5e5;
}

/* Frame 172/173 — the first section right under the greeting/banner has
   no divider of its own to separate from (there's nothing above it but
   the avatar block), unlike every later .pt-account-section on the same
   page. */
.pt-account-section--first {
	margin-top: 1.5rem;
	padding-top: 0;
	border-top: none;
}

.pt-account-section-hint {
	color: var( --pt-color-stable );
	font-size: 0.85rem;
	margin: -0.5rem 0 1rem;
}

/* Figma Frame 116 — page-impostazioni.php's own button style: a full-width
   outlined pill-ish rect, icon+label centered together as one unit
   regardless of which side the icon sits on in the markup (Carica/Cambia
   have it first, Esporta/Esci/Elimina have it last — justify-content:
   center reads identically either way). */
.pt-account-btn-group {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.pt-account-btn-group--stacked {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid #e5e5e5;
}

.pt-account-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	width: 100%;
	height: 3.125rem; /* 50px */
	padding: 0 0.9rem;
	border: 2px solid #000;
	border-radius: 10px;
	background: #fff;
	color: #000;
	font-size: 1rem;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
}

.pt-account-btn--danger {
	border-color: #f21835;
	background: rgba( 242, 24, 53, 0.1 );
	color: #f21835;
}

/* Figma Frame 120/122 (page-famiglia.php) — the one solid/filled variant of
   this button family; every other .pt-account-btn usage site-wide is
   outlined. */
.pt-account-btn--primary {
	border-color: #3078ff;
	background: #3078ff;
	color: #fff;
}

.pt-account-btn[disabled] {
	border-color: var( --pt-color-border );
	background: #f4f3f1;
	color: var( --pt-color-stable );
	cursor: default;
}

/* <a class="pt-account-btn"> ("Passa a Plus") shouldn't pick up the
   browser's own link-underline/visited-color defaults. */
a.pt-account-btn {
	text-decoration: none;
}

/* Notification toggles (Figma Frame 116) — a different track/thumb spec
   than home.css's own .pt-switch (that one's the homepage price-changed
   filter, unrelated), so its own class rather than reusing/overloading
   .pt-switch. */
.pt-pref-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 0.9rem;
	font-size: 0.875rem;
	cursor: pointer;
}

.pt-pref-toggle {
	position: relative;
	flex-shrink: 0;
}

.pt-pref-toggle input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.pt-pref-toggle-track {
	display: block;
	width: 3.4375rem; /* 55px */
	height: 1.875rem; /* 30px */
	border-radius: 999px;
	background: #dfdfdf;
	transition: background 0.15s ease;
}

.pt-pref-toggle-thumb {
	position: absolute;
	top: 0.25rem;
	left: 0.25rem;
	width: 1.375rem; /* 22px */
	height: 1.375rem;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.25 );
	transition: transform 0.15s ease;
}

.pt-pref-toggle input:checked + .pt-pref-toggle-track {
	background: #000;
}

.pt-pref-toggle input:checked + .pt-pref-toggle-track .pt-pref-toggle-thumb {
	transform: translateX( 1.625rem );
}

/* Этап 4 — page-famiglia.php / famiglia-invito.php. */

/* Figma Frame 120/122 — the small inline avatar+name+badge row under the
   page title, distinct from the hub's own big centered
   .pt-account-hub-avatar. */
.pt-famiglia-user-row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 0.5rem;
}

.pt-famiglia-user-avatar {
	width: 2.375rem; /* 38px */
	height: 2.375rem;
	border-radius: 50%;
	font-size: 1rem;
	flex-shrink: 0;
}

.pt-famiglia-user-name {
	font-weight: 600;
}

.pt-famiglia-status {
	margin: 0.35rem 0 1.25rem;
	color: var( --pt-color-stable );
	font-size: 0.875rem;
}

.pt-famiglia-illustration {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	height: 11.25rem; /* 180px, matches Figma's own Rectangle 601 */
	border-radius: 16px;
	margin-bottom: 1.25rem;
	background: linear-gradient( 108deg, #e8ffea, #cfe9ff, #e148ff );
}

/* Exact vectors exported from Figma (see page-famiglia.php's own comment) —
   width left auto so each keeps its real aspect ratio at this height. */
.pt-famiglia-illustration svg {
	height: 6.5rem;
	width: auto;
}

.pt-famiglia-heading {
	text-align: center;
	font-size: 1.125rem;
	margin: 0 0 0.6rem;
}

.pt-famiglia-desc {
	text-align: center;
	color: var( --pt-color-stable );
	font-size: 0.875rem;
	line-height: 1.5;
	margin: 0 0 1.25rem;
}

.pt-famiglia-benefits {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.pt-famiglia-benefits li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.pt-famiglia-benefits svg {
	flex-shrink: 0;
	margin-top: 0.1rem;
}

.pt-famiglia-benefits span {
	font-size: 0.875rem;
	line-height: 1.45;
	color: var( --pt-color-text );
}

.pt-famiglia-hint {
	text-align: center;
	color: var( --pt-color-stable );
	font-size: 0.8rem;
	margin: 0 0 1.25rem;
}

/* Figma Frame 131 ("Crea gruppo famiglia") / Frame 129 ("Unisciti al
   gruppo") — native <dialog> for free ESC-to-close + backdrop + focus
   trapping, same reasoning home.css's own .pt-chart-dialog already
   documents. account.css never loads home.css (account-type pages only),
   so this is its own small copy of that base treatment rather than a
   shared class. */
.pt-famiglia-dialog {
	width: min( 340px, calc( 100vw - 2rem ) );
	border: none;
	border-radius: 16px;
	padding: 1.5rem;
}

.pt-famiglia-dialog::backdrop {
	background: rgba( 0, 0, 0, 0.5 );
}

.pt-famiglia-dialog h2 {
	text-align: center;
	font-size: 1.125rem;
	margin: 0 0 1rem;
}

.pt-famiglia-dialog p {
	text-align: center;
	font-size: 0.875rem;
	color: var( --pt-color-stable );
	margin: 0 0 1.25rem;
}

.pt-famiglia-dialog .pt-famiglia-dialog-warning {
	color: #f21835;
	text-align: left;
}

.pt-famiglia-invitations {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.pt-famiglia-invitation {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid var( --pt-color-border );
	border-radius: 8px;
	font-size: 0.9rem;
}

.pt-famiglia-invitation-email {
	flex: 1;
	font-weight: 600;
}

/* Figma Frame 123 (room to grow) / 126 (owner removing a member) / 127
   (full, 5/5) / 128 (member's own read-only view) — page-famiglia.php's
   active-group states. */
.pt-famiglia-list-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 0 0 0.6rem;
}

.pt-famiglia-list-header h3 {
	font-size: 1rem;
	font-weight: 400;
	margin: 0;
}

.pt-famiglia-count {
	color: rgba( 0, 0, 0, 0.5 );
	font-size: 1.125rem;
	font-weight: 500;
}

.pt-famiglia-member-list {
	border: 1px solid var( --pt-color-border );
	border-radius: 16px;
	overflow: hidden;
	margin-bottom: 1.5rem;
}

.pt-famiglia-member-row {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.9rem;
	border-bottom: 1px solid var( --pt-color-border );
	transition: background 0.15s ease;
}

.pt-famiglia-member-list > :last-child {
	border-bottom: none;
}

.pt-famiglia-member-row--removable {
	cursor: pointer;
}

.pt-famiglia-member-row--removable.is-confirming {
	background: #d9d9d9;
}

.pt-famiglia-member-avatar {
	width: 3.625rem; /* 58px */
	height: 3.625rem;
	border-radius: 50%;
	font-size: 1.375rem;
	flex-shrink: 0;
}

.pt-famiglia-member-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.pt-famiglia-member-name {
	font-size: 0.875rem;
	color: #000;
}

.pt-famiglia-member-email {
	font-size: 0.875rem;
	color: rgba( 0, 0, 0, 0.5 );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pt-famiglia-member-remove {
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	flex-shrink: 0;
	border: none;
	background: none;
	color: #f21835;
	font-size: 0.6875rem;
	line-height: 1.1;
	text-align: center;
	cursor: pointer;
}

.pt-famiglia-member-row--removable.is-confirming .pt-famiglia-member-remove {
	display: flex;
}

.pt-famiglia-add-link {
	display: block;
	width: 100%;
	padding: 0.9rem;
	border: none;
	background: none;
	color: #3078ff;
	font-size: 0.875rem;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}

.pt-famiglia-limit-hint {
	margin: 0;
	padding: 0.9rem;
	color: rgba( 0, 0, 0, 0.5 );
	font-size: 0.8rem;
	text-align: center;
}

.pt-famiglia-invitation-resend,
.pt-famiglia-invitation-cancel {
	border: 1px solid var( --pt-color-border );
	background: #fff;
	border-radius: 6px;
	padding: 0.35rem 0.7rem;
	font-size: 0.8rem;
	cursor: pointer;
}

.pt-famiglia-invite-actions {
	display: flex;
	gap: 0.75rem;
	margin-top: 1rem;
}

.pt-famiglia-invite-actions .pt-account-submit {
	flex: 1;
}

/* Figma Frame144 (page-abbonamenti.php) — the Plus paywall. Root Frame144
   is a full-bleed 390x811 app screen with no outer chrome, so on a phone
   viewport this cancels .pt-account-page's own padding and goes edge to
   edge rather than reading as a card floating inside a card. A contained,
   rounded/shadowed card only makes sense once the viewport is wider than
   the reading column itself (see the min-width block below). */
.pt-sub-card {
	margin: -2rem -1rem 0;
	background: #fff;
	overflow: hidden;
}

@media ( min-width: 480px ) {
	.pt-sub-card {
		max-width: 26rem;
		margin: 1rem auto 0;
		border-radius: 1.25rem;
		box-shadow: 0 1px 2.5rem rgba( 0, 0, 0, 0.12 );
	}
}

.pt-sub-hero {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
	padding: 3.25rem 1rem;
}

.pt-sub-hero-logo {
	width: 6.5rem;
	height: auto;
	/* logo.svg is solid #000 fills — inverting a pure black-on-transparent
	   graphic yields pure white, no separate white asset needed. */
	filter: invert( 1 );
}

.pt-sub-card--active .pt-sub-hero {
	padding: 2.5rem 1rem;
}

.pt-sub-body {
	padding: 1.75rem 1rem 2rem;
	text-align: center;
}

.pt-sub-username {
	margin: 0 0 0.25rem;
	font-size: 1rem;
	font-weight: 400;
	color: #000;
}

/* "In sviluppo" badge (Aug 2026) — started on page-abbonamenti.php (waitlist
   mode, see that file's own docblock), reused on page-famiglia.php for the
   same underlying reason: family-group *creation* needs Plus, which isn't
   purchasable yet either. Named generically (not .pt-sub-*) since it isn't
   tied to the subscription card specifically — any Plus-gated feature can
   reuse it. Same amber-note language as .pt-page-note elsewhere in the
   theme (informational, not an error), just pill-shaped. */
.pt-badge-dev {
	display: inline-block;
	margin: 0 0 0.5rem;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: #fff4d6;
	color: #7a5900;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.pt-sub-heading {
	margin: 0 0 0.75rem;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
	color: #000;
}

.pt-sub-heading-brand {
	color: #5787ff;
}

.pt-sub-subtitle {
	margin: 0 0 0.25rem;
	font-size: 0.625rem;
	font-weight: 300;
	color: #000;
}

.pt-sub-fineprint {
	margin: 0 0 1rem;
	font-size: 0.625rem;
	font-weight: 300;
	color: rgba( 0, 0, 0, 0.5 );
}

/* Monthly/annual toggle — no Figma frame for this yet, see page-abbonamenti.php's
   own docblock. Segmented-control pattern matching .pt-sub-cta's accent
   (#3078ff) and the same green ("Miglior prezzo" badges elsewhere in the
   theme) for the savings pill, not a pixel import. */
.pt-sub-plan-toggle {
	display: flex;
	gap: 0.25rem;
	background: #f4f3f1;
	border-radius: 0.75rem;
	padding: 0.25rem;
	margin: 0 0 1.25rem;
}

.pt-sub-plan-option {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	padding: 0.5rem 0.75rem;
	border: none;
	border-radius: 0.5rem;
	background: transparent;
	color: rgba( 0, 0, 0, 0.6 );
	font-size: 0.8125rem;
	font-weight: 500;
	cursor: pointer;
}

.pt-sub-plan-option.is-active {
	background: #fff;
	color: #000;
	box-shadow: 0 1px 0.375rem rgba( 0, 0, 0, 0.08 );
}

.pt-sub-plan-badge {
	font-size: 0.6875rem;
	font-weight: 600;
	color: #1b7a4d;
	background: #e5f1e9;
	border-radius: 999px;
	padding: 0.05rem 0.4rem;
}

.pt-sub-features {
	border: 1px solid rgba( 143, 143, 143, 0.5 );
	border-radius: 1rem;
	padding: 0 1rem;
	margin: 0 0 1.25rem;
	text-align: left;
}

.pt-sub-feature-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.85rem 0;
}

.pt-sub-feature-icon {
	flex: 0 0 auto;
}

.pt-sub-feature-label {
	flex: 1 1 auto;
	font-size: 0.875rem;
	font-weight: 500;
	color: rgba( 0, 0, 0, 0.9 );
}

.pt-sub-feature-check {
	flex: 0 0 auto;
}

.pt-sub-feature-divider {
	height: 1px;
	background: rgba( 143, 143, 143, 0.25 );
}

.pt-sub-legal {
	max-width: 19rem;
	margin: 0 auto 1.25rem;
	font-size: 0.625rem;
	line-height: 1.21;
	color: #000;
}

.pt-sub-legal a {
	color: #3078ff;
	font-weight: 500;
	text-decoration: none;
}

.pt-sub-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.625rem 0.9375rem;
	border: none;
	border-radius: 0.625rem;
	background: #3078ff;
	color: #fff;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
}

.pt-sub-cta:disabled {
	cursor: default;
	opacity: 0.7;
}

/* Waitlist already joined — swaps the blue CTA for the same green used for
   "Miglior prezzo"/savings badges elsewhere, same reasoning as
   .pt-sub-plan-badge's own comment: quiet confirmation, not an error or a
   dead-end. */
.pt-sub-cta--joined {
	background: #e5f1e9;
	color: #1b7a4d;
	opacity: 1;
}

.pt-sub-purchase-notice {
	margin: 0.75rem 0 0;
	font-size: 0.8rem;
	color: rgba( 0, 0, 0, 0.6 );
}

.pt-sub-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	margin: 1.5rem 0 0;
	font-size: 1rem;
	font-weight: 500;
	color: #000;
}

.pt-sub-footer-logo {
	width: 0.9375rem;
	height: 1.0625rem;
}

/* Figma Frame139 "popup di conferma dell'iscrizione" (two-checkbox purchase
   consent — art. 59 lett. o Cod. Consumo) removed Aug 2026 along with its
   markup in page-abbonamenti.php, now that the CTA joins a waitlist instead
   of opening a purchase dialog — see that file's own docblock for where to
   re-derive this consent pattern when real Paddle billing lands. */

/* ==========================================================================
   Figma Frame 107-113 (this session, 2nd pass) — pixel-matched rebuild.
   The first pass reused the generic .pt-account-* classes and just dropped
   new markup into them; this replaces that with dedicated .pt-auth-* classes
   carrying the frames' own measured values (Figma Inspect, 390px reference
   width — the same design width the theme's own .pt-account-page max-width
   already approximates at 420px, so no separate breakpoint is needed).
   ========================================================================== */

/* Big centered apple mark — Frame107/108's own real asset (exported from
   Figma via Copy as PNG; the flat/black logo.svg elsewhere in this theme is
   a different, single-color mark used for the tiny header lockup below,
   not interchangeable with this one). 168.29x183 in Figma, rounded to
   whole px. */
.pt-auth-logo {
	display: block;
	width: 168px;
	height: 182px;
	margin: 0 auto;
	background: url( '../images/auth-apple-logo.png' ) no-repeat center / contain;
}

/* Small "🍎 PrezzoDB" header lockup on Frame110-113 — same logo.svg mark
   already used elsewhere in this theme, just paired with the wordmark at a
   size these screens alone use. */
.pt-auth-logo-small {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	margin: 38px auto 0;
	font-size: 0.8125rem;
	font-weight: 700;
}

.pt-auth-logo-small svg {
	width: 15px;
	height: 16px;
}

.pt-auth-heading {
	margin: 0;
	font-size: 1.5rem; /* 24px */
	font-weight: 700;
	line-height: 0.9;
	text-align: center;
	color: #000;
}

.pt-auth-heading--left {
	text-align: left;
}

.pt-auth-subtitle {
	margin: 0;
	font-size: 0.875rem; /* 14px */
	font-weight: 300;
	line-height: 1.38;
	text-align: center;
	color: rgba( 0, 0, 0, 0.5 );
}

.pt-auth-subtitle--left {
	text-align: left;
}

.pt-auth-subtitle strong {
	font-weight: 500;
	color: #000;
}

/* Pill buttons (radius 55 — Frame107's Login/Registro, Frame108's
   Google/Email) — 338x50, shared base + primary(black)/outline(white)
   fills. Reuses <a>'s already-set display:flex/no-underline from earlier
   in this file. */
.pt-auth-btn-pill {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem; /* 10px (107's own two buttons measure 8px — close enough not to need a second gap value) */
	width: 100%;
	max-width: 338px;
	height: 50px;
	margin: 0 auto;
	padding: 10px 15px;
	border-radius: 55px;
	border: 1px solid #000;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	box-sizing: border-box;
}

.pt-auth-btn-pill--primary {
	background: #000;
	color: #fff;
}

.pt-auth-btn-pill--outline {
	background: #fff;
	color: #000;
}

/* Rounded-rect buttons (radius 10 — Frame110-113's Verificare/resend/
   Accedi al tuo profilo) — 338x60, a taller, squarer sibling of the pill
   above; kept as its own class rather than a modifier since the radius
   and height both differ, not just the fill. */
.pt-auth-btn-rect {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 338px;
	height: 60px;
	margin: 0 auto;
	padding: 10px 15px;
	border-radius: 10px;
	border: none;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	box-sizing: border-box;
}

.pt-auth-btn-rect--primary {
	background: #000;
	color: #fff;
}

.pt-auth-btn-rect--outline {
	background: #fff;
	color: rgba( 0, 0, 0, 0.7 );
	border: 1px solid #000;
}

.pt-auth-btn-rect:disabled {
	opacity: 0.5;
	cursor: default;
}

/* Frame109's four inputs — radius 10 (not the pill's 55), border color
   #535353 already used elsewhere in this theme (product-card.php's own
   secondary text color) rather than a new gray. */
.pt-auth-input-group {
	position: relative;
	width: 100%;
	max-width: 338px;
	margin: 0 auto;
}

.pt-auth-input {
	display: block;
	width: 100%;
	height: 50px;
	padding: 10px 15px;
	border-radius: 10px;
	border: 1.5px solid #535353;
	font-size: 0.875rem;
	box-sizing: border-box;
}

.pt-auth-input-toggle {
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translateY( -50% );
	width: 24px;
	height: 18px;
	padding: 0;
	border: none;
	background: url( '../images/icon-eye.png' ) no-repeat center / contain;
	cursor: pointer;
}

.pt-auth-checkbox-row {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	width: 100%;
	max-width: 338px;
	margin: 62px auto 0; /* Figma: Conferma-password bottom (632) to checkbox row top (694) */
	font-size: 0.875rem;
	color: #000;
}

.pt-auth-checkbox-row input {
	appearance: none;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin: 0;
	border-radius: 6px;
	border: 1.5px solid #535353;
	background: #fff no-repeat center / 16px 16px;
	cursor: pointer;
}

.pt-auth-checkbox-row input:checked {
	background-image: url( '../images/icon-checkbox-checked.png' );
	border-color: #000;
}

.pt-auth-legal-note {
	margin: 20px auto 0;
	max-width: 338px;
	font-size: 0.75rem;
	color: rgba( 0, 0, 0, 0.5 );
	text-align: center;
}

.pt-auth-legal-note a {
	color: inherit;
	text-decoration: underline;
}

/* Frame107/108's small "already have an account? Login" footer line. */
.pt-auth-footer-link {
	margin: 20px auto 0;
	font-size: 0.8125rem;
	text-align: center;
	color: rgba( 0, 0, 0, 0.6 );
}

.pt-auth-footer-link a {
	color: #000;
	font-weight: 600;
	text-decoration: underline;
}

/* Frame110-113 — the 4-digit code row, 47x63/radius10/border1.5 (measured
   via Figma Inspect), spread across the same 338px content width the
   buttons/inputs use. */
.pt-verify-code-inputs {
	display: flex;
	justify-content: space-between;
	width: 100%;
	max-width: 338px;
	margin: 25px auto 0;
}

.pt-verify-code-digit {
	width: 47px;
	height: 63px;
	border: 1.5px solid #535353;
	border-radius: 10px;
	text-align: center;
	font-size: 1.5rem;
	font-weight: 600;
	box-sizing: border-box;
}

.pt-verify-code-digit:focus {
	border-color: #000;
	outline: none;
}

.pt-verify-code-digit:disabled {
	opacity: 0.5;
}

#pt-verify-resend {
	margin-top: 15px;
}

/* Frame113 — scalloped green blob (real asset, not achievable with plain
   border-radius) with the checkmark centered on top. */
#pt-verify-success {
	text-align: center;
}

.pt-auth-success-icon {
	display: block;
	position: relative;
	width: 101px;
	height: 101px;
	margin: 62px auto 0;
	background: url( '../images/icon-success-star.png' ) no-repeat center / contain;
}

.pt-auth-success-icon img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 39px;
	transform: translate( -50%, -50% );
}

#pt-verify-success .pt-auth-btn-rect {
	margin-top: 40px;
}

/* Frame 114/115/117 additions (this session's 2nd extraction pass). */

.pt-auth-field-label {
	display: block;
	max-width: 338px;
	margin: 0 auto;
	font-size: 0.875rem;
	font-weight: 700;
}

.pt-auth-row-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	max-width: 338px;
	margin: 20px auto 0;
	font-size: 0.8125rem;
	flex-wrap: wrap;
}

.pt-auth-checkbox-inline {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.pt-auth-checkbox-inline input {
	width: 16px;
	height: 16px;
	margin: 0;
}

.pt-auth-inline-link {
	color: #1976d2;
	text-decoration: none;
	font-size: 0.8125rem;
	line-height: 1.2;
}

.pt-auth-inline-link:hover {
	text-decoration: underline;
}

/* "Accedi con" divider (Frame 114) — a line each side of the label, same
   visual idea as .pt-account-oauth-divider elsewhere in this file but
   matching this session's .pt-auth-* sizing instead. */
.pt-auth-divider {
	position: relative;
	width: 100%;
	max-width: 338px;
	margin: 30px auto 0;
	text-align: center;
	font-size: 0.75rem;
	color: rgba( 0, 0, 0, 0.5 );
}

.pt-auth-divider::before,
.pt-auth-divider::after {
	content: '';
	position: absolute;
	top: 50%;
	width: calc( 50% - 3rem );
	border-top: 1px solid #d9d9d9;
}

.pt-auth-divider::before {
	left: 0;
}

.pt-auth-divider::after {
	right: 0;
}

/* Google icon-only square button (Frame 114) — distinct from the pill
   Google/Email buttons on Frame 108, which carry a text label. */
.pt-auth-square-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 91px;
	height: 61px;
	margin: 20px auto 0;
	border-radius: 10px;
	border: 1.5px solid #535353;
	background: #fff;
}

/* Frame 116 (page-impostazioni.php) additions. */

.pt-account-btn--outline-primary {
	border-color: #3078ff;
	background: #fff;
	color: #3078ff;
}

.pt-account-hub {
	position: relative;
}

.pt-account-hub-back {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	border: 1px solid #e5e5e5;
	background: #fff;
	color: #000;
}

.pt-account-footer-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid #e5e5e5;
}

/* page-account.php's own single "Esci dal tuo account" row (Frame 171) —
   .pt-account-footer-row's default space-between assumes two items
   (delete + logout, as on page-impostazioni.php); with just one, centered
   reads closer to the frame than left-aligned-by-default flex would. */
.pt-account-footer-row--center {
	justify-content: center;
}

.pt-account-footer-link {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	background: none;
	border: none;
	padding: 0;
	font-size: 0.875rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	color: #000;
	text-decoration: none;
}

.pt-account-footer-link--danger {
	color: #d6402c;
}