/*
	Bestellformulare - Terminauswahl (derzeit im Remote-Formular)

	Global eingebunden ueber wwz_formularAssets() in includes/shortcodes.php, wie alle
	Formular-Assets. Rahmen und Fehlermarkierung der Formulare stehen in der style.css.

	Farben und Kanten wie im uebrigen Shop: #212638 als Grundfarbe, keine Rundungen.
	Die Uhrzeit-Knoepfe sehen aus wie die Formatknoepfe, ihre Gestaltung steht deshalb
	gemeinsam in der style.css (.wwz-knopf).
*/

/* --- Terminzeile ------------------------------------------------------ */

/* Die Terminzeile gehoert optisch zur Person darueber: Striche zwischen den Zeilen gibt
   es nicht, und das Band der Person gilt auch fuer sie (beides style.css).

   Kein Innenabstand an der Zelle, er steckt in der Huelle darin und klappt mit ihr auf
   und zu - sonst bliebe beim Zuklappen ein leerer Streifen stehen. */
.bestellformular table tr.wwz-terminzeile > td {
	padding:0 !important;
	text-align:left;
}

.wwz-ta-huelle {
	padding:0 0.5em 0.5em 0.5em;
}

/* Kein Flex: Beschriftung, Datumsfeld und Uhrzeiten stehen im Textfluss hintereinander,
   links beginnend. Reicht der Platz nicht, rutscht der Block mit den Uhrzeiten als
   Ganzes in die naechste Zeile. Die Abstaende stehen jeweils rechts am Element. */
.wwz-ta {
	text-align:left;
}

.bestellformular table .wwz-ta-beschriftung {
	display:inline-block;
	vertical-align:middle;
	margin:0 1em 0 0;
	font-weight:bold;
	white-space:nowrap;
}

/* Die Regel fuer Textfelder in der Tabelle macht jedes Feld blockig und volle Breite
   (style.css, .bestellformular table input[type=text]). Das Datumsfeld soll neben der
   Beschriftung stehen. */
.bestellformular table input[type=text].wwz-ta-datum {
	display:inline-block;
	vertical-align:middle;
	width:auto;
	min-width:9em;
	margin:0 1em 0 0;
	cursor:pointer;
	background:#ffffff;
}

.wwz-ta-zeiten {
	display:inline-block;
	vertical-align:middle;
}

/* Die Uhrzeiten sind Knoepfe wie das Pruefungsformat (.wwz-knopf in der style.css).
   Hier steht nur, was fuer Uhrzeiten dazukommt: Eine vergebene ist durchgestrichen. */
.wwz-ta-zeit.ist-belegt span {
	text-decoration:line-through;
}

.wwz-ta-hinweis {
	font-size:0.9em;
	font-style:italic;
	color:#777777;
}

/* Hinweis in der Zeile, etwa auf eine inzwischen vergebene Uhrzeit - im Rot der
   Fehlermeldung (.error in der style.css) */
.wwz-ta-hinweis.ist-fehler {
	font-style:normal;
	color:firebrick;
}

/* --- Kalender --------------------------------------------------------- */

/* Das Frontend hat kein jQuery-UI-Stylesheet, der Kalender kommt nackt. Hier steht nur
   das Noetigste. Die Tabellenregel der style.css nimmt Kalender ausdruecklich aus
   (:not(.ui-datepicker-calendar)), deshalb kommen sich beide nicht in die Quere.

   z-index mit !important: jQuery UI setzt ihn am Element und rechnet ihn aus dem
   Eingabefeld hoch - im Formular ergibt das 1, und der Kalender verschwaende unter
   dem Kopfbereich des Themes. */
#ui-datepicker-div {
	display:none;
	z-index:9999 !important;
	width:19em;
	padding:0.6em;
	background:#ffffff;
	border:1px solid #d7d8dc;
	box-shadow:0px 0px 10px 0px rgba(0,0,0,0.2);
	font-size:14px;
}

.ui-datepicker .ui-datepicker-header {
	position:relative;
	padding:0.4em 2.4em 0.8em 2.4em;
	text-align:center;
	font-weight:bold;
	color:#212638;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	position:absolute;
	top:0.1em;
	width:2em;
	height:2em;
	line-height:2em;
	text-align:center;
	color:#212638;
	text-decoration:none !important;
	cursor:pointer;
}

.ui-datepicker .ui-datepicker-prev { left:0; }
.ui-datepicker .ui-datepicker-next { right:0; }

/* Die Beschriftung "Zurueck"/"Vor" steckt im <span>, sichtbar ist nur der Pfeil */
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
	display:none;
}

.ui-datepicker .ui-datepicker-prev::before { content:"\2039"; font-size:1.4em; }
.ui-datepicker .ui-datepicker-next::before { content:"\203A"; font-size:1.4em; }

.ui-datepicker .ui-datepicker-prev.ui-state-disabled,
.ui-datepicker .ui-datepicker-next.ui-state-disabled {
	opacity:0.25;
	cursor:default;
}

.ui-datepicker table {
	width:100%;
	margin:0;
	border-collapse:collapse;
}

.ui-datepicker th {
	padding:0.3em 0;
	border:none;
	text-align:center;
	font-size:0.85em;
	font-weight:bold;
	color:#5c5c5c;
}

.ui-datepicker td {
	padding:2px;
	border:none;
	text-align:center;
}

.ui-datepicker td a,
.ui-datepicker td span {
	display:block;
	padding:0.35em 0;
	text-decoration:none !important;
}

/* Waehlbare Tage mit Umriss - so springt ins Auge, wo ueberhaupt ein Termin frei ist */
.ui-datepicker td a {
	border:1px solid #212638;
	color:#212638;
}

.ui-datepicker td a:hover {
	background:#eff0f4;
}

.ui-datepicker td.ui-datepicker-current-day a {
	background:#212638;
	color:#ffffff;
}

.ui-datepicker td.ui-state-disabled span {
	border:1px solid transparent;
	color:#c3c3c3;
}

/* Waehrend die Monatsdaten laden, sind alle Tage gesperrt - blasser als "belegt",
   damit es nicht wie ein ausgebuchter Monat aussieht */
.ui-datepicker td.wwz-ta-laedt span {
	color:#e2e2e2;
}