/* CodyCloud Billing Connector — checkout PayPal.
   Riusa le custom property del tema (--cc-*, definite in wp-content/themes/codycloud/style.css)
   invece di ridefinire palette/superfici: coerenza visiva, un solo posto dove cambiarle. */

/* Griglia per un gruppo di pacchetti (es. i 5 piani hosting condiviso). Auto-fit invece
   di un numero fisso di colonne: i gruppi hanno taglie diverse (2-5 pacchetti) e non
   sempre riempiono una griglia a colonne fisse in modo pulito. */
.ccbc-catalog {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: var(--wp--preset--spacing--30, 1rem);
	align-items: stretch;
}

.ccbc-checkout {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	/* .cc-card (tema) parte da height:100% — dentro una griglia ad altezza auto con
	   contenuto DOPO la griglia (es. sezione Vantaggi sotto il catalogo pacchetti) quel
	   100% collassa e la card va in overflow sul testo sotto. Stesso bug gia' preso 2
	   volte nel tema (termini/modulistica, poi NIS2) — vedi README del tema. Fix identico:
	   height:auto sui figli-card, altezza uniforme delegata a align-items:stretch sulla
	   griglia (gia' impostato in .ccbc-catalog). */
	height: auto;
}

.ccbc-eyebrow {
	color: var(--cc-brand, #2388c8);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin: 0;
}

.ccbc-price {
	margin: 0;
	font-size: 1.1rem;
}

.ccbc-price span {
	color: var(--cc-muted, #9aa3ad);
	font-size: 0.85rem;
}

.ccbc-desc {
	color: var(--cc-muted, #9aa3ad);
	font-size: 0.9rem;
	margin: 0;
}

.ccbc-unavailable {
	color: var(--cc-muted, #9aa3ad);
	font-size: 0.9rem;
}

.ccbc-billing-form {
	display: grid;
	gap: 0.6rem;
	margin-top: 0.5rem;
}

.ccbc-billing-form label {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: 0.85rem;
	color: var(--cc-text, #f4f7fb);
}

.ccbc-billing-form input[type="text"],
.ccbc-billing-form input[type="email"] {
	background-color: rgba(255, 255, 255, 0.06); /* MAI la shorthand "background": rompe select/altri campi nel form Mautic condiviso */
	border: 1px solid var(--cc-glass-border, rgba(255, 255, 255, 0.1));
	border-radius: 8px;
	color: var(--cc-text, #f4f7fb);
	padding: 0.55rem 0.7rem;
	font-size: 0.95rem;
}

.ccbc-billing-form label .ccbc-hint {
	font-weight: 400;
	font-size: 0.75rem;
	color: var(--cc-muted, #9aa3ad);
}

.ccbc-billing-form label.ccbc-consent {
	flex-direction: row;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.8rem;
	color: var(--cc-muted, #9aa3ad);
}

.ccbc-billing-form label.ccbc-consent input {
	margin-top: 0.2rem;
}

.ccbc-status {
	min-height: 1.2em;
	font-size: 0.85rem;
	margin: 0;
}

.ccbc-status--error {
	color: #ff8a8a;
}

.ccbc-paypal-buttons {
	min-height: 45px;
}

.ccbc-success {
	color: var(--cc-text, #f4f7fb);
	font-size: 0.95rem;
}