/**
 * Producer Bookings
 *
 * Lives inside podwires.com, so it borrows the site's tokens rather than
 * introducing a second visual language: --color-accent for anything the
 * visitor can act on, --color-border for structure, Inter throughout.
 *
 * Two decisions worth keeping:
 *   1. Times are set in tabular numerals. A column of times where the digits
 *      do not line up reads as a list of words, not a schedule.
 *   2. Taken slots are shown struck through rather than hidden. Hiding them
 *      makes a fully-booked producer look like one with no hours; showing
 *      them is honest and reads as demand.
 */

.pwbk {
	--pwbk-gap: 20px;
	border: 1px solid var(--color-border, #e2e2ec);
	border-radius: 16px;
	background: var(--color-bg-card, #fff);
	padding: 28px;
	margin: 32px 0;
}

/* ── Header ─────────────────────────────────────────────────────────── */

.pwbk__eyebrow {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--color-accent, #4840b0);
}

.pwbk__title {
	margin: 0;
	font-size: clamp(1.35rem, 3vw, 1.75rem);
	line-height: 1.2;
	color: var(--color-text, #1d1c2e);
}

.pwbk__intro {
	margin: 10px 0 0;
	max-width: 52ch;
	color: var(--color-text-light, #7e7c94);
}

.pwbk__meta {
	display: flex;
	gap: 8px;
	margin: 16px 0 0;
}

.pwbk__pill {
	display: inline-flex;
	align-items: center;
	padding: 5px 11px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--color-accent, #4840b0) 10%, transparent);
	color: var(--color-accent, #4840b0);
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.pwbk__pill--quiet {
	background: var(--color-bg-alt, #f4f4f8);
	color: var(--color-text-muted, #5c5a72);
}

/* ── Day strip ──────────────────────────────────────────────────────── */

.pwbk__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pwbk-gap);
	margin-top: 24px;
}

@media (min-width: 760px) {
	.pwbk__body { grid-template-columns: 300px minmax(0, 1fr); }
}

.pwbk__dates-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.pwbk__month {
	font-size: 13px;
	font-weight: 700;
	color: var(--color-text, #1d1c2e);
}

.pwbk__nav {
	width: 32px;
	height: 32px;
	border: 1px solid var(--color-border, #e2e2ec);
	border-radius: 8px;
	background: transparent;
	color: var(--color-text-muted, #5c5a72);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.pwbk__nav:hover:not(:disabled) { border-color: var(--color-accent, #4840b0); color: var(--color-accent, #4840b0); }
.pwbk__nav:disabled { opacity: .35; cursor: default; }

.pwbk__daystrip {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 6px;
}

.pwbk-day-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 9px 2px;
	border: 1px solid var(--color-border, #e2e2ec);
	border-radius: 10px;
	background: transparent;
	cursor: pointer;
	font-family: inherit;
	font-variant-numeric: tabular-nums;
	transition: border-color .15s, background .15s, color .15s;
}

.pwbk-day-btn__dow {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--color-text-light, #7e7c94);
}

.pwbk-day-btn__num {
	font-size: 15px;
	font-weight: 600;
	color: var(--color-text, #1d1c2e);
}

/* A dot means "there is something here" — cheaper to read than a count. */
.pwbk-day-btn__dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--color-accent, #4840b0);
}

.pwbk-day-btn[data-open="0"] { opacity: .4; cursor: not-allowed; }
.pwbk-day-btn[data-open="0"] .pwbk-day-btn__dot { background: transparent; }
.pwbk-day-btn:hover:not([data-open="0"]) { border-color: var(--color-accent, #4840b0); }

.pwbk-day-btn.is-selected {
	background: var(--color-accent, #4840b0);
	border-color: var(--color-accent, #4840b0);
}
.pwbk-day-btn.is-selected .pwbk-day-btn__dow,
.pwbk-day-btn.is-selected .pwbk-day-btn__num { color: #fff; }
.pwbk-day-btn.is-selected .pwbk-day-btn__dot { background: rgba(255, 255, 255, .85); }

/* ── Slots ──────────────────────────────────────────────────────────── */

.pwbk__slots-label {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	color: var(--color-text, #1d1c2e);
}

.pwbk__slotlist {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	gap: 8px;
	max-height: 268px;
	overflow-y: auto;
}

.pwbk-slot {
	position: relative;
	padding: 11px 8px;
	border: 1px solid var(--color-border, #e2e2ec);
	border-radius: 10px;
	background: transparent;
	color: var(--color-text, #1d1c2e);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: border-color .15s, background .15s, color .15s;
}

.pwbk-slot:hover:not(:disabled) {
	border-color: var(--color-accent, #4840b0);
	background: color-mix(in srgb, var(--color-accent, #4840b0) 6%, transparent);
}

/* Taken: still visible, clearly gone. */
.pwbk-slot:disabled {
	color: var(--color-text-light, #7e7c94);
	background: var(--color-bg-alt, #f4f4f8);
	border-color: transparent;
	cursor: not-allowed;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
	opacity: .7;
}

.pwbk__loading,
.pwbk__empty {
	grid-column: 1 / -1;
	margin: 0;
	padding: 22px 0;
	color: var(--color-text-light, #7e7c94);
	font-size: 14px;
}

/* ── The two clocks ─────────────────────────────────────────────────── */

/*
 * The one element carrying weight. Producers here are in Manila, Auckland and
 * London while clients are in New York and Sydney; a single time is how people
 * miss calls. Both are always shown, and neither is the small print.
 */
.pwbk__zones {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	margin: 20px 0 0;
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--color-bg-alt, #f4f4f8);
	border-left: 3px solid var(--color-accent, #4840b0);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	color: var(--color-text, #1d1c2e);
}

.pwbk__zones b { font-weight: 700; }
.pwbk__zones .pwbk__zone-sep { color: var(--color-border, #e2e2ec); }
.pwbk__zones small { display: block; width: 100%; color: var(--color-text-light, #7e7c94); font-size: 12px; }

/* ── Form ───────────────────────────────────────────────────────────── */

.pwbk__form { margin-top: 22px; border-top: 1px solid var(--color-border, #e2e2ec); padding-top: 22px; }
.pwbk__form-title { margin: 0 0 16px; font-size: 1rem; color: var(--color-text, #1d1c2e); }

.pwbk__field { display: block; margin-bottom: 14px; }
.pwbk__label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--color-text, #1d1c2e); }

.pwbk__field input,
.pwbk__field textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--color-border, #e2e2ec);
	border-radius: 10px;
	font-family: inherit;
	font-size: 15px;
	color: var(--color-text, #1d1c2e);
	background: #fff;
}

.pwbk__field input:focus,
.pwbk__field textarea:focus {
	outline: none;
	border-color: var(--color-accent, #4840b0);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent, #4840b0) 18%, transparent);
}

.pwbk__hint { display: block; margin-top: 5px; font-size: 12px; color: var(--color-text-light, #7e7c94); }

.pwbk__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }

.pwbk__submit {
	padding: 12px 22px;
	border: none;
	border-radius: 10px;
	background: var(--color-accent, #4840b0);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}
.pwbk__submit:hover { background: var(--color-accent-alt, #3d3a80); }
.pwbk__submit:disabled { opacity: .6; cursor: default; }

.pwbk__back {
	padding: 12px 4px;
	border: none;
	background: none;
	color: var(--color-text-muted, #5c5a72);
	font-family: inherit;
	font-size: 14px;
	text-decoration: underline;
	cursor: pointer;
}

.pwbk__error {
	margin: 14px 0 0;
	padding: 11px 14px;
	border-radius: 10px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
	font-size: 14px;
}

/* ── Confirmation ───────────────────────────────────────────────────── */

.pwbk__done { padding: 30px 4px; text-align: center; }
.pwbk__done-mark {
	width: 46px; height: 46px; margin: 0 auto 14px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: color-mix(in srgb, var(--color-accent, #4840b0) 12%, transparent);
	color: var(--color-accent, #4840b0);
	font-size: 22px;
}
.pwbk__done-title { margin: 0 0 8px; font-size: 1.2rem; color: var(--color-text, #1d1c2e); }
.pwbk__done-when { margin: 0 0 6px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pwbk__done-note { margin: 0; color: var(--color-text-light, #7e7c94); font-size: 14px; }

/* ── Dashboard panel ────────────────────────────────────────────────── */

.pwbk-admin__switch { padding-bottom: 18px; border-bottom: 1px solid var(--color-border, #e2e2ec); }

.pwbk-toggle { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.pwbk-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }

.pwbk-toggle__track {
	flex: 0 0 auto;
	width: 42px; height: 24px;
	margin-top: 2px;
	border-radius: 999px;
	background: var(--color-border, #e2e2ec);
	transition: background .18s;
	position: relative;
}
.pwbk-toggle__dot {
	position: absolute; top: 3px; left: 3px;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: #fff;
	transition: transform .18s;
}
.pwbk-toggle input:checked + .pwbk-toggle__track { background: var(--color-accent, #4840b0); }
.pwbk-toggle input:checked + .pwbk-toggle__track .pwbk-toggle__dot { transform: translateX(18px); }
.pwbk-toggle input:focus-visible + .pwbk-toggle__track { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent, #4840b0) 25%, transparent); }

.pwbk-toggle__text strong { display: block; font-size: 15px; color: var(--color-text, #1d1c2e); }
.pwbk-toggle__text span { display: block; margin-top: 2px; font-size: 13px; color: var(--color-text-light, #7e7c94); }

.pwbk-admin__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	margin: 20px 0;
}

.pwbk-admin__field { display: block; }
.pwbk-admin__field > span { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--color-text, #1d1c2e); }
.pwbk-admin__field select,
.pwbk-admin__field input[type="text"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--color-border, #e2e2ec);
	border-radius: 9px;
	font-family: inherit;
	font-size: 14px;
	background: #fff;
	color: var(--color-text, #1d1c2e);
}
.pwbk-admin__field small { display: block; margin-top: 5px; font-size: 12px; color: var(--color-text-light, #7e7c94); }
.pwbk-admin__field--wide { margin-bottom: 22px; }

.pwbk-admin__hours h4,
.pwbk-admin__list h4 { margin: 0 0 4px; font-size: 15px; color: var(--color-text, #1d1c2e); }
.pwbk-admin__hours-note { margin: 0 0 14px; font-size: 13px; color: var(--color-text-light, #7e7c94); }

.pwbk-day {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--color-bg-alt, #f4f4f8);
}
.pwbk-day__toggle { display: flex; align-items: center; gap: 9px; min-width: 140px; font-size: 14px; cursor: pointer; }
.pwbk-day__times { display: flex; align-items: center; gap: 8px; }
.pwbk-day__times input[type="time"] {
	padding: 7px 9px;
	border: 1px solid var(--color-border, #e2e2ec);
	border-radius: 8px;
	font-family: inherit;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}
.pwbk-day__to { font-size: 13px; color: var(--color-text-light, #7e7c94); }
.pwbk-day.is-off .pwbk-day__times { opacity: .35; pointer-events: none; }

.pwbk-admin__save { display: flex; align-items: center; gap: 14px; margin: 22px 0 30px; }
.pwbk-admin__btn {
	padding: 11px 20px;
	border: none;
	border-radius: 10px;
	background: var(--color-accent, #4840b0);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.pwbk-admin__btn:disabled { opacity: .6; cursor: default; }
.pwbk-admin__status { font-size: 13px; color: var(--color-text-light, #7e7c94); }

.pwbk-admin__empty {
	margin: 0;
	padding: 20px;
	border: 1px dashed var(--color-border, #e2e2ec);
	border-radius: 12px;
	color: var(--color-text-light, #7e7c94);
	font-size: 14px;
}

.pwbk-bookings { list-style: none; margin: 12px 0 0; padding: 0; }
.pwbk-bookings__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
	padding: 14px 0;
	border-bottom: 1px solid var(--color-bg-alt, #f4f4f8);
}
@media (min-width: 700px) {
	.pwbk-bookings__item { grid-template-columns: 250px minmax(0, 1fr) auto; align-items: start; gap: 16px; }
}
.pwbk-bookings__when time { display: block; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-text, #1d1c2e); }
.pwbk-bookings__when small { display: block; margin-top: 2px; font-size: 12px; color: var(--color-text-light, #7e7c94); font-variant-numeric: tabular-nums; }
.pwbk-bookings__who strong { display: block; font-size: 14px; }
.pwbk-bookings__who a { font-size: 13px; color: var(--color-accent, #4840b0); }
.pwbk-bookings__topic { margin: 6px 0 0; font-size: 13px; color: var(--color-text-light, #7e7c94); }
.pwbk-bookings__cancel {
	justify-self: start;
	padding: 7px 13px;
	border: 1px solid var(--color-border, #e2e2ec);
	border-radius: 8px;
	background: transparent;
	color: var(--color-text-muted, #5c5a72);
	font-family: inherit;
	font-size: 13px;
	cursor: pointer;
}
.pwbk-bookings__cancel:hover { border-color: #dc2626; color: #dc2626; }

/* ── Floor ──────────────────────────────────────────────────────────── */

/*
 * The panel hides the timezone band, the form and the confirmation with the
 * `hidden` attribute, but a class here sets `display:flex` on .pwbk__zones —
 * and any explicit display wins over hidden's built-in display:none. Without
 * this, an empty band renders under the slots before anyone has picked one.
 */
.pwbk [hidden],
.pwbk-admin [hidden] { display: none !important; }

.pwbk :focus-visible,
.pwbk-admin :focus-visible {
	outline: 2px solid var(--color-accent, #4840b0);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.pwbk *, .pwbk-admin * { transition: none !important; }
}

/* ── Profile sidebar ────────────────────────────────────────────────── */

/*
 * The sidebar is already sticky — see the inline CSS in single-member.php,
 * which pins it below the nav with its own max-height and scroll. Nothing to
 * add here; duplicating those rules with a different --nav-height fallback
 * would only fight them.
 *
 * All this needs is the secondary "Book a call" button that sits under the
 * Contact CTA, giving the panel a way in from the first screen. Profiles here
 * routinely run past a thousand words, so the foot of the page is a long way
 * from where someone decides they want to talk.
 */
.mp-sidebar__cta-btn--book {
	margin-top: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}