/* Agenda Studio Psicologia. Colori espliciti, per non dipendere dal tema. I tre colori principali li sovrascrive
   uno stile in linea con quelli scelti nelle impostazioni (AGSP_Frontend::color_css). */
.agsp {
	--agsp-navy: #2f5d73;
	--agsp-navy-hover: #284f62;
	--agsp-sky: #9cc3d5;
	--agsp-ink: #1d2733;
	--agsp-muted: #5b6673;
	--agsp-line: #d5dbe1;
	--agsp-field-line: rgba(0, 0, 0, .15);
	--agsp-bg: #f4f7fa;
	--agsp-red: #c8423f;
	--agsp-red-hover: #b93835;
	--agsp-danger: #b3261e;
	width: 100%;
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
	color: var(--agsp-ink);
	font-size: 15px;
	line-height: 1.5;
	box-sizing: border-box;
	container-type: inline-size;
}
.agsp *, .agsp *::before, .agsp *::after { box-sizing: border-box; }
.agsp [hidden] { display: none !important; }

.agsp button, .agsp input, .agsp select, .agsp textarea {
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
}

/* Il tema mette 10px di margine sopra a ogni <button>: lo azzero, altrimenti le celle si sfalsano e si spreca spazio */
.agsp button,
.agsp .agsp-day, .agsp .agsp-slot, .agsp .agsp-toggle, .agsp .agsp-btn { margin: 0; }

/* Solo per screen reader */
.agsp-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Scelta iniziale */
.agsp-toggles { display: flex; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
.agsp .agsp-toggle {
	flex: 1 1 160px;
	padding: 10px 14px;
	border: 2px solid var(--agsp-navy);
	border-radius: 6px;
	background: #fff;
	color: var(--agsp-navy);
	font-weight: 700;
	cursor: pointer;
}
.agsp .agsp-toggle:hover { background: var(--agsp-bg); color: var(--agsp-navy); }
.agsp .agsp-toggle[aria-pressed="true"],
.agsp .agsp-toggle[aria-pressed="true"]:hover { background: var(--agsp-navy); color: #fff; }

/* Pannelli */
.agsp-panel {
	padding: 18px;
	background: #fff;
	border: 1px solid var(--agsp-line);
	border-radius: 8px;
}
.agsp-lead { margin: 0 0 14px; color: var(--agsp-ink); font-size: 14px; }
.agsp .agsp-step,
.agsp .agsp-title {
	margin: 0 0 8px;
	color: var(--agsp-navy);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: none;
	letter-spacing: normal;
}
.agsp .agsp-title { font-size: 20px; margin-bottom: 12px; }

/* Giorni a sinistra, orari a destra: solo se il riquadro e' abbastanza largo, altrimenti uno sotto l'altro */
.agsp-picker { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@container (min-width: 520px) {
	.agsp-picker { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
}

/* Calendario a settimane: una riga per settimana, da lunedi' a sabato */
.agsp-days { display: grid; grid-template-columns: repeat(var(--agsp-cols, 6), minmax(0, 1fr)); gap: 4px; }
.agsp-dow { padding-bottom: 2px; text-align: center; font-size: 11px; letter-spacing: .03em; text-transform: uppercase; color: var(--agsp-muted); }
.agsp-day-empty { min-height: 40px; }
.agsp .agsp-day {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 3px 0;
	border: 1px solid var(--agsp-line);
	border-radius: 5px;
	background: #fff;
	color: var(--agsp-navy);
	cursor: pointer;
	line-height: 1;
}
.agsp-day-n { font-size: 14px; font-weight: 700; }
.agsp-day-m { margin-top: 1px; font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: var(--agsp-muted); }
.agsp .agsp-day:hover { background: var(--agsp-bg); border-color: var(--agsp-navy); color: var(--agsp-navy); }

/* Giorno senza orari liberi: rosso, senza scritte */
.agsp .agsp-day-full { background: var(--agsp-red); border-color: var(--agsp-red); color: #fff; }
.agsp .agsp-day-full .agsp-day-m { color: rgba(255, 255, 255, .85); }
.agsp .agsp-day-full:hover { background: var(--agsp-red-hover); border-color: var(--agsp-red-hover); color: #fff; }

/* Giorno scelto (vince sul rosso) */
.agsp .agsp-day[aria-pressed="true"],
.agsp .agsp-day[aria-pressed="true"]:hover { background: var(--agsp-navy); border-color: var(--agsp-navy); color: #fff; }
.agsp .agsp-day[aria-pressed="true"] .agsp-day-m { color: var(--agsp-sky); }

/* Orari */
.agsp-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 5px; align-items: start; }
.agsp .agsp-slot {
	display: block;
	padding: 6px 2px;
	border: 1px solid var(--agsp-navy);
	border-radius: 5px;
	background: #fff;
	color: var(--agsp-navy);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
}
.agsp button.agsp-slot:hover { background: var(--agsp-bg); color: var(--agsp-navy); }
.agsp .agsp-slot[aria-pressed="true"],
.agsp .agsp-slot[aria-pressed="true"]:hover { background: var(--agsp-navy); color: #fff; }

/* Orario occupato: rosso, non si puo' scegliere */
.agsp .agsp-slot-busy {
	border-color: var(--agsp-red);
	background: var(--agsp-red);
	color: #fff;
	cursor: not-allowed;
}
.agsp-note, .agsp-hint { display: block; margin: 6px 0 0; color: var(--agsp-muted); font-size: 12px; }

/* Modulo: stesso aspetto di quello di Contattami (segnaposto, campi affiancati, pulsante blu), ma piu' compatto */
.agsp-form { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--agsp-line); }
.agsp-form-info { margin-top: 0; padding-top: 0; border-top: 0; }
.agsp-summary { margin: 0 0 12px; padding: 8px 12px; background: var(--agsp-bg); border-left: 4px solid var(--agsp-navy); border-radius: 4px; color: var(--agsp-navy); font-size: 14px; }
.agsp-field { position: relative; margin: 0 0 8px; }
.agsp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.agsp .agsp-field input,
.agsp .agsp-field select,
.agsp .agsp-field textarea {
	display: block;
	width: 100%;
	height: 44px;
	padding: 13px 12px 12px;
	border: 1px solid var(--agsp-field-line);
	border-radius: 0;
	background-color: #fff;
	color: #444;
	font-family: "Open Sans", sans-serif;
	font-size: 13px;
	line-height: 1.2;
	box-shadow: none;
}
.agsp .agsp-field textarea { height: 92px; padding: 12px; line-height: 1.5; resize: vertical; }
.agsp .agsp-field ::placeholder { color: #888; opacity: 1; }
.agsp .agsp-field select {
	padding-right: 52px;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%23888888' stroke-width='2'/></svg>");
	background-repeat: no-repeat;
	background-position: right 20px center;
}
.agsp .agsp-field select:invalid { color: #888; }
.agsp .agsp-field select option { color: #444; }

/* Online / in presenza: affiancati */
.agsp-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 10px; padding: 0; border: 0; }
.agsp-modes legend { padding: 0; margin: 0 0 6px; color: var(--agsp-navy); font-size: 14px; font-weight: 600; }
.agsp-radio { position: relative; margin: 0; }
.agsp-radio input { position: absolute; opacity: 0; }
.agsp-radio label {
	display: block;
	height: 100%;
	padding: 8px 10px 8px 34px;
	border: 1px solid var(--agsp-line);
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.3;
	cursor: pointer;
	position: relative;
}
.agsp-radio label::before {
	content: "";
	position: absolute;
	left: 10px; top: 11px;
	width: 16px; height: 16px;
	border: 2px solid var(--agsp-navy);
	border-radius: 50%;
	background: #fff;
}
.agsp-radio input:checked + label { border-color: var(--agsp-navy); background: var(--agsp-bg); }
.agsp-radio input:checked + label::before { background: radial-gradient(var(--agsp-navy) 45%, #fff 50%); }
.agsp-radio label span { display: block; color: var(--agsp-muted); font-size: 12px; }

.agsp-consent { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 10px; color: #666; font-size: 12px; }
.agsp-consent input { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; accent-color: var(--agsp-navy); }
.agsp-consent a { color: var(--agsp-navy); text-decoration: underline; }

/* Campo trappola: fuori schermo, non display:none (alcuni bot lo saltano) */
.agsp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Bottoni: come INVIA di Contattami */
.agsp .agsp-btn {
	display: inline-block;
	padding: 10px 18px;
	border: 2px solid var(--agsp-navy);
	border-radius: 3px;
	background: var(--agsp-navy);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
}
.agsp .agsp-btn:hover { background: var(--agsp-navy-hover); border-color: var(--agsp-navy-hover); color: #fff; }
.agsp .agsp-btn[disabled] { opacity: .6; cursor: wait; }
.agsp .agsp-btn-ghost { background: #fff; color: var(--agsp-navy); }
.agsp .agsp-btn-ghost:hover { background: var(--agsp-bg); color: var(--agsp-navy); }
.agsp .agsp-btn-danger { background: var(--agsp-danger); border-color: var(--agsp-danger); }
.agsp .agsp-btn-danger:hover { background: #8e1d17; border-color: #8e1d17; }
.agsp-link { margin-left: 14px; color: var(--agsp-navy); text-decoration: underline; }
.agsp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 0; }

.agsp-status { margin: 0 0 10px; color: var(--agsp-danger); font-weight: 600; }
.agsp-status:empty { display: none; }
.agsp-warn { padding: 8px 12px; background: #fdf1e3; border-radius: 6px; color: #7a4100; }
.agsp-empty { padding: 14px; background: var(--agsp-bg); border-radius: 6px; grid-column: 1 / -1; }
.agsp-empty p { margin: 0 0 10px; }
.agsp-loading { color: var(--agsp-muted); }

/* Riepilogo */
.agsp-recap { display: grid; grid-template-columns: 90px 1fr; gap: 8px 12px; margin: 0 0 16px; padding: 14px; background: var(--agsp-bg); border-radius: 6px; }
.agsp-recap dt { color: var(--agsp-muted); font-size: 14px; }
.agsp-recap dd { margin: 0; color: var(--agsp-navy); font-weight: 600; word-break: break-word; }
.agsp-confirm { margin-top: 14px; padding: 14px; background: var(--agsp-bg); border-radius: 6px; }
.agsp-confirm p { margin: 0 0 10px; font-weight: 600; }
.agsp-confirm .agsp-btn { margin-right: 8px; }

/* Focus ben visibile */
.agsp button:focus-visible, .agsp a:focus-visible, .agsp input:focus-visible, .agsp select:focus-visible, .agsp textarea:focus-visible {
	outline: 3px solid var(--agsp-navy);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--agsp-sky);
}
.agsp-radio input:focus-visible + label { outline: 3px solid var(--agsp-navy); outline-offset: 2px; }

@container (max-width: 420px) {
	.agsp-panel { padding: 14px; }
	.agsp-recap { grid-template-columns: 1fr; gap: 2px; }
	.agsp-recap dd { margin-bottom: 10px; }
	.agsp-modes { grid-template-columns: 1fr; }
}
@container (max-width: 380px) {
	.agsp-row { grid-template-columns: 1fr; gap: 0; }
}
/* 16px evita lo zoom automatico di iOS quando si tocca un campo */
@media (max-width: 520px) {
	.agsp .agsp-field input, .agsp .agsp-field select, .agsp .agsp-field textarea { font-size: 16px; }
}

/* Finestra a altezza fissa a tutte le larghezze: il contenuto scorre dentro la finestra, la pagina non si allunga.
   L'altezza si cambia con --agsp-h (640px di default); sui telefoni non supera l'88% dell'altezza visibile. */
.agsp { display: flex; flex-direction: column; height: var(--agsp-h, 640px); min-height: 420px; }
@media (max-width: 767px) { .agsp { height: min(var(--agsp-h, 640px), 88vh); } }
.agsp-toggles { flex: 0 0 auto; }
.agsp-panels { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.agsp-panel, .agsp > .agsp-panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }

/* Altezza libera ([agsp_booking height="auto"]): la finestra cresce col contenuto */
.agsp.agsp-auto { height: auto; min-height: 0; }
@media (max-width: 767px) { .agsp.agsp-auto { height: auto; } }

@media (prefers-reduced-motion: reduce) {
	.agsp * { scroll-behavior: auto !important; }
}