/**
 * OCB Bookings — front-end stylesheet.
 *
 * BEM naming mirrors the PHP templates.
 * All colours use CSS custom properties so themes can override them.
 *
 * @package OCB\Bookings
 */

/* ============================================================
   Design tokens
   ============================================================ */
:root {
	--ocb-color-primary:        #2563eb;
	--ocb-color-primary-hover:  #1d4ed8;
	--ocb-color-danger:         #dc2626;
	--ocb-color-danger-hover:   #b91c1c;
	--ocb-color-success-bg:     #f0fdf4;
	--ocb-color-success-border: #86efac;
	--ocb-color-success-text:   #166534;
	--ocb-color-error-bg:       #fef2f2;
	--ocb-color-error-border:   #fca5a5;
	--ocb-color-error-text:     #991b1b;
	--ocb-color-warn-bg:        #fffbeb;
	--ocb-color-warn-border:    #fcd34d;
	--ocb-color-warn-text:      #92400e;
	--ocb-color-surface:        #ffffff;
	--ocb-color-border:         #e5e7eb;
	--ocb-color-muted:          #6b7280;
	--ocb-color-text:           #111827;
	--ocb-radius:               8px;
	--ocb-radius-sm:            4px;
	--ocb-shadow:               0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
	--ocb-font-size-sm:         0.875rem;
	--ocb-font-size-base:       1rem;
	--ocb-font-size-lg:         1.125rem;
	--ocb-font-size-xl:         1.25rem;
	--ocb-font-size-2xl:        1.5rem;
	--ocb-gap:                  1rem;
	--ocb-gap-sm:               0.5rem;
	--ocb-gap-lg:               1.5rem;
}

/* ============================================================
   Shared utilities
   ============================================================ */
.ocb-availability,
.ocb-classes,
.ocb-profile,
.ocb-login,
.ocb-register,
.ocb-reset,
.ocb-my-bookings,
.ocb-teacher-bookings,
.ocb-teacher-search,
.ocb-booking-page,
.ocb-public-profile-page {
	font-family: inherit;
	color: var(--ocb-color-text);
	max-width: 780px;
	margin: 0 auto;
	padding: var(--ocb-gap-lg) var(--ocb-gap);
	box-sizing: border-box;
}

/* Banners */
.ocb-availability__banner,
.ocb-classes__banner,
.ocb-profile__banner,
.ocb-login__banner,
.ocb-register__banner,
.ocb-reset__banner,
.ocb-my-bookings__notice,
.ocb-teacher-bookings__notice {
	padding: 0.75rem 1rem;
	border-radius: var(--ocb-radius-sm);
	margin-bottom: var(--ocb-gap);
	font-size: var(--ocb-font-size-sm);
}
.ocb-availability__banner--error,
.ocb-classes__banner--error,
.ocb-profile__banner--error,
.ocb-login__banner--error,
.ocb-register__banner--error,
.ocb-reset__banner--error {
	background: var(--ocb-color-error-bg);
	border: 1px solid var(--ocb-color-error-border);
	color: var(--ocb-color-error-text);
}
.ocb-availability__banner--success,
.ocb-classes__banner--success,
.ocb-profile__banner--success,
.ocb-login__banner--success,
.ocb-register__banner--success,
.ocb-reset__banner--success {
	background: var(--ocb-color-success-bg);
	border: 1px solid var(--ocb-color-success-border);
	color: var(--ocb-color-success-text);
}

/* Shared empty state */
.ocb-availability__empty,
.ocb-classes__empty,
.ocb-my-bookings__empty,
.ocb-teacher-bookings__empty,
.ocb-teacher-search__empty {
	color: var(--ocb-color-muted);
	font-style: italic;
	padding: var(--ocb-gap) 0;
}

/* Shared hint text */
.ocb-availability__hint,
.ocb-classes__hint,
.ocb-profile__hint,
.ocb-register__hint,
.ocb-reset__hint {
	color: var(--ocb-color-muted);
	font-size: var(--ocb-font-size-sm);
	margin: 0.25rem 0 0;
}

/* Shared buttons */
.ocb-availability__submit,
.ocb-classes__submit,
.ocb-profile__submit,
.ocb-login__submit,
.ocb-register__submit,
.ocb-reset__submit,
.ocb-teacher-search__submit,
.ocb-booking__confirm-button {
	display: inline-block;
	background: var(--ocb-color-primary);
	color: #fff;
	border: none;
	border-radius: var(--ocb-radius-sm);
	padding: 0.625rem 1.25rem;
	font-size: var(--ocb-font-size-base);
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease;
}
.ocb-availability__submit:hover,
.ocb-classes__submit:hover,
.ocb-profile__submit:hover,
.ocb-login__submit:hover,
.ocb-register__submit:hover,
.ocb-reset__submit:hover,
.ocb-teacher-search__submit:hover,
.ocb-booking__confirm-button:hover {
	background: var(--ocb-color-primary-hover);
}

/* Shared form rows */
.ocb-availability__row label,
.ocb-classes__row label,
.ocb-profile__row label,
.ocb-login__row label,
.ocb-register__row label,
.ocb-reset__row label {
	display: block;
	font-size: var(--ocb-font-size-sm);
	font-weight: 600;
	margin-bottom: 0.25rem;
}
.ocb-availability__row input[type="text"],
.ocb-availability__row input[type="time"],
.ocb-availability__row input[type="date"],
.ocb-availability__row input[type="number"],
.ocb-availability__row textarea,
.ocb-availability__row select,
.ocb-classes__row input[type="text"],
.ocb-classes__row input[type="number"],
.ocb-classes__row textarea,
.ocb-classes__row select,
.ocb-profile__row input[type="text"],
.ocb-profile__row input[type="url"],
.ocb-profile__row input[type="number"],
.ocb-profile__row textarea,
.ocb-profile__row select,
.ocb-login__row input[type="text"],
.ocb-login__row input[type="email"],
.ocb-login__row input[type="password"],
.ocb-register__row input[type="text"],
.ocb-register__row input[type="email"],
.ocb-register__row input[type="password"],
.ocb-reset__row input[type="text"],
.ocb-reset__row input[type="email"],
.ocb-reset__row input[type="password"],
.ocb-teacher-search__field input[type="text"],
.ocb-teacher-search__field select {
	width: 100%;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--ocb-color-border);
	border-radius: var(--ocb-radius-sm);
	font-size: var(--ocb-font-size-base);
	background: var(--ocb-color-surface);
	box-sizing: border-box;
	transition: border-color 0.15s ease;
}
.ocb-availability__row input:focus,
.ocb-classes__row input:focus,
.ocb-classes__row textarea:focus,
.ocb-profile__row input:focus,
.ocb-profile__row textarea:focus,
.ocb-profile__row select:focus,
.ocb-login__row input:focus,
.ocb-register__row input:focus,
.ocb-reset__row input:focus,
.ocb-teacher-search__field input:focus,
.ocb-teacher-search__field select:focus {
	outline: none;
	border-color: var(--ocb-color-primary);
	box-shadow: 0 0 0 3px rgb(37 99 235 / .15);
}

/* ============================================================
   Availability editor (TCH-4 / TCH-5)
   ============================================================ */
.ocb-availability__header {
	margin-bottom: var(--ocb-gap-lg);
}
.ocb-availability__title {
	font-size: var(--ocb-font-size-xl);
	font-weight: 700;
	margin: 0 0 0.25rem;
}
.ocb-availability__timezone {
	font-size: var(--ocb-font-size-sm);
	color: var(--ocb-color-muted);
	margin: 0;
}
.ocb-availability__timezone--missing {
	color: var(--ocb-color-warn-text);
	background: var(--ocb-color-warn-bg);
	border: 1px solid var(--ocb-color-warn-border);
	padding: 0.5rem 0.75rem;
	border-radius: var(--ocb-radius-sm);
}
.ocb-availability__day {
	border: 1px solid var(--ocb-color-border);
	border-radius: var(--ocb-radius);
	padding: var(--ocb-gap);
	margin-bottom: var(--ocb-gap-sm);
}
.ocb-availability__day-name {
	font-size: var(--ocb-font-size-base);
	font-weight: 700;
	padding: 0 0.25rem;
}
.ocb-availability__rows {
	margin-bottom: var(--ocb-gap-sm);
}
.ocb-availability__row[data-ocb-row] {
	display: flex;
	align-items: center;
	gap: var(--ocb-gap-sm);
	margin-bottom: var(--ocb-gap-sm);
}
.ocb-availability__row[data-ocb-row] {
	display: flex;
	align-items: center;
	gap: var(--ocb-gap-sm);
}
.ocb-availability__time-input {
	width: 130px;
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--ocb-color-border);
	border-radius: var(--ocb-radius-sm);
	font-size: var(--ocb-font-size-base);
	background: var(--ocb-color-surface);
}
.ocb-availability__time-input:focus {
	outline: none;
	border-color: var(--ocb-color-primary);
	box-shadow: 0 0 0 3px rgb(37 99 235 / .15);
}
.ocb-availability__row-sep {
	color: var(--ocb-color-muted);
}
.ocb-availability__remove-row {
	background: none;
	border: 1px solid var(--ocb-color-border);
	border-radius: var(--ocb-radius-sm);
	color: var(--ocb-color-muted);
	cursor: pointer;
	padding: 0.2rem 0.5rem;
	font-size: 1rem;
	line-height: 1;
	transition: color 0.15s, border-color 0.15s;
}
.ocb-availability__remove-row:hover {
	color: var(--ocb-color-danger);
	border-color: var(--ocb-color-danger);
}
.ocb-availability__add-row {
	background: none;
	border: 1px dashed var(--ocb-color-primary);
	border-radius: var(--ocb-radius-sm);
	color: var(--ocb-color-primary);
	cursor: pointer;
	padding: 0.3rem 0.75rem;
	font-size: var(--ocb-font-size-sm);
	font-weight: 600;
	transition: background 0.15s;
}
.ocb-availability__add-row:hover {
	background: rgb(37 99 235 / .06);
}
.ocb-availability__submit-row {
	margin-top: var(--ocb-gap-lg);
}

/* Exceptions section */
.ocb-availability__exceptions {
	margin-top: 2.5rem;
	padding-top: var(--ocb-gap-lg);
	border-top: 2px solid var(--ocb-color-border);
}
.ocb-availability__exceptions-header {
	margin-bottom: var(--ocb-gap);
}
.ocb-availability__exceptions-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--ocb-font-size-sm);
	margin-bottom: var(--ocb-gap-lg);
}
.ocb-availability__exceptions-table th,
.ocb-availability__exceptions-table td {
	text-align: left;
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--ocb-color-border);
}
.ocb-availability__exceptions-table th {
	font-weight: 700;
	background: #f9fafb;
}
.ocb-availability__exception-add {
	background: #f9fafb;
	border: 1px solid var(--ocb-color-border);
	border-radius: var(--ocb-radius);
	padding: var(--ocb-gap);
	margin-top: var(--ocb-gap);
}
.ocb-availability__exception-add-title {
	font-size: var(--ocb-font-size-lg);
	font-weight: 700;
	margin: 0 0 var(--ocb-gap);
}
.ocb-availability__radio {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.35rem;
	font-size: var(--ocb-font-size-sm);
	cursor: pointer;
}
.ocb-availability__row--times {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ocb-gap-sm);
}
.ocb-availability__row--times label {
	font-size: var(--ocb-font-size-sm);
	font-weight: 600;
	margin: 0;
}
.ocb-availability__row--times input[type="time"] {
	width: 130px;
}
.ocb-availability__inline-form {
	display: inline;
}
.ocb-availability__action {
	background: none;
	border: none;
	cursor: pointer;
	font-size: var(--ocb-font-size-sm);
	padding: 0.2rem 0.5rem;
	border-radius: var(--ocb-radius-sm);
}
.ocb-availability__action--delete {
	color: var(--ocb-color-danger);
	border: 1px solid var(--ocb-color-danger);
}
.ocb-availability__action--delete:hover {
	background: var(--ocb-color-error-bg);
}

/* ============================================================
   Teacher classes dashboard (TCH-1)
   ============================================================ */
.ocb-classes__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--ocb-gap-sm);
	margin-bottom: var(--ocb-gap-lg);
}
.ocb-classes__title {
	font-size: var(--ocb-font-size-xl);
	font-weight: 700;
	margin: 0;
}
.ocb-classes__new-button {
	display: inline-block;
	background: var(--ocb-color-primary);
	color: #fff;
	border: none;
	border-radius: var(--ocb-radius-sm);
	padding: 0.5rem 1rem;
	font-size: var(--ocb-font-size-sm);
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s;
}
.ocb-classes__new-button:hover {
	background: var(--ocb-color-primary-hover);
	color: #fff;
}
.ocb-classes__table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--ocb-font-size-sm);
}
.ocb-classes__table th,
.ocb-classes__table td {
	text-align: left;
	padding: 0.625rem 0.75rem;
	border-bottom: 1px solid var(--ocb-color-border);
	vertical-align: middle;
}
.ocb-classes__table th {
	font-weight: 700;
	background: #f9fafb;
}
.ocb-classes__status {
	display: inline-block;
	padding: 0.2rem 0.5rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background: var(--ocb-color-border);
	color: var(--ocb-color-muted);
}
.ocb-classes__status--published {
	background: #dcfce7;
	color: #15803d;
}
.ocb-classes__status--draft {
	background: #fef9c3;
	color: #854d0e;
}
.ocb-classes__status--archived {
	background: #f3f4f6;
	color: var(--ocb-color-muted);
}
.ocb-classes__row-actions {
	display: flex;
	gap: 0.35rem;
	flex-wrap: wrap;
}
.ocb-classes__action {
	background: none;
	border: 1px solid var(--ocb-color-border);
	border-radius: var(--ocb-radius-sm);
	padding: 0.2rem 0.5rem;
	font-size: 0.75rem;
	cursor: pointer;
	text-decoration: none;
	color: var(--ocb-color-text);
	transition: border-color 0.15s, color 0.15s;
}
.ocb-classes__action:hover {
	border-color: var(--ocb-color-primary);
	color: var(--ocb-color-primary);
}
.ocb-classes__action--delete {
	color: var(--ocb-color-danger);
	border-color: var(--ocb-color-danger);
}
.ocb-classes__action--delete:hover {
	background: var(--ocb-color-error-bg);
}
.ocb-classes__form {
	max-width: 640px;
}
.ocb-classes__row {
	margin-bottom: var(--ocb-gap);
}
.ocb-classes__row--submit {
	margin-top: var(--ocb-gap-lg);
}
.ocb-classes__back {
	display: inline-block;
	color: var(--ocb-color-primary);
	text-decoration: none;
	font-size: var(--ocb-font-size-sm);
	margin-bottom: var(--ocb-gap);
}
.ocb-classes__back:hover {
	text-decoration: underline;
}
.ocb-classes__sub {
	font-size: var(--ocb-font-size-sm);
	color: var(--ocb-color-muted);
}
.ocb-classes__price-currency {
	font-weight: 600;
	margin-right: 0.2rem;
}

/* ============================================================
   Teacher profile editor (PRF-1)
   ============================================================ */
.ocb-profile__title {
	font-size: var(--ocb-font-size-xl);
	font-weight: 700;
	margin: 0 0 var(--ocb-gap-lg);
}
.ocb-profile__row {
	margin-bottom: var(--ocb-gap);
}
.ocb-profile__row--submit {
	margin-top: var(--ocb-gap-lg);
}
.ocb-profile__sub {
	font-size: var(--ocb-font-size-sm);
	color: var(--ocb-color-muted);
}
.ocb-profile__subject {
	display: inline-block;
	background: #eff6ff;
	color: var(--ocb-color-primary);
	border-radius: 999px;
	padding: 0.2rem 0.65rem;
	font-size: 0.75rem;
	font-weight: 600;
	margin: 0.2rem 0.2rem 0.2rem 0;
}
.ocb-profile__photo-preview {
	display: block;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--ocb-color-border);
	margin-bottom: var(--ocb-gap-sm);
}
.ocb-profile__provider {
	display: flex;
	align-items: center;
	gap: var(--ocb-gap-sm);
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--ocb-color-border);
	border-radius: var(--ocb-radius-sm);
	font-size: var(--ocb-font-size-sm);
	background: #f9fafb;
}

/* ============================================================
   Login / Register / Reset forms
   ============================================================ */
.ocb-login,
.ocb-register,
.ocb-reset {
	max-width: 440px;
}
.ocb-login__row,
.ocb-register__row,
.ocb-reset__row {
	margin-bottom: var(--ocb-gap);
}
.ocb-login__row--submit,
.ocb-register__row--submit,
.ocb-reset__row--submit {
	margin-top: var(--ocb-gap-lg);
}
.ocb-login__row--forgot {
	font-size: var(--ocb-font-size-sm);
}
.ocb-login__row--remember {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--ocb-font-size-sm);
}
.ocb-register__role {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.35rem;
	font-size: var(--ocb-font-size-sm);
	cursor: pointer;
}
.ocb-reset__intro {
	color: var(--ocb-color-muted);
	font-size: var(--ocb-font-size-sm);
	margin-bottom: var(--ocb-gap);
}

/* ============================================================
   Teacher search (BKG-1)
   ============================================================ */
.ocb-teacher-search__form {
	background: #f9fafb;
	border: 1px solid var(--ocb-color-border);
	border-radius: var(--ocb-radius);
	padding: var(--ocb-gap);
	margin-bottom: var(--ocb-gap-lg);
	display: flex;
	flex-wrap: wrap;
	gap: var(--ocb-gap-sm);
	align-items: flex-end;
}
.ocb-teacher-search__field {
	flex: 1 1 200px;
	min-width: 0;
}
.ocb-teacher-search__field label {
	display: block;
	font-size: var(--ocb-font-size-sm);
	font-weight: 600;
	margin-bottom: 0.25rem;
}
.ocb-teacher-search__actions {
	display: flex;
	gap: var(--ocb-gap-sm);
	align-items: flex-end;
}
.ocb-teacher-search__reset {
	background: none;
	border: 1px solid var(--ocb-color-border);
	border-radius: var(--ocb-radius-sm);
	color: var(--ocb-color-muted);
	padding: 0.5rem 0.75rem;
	font-size: var(--ocb-font-size-sm);
	cursor: pointer;
	text-decoration: none;
	transition: border-color 0.15s;
}
.ocb-teacher-search__reset:hover {
	border-color: var(--ocb-color-primary);
	color: var(--ocb-color-primary);
}
.ocb-teacher-search__results-meta {
	font-size: var(--ocb-font-size-sm);
	color: var(--ocb-color-muted);
	margin-bottom: var(--ocb-gap);
}
.ocb-teacher-search__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--ocb-gap);
}
.ocb-teacher-search__pagination {
	display: flex;
	justify-content: center;
	gap: var(--ocb-gap-sm);
	margin-top: var(--ocb-gap-lg);
	flex-wrap: wrap;
}
.ocb-teacher-search__cell a {
	text-decoration: none;
	color: inherit;
}

/* Teacher card (BKG-1 grid item) */
.ocb-teacher-card {
	background: var(--ocb-color-surface);
	border: 1px solid var(--ocb-color-border);
	border-radius: var(--ocb-radius);
	box-shadow: var(--ocb-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.15s;
}
.ocb-teacher-card:hover {
	box-shadow: 0 4px 12px 0 rgb(0 0 0 / .12);
}
.ocb-teacher-card__photo {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	background: #f3f4f6;
	display: block;
}
.ocb-teacher-card__photo-link {
	display: block;
	overflow: hidden;
}
.ocb-teacher-card__body {
	padding: 0.75rem;
	flex: 1;
}
.ocb-teacher-card__name {
	font-size: var(--ocb-font-size-base);
	font-weight: 700;
	margin: 0 0 0.25rem;
}
.ocb-teacher-card__headline {
	font-size: var(--ocb-font-size-sm);
	color: var(--ocb-color-muted);
	margin: 0 0 0.5rem;
}
.ocb-teacher-card__subjects {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin-bottom: 0.5rem;
}
.ocb-teacher-card__subject {
	background: #eff6ff;
	color: var(--ocb-color-primary);
	border-radius: 999px;
	padding: 0.15rem 0.55rem;
	font-size: 0.75rem;
	font-weight: 600;
}
.ocb-teacher-card__subject--more {
	background: #f3f4f6;
	color: var(--ocb-color-muted);
}
.ocb-teacher-card__rate {
	font-size: var(--ocb-font-size-sm);
	color: var(--ocb-color-muted);
}
.ocb-teacher-card__rate-value {
	font-weight: 700;
	color: var(--ocb-color-text);
}
.ocb-teacher-card__cta {
	display: block;
	text-align: center;
	background: var(--ocb-color-primary);
	color: #fff;
	padding: 0.5rem;
	font-size: var(--ocb-font-size-sm);
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s;
}
.ocb-teacher-card__cta:hover {
	background: var(--ocb-color-primary-hover);
	color: #fff;
}

/* ============================================================
   Public teacher profile (PRF-2)
   ============================================================ */
.ocb-public-profile {
	max-width: 780px;
	margin: 0 auto;
}
.ocb-public-profile__header {
	display: flex;
	align-items: flex-start;
	gap: var(--ocb-gap-lg);
	margin-bottom: var(--ocb-gap-lg);
	flex-wrap: wrap;
}
.ocb-public-profile__photo {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--ocb-color-border);
	flex-shrink: 0;
}
.ocb-public-profile__placeholder {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: #f3f4f6;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5rem;
	flex-shrink: 0;
}
.ocb-public-profile__name {
	font-size: var(--ocb-font-size-2xl);
	font-weight: 700;
	margin: 0 0 0.25rem;
}
.ocb-public-profile__headline {
	font-size: var(--ocb-font-size-lg);
	color: var(--ocb-color-muted);
	margin: 0 0 0.5rem;
}
.ocb-public-profile__subjects {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-bottom: 0.5rem;
}
.ocb-public-profile__subject {
	background: #eff6ff;
	color: var(--ocb-color-primary);
	border-radius: 999px;
	padding: 0.2rem 0.65rem;
	font-size: 0.75rem;
	font-weight: 700;
}
.ocb-public-profile__rate {
	font-size: var(--ocb-font-size-sm);
	color: var(--ocb-color-muted);
}
.ocb-public-profile__rate-value {
	font-weight: 700;
	color: var(--ocb-color-text);
}
.ocb-public-profile__section-title {
	font-size: var(--ocb-font-size-lg);
	font-weight: 700;
	margin: 0 0 var(--ocb-gap-sm);
	padding-top: var(--ocb-gap-lg);
	border-top: 1px solid var(--ocb-color-border);
}
.ocb-public-profile__bio {
	line-height: 1.7;
	color: var(--ocb-color-text);
}

/* Class card on public profile */
.ocb-teacher-classes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--ocb-gap);
}
.ocb-class-card {
	background: var(--ocb-color-surface);
	border: 1px solid var(--ocb-color-border);
	border-radius: var(--ocb-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--ocb-shadow);
}
.ocb-class-card__header {
	padding: 0.75rem;
	border-bottom: 1px solid var(--ocb-color-border);
	background: #f9fafb;
}
.ocb-class-card__title {
	font-size: var(--ocb-font-size-base);
	font-weight: 700;
	margin: 0 0 0.25rem;
}
.ocb-class-card__description {
	font-size: var(--ocb-font-size-sm);
	color: var(--ocb-color-muted);
	margin: 0;
}
.ocb-class-card__footer {
	padding: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
}
.ocb-class-card__duration,
.ocb-class-card__price {
	font-size: var(--ocb-font-size-sm);
	color: var(--ocb-color-muted);
}
.ocb-class-card__price {
	font-weight: 700;
	color: var(--ocb-color-text);
}
.ocb-class-card__book {
	display: inline-block;
	background: var(--ocb-color-primary);
	color: #fff;
	padding: 0.4rem 0.9rem;
	border-radius: var(--ocb-radius-sm);
	font-size: var(--ocb-font-size-sm);
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s;
}
.ocb-class-card__book:hover {
	background: var(--ocb-color-primary-hover);
	color: #fff;
}

/* ============================================================
   Booking calendar (BKG-3)
   ============================================================ */
.ocb-booking__header {
	margin-bottom: var(--ocb-gap);
}
.ocb-booking__back {
	display: inline-block;
	color: var(--ocb-color-primary);
	text-decoration: none;
	font-size: var(--ocb-font-size-sm);
	margin-bottom: var(--ocb-gap-sm);
}
.ocb-booking__back:hover { text-decoration: underline; }
.ocb-booking__teacher {
	display: flex;
	align-items: center;
	gap: var(--ocb-gap-sm);
	margin-bottom: var(--ocb-gap-sm);
}
.ocb-booking__photo {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--ocb-color-border);
}
.ocb-booking__name {
	font-size: var(--ocb-font-size-lg);
	font-weight: 700;
}
.ocb-booking__class-switcher {
	display: flex;
	align-items: center;
	gap: var(--ocb-gap-sm);
	margin-bottom: var(--ocb-gap-lg);
	flex-wrap: wrap;
}
.ocb-booking__class-switcher label {
	font-size: var(--ocb-font-size-sm);
	font-weight: 600;
}
.ocb-booking__class-switcher select {
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--ocb-color-border);
	border-radius: var(--ocb-radius-sm);
	font-size: var(--ocb-font-size-sm);
}
.ocb-booking__class-switch-submit {
	padding: 0.4rem 0.75rem;
	background: #f3f4f6;
	border: 1px solid var(--ocb-color-border);
	border-radius: var(--ocb-radius-sm);
	font-size: var(--ocb-font-size-sm);
	cursor: pointer;
}
.ocb-booking__date-strip-list {
	display: flex;
	overflow-x: auto;
	gap: var(--ocb-gap-sm);
	padding-bottom: 0.5rem;
	margin-bottom: var(--ocb-gap);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.ocb-booking__date-strip-item {
	flex-shrink: 0;
}
.ocb-booking__date-pill {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0.5rem 0.75rem;
	border: 2px solid var(--ocb-color-border);
	border-radius: var(--ocb-radius);
	cursor: pointer;
	text-decoration: none;
	color: var(--ocb-color-text);
	transition: border-color 0.15s, background 0.15s;
	min-width: 64px;
}
.ocb-booking__date-pill:hover,
.ocb-booking__date-pill[aria-current="true"] {
	border-color: var(--ocb-color-primary);
	background: #eff6ff;
	color: var(--ocb-color-primary);
}
.ocb-booking__date-pill-weekday {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.ocb-booking__date-pill-day {
	font-size: var(--ocb-font-size-xl);
	font-weight: 700;
	line-height: 1.1;
}
.ocb-booking__date-pill-month {
	font-size: 0.7rem;
	text-transform: uppercase;
}
.ocb-booking__date-pill-count {
	font-size: 0.7rem;
	background: var(--ocb-color-primary);
	color: #fff;
	border-radius: 999px;
	padding: 0.05rem 0.4rem;
	margin-top: 0.2rem;
}
.ocb-booking__slot-list-heading {
	font-size: var(--ocb-font-size-base);
	font-weight: 700;
	margin: 0 0 var(--ocb-gap-sm);
}
.ocb-booking__slot-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ocb-gap-sm);
	margin-bottom: var(--ocb-gap-lg);
}
.ocb-booking__slots-item { list-style: none; }
.ocb-booking__slot {
	display: inline-block;
	padding: 0.5rem 1rem;
	border: 2px solid var(--ocb-color-border);
	border-radius: var(--ocb-radius);
	font-size: var(--ocb-font-size-sm);
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	color: var(--ocb-color-text);
	transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.ocb-booking__slot:hover,
.ocb-booking__slot[aria-selected="true"] {
	border-color: var(--ocb-color-primary);
	background: #eff6ff;
	color: var(--ocb-color-primary);
}
.ocb-booking__confirm {
	background: #f9fafb;
	border: 1px solid var(--ocb-color-border);
	border-radius: var(--ocb-radius);
	padding: var(--ocb-gap);
}
.ocb-booking__confirm-heading {
	font-size: var(--ocb-font-size-lg);
	font-weight: 700;
	margin: 0 0 var(--ocb-gap-sm);
}
.ocb-booking__confirm-summary {
	font-size: var(--ocb-font-size-sm);
	color: var(--ocb-color-muted);
	margin-bottom: var(--ocb-gap);
}
.ocb-booking__confirm-duration {
	font-size: var(--ocb-font-size-sm);
	color: var(--ocb-color-muted);
}
.ocb-booking__confirm-actions {
	display: flex;
	gap: var(--ocb-gap-sm);
	margin-top: var(--ocb-gap);
}
.ocb-booking__confirm-back {
	background: none;
	border: 1px solid var(--ocb-color-border);
	border-radius: var(--ocb-radius-sm);
	padding: 0.5rem 1rem;
	font-size: var(--ocb-font-size-sm);
	cursor: pointer;
	text-decoration: none;
	color: var(--ocb-color-text);
}
.ocb-booking__tz-note {
	font-size: 0.75rem;
	color: var(--ocb-color-muted);
	margin-top: var(--ocb-gap-sm);
}

/* ============================================================
   Student: My Bookings (BKG-6)
   ============================================================ */
.ocb-my-bookings__header {
	margin-bottom: var(--ocb-gap-lg);
}
.ocb-my-bookings__title {
	font-size: var(--ocb-font-size-xl);
	font-weight: 700;
	margin: 0;
}
.ocb-my-bookings__section-heading {
	font-size: var(--ocb-font-size-lg);
	font-weight: 700;
	margin: var(--ocb-gap-lg) 0 var(--ocb-gap-sm);
	padding-top: var(--ocb-gap-lg);
	border-top: 1px solid var(--ocb-color-border);
}
.ocb-my-bookings__section:first-of-type .ocb-my-bookings__section-heading {
	border-top: none;
	padding-top: 0;
	margin-top: 0;
}
.ocb-my-bookings__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--ocb-gap);
}
.ocb-booking-card {
	background: var(--ocb-color-surface);
	border: 1px solid var(--ocb-color-border);
	border-radius: var(--ocb-radius);
	box-shadow: var(--ocb-shadow);
	overflow: hidden;
}
.ocb-booking-card__photo {
	width: 100%;
	height: 120px;
	object-fit: cover;
	background: #f3f4f6;
	display: block;
}
.ocb-booking-card__body {
	padding: 0.75rem;
}
.ocb-booking-card__title {
	font-size: var(--ocb-font-size-base);
	font-weight: 700;
	margin: 0 0 0.25rem;
}
.ocb-booking-card__teacher,
.ocb-booking-card__when {
	font-size: var(--ocb-font-size-sm);
	color: var(--ocb-color-muted);
	margin: 0 0 0.2rem;
}
.ocb-booking-card__price {
	font-size: var(--ocb-font-size-sm);
	font-weight: 700;
}
.ocb-booking-card__status {
	display: inline-block;
	padding: 0.2rem 0.5rem;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-top: 0.3rem;
}
.ocb-booking-card__status--confirmed { background: #dcfce7; color: #15803d; }
.ocb-booking-card__status--pending   { background: #fef9c3; color: #854d0e; }
.ocb-booking-card__status--cancelled { background: #f3f4f6; color: var(--ocb-color-muted); }
.ocb-booking-card__footer {
	padding: 0.5rem 0.75rem;
	border-top: 1px solid var(--ocb-color-border);
	display: flex;
	gap: var(--ocb-gap-sm);
	align-items: center;
	flex-wrap: wrap;
}
.ocb-booking-card__cancel-link {
	color: var(--ocb-color-danger);
	font-size: 0.75rem;
	cursor: pointer;
	text-decoration: none;
}
.ocb-booking-card__cancel-link:hover { text-decoration: underline; }
.ocb-booking-card__rebook {
	font-size: 0.75rem;
	color: var(--ocb-color-primary);
	text-decoration: none;
}
.ocb-booking-card__rebook:hover { text-decoration: underline; }

/* Cancel confirm overlay */
.ocb-my-bookings__confirm-cancel {
	background: var(--ocb-color-error-bg);
	border: 1px solid var(--ocb-color-error-border);
	border-radius: var(--ocb-radius);
	padding: var(--ocb-gap);
	margin-top: var(--ocb-gap);
}
.ocb-my-bookings__confirm-cancel-heading {
	font-size: var(--ocb-font-size-base);
	font-weight: 700;
	margin: 0 0 0.5rem;
	color: var(--ocb-color-error-text);
}
.ocb-my-bookings__confirm-cancel-summary {
	font-size: var(--ocb-font-size-sm);
	color: var(--ocb-color-error-text);
	margin-bottom: var(--ocb-gap-sm);
}
.ocb-my-bookings__confirm-cancel-form {
	display: flex;
	gap: var(--ocb-gap-sm);
	flex-wrap: wrap;
}
.ocb-my-bookings__confirm-cancel-submit {
	background: var(--ocb-color-danger);
	color: #fff;
	border: none;
	border-radius: var(--ocb-radius-sm);
	padding: 0.4rem 0.9rem;
	font-size: var(--ocb-font-size-sm);
	font-weight: 600;
	cursor: pointer;
}
.ocb-my-bookings__confirm-cancel-keep {
	background: none;
	border: 1px solid var(--ocb-color-border);
	border-radius: var(--ocb-radius-sm);
	padding: 0.4rem 0.9rem;
	font-size: var(--ocb-font-size-sm);
	cursor: pointer;
}
.ocb-my-bookings__tz-note {
	font-size: 0.75rem;
	color: var(--ocb-color-muted);
	margin-top: var(--ocb-gap-sm);
}

/* ============================================================
   Teacher: My Bookings (TCH-9) — mirrors student variant
   ============================================================ */
.ocb-teacher-bookings__header { margin-bottom: var(--ocb-gap-lg); }
.ocb-teacher-bookings__title  { font-size: var(--ocb-font-size-xl); font-weight: 700; margin: 0; }
.ocb-teacher-bookings__section-heading {
	font-size: var(--ocb-font-size-lg);
	font-weight: 700;
	margin: var(--ocb-gap-lg) 0 var(--ocb-gap-sm);
	padding-top: var(--ocb-gap-lg);
	border-top: 1px solid var(--ocb-color-border);
}
.ocb-teacher-bookings__section:first-of-type .ocb-teacher-bookings__section-heading {
	border-top: none; padding-top: 0; margin-top: 0;
}
.ocb-teacher-bookings__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--ocb-gap);
}
/* Teacher booking card */
.ocb-tbooking-card {
	background: var(--ocb-color-surface);
	border: 1px solid var(--ocb-color-border);
	border-radius: var(--ocb-radius);
	box-shadow: var(--ocb-shadow);
	overflow: hidden;
}
.ocb-tbooking-card__photo {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--ocb-color-border);
}
.ocb-tbooking-card__body { padding: 0.75rem; }
.ocb-tbooking-card__title { font-size: var(--ocb-font-size-base); font-weight: 700; margin: 0 0 0.25rem; }
.ocb-tbooking-card__student,
.ocb-tbooking-card__when   { font-size: var(--ocb-font-size-sm); color: var(--ocb-color-muted); margin: 0 0 0.2rem; }
.ocb-tbooking-card__earnings { font-size: var(--ocb-font-size-sm); font-weight: 700; }
.ocb-tbooking-card__status {
	display: inline-block;
	padding: 0.2rem 0.5rem;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-top: 0.3rem;
}
.ocb-tbooking-card__status--confirmed { background: #dcfce7; color: #15803d; }
.ocb-tbooking-card__status--pending   { background: #fef9c3; color: #854d0e; }
.ocb-tbooking-card__status--cancelled { background: #f3f4f6; color: var(--ocb-color-muted); }
.ocb-tbooking-card__footer {
	padding: 0.5rem 0.75rem;
	border-top: 1px solid var(--ocb-color-border);
}
.ocb-tbooking-card__meeting { font-size: var(--ocb-font-size-sm); }
.ocb-tbooking-card__meeting-current { color: var(--ocb-color-muted); }
.ocb-tbooking-card__meeting-link { color: var(--ocb-color-primary); word-break: break-all; }
.ocb-tbooking-card__meeting-hint { font-size: 0.75rem; color: var(--ocb-color-muted); }
.ocb-tbooking-card__meeting-editor { margin-top: 0.35rem; }
.ocb-tbooking-card__meeting-form { display: flex; gap: var(--ocb-gap-sm); flex-wrap: wrap; }
.ocb-tbooking-card__meeting-form input[type="url"] {
	flex: 1 1 200px;
	padding: 0.35rem 0.6rem;
	border: 1px solid var(--ocb-color-border);
	border-radius: var(--ocb-radius-sm);
	font-size: var(--ocb-font-size-sm);
}
.ocb-tbooking-card__meeting-save {
	background: var(--ocb-color-primary);
	color: #fff;
	border: none;
	border-radius: var(--ocb-radius-sm);
	padding: 0.35rem 0.75rem;
	font-size: var(--ocb-font-size-sm);
	font-weight: 600;
	cursor: pointer;
}
.ocb-tbooking-card__price { font-size: var(--ocb-font-size-sm); color: var(--ocb-color-muted); }
.ocb-teacher-bookings__tz-note { font-size: 0.75rem; color: var(--ocb-color-muted); margin-top: var(--ocb-gap-sm); }

/* ============================================================
   Responsive adjustments
   ============================================================ */
@media (max-width: 600px) {
	.ocb-teacher-search__form { flex-direction: column; }
	.ocb-teacher-search__field { flex: 1 1 100%; }
	.ocb-public-profile__header { flex-directi