/* Millores d'us: formularis d'inscripcio comodes al mobil, contacte rapid i formulari de contacte. */

/* ---------- Formulari d'inscripcio ---------- */
#cursos .form-control,
.fdd-contacte .form-control {
	min-height: 44px;
	font-size: 16px;            /* amb menys de 16 px l'iPhone fa zoom en tocar el camp */
	color: #222;
}
#cursos .btn,
.fdd-contacte .btn,
#contacto .btn {
	min-height: 44px;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 16px;
}
.fdd-ins-camps {
	display: -webkit-box; display: -ms-flexbox; display: flex;
	-ms-flex-wrap: wrap; flex-wrap: wrap;
	gap: 10px 12px;
	width: 80%;
	margin: 0 auto 10px;
	text-align: left;
}
.fdd-ins-camp { -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; min-width: 0; }
.fdd-ins-camp.fdd-nom { -ms-flex: 3 1 220px; flex: 3 1 220px; }
.fdd-ins-camp.fdd-edat { -ms-flex: 1 1 90px; flex: 1 1 90px; }
.fdd-ins-camp label,
.fdd-contacte label {
	display: block;
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 600;
	color: #333;
}
.fdd-ins-camp .form-control,
#cursos select.form-control.fdd-sel { width: 100% !important; display: block !important; }
#cursos select.form-control.fdd-sel { margin: 0; }
.fdd-ins-camp [aria-invalid="true"],
.fdd-contacte [aria-invalid="true"] { border-color: #b42318; box-shadow: 0 0 0 2px rgba(180, 35, 24, .15); }
.fdd-ins-error {
	width: 80%;
	margin: 10px auto 0;
	padding: 10px 12px;
	border-radius: 4px;
	background: #fdeceb;
	color: #8f1c13;
	font-size: 15px;
	text-align: left;
}
.fdd-ins-error:empty { display: none; }
/* Casella de proteccio de dades del formulari d'inscripcio. */
.fdd-ins-priv {
	width: 80%;
	margin: 14px auto;
	text-align: left;
	color: #333;
}
.fdd-ins-priv input[aria-invalid="true"] { outline: 2px solid #b42318; outline-offset: 2px; }
@media (max-width: 767px) {
	.fdd-ins-camps, .fdd-ins-error, .fdd-ins-priv { width: 100%; }
	#cursos .btn[id^="btn_alta_"] { width: 100%; }
	.navbar-nav > li > a { padding-top: 12px; padding-bottom: 12px; }
}

/* ---------- Contacte rapid (nomes al mobil) ---------- */
.contacte-rapid { display: none; }
@media (max-width: 767px) {
	.contacte-rapid {
		display: -webkit-box; display: -ms-flexbox; display: flex;
		-webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column;
		gap: 12px;
		position: fixed;
		right: 14px;
		bottom: 14px;
		z-index: 1500;          /* per sota de l'avis de cookies (2000) */
	}
	.contacte-rapid a {
		display: -webkit-box; display: -ms-flexbox; display: flex;
		-webkit-box-align: center; -ms-flex-align: center; align-items: center;
		-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
		width: 54px;
		height: 54px;
		border-radius: 50%;
		color: #fff;
		font-size: 26px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
	}
	.contacte-rapid a:focus { outline: 3px solid #111; outline-offset: 2px; }
	.contacte-rapid .cr-whatsapp { background: #128c4b; }
	.contacte-rapid .cr-tel { background: #c2007b; }
	/* Mentre l'avis de cookies es a la vista, els botons no el tapen. */
	body.fdd-galetes-obert .contacte-rapid { display: none; }
}

/* ---------- Formulari de contacte ---------- */
#contacto address a { color: inherit; text-decoration: underline; }
.fdd-contacte {
	max-width: 560px;
	margin: 10px auto 30px;
	padding: 20px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 6px;
	text-align: left;
}
.fdd-camp { margin-bottom: 12px; }
.fdd-contacte textarea.form-control { min-height: 110px; resize: vertical; }
.fdd-parany { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fdd-priv {
	display: -webkit-box; display: -ms-flexbox; display: flex;
	gap: 10px;
	-webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;
	margin: 4px 0 12px;
	font-weight: 400 !important;
	font-size: 14px !important;
	cursor: pointer;
}
.fdd-priv input { -ms-flex: 0 0 22px; flex: 0 0 22px; width: 22px; height: 22px; margin: 1px 0 0; }
.fdd-priv a { text-decoration: underline; }
.fdd-estat { margin: 0 0 12px; padding: 10px 12px; border-radius: 4px; font-size: 15px; }
.fdd-estat:empty { display: none; }
.fdd-estat.fdd-ok { background: #e3f4ea; color: #14613a; }
.fdd-estat.fdd-err { background: #fdeceb; color: #8f1c13; }
.fdd-alt-correu { margin-top: 8px; font-size: 14px; }

/* Avis de proteccio de dades sota el boto: text petit, no un titol. */
#cursos button[id^="btn_alta_"] + p {
	margin: 10px auto 0;
	font-size: 13px !important;
	line-height: 1.45 !important;
	color: #555 !important;
	text-align: left;
}

/* ---------- Encapcalaments ----------
   La pagina te un sol <h1>. Els titols de seccio son <h2> (o <h3>) amb l'aspecte que tenien. */
body h2.fdd-h1,
body h3.fdd-h1,
body p.fdd-h1 {
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 30px;
	font-weight: 200;
	line-height: 1.1;
	color: inherit;
}
body h1.fdd-h3 { margin-top: 20px; font-size: 16px; font-weight: 600; line-height: 1.1; }
.fdd-contacte h3 { margin: 0 0 14px; font-size: 22px; }
.background_content h2 { margin-top: 10px; font-weight: 200; }
body .fdd-h1.m { margin: 15px; }

/* ---------- Imatges: espai reservat i entrada suau ----------
   L'efecte nomes s'aplica si el JavaScript funciona (classe fdd-js a <html>); sense ell, es veuen directament. */
img.fdd-img-mida { height: auto; }
html.fdd-js img.fdd-img { opacity: 0; -webkit-transition: opacity .4s ease; transition: opacity .4s ease; }
html.fdd-js img.fdd-img.fdd-vista { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	html.fdd-js img.fdd-img { opacity: 1; -webkit-transition: none; transition: none; }
}
@media print {
	html.fdd-js img.fdd-img { opacity: 1; }
}