/**
 * Wimbledon Booking front-end styles.
 *
 * Deliberately low-specificity and theme-neutral: the site is built in
 * Elementor, so colours inherit from the theme wherever possible and the
 * few fixed values here are neutral greys plus the accent variables below.
 */

.wt-booking {
	--wt-accent: #183BBA;
	--wt-accent-dark: #183BBA;
	--wt-border: #d9dee3;
	--wt-muted: #6b7280;
	--wt-bg-soft: #f7f8fa;
	--wt-radius: 8px;

	margin: 1.5rem 0;
	font-size: 1rem;
	line-height: 1.5;
}

/* Buttons ---------------------------------------------------------------- */

.wt-booking .wt-btn,
.wt-form .wt-btn {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	border: 2px solid #183BBA;
	border-radius: var(--wt-radius);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.wt-btn--primary {
	background: #183BBA;
	color: #fff;
}

.wt-btn--primary:hover,
.wt-btn--primary:focus {
	background: #183BBA;
	border-color:#183BBA;
	color: #fff;
}

.wt-btn--outline {
	background: transparent;
	color: #183BBA;
}

.wt-btn--outline:hover,
.wt-btn--outline:focus {
	background: #183BBA;
	color: #fff;
}

.wt-btn[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
}

.wt-booking__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.wt-booking__panel {
	margin-top: 1.25rem;
}

/* Forms ------------------------------------------------------------------ */

.wt-form {
	max-width: 640px;
	padding: 1.5rem;
	border: 1px solid var(--wt-border);
	border-radius: var(--wt-radius);
	background: #fff;
}

.wt-form__title {
	margin: 0 0 0.25rem;
	font-size: 1.25rem;
}

.wt-form__course {
	margin: 0 0 1.25rem;
	color: var(--wt-muted);
}

.wt-field {
	margin: 0 0 1rem;
}

.wt-field label,
.wt-field legend {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
}

.wt-field input[type="text"],
.wt-field input[type="email"],
.wt-field input[type="tel"],
.wt-field input[type="number"],
.wt-field textarea {
	width: 100%;
	max-width: 100%;
	padding: 0.65rem 0.75rem;
	border: 1px solid var(--wt-border);
	border-radius: var(--wt-radius);
	font: inherit;
	box-sizing: border-box;
}

.wt-field--radios {
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
}

.wt-radio,
.wt-check {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	margin-bottom: 0.5rem;
	font-weight: 400;
	cursor: pointer;
}

.wt-radio input,
.wt-check input {
	margin-top: 0.25rem;
	flex: 0 0 auto;
}

.wt-form__submit {
	margin: 1.25rem 0 0;
}

.wt-form__footnote {
	margin: 0.75rem 0 0;
	color: var(--wt-muted);
	font-size: 0.9rem;
}

/* Steps ------------------------------------------------------------------ */

.wt-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.wt-step {
	padding: 1.25rem 0;
	border-top: 1px solid var(--wt-border);
}

.wt-step:first-child {
	border-top: 0;
	padding-top: 0;
}

.wt-step__title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 0.75rem;
	font-size: 1.15rem;
}

.wt-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	flex: 0 0 auto;
	border-radius: 50%;
	background: #183BBA;
	color: #fff;
	font-size: 0.95rem;
}

.wt-step__hint {
	margin: 0 0 1rem;
	color: var(--wt-muted);
	font-size: 0.95rem;
}

/* Calendar --------------------------------------------------------------- */

.wt-calendar__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wt-day {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	width: 100%;
	padding: 0.75rem;
	border: 1px solid var(--wt-border);
	border-radius: var(--wt-radius);
	background: #fff;
	font: inherit;
	text-align: left;
	color: #183BBA;
}

.wt-day--available {
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wt-day--available:hover,
.wt-day--available:focus {
	border-color: var(--wt-accent);
	box-shadow: 0 0 0 1px var(--wt-accent);
	background: #183BBA;
}

.wt-day--selected {
	border-color: var(--wt-accent);
	box-shadow: 0 0 0 2px var(--wt-accent);
	background: #DAE2FF;
}

.wt-day--unavailable {
	background: var(--wt-bg-soft);
	color: var(--wt-muted);
	cursor: not-allowed;
}

.wt-day__date {
	font-weight: 600;
}

.wt-day__status {
	font-size: 0.85rem;
	color: var(--wt-muted);
}
.wt-day--available:hover .wt-day__status {
	color: #fff;
}
.wt-day--selected .wt-day__status {
	color: var(--wt-accent-dark);
}

.wt-calendar__empty,
.wt-calendar__loading,
.wt-calendar__error {
	margin: 0;
	color: var(--wt-muted);
}

.wt-calendar__error {
	color: #b3261e;
}

/* Summary, fee and notices ----------------------------------------------- */

.wt-summary {
	margin: 0 0 1.25rem;
	padding: 1rem;
	border-radius: var(--wt-radius);
	background: var(--wt-bg-soft);
}

.wt-summary p {
	margin: 0 0 0.35rem;
}

.wt-summary p:last-child {
	margin-bottom: 0;
}

.wt-fee {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 0.75rem;
	margin: 0 0 1.25rem;
	padding: 1rem;
	border: 2px solid var(--wt-accent);
	border-radius: var(--wt-radius);
}

.wt-fee__label {
	font-weight: 600;
}

.wt-fee__amount {
	font-size: 1.5rem;
	font-weight: 700;
	color: #183BBA;
}

.wt-fee__note {
	color: var(--wt-muted);
	font-size: 0.9rem;
}

.wt-notice {
	margin: 0 0 1.25rem;
	padding: 1rem;
	border-left: 4px solid var(--wt-border);
	border-radius: var(--wt-radius);
	background: var(--wt-bg-soft);
}

.wt-notice h4 {
	margin: 0 0 0.5rem;
	font-size: 1rem;
}

.wt-notice ul {
	margin: 0;
	padding-left: 1.25rem;
}

.wt-notice li {
	margin-bottom: 0.25rem;
}

.wt-notice--important {
	border-left-color: #d97706;
	background: #fffaf0;
}
.wt-notice--important a{
	color: #183BBA;
}
.wt-notice--success {
	border-left-color: #183BBA;
	background: #DAE2FF;
}

.wt-notice--error {
	border-left-color: #b3261e;
	background: #fdf3f2;
}

/* Account area ----------------------------------------------------------- */

.wt-bookings-table {
	width: 100%;
	margin-bottom: 1.5rem;
	border-collapse: collapse;
}

.wt-bookings-table th,
.wt-bookings-table td {
	padding: 0.75rem;
	border-bottom: 1px solid var(--wt-border);
	text-align: left;
	vertical-align: top;
}

.wt-status {
	display: inline-block;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: var(--wt-bg-soft);
	font-size: 0.85rem;
	white-space: nowrap;
}

.wt-status--confirmed {
	background: #e6f6ef;
	color: #14684a;
}

.wt-status--pending {
	background: #fff4e5;
	color: #8a5200;
}

.wt-status--cancelled {
	background: #fdf3f2;
	color: #b3261e;
}

@media (max-width: 600px) {
	.wt-booking__actions .wt-btn {
		width: 100%;
	}

	.wt-bookings-table,
	.wt-bookings-table thead,
	.wt-bookings-table tbody,
	.wt-bookings-table tr,
	.wt-bookings-table th,
	.wt-bookings-table td {
		display: block;
	}

	.wt-bookings-table thead {
		display: none;
	}

	.wt-bookings-table tr {
		margin-bottom: 1rem;
		border: 1px solid var(--wt-border);
		border-radius: var(--wt-radius);
	}

	.wt-bookings-table td {
		border-bottom: 0;
	}

	.wt-bookings-table td::before {
		content: attr(data-label) ": ";
		font-weight: 600;
	}
}