/* Login modal (see class-wp-harness-test-public.php::render_login_modal) */
.wht-modal[hidden] { display: none; }
.wht-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; }
.wht-modal__backdrop { position: absolute; inset: 0; background: rgba(58, 53, 45, 0.55); }
.wht-modal__panel {
	position: relative;
	background: var(--studio-cream, #fff);
	color: var(--studio-ink, #2a2a2a);
	border-radius: 16px;
	padding: 32px;
	width: 100%;
	max-width: 380px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.wht-modal__close {
	position: absolute; top: 12px; right: 16px;
	background: none; border: none; font-size: 1.5rem; line-height: 1;
	cursor: pointer; color: inherit;
}
.wht-modal__panel h2 { margin-top: 0; font-weight: 400; }
.wht-modal__panel form p { margin: 0 0 14px; }
.wht-modal__panel label { display: block; margin-bottom: 4px; font-size: 0.9rem; }
.wht-modal__panel input[type="text"],
.wht-modal__panel input[type="password"] {
	width: 100%; padding: 10px 12px; border: 1px solid #d8cdb8; border-radius: 8px;
	font-size: 1rem; box-sizing: border-box;
}
.wht-modal__remember label { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; }
.wht-modal__panel button[type="submit"] {
	width: 100%; border: none; border-radius: 30px; padding: 12px; cursor: pointer;
	background: var(--studio-terracotta, #c17a5a); color: #fff; font-size: 1rem;
}
.wht-modal__signup { margin-top: 16px; font-size: 0.85rem; text-align: center; }
.wht-modal__error {
	background: #fbeaea; color: #a33; border-radius: 8px; padding: 8px 12px;
	font-size: 0.85rem; margin-top: 0;
}
body.wht-modal-open { overflow: hidden; }

/* Schedule modal — shared by the 5 plan buttons (see class-wp-harness-test-schedule.php) */
/* max-height + internal scroll: a fixed-position modal has no natural limit otherwise, and
   at short viewports (laptop screens, browser zoom) the panel could run past the visible
   area with no way to reach the confirm button. */
.wht-modal--wide .wht-modal__panel {
	max-width: 820px; max-height: 90vh; overflow-y: auto;
	padding: 32px; border-radius: 20px;
}
.wht-schedule-panel h2 { font-size: 1.3rem; margin: 0 0 4px; font-weight: 400; }
.wht-schedule-subtitle { margin: 0 0 22px; font-size: 0.9rem; color: var(--studio-ink, #2a2a2a); opacity: 0.75; }

.wht-schedule-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 768px) {
	.wht-schedule-layout { grid-template-columns: 1fr; gap: 28px; }
}

/* Weekly table — days as rows (7), time blocks as columns (4): fewer columns reads better
   than the reverse at any width, and keeps mobile down to 5 columns instead of 8. */
.wht-week-table { width: 100%; border-collapse: separate; border-spacing: 4px; font-size: 0.8rem; margin: 0 -4px; }
.wht-week-table thead th {
	font-weight: 600; font-size: 0.75rem; color: var(--studio-ink, #2a2a2a); opacity: 0.65;
	text-align: center; padding: 0 0 6px; text-transform: uppercase; letter-spacing: 0.03em;
}
.wht-week-table__day-head { text-align: left !important; }
.wht-week-table tbody th {
	text-align: left; padding-right: 6px; font-weight: 600; white-space: nowrap;
	font-size: 0.85rem; color: var(--studio-ink, #2a2a2a);
}
.wht-week-cell { padding: 0; }

/* The tile itself — a real clickable card, not a checkbox with a caption next to it */
.wht-slot {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 3px; min-height: 52px; padding: 6px 4px; cursor: pointer;
	background: #fff; border: 1.5px solid #e4ddd0; border-radius: 10px;
	transition: border-color 0.15s ease, background-color 0.15s ease;
	position: relative;
}
.wht-slot:hover { border-color: var(--studio-sage-deep, #64705a); }
.wht-slot input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wht-slot__mark {
	width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #d8cdb8;
	display: block; flex-shrink: 0;
}
.wht-slot__status { font-size: 0.68rem; color: var(--studio-ink, #2a2a2a); opacity: 0.7; }

.wht-slot:has(input:checked) {
	background: var(--studio-terracotta-deep, #a05f44); border-color: var(--studio-terracotta-deep, #a05f44);
}
.wht-slot:has(input:checked) .wht-slot__mark { background: #fff; border-color: #fff; }
.wht-slot:has(input:checked) .wht-slot__status { color: #fff; opacity: 1; font-weight: 600; }

.wht-slot--full { background: #f5f2ec; cursor: not-allowed; }
.wht-slot--full .wht-slot__mark { border-color: #e4ddd0; }
.wht-slot--full .wht-slot__status { font-style: italic; opacity: 0.5; }
.wht-slot:has(input:disabled) { cursor: not-allowed; }
.wht-slot:has(input:disabled):not(.wht-slot--full) { opacity: 0.45; }

@media (max-width: 480px) {
	.wht-slot { min-height: 44px; }
	.wht-slot__status { font-size: 0.62rem; }
}

.wht-schedule-hold {
	margin-top: 14px; padding: 8px 12px; border-radius: 8px; font-size: 0.85rem;
	background: var(--studio-sage-light, #eef1e7); color: var(--studio-ink, #2a2a2a);
}
.wht-schedule-progress { margin-top: 10px; font-size: 0.85rem; font-weight: 600; }

/* Month calendar */
.wht-calendar-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.wht-calendar-nav span { font-weight: 600; font-size: 0.9rem; }
.wht-calendar-nav button {
	background: none; border: 1px solid #d8cdb8; border-radius: 6px; width: 28px; height: 28px;
	font-size: 1rem; cursor: pointer; color: var(--studio-ink, #2a2a2a);
}
.wht-calendar-nav button:disabled { opacity: 0.3; cursor: not-allowed; }
.wht-cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); font-size: 0.65rem; text-align: center; margin-bottom: 4px; color: #8a8172; }
.wht-cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.wht-cal-day {
	aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
	font-size: 0.75rem; border-radius: 6px; color: var(--studio-ink, #2a2a2a);
}
.wht-cal-day--empty { visibility: hidden; }
.wht-cal-day--out { opacity: 0.3; }
.wht-cal-day--marked { background: var(--studio-terracotta-deep, #a05f44); color: #fff; font-weight: 600; }

.wht-schedule-confirm {
	display: block; width: 100%; margin-top: 20px; border: none; border-radius: 30px;
	padding: 12px; cursor: pointer; font-size: 1rem;
	background: var(--studio-terracotta-deep, #a05f44); color: #fff;
}
.wht-schedule-confirm:disabled { background: #d8cdb8; cursor: not-allowed; }
.wht-schedule-mockup-note { margin-top: 10px; font-size: 0.75rem; font-style: italic; text-align: center; opacity: 0.8; }