/*
 * Styling for the gd_event front-end add-listing form
 * (/aggiungi-un-evento/). Only ayecode-ui-compatibility.css loads on this
 * page (the site runs GD in "compatibility" mode, not full Bootstrap), so
 * fields/buttons render with generic neutral defaults (grey borders, a
 * stock blue button) rather than the site's own navy/cyan identity. This
 * layers WebCilento branding on top without touching the compatibility
 * base. Scoped to body.geodir-form-gd_event (a GD body class already
 * present only on this form) rather than a page ID, since the add-listing
 * URL carries an extra path segment that defeats is_page() checks - see
 * functions.php for the same finding.
 */
:root {
	--wc-navy: #1A237E;
	--wc-navy-soft: #4a5299;
	--wc-cyan: #00BCD4;
	--wc-cyan-deep: #0092a8;
	--wc-yellow: #FFC107;
	--wc-yellow-ink: #1A237E;
	--wc-line: #e2e5ea;
	--wc-surface-2: #eef1f5;
	--wc-radius: 12px;
	--wc-shadow: 0 1px 2px rgba(26,35,126,.06), 0 10px 28px -14px rgba(26,35,126,.22);
}

body.geodir-form-gd_event .geodir-add-listing {
	max-width: var(--wc-page-width, 1200px);
	margin: 0 auto;
	padding: 2rem clamp(1rem, 4vw, 2.5rem) 3rem;
}
body.geodir-form-gd_event .geodir-add-listing fieldset {
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}

/* Section headings ("I tuoi dati" / "Dettagli dell'evento") - font-family
   aggiunto 2026-09-12 (mancava, ereditava il Karla del body): confronto
   richiesto dall'utente con le pagine "Aggiungi scheda..." (48/1591/1596)
   ha mostrato titoli/etichette in Karla qui contro Rubik lì, e Rubik è la
   convenzione sitewide per i titoli (wizard, tier card, ecc.) - Eventi era
   l'eccezione, allineato invece di lasciare la divergenza. */
body.geodir-form-gd_event .geodir-add-listing h3.h3,
body.geodir-form-gd_event .geodir-add-listing h5#geodir_fieldset_details {
	font-family: 'Rubik', sans-serif;
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--wc-navy);
	margin: 2.5rem 0 1.25rem;
	padding-bottom: .6rem;
	border-bottom: 2px solid var(--wc-surface-2);
}
body.geodir-form-gd_event .geodir-add-listing h3.h3 {
	margin-top: 0;
}

/* Sub-group headers (Cosa segnala / Quando / Dove / Allegati) - real GD
   "fieldset" custom fields inserted to break up the single "Dettagli
   dell'evento" block. Both these and the two outer section titles render
   as h3.h3/h5, each inside its own <fieldset> - the outer two have fixed,
   predictable ids ("your_details"/"details"), so excluding just those two
   isolates the sub-groups without hardcoding the new fields' numeric ids. */
body.geodir-form-gd_event .geodir-add-listing fieldset:not(#geodir_fieldset_your_details):not(#geodir_fieldset_details) > h3.h3 {
	font-family: 'Rubik', sans-serif;
	font-size: .85rem;
	font-weight: 800;
	color: var(--wc-cyan-deep);
	text-transform: uppercase;
	letter-spacing: .05em;
	border-bottom: none;
	border-left: 3px solid var(--wc-cyan-deep);
	padding: .1rem 0 .1rem .65rem;
	margin: 2.25rem 0 1rem;
}

/* Form rows */
body.geodir-form-gd_event .geodir-add-listing .geodir_form_row,
body.geodir-form-gd_event .geodir-add-listing [data-argument] {
	margin-bottom: 1.4rem !important;
	align-items: start;
}
body.geodir-form-gd_event .geodir-add-listing .col-form-label {
	font-family: 'Rubik', sans-serif;
	font-weight: 700;
	color: var(--wc-navy);
	font-size: .95rem;
	padding-top: .55rem;
	white-space: nowrap;
}
/* .text-danger (asterisco "obbligatorio") volutamente NON sovrascritto:
   era ciano qui, rosso di default sulle pagine 48/1591/1596 - confrontato
   con l'utente 2026-09-12, confermato rosso ovunque (convenzione più
   riconoscibile, il ciano è già il colore di link/hover altrove). Rimossa
   la regola invece di lasciarla, per tornare al rosso Bootstrap nativo. */
body.geodir-form-gd_event .geodir-add-listing .form-text {
	font-size: .8rem;
	margin-top: .35rem;
	color: #8890a3 !important;
}

/* Inputs, selects, textareas */
body.geodir-form-gd_event .geodir-add-listing .form-control,
body.geodir-form-gd_event .geodir-add-listing select.geodir_textfield,
body.geodir-form-gd_event .geodir-add-listing .select2-selection,
body.geodir-form-gd_event .geodir-add-listing textarea {
	border: 1.5px solid var(--wc-line) !important;
	border-radius: 8px !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}
body.geodir-form-gd_event .geodir-add-listing .form-control:focus,
body.geodir-form-gd_event .geodir-add-listing .select2-container--focus .select2-selection,
body.geodir-form-gd_event .geodir-add-listing textarea:focus {
	border-color: var(--wc-cyan-deep) !important;
	box-shadow: 0 0 0 3px rgba(0,188,212,.15) !important;
	outline: none;
}

/* "Giornaliero" checkbox */
body.geodir-form-gd_event .geodir-add-listing input[type="checkbox"] {
	width: 1.15em;
	height: 1.15em;
	accent-color: var(--wc-cyan-deep);
	cursor: pointer;
}
body.geodir-form-gd_event .geodir-add-listing .form-check-label,
body.geodir-form-gd_event .geodir-add-listing label[for="all_day"] {
	cursor: pointer;
}
/* La colonna label di "Giornaliero" (e di qualunque futuro campo
   checkbox) arriva vuota dal markup nativo GD - .row è un vero flex
   Bootstrap (confermato misurando le posizioni reali, non un layout
   impilato come sembrava a occhio), col-sm-2/col-sm-10 side by side
   anche a desktop; per i checkbox GD non scrive testo nella colonna
   label (il testo "Giornaliero" è dentro .form-check in col-sm-10) ma
   il placeholder vuoto resta, lasciando ~190px di vuoto ingiustificato
   prima del checkbox. Nessun codice del tema tocca questo campo
   (verificato in inc/*.php) - non è un attributo condizionale da
   correggere lato PHP, solo l'assenza di contenuto in quella colonna.
   Nascosta qui, colonna checkbox portata a piena larghezza. */
body.geodir-form-gd_event .geodir-add-listing .col-sm-2.col-form-label:empty {
	display: none;
}
body.geodir-form-gd_event .geodir-add-listing .col-sm-2.col-form-label:empty + .col-sm-10 {
	flex: 0 0 100%;
	max-width: 100%;
}

/* Category radios rendered as chips (GD wraps each option in a bare
   <span><input>Label text</span> with no <label>, so the click target is
   only the small circle by default; the JS enqueued alongside this file
   forwards a click anywhere on the chip to the input). */
body.geodir-form-gd_event .geodir-add-listing .gd-cats-display-radio {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}
body.geodir-form-gd_event .geodir-add-listing .gd-cats-display-radio span[style*="display:block"] {
	display: inline-flex !important;
	align-items: center;
	gap: .45rem;
	background: #fff;
	border: 1.5px solid var(--wc-line);
	border-radius: 999px;
	padding: .5rem 1rem;
	font-size: .88rem;
	font-weight: 600;
	color: var(--wc-navy-soft);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
body.geodir-form-gd_event .geodir-add-listing .gd-cats-display-radio span[style*="display:block"]:hover {
	border-color: var(--wc-cyan-deep);
	color: var(--wc-cyan-deep);
}
/* Checked-pill highlight is applied via inline styles from gd-add-listing.js,
   not a CSS rule here - see that file for why. */
body.geodir-form-gd_event .geodir-add-listing .gd-cats-display-radio input[type="radio"] {
	accent-color: #fff;
	margin: 0;
}

/* File upload dropzones (Immagini / Locandina / Programma PDF) */
body.geodir-form-gd_event .geodir-add-listing .geodir-add-files {
	border: 2px dashed var(--wc-line) !important;
	border-radius: var(--wc-radius);
	background: var(--wc-surface-2) !important;
	transition: border-color .15s ease, background .15s ease;
}
body.geodir-form-gd_event .geodir-add-listing .geodir-add-files:hover {
	border-color: var(--wc-cyan-deep) !important;
	background: #fff !important;
}
body.geodir-form-gd_event .geodir-add-listing .geodir-dropbox-file-limit:empty {
	display: none;
}

/* Buttons - colore corretto 2026-09-14: qui erano stati fatti navy/
   rettangolo (primo tentativo di uniformarli a .../aggiungi-scheda-.../),
   ma è il verso sbagliato. Il vero standard del sito è il bottone CTA
   giallo a pillola (.wc-action-primary/.wc-btn-block in gd-details.css,
   stesso pattern riusato esplicitamente anche dal wizard e da
   contact-page.css, "Invia richiesta" lì è corretto così com'è, non è
   il caso isolato). Radius/weight restano !important per lo stesso
   motivo tecnico già documentato (Bootstrap vince per ordine sorgente). */
body.geodir-form-gd_event .geodir-add-listing .btn-primary {
	background: var(--wc-yellow) !important;
	border-color: var(--wc-yellow) !important;
	color: var(--wc-yellow-ink) !important;
	font-weight: 700;
	padding: .75rem 1.75rem !important;
	border-radius: 100px !important;
}
body.geodir-form-gd_event .geodir-add-listing .btn-primary:hover {
	filter: brightness(1.05);
	color: var(--wc-yellow-ink) !important;
}
body.geodir-form-gd_event .geodir-add-listing .btn-outline-primary {
	color: var(--wc-navy) !important;
	border-color: var(--wc-line) !important;
	background: #fff !important;
	font-weight: 700;
	padding: .75rem 1.5rem !important;
	border-radius: 100px !important;
	margin-left: .75rem;
}
body.geodir-form-gd_event .geodir-add-listing .btn-outline-primary:hover {
	border-color: var(--wc-cyan-deep) !important;
	color: var(--wc-cyan-deep) !important;
}
body.geodir-form-gd_event .geodir-add-listing #geodir-add-listing-submit {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 2px solid var(--wc-surface-2);
}
/* Pulsanti finali centrati (2026-09-14) — senza una card a delimitare il
   form (rimossa su richiesta esplicita, vedi add-listing-form.css), due
   bottoni piccoli lasciati al bordo sinistro con tutto il resto della
   riga vuoto a destra si leggevano come sbilanciati, non come una scelta
   - più evidente ora che il frame è passato da 900 a 1200px. */
body.geodir-form-gd_event .geodir-add-listing #geodir-add-listing-submit .col-sm-10 {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: .75rem;
}
body.geodir-form-gd_event .geodir-add-listing #geodir-add-listing-submit .btn-outline-primary {
	margin-left: 0;
}

/* Coppie di campi sulla stessa riga (2026-09-14): Nome/Email di contatto,
   Data inizio/fine, Ora inizio/fine — argument name reali confermati
   sull'HTML live (user_login/user_email, event_start_date/event_end_date,
   event_start_time/event_end_time), non indovinati. Nessun grid Bootstrap
   caricato su questa pagina (ayecode-ui-compatibility, non piena
   Bootstrap - vedi nota in testa al file), quindi inline-block sulle
   singole righe .mb-3.row invece di riscrivere il markup: sono già
   sibling diretti nel DOM in quest'ordine, non serve un wrapper nuovo.
   Solo da tablet in su - sotto i campi restano impilati come oggi. */
@media (min-width: 768px) {
	body.geodir-form-gd_event .geodir-add-listing [data-argument="user_login"],
	body.geodir-form-gd_event .geodir-add-listing [data-argument="event_start_date"],
	body.geodir-form-gd_event .geodir-add-listing [data-argument="event_start_time"] {
		display: inline-block;
		width: calc(50% - 12px);
		vertical-align: top;
		margin-right: 24px;
	}
	body.geodir-form-gd_event .geodir-add-listing [data-argument="user_email"],
	body.geodir-form-gd_event .geodir-add-listing [data-argument="event_end_date"],
	body.geodir-form-gd_event .geodir-add-listing [data-argument="event_end_time"] {
		display: inline-block;
		width: calc(50% - 12px);
		vertical-align: top;
	}
}

/* Map / address block */
body.geodir-form-gd_event .geodir-add-listing .geodir_message_note {
	font-size: .8rem;
	color: #8890a3;
	display: block;
	margin-top: .35rem;
}
body.geodir-form-gd_event .geodir-add-listing .gm-style,
body.geodir-form-gd_event .geodir-add-listing [id$="_map_canvas"] {
	border-radius: var(--wc-radius);
	overflow: hidden;
	border: 1.5px solid var(--wc-line);
}

/* GD's "Zona" field is GeoDirectory's own city/neighbourhood sub-location
   feature, unrelated to the site's Macro-Hub grouping - confirmed zero
   rows in wpv0_geodir_post_neighbourhood site-wide, meaning it's never
   actually been used for any listing on any CPT. Hidden here rather than
   just relabeled, since a field with no real options behind it ("No
   matches found" for every city) only adds confusion, not a genuine
   choice. Not touching the sitewide "lm_enable_neighbourhoods" option
   itself, since other CPTs' forms weren't audited.  */
body.geodir-form-gd_event .geodir-add-listing [data-argument="address_neighbourhood"] {
	display: none !important;
}

@media (max-width: 767px) {
	body.geodir-form-gd_event .geodir-add-listing .col-form-label {
		padding-top: 0;
		margin-bottom: .35rem;
	}

	/* Submit/Preview buttons: inline-block at their natural content width
	   with a fixed left margin left them mismatched in width and gap once
	   the label column collapses to full-width above them. */
	body.geodir-form-gd_event .geodir-add-listing #geodir-add-listing-submit .col-sm-10 {
		display: flex;
		flex-direction: column;
		gap: .75rem;
	}
	body.geodir-form-gd_event .geodir-add-listing .btn-primary,
	body.geodir-form-gd_event .geodir-add-listing .btn-outline-primary {
		display: block;
		width: 100%;
		margin-left: 0 !important;
		text-align: center;
	}

	/* "Inserisci l'indirizzo direttamente sulla mappa" is an <input
	   type="button">, not a <button> - its value text doesn't reliably
	   wrap the way a <button>'s content does, so on a narrow screen it
	   just overflowed the box edge instead of clipping or wrapping.
	   Shrinking the font is what actually fixes it (confirmed the text
	   needs ~360px at 16px but the box is ~300px on a 375px viewport);
	   white-space:normal is a no-cost fallback in case a browser does
	   wrap it. */
	body.geodir-form-gd_event .geodir-add-listing #address_set_address_button {
		font-size: .8rem;
		white-space: normal;
		line-height: 1.3;
		padding: .65rem 1rem !important;
	}
}