/**
 * Styling für das Frontend-Formular [hsc_fanfotos_upload] (ab Version
 * 1.24.0) – wird NUR auf Seiten/Beiträgen geladen, die den Shortcode
 * tatsächlich enthalten (siehe VIS_Fanfotos::enqueue_frontend_assets()),
 * bewusst zurückhaltend gestaltet, damit es sich in möglichst viele
 * Theme-Layouts einfügt, statt das Theme-Erscheinungsbild zu überschreiben.
 *
 * Ab Version 1.31.0: alle Ausgaben von render_upload_shortcode() stecken in
 * einem eigenen Wrapper ".vis-fanfoto-seite" mit eigenem Außenabstand und
 * `box-sizing: border-box`, damit die Karte unabhängig vom umgebenden
 * Theme/Seitenaufbau (z. B. Elementor-Abschnitte mit eigenem Hintergrund)
 * zuverlässig zentriert bleibt und nicht seitlich über den Bildschirmrand
 * hinausragt – gemeldet als "auf dem Handy nicht korrekt ausgerichtet".
 *
 * Ab Version 1.32.0: Datei-Auswahl und Absenden-Button deutlich größer und
 * als eigene, markentypisch (schwarz/Vereinsgold) gestaltete Schaltflächen
 * statt der winzigen, nativ vom Betriebssystem gerenderten Datei-Auswahl –
 * auf Nutzerwunsch ("höher und breiter sollten die Upload-Fenster sein").
 * Die eigentliche, sehr große Leerfläche oberhalb des Formulars auf dem
 * gemeldeten Mobil-Screenshot stammt nach aktuellem Stand vermutlich vom
 * umgebenden Seitenaufbau (z. B. eine Elementor-Sektion mit fester
 * Mindesthöhe) statt vom Formular selbst – das kann von hier aus ohne
 * Zugriff auf die Live-Seite nicht geprüft werden, siehe Projekt-Doku.
 */

.vis-fanfoto-seite {
	max-width: 560px;
	margin: 24px auto;
	padding: 0 16px;
	box-sizing: border-box;
}

.vis-fanfoto-seite * {
	box-sizing: border-box;
}

.vis-fanfoto-formular {
	width: 100%;
	padding: 20px 20px 24px;
	border: 1px solid #dcdcde;
	border-radius: 10px;
	background: #fafafa;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.08 );
}

.vis-fanfoto-formular label {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
	font-size: 1.05em;
}

/* Datei-Auswahl ab 1.32.0: deutlich größere, markentypisch gestaltete
   Schaltfläche statt der winzigen, nativ vom Betriebssystem gerenderten
   Variante. `::file-selector-button`/`::-webkit-file-upload-button` stylen
   nur den Button-Teil (die Dateinamen-Anzeige daneben bleibt vom Browser
   vorgegeben) – in aktuellen mobilen Browsern (iOS Safari 15.4+, Chrome)
   funktioniert das zuverlässig. */
.vis-fanfoto-formular input[type="file"] {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 16px 14px;
	font-size: 1em;
	background: #fff;
	border: 1.5px dashed #9b9b9b;
	border-radius: 8px;
}

.vis-fanfoto-formular input[type="file"]::file-selector-button,
.vis-fanfoto-formular input[type="file"]::-webkit-file-upload-button {
	padding: 12px 18px;
	margin-right: 12px;
	border: none;
	border-radius: 6px;
	background: #1a1a1a;
	color: #fff;
	font-weight: 600;
	font-size: 1em;
	cursor: pointer;
}

.vis-fanfoto-absenden {
	display: block;
	width: 100%;
	margin-top: 16px;
	padding: 16px 20px;
	font-size: 1.1em;
	font-weight: 700;
	border: none;
	border-radius: 8px;
	background: #f2b90c;
	color: #1a1a1a;
	cursor: pointer;
}

.vis-fanfoto-formular .description {
	color: #646970;
	font-size: 0.9em;
}

.vis-fanfoto-erfolg {
	margin: 0 0 14px;
	padding: 10px 14px;
	background: #edfaef;
	border: 1px solid #68de7c;
	border-radius: 6px;
	color: #1e4620;
}

.vis-fanfoto-fehler,
.vis-fanfoto-hinweis {
	margin: 0 0 14px;
	padding: 10px 14px;
	background: #fcf0f1;
	border: 1px solid #e65054;
	border-radius: 6px;
	color: #601a1a;
}

.vis-fanfoto-hinweis {
	background: #fff8e5;
	border-color: #dba617;
	color: #5a4400;
}

.vis-fanfoto-hinweis a {
	font-weight: 600;
}