/**
 * The booking form and its button.
 *
 * Colors come from the site rather than from here. The accent arrives as a
 * custom property set inline from Divi's own accent option, so changing the
 * accent in the Customizer changes this too. The page background, the text
 * color and the serif are the ones the emails already use, which are the ones
 * the site already uses.
 */

.rol-booking {
	--rol-booking-ink: #30251d;
	--rol-booking-paper: #fff;
	--rol-booking-line: #e7e2db;
	--rol-booking-quiet: #6b6157;

	color: var(--rol-booking-ink);
	font-family: Georgia, "Times New Roman", serif;
	margin: 0 auto;
	max-width: 780px;

	/* Divi centres text in several of its section defaults, and a booking form
	   with centred labels reads as broken. Said once here rather than on each
	   of the twelve things inside it. */
	text-align: left;
}

.rol-booking p,
.rol-booking li,
.rol-booking legend,
.rol-booking h2 {
	text-align: left;
}

.rol-booking-heading {
	font-size: 1.7em;
	margin: 0 0 .4em;
}

.rol-booking-intro,
.rol-booking-hint {
	color: var(--rol-booking-quiet);
	margin: 0 0 1.4em;
}

.rol-booking-notice {
	/* No card, no pill. Every one of these is a single sentence, and a white
	   rounded box floating on the site's own background drew a box around a
	   sentence that did not need one. */
	background: none;
	border: 0;
	border-left: 3px solid var(--rol-booking-accent, #d58258);
	border-radius: 0;
	margin: 0;
	padding: .1em 0 .1em .9em;
}

.rol-booking-error {
	border-left: 3px solid var(--rol-booking-accent, #d58258);
	margin: 0 0 1.4em;
	padding-left: .9em;
}

.rol-booking-step {
	border: 0;
	margin: 0 0 2.2em;
	padding: 0;
}

.rol-booking-step.is-hidden,
.rol-booking-zone-list.is-hidden {
	display: none;
}

.rol-booking-step legend {
	font-size: 1.15em;
	font-weight: 700;
	margin-bottom: .7em;
	padding: 0;
}

.rol-booking-regions {
	display: flex;
	flex-wrap: wrap;
	gap: .6em;
}

.rol-booking-region,
.rol-booking-zone,
.rol-booking-slot {
	background: var(--rol-booking-paper);
	border: 1px solid var(--rol-booking-line);
	border-radius: 14px;
	color: var(--rol-booking-ink);
	cursor: pointer;
	font-family: inherit;
	font-size: 1em;
	line-height: 1.3;
	padding: .7em 1.1em;
	text-align: left;
	transition: border-color .12s ease, box-shadow .12s ease;
}

.rol-booking-region:hover,
.rol-booking-zone:hover,
.rol-booking-slot:hover {
	border-color: var(--rol-booking-accent, #d58258);
}

.rol-booking-region.is-chosen,
.rol-booking-zone.is-chosen,
.rol-booking-slot.is-chosen {
	border-color: var(--rol-booking-accent, #d58258);
	box-shadow: inset 0 0 0 1px var(--rol-booking-accent, #d58258);
}

/*
 * The preferred mark.
 *
 * A quiet line under the time, not a badge shouting over it. It says which
 * slots suit Bruce; every slot on the grid is still open and still pickable,
 * and a chosen slot still looks chosen whether it was marked or not.
 */
.rol-booking-slot-preferred {
	color: var(--rol-booking-accent, #d58258);
	display: block;
	font-size: .78em;
	letter-spacing: .04em;
	margin-top: .35em;
	text-transform: lowercase;
}

.rol-booking-slot.is-preferred {
	border-color: var(--rol-booking-accent, #d58258);
}

.rol-booking-zones ul {
	display: grid;
	gap: .5em;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.rol-booking-zones li {
	margin: 0;
}

/*
 * A choice is a place a student recognizes, the places it covers, and what time
 * it is there now. The identifier behind it never appears: it is a database key,
 * and asking somebody to find their own life in one is how they pick the wrong
 * one.
 */
.rol-booking-zone {
	display: grid;
	gap: .15em;
	width: 100%;
}

.rol-booking-zone-name {
	font-weight: 700;
}

.rol-booking-zone-places,
.rol-booking-zone-now {
	color: var(--rol-booking-quiet);
	font-size: .85em;
}

.rol-booking-zone-now {
	font-variant-numeric: tabular-nums;
}

.rol-booking-day {
	margin-bottom: 1.6em;
}

.rol-booking-day h3 {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	font-size: 1.05em;
	gap: .6em;
	margin: 0 0 .6em;
}

.rol-booking-day-paris {
	color: var(--rol-booking-quiet);
	font-size: .85em;
	font-weight: 400;
}

.rol-booking-times {
	display: grid;
	gap: .5em;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.rol-booking-slot {
	display: flex;
	flex-direction: column;
	gap: .15em;
}

.rol-booking-slot-paris {
	color: var(--rol-booking-quiet);
	font-size: .85em;
}

.rol-booking-count {
	color: var(--rol-booking-quiet);
	margin: 1.2em 0;
}

.rol-booking-submit {
	background: var(--rol-booking-accent, #d58258);
	border: 2px solid var(--rol-booking-accent, #d58258);
	border-radius: 14px;
	color: #fff;
	cursor: pointer;
	font-family: inherit;
	font-size: 1.05em;
	padding: .7em 1.6em;
}

.rol-booking-submit[disabled] {
	cursor: default;
	opacity: .45;
}

/**
 * The dashboard button.
 *
 * Divi's own classes carry the size, the shape and the spacing, so the files
 * button and this one match without either of them naming a dimension. Only the
 * two colors are swapped: white behind, the site accent in front, which is the
 * inverse of every other button on the site and reads as a different thing at a
 * glance.
 */

.rol-booking-button.et_pb_button,
.rol-booking-button.et_pb_button:hover {
	background-color: #fff !important;
	background-image: none !important;
	border-color: var(--rol-booking-accent, #d58258) !important;
	color: var(--rol-booking-accent, #d58258) !important;
}

/* The page a student reaches from the link in their confirmation. */

.rol-manage-what {
	margin: 0 0 20px;
}

.rol-manage-form {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 16px;
}

.rol-manage-cancel {
	background: none;
	border: 1px solid var(--rol-booking-accent, #d58258);
	border-radius: 3px;
	color: var(--rol-booking-accent, #d58258);
	cursor: pointer;
	font: inherit;
	padding: 10px 18px;
}

.rol-manage-note {
	color: var(--rol-booking-quiet, #6b6157);
	margin: 0;
}

.rol-booking-rebooked {
	border-left: 3px solid var(--rol-booking-accent, #d58258);
	margin: 0 0 1.4em;
	padding: .1em 0 .1em .9em;
}