/*
 * MyBoxOffice — Pulsante "Aggiungi al Calendario".
 *
 * Ogni proprietà VISIVA passa da una var(--mybo-cal-*) impostata dalla pagina
 * Personalizza. I valori di ripiego servono solo se le variabili mancano.
 * Restano fissi solo posizionamento e apri/chiudi: sono comportamento.
 */

.mybo-calendar {
	position: relative;
	display: inline-block;
	margin: var(--mybo-cal-margin, 16px 0);
}

.mybo-calendar__button {
	display: inline-flex;
	align-items: center;
	gap: var(--mybo-cal-gap, 8px);
	cursor: pointer;
	background: var(--mybo-cal-bg, #f19300);
	color: var(--mybo-cal-color, #ffffff);
	border: var(--mybo-cal-border-width, 0) solid var(--mybo-cal-border-color, transparent);
	border-radius: var(--mybo-cal-radius, 6px);
	padding: var(--mybo-cal-padding-v, 12px) var(--mybo-cal-padding-h, 20px);
	font-family: var(--mybo-font-body, inherit);
	font-size: var(--mybo-cal-font-size, 16px);
	font-weight: var(--mybo-cal-font-weight, 600);
	line-height: var(--mybo-cal-line-height, 1.2);
	transition: background .15s ease;
}

.mybo-calendar__button:hover,
.mybo-calendar__button:focus-visible {
	background: var(--mybo-cal-bg-hover, #d98200);
}

.mybo-calendar__panel {
	position: absolute;
	z-index: 999;
	top: calc(100% + var(--mybo-cal-panel-offset, 6px));
	left: 0;
	min-width: var(--mybo-cal-panel-min-width, 240px);
	background: var(--mybo-cal-panel-bg, #ffffff);
	border: var(--mybo-cal-panel-border-width, 1px) solid var(--mybo-cal-panel-border-color, #e0e0e0);
	border-radius: var(--mybo-cal-panel-radius, 8px);
	box-shadow: var(--mybo-cal-panel-shadow, 0 6px 24px rgba(0, 0, 0, .15));
	padding: var(--mybo-cal-panel-padding, 6px);
	overflow: hidden;
}

.mybo-calendar__panel[hidden] {
	display: none;
}

.mybo-calendar__option {
	display: flex;
	align-items: center;
	gap: var(--mybo-cal-option-gap, 10px);
	padding: var(--mybo-cal-option-padding, 10px 12px);
	border-radius: var(--mybo-cal-option-radius, 5px);
	color: var(--mybo-cal-option-color, #222222);
	font-size: var(--mybo-cal-option-font-size, 15px);
	text-decoration: none;
}

.mybo-calendar__option:hover,
.mybo-calendar__option:focus-visible {
	background: var(--mybo-cal-option-bg-hover, #f5f5f5);
	color: var(--mybo-cal-option-color-hover, #000000);
}

/*
 * Su schermi stretti il pannellino non è una tendina ma un pannello che sale
 * dal basso a tutta larghezza: le voci di un menù a tendina sono troppo
 * piccole per il pollice. Queste sono regole STRUTTURALI, non stilistiche.
 */
@media (max-width: 600px) {
	.mybo-calendar__panel {
		position: fixed;
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		min-width: 0;
		border-radius: var(--mybo-cal-panel-radius, 8px) var(--mybo-cal-panel-radius, 8px) 0 0;
	}

	.mybo-calendar__option {
		/* NON un secondo padding qui: --mybo-cal-option-padding è nello schema
		   Personalizza (mybo_customize_schema(), gruppo calendar_button), quindi
		   mybo_customize_inject_css() la emette SEMPRE in :root, anche a valori
		   di default — e una custom property definita vince sempre su var(...,
		   ripiego), pure dentro una media query: il ripiego "16px 18px" che stava
		   qui prima non poteva più scattare, era già morto (regressione trovata
		   in revisione 2026-07-27). La spaziatura resta quindi un solo campo,
		   uguale su ogni device, controllato dall'admin.
		   Il bersaglio comodo per il pollice lo garantiamo separatamente sotto,
		   come soglia di ACCESSIBILITÀ (min 44px, WCAG target size) e non come
		   valore estetico: per questo resta fisso e non passa da una var. */
		min-height: 44px;
		box-sizing: border-box;
	}
}

/* ── Riquadro di iscrizione al calendario ───────────────────────────── */

.mybo-calsub {
	margin: var(--mybo-calsub-margin, 24px 0);
	padding: var(--mybo-calsub-padding, 20px);
	background: var(--mybo-calsub-bg, #f7f7f7);
	border: var(--mybo-calsub-border-width, 1px) solid var(--mybo-calsub-border-color, #e0e0e0);
	border-radius: var(--mybo-calsub-radius, 8px);
}

.mybo-calsub__title {
	font-size: var(--mybo-calsub-title-size, 18px);
	font-weight: var(--mybo-calsub-title-weight, 700);
	color: var(--mybo-calsub-title-color, #222222);
	margin-bottom: var(--mybo-calsub-title-margin, 8px);
}

.mybo-calsub__intro,
.mybo-calsub__manual,
.mybo-calsub__warning {
	font-size: var(--mybo-calsub-text-size, 14px);
	color: var(--mybo-calsub-text-color, #555555);
	margin: var(--mybo-calsub-text-margin, 0 0 12px);
}

.mybo-calsub__warning {
	color: var(--mybo-calsub-warning-color, #8a5a00);
}

.mybo-calsub__button {
	display: inline-flex;
	align-items: center;
	gap: var(--mybo-calsub-button-gap, 8px);
	text-decoration: none;
	background: var(--mybo-cal-bg, #f19300);
	color: var(--mybo-cal-color, #ffffff);
	border-radius: var(--mybo-cal-radius, 6px);
	padding: var(--mybo-cal-padding-v, 12px) var(--mybo-cal-padding-h, 20px);
	font-size: var(--mybo-cal-font-size, 16px);
	font-weight: var(--mybo-cal-font-weight, 600);
	margin-bottom: var(--mybo-calsub-button-margin, 12px);
}

.mybo-calsub__button:hover,
.mybo-calsub__button:focus-visible {
	background: var(--mybo-cal-bg-hover, #d98200);
}

.mybo-calsub__url {
	width: 100%;
	box-sizing: border-box;
	padding: var(--mybo-calsub-url-padding, 10px 12px);
	font-family: monospace;
	font-size: var(--mybo-calsub-url-size, 13px);
	color: var(--mybo-calsub-url-color, #333333);
	background: var(--mybo-calsub-url-bg, #ffffff);
	border: var(--mybo-calsub-border-width, 1px) solid var(--mybo-calsub-border-color, #e0e0e0);
	border-radius: var(--mybo-calsub-radius, 8px);
}