/**
 * Area professionisti — front-end.
 *
 * Palette e impianto tipografico sono quelli delle specifiche grafiche
 * Vagabond, gli stessi valori che il generatore di schede PDF usa in
 * `Settings\Defaults`: rosso del logo sugli accenti, testo quasi nero caldo,
 * fondi crema, secondari nei toni della terra.
 *
 * I colori sono dichiarati, non ereditati dal tema: l'area deve restare
 * riconoscibile anche dove il tema porta una palette sua. Se un domani
 * servisse il contrario, basta ridefinire le variabili su `.vgb-ra`.
 */

.vgb-ra {
	/* Specifiche grafiche Vagabond. */
	--vgb-ra-ink: #191714;
	--vgb-ra-primary: #ae5048;
	--vgb-ra-secondary: #9a8777;
	--vgb-ra-deep: #75675b;
	--vgb-ra-line: #b9aea2;
	--vgb-ra-surface: #f7f4ee;
	--vgb-ra-surface-alt: #ede7dd;
	--vgb-ra-beige: #f2ebdb;

	/* Derivati: il testo corrente è l'inchiostro schiarito, non un grigio
	   qualunque, così resta nella stessa famiglia calda. */
	--vgb-ra-text: #4a443f;
	--vgb-ra-line-soft: #e4ded5;

	/* Titoli in serif e etichette in maiuscoletto spaziato: è l'impianto
	   delle schede prodotto stampate. Epilogue è il sans che il sito serve
	   già; le famiglie delle specifiche restano prime nella catena. */
	--vgb-ra-title-font: "Nimbus Roman", "Times New Roman", Times, serif;
	--vgb-ra-text-font: "Epilogue", "Nimbus Sans", Helvetica, Arial, sans-serif;

	--vgb-ra-radius: 0px;

	font-family: var(--vgb-ra-text-font);
	color: var(--vgb-ra-text);
}

.vgb-ra * {
	box-sizing: border-box;
}

/* Titoli in serif, come nelle schede prodotto stampate. */
.vgb-ra__title {
	margin: 0 0 10px;
	font-family: var(--vgb-ra-title-font);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--vgb-ra-ink);
}

/* Etichette e soprattitoli: sans in maiuscoletto spaziato, nel secondario.
   È il segno che accompagna ogni voce nelle schede Vagabond. */
.vgb-ra__eyebrow,
.vgb-ra-docs__group-title,
.vgb-ra-table th,
.vgb-ra-summary__label,
.vgb-ra-badge {
	font-family: var(--vgb-ra-text-font);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

/* I collegamenti dentro l'area non ereditano il colore del tema. I pulsanti
   sono esclusi: hanno il fondo pieno e il testo bianco. */
.vgb-ra a:not(.vgb-ra-btn) {
	color: var(--vgb-ra-primary);
}

.vgb-ra a:not(.vgb-ra-btn):hover,
.vgb-ra a:not(.vgb-ra-btn):focus {
	color: var(--vgb-ra-deep);
}

.vgb-ra__lead {
	margin: 0 0 24px;
	font-size: 14px;
	line-height: 1.7;
}

.vgb-ra__section {
	margin: 0 0 40px;
}

/* --- Avvisi ------------------------------------------------------------ */

.vgb-ra-notice {
	margin: 0 0 20px;
	padding: 14px 18px;
	border-left: 3px solid var(--vgb-ra-primary);
	background: var(--vgb-ra-surface);
	font-size: 14px;
	line-height: 1.6;
}

.vgb-ra-notice--error {
	border-left-color: var(--vgb-ra-primary);
}

.vgb-ra-notice ul {
	margin: 8px 0 0;
	padding-left: 18px;
}

/* --- Badge di stato ---------------------------------------------------- */

.vgb-ra-badge {
	display: inline-block;
	padding: 4px 10px;
	border: 1px solid var(--vgb-ra-line);
	border-radius: var(--vgb-ra-radius);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	line-height: 1.6;
}

.vgb-ra-badge--ok {
	border-color: #5f6f4a;
	color: #5f6f4a;
}

.vgb-ra-badge--ko {
	border-color: var(--vgb-ra-primary);
	color: var(--vgb-ra-primary);
}

.vgb-ra-badge--warn {
	border-color: #9a7233;
	color: #9a7233;
}

.vgb-ra-badge--info {
	border-color: var(--vgb-ra-deep);
	color: var(--vgb-ra-deep);
}

.vgb-ra-badge--pending,
.vgb-ra-badge--muted {
	border-color: var(--vgb-ra-line);
	color: var(--vgb-ra-secondary);
}

/* --- Documenti tecnici ------------------------------------------------- */

.vgb-ra-docs {
	border-top: 1px solid var(--vgb-ra-line);
	padding-top: 32px;
	margin-top: 32px;
}

.vgb-ra-docs__group {
	margin: 0 0 28px;
}

.vgb-ra-docs__group-title {
	margin: 0 0 12px;
	font-size: 11px;
	font-weight: 700;
	color: var(--vgb-ra-secondary);
}

.vgb-ra-docs__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--vgb-ra-line);
}

.vgb-ra-doc {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--vgb-ra-line);
}

.vgb-ra-doc__ext {
	flex: 0 0 auto;
	min-width: 56px;
	padding: 6px 8px;
	border: 1px solid var(--vgb-ra-line);
	border-radius: var(--vgb-ra-radius);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-align: center;
	color: var(--vgb-ra-primary);
}

.vgb-ra-doc__body {
	flex: 1 1 auto;
	min-width: 0;
}

.vgb-ra-doc__name {
	display: block;
	font-family: var(--vgb-ra-title-font);
	font-size: 16px;
	font-weight: 400;
	color: var(--vgb-ra-ink);
}

.vgb-ra-doc__meta {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--vgb-ra-text);
}

.vgb-ra-doc__action {
	flex: 0 0 auto;
}

/* --- Pulsanti ---------------------------------------------------------- */

.vgb-ra-btn {
	display: inline-block;
	padding: 12px 24px;
	border: 1px solid var(--vgb-ra-primary);
	border-radius: var(--vgb-ra-radius);
	background: var(--vgb-ra-primary);
	color: #fff;
	font-family: var(--vgb-ra-text-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

/* I temi sottolineano i link con selettori più specifici del nostro: su un
   pulsante con il fondo pieno la sottolineatura è un errore, ed è l'unico
   punto in cui vale la pena imporsi sul tema. */
.vgb-ra .vgb-ra-btn,
.vgb-ra .vgb-ra-btn:hover,
.vgb-ra .vgb-ra-btn:focus {
	text-decoration: none !important;
}

.vgb-ra-btn:hover,
.vgb-ra-btn:focus {
	opacity: 0.85;
	color: #fff;
}

.vgb-ra-btn--ghost {
	background: transparent;
	color: var(--vgb-ra-primary);
}

.vgb-ra-btn--ghost:hover,
.vgb-ra-btn--ghost:focus {
	background: var(--vgb-ra-surface);
}

.vgb-ra-btn--ghost:hover,
.vgb-ra-btn--ghost:focus {
	color: var(--vgb-ra-primary);
}

.vgb-ra-btn--small {
	padding: 8px 16px;
	font-size: 11px;
}

/* --- Moduli ------------------------------------------------------------ */

.vgb-ra-form {
	border-top: 1px solid var(--vgb-ra-line);
	padding-top: 32px;
	margin-top: 32px;
}

.vgb-ra-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
	margin: 0 0 20px;
}

/* Filtro per categoria della documentazione: select e bottone sulla stessa riga. */
.vgb-ra-filter {
	max-width: 480px;
	margin: 0 0 20px;
}

.vgb-ra-filter__row {
	display: flex;
	align-items: stretch;
	gap: 12px;
}

.vgb-ra-filter__row select {
	flex: 1 1 auto;
	min-width: 0;
}

.vgb-ra-filter__row .vgb-ra-btn {
	flex: 0 0 auto;
}

.vgb-ra-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.vgb-ra-field--wide {
	grid-column: 1 / -1;
}

.vgb-ra-field label {
	font-family: var(--vgb-ra-title-font);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--vgb-ra-ink);
}

.vgb-ra-field input[type="text"],
.vgb-ra-field input[type="number"],
.vgb-ra-field input[type="date"],
.vgb-ra-field input[type="file"],
.vgb-ra-field select,
.vgb-ra-field textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--vgb-ra-line);
	border-radius: var(--vgb-ra-radius);
	background: #fff;
	font-family: var(--vgb-ra-text-font);
	font-size: 14px;
	color: var(--vgb-ra-ink);
}

.vgb-ra-field input:focus,
.vgb-ra-field select:focus,
.vgb-ra-field textarea:focus {
	border-color: var(--vgb-ra-primary);
	outline: none;
}

.vgb-ra-field__hint {
	font-size: 12px;
	color: var(--vgb-ra-text);
}

.vgb-ra-field__required {
	color: var(--vgb-ra-primary);
}

.vgb-ra-dimensions {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

/* --- Elenco richieste -------------------------------------------------- */

.vgb-ra-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.vgb-ra-table th {
	padding: 10px 12px 10px 0;
	border-bottom: 1px solid var(--vgb-ra-line);
	font-size: 11px;
	font-weight: 700;
	text-align: left;
	color: var(--vgb-ra-secondary);
}

.vgb-ra-table td {
	padding: 14px 12px 14px 0;
	border-bottom: 1px solid var(--vgb-ra-line);
	vertical-align: top;
}

.vgb-ra-table tr:last-child td {
	border-bottom: none;
}

.vgb-ra-table a {
	color: var(--vgb-ra-primary);
	text-decoration: underline;
}

/* --- Avanzamento ------------------------------------------------------- */

.vgb-ra-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
	counter-reset: vgb-ra-step;
}

.vgb-ra-steps__item {
	flex: 1 1 120px;
	padding: 12px 14px;
	border-top: 3px solid var(--vgb-ra-line);
	font-size: 12px;
	line-height: 1.5;
	color: var(--vgb-ra-text);
}

.vgb-ra-steps__item--done {
	border-top-color: var(--vgb-ra-secondary);
	color: var(--vgb-ra-ink);
}

.vgb-ra-steps__item--current {
	border-top-color: var(--vgb-ra-primary);
	color: var(--vgb-ra-ink);
	font-weight: 600;
}

/* --- Cronologia -------------------------------------------------------- */

.vgb-ra-timeline {
	margin: 0;
	padding: 0 0 0 22px;
	list-style: none;
	border-left: 1px solid var(--vgb-ra-line);
}

.vgb-ra-timeline__item {
	position: relative;
	padding: 0 0 24px;
}

.vgb-ra-timeline__item::before {
	content: "";
	position: absolute;
	left: -27px;
	top: 6px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--vgb-ra-primary);
}

.vgb-ra-timeline__item--private::before {
	background: var(--vgb-ra-line);
}

.vgb-ra-timeline__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 4px;
	font-size: 12px;
	color: var(--vgb-ra-text);
}

.vgb-ra-timeline__author {
	font-family: var(--vgb-ra-title-font);
	font-weight: 600;
	color: var(--vgb-ra-ink);
}

.vgb-ra-timeline__message {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
}

/* --- Riepiloghi -------------------------------------------------------- */

.vgb-ra-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	margin: 0 0 32px;
}

.vgb-ra-summary__cell {
	padding: 18px 20px;
	border: 1px solid var(--vgb-ra-line-soft);
	background: var(--vgb-ra-surface);
}

.vgb-ra-summary__value {
	display: block;
	font-family: var(--vgb-ra-title-font);
	font-size: 30px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--vgb-ra-deep);
}

.vgb-ra-summary__label {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	color: var(--vgb-ra-secondary);
}

.vgb-ra-code-box__code {
	display: inline-block;
	margin: 0 0 12px;
	padding: 10px 18px;
	border: 1px solid var(--vgb-ra-primary);
	font-family: var(--vgb-ra-text-font);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--vgb-ra-ink);
}

.vgb-ra-details {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 28px;
	font-size: 14px;
}

/* Etichetta a sinistra in maiuscoletto spaziato, valore a destra: è
   l'impaginazione delle specifiche tecniche nelle schede Vagabond. */
.vgb-ra-details th {
	width: 38%;
	padding: 12px 16px 12px 0;
	border-bottom: 1px solid var(--vgb-ra-line-soft);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: left;
	vertical-align: top;
	color: var(--vgb-ra-secondary);
}

.vgb-ra-details td {
	padding: 12px 0;
	border-bottom: 1px solid var(--vgb-ra-line-soft);
	vertical-align: top;
	color: var(--vgb-ra-ink);
}

.vgb-ra-empty {
	padding: 32px;
	border: 1px dashed var(--vgb-ra-line);
	text-align: center;
	font-size: 14px;
	color: var(--vgb-ra-text);
}

/* --- Ingresso dentro "Il mio account" ---------------------------------- */

/* Sta in mezzo a contenuti che non sono nostri — i moduli di WooCommerce o il
   cruscotto del tema — quindi si stacca da sopra con un filo di linea invece
   di presumere il margine del vicino.

   Centrato e stretto: sotto il modulo di accesso la pagina è larga quanto il
   contenitore del tema, e un paragrafo lungo tutta quella larghezza non si
   legge. Qui è un invito, non una tabella: sta meglio raccolto in mezzo. */
.vgb-ra-entry {
	max-width: 640px;
	margin: 48px auto 0;
	padding: 32px 0 0;
	border-top: 1px solid var(--vgb-ra-line-soft);
	text-align: center;
}

.vgb-ra-entry .vgb-ra__lead {
	margin-bottom: 16px;
}

.vgb-ra-entry .vgb-ra__lead:last-of-type {
	margin-bottom: 24px;
}

.vgb-ra-entry__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
}

/* --- Modulo di iscrizione (User Registration) --------------------------- */

/* UR disegna il modulo con una palette sua: il pulsante esce viola (#475bb2),
   e così i bordi del campo attivo e i link. Non combattiamo i suoi selettori:
   UR li scrive tutti come var(--ur-…, #475bb2), quindi basta ridefinire le
   variabili qui e tutto il modulo passa ai colori Vagabond. */
.vgb-ra-registration {
	--ur-primary-color: var(--vgb-ra-primary);
	--ur-primary-light: var(--vgb-ra-surface);
	--ur-button-background-normal-color: var(--vgb-ra-primary);
	--ur-button-background-hover-color: var(--vgb-ra-deep);
	--ur-button-text-normal-color: #fff;
	--ur-button-text-hover-color: #fff;
}

/* Quel che resta scritto a mano nel CSS di UR: lo stato di passaggio del
   pulsante e gli angoli arrotondati, che nell'impianto Vagabond sono vivi. */
.vgb-ra-registration .ur-submit-button,
.vgb-ra-registration .user-registration-Button {
	border-radius: var(--vgb-ra-radius);
	font-family: var(--vgb-ra-text-font);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.vgb-ra-registration .ur-submit-button:hover,
.vgb-ra-registration .ur-submit-button:focus,
.vgb-ra-registration .user-registration-Button:hover,
.vgb-ra-registration .user-registration-Button:focus {
	background: var(--vgb-ra-deep);
	border-color: var(--vgb-ra-deep);
	color: #fff;
}

/* I bordi dei campi restano il grigio neutro di UR (#e1e1e1): il suo stile
   "flat" li fissa con una catena di sette classi e un !important sul raggio,
   e per vincerla servirebbe un selettore ancora più lungo, legato a classi
   interne che il prossimo aggiornamento può cambiare senza preavviso. Un
   grigio chiaro su fondo bianco non stona, gli angoli sono già vivi come
   vuole l'impianto Vagabond, e il marchio sulla pagina lo portano il
   pulsante e i caratteri. */

/* Il modulo sta in una pagina tutta sua: raccolto, non largo quanto lo
   schermo, come le altre schermate dell'area. */
.vgb-ra-registration .ur-frontend-form {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	border-radius: var(--vgb-ra-radius);
}

/* --- Modulo di iscrizione a step (popup) -------------------------------- */

/* `[vagabond_area_registration steps="yes"]` va dentro un popup del tema,
   accanto a "Contact our Team" della pagina For Professionals: ha la veste
   dei moduli Woodmart (Contact Form 7), non la palette dell'area. I valori
   vengono dalle variabili del tema (`--wd-form-*`, `--btn-*`), con i valori
   del sito come riserva: se un domani cambiano nelle opzioni di Woodmart, il
   modulo li segue. Il padding lo dà il popup (impostazione del widget).

   Il modulo è di User Registration, che lo veste con regole lunghe (e una
   larghezza scritta nell'HTML): per questo i selettori qui sono più lunghi
   del solito e qualche valore è !important. */

.vgb-ra-steps {
	--vgb-ra-steps-title: var(--wd-title-color, #242424);
	--vgb-ra-steps-field-border: var(--wd-form-brd-color, rgba(129, 129, 129, 0.2));
	--vgb-ra-steps-field-border-focus: var(--wd-form-brd-color-focus, rgba(129, 129, 129, 0.3));
	--vgb-ra-steps-field-width: var(--wd-form-brd-width, 2px);
	--vgb-ra-steps-field-radius: var(--wd-form-brd-radius, 0);
	--vgb-ra-steps-field-height: var(--wd-form-height, 42px);

	/* La stessa classe fa da barra di avanzamento dei preventivi (flex in
	   riga): qui torna un blocco. */
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: inherit;
	color: var(--wd-text-color, #767676);
}

.vgb-ra-steps [hidden] {
	display: none !important;
}

.vgb-ra-steps .user-registration.ur-frontend-form {
	box-sizing: border-box;
	width: 100% !important;
	max-width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

/* Schermata iniziale: la domanda, come il titolo di "Contact our Team", e
   "Registrati Qui"; il modulo resta nascosto finché non si preme il
   pulsante. */
.vgb-ra-steps.is-intro > :not(.vgb-ra-steps__intro) {
	display: none !important;
}

.vgb-ra-steps__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 25px;
	padding: 10px 0;
	text-align: center;
}

.vgb-ra-steps__intro-text {
	margin: 0;
	font-family: var(--wd-title-font, inherit);
	font-size: 22px;
	font-weight: var(--wd-title-font-weight, 500);
	line-height: 1.4;
	color: var(--vgb-ra-steps-title);
}

/* Sul sito il popup non ha titolo né introduzione di UR: si parte dai campi. */
.vgb-ra-steps .ur-frontend-form .user-registration-registration-title,
.vgb-ra-steps .ur-frontend-form .user-registration-registration-description,
.vgb-ra-steps .ur-frontend-form > br {
	display: none !important;
}

.vgb-ra-steps .ur-frontend-form form.register {
	margin: 0;
}

/* Un campo per riga, a tutta larghezza, 20px tra uno e l'altro. */
.vgb-ra-steps .ur-frontend-form .ur-form-row {
	display: block;
	margin: 0;
}

.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid {
	float: none;
	width: 100% !important;
	margin: 0;
	padding: 0;
}

.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item {
	margin: 0 0 20px !important;
}

.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item .form-row {
	margin: 0;
	padding: 0;
}

/* Etichette sopra il campo, come quelle del tema. */
.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item label.ur-label {
	display: block;
	margin: 0 0 5px !important;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: 400;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	color: var(--vgb-ra-steps-title);
}

.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item label.ur-label .required {
	margin-left: 4px;
	color: #e01020;
	text-decoration: none;
	border: 0;
}

/* Campi del tema: bordo chiaro da 2px, alti 42px, angoli vivi. */
.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item input.input-text,
.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item select,
.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--vgb-ra-steps-field-height);
	margin: 0;
	padding: 0 15px;
	border: var(--vgb-ra-steps-field-width) solid var(--vgb-ra-steps-field-border) !important;
	border-radius: var(--vgb-ra-steps-field-radius) !important;
	background-color: var(--wd-form-bg, transparent);
	box-shadow: none;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	color: var(--wd-form-color, inherit);
	transition: border-color 0.5s ease;
}

.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item input.input-text {
	height: var(--vgb-ra-steps-field-height);
}

/* La freccia: UR ne disegna una sua con un `background` scritto con regole
   più lunghe delle nostre (moduli "flat"), quindi qui serve !important. */
.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item select {
	max-height: none;
	padding-right: 30px;
	background-image: var(--wd-form-chevron, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")) !important;
	background-repeat: no-repeat !important;
	background-position: right 10px top 50% !important;
	background-size: auto 18px !important;
	-webkit-appearance: none;
	appearance: none;
}

.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item textarea {
	min-height: 120px;
	padding: 10px 15px;
}

.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item input.input-text:focus,
.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item select:focus,
.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item textarea:focus {
	border-color: var(--vgb-ra-steps-field-border-focus) !important;
	outline: 0;
	box-shadow: none;
}

/* Caselle: in colonna, testo come le etichette. */
.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item.field-checkbox ul {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item.field-checkbox ul li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 4px;
	padding: 0;
}

.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item.field-checkbox ul li label {
	margin: 0 !important;
	padding: 0 !important;
	font-size: inherit;
	font-weight: 400;
	line-height: inherit;
	color: var(--vgb-ra-steps-title);
}

.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item.field-checkbox ul li input[type="checkbox"] {
	flex: 0 0 auto;
	margin: 0 !important;
	position: static !important;
}

/* Aiuti e contatori sotto il campo: discreti. */
.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item .description {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--wd-text-color, #767676);
}

.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item .user-registration-error {
	font-size: 12px;
}

/* --- Pulsanti: come "Send" del tema. "Next", invio e "Registrati Qui"
   nel colore accentato, "Previous" in quello di base. ------------------ */

.vgb-ra-steps .vgb-ra-steps__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 5px 0 0;
}

.vgb-ra-steps .vgb-ra-steps__buttons .ur-button-container {
	display: flex;
	margin: 0 !important;
	padding: 0 !important;
}

.vgb-ra-steps .vgb-ra-steps__intro .vgb-ra-steps__button,
.vgb-ra-steps .vgb-ra-steps__buttons .vgb-ra-steps__button,
.vgb-ra-steps .ur-frontend-form .vgb-ra-steps__buttons .ur-submit-button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 0;
	min-height: 42px;
	margin: 0;
	padding: 5px 30px;
	border: 0;
	border-radius: var(--btn-accented-brd-radius, 0);
	background-color: var(--btn-accented-bgcolor, rgba(191, 63, 59, 0.84));
	box-shadow: var(--btn-accented-box-shadow, inset 0 -2px 0 rgba(0, 0, 0, 0.15));
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--btn-accented-color, #fff);
	cursor: pointer;
	transition: color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.vgb-ra-steps .vgb-ra-steps__intro .vgb-ra-steps__button:hover,
.vgb-ra-steps .vgb-ra-steps__intro .vgb-ra-steps__button:focus,
.vgb-ra-steps .vgb-ra-steps__buttons .vgb-ra-steps__button:hover,
.vgb-ra-steps .vgb-ra-steps__buttons .vgb-ra-steps__button:focus,
.vgb-ra-steps .ur-frontend-form .vgb-ra-steps__buttons .ur-submit-button:hover,
.vgb-ra-steps .ur-frontend-form .vgb-ra-steps__buttons .ur-submit-button:focus {
	background-color: var(--btn-accented-bgcolor-hover, rgb(191, 63, 59));
	box-shadow: var(--btn-accented-box-shadow-hover, inset 0 -2px 0 rgba(0, 0, 0, 0.15));
	color: var(--btn-accented-color-hover, #fff);
}

.vgb-ra-steps .vgb-ra-steps__buttons .vgb-ra-steps__button.e-form__buttons__wrapper__button-previous {
	border-radius: var(--btn-default-brd-radius, 0);
	background-color: var(--btn-default-bgcolor, #f7f7f7);
	box-shadow: var(--btn-default-box-shadow, none);
	color: var(--btn-default-color, #333);
}

.vgb-ra-steps .vgb-ra-steps__buttons .vgb-ra-steps__button.e-form__buttons__wrapper__button-previous:hover,
.vgb-ra-steps .vgb-ra-steps__buttons .vgb-ra-steps__button.e-form__buttons__wrapper__button-previous:focus {
	background-color: var(--btn-default-bgcolor-hover, #efefef);
	box-shadow: var(--btn-default-box-shadow-hover, none);
	color: var(--btn-default-color-hover, #333);
}

/* Il pulsante di invio è quello di UR, che lo veste con regole legate a un
   ID e con !important: qui i valori che contano vanno imposti. */
.vgb-ra-steps .ur-frontend-form .vgb-ra-steps__buttons .ur-submit-button {
	width: auto !important;
	min-height: 42px !important;
	margin: 0 !important;
	padding: 5px 30px !important;
	border: 0 !important;
	border-radius: var(--btn-accented-brd-radius, 0) !important;
	background: var(--btn-accented-bgcolor, rgba(191, 63, 59, 0.84)) !important;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: var(--btn-accented-color, #fff) !important;
}

.vgb-ra-steps .ur-frontend-form .vgb-ra-steps__buttons .ur-submit-button:hover,
.vgb-ra-steps .ur-frontend-form .vgb-ra-steps__buttons .ur-submit-button:focus {
	background: var(--btn-accented-bgcolor-hover, rgb(191, 63, 59)) !important;
}

/* L'icona di caricamento che UR mette nel pulsante resta a lato del testo. */
.vgb-ra-steps .ur-frontend-form .vgb-ra-steps__buttons .ur-submit-button > span:empty {
	display: none;
}

/* --- Accesso da shortcode ---------------------------------------------- */

.vgb-ra-login {
	max-width: 520px;
}

.vgb-ra-login__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 8px;
}

/* Il modulo di accesso è quello di WooCommerce, che ogni tema veste a modo
   suo: dentro il nostro blocco lo riportiamo alla palette Vagabond, così
   l'area si riconosce comunque. */
.vgb-ra-login__form .woocommerce-form-login {
	margin: 0;
	padding: 0;
	border: none;
}

.vgb-ra-login__form label {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--vgb-ra-ink);
}

.vgb-ra-login__form input[type="text"],
.vgb-ra-login__form input[type="email"],
.vgb-ra-login__form input[type="password"] {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--vgb-ra-line);
	border-radius: var(--vgb-ra-radius);
	background: #fff;
	font-family: var(--vgb-ra-text-font);
	font-size: 14px;
	color: var(--vgb-ra-ink);
	box-shadow: none;
}

.vgb-ra-login__form input:focus {
	border-color: var(--vgb-ra-primary);
	outline: none;
}

.vgb-ra-login__form button[type="submit"],
.vgb-ra-login__form input[type="submit"] {
	padding: 12px 24px;
	border: 1px solid var(--vgb-ra-primary);
	border-radius: var(--vgb-ra-radius);
	background: var(--vgb-ra-primary);
	color: #fff;
	font-family: var(--vgb-ra-text-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}

.vgb-ra-login__form button[type="submit"]:hover,
.vgb-ra-login__form input[type="submit"]:hover {
	background: var(--vgb-ra-deep);
	border-color: var(--vgb-ra-deep);
}

.vgb-ra-login__form .woocommerce-form-login__rememberme {
	display: block;
	margin: 12px 0;
	font-size: 13px;
	font-weight: 400;
	color: var(--vgb-ra-text);
}

.vgb-ra-login__form .lost_password {
	margin: 12px 0 0;
	font-size: 13px;
}

.vgb-ra-login__register {
	margin: 16px 0 0;
	font-size: 14px;
}

.vgb-ra-login__register a {
	color: var(--vgb-ra-primary);
	text-decoration: underline;
}

@media (max-width: 768px) {
	.vgb-ra-dimensions {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vgb-ra-doc {
		flex-wrap: wrap;
	}

	.vgb-ra-table thead {
		display: none;
	}

	.vgb-ra-table tr {
		display: block;
		padding: 12px 0;
		border-bottom: 1px solid var(--vgb-ra-line);
	}

	.vgb-ra-table td {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		padding: 6px 0;
		border: none;
		text-align: right;
	}

	.vgb-ra-table td::before {
		content: attr(data-label);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		text-align: left;
		color: var(--vgb-ra-ink);
	}
}

/* --- "Il mio account" attorno alla nostra area -------------------------- */

/*
 * L'area professionisti vive dentro "Il mio account" di WooCommerce, e lì il
 * menu e i collegamenti non sono nostri: li veste il tema. Quando però il
 * tema non ha un'opinione, WooCommerce ripiega sul proprio viola (#7f54b3),
 * che accanto alla palette Vagabond stona.
 *
 * Qui chiediamo prima il colore del tema — su Woodmart la variabile c'è e
 * vince, quindi non cambiamo nulla di quello che il tema ha deciso — e solo
 * in sua assenza mettiamo il rosso del marchio.
 */

.woocommerce-account .woocommerce-MyAccount-navigation a,
.woocommerce-account .woocommerce-MyAccount-content a:not(.vgb-ra-btn):not(.button) {
	color: var(--wd-link-color, #ae5048);
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation a:focus,
.woocommerce-account .woocommerce-MyAccount-content a:not(.vgb-ra-btn):not(.button):hover,
.woocommerce-account .woocommerce-MyAccount-content a:not(.vgb-ra-btn):not(.button):focus {
	color: var(--wd-link-color-hover, #75675b);
}

/* La voce attiva del menu: il marchio la segna, se il tema non lo fa. */
.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a {
	color: var(--wd-link-color, #191714);
	font-weight: 600;
}

/*
 * Gli avvisi di WooCommerce arrivano con i propri colori — informativo
 * #3d9cd2, positivo #0f834d, errore #e2401c — riquadri pieni con testo
 * bianco. Dentro l'area li riportiamo alla forma dei nostri: fondo crema,
 * filetto a sinistra nel colore che dice di che avviso si tratta, testo
 * nell'inchiostro. Restano distinguibili a colpo d'occhio senza uscire
 * dalla palette.
 */

.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-noreviews {
	background-color: #f7f4ee;
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: 3px solid #9a8777;
	border-radius: 0;
	color: #191714;
}

.woocommerce-account .woocommerce-message {
	border-left-color: #5f6f4a;
}

.woocommerce-account .woocommerce-error {
	border-left-color: #ae5048;
}

/* Testo e collegamenti dentro l'avviso: WooCommerce li vuole bianchi, qui
   il fondo è chiaro. */
.woocommerce-account .woocommerce-info a,
.woocommerce-account .woocommerce-message a,
.woocommerce-account .woocommerce-error a,
.woocommerce-account .woocommerce-noreviews a {
	color: #ae5048;
}

.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-error::before,
.woocommerce-account .woocommerce-noreviews::before {
	color: #9a8777;
}

.woocommerce-account .woocommerce-message::before {
	color: #5f6f4a;
}

.woocommerce-account .woocommerce-error::before {
	color: #ae5048;
}

/* I pulsanti di WooCommerce dentro l'area: stesso segno dei nostri. */
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content button.button,
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"] {
	background-color: #ae5048;
	border: 1px solid #ae5048;
	border-radius: 0;
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-MyAccount-content button.button:hover,
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"]:hover {
	background-color: #75675b;
	border-color: #75675b;
	color: #fff;
}

/* Il tema zebra le tabelle con selettori più specifici del nostro: le
   nostre hanno già i loro filetti, e lo sfondo a righe le sporca. */
.vgb-ra table.vgb-ra-table th,
.vgb-ra table.vgb-ra-table td,
.vgb-ra table.vgb-ra-table tbody tr,
.vgb-ra table.vgb-ra-table tbody tr td,
.vgb-ra table.vgb-ra-table tbody tr:nth-child(2n) td,
.vgb-ra table.vgb-ra-details th,
.vgb-ra table.vgb-ra-details td,
.vgb-ra table.vgb-ra-details tbody tr,
.vgb-ra table.vgb-ra-details tbody tr td,
.vgb-ra table.vgb-ra-details tbody tr:nth-child(2n) td,
.vgb-ra .vgb-ra-docs__list li {
	background: transparent;
}

/* Testo dell'area account nella stessa famiglia calda del resto: prima il
   colore del tema, se ne ha uno. */
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-content p,
.woocommerce-account .woocommerce-MyAccount-content label,
.woocommerce-account .woocommerce-MyAccount-content td,
.woocommerce-account .woocommerce-MyAccount-content th {
	color: var(--wd-text-color, #4a443f);
}

.woocommerce-account .woocommerce-MyAccount-content h1,
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3,
.woocommerce-account .woocommerce-MyAccount-content strong {
	color: var(--wd-title-color, #191714);
}

/* I campi del modulo account: stessa veste dei nostri, così il passaggio fra
   "Dettagli account" e l'area professionisti non si sente. */
.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content input.input-text,
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content textarea {
	background-color: #fff;
	border: 1px solid #b9aea2;
	border-radius: 0;
	color: #191714;
	box-shadow: none;
}

.woocommerce-account .woocommerce-MyAccount-content input:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus,
.woocommerce-account .woocommerce-MyAccount-content textarea:focus {
	border-color: #ae5048;
	outline: none;
}

/* L'asterisco dei campi obbligatori e i riquadri dei gruppi. */
.woocommerce-account .woocommerce-MyAccount-content .required,
.woocommerce-account .woocommerce-MyAccount-content abbr.required {
	border: none;
	color: #ae5048;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-content fieldset,
.woocommerce-account .woocommerce-MyAccount-content legend {
	background-color: transparent;
	border-color: #e4ded5;
	color: #191714;
}

/* Il pulsante "mostra password" di WooCommerce. */
.woocommerce-account .woocommerce-MyAccount-content .show-password-input,
.woocommerce-account .woocommerce-MyAccount-content .show-password-input::after {
	background-color: transparent;
	border-color: #b9aea2;
	color: #9a8777;
}

.woocommerce-account .woocommerce-MyAccount-content .show-password-input.display-password,
.woocommerce-account .woocommerce-MyAccount-content .show-password-input.display-password::after {
	color: #ae5048;
}

/* WooCommerce colora i campi con `.woocommerce form .form-row input.input-text`,
   che per un soffio batte il nostro selettore: qui pareggiamo la specificità
   invece di ricorrere a !important. */
.woocommerce-account .woocommerce .woocommerce-MyAccount-content input.input-text,
.woocommerce-account .woocommerce .woocommerce-MyAccount-content textarea.input-text,
.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-Input {
	background-color: #fff;
	border: 1px solid #b9aea2;
	border-radius: 0;
	color: #191714;
}