/* ═══ Signed-in account identity ═══ */

/*
 * Sits above the attention notice so the first thing on the page answers
 * "whose account is this". Quiet by design - it is orientation, not content,
 * and should not compete with the notice directly beneath it.
 */
.a1de-bookings-account .a1de-account-identity {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5em 1.25em;
	padding: 0.85em 1.25em;
	margin-bottom: 1em;
	background-color: var(--charcoal, #161616);
	border: 1px solid #333;
	border-radius: 8px;
}

.a1de-bookings-account .a1de-account-identity-name {
	font-family: var(--font-display, 'Barlow Condensed', sans-serif);
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--white, #fff);
}

.a1de-bookings-account .a1de-account-identity-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em 1.25em;
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size: 0.8rem;
	color: var(--gray, #999);
}

.a1de-bookings-account .a1de-account-identity-meta strong {
	font-weight: 600;
	color: var(--white, #fff);
}

/* Stack on a phone so a long username never pushes the row sideways. */
@media (max-width: 480px) {
	.a1de-bookings-account .a1de-account-identity {
		flex-direction: column;
		align-items: flex-start;
	}
}

.a1de-bookings-account .a1de-attention-notice {
	padding: 1em 1.25em;
	margin-bottom: 1.5em;
	background-color: var(--charcoal, #161616);
	border: 1px solid var(--red, #D01010);
	border-radius: 8px;
}

.a1de-bookings-account .a1de-attention-notice-title {
	margin: 0 0 0.5em;
	font-family: var(--font-display, 'Barlow Condensed', sans-serif);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--red, #D01010);
}

.a1de-bookings-account .a1de-attention-notice ul {
	margin: 0;
	padding-left: 1.25em;
	color: var(--white, #fff);
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size: 0.9rem;
	line-height: 1.6;
}

.a1de-bookings-account .a1de-attention-notice a {
	color: var(--white, #fff);
	text-decoration: underline;
}

.a1de-bookings-account .a1de-tab-description {
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size: 0.85rem;
	color: var(--gray, #999);
	line-height: 1.6;
	max-width: 560px;
	margin-bottom: 20px;
}

.a1de-bookings-account .a1de-hours-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	margin-bottom: 1.5em;
}

.a1de-bookings-account .a1de-hours-stat {
	flex: 1;
	padding: 1em 1.25em;
	background-color: var(--charcoal, #161616);
	border: 1px solid #333;
	border-radius: 8px;
	text-align: center;
}

/* ═══ Sub-tabs (Book a Lesson / My Bookings) ═══ */
.a1de-bookings-account .a1de-tabs {
	display: flex;
	gap: 32px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	margin-bottom: 28px;
}

.a1de-bookings-account .a1de-tab {
	background: none;
	border: none;
	padding: 0 0 14px;
	font-family: var(--font-display, 'Barlow Condensed', sans-serif);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gray, #999);
	cursor: pointer;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	transition: color 0.2s, border-color 0.2s;
}

.a1de-bookings-account .a1de-tab:hover {
	color: var(--white, #fff);
}

.a1de-bookings-account .a1de-tab.active {
	color: var(--white, #fff);
	border-bottom-color: var(--red, #D01010);
}

.a1de-bookings-account .a1de-tab-panel {
	display: none;
}

.a1de-bookings-account .a1de-tab-panel.active {
	display: block;
}

.a1de-bookings-account .a1de-hours-value {
	display: block;
	font-family: var(--font-display, inherit);
	font-weight: 700;
	font-size: 2em;
	line-height: 1;
	color: var(--white, #fff);
}

.a1de-bookings-account .a1de-hours-stat:last-child .a1de-hours-value {
	color: var(--red, #D01010);
}

.a1de-bookings-account .a1de-hours-label {
	display: block;
	margin-top: 0.35em;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--gray, #999);
}

.a1de-bookings-account #a1de-booking-app {
	margin-bottom: 2em;
}

.a1de-bookings-account #a1de-slots-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-top: 0.75em;
}

.a1de-bookings-account .a1de-slot-button {
	min-width: 140px;
}

.a1de-bookings-account .a1de-cancel-disabled {
	color: #888;
	font-style: italic;
}

.a1de-bookings-account .a1de-slot-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.a1de-bookings-account .a1de-spinner {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	border: 2px solid rgba(255, 255, 255, 0.25);
	border-top-color: var(--red, #D01010);
	border-radius: 50%;
	animation: a1de-spin 0.7s linear infinite;
}

@keyframes a1de-spin {
	to {
		transform: rotate(360deg);
	}
}

.a1de-bookings-account #a1de-booking-app p {
	margin-bottom: 1em;
}

.a1de-bookings-account #a1de-booking-app label {
	display: block;
	margin-bottom: 0.4em;
	font-family: var(--font-display, inherit);
	font-weight: 700;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--gray, #999);
}

.a1de-bookings-account #a1de-booking-app select,
.a1de-bookings-account #a1de-booking-app input[type="date"] {
	width: 100%;
	max-width: 320px;
	padding: 10px 14px;
	background-color: var(--charcoal, #161616);
	border: 1px solid #333;
	border-radius: 6px;
	color: var(--white, #fff);
	font-size: 0.95rem;
	appearance: none;
}

.a1de-bookings-account #a1de-booking-app select {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23999' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 10px 7px;
	padding-right: 36px;
}

.a1de-bookings-account #a1de-booking-app input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(0.8);
	cursor: pointer;
}

.a1de-bookings-account #a1de-booking-app select:focus,
.a1de-bookings-account #a1de-booking-app input[type="date"]:focus {
	outline: none;
	border-color: var(--red, #D01010);
	box-shadow: 0 0 0 3px rgba(208, 16, 16, 0.15);
}

/* ═══ Tooltips (buttons, links & spans — form controls use native title) ═══ */
.a1de-bookings-account [data-tooltip] {
	position: relative;
}

.a1de-bookings-account [data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	background: var(--black, #0A0A0A);
	color: var(--white, #fff);
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0.01em;
	text-transform: none;
	line-height: 1.4;
	white-space: nowrap;
	padding: 8px 12px;
	border: 1px solid rgba(208, 16, 16, 0.4);
	border-radius: 2px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s, transform 0.15s;
	z-index: 20;
}

.a1de-bookings-account [data-tooltip]::before {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	width: 0;
	height: 0;
	border: 5px solid transparent;
	border-top-color: rgba(208, 16, 16, 0.4);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s, transform 0.15s;
	z-index: 20;
}

.a1de-bookings-account [data-tooltip]:hover::after,
.a1de-bookings-account [data-tooltip]:hover::before,
.a1de-bookings-account [data-tooltip]:focus-visible::after,
.a1de-bookings-account [data-tooltip]:focus-visible::before {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/* ═══ Online booking turned off — call-in notice ═══ */
.a1de-bookings-account .a1de-booking-closed-notice {
	padding: 1.5em 1.25em;
	background-color: var(--charcoal, #161616);
	border: 1px solid var(--red, #D01010);
	border-radius: 8px;
	text-align: center;
}

.a1de-bookings-account .a1de-booking-closed-title {
	margin: 0 0 0.5em;
	font-family: var(--font-display, 'Barlow Condensed', sans-serif);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--red, #D01010);
}

.a1de-bookings-account .a1de-booking-closed-message {
	margin: 0 auto 1em;
	max-width: 480px;
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--white, #fff);
}

.a1de-bookings-account .a1de-booking-closed-phone {
	margin: 0;
}

.a1de-bookings-account .a1de-booking-closed-phone a {
	display: inline-block;
	padding: 0.65em 1.5em;
	background-color: var(--red, #D01010);
	border-radius: 6px;
	font-family: var(--font-display, 'Barlow Condensed', sans-serif);
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: 0.03em;
	color: var(--white, #fff);
	text-decoration: none;
}

.a1de-bookings-account .a1de-booking-closed-phone a:hover,
.a1de-bookings-account .a1de-booking-closed-phone a:focus {
	background-color: #a80d0d;
	color: var(--white, #fff);
}

/* ═══ Availability requests (shown while student booking is off) ═══ */
.a1de-bookings-account .a1de-availability {
	margin-top: 1.25em;
}

.a1de-bookings-account .a1de-availability-no-hours {
	margin: 0 0 1em;
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--gray, #999);
}

.a1de-bookings-account .a1de-availability-last {
	margin: 0 0 0.75em;
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size: 0.82rem;
	color: var(--gray, #999);
}

.a1de-bookings-account .a1de-availability-label {
	display: block;
	margin-bottom: 0.5em;
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--white, #fff);
}

/*
 * Instructions under the label. Quieter than the label but not as faint as the
 * hint beside the button - this is meant to be read before typing, not glanced
 * at afterwards.
 */
.a1de-bookings-account .a1de-availability-help {
	margin: 0 0 0.75em;
	max-width: 560px;
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size: 0.82rem;
	line-height: 1.6;
	color: var(--gray, #999);
}

.a1de-bookings-account .a1de-availability-text {
	width: 100%;
	max-width: 100%;
	padding: 0.75em 0.9em;
	background-color: var(--charcoal, #161616);
	border: 1px solid #333;
	border-radius: 6px;
	color: var(--white, #fff);
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size: 0.9rem;
	line-height: 1.6;
	resize: vertical;
}

.a1de-bookings-account .a1de-availability-text:focus {
	outline: none;
	border-color: var(--red, #D01010);
}

.a1de-bookings-account .a1de-availability-text::placeholder {
	color: #6b6b6b;
	font-style: italic;
}

.a1de-bookings-account .a1de-availability-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75em 1em;
	margin-top: 0.85em;
}

.a1de-bookings-account .a1de-availability-hint {
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size: 0.82rem;
	color: var(--gray, #999);
}

.a1de-bookings-account .a1de-availability-feedback {
	margin: 0.75em 0 0;
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--gray, #999);
}

.a1de-bookings-account .a1de-availability-feedback:empty {
	display: none;
}

.a1de-bookings-account .a1de-availability-feedback.is-error {
	color: var(--red, #D01010);
}

.a1de-bookings-account .a1de-availability-sent {
	padding: 1em 1.25em;
	background-color: var(--charcoal, #161616);
	border: 1px solid #2f6b46;
	border-left: 3px solid #3d9968;
	border-radius: 8px;
}

.a1de-bookings-account .a1de-availability-sent-title {
	margin: 0 0 0.35em;
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--white, #fff);
}

.a1de-bookings-account .a1de-availability-sent-wait {
	margin: 0;
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--gray, #999);
}

.a1de-bookings-account .a1de-availability-sent-wait a {
	color: var(--white, #fff);
	text-decoration: underline;
	white-space: nowrap;
}
/* ═══ Bookings tables render as a stack of cards at every width ═══ */

/*
 * Same treatment as the instructor dashboard. A five-column table cannot hold
 * its shape on a phone - the Cancel button was being clipped off the right
 * edge - and a horizontal scroller hides the one control the row exists for.
 * Turning each row into a labelled card removes the width constraint entirely
 * rather than trying to squeeze columns.
 *
 * These declarations are kept deliberately identical to their counterparts in
 * instructor-dashboard.css. The markup carries a bare `a1de-bookings-table`
 * class, as the instructor dashboard's does - not WooCommerce's
 * `woocommerce-table shop_table`. Those classes style a conventional table
 * (header bar, row rules, a `border-top` on every cell), all of which this
 * layout either hides or has to override, and their `border-color: !important`
 * overrode the divider colour set here. Nothing rendered here needs them.
 */
.a1de-bookings-account table.a1de-bookings-table thead {
	display: none;
}

.a1de-bookings-account table.a1de-bookings-table,
.a1de-bookings-account table.a1de-bookings-table tbody,
.a1de-bookings-account table.a1de-bookings-table tr,
.a1de-bookings-account table.a1de-bookings-table td {
	display: block;
	width: 100%;
}

/* The card outline - all four sides, same as the instructor dashboard. */
.a1de-bookings-account table.a1de-bookings-table tr {
	margin-bottom: 16px;
	padding: 4px 14px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 4px;
}

.a1de-bookings-account table.a1de-bookings-table td {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	text-align: right;
}

/* The card's own border closes the last row; a divider there would double it. */
.a1de-bookings-account table.a1de-bookings-table td:last-child {
	border-bottom: none;
}

.a1de-bookings-account table.a1de-bookings-table td::before {
	content: attr(data-label);
	flex-shrink: 0;
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gray, #999);
	text-align: left;
}

/* The actions cell has no label of its own - the button says what it does. */
.a1de-bookings-account table.a1de-bookings-table td.a1de-actions-cell {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
	text-align: left;
	white-space: normal;
}

.a1de-bookings-account table.a1de-bookings-table td.a1de-actions-cell::before {
	content: none;
}

.a1de-bookings-account table.a1de-bookings-table td.a1de-calendar-cell {
	flex-wrap: wrap;
}

.a1de-bookings-account .a1de-calendar-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
}

/*
 * Deliberately lighter than the Cancel button beside them. Cancel is the
 * destructive, irreversible action in this row and should stay the thing the
 * eye lands on; two more solid buttons would flatten that hierarchy.
 */
.a1de-bookings-account .a1de-calendar-link {
	display: inline-block;
	padding: 0.4em 0.85em;
	border: 1px solid var(--red, #D01010);
	border-radius: 4px;
	background: transparent;
	color: var(--red, #D01010);
	font-family: var(--font-display, 'Barlow Condensed', sans-serif);
	font-weight: 700;
	font-size: 0.8rem;
	line-height: 1.2;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.a1de-bookings-account .a1de-calendar-link:hover,
.a1de-bookings-account .a1de-calendar-link:focus {
	background: var(--red, #D01010);
	color: var(--white, #fff);
	text-decoration: none;
}

/* Keyboard focus needs to stay visible once hover fills the button. */
.a1de-bookings-account .a1de-calendar-link:focus-visible {
	outline: 2px solid var(--white, #fff);
	outline-offset: 2px;
}

@media (max-width: 480px) {
	/* Stack the row's controls full-width so nothing can be clipped. */
	.a1de-bookings-account table.a1de-bookings-table td.a1de-actions-cell {
		flex-direction: column;
		align-items: stretch;
	}

	.a1de-bookings-account table.a1de-bookings-table td.a1de-actions-cell .button,
	.a1de-bookings-account table.a1de-bookings-table td.a1de-actions-cell .a1de-cancel-disabled {
		width: 100%;
		text-align: center;
	}

	.a1de-bookings-account .a1de-calendar-links {
		flex-direction: column;
		align-items: stretch;
		flex: 1;
	}

	.a1de-bookings-account .a1de-calendar-link {
		width: 100%;
		text-align: center;
	}
}

/* ═══ List pagination ═══ */
.a1de-bookings-account .a1de-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 8px;
}

.a1de-bookings-account .a1de-pagination-status {
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	color: var(--gray, #999);
}

/*
 * The student dashboard has no .a1de-btn styling of its own - its buttons come
 * from WooCommerce's .button - so the pager links are styled here rather than
 * inherited, matching the ghost treatment used for the calendar links above.
 */
.a1de-bookings-account .a1de-pagination .a1de-btn {
	display: inline-block;
	padding: 0.4em 0.85em;
	border: 1px solid var(--red, #D01010);
	border-radius: 4px;
	background: transparent;
	color: var(--red, #D01010);
	font-family: var(--font-display, 'Barlow Condensed', sans-serif);
	font-weight: 700;
	font-size: 0.8rem;
	line-height: 1.2;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.a1de-bookings-account .a1de-pagination a.a1de-btn:hover,
.a1de-bookings-account .a1de-pagination a.a1de-btn:focus {
	background: var(--red, #D01010);
	color: var(--white, #fff);
	text-decoration: none;
}

.a1de-bookings-account .a1de-pagination .is-disabled {
	opacity: 0.4;
	pointer-events: none;
}