/*
 * MC Watersports – PluginHive booking form styling.
 * Loaded by wp-content/mu-plugins/maj-mcw-pluginhive-styles.php
 *
 * Kept as a real .css file (not wp_add_inline_style) so WP Rocket's
 * "Remove Unused CSS" can be told to preserve it through the safelist entry
 * /wp-content/mu-plugins/maj-mcw-assets/(.*).css — the safelist only handles
 * files and selectors, never inline <style> blocks, and the calendar markup
 * is built client-side so RUCSS would otherwise drop every rule below.
 */

.product-type-phive_booking form.cart {
	border: solid;
	border-radius: 10px;
	padding: 4% !important;
}

.input-person-minus,
.input-person-plus {
	color: #000 !important;
	border: 1px solid #000 !important;
}

input.input-person {
	color: #000 !important;
}

.booking-wraper .time-picker-wraper #ph-calendar-time li.ph-calendar-date {
	border: 1px solid #000 !important;
}

.booking-wraper .time-picker-wraper li.ph-calendar-date.timepicker-selected-date,
.booking-wraper .time-picker-wraper li.ph-calendar-date.selected-date {
	color: #fff !important;
}

/*
 * White-on-hover, but ONLY for dates that actually get a coloured fill.
 * PluginHive fills `li.ph-calendar-date:hover` in blue (ph_new_calendar.css:387),
 * yet forces `background: none !important` back on the unavailable states
 * (l.864) and a grey fill on `.booking-full` (l.392). Without these
 * exclusions our `color:#fff` applied there too, so hovering a struck-through
 * date rendered the number white on white and it vanished.
 * The class list is the one the calendar JS actually assigns to day cells.
 */
.booking-wraper .time-picker-wraper li.ph-calendar-date:hover:not(.de-active):not(.not-available):not(.not-startable):not(.booking-disabled):not(.booking-full):not(.past-time):not(.mouse_hover_past) {
	color: #fff !important;
}

.booking-info-wraper p {
	font-weight: bold;
}

.booking-info-wraper p b {
	font-weight: normal;
}

/*
 * Resource / participant labels rendered white-on-white.
 * PluginHive is built for a dark-background theme and forces white text in
 * three places (ph_new_calendar.css):
 *   l.433  `.extra-resources { color: white }`  — the whole container inherits
 *   l.700  `label.label-person, .phive_asset_section label { color:#fff !important }`
 *   l.456  `label.label-person.additional-notes-tiltle { color: white }`
 * Salient never contradicts them: a container rule (0,1,0) outranks the text
 * colour inherited from `body`, so "E-foil (without handle)", "Jets"… were
 * invisible on our white form.
 * Both levels are needed — the container rule covers text that isn't a
 * <label>, and the label rule must outrank the plugin's own !important.
 * `.product-type-phive_booking label.label-person` scores 0,2,1 against the
 * plugin's 0,1,1: between two !important declarations, the more specific one
 * wins. That also covers `.additional-notes-tiltle`.
 */
.product-type-phive_booking .extra-resources {
	color: #000 !important;
}

.product-type-phive_booking label.label-person,
.product-type-phive_booking .phive_asset_section label,
.product-type-phive_booking .phive_resource_section label {
	color: #000 !important;
	-webkit-text-fill-color: #000 !important;
}

/*
 * PluginHive wraps the resources/formule row in `.resources-wraper` which
 * has `padding-left: 11px !important` (ph_new_calendar.css:748). The
 * participants/jets row above doesn't sit inside that wrapper, so the two
 * `.persons-title` labels end up 11px out of vertical alignment.
 * Neutralise the padding-left to bring "Formule" back in line with "Jets".
 */
.product-type-phive_booking .resources-wraper {
	padding-left: 0 !important;
}

/*
 * --- Mobile (iOS) fixes — booking module ----------------------------------
 * Both issues below are invisible on desktop but break readability on
 * mobile Safari. They affect the shared PluginHive calendar (all products),
 * surfaced on the Wake Surf page after the 30-min interval switch.
 */

/*
 * 1) Selected / today DATE was unreadable on mobile.
 *    PluginHive's own cascade (ph_new_calendar.css:326/348) forces a WHITE
 *    background on `.selected-date` / `.timepicker-selected-date`, and
 *    `.today` (l.121) ships white text with no fill. Combined with the
 *    `color:#fff` rule above, the day number rendered white-on-white once
 *    the touch/hover state dropped (desktop hides this because the mouse
 *    keeps the cell in its blue :hover background).
 *    Fix: turn the selected/today date into a solid filled chip so the
 *    number is always legible, in every interaction state and viewport.
 *    Scoped to `#ph-calendar-days` so the time-slot chips (`#ph-calendar-time`,
 *    red selected state) are left untouched.
 */
.product-type-phive_booking #ph-calendar-days li.ph-calendar-date.today,
.product-type-phive_booking #ph-calendar-days li.ph-calendar-date.selected-date,
.product-type-phive_booking #ph-calendar-days li.ph-calendar-date.timepicker-selected-date {
	background: #c7102e !important;
	border-color: #c7102e !important;
	border-radius: 1em !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

/*
 * 2) Participant counter (− value +) rendered grey on iOS.
 *    iOS Safari paints `<input type=number>` text (and tapped <a> glyphs)
 *    through `-webkit-text-fill-color`, which ignores plain `color:#000`,
 *    and can drop opacity. Pin both fill-color and opacity, not just color.
 */
.product-type-phive_booking .participant_section,
.product-type-phive_booking .participant_inner_section {
	opacity: 1 !important;
}
.product-type-phive_booking .input-person-minus,
.product-type-phive_booking .input-person-plus,
.product-type-phive_booking input.input-person {
	color: #000 !important;
	-webkit-text-fill-color: #000 !important;
	opacity: 1 !important;
}