/*
 * Easy Appointments – Gynekologie Šumperk theme overrides
 *
 * Restyles the Easy Appointments booking form to match the theme palette:
 *   teal accent  #1ac0d0 / #00A6BD
 *   body text    #3B5F77
 *   light fills  #e9eff2 / #E0E8ED / #cfd9e5
 *   font         'Open Sans'
 * Flat look: no border-radius, no box-shadows.
 *
 * The booking page uses the [ea_bootstrap] shortcode (.ea-bootstrap markup),
 * so most rules target that variant. A few .ea-standard rules are kept so the
 * standard shortcode is themed too. Enqueued from functions.php AFTER the
 * plugin styles (incl. bootstrap.css) so these rules win on load order, with
 * extra specificity where the plugin uses doubled classes.
 */

/* ---------------------------------------------------------------- *
 *  Container & typography
 * ---------------------------------------------------------------- */
.ea-bootstrap,
.ea-standard {
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	color: #3B5F77;
	font-weight: 300;
}

.ea-bootstrap a,
.ea-standard a {
	color: #00A6BD;
}

.ea-bootstrap label,
.ea-bootstrap .control-label,
.ea-bootstrap .ea-label,
.ea-standard .ea-label,
.ea-standard .step label {
	color: #3B5F77;
	font-weight: 400;
}

/* Section headings ("Personal information", "Booking overview") */
.ea-bootstrap h3 {
	color: #1ac0d0;
	font-weight: 400;
	border-bottom: 1px solid #E0E8ED;
	padding-bottom: 6px;
}

.ea-standard .section {
	color: #1ac0d0;
	font-weight: 400;
	font-size: 1.4em;
	margin: 10px 0;
	border-bottom: 1px solid #E0E8ED;
	padding-bottom: 6px;
}

.ea-bootstrap small,
.ea-standard small {
	color: #3B5F77;
}

#ea-service-description,
.ea-bootstrap .ea-service-description {
	color: #3B5F77;
}

/* ---------------------------------------------------------------- *
 *  Form fields  (flat, theme fill)
 * ---------------------------------------------------------------- */
.ea-bootstrap .form-control,
.ea-bootstrap select,
.ea-bootstrap input[type="text"],
.ea-bootstrap input[type="email"],
.ea-bootstrap input[type="tel"],
.ea-bootstrap input[type="number"],
.ea-bootstrap textarea,
.ea-standard select,
.ea-standard input[type="text"],
.ea-standard input[type="email"],
.ea-standard input[type="tel"],
.ea-standard input[type="number"],
.ea-standard textarea {
	background-color: #e9eff2;
	background-image: none;
	border: 1px solid #d0d0d0;
	border-radius: 0;
	box-shadow: none;
	color: #333;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-weight: 300;
}

.ea-bootstrap .form-control:focus,
.ea-bootstrap select:focus,
.ea-bootstrap input:focus,
.ea-bootstrap textarea:focus,
.ea-standard select:focus,
.ea-standard input:focus,
.ea-standard textarea:focus {
	border-color: #1ac0d0;
	box-shadow: none;
	outline: none;
}

/* ---------------------------------------------------------------- *
 *  Time slots
 * ---------------------------------------------------------------- */
.ea-bootstrap .time,
.ea-standard .time {
	border-color: #E0E8ED;
	background: #FFFFFF;
}

.ea-bootstrap .time-value,
.ea-standard .time-value {
	border: 1px dotted #cfd9e5;
	color: #3B5F77;
	background-color: #FFFFFF;
}

.ea-bootstrap .time-value:hover,
.ea-standard .time-value:hover {
	background-color: #c6d5dd;
	color: #3B5F77;
	cursor: pointer;
}

/* Doubled class to beat the plugin's `.ea-bootstrap.ea-bootstrap .selected-time` (green) */
.ea-bootstrap.ea-bootstrap .selected-time,
.ea-bootstrap.ea-bootstrap .selected-time:hover,
.ea-standard .selected-time,
.ea-standard .time-value.selected-time:hover {
	background-color: #1ac0d0;
	color: #FFFFFF;
}

.ea-bootstrap .time-disabled,
.ea-standard .time-disabled {
	background-color: #f5f7f9;
	color: #c2ccd6;
	border-color: #E0E8ED;
}

/* ---------------------------------------------------------------- *
 *  Booking overview
 * ---------------------------------------------------------------- */
.ea-bootstrap #booking-overview .ea-label,
.ea-standard #booking-overview .ea-label {
	color: #3B5F77;
	opacity: 0.7;
}

.ea-bootstrap #booking-overview .value,
.ea-standard #booking-overview td,
.ea-standard #booking-overview th {
	color: #3B5F77;
}

/* ---------------------------------------------------------------- *
 *  Buttons  (Bootstrap .btn-primary / .btn-default + plugin .ea-btn)
 * ---------------------------------------------------------------- */
.ea-bootstrap .btn.btn-primary,
.ea-bootstrap .ea-submit,
.ea-standard .ea-btn,
.ea-standard .ea-submit {
	background-color: #00A6BD;
	background-image: none;
	border: 1px solid #00A6BD;
	border-radius: 0;
	box-shadow: none;
	color: #FFFFFF;
	cursor: pointer;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-weight: 400;
	padding: 10px 25px;
	text-shadow: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ea-bootstrap .btn.btn-primary:hover,
.ea-bootstrap .btn.btn-primary:focus,
.ea-bootstrap .btn.btn-primary:active,
.ea-bootstrap .btn.btn-primary:active:hover,
.ea-bootstrap .btn.btn-primary.active,
.ea-bootstrap .ea-submit:hover,
.ea-standard .ea-submit:hover {
	background-color: #1ac0d0;
	border-color: #1ac0d0;
	color: #FFFFFF;
}

/* Secondary / cancel button */
.ea-bootstrap .btn.btn-default,
.ea-bootstrap .ea-cancel,
.ea-standard .ea-cancel {
	background-color: #e9eff2;
	background-image: none;
	border: 1px solid #c8cfd2;
	border-radius: 0;
	box-shadow: none;
	color: #3B5F77;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-weight: 400;
	padding: 10px 25px;
	text-shadow: none;
}

.ea-bootstrap .btn.btn-default:hover,
.ea-bootstrap .btn.btn-default:focus,
.ea-bootstrap .btn.btn-default:active,
.ea-bootstrap .ea-cancel:hover,
.ea-standard .ea-cancel:hover {
	background-color: #c6d5dd;
	border-color: #c8cfd2;
	color: #3B5F77;
}

/* ---------------------------------------------------------------- *
 *  jQuery UI datepicker (Bootstrap variant)
 * ---------------------------------------------------------------- */
.ea-bootstrap .ui-datepicker {
	border: 1px solid #E0E8ED;
	border-radius: 0;
	box-shadow: none;
	background: #FFFFFF;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

.ea-bootstrap .ui-datepicker .ui-datepicker-title {
	color: #3B5F77;
	font-weight: 400;
}

.ea-bootstrap .ui-datepicker th {
	color: #3B5F77;
}

.ea-bootstrap .ui-datepicker .ui-datepicker-prev,
.ea-bootstrap .ui-datepicker .ui-datepicker-next {
	color: #00A6BD;
}

.ea-bootstrap .ui-datepicker td a,
.ea-bootstrap .ui-datepicker td span {
	color: #3B5F77;
}

/* Keep past / unavailable days grayed out (needs to outrank the td span rule above) */
.ea-bootstrap .ui-datepicker td.ui-state-disabled span,
.ea-bootstrap .ui-datepicker td.ui-datepicker-unselectable span,
.ea-bootstrap .ui-datepicker .ui-state-disabled span {
	color: #c2ccd6;
}

.ea-bootstrap .ui-datepicker .ui-datepicker-calendar td:hover {
	background-color: #c6d5dd;
}

.ea-bootstrap .ui-datepicker a:hover,
.ea-bootstrap .ui-datepicker td:hover a {
	color: #3B5F77;
}

/* Currently selected day → theme teal (was #4289cc) */
.ea-bootstrap .ui-datepicker .ui-datepicker-current-day {
	background-color: #1ac0d0;
}

.ea-bootstrap .ui-datepicker .ui-datepicker-current-day a {
	color: #FFFFFF;
}

/* Standard variant datepicker */
.ea-standard .ui-datepicker {
	border: 1px solid #E0E8ED;
	border-radius: 0;
	background: #FFFFFF;
}

.ea-standard .ui-datepicker .ui-datepicker-header {
	background: #E0E8ED;
	border: none;
	color: #3B5F77;
}

.ea-standard .ui-datepicker td a.ui-state-active,
.ea-standard .ui-datepicker td a.ui-state-highlight {
	background: #1ac0d0;
	color: #FFFFFF;
}

/* ---------------------------------------------------------------- *
 *  Validation messages
 * ---------------------------------------------------------------- */
.ea-bootstrap label.error,
.ea-standard label.error {
	color: #c0392b;
}

.ea-bootstrap input.error,
.ea-bootstrap textarea.error,
.ea-bootstrap select.error,
.ea-standard input.error,
.ea-standard textarea.error,
.ea-standard select.error {
	border-color: #c0392b;
}

/* ---------------------------------------------------------------- *
 *  Tighten the gap between the doctor selector and the form
 *  (booking page only). Roughly halves the stacked top spacing:
 *  the <pre> wrapper margin + the template's inline col padding-top.
 * ---------------------------------------------------------------- */
.booking .wp-block-columns {
	margin-top: 0;
	margin-bottom: 0;
}

.booking .wp-block-preformatted {
	margin-top: 8px;
	margin-bottom: 0;
}

/* Left column carries an inline padding-top:25px from the plugin template */
.booking .ea-bootstrap .col-md-6 {
	padding-top: 13px !important;
}

/* ---------------------------------------------------------------- *
 *  Post-booking confirmation: hide the action buttons
 *  ("Book New Appointment" and "Add to Google Calendar").
 *  They carry inline styles, so !important is required.
 * ---------------------------------------------------------------- */
.ea-button-book-again,
#ea-add-to-calendar,
.ea-bootstrap .ea-button-book-again,
.ea-bootstrap #ea-add-to-calendar {
	display: none !important;
}

/* ---------------------------------------------------------------- *
 *  Responsive
 * ---------------------------------------------------------------- */
@media screen and (max-width: 600px) {
	.ea-standard .step label,
	.ea-standard .ea-label {
		display: block;
		width: 100%;
		text-align: left;
		padding-right: 0;
	}

	.ea-standard .step input,
	.ea-standard .step select {
		width: 100%;
	}
}

/* ---------------------------------------------------------------- *
 *  GDPR / "I agree" consent row.
 *  The booking summary form is rendered client-side from an
 *  Underscore template using Bootstrap markup:
 *    <div class="checkbox">
 *      <label class="gdpr">
 *        <input id="ea-gdpr" name="gdpr" type="checkbox">
 *        <a href="...">consent text</a>
 *      </label>
 *    </div>
 *  The checkbox is a CHILD of the label. The theme's global
 *  `input { padding: 10px }` (style.css) inflates the checkbox and,
 *  combined with Bootstrap's absolute positioning, shoves it into
 *  the middle of the wrapped text. Make the label a flex row so the
 *  checkbox sits to the left of the text, top-aligned, and strip
 *  the inherited padding/positioning from the checkbox itself.
 * ---------------------------------------------------------------- */
/* Consent row spans the whole column: drop the empty Bootstrap
   offset label and let the checkbox column fill the width. */
.booking .form-group:has(.checkbox) > .control-label {
	display: none !important;
}
.booking .form-group:has(.checkbox) > .col-sm-8 {
	width: 100% !important;
}

.booking .checkbox label,
.booking .checkbox label.gdpr {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding-left: 0 !important;
	width: 100%;
	text-align: left;
}

.booking .checkbox label input[type="checkbox"] {
	position: static !important;
	-webkit-appearance: checkbox;
	   -moz-appearance: checkbox;
	        appearance: checkbox;
	width: 22px !important;
	height: 22px !important;
	min-width: 22px;
	margin: 0 !important;
	padding: 0 !important;
	flex: 0 0 auto;
	accent-color: #00A6BD;
}

/* Consent text (rendered as a link when gdpr.link is set) shares the
   row with the checkbox and wraps its own text. flex-basis:0 stops it
   demanding its full single-line width and dropping below the box. */
.booking .checkbox label > a {
	flex: 1 1 0;
	min-width: 0;
}

/* The validator (jquery.validate) inserts its red error label right
   after the checkbox, which would wedge it between the box and the
   text. Force it onto its own full-width line ABOVE the row. */
.booking .checkbox label label.error {
	order: -1;
	flex: 0 0 100%;
	width: 100%;
	margin: 0 0 8px 0;
	text-align: left;
}