/* ============================================================
   Youngo Kbox — Area operatore FRONTEND (stile brandizzato v5)
   ============================================================ */

.youngo-kbox-front {
	--yk-orange: #ff6b35;
	--yk-purple: #7b2cbf;
	--yk-teal: #2ec4b6;
	--yk-yellow: #ffc93c;
	--yk-dark: #1a1a2e;
	--yk-gray: #6b7280;
	--yk-border: #e5e7eb;

	max-width: 1200px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--yk-dark);
}

/* ---- Topbar ---- */
.youngo-kbox-front .ykf-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--yk-dark);
	color: #fff;
	padding: 14px 22px;
	border-radius: 14px;
	flex-wrap: wrap;
	gap: 12px;
}
.youngo-kbox-front .ykf-topbar-left {
	display: flex;
	align-items: center;
	gap: 12px;
}
.youngo-kbox-front .ykf-logo-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--yk-orange);
	display: inline-block;
}
.youngo-kbox-front .ykf-logo {
	font-weight: 800;
	letter-spacing: 1px;
	font-size: 18px;
}
.youngo-kbox-front .ykf-badge {
	background: rgba(255, 107, 53, 0.2);
	border: 1px solid rgba(255, 107, 53, 0.4);
	color: #ffb599;
	font-size: 11px;
	padding: 4px 10px;
	border-radius: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.youngo-kbox-front .ykf-topbar-right {
	display: flex;
	align-items: center;
	gap: 16px;
}
.youngo-kbox-front .ykf-location {
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(46, 196, 182, 0.16);
	border: 1px solid rgba(46, 196, 182, 0.35);
	padding: 6px 14px;
	border-radius: 22px;
}
.youngo-kbox-front .ykf-location-info {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}
.youngo-kbox-front .ykf-location-info small {
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	opacity: 0.7;
}
.youngo-kbox-front .ykf-location-info strong {
	font-size: 13px;
}
.youngo-kbox-front .ykf-user {
	display: flex;
	align-items: center;
	gap: 8px;
}
.youngo-kbox-front .ykf-avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--yk-purple);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
}
.youngo-kbox-front .ykf-user-info {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}
.youngo-kbox-front .ykf-user-info small {
	font-size: 10px;
	opacity: 0.6;
}

/* ---- Warning placeholder ---- */
.youngo-kbox-front .ykf-warn {
	margin-top: 16px;
	background: #fff8e1;
	border-left: 4px solid var(--yk-yellow);
	padding: 12px 16px;
	border-radius: 0 8px 8px 0;
	font-size: 13px;
	color: #7a5c00;
}

/* ---- Body ---- */
.youngo-kbox-front .ykf-body {
	margin-top: 24px;
}
.youngo-kbox-front .ykf-title {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 16px;
}
.youngo-kbox-front .ykf-empty {
	padding: 48px;
	text-align: center;
	background: #fafafa;
	border: 1px dashed var(--yk-border);
	border-radius: 12px;
	color: var(--yk-gray);
}

/* ---- Table ---- */
.youngo-kbox-front .ykf-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--yk-border);
	border-radius: 12px;
}
.youngo-kbox-front .ykf-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.youngo-kbox-front .ykf-table thead th {
	background: #f9fafb;
	text-align: left;
	padding: 12px 16px;
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--yk-gray);
	border-bottom: 1px solid var(--yk-border);
}
.youngo-kbox-front .ykf-table tbody td {
	padding: 14px 16px;
	border-bottom: 1px solid #f3f4f6;
	vertical-align: middle;
}
.youngo-kbox-front .ykf-table tbody tr:last-child td {
	border-bottom: none;
}
.youngo-kbox-front .ykf-table tbody tr:hover {
	background: #fafafa;
}
.youngo-kbox-front .ykf-muted {
	color: #b0b0b0;
}
.youngo-kbox-front .ykf-actions {
	white-space: nowrap;
}

/* ---- Buttons ---- */
.youngo-kbox-front .ykf-btn {
	border: 1px solid var(--yk-border);
	background: #fff;
	color: var(--yk-dark);
	padding: 7px 14px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	margin: 2px;
	transition: all 0.15s;
}
.youngo-kbox-front .ykf-btn:hover:not(:disabled) {
	border-color: var(--yk-purple);
	color: var(--yk-purple);
}
.youngo-kbox-front .ykf-btn-primary {
	background: var(--yk-orange);
	border-color: var(--yk-orange);
	color: #fff;
}
.youngo-kbox-front .ykf-btn-primary:hover:not(:disabled) {
	background: #e85d2a;
	border-color: #e85d2a;
	color: #fff;
}
.youngo-kbox-front .ykf-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* ---- Guard (accesso negato / login) ---- */
.youngo-kbox-front-guard {
	max-width: 500px;
	margin: 40px auto;
	padding: 32px;
	text-align: center;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.youngo-kbox-front-btn {
	display: inline-block;
	margin-top: 12px;
	background: #ff6b35;
	color: #fff;
	padding: 10px 24px;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
}

/* ---- Modale QR ---- */
.youngo-kbox-front .ykf-modal {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 2147483000; /* sopra header fissi del tema */
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-y: auto;
	padding: 20px;
}
.youngo-kbox-front .ykf-modal-box {
	background: #fff;
	border-radius: 16px;
	padding: 28px;
	max-width: 420px;
	width: 90%;
	max-height: 92vh;
	overflow-y: auto;
	text-align: center;
	position: relative;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
/* La × di chiusura: SOLO il pulsante icona, non quello testuale in fondo alla
   modale (che condivide la classe .ykf-modal-close per l'handler JS ma ha anche
   .ykf-btn). Senza :not(.ykf-btn) il testo "Chiudi e torna all'elenco" verrebbe
   schiacciato dentro il cerchietto da 40px. */
.youngo-kbox-front .ykf-modal-close:not(.ykf-btn) {
	position: absolute;
	top: 12px;
	right: 16px;
	border: none;
	background: rgba(255, 255, 255, 0.9);
	font-size: 30px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	cursor: pointer;
	color: #666;
	line-height: 1;
	z-index: 2;
}
/* Il pulsante "Chiudi e torna all'elenco" in fondo alla modale QR: pieno,
   a tutta larghezza, mai trattato come icona × (vedi :not(.ykf-btn) sopra). */
.youngo-kbox-front .ykf-qr-done {
	position: static;
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
	font-size: 15px;
	line-height: 1.3;
	white-space: normal;
	margin-top: 18px;
}
.youngo-kbox-front #ykf-qr-title {
	margin: 0 0 16px;
	font-size: 18px;
}
.youngo-kbox-front #ykf-qr-canvas {
	display: flex;
	justify-content: center;
	margin: 16px 0;
}
.youngo-kbox-front #ykf-qr-info {
	font-size: 15px;
	margin-bottom: 12px;
}
.youngo-kbox-front #ykf-qr-payload {
	text-align: left;
	background: #1e1e2e;
	color: #a6e3a1;
	padding: 12px;
	border-radius: 8px;
	font-size: 10px;
	max-height: 140px;
	overflow: auto;
	white-space: pre-wrap;
	word-break: break-all;
}
.youngo-kbox-front .ykf-placeholder-warn {
	background: #fff8e1;
	border-left: 4px solid #ffc93c;
	padding: 10px 12px;
	border-radius: 0 6px 6px 0;
	font-size: 12px;
	text-align: left;
	margin: 10px 0;
	color: #7a5c00;
}

/* ---- Form Nuova festa ---- */
.youngo-kbox-front .ykf-body-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}
.youngo-kbox-front .ykf-body-head .ykf-title {
	margin: 0;
}
.youngo-kbox-front .ykf-modal-form {
	max-width: 640px;
	max-height: 88vh;
	overflow-y: auto;
	text-align: left;
}
.youngo-kbox-front .ykf-modal-form h3 {
	margin: 0 0 18px;
	font-size: 18px;
}
.youngo-kbox-front .ykf-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.youngo-kbox-front .ykf-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.youngo-kbox-front .ykf-field-full {
	grid-column: 1 / -1;
}
.youngo-kbox-front .ykf-field-2 {
	grid-column: span 2;
}
.youngo-kbox-front .ykf-field label {
	font-size: 12px;
	font-weight: 600;
	color: var(--yk-gray);
}
.youngo-kbox-front .ykf-field input,
.youngo-kbox-front .ykf-field select {
	padding: 9px 12px;
	border: 1px solid var(--yk-border);
	border-radius: 8px;
	font-size: 14px;
	width: 100%;
	box-sizing: border-box;
}
.youngo-kbox-front .ykf-field input:focus,
.youngo-kbox-front .ykf-field select:focus {
	outline: none;
	border-color: var(--yk-purple);
}
.youngo-kbox-front .ykf-check {
	flex-direction: row !important;
	align-items: center;
	gap: 8px;
	font-size: 14px !important;
	font-weight: 600;
	color: var(--yk-dark) !important;
	cursor: pointer;
}
.youngo-kbox-front .ykf-check input {
	width: auto !important;
}
.youngo-kbox-front .ykf-invoice-fields {
	background: #f9fafb;
	border-radius: 10px;
	padding: 14px;
}
.youngo-kbox-front .ykf-pay-options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.youngo-kbox-front .ykf-pay-option {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	border: 2px solid var(--yk-border);
	border-radius: 10px;
	padding: 12px;
	cursor: pointer;
	transition: border-color 0.15s;
}
.youngo-kbox-front .ykf-pay-option:has(input:checked) {
	border-color: var(--yk-orange);
	background: rgba(255, 107, 53, 0.05);
}
.youngo-kbox-front .ykf-pay-option div {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}
.youngo-kbox-front .ykf-pay-option small {
	color: var(--yk-gray);
	font-size: 12px;
}
.youngo-kbox-front .ykf-form-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 20px;
}
.youngo-kbox-front .ykf-new-result {
	margin-top: 18px;
	padding: 16px;
	border-radius: 10px;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	text-align: center;
}
.youngo-kbox-front .ykf-success {
	color: #166534;
	font-size: 14px;
	margin-bottom: 12px;
}
.youngo-kbox-front .ykf-qr-inline {
	display: flex;
	justify-content: center;
	margin: 12px 0;
}
/* ===================================================================
 *  RESPONSIVE — tablet 7" (Galaxy Tab A) e mobile
 *  Breakpoint principale 820px: sotto questa soglia il layout passa
 *  a "una colonna" e la tabella diventa un elenco di schede touch-friendly.
 * =================================================================== */
@media (max-width: 820px) {
	/* Form: una sola colonna, campi pieni. */
	.youngo-kbox-front .ykf-form-grid,
	.youngo-kbox-front .ykf-pay-options {
		grid-template-columns: 1fr;
	}
	.youngo-kbox-front .ykf-field-2,
	.youngo-kbox-front .ykf-field-full {
		grid-column: 1 / -1;
	}

	/* Target touch più generosi su input, select e pulsanti. */
	.youngo-kbox-front .ykf-field input,
	.youngo-kbox-front .ykf-field select {
		font-size: 16px;   /* evita lo zoom automatico di iOS/Android sui focus */
		padding: 12px 14px;
		min-height: 46px;
	}
	.youngo-kbox-front .ykf-btn {
		padding: 12px 16px;
		font-size: 15px;
		min-height: 46px;
	}

	/* Modale a tutto schermo, così il form respira sul tablet. */
	.youngo-kbox-front .ykf-modal {
		padding: 0;
		align-items: flex-start;
	}
	.youngo-kbox-front .ykf-modal-box {
		width: 100%;
		max-width: 100%;
		max-height: 100vh;
		min-height: 100vh;
		overflow-y: auto;
		border-radius: 0;
		margin: 0;
		padding: 64px 16px 40px; /* padding-top ampio: lascia spazio alla × e non accavalla il titolo all'header del tema */
	}
	/* La × di chiusura resta fissa in alto a destra, sopra ogni contenuto.
	   :not(.ykf-btn) esclude il pulsante testuale "Chiudi e torna all'elenco". */
	.youngo-kbox-front .ykf-modal-close:not(.ykf-btn) {
		position: fixed;
		top: 10px;
		right: 12px;
		width: 48px;
		height: 48px;
		font-size: 32px;
		background: #fff;
		box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.2 );
		z-index: 2147483001;
	}

	/* --- Tabella → schede --- */
	/* Niente più scroll orizzontale: ogni riga diventa una card. */
	.youngo-kbox-front .ykf-table-wrap {
		overflow-x: visible;
		border: none;
		border-radius: 0;
	}
	.youngo-kbox-front .ykf-table thead {
		display: none; /* le intestazioni diventano etichette per-cella */
	}
	.youngo-kbox-front .ykf-table,
	.youngo-kbox-front .ykf-table tbody,
	.youngo-kbox-front .ykf-table tbody tr,
	.youngo-kbox-front .ykf-table tbody td {
		display: block;
		width: 100%;
	}
	.youngo-kbox-front .ykf-table tbody tr {
		border: 1px solid var(--yk-border);
		border-radius: 12px;
		padding: 6px 0;
		margin-bottom: 12px;
		background: #fff;
	}
	.youngo-kbox-front .ykf-table tbody td {
		border: none;
		border-bottom: 1px solid #f3f4f6;
		padding: 10px 16px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 12px;
		text-align: right;
	}
	.youngo-kbox-front .ykf-table tbody td:last-child {
		border-bottom: none;
	}
	/* Etichetta del campo (dal data-label) a sinistra di ogni valore. */
	.youngo-kbox-front .ykf-table tbody td::before {
		content: attr(data-label);
		font-weight: 600;
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: 0.4px;
		color: var(--yk-gray);
		text-align: left;
		flex: 0 0 40%;
	}
	/* La cella azioni: pulsanti a tutta larghezza, impilati. */
	.youngo-kbox-front .ykf-actions {
		white-space: normal;
		flex-direction: column;
		align-items: stretch;
	}
	.youngo-kbox-front .ykf-actions::before {
		margin-bottom: 8px;
	}
	.youngo-kbox-front .ykf-actions .ykf-btn {
		display: block;
		width: 100%;
		margin: 4px 0;
		max-width: none; /* annulla il vincolo desktop sul pulsante conferma */
	}
	.youngo-kbox-front .ykf-actions .ykf-btn-confirm {
		max-width: none;
	}
	/* La griglia dei pulsanti collassa a una colonna sui piccoli schermi. */
	.youngo-kbox-front .ykf-actions-btns {
		grid-template-columns: 1fr;
		max-width: none;
	}
	.youngo-kbox-front .ykf-actions-btns .ykf-btn-confirm {
		grid-column: 1 / -1;
	}

	/* Barra filtri: elementi impilati e a tutta larghezza. */
	.youngo-kbox-front .ykf-filters {
		flex-direction: column;
		align-items: stretch;
	}
	.youngo-kbox-front .ykf-filter-input,
	.youngo-kbox-front .ykf-filter-today,
	.youngo-kbox-front .ykf-filter-reset {
		width: 100%;
	}
	.youngo-kbox-front .ykf-filter-dates {
		justify-content: space-between;
	}
	.youngo-kbox-front .ykf-filter-count {
		margin-left: 0;
	}

	/* Extra: una colonna. */
	.youngo-kbox-front .ykf-extras-list {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	/* Telefoni: etichette e valori impilati verticalmente per non stringere troppo. */
	.youngo-kbox-front .ykf-table tbody td {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
		gap: 4px;
	}
	.youngo-kbox-front .ykf-table tbody td::before {
		flex-basis: auto;
	}
	.youngo-kbox-front .ykf-new-party-bar {
		flex-direction: column;
		align-items: stretch;
	}
}

.youngo-kbox-front .ykf-hint {
	font-size: 11px;
	color: var(--yk-gray);
	margin-top: 2px;
}
.youngo-kbox-front select:disabled {
	background: #f3f4f6;
	color: #9ca3af;
}

/* ---- Badge acconto incassato + pulsante conferma ---- */
.youngo-kbox-front .ykf-badge-cashed {
	display: inline-block;
	margin-top: 4px;
	background: #dcfce7;
	color: #166534;
	font-size: 11px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 10px;
	white-space: nowrap;
}
.youngo-kbox-front .ykf-btn-confirm {
	background: #16a34a;
	border-color: #16a34a;
	color: #fff;
}
.youngo-kbox-front .ykf-btn-confirm:hover:not(:disabled) {
	background: #15803d;
	border-color: #15803d;
	color: #fff;
}

/* ---- Barra filtri elenco ---- */
.youngo-kbox-front .ykf-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	padding: 12px 14px;
	background: #f8f7fb;
	border: 1px solid #ece9f3;
	border-radius: 12px;
}
.youngo-kbox-front .ykf-filter-input {
	flex: 1 1 240px;
	min-width: 200px;
	padding: 8px 12px;
	border: 1px solid #d9d5e5;
	border-radius: 8px;
	font-size: 14px;
}
.youngo-kbox-front .ykf-filter-dates {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #6b6580;
}
.youngo-kbox-front .ykf-filter-date {
	padding: 6px 8px;
	border: 1px solid #d9d5e5;
	border-radius: 8px;
	font-size: 13px;
}
.youngo-kbox-front .ykf-filter-today {
	background: #2d2a3e;
	color: #fff;
	border-color: #2d2a3e;
	white-space: nowrap;
}
.youngo-kbox-front .ykf-filter-today:hover {
	background: #1f1d2c;
}
.youngo-kbox-front .ykf-filter-reset {
	background: #fff;
	white-space: nowrap;
}
.youngo-kbox-front .ykf-filter-count {
	font-size: 13px;
	color: #8b0000;
	font-weight: 600;
	margin-left: auto;
}

/* ---- Evidenziazione festa appena creata ---- */
.youngo-kbox-front .ykf-row-highlight {
	animation: ykfHighlight 6s ease-out;
}
@keyframes ykfHighlight {
	0%   { background: #fff3cd; box-shadow: inset 4px 0 0 #f59e0b; }
	70%  { background: #fff3cd; box-shadow: inset 4px 0 0 #f59e0b; }
	100% { background: transparent; box-shadow: inset 4px 0 0 transparent; }
}

/* ---- Azioni e messaggio conferma nella finestra QR ---- */
.youngo-kbox-front .ykf-result-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.youngo-kbox-front .ykf-modal-confirm-msg {
	margin-top: 10px;
	font-size: 14px;
}

/* ---- Paginazione elenco ---- */
.youngo-kbox-front .ykf-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 16px;
	flex-wrap: wrap;
}
.youngo-kbox-front .ykf-page-btn {
	padding: 7px 14px;
	border: 1px solid #d9d5e5;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	color: #2d2a3e;
}
.youngo-kbox-front .ykf-page-btn:hover:not(:disabled) {
	background: #f4f2f9;
	border-color: #b9b2d0;
}
.youngo-kbox-front .ykf-page-btn:disabled {
	opacity: .45;
	cursor: default;
}
.youngo-kbox-front .ykf-page-info {
	font-size: 13px;
	color: #6b6580;
}

/* ---- Pulsante conferma nella lista: etichetta breve, una riga sola ---- */
.youngo-kbox-front .ykf-actions .ykf-btn-confirm {
	white-space: nowrap;
	max-width: none;
}

/* ---- Extra del servizio ---- */
.youngo-kbox-front .ykf-extras-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 10px;
	margin-top: 8px;
}
.youngo-kbox-front .ykf-extra-item {
	border: 1px solid #e2ddef;
	border-radius: 10px;
	padding: 10px 12px;
	background: #fff;
}
.youngo-kbox-front .ykf-extra-main {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}
.youngo-kbox-front .ykf-extra-title {
	flex: 1;
	font-size: 14px;
	line-height: 1.25;
}
.youngo-kbox-front .ykf-extra-price {
	font-weight: 700;
	color: #2d2a3e;
	white-space: nowrap;
}
.youngo-kbox-front .ykf-extra-qtywrap {
	margin-top: 8px;
	font-size: 13px;
	color: #6b6580;
}
.youngo-kbox-front .ykf-extra-qty {
	width: 60px;
	padding: 4px 6px;
	border: 1px solid #d9d5e5;
	border-radius: 6px;
	margin-left: 6px;
}

/* ---- Badge prenotazioni pagate online ---- */
.youngo-kbox-front .ykf-badge-online {
	display: inline-block;
	background: #dcfce7;
	color: #166534;
	border: 1px solid #86efac;
	padding: 8px 14px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 700;
}
.youngo-kbox-front .ykf-badge-online-sm {
	display: block;
	color: #166534;
	font-size: 12px;
	font-weight: 600;
	margin-bottom: 8px;
}

/* ---- Pulsante "Dettagli" (secondario, discreto) ---- */
.youngo-kbox-front .ykf-btn-ghost {
	background: #fff;
	color: #4b4560;
	border: 1px solid #d9d5e5;
}
.youngo-kbox-front .ykf-btn-ghost:hover {
	background: #f4f2f9;
}

/* ---- Modale Dettagli prenotazione ---- */
.youngo-kbox-front .ykf-modal-details {
	max-width: 620px;
	text-align: left;
	max-height: 88vh;
	overflow-y: auto;
}
.youngo-kbox-front .ykf-d-section {
	margin-bottom: 20px;
}
.youngo-kbox-front .ykf-d-section h4 {
	margin: 0 0 8px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #8b85a0;
	border-bottom: 1px solid #ece9f3;
	padding-bottom: 6px;
}
.youngo-kbox-front .ykf-d-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 6px 0;
	font-size: 14px;
}
.youngo-kbox-front .ykf-d-label {
	color: #6b6580;
	flex: 0 0 45%;
}
.youngo-kbox-front .ykf-d-value {
	text-align: right;
	font-weight: 600;
	color: #2d2a3e;
	word-break: break-word;
}
.youngo-kbox-front .ykf-d-discount .ykf-d-value {
	color: #166534;
}
.youngo-kbox-front .ykf-d-discount .ykf-d-label {
	color: #166534;
	font-weight: 600;
}
.youngo-kbox-front .ykf-d-total {
	border-top: 1px solid #ece9f3;
	margin-top: 4px;
	padding-top: 10px;
}
.youngo-kbox-front .ykf-d-total .ykf-d-value {
	font-size: 17px;
}
.youngo-kbox-front .ykf-d-subtotal .ykf-d-value {
	color: #6b6580;
}
.youngo-kbox-front .ykf-d-state .ykf-d-value {
	font-weight: 700;
}
.youngo-kbox-front .ykf-d-note {
	background: #f8f7fb;
	border: 1px solid #ece9f3;
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 12px;
	white-space: pre-wrap;
	word-break: break-word;
	margin: 0;
	color: #4b4560;
}

@media (max-width: 820px) {
	.youngo-kbox-front .ykf-d-row {
		flex-direction: column;
		gap: 2px;
	}
	.youngo-kbox-front .ykf-d-label {
		flex-basis: auto;
	}
	.youngo-kbox-front .ykf-d-value {
		text-align: left;
	}
}

/* ---- Avviso nella modale dettagli (es. pagamento assente) ---- */
.youngo-kbox-front .ykf-d-warning {
	background: #fff7ed;
	border: 1px solid #fdba74;
	color: #9a3412;
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 13px;
	line-height: 1.4;
	margin: 8px 0 12px;
}

/* ---- Riga di stato + azioni (colonna Azioni) ---- */
.youngo-kbox-front .ykf-state {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 10px;
	line-height: 1.3;
}
.youngo-kbox-front .ykf-state-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex-shrink: 0;
	background: #9ca3af;
}
.youngo-kbox-front .ykf-state-warning { color: #92600a; }
.youngo-kbox-front .ykf-state-warning .ykf-state-dot,
.youngo-kbox-front .ykf-dot-warning { background: #e0a800; }
.youngo-kbox-front .ykf-state-success { color: #166534; }
.youngo-kbox-front .ykf-state-success .ykf-state-dot,
.youngo-kbox-front .ykf-dot-success { background: #22a35a; }
.youngo-kbox-front .ykf-state-online { color: #185fa5; }
.youngo-kbox-front .ykf-state-online .ykf-state-dot,
.youngo-kbox-front .ykf-dot-online { background: #2f86e0; }
.youngo-kbox-front .ykf-state-muted { color: #6b7280; }
.youngo-kbox-front .ykf-state-muted .ykf-state-dot { background: #9ca3af; }

.youngo-kbox-front .ykf-actions-btns {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
	align-items: stretch;
	max-width: 340px;
}
.youngo-kbox-front .ykf-actions-btns .ykf-btn {
	margin: 0;
	width: 100%;
	white-space: nowrap;
	text-align: center;
}
/* Il pulsante Incassa scende sulla riga sotto, allineato alla prima colonna,
   con la stessa larghezza degli altri pulsanti (non sproporzionato). */
.youngo-kbox-front .ykf-actions-btns .ykf-btn-confirm {
	grid-column: 1 / 2;
}

/* ---- Legenda stati (sopra la tabella) ---- */
.youngo-kbox-front .ykf-legend {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	padding: 10px 4px 14px;
	font-size: 12px;
	color: var(--yk-gray);
}
.youngo-kbox-front .ykf-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* ---- Controllo acconto personalizzato (form operatore) ---- */
.youngo-kbox-front .ykf-acconto-input {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.youngo-kbox-front .ykf-acconto-mode {
	display: inline-flex;
	border: 1px solid var(--yk-border);
	border-radius: 8px;
	overflow: hidden;
}
.youngo-kbox-front .ykf-acconto-mode-opt {
	margin: 0;
}
.youngo-kbox-front .ykf-acconto-mode-opt input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.youngo-kbox-front .ykf-acconto-mode-opt span {
	display: inline-block;
	padding: 8px 16px;
	cursor: pointer;
	font-weight: 700;
	background: #fff;
	color: var(--yk-gray);
}
.youngo-kbox-front .ykf-acconto-mode-opt input:checked + span {
	background: var(--yk-primary, #e8590c);
	color: #fff;
}
.youngo-kbox-front #ykf-acconto-value {
	width: 110px;
}
.youngo-kbox-front .ykf-acconto-result {
	font-size: 14px;
	color: var(--yk-dark);
}

/* ===================================================================
 *  VISTA CALENDARIO
 * =================================================================== */
.youngo-kbox-front .ykf-viewbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 12px 4px;
}
.youngo-kbox-front .ykf-viewswitch {
	display: inline-flex;
	border: 1px solid var(--yk-border);
	border-radius: 10px;
	overflow: hidden;
}
.youngo-kbox-front .ykf-view-btn {
	border: none;
	background: #fff;
	color: var(--yk-gray);
	padding: 8px 18px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.youngo-kbox-front .ykf-view-btn.is-active {
	background: var(--yk-dark, #221d33);
	color: #fff;
}

.youngo-kbox-front .ykf-cal-head {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}
.youngo-kbox-front .ykf-cal-nav {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.youngo-kbox-front .ykf-cal-nav strong {
	font-size: 18px;
	min-width: 160px;
	text-align: center;
}
.youngo-kbox-front .ykf-cal-prev,
.youngo-kbox-front .ykf-cal-next {
	padding: 6px 14px;
	font-size: 18px;
	line-height: 1;
}
.youngo-kbox-front .ykf-cal-count {
	margin-left: auto;
	font-size: 13px;
	color: var(--yk-gray);
}

.youngo-kbox-front .ykf-cal-grid {
	display: grid;
	/* minmax(0,1fr) invece di 1fr: senza questo la larghezza minima di ogni
	   colonna è quella del CONTENUTO (nomi pacchetto lunghi, nowrap) e la
	   griglia sfonda il contenitore. */
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 6px;
	width: 100%;
}
.youngo-kbox-front .ykf-cal-dow {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--yk-gray);
	padding: 4px 6px;
}
.youngo-kbox-front .ykf-cal-cell {
	min-width: 0; /* consente il troncamento del testo interno */
	min-height: 96px;
	border: 1px solid var(--yk-border);
	border-radius: 10px;
	padding: 6px;
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.youngo-kbox-front .ykf-cal-cell.is-other {
	background: #fafafa;
	opacity: 0.55;
}
.youngo-kbox-front .ykf-cal-cell.is-today {
	border-color: var(--yk-primary, #e8590c);
	box-shadow: 0 0 0 1px var(--yk-primary, #e8590c) inset;
}
.youngo-kbox-front .ykf-cal-daynum {
	font-size: 13px;
	font-weight: 700;
	color: var(--yk-dark);
	margin-bottom: 2px;
}
.youngo-kbox-front .ykf-cal-cell.is-today .ykf-cal-daynum {
	color: var(--yk-primary, #e8590c);
}
.youngo-kbox-front .ykf-cal-event {
	display: flex;
	align-items: center;
	gap: 5px;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	border: 1px solid #ece9f3;
	background: #f8f7fb;
	border-radius: 7px;
	padding: 5px 7px;
	font-size: 11.5px;
	cursor: pointer;
	text-align: left;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	transition: all 0.12s;
}
.youngo-kbox-front .ykf-cal-event:hover {
	background: #f0eef7;
	border-color: #d9d5e5;
}
.youngo-kbox-front .ykf-cal-time {
	font-weight: 700;
	color: var(--yk-dark);
	flex: 0 0 auto; /* l'orario non si comprime mai */
}
.youngo-kbox-front .ykf-cal-pkg {
	color: var(--yk-gray);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0; /* necessario perché il troncamento funzioni dentro un flex */
	flex: 1 1 auto;
}
.youngo-kbox-front .ykf-cal-event .ykf-state-dot {
	flex: 0 0 auto;
}

/* "+N altre": apre l'elenco completo della giornata */
.youngo-kbox-front .ykf-cal-more {
	border: none;
	background: none;
	color: var(--yk-primary, #e8590c);
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
	padding: 2px 4px;
	text-align: left;
}
.youngo-kbox-front .ykf-cal-more:hover {
	text-decoration: underline;
}

/* Elenco feste del giorno (modale) */
.youngo-kbox-front .ykf-day-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: left;
}
.youngo-kbox-front .ykf-day-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	border: 1px solid var(--yk-border);
	border-radius: 10px;
	background: #fff;
	padding: 12px 14px;
	cursor: pointer;
	text-align: left;
	transition: all 0.12s;
}
.youngo-kbox-front .ykf-day-item:hover {
	background: #f8f7fb;
	border-color: #d9d5e5;
}
.youngo-kbox-front .ykf-day-time {
	font-weight: 700;
	font-size: 15px;
	flex: 0 0 auto;
}
.youngo-kbox-front .ykf-day-info {
	flex: 1 1 auto;
	min-width: 0;
}
.youngo-kbox-front .ykf-day-client {
	font-weight: 600;
	font-size: 14px;
}
.youngo-kbox-front .ykf-day-meta {
	font-size: 12px;
	color: var(--yk-gray);
}

/* Azioni dentro la modale dettagli */
.youngo-kbox-front .ykf-details-actions {
	border-top: 1px solid #ece9f3;
	margin-top: 4px;
	padding-top: 14px;
	margin-bottom: 6px;
}
.youngo-kbox-front .ykf-details-actions-title {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #8b85a0;
	margin-bottom: 10px;
}
.youngo-kbox-front .ykf-details-actions-btns {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.youngo-kbox-front .ykf-details-actions-btns .ykf-btn {
	margin: 0;
	flex: 1 1 auto;
	min-width: 130px;
}

@media (max-width: 820px) {
	.youngo-kbox-front .ykf-cal-grid {
		gap: 3px;
	}
	.youngo-kbox-front .ykf-cal-cell {
		min-height: 68px;
		padding: 4px;
	}
	.youngo-kbox-front .ykf-cal-event {
		font-size: 10px;
		padding: 3px 4px;
	}
	.youngo-kbox-front .ykf-cal-pkg {
		display: none; /* su schermi stretti resta ora + pallino di stato */
	}
	.youngo-kbox-front .ykf-details-actions-btns .ykf-btn {
		flex-basis: 100%;
	}
}

/* ---- Riepilogo prenotazione in chiaro nella finestra del QR ---- */
.youngo-kbox-front .ykf-qr-booking {
	text-align: left;
	background: #f8f7fb;
	border: 1px solid #ece9f3;
	border-radius: 10px;
	padding: 12px 14px;
	margin: 14px 0 10px;
}
.youngo-kbox-front .ykf-qr-booking-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 4px 0;
	font-size: 13px;
}
.youngo-kbox-front .ykf-qr-booking-row span {
	color: var(--yk-gray);
	flex: 0 0 auto;
}
.youngo-kbox-front .ykf-qr-booking-row strong {
	color: var(--yk-dark);
	text-align: right;
	word-break: break-word;
}

@media (max-width: 820px) {
	.youngo-kbox-front .ykf-qr-booking-row {
		flex-direction: column;
		gap: 1px;
	}
	.youngo-kbox-front .ykf-qr-booking-row strong {
		text-align: left;
	}
}

/* ===================================================================
 *  VISTA STATISTICHE
 * =================================================================== */
.youngo-kbox-front .ykf-stats-filters {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	flex-wrap: wrap;
	background: #fff;
	border: 1px solid var(--yk-border);
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: 10px;
}
.youngo-kbox-front .ykf-sf {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.youngo-kbox-front .ykf-sf label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--yk-gray);
}
.youngo-kbox-front .ykf-sf input,
.youngo-kbox-front .ykf-sf select {
	border: 1px solid var(--yk-border);
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 14px;
}
.youngo-kbox-front .ykf-sf-sep {
	width: 1px;
	align-self: stretch;
	background: var(--yk-border);
	margin: 0 4px;
}
.youngo-kbox-front .ykf-stats-note {
	font-size: 12px;
	color: var(--yk-gray);
	margin: 0 4px 16px;
	font-style: italic;
}
.youngo-kbox-front .ykf-stats-warn {
	background: #fff7ed;
	border: 1px solid #fdba74;
	color: #9a3412;
	border-radius: 8px;
	padding: 9px 12px;
	font-size: 13px;
	margin: 0 0 16px;
}

/* ---- Riquadri numerici ---- */
.youngo-kbox-front .ykf-kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	margin-bottom: 16px;
}
.youngo-kbox-front .ykf-kpi {
	background: #fff;
	border: 1px solid var(--yk-border);
	border-top: 3px solid var(--yk-gray);
	border-radius: 12px;
	padding: 14px 16px;
}
.youngo-kbox-front .ykf-kpi-blue   { border-top-color: #2f86e0; }
.youngo-kbox-front .ykf-kpi-green  { border-top-color: #22a35a; }
.youngo-kbox-front .ykf-kpi-orange { border-top-color: #e8590c; }
.youngo-kbox-front .ykf-kpi-dark   { border-top-color: #2d2a3e; }
.youngo-kbox-front .ykf-kpi-label {
	font-size: 12px;
	color: var(--yk-gray);
	margin-bottom: 6px;
}
.youngo-kbox-front .ykf-kpi-value {
	font-size: 26px;
	font-weight: 700;
	color: var(--yk-dark);
	line-height: 1.15;
	word-break: break-word;
}
.youngo-kbox-front .ykf-kpi-blue .ykf-kpi-value   { color: #2f86e0; }
.youngo-kbox-front .ykf-kpi-green .ykf-kpi-value  { color: #22a35a; }
.youngo-kbox-front .ykf-kpi-orange .ykf-kpi-value { color: #e8590c; }
.youngo-kbox-front .ykf-kpi-sub {
	font-size: 11.5px;
	color: var(--yk-gray);
	margin-top: 4px;
}

/* ---- Riquadri grafici ---- */
.youngo-kbox-front .ykf-charts {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 12px;
	margin-bottom: 12px;
}

/* Sotto i 1180px tre colonne stringono troppo le ciambelle: il grafico a
   barre prende la riga intera e le due ciambelle si affiancano sotto. */
@media (max-width: 1180px) {
	.youngo-kbox-front .ykf-charts {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.youngo-kbox-front .ykf-charts > .ykf-card:first-child {
		grid-column: 1 / -1;
	}
}
.youngo-kbox-front .ykf-card {
	background: #fff;
	border: 1px solid var(--yk-border);
	border-radius: 12px;
	padding: 16px 18px;
	min-width: 0;
}
.youngo-kbox-front .ykf-card h4 {
	margin: 0 0 14px;
	font-size: 14px;
	color: var(--yk-dark);
}
.youngo-kbox-front .ykf-card h4 small {
	font-weight: 400;
	color: var(--yk-gray);
}

/* ---- Barre orizzontali ---- */
.youngo-kbox-front .ykf-bars {
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.youngo-kbox-front .ykf-bar-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 2.2fr 34px;
	align-items: center;
	gap: 10px;
	font-size: 12.5px;
}
.youngo-kbox-front .ykf-bar-label {
	color: var(--yk-dark);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.youngo-kbox-front .ykf-bar-track {
	background: #f3f1f8;
	border-radius: 5px;
	height: 16px;
	overflow: hidden;
}
.youngo-kbox-front .ykf-bar-fill {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, #45ee39, #22a35a);
	border-radius: 5px;
}
.youngo-kbox-front .ykf-bar-val {
	text-align: right;
	font-weight: 700;
	color: var(--yk-dark);
}

/* ---- Ciambella ---- */
.youngo-kbox-front .ykf-donut-wrap {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}
.youngo-kbox-front .ykf-donut {
	width: 150px;
	height: 150px;
	flex: 0 0 150px;
}
.youngo-kbox-front .ykf-donut-legend {
	font-size: 13px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.youngo-kbox-front .ykf-donut-legend .ykf-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin-right: 7px;
}
.youngo-kbox-front .ykf-donut-legend small {
	color: var(--yk-gray);
}

/* ---- Andamento mensile ---- */
.youngo-kbox-front .ykf-line {
	width: 100%;
	height: auto;
	display: block;
}

/* Contenitore: riferimento per il posizionamento del tooltip. */
.youngo-kbox-front .ykf-chart-wrap {
	position: relative;
}

.youngo-kbox-front .ykf-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0 0 6px 42px;
	font-size: 12px;
	color: var(--yk-gray);
}
.youngo-kbox-front .ykf-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.youngo-kbox-front .ykf-legend-item i {
	width: 14px;
	height: 3px;
	border-radius: 2px;
	display: inline-block;
}

.youngo-kbox-front .ykf-chart-hit {
	cursor: pointer;
}
.youngo-kbox-front .ykf-pt {
	transition: r 0.1s ease;
	pointer-events: none; /* i punti non devono rubare l'evento alle colonne */
}

.youngo-kbox-front .ykf-tip {
	position: absolute;
	z-index: 5;
	min-width: 190px;
	background: #2d2a3e;
	color: #fff;
	border-radius: 8px;
	padding: 9px 11px;
	font-size: 12px;
	line-height: 1.5;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
	pointer-events: none; /* non deve mai coprire la zona sensibile */
}
.youngo-kbox-front .ykf-tip[hidden] {
	display: none;
}
.youngo-kbox-front .ykf-tip-title {
	font-weight: 700;
	margin-bottom: 4px;
}
.youngo-kbox-front .ykf-tip-row {
	display: flex;
	align-items: center;
	gap: 7px;
}
.youngo-kbox-front .ykf-tip-row i {
	width: 10px;
	height: 3px;
	border-radius: 2px;
	flex: 0 0 auto;
}
.youngo-kbox-front .ykf-tip-row span {
	flex: 1 1 auto;
	opacity: 0.85;
}
.youngo-kbox-front .ykf-tip-row b {
	font-weight: 700;
}
.youngo-kbox-front .ykf-tip-val {
	margin-top: 5px;
	padding-top: 5px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	opacity: 0.8;
	font-size: 11px;
}

@media (max-width: 820px) {
	/* Su tablet e telefono ogni grafico prende la riga intera. */
	.youngo-kbox-front .ykf-charts {
		grid-template-columns: 1fr;
	}
	.youngo-kbox-front .ykf-charts > .ykf-card:first-child {
		grid-column: auto;
	}
	.youngo-kbox-front .ykf-stats-filters {
		flex-direction: column;
		align-items: stretch;
	}
	.youngo-kbox-front .ykf-sf-sep {
		display: none;
	}
	.youngo-kbox-front .ykf-bar-row {
		grid-template-columns: minmax(0, 1fr) 1.4fr 30px;
	}
}

/* ---- Filtri statistiche: gruppo disattivato ----
 * Quando si usa un criterio di data, l'altro si spegne: resta visibile ma
 * chiaramente non attivo, così è evidente che i due si escludono. */
.youngo-kbox-front .ykf-sf.is-disabled {
	opacity: 0.42;
}
.youngo-kbox-front .ykf-sf.is-disabled input {
	background: #f3f1f8;
	cursor: not-allowed;
}
.youngo-kbox-front .ykf-sf-actions {
	display: flex;
	gap: 8px;
	align-items: flex-end;
	margin-left: auto;
}
.youngo-kbox-front .ykf-sf-actions .ykf-btn {
	margin: 0;
	white-space: nowrap;
}

@media (max-width: 820px) {
	.youngo-kbox-front .ykf-sf-actions {
		margin-left: 0;
	}
	.youngo-kbox-front .ykf-sf-actions .ykf-btn {
		flex: 1 1 auto;
	}
}

/* ---- Date bloccate (stato "Da confermare") ---- */
.youngo-kbox-front .ykf-state-hold { color: #6d28d9; }
.youngo-kbox-front .ykf-state-hold .ykf-state-dot,
.youngo-kbox-front .ykf-dot-hold { background: #8b5cf6; }
.youngo-kbox-front .ykf-state-stale { color: #b45309; }
.youngo-kbox-front .ykf-state-stale .ykf-state-dot,
.youngo-kbox-front .ykf-dot-stale { background: #f59e0b; }

/* Pannello di conferma nel dettaglio */
.youngo-kbox-front .ykf-hold-confirm {
	background: #f8f7fb;
	border: 1px solid #ece9f3;
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 12px;
}
.youngo-kbox-front .ykf-hold-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 9px;
}
.youngo-kbox-front .ykf-hold-row:last-child { margin-bottom: 0; }
.youngo-kbox-front .ykf-hold-row > label {
	font-size: 13px;
	color: var(--yk-gray);
	min-width: 150px;
	margin: 0;
}
.youngo-kbox-front .ykf-hold-row select,
.youngo-kbox-front .ykf-hold-row input[type="number"] {
	border: 1px solid var(--yk-border);
	border-radius: 8px;
	padding: 7px 10px;
	font-size: 14px;
}
.youngo-kbox-front .ykf-hold-row input[type="number"] { width: 110px; }
.youngo-kbox-front .ykf-hold-check {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	min-width: 0 !important;
	color: var(--yk-dark) !important;
	cursor: pointer;
}
.youngo-kbox-front .ykf-btn-danger {
	background: #fff;
	color: #b91c1c;
	border: 1px solid #fca5a5;
}
.youngo-kbox-front .ykf-btn-danger:hover { background: #fef2f2; }

/* L'opzione "Blocca data" nel form è secondaria rispetto alle altre due. */
.youngo-kbox-front .ykf-pay-option.ykf-pay-hold {
	border-style: dashed;
}

/* Riepilogo importi nel pannello di conferma data bloccata */
.youngo-kbox-front .ykf-hold-recap {
	border-top: 1px dashed #d9d5e5;
	margin-top: 10px;
	padding-top: 10px;
	font-size: 13px;
	color: var(--yk-gray);
	line-height: 1.6;
}
.youngo-kbox-front .ykf-hold-recap strong {
	color: var(--yk-dark);
}
.youngo-kbox-front .ykf-hold-total {
	margin-top: 4px;
	font-size: 14px;
	color: var(--yk-dark);
}
.youngo-kbox-front .ykf-hold-warn {
	color: #b45309;
}