/**
 * CPBW Step 1-2-3 Editor - Styles (flusso guidato, 5 step reali)
 * Mobile-first: controlli pensati per touch (target >= 44px).
 *
 * Niente titoli/sottotitoli/indicatori di avanzamento qui dentro (brief
 * 15/10/2026): il nome dello step attivo lo mostra già la progress bar
 * nell'header (vedi cpbw-wizard.css), ripeterlo nel contenuto sarebbe
 * ridondante. Niente "card" bianca di sfondo (vedi .cpbw-main-content in
 * cpbw-wizard.css): il contenuto scorre libero con la pagina, sia da
 * desktop che da mobile.
 */

/* ==========================================================================
   Wrapper generale (comune a Carica una foto / Aggiungi testo / Anteprima)
   ========================================================================== */

.cpbw-guided-wrapper {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 480px;
	margin: 0 auto;
}

/* ==========================================================================
   Step "Carica una foto"
   ========================================================================== */

/* Riquadro verticale "comodo" (brief 16/10/2026: le proporzioni fisiche
   esatte della scatola, 9,4x34cm, sono troppo estreme per lo schermo —
   altezza derivata dalla viewport invece che dalla larghezza, così resta
   sempre visibile senza scorrimento verticale, indipendentemente da
   quanto è larga/corta la pagina). Solo la zona di SELEZIONE (nessuna
   immagine ancora) ha una forma fissa 3:4: l'anteprima dopo la scelta
   usa invece le proporzioni REALI della foto (vedi sotto), non va
   "allargata"/ritagliata a forza in un riquadro fisso. */
.cpbw-upload-zone {
	height: min(42vh, 360px);
	width: auto;
	aspect-ratio: 3 / 4;
	align-self: center; /* stesso bug/correzione di .cpbw-upload-preview-frame qui sotto */
	margin: 0 auto;
}

.cpbw-upload-zone[hidden] {
	display: none;
}

#cpbw-app .cpbw-upload-trigger {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 2px dashed var(--cpbw-gray-200);
	border-radius: 14px;
	background: var(--cpbw-canvas-bg);
	color: var(--cpbw-primary-color);
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	text-transform: none;
	text-align: center;
	padding: 16px;
}

.cpbw-upload-preview[hidden] {
	display: none;
}

/* Centra .cpbw-upload-preview-frame, che è inline-flex (vedi sotto): per
   un elemento inline-level, margin:auto non centra — serve text-align
   sul genitore. */
.cpbw-upload-preview {
	text-align: center;
}

/* Stessa ALTEZZA della zona di selezione qui sopra, ma larghezza libera
   (non un riquadro fisso): la foto mantiene le sue proporzioni reali,
   senza dare l'impressione (falsa) di essere stata ritagliata — brief
   16/10/2026.
   display:inline-flex, non "flex" (bug corretto 17/10/2026, secondo
   tentativo — il primo, align-self:center, non aveva alcun effetto:
   questo elemento è dentro .cpbw-upload-preview, un contenitore NORMALE
   — non flex — quindi non è "un figlio flex da riallineare", è un
   elemento block qualunque il cui "width:auto" significa semplicemente
   "riempi tutta la larghezza del genitore", stessa identica resa visiva
   dello stretch flex ma per una ragione diversa). "inline-flex" risolve
   alla radice: il contenitore si comporta come un elemento inline (si
   restringe al proprio contenuto, non riempie il blocco genitore) pur
   mantenendo al suo interno la disposizione flex per l'immagine. */
.cpbw-upload-preview-frame {
	display: inline-flex;
	height: min(42vh, 360px);
	width: auto;
	max-width: 100%;
	align-items: flex-start;
	justify-content: center;
	overflow: hidden;
	border-radius: 14px;
	background: var(--cpbw-canvas-bg);
}

/* Prefisso #cpbw-app + !important sulle dimensioni: il kit CSS di
   Elementor dichiara "img" anche lui con !important, quindi la sola
   specificità più alta di #cpbw-app non basterebbe da sola qui (a
   differenza degli altri casi corretti in questo stesso controllo
   sistematico) — servono entrambi. */
#cpbw-app .cpbw-upload-preview-frame img {
	height: 100% !important;
	width: auto !important;
	max-width: 100% !important;
	object-fit: contain;
	display: block;
}

/* Un solo pulsante dopo la scelta del file ("Sostituisci immagine"): il
   caricamento vero e proprio lo fa il pulsante generale "Avanti" della
   barra fissa, non più un "Conferma e carica" dedicato (brief 16/10/2026). */
.cpbw-upload-preview-actions {
	display: flex;
	justify-content: center;
	margin-top: 16px;
}

.cpbw-upload-preview-actions .cpbw-btn {
	min-height: 44px;
	min-width: 180px;
}

/* ==========================================================================
   Disclaimer qualità immagine (spostato qui dal Riepilogo, brief
   16/10/2026) — stesso stile già usato altrove nel wizard.
   ========================================================================== */

.cpbw-quality-disclaimer {
	padding: 14px 16px;
	border-radius: 10px;
	background: var(--cpbw-canvas-bg);
}

#cpbw-app .cpbw-quality-disclaimer h5 {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--cpbw-primary-color);
}

.cpbw-quality-disclaimer p {
	margin: 0;
	font-size: 12.5px;
	color: var(--cpbw-gray-500);
}

/* ==========================================================================
   Step "Aggiungi testo" — due fasi sullo stesso step, senza reload:
   1) occasione (con icona Lucide) + frase + testo libero
   2) stile della scritta (font)
   ========================================================================== */

.cpbw-text-phase[hidden] {
	display: none;
}

/* Prefisso #cpbw-app: applicata a un <h4> nel markup — anche se il
   SELETTORE non contiene "h4", Elementor ha comunque una regola globale
   per il tag h4 con specificità più alta di una sola classe, quindi senza
   questo prefisso vinceva lui (stesso problema del controllo sistematico
   di ieri, qui sfuggito perché cercavo selettori CSS scritti con "h4",
   non classi applicate a un h4 nel markup). */
#cpbw-app .cpbw-section-label {
	margin: 0 0 10px;
	font-family: var(--cpbw-font-sans);
	font-size: 14px;
	font-weight: 700;
	color: var(--cpbw-primary-color);
}

/* Separa visivamente occasione/frase dall'area di testo libero sotto
   (brief 16/10/2026: erano troppo accostate). */
.cpbw-text-section + .cpbw-text-section {
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--cpbw-gray-200);
}

.cpbw-occasion-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

#cpbw-app .cpbw-occasion-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 2px solid var(--cpbw-gray-200);
	border-radius: 999px;
	background: #fff;
	color: var(--cpbw-gray-800);
	font-size: 13px;
	text-transform: none;
	cursor: pointer;
}

#cpbw-app .cpbw-occasion-pill .cpbw-icon {
	color: var(--cpbw-secondary-dark);
	flex-shrink: 0;
}

#cpbw-app .cpbw-occasion-pill.active {
	border-color: var(--cpbw-secondary-light);
	background: var(--cpbw-secondary-light);
	color: #fff;
}

#cpbw-app .cpbw-occasion-pill.active .cpbw-icon {
	color: #fff;
}

/* Niente più max-height/overflow-y interno (brief 16/10/2026: la lista
   restava tagliata) — la pagina intera scorre liberamente, la lista delle
   frasi si espande per intero insieme al resto del contenuto. */
.cpbw-phrase-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 14px; /* separa dalla griglia occasioni sopra (brief 16/10/2026) */
}

.cpbw-phrase-list[hidden] {
	display: none;
}

#cpbw-app .cpbw-phrase-option {
	text-align: left;
	padding: 10px 12px;
	border: 1px solid var(--cpbw-gray-200);
	border-radius: 10px;
	background: #fff;
	font-size: 14px;
	color: var(--cpbw-gray-800);
	text-transform: none;
	cursor: pointer;
}

#cpbw-app .cpbw-phrase-option:hover {
	background: var(--cpbw-gray-100);
}

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

.cpbw-field-label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cpbw-gray-500);
}

/* Prefisso #cpbw-app: applicata a una <textarea>, stesso motivo di
   .cpbw-section-label qui sopra (il kit di Elementor stila anche i campi
   di testo nativi a livello globale). */
#cpbw-app .cpbw-text-input {
	width: 100%;
	min-height: 70px;
	padding: 12px 14px;
	border: 2px solid var(--cpbw-gray-200);
	border-radius: 10px;
	font-size: 16px; /* evita zoom automatico su iOS */
	resize: vertical;
	box-sizing: border-box;
}

#cpbw-app .cpbw-text-input:focus {
	outline: none;
	border-color: var(--cpbw-secondary-color);
}

.cpbw-char-counter {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	text-align: right;
	color: var(--cpbw-gray-500);
}

/* Anteprima live del testo nel font scelto. Menu a tendina custom per il
   font (non una <select> nativa: su Safari/iOS le <option> non possono
   avere un font-family diverso da quello di sistema). */

.cpbw-text-preview-wrap {
	padding: 20px 16px;
	margin-bottom: 20px; /* separa dalla select del font sotto (brief 16/10/2026) */
	border-radius: 10px;
	background: var(--cpbw-canvas-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 64px;
	text-align: center;
}

.cpbw-text-preview {
	color: #3b2a1a;
	font-size: 20px;
	word-break: break-word;
	max-width: 100%;
	/* Senza questo, un <div> normale ignora i ritorni a capo scritti
	   dall'utente (li tratta come spazi): qui invece vanno mostrati, così
	   l'anteprima coincide con quella reale sul canvas (step Anteprima) e
	   con il file esecutivo, dove gli a capo sono già rispettati. */
	white-space: pre-line;
}

.cpbw-font-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

#cpbw-app .cpbw-font-option {
	min-height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 10px;
	border: 2px solid var(--cpbw-gray-200);
	border-radius: 10px;
	background: #fff;
	font-size: 17px;
	line-height: 1.2;
	color: var(--cpbw-gray-800);
	text-align: center;
	text-transform: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

#cpbw-app .cpbw-font-option[hidden] {
	display: none;
}

#cpbw-app .cpbw-font-option:hover {
	background: var(--cpbw-gray-100);
}

#cpbw-app .cpbw-font-option.active {
	border-color: var(--cpbw-secondary-light);
	background: var(--cpbw-secondary-light);
	color: #fff;
}

#cpbw-app .cpbw-font-more {
	width: 100%;
	margin-top: 12px;
}

#cpbw-app .cpbw-font-more[hidden] {
	display: none;
}

/* ==========================================================================
   Step "Anteprima" — canvas Fabric.js bloccato (nessun oggetto
   selezionabile) + zoom (pulsanti/wheel/pinch)
   ========================================================================== */

.cpbw-editor-canvas-container {
	position: relative;
	width: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--cpbw-canvas-bg);
}

.cpbw-editor-canvas-container canvas {
	display: block;
	max-width: 100%;
}

/* Fabric.js avvolge il <canvas> in un proprio div.canvas-container con
   width/height fisse in px: va centrato esplicitamente. */
.cpbw-editor-canvas-container .canvas-container {
	margin: 0 auto;
}

.cpbw-preview-viewport {
	position: relative;
	overflow: hidden;
	border-radius: 14px;
	background: var(--cpbw-canvas-bg);
	/* A zoom 1 la pagina scorre normalmente anche toccando l'anteprima; il
	   pinch lo gestisce il JS. Con zoom > 1 (.is-zoomed) anche i gesti con
	   un dito sono del JS (spostamento del contenuto). */
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}

.cpbw-preview-viewport.is-zoomed {
	touch-action: none;
	cursor: grab;
}

.cpbw-preview-viewport.is-dragging {
	cursor: grabbing;
}

.cpbw-preview-zoom-wrap {
	transform-origin: 0 0;
	transition: transform .15s ease;
}

/* Niente animazione mentre si trascina/pizzica: il contenuto deve seguire
   il dito senza ritardo. */
.cpbw-preview-viewport.is-gesturing .cpbw-preview-zoom-wrap {
	transition: none;
}

.cpbw-preview-zoom-controls {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	z-index: 5;
}

#cpbw-app .cpbw-preview-zoom-controls button {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: var(--cpbw-shadow-md);
	color: var(--cpbw-primary-color);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.cpbw-preview-edit-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
}

/* Stile pulsante ma non pieno, con il bordo (brief 16/10/2026) — una via
   di mezzo tra .cpbw-btn-primary (pieno) e .cpbw-link-muted (testo
   semplice): colori neutri, non il rosso di .cpbw-btn-outline (pensato
   per azioni distruttive, non per "modifica"). */
#cpbw-app .cpbw-btn-outline-neutral {
	background: transparent;
	color: var(--cpbw-primary-color);
	border: 1.5px solid var(--cpbw-border);
}

#cpbw-app .cpbw-btn-outline-neutral:hover:not(:disabled) {
	background: var(--cpbw-sage-tint);
	border-color: var(--cpbw-secondary-color);
}

#cpbw-app .cpbw-preview-edit-actions .cpbw-btn {
	flex: 1;
	max-width: 200px;
	font-size: 13px;
}

/* ==========================================================================
   Overlay di caricamento (riusato nello step Anteprima mentre il canvas si
   prepara)
   ========================================================================== */

.cpbw-loading-overlay[hidden] {
	display: none;
}

/* ==========================================================================
   Schermata di benvenuto (brief 15/10/2026) — dentro il pop-up riusato da
   .cpbw-modal/.cpbw-modal-backdrop/.cpbw-modal-content (stesso overlay
   scuro dei pop-up vino/esito carrello, brief 16/10/2026): qui restano
   solo gli stili specifici del contenuto, il posizionamento/overlay/
   animazione sono già gestiti da quelle classi condivise.
   ========================================================================== */

.cpbw-welcome-modal-content {
	max-width: 480px;
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	text-align: center;
	box-sizing: border-box;
}

/* Prefisso #cpbw-app: applicata a un <h2>, stesso motivo di
   .cpbw-section-label più sopra. */
#cpbw-app .cpbw-welcome-title {
	margin: 0;
	font-family: var(--cpbw-font-serif);
	font-size: 26px;
	font-weight: 600;
	color: var(--cpbw-primary-color);
}

.cpbw-welcome-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	text-align: left;
}

.cpbw-welcome-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.cpbw-welcome-item-icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--cpbw-sage-tint);
	color: var(--cpbw-primary-color);
}

.cpbw-welcome-item-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cpbw-welcome-item-body strong {
	font-size: 14.5px;
	color: var(--cpbw-ink);
}

.cpbw-welcome-item-body span {
	font-size: 13px;
	color: var(--cpbw-muted);
}

.cpbw-welcome-cta {
	align-self: center;
	min-width: 200px;
	min-height: 48px;
}