/* WeFitRPE My account page ([wfr_account], accounts spec 6).
   Fields, buttons, option rows, notes and the --wfr-* tokens come from
   wfr-booking.css, which this page also loads; only the page's own layout
   is here. */

.wfr-account {
	max-width: 880px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.5;
	color: var(--wfr-text);
}

.wfr-account__card {
	background: #fff;
	border: 1px solid var(--wfr-border);
	border-radius: var(--wfr-radius);
	box-shadow: var(--wfr-shadow);
	padding: 32px;
	margin: 0 0 24px;
	min-width: 0;
}

@media (max-width: 600px) {
	.wfr-account__card {
		padding: 20px;
	}
}

.wfr-account h2,
.wfr-account h3 {
	margin: 0 0 12px;
}

.wfr-account h3 {
	margin-top: 8px;
}

.wfr-account h2:focus {
	outline: none;
}

/* Required marks, as on the booking form */
.wfr-account h4 em {
	color: #c0392b;
	font-style: normal;
}

.wfr-account__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.wfr-account__head p {
	margin: 0;
	color: var(--wfr-text-light);
	overflow-wrap: anywhere;
}

.wfr-account__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 20px 0 0;
}

.wfr-account__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 16px 0 0;
	font-size: 14px;
}

.wfr-account__links a {
	color: var(--wfr-primary);
}

.wfr-account a.wfr-btn {
	display: inline-block;
	text-align: center;
	text-decoration: none;
}

.wfr-account__email {
	margin: 0;
	overflow-wrap: anywhere;
}

/* "Please check your details": bordered, at the top (6.2) */
.wfr-account__confirm {
	background: #fff8e6;
	border-color: #f0d789;
	box-shadow: none;
	padding: 16px 24px;
}

.wfr-account__confirm p {
	margin: 0;
}

.wfr-account__confirm .wfr-account__actions {
	margin-top: 12px;
}

/* Your bookings (6.4): a table, stacked rows at phone width */
.wfr-account__bookings {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.wfr-account__bookings th,
.wfr-account__bookings td {
	border-bottom: 1px solid var(--wfr-border);
	padding: 10px 12px;
	text-align: left;
	vertical-align: top;
}

.wfr-account__bookings th {
	background: var(--wfr-bg-light);
	font-weight: 600;
}

@media (max-width: 600px) {
	.wfr-account__bookings thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.wfr-account__bookings tr {
		display: block;
		border: 1px solid var(--wfr-border);
		border-radius: var(--wfr-radius-sm);
		margin: 0 0 12px;
		padding: 4px 0;
	}

	.wfr-account__bookings td {
		display: grid;
		grid-template-columns: 96px minmax(0, 1fr);
		gap: 8px;
		border: none;
		padding: 6px 12px;
		overflow-wrap: anywhere;
	}

	.wfr-account__bookings td::before {
		content: attr(data-label);
		font-weight: 600;
		color: var(--wfr-text-light);
	}
}

/* The hidden attribute must always win, as on the booking form */
.wfr-account [hidden] {
	display: none !important;
}