/* -- custom css for file 2_add_program_fb.html -- */

/* -- title -- */
#title-o-26374 {
	left: 0px;
}

/* -- page-content : fond clair, on laisse respirer les cartes -- */
#obj-26377 {
	background-color: rgb(238, 237, 247);
}

/* ============================================================
   Redesign "Add event" : formulaire regroupe en cartes claires
   (presentation uniquement — aucun champ/attribut fonctionnel
   n'est modifie). Chaque section = une carte blanche avec titre.
   ============================================================ */

/* Le <form> ne fait plus carte lui-meme : ce sont les .prog-card qui le font. */
#form-28370.list {
	font-size: 17px;
	background: transparent;
	margin: 0;
}
#form-28370.list::before,
#form-28370.list::after {
	display: none;
}

/* Conteneur general : padding lateral + espace en bas pour le bouton submit. */
.prog-form {
	padding: 12px 12px calc(24px + env(safe-area-inset-bottom));
}

/* ---- Carte de section ---- */
.prog-card {
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 2px 10px rgba(31, 27, 70, 0.07);
	margin: 0 0 16px;
	overflow: hidden;
}

/* ---- Titre de section ---- */
.prog-card-title {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 16px 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #6b6796;
}
.prog-card-title i.f7-icons {
	font-size: 18px;
	color: #b6a200; /* rappel du jaune festival, version sobre */
}

/* ---- Liste interne : neutralise le chrome Framework7 (hairlines, fond) ---- */
.prog-card .prog-list {
	margin: 0;
	background: transparent;
	list-style: none;
	padding: 0;
}
.prog-card .prog-list::before,
.prog-card .prog-list::after {
	display: none;
}
/* Le framework force padding-left/right:16px !important sur .item-inner, ce qui
   doublait l'inset (item-content + item-inner) et rognait la largeur des champs.
   On neutralise tout le padding lateral pour que chaque input occupe la pleine
   largeur de la carte (l'air autour vient deja de .prog-form). */
.prog-card .prog-list .item-content {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.prog-card .prog-list .item-inner,
.prog-card .prog-list .item-inner-switch {
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-top: 8px;
	padding-bottom: 8px;
}
/* Hairline fine entre deux lignes d'une meme carte, pas sur la derniere. */
.prog-card .prog-list .item-content:not(:last-child) .item-inner::after,
.prog-card .prog-list .item-content:not(:last-child) .item-inner-switch::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: rgba(31, 27, 70, 0.07);
}

/* ---- Libelles de champ ---- */
.prog-card .item-title.item-label,
.prog-card .item-title.item-label-switch {
	color: #1f1b46;
	font-weight: 600;
	font-size: 14px;
}

/* ---- Champs texte / date / select : look "input rempli" ---- */
.prog-card .item-input-wrap input,
.prog-card .item-input-wrap select {
	margin-top: 6px;
	background: #f4f3fb;
	border-radius: 10px;
	padding: 11px 12px;
	font-size: 16px;
	color: #1f1b46;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid transparent;
	transition: border-color .15s, background .15s;
}
.prog-card .item-input-wrap input:focus,
.prog-card .item-input-wrap select:focus {
	background: #ffffff;
	border-color: #d9c400;
	outline: none;
}
.prog-card .item-input-wrap input::placeholder {
	color: #a09cc0;
}
.prog-card .input-dropdown-wrap::after {
	color: #6b6796;
}

/* ---- Editeur de texte (Content) ---- */
.prog-card .text-editor {
	margin-top: 6px;
	background: #f4f3fb;
	border-radius: 10px;
}
.prog-card .text-editor .text-editor-content {
	min-height: 110px;
	padding: 12px;
	font-size: 16px;
	color: #1f1b46;
}

/* ---- Lignes a toggle (Type of event) ---- */
.prog-card .item-inner-switch {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.prog-card .item-inner-switch .item-input {
	margin-top: 0;
}

/* ---- Bouton d'action attache a une carte ("Add a new ...") ---- */
.prog-card-action {
	padding: 4px 16px 16px;
}
.prog-add-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 42px;
	border-radius: 10px;
	border: 1.5px dashed #c9b400;
	background: #fffceb;
	color: #6b5e00;
	font-weight: 600;
	font-size: 15px;
	text-transform: none;
}
.prog-add-btn i.f7-icons {
	font-size: 19px;
	color: #c9a700;
}
.prog-add-btn:active {
	background: #fdf6c9;
}

/* ---- Bloc image (Poster) ---- */
.prog-card .item-image-large .item-input-info {
	color: #6b6796;
	font-size: 13px;
	margin-bottom: 10px;
}
.prog-card .firebase_document_preview {
	border-radius: 12px;
}

/* ---- Ligne Kids friendly : libelle + courte explication, toggle a droite ---- */
.prog-card .prog-switch-label {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.prog-card .prog-switch-hint {
	font-size: 12px;
	font-weight: 400;
	color: #6b6796;
}

/* ---- Champs techniques caches : on garde hidden, mais on s'assure de l'invisibilite ---- */
.prog-hidden-fields {
	margin: 0;
	padding: 0;
	list-style: none;
}
.prog-hidden-fields::before,
.prog-hidden-fields::after {
	display: none;
}

/* ---- Bouton Submit : pleine largeur, bien visible ---- */
.prog-submit-block {
	margin: 8px 0 0;
	padding: 0;
}
.prog-submit-block .button {
	height: 50px;
	border-radius: 12px;
	font-size: 17px;
	font-weight: 700;
	box-shadow: 0 4px 12px rgba(217, 196, 0, 0.35);
}