/* The call-back pop-up's date field.
 *
 * Two corrections to how the calendar and its button sit in the page. The rest
 * of the behaviour is in popup-forms.js.
 */

/* The calendar panel in front of the pop-up.
 *
 * jQuery UI gives the panel a z-index of its own, and the pop-up is pinned at
 * 99999 by the site's global custom CSS (uploads/custom-css-js/40.css), not by
 * Elementor — so a reader looking for that number will not find it in a plugin.
 * 100001 clears the pop-up and stays below the chat widget.
 *
 * The attribute in the selector is deliberate: Gravity Forms ships its own
 * !important z-index for the panel with a selector of that shape, so a plainer
 * rule here would lose to it if the form were ever switched to the older theme.
 */
body #ui-datepicker-div[style] {
	z-index: 100001 !important;
}

/* The calendar button level with the date in the field.
 *
 * Gravity Forms lays the field out as a row and centres the button in it. The
 * theme gives every text input a bottom margin, which makes that row taller than
 * the field itself, so the button was centred on the row and sat below the
 * middle of the box. The space under the field comes from Gravity Forms' own
 * layout, so nothing closes up without this margin.
 *
 * Forced, like the booking wizard's own controls: the theme styles bare form
 * fields through a long selector that outranks anything reasonable written here.
 */
.gfield--input-type-datepicker .ginput_container_date input.gform-datepicker {
	margin-bottom: 0 !important;
}

/* The pop-up's form in the site's own colour.
 *
 * Gravity Forms paints the chosen day in the calendar, the tint on today, and
 * the dot in the radio buttons from one colour of its own — a blue that belongs
 * to nothing else on this site. It builds all of it from a handful of custom
 * properties, so setting those here recolours the lot without touching a single
 * one of its rules. The bordeaux is the one the form's own send button uses.
 *
 * Two selectors because the calendar panel is not inside the form: jQuery UI
 * keeps it elsewhere in the page. The leading "body" is there only to outweigh
 * the per-form block Gravity Forms prints into the page itself.
 */
body #gform_wrapper_1[data-form-index].gform-theme,
body #ui-datepicker-div {
	--gf-color-primary: #8B2635;
	--gf-color-primary-rgb: 139, 38, 53;
	/* a second primary, the one Gravity Forms uses inside the controls
	   themselves — it is what fills the dot in a chosen radio button */
	--gf-color-in-ctrl-primary: #8B2635;
	--gf-color-in-ctrl-primary-rgb: 139, 38, 53;
	--gf-color-primary-darker: #6B1D29;
	--gf-color-primary-lighter: #B14C5B;
	--gf-ctrl-accent-color: #8B2635;
	--gf-ctrl-date-picker-cell-content-bg-color-selected: #8B2635;
	/* today, and the day under the pointer: the same bordeaux at a whisper */
	--gf-ctrl-date-picker-cell-content-bg-color-hover: #FAF6F7;
}