/**
 * GDO Webinar — stile front-end (palette brand GDO Family).
 * Classi tutte prefissate .gdo-webinar- per non interferire col tema (§10.7).
 */

.gdo-webinar-container {
	/* Come il container del tema Newspaper (.td-container, 1114px):
	   la pagina webinar riempie la stessa larghezza dell'header. */
	max-width: 1114px;
	margin: 0 auto;
	padding: 24px 16px;
	font-family: Verdana, "Segoe UI", sans-serif;
	color: #222222;
}

/* I campi del form restano a larghezza leggibile anche nel container largo. */
.gdo-webinar-form {
	max-width: 680px;
}

.gdo-webinar-thumb img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
	margin-bottom: 20px;
}

/* Pulsanti "Aggiungi al calendario" (watch countdown + conferma iscrizione). */
.gdo-webinar-calendar {
	margin: 20px 0 0;
	font-size: 14px;
	color: #767676;
}

.gdo-webinar-calendar span {
	display: block;
	margin-bottom: 8px;
}

.gdo-webinar-calendar a {
	display: inline-block;
	margin: 0 6px 6px 0;
	padding: 6px 16px;
	border: 1px solid #4DB2EC;
	border-radius: 3px;
	color: #4DB2EC;
	font-weight: 600;
	text-decoration: none;
}

.gdo-webinar-calendar a:hover {
	background: #4DB2EC;
	color: #ffffff;
}

/* Archivio /webinar/: griglia schede, futuri in alto + sezione "Rivedi". */
.gdo-webinar-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
	margin: 0 0 32px;
}

.gdo-webinar-card {
	display: block;
	border: 1px solid #EDEDED;
	border-radius: 4px;
	overflow: hidden;
	text-decoration: none;
	background: #ffffff;
}

.gdo-webinar-card-thumb img {
	display: block;
	width: 100%;
	height: auto;
}

.gdo-webinar-card-title {
	display: block;
	font-family: Roboto, Arial, sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.3;
	color: #222222;
	margin: 14px 16px 6px;
}

.gdo-webinar-card:hover .gdo-webinar-card-title {
	color: #4DB2EC;
}

.gdo-webinar-card-relatore {
	display: block;
	font-size: 14px;
	color: #222222;
	margin: 0 16px 4px;
}

.gdo-webinar-card-date {
	display: block;
	font-size: 13px;
	color: #767676;
	margin: 0 16px 16px;
}

.gdo-webinar-rivedi {
	font-family: Roboto, Arial, sans-serif;
	font-weight: 700;
	font-size: 22px;
	color: #222222;
	border-top: 1px solid #EDEDED;
	padding-top: 28px;
	margin: 8px 0 20px;
}

/* Descrizione del webinar (campo testo dell'editor) sopra il form. */
.gdo-webinar-descrizione {
	margin: 0 0 28px;
}

.gdo-webinar-descrizione img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

.gdo-webinar-title {
	font-family: Roboto, Arial, sans-serif;
	font-weight: 700;
	font-size: 28px;
	line-height: 1.25;
	color: #222222;
	margin: 0 0 8px;
}

.gdo-webinar-datetime {
	color: #767676;
	font-size: 14px;
	margin: 0 0 24px;
}

/* Hero pagina d'iscrizione: copertina a sinistra, riquadro data/relatori a
 * destra (alto quanto l'immagine). Il contenuto dell'editor va sotto. */
.gdo-webinar-hero {
	display: flex;
	gap: 20px;
	align-items: stretch;
	margin: 30px 0 28px;
}

.gdo-webinar-hero-media {
	flex: 0 0 40%;
	max-width: 40%;
}

.gdo-webinar-hero-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}

.gdo-webinar-hero-meta {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 28px;
	background: #EDEDED;
	border-radius: 4px;
	padding: 22px 26px;
}

.gdo-webinar-hero-label {
	display: block;
	font-family: Roboto, Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #767676;
	margin-bottom: 5px;
}

.gdo-webinar-hero-value {
	display: block;
	font-size: 16px;
	line-height: 1.4;
	color: #222222;
}

/* Titoletto sopra il form ("Iscriviti per assistere al webinar"). */
.gdo-webinar-form-heading {
	font-family: Roboto, Arial, sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 1.3;
	color: #222222;
	margin: 32px 0 20px;
}

/* Su schermi stretti il riquadro scende sotto l'immagine, a tutta larghezza. */
@media (max-width: 640px) {
	.gdo-webinar-hero {
		flex-direction: column;
	}

	.gdo-webinar-hero-media,
	.gdo-webinar-hero-meta {
		flex-basis: auto;
		max-width: 100%;
	}
}

.gdo-webinar-notice {
	background: #EDEDED;
	border-left: 3px solid #CC2229;
	padding: 10px 14px;
	font-size: 14px;
	margin-bottom: 20px;
}

.gdo-webinar-banner {
	background: #4DB2EC;
	color: #FFFFFF;
	padding: 12px 16px;
	border-radius: 3px;
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 20px;
	text-align: center;
}

.gdo-webinar-field {
	margin: 0 0 16px;
}

.gdo-webinar-field label {
	display: block;
	font-size: 14px;
	margin-bottom: 6px;
}

.gdo-webinar-field input[type="text"],
.gdo-webinar-field input[type="email"] {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid #EDEDED;
	border-radius: 3px;
	font-size: 15px;
	font-family: inherit;
}

.gdo-webinar-field input:focus {
	outline: none;
	border-color: #4DB2EC;
}

.gdo-webinar-consenso label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	color: #767676;
}

.gdo-webinar-consenso a {
	color: #4DB2EC;
}

/* Honeypot: nascosto agli umani, presente per i bot. */
.gdo-webinar-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.gdo-webinar-submit button {
	background: #CC2229;
	color: #FFFFFF;
	font-family: "Open Sans", Arial, sans-serif;
	font-weight: 600;
	font-size: 15px;
	padding: 12px 28px;
	border: none;
	border-radius: 3px;
	cursor: pointer;
}

.gdo-webinar-submit button:hover {
	background: #A81B22;
}

.gdo-webinar-submit button:disabled {
	opacity: 0.6;
	cursor: default;
}

.gdo-webinar-error {
	color: #CC2229;
	font-size: 14px;
	margin-top: 12px;
}

.gdo-webinar-conferma {
	background: #EDEDED;
	border-radius: 4px;
	padding: 24px;
	text-align: center;
}

.gdo-webinar-conferma-titolo {
	font-family: Roboto, Arial, sans-serif;
	font-weight: 700;
	color: #222222;
	margin: 0 0 10px;
}

.gdo-webinar-conferma-testo {
	color: #222222;
	font-size: 15px;
	margin: 0;
}

/* Pagina-watch */
.gdo-webinar-countdown {
	background: #EDEDED;
	border-radius: 4px;
	padding: 28px 20px;
	text-align: center;
	margin-bottom: 20px;
}

.gdo-webinar-countdown-label {
	color: #767676;
	font-size: 14px;
	margin: 0 0 8px;
}

.gdo-webinar-countdown-timer {
	font-family: Roboto, Arial, sans-serif;
	font-weight: 700;
	font-size: 34px;
	color: #222222;
	margin: 0 0 8px;
	font-variant-numeric: tabular-nums;
}

.gdo-webinar-countdown-hint {
	color: #767676;
	font-size: 13px;
	margin: 0;
}

.gdo-webinar-embed {
	position: relative;
}

/* Rende gli iframe embed responsive (16:9) senza toccare il markup del provider. */
.gdo-webinar-embed iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

.gdo-webinar-embed-empty {
	background: #EDEDED;
	border-radius: 4px;
	padding: 40px 20px;
	text-align: center;
	color: #767676;
}

/* --------------------------------------------------------------------------
 * Protezione dal "bleed" del tema (§10.7). Alcuni temi/Elementor impongono ai
 * titoli e ai campi del form colori propri con specificità alta (titolo bianco
 * su fondo chiaro, input con sfondo nero, label invisibili). Qui rimettiamo
 * colori leggibili, agganciati al container del plugin e con !important solo
 * sulle proprietà critiche: la pagina resta leggibile su qualunque sito senza
 * toccare markup né logica d'iscrizione.
 * ------------------------------------------------------------------------ */
.gdo-webinar-container .gdo-webinar-title {
	color: #222222 !important;
}

.gdo-webinar-container .gdo-webinar-field label {
	color: #222222 !important;
}

.gdo-webinar-container .gdo-webinar-field input[type="text"],
.gdo-webinar-container .gdo-webinar-field input[type="email"] {
	background-color: #ffffff !important;
	color: #222222 !important;
	border: 1px solid #cccccc !important;
}

.gdo-webinar-container .gdo-webinar-field input::placeholder {
	color: #999999 !important;
	opacity: 1;
}

.gdo-webinar-container .gdo-webinar-consenso label {
	color: #555555 !important;
}

.gdo-webinar-container .gdo-webinar-consenso a {
	color: #4DB2EC !important;
}

.gdo-webinar-container .gdo-webinar-form-heading,
.gdo-webinar-container .gdo-webinar-hero-value {
	color: #222222 !important;
}

.gdo-webinar-container .gdo-webinar-hero-label {
	color: #767676 !important;
}