/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Version: 1.0.0
Description: Child theme of Hello Elementor, generated by EMCP Tools.
*/

/* Bookly pop-ups (e.g. "Data already in use", verification code): the form's
   white text was inherited onto a white box, so the message looked blank. */
.bookly-modal .bookly-modal-content,
.bookly-modal .bookly-modal-content .bookly-modal-header,
.bookly-modal .bookly-modal-content .bookly-modal-body,
.bookly-modal .bookly-modal-content .bookly-modal-body * {
	color: #333 !important;
}

/* Bookly time step: unavailable start times are shown greyed out and labelled "Booked". */
.bookly-form .bookly-columnizer .bookly-hour.booked,
.bookly-form .bookly-columnizer .bookly-hour.booked:hover {
	background: #e9ecea !important;
	border: 1px solid #d5d9d6 !important;
	color: #8a918c !important;
	cursor: not-allowed;
}
.bookly-form .bookly-columnizer .bookly-hour.booked .bookly-time-main {
	text-decoration: line-through;
}
.bookly-form .bookly-columnizer .bookly-hour.booked .bookly-hour-icon {
	outline-color: #cfd4d0 !important;
}
.bookly-form .bookly-columnizer .bookly-hour.booked .bookly-time-additional::after {
	content: "Booked";
	display: inline-block;
	margin-left: 6px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	text-decoration: none;
}

/* Bookly form error messages (card declined, missing fields, etc.): red on a light label so they stand
   out and stay readable on the green form. */
/* The "body" prefix makes these beat the white text rule in Appearance > Customize > Additional CSS.
   Covers every Bookly error label (all steps, card errors, custom fields, repeat days, tips)
   and our own messages (extras, hoover/mop, postcode, session expired), which use bookly-label-error. */
body .bookly-form .bookly-label-error,
body .bookly-form .bookly-js-card-error,
body .bookly-form .bookly-custom-field-error,
body .bookly-form .bookly-js-info-field-error,
body .bookly-form .bookly-js-days-error,
body .bookly-form .bookly-js-tips-error,
body .bookly-form .bookly-label-error * {
	color: #c62828 !important;
}
body .bookly-form .bookly-label-error,
body .bookly-form .bookly-js-card-error,
body .bookly-form .bookly-custom-field-error,
body .bookly-form .bookly-js-info-field-error,
body .bookly-form .bookly-js-days-error,
body .bookly-form .bookly-js-tips-error {
	background: #ffffff !important;
	display: inline-block; /* no !important: Bookly hides some messages with an inline display:none */
	padding: 4px 10px !important;
	border-radius: 4px !important;
	margin-top: 6px !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
}
body .bookly-form .bookly-label-error:empty,
body .bookly-form .bookly-js-card-error:empty,
body .bookly-form .bookly-custom-field-error:empty,
body .bookly-form .bookly-js-info-field-error:empty,
body .bookly-form .bookly-js-days-error:empty,
body .bookly-form .bookly-js-tips-error:empty {
	display: none !important;
}
/* Anything Bookly has hidden (inline display:none) stays hidden, even where a layout rule in
   Bookly > Appearance > Custom CSS forces display:flex/block !important (e.g. the Repeat step
   "Some of the desired time slots are busy" notice). :not(#ucl-x) only raises specificity. */
.bookly-form [style*="display: none"]:not(#ucl-x),
.bookly-form [style*="display:none"]:not(#ucl-x) {
	display: none !important;
}

/* Service step: another stylesheet sets padding:0 / width:100% on these divs; override for error labels. */
body .bookly-form .bookly-service-step .bookly-table.bookly-box > .bookly-form-group > div.bookly-label-error {
	padding: 4px 10px !important;
	width: auto !important;
	max-width: 100%;
}
/* Field with a problem: red border so it is clear which box to fix. */
.bookly-form input.bookly-error:not(#ucl-x),
.bookly-form select.bookly-error:not(#ucl-x),
.bookly-form textarea.bookly-error:not(#ucl-x),
.bookly-form .bookly-error .iti__tel-input:not(#ucl-x),
.bookly-form .iti:has(+ .bookly-js-user-phone-error:not(:empty)) .iti__tel-input:not(#ucl-x) {
	border: 2px solid #ff8a80 !important;
	box-shadow: 0 0 0 1px #c62828 !important;
}

/* Bookly Payment step: Stripe card fields were capped at 400px; make them full width
   (card number full row, expiry + security code sharing the row equally). */
.bookly-payment-nav .bookly-js-details .bookly-form-group .bookly-form-group {
	max-width: none !important;
	width: auto !important;
	flex: 1 1 0;
	min-width: 0;
}