/* ================================================================
   fc-user-area.css
   CSS condiviso per tutte le pagine area utente (account, billing,
   cancel, invoice, checkout, member-profile-edit, levels).
   Sovrascrive le variabili PMPro e allinea al design system del tema.
   ================================================================ */

/* ── PMPro design tokens → tema Falsissimo ───────────────────────── */

:root {
	--pmpro--color--accent:              #d70700;
	--pmpro--color--accent--variation:   #a50600;
	--pmpro--color--base:                #ffffff;
	--pmpro--color--contrast:            #111118;
	--pmpro--color--border:              #dde1ea;
	--pmpro--color--border--variation:   #dde1ea;
	--pmpro--base--border-radius:        12px;
	--pmpro--base--spacing--small:       0.75rem;
	--pmpro--base--spacing--medium:      1rem;
	--pmpro--base--spacing--large:       1.25rem;
	--pmpro--box-shadow:                 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
}

/* ── Nascondi titolo/divider di page.php ─────────────────────────── */

.page-title,
.content-divider {
	display: none !important;
}

/* ── Spaziatura area contenuto ───────────────────────────────────── */

.page-content-section {
	padding-block: 2.5rem;
}

/* ── Font ────────────────────────────────────────────────────────── */

.pmpro {
	font-family: var( --wp--preset--font-family--poppins, sans-serif );
	font-size: 1rem;
	line-height: 1.6;
}

.pmpro h1,
.pmpro h2,
.pmpro h3,
.pmpro h4,
.pmpro .pmpro_section_title,
.pmpro .pmpro_card_title {
	font-family: var( --wp--preset--font-family--bebas-neue, sans-serif );
	font-weight: 800;
	letter-spacing: .01em;
}

/* ── Buttons ─────────────────────────────────────────────────────── */

.pmpro .pmpro_btn,
.pmpro input[type="submit"],
.pmpro button[type="submit"] {
	font-family: var( --wp--preset--font-family--poppins, sans-serif );
	font-size: .9rem;
	font-weight: 600;
	border-radius: 8px;
	padding: .6rem 1.25rem;
	min-height: unset;
	letter-spacing: normal;
	box-shadow: none;
	transition: background-color .15s, border-color .15s, color .15s;
}

/* ── Cards ───────────────────────────────────────────────────────── */

.pmpro .pmpro_card {
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
}

.pmpro .pmpro_card_actions {
	background-color: #f8f9fb;
}

/* ── Form inputs ─────────────────────────────────────────────────── */

.pmpro input[type="text"],
.pmpro input[type="email"],
.pmpro input[type="password"],
.pmpro input[type="tel"],
.pmpro input[type="url"],
.pmpro input[type="number"],
.pmpro select,
.pmpro textarea {
	border: 1px solid #dde1ea;
	border-radius: 8px;
	padding: .55rem .85rem;
	font-family: var( --wp--preset--font-family--poppins, sans-serif );
	font-size: .9rem;
	background: #fff;
	color: #111118;
	transition: border-color .15s, box-shadow .15s;
	width: 100%;
	box-sizing: border-box;
}

.pmpro input[type="text"]:focus,
.pmpro input[type="email"]:focus,
.pmpro input[type="password"]:focus,
.pmpro input[type="tel"]:focus,
.pmpro select:focus,
.pmpro textarea:focus {
	border-color: #d70700;
	box-shadow: 0 0 0 3px rgba(215,7,0,.1);
	outline: none;
}

/* ── Tables (invoice/order) ──────────────────────────────────────── */

.pmpro .pmpro_table {
	border-collapse: collapse;
	width: 100%;
	font-size: .9rem;
}

.pmpro .pmpro_table th {
	font-weight: 600;
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #64648a;
	border-bottom: 2px solid #dde1ea;
	padding: .6rem .75rem;
	text-align: left;
}

.pmpro .pmpro_table td {
	padding: .75rem;
	border-bottom: 1px solid #f0f2f7;
	vertical-align: middle;
}

.pmpro .pmpro_table tr:last-child td {
	border-bottom: none;
}

.pmpro .pmpro_table tr:hover td {
	background: #f8f9fb;
}

/* ── Messages (success/error/info) ───────────────────────────────── */

.pmpro .pmpro_message {
	border-radius: 10px;
	font-size: .9rem;
	box-shadow: none;
	border-left-width: 3px;
	border-left-style: solid;
}

/* ── [fc_levels] pricing cards ───────────────────────────────────── */

.fc-levels {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) );
	gap: 1.5rem;
	align-items: start;
}

.fc-level-card {
	position: relative;
	background: #fff;
	border: 1px solid #dde1ea;
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
	padding: 2rem 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	transition: box-shadow .2s;
}

.fc-level-card:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,.08), 0 12px 32px rgba(0,0,0,.1);
}

.fc-level-card--featured {
	border-color: #d70700;
	border-width: 2px;
	box-shadow: 0 4px 12px rgba(215,7,0,.1), 0 12px 32px rgba(215,7,0,.08);
}

.fc-level-card__badge {
	position: absolute;
	top: -1px;
	left: 50%;
	transform: translateX(-50%);
	background: #d70700;
	color: #fff;
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	padding: .25rem .85rem;
	border-radius: 0 0 8px 8px;
	white-space: nowrap;
}

.fc-level-card__header {
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.fc-level-card__name {
	font-family: var( --wp--preset--font-family--bebas-neue, sans-serif );
	font-size: 1.3rem;
	font-weight: 800;
	margin: 0;
	color: #111118;
}

.fc-level-card__price {
	display: flex;
	align-items: baseline;
	gap: .35rem;
}

.fc-level-card__amount {
	font-family: var( --wp--preset--font-family--bebas-neue, sans-serif );
	font-size: 2.75rem;
	font-weight: 800;
	line-height: 1;
	color: #111118;
	letter-spacing: -.01em;
}

.fc-level-card__cycle {
	font-size: .85rem;
	color: #64648a;
}

/* Feature list — l'admin usa <ul> nel campo descrizione del livello */

.fc-level-card__features ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .6rem;
}

.fc-level-card__features li {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	font-size: .9rem;
	color: #374151;
	line-height: 1.45;
}

.fc-level-card__features li::before {
	content: '';
	display: block;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: .1rem;
	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23edfaf4'/%3E%3Cpath d='M4.5 8.5L7 11l4.5-5' stroke='%231a9e5c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.fc-level-card__cta {
	margin-top: auto;
}

.fc-level-card__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: .75rem 1.5rem;
	border-radius: 10px;
	font-size: .95rem;
	font-weight: 700;
	text-decoration: none;
	text-align: center;
	transition: background .15s, color .15s, border-color .15s;
	font-family: var( --wp--preset--font-family--poppins, sans-serif );
}

.fc-level-card__btn--primary {
	background: #d70700;
	color: #fff;
	border: 2px solid #d70700;
}

.fc-level-card__btn--primary:hover {
	background: #a50600;
	border-color: #a50600;
	color: #fff;
}

.fc-level-card__btn--secondary {
	background: #fff;
	color: #111118;
	border: 2px solid #dde1ea;
}

.fc-level-card__btn--secondary:hover {
	background: #f4f5f9;
	border-color: #c0c4d0;
	color: #111118;
}

.fc-level-card__active-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	width: 100%;
	padding: .65rem 1.5rem;
	border-radius: 10px;
	background: #edfaf4;
	color: #1a9e5c;
	font-size: .9rem;
	font-weight: 700;
	border: 2px solid #b7ead1;
}

.fc-level-card__active-badge svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

/* ── Checkout ────────────────────────────────────────────────────── */

/* Reset browser fieldset */
.pmpro .pmpro_form_fieldset {
	border: none;
	padding: 0;
	margin: 0;
	min-width: 0;
}

/*
 * Layout flex 50/50.
 * Nel DOM il #pmpro_pricing_fields viene PRIMA dei fieldset, ma con order CSS
 * i fieldset (order:1) appaiono a sinistra e il pricing (order:2) a destra.
 * Il submit (order:3) occupa l'intera riga.
 * align-items: stretch → le due colonne hanno sempre la stessa altezza.
 */
#pmpro_form {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: stretch;
}

/* Messaggi errore/avviso — piena larghezza, sempre prima */
#pmpro_form > #pmpro_message,
#pmpro_form > #pmpro_message_bottom {
	flex: 0 0 100%;
	order: -1;
}

/* Fieldset (account info, billing…) → colonna sinistra */
#pmpro_form > .pmpro_form_fieldset {
	flex: 0 0 calc( 50% - 0.75rem );
	order: 1;
}

/* Riepilogo ordine → colonna destra */
#pmpro_form > #pmpro_pricing_fields {
	flex: 0 0 calc( 50% - 0.75rem );
	order: 2;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #dde1ea;
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
	overflow: hidden;
	margin: 0; /* override PMPro .pmpro_card { margin: 1rem 0 } */
}

/* Submit → riga piena, bottone centrato */
#pmpro_form > .pmpro_form_submit {
	flex: 0 0 100%;
	order: 3;
	display: flex;
	justify-content: center;
}

/* Card dentro il fieldset — occupa tutta l'altezza del flex item */
#pmpro_form > .pmpro_form_fieldset > .pmpro_card {
	background: #fff;
	border: 1px solid #dde1ea;
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
	overflow: hidden;
	margin: 0;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

/* ── Titoli card ─────────────────────────────────────────────────── */

/*
 * Titolo pricing: <h2 class="pmpro_card_title"> figlio diretto del div.
 * Titolo fieldset: <h2 class="pmpro_form_heading"> dentro <legend>
 *   che è figlia diretta della card (nessun pmpro_card_content).
 */

/* Titolo riepilogo ordine */
#pmpro_pricing_fields > .pmpro_card_title {
	font-size: 1rem !important;
	font-family: var( --wp--preset--font-family--poppins, sans-serif );
	font-weight: 700;
	letter-spacing: normal;
	padding: 1.25rem 1.25rem .75rem;
	margin: 0;
	border-bottom: 1px solid #f0f2f7;
	color: #111118;
}

/* Legend come title bar nei fieldset (figlia diretta della card) */
#pmpro_form .pmpro_card > .pmpro_form_legend {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 1.25rem 1.25rem .75rem;
	border-bottom: 1px solid #f0f2f7;
}

/* Heading dentro la legend: solo font, nessun padding extra */
#pmpro_form .pmpro_form_heading {
	font-size: 1rem !important;
	font-family: var( --wp--preset--font-family--poppins, sans-serif );
	font-weight: 700;
	letter-spacing: normal;
	margin: 0;
	padding: 0;
	color: #111118;
}

/* ── Contenuto card ──────────────────────────────────────────────── */

/*
 * Account info fieldset: la card ha legend + pmpro_form_fields diretti (no pmpro_card_content).
 * Billing fieldset: la card ha pmpro_card_content che wrappa tutto.
 */

/* Campi direttamente nella card (account info) */
#pmpro_form .pmpro_card > .pmpro_form_fields {
	padding: 1.25rem;
	flex: 1;
}

/* Wrapper contenuto (billing address) */
#pmpro_form .pmpro_card_content {
	padding: 1.25rem;
	flex: 1;
}

/* Testi riepilogo ordine */
#pmpro_pricing_fields .pmpro_level_name_text {
	font-size: .88rem;
	color: #64648a;
	margin: 0 0 .75rem;
}

#pmpro_pricing_fields .pmpro_level_cost_text p,
#pmpro_pricing_fields .pmpro_level_expiration_text p {
	font-size: .9rem;
	font-weight: 600;
	color: #111118;
	margin: .25rem 0 0;
}

#pmpro_pricing_fields .pmpro_level_description_text {
	font-size: .85rem;
	color: #64648a;
	margin-bottom: .75rem;
}

/* ── Campi form ─────────────────────────────────────────────────── */

/* Label */
.pmpro .pmpro_form_label {
	display: block;
	font-size: .83rem;
	font-weight: 600;
	color: #374151;
}

/* Due colonne affiancate (nome/cognome, mese/anno CC) */
.pmpro .pmpro_cols-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1rem;
}

/* PMPro imposta width: calc(50%) sui figli di .pmpro_cols-2 — resettiamo */
.pmpro .pmpro_cols-2 > * {
	width: auto;
	min-width: 0;
}

/* Codice sconto — input + bottone affiancati */
.pmpro .pmpro_form_fields-inline {
	display: flex;
	gap: .5rem;
	align-items: flex-end;
}

.pmpro .pmpro_form_fields-inline input[type="text"] {
	flex: 1;
	min-width: 0;
}

/* ── Bottone submit ──────────────────────────────────────────────── */

#pmpro_btn-submit {
	width: 100%;
	max-width: 480px;
	padding: .9rem 2rem;
	font-size: 1rem;
	font-weight: 700;
	border-radius: 10px;
	cursor: pointer;
	background: #d70700;
	border: 2px solid #d70700;
	color: #fff;
}

#pmpro_btn-submit:hover,
#pmpro_btn-submit:focus {
	background: #a50600;
	border-color: #a50600;
	color: #fff;
}

#pmpro_processing_message {
	margin-top: .75rem;
	font-size: .88rem;
	color: #64648a;
	text-align: center;
}

/* ── Mobile ─────────────────────────────────────────────────────── */

@media ( max-width: 680px ) {
	#pmpro_form > #pmpro_pricing_fields,
	#pmpro_form > .pmpro_form_fieldset {
		flex: 0 0 100%;
	}

	.pmpro .pmpro_cols-2 {
		grid-template-columns: 1fr;
	}
}