/**
 * Spray Tan 1:1 Bookings — student dashboard styling.
 * Palette mirrors nj-beauty-brand-polish (cream / espresso / gold).
 */

.stb-wrap,
.stb-dash-links {
	--stb-gold: #C6A769;
	--stb-gold-dark: #A98543;
	--stb-cream: #FFFDF9;
	--stb-ivory: #F8F3EC;
	--stb-canvas: #F1E8DA;
	--stb-espresso: #2A1B14;
	--stb-charcoal: #111111;
	--stb-muted: #6F6259;
	--stb-border: #E8DED3;
	--stb-success: #66785F;
	--stb-warning: #B8864B;
	--stb-error: #9F3D35;
	--stb-radius: 18px;
	--stb-radius-sm: 12px;
	--stb-shadow: 0 18px 45px rgba(42, 27, 20, 0.08);
	--stb-shadow-sm: 0 6px 16px rgba(42, 27, 20, 0.06);
	--stb-font-head: "Playfair Display", "Cormorant Garamond", Georgia, serif;

	color: var(--stb-espresso);
	max-width: 900px;
}

.stb-wrap * { box-sizing: border-box; }

.stb-page-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.stb-h1 { font-family: var(--stb-font-head); font-size: 1.9rem; margin: 0; color: var(--stb-espresso); }
.stb-lede { margin: 6px 0 0; color: var(--stb-muted); line-height: 1.55; max-width: 54ch; font-size: .95rem; }
.stb-h2 { font-family: var(--stb-font-head); font-size: 1.4rem; margin: 0 0 10px; color: var(--stb-espresso); }
.stb-h3 { font-family: var(--stb-font-head); font-size: 1.15rem; margin: 0 0 14px; color: var(--stb-espresso); }
.stb-muted { color: var(--stb-muted); }

.stb-link { color: var(--stb-gold-dark); text-decoration: none; font-weight: 600; font-size: .92rem; }
.stb-link:hover { text-decoration: underline; }

.stb-card {
	background: var(--stb-cream);
	border: 1px solid var(--stb-border);
	border-radius: var(--stb-radius);
	box-shadow: var(--stb-shadow-sm);
	padding: 24px;
	margin-bottom: 18px;
}

.stb-intro { border-top: 3px solid var(--stb-gold); }
.stb-intro p { margin: 0 0 8px; line-height: 1.6; }

.stb-section { margin-bottom: 34px; }
.stb-section:last-child { margin-bottom: 0; }
.stb-section-intro { margin: -6px 0 16px; font-size: .95rem; max-width: 60ch; }

/* ---- Support page: hero, sections, empty state, upcoming, groups -------- */
.stb-eyebrow {
	text-transform: uppercase;
	letter-spacing: .16em;
	font-size: .72rem;
	font-weight: 700;
	color: var(--stb-gold-dark);
	margin: 0 0 6px;
}
.stb-hero {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px 28px;
	flex-wrap: wrap;
	padding-bottom: 22px;
	margin-bottom: 30px;
	border-bottom: 1px solid var(--stb-border);
}
.stb-hero__text { max-width: 60ch; }
.stb-hero .stb-h1 { margin: 0; }
.stb-hero .stb-lede { margin-top: 10px; }
.stb-hero .stb-btn-ghost { flex-shrink: 0; }

.stb-section-head { margin-bottom: 16px; }
.stb-section-head .stb-h2 { margin: 0; position: relative; padding-left: 14px; }
.stb-section-head .stb-h2::before {
	content: "";
	position: absolute;
	left: 0; top: 4px; bottom: 4px;
	width: 4px;
	border-radius: var(--stb-radius-pill, 999px);
	background: var(--stb-gold);
}
.stb-section-head .stb-muted { margin: 6px 0 0 14px; font-size: .92rem; }

/* Friendly empty state */
.stb-empty-state {
	text-align: center;
	padding: 36px 22px;
	background: var(--stb-cream);
	border: 1px dashed var(--stb-border);
	border-radius: var(--stb-radius);
}
.stb-empty-icon { display: block; color: var(--stb-gold-dark); margin: 0 auto 12px; opacity: .9; }
.stb-empty-title { font-family: var(--stb-font-head); font-size: 1.12rem; margin: 0 0 4px; color: var(--stb-espresso); }
.stb-empty-state .stb-muted { margin: 0; font-size: .92rem; }

/* Upcoming lesson cards with a calendar-style date badge */
.stb-upcoming-list { display: flex; flex-direction: column; gap: 12px; }
.stb-upcoming-card {
	display: flex;
	align-items: center;
	gap: 18px;
	background: var(--stb-cream);
	border: 1px solid var(--stb-border);
	border-radius: var(--stb-radius);
	box-shadow: var(--stb-shadow-sm);
	padding: 16px 20px 16px 16px;
	position: relative;
	overflow: hidden;
}
.stb-upcoming-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--stb-gold); }
.stb-date-badge {
	flex-shrink: 0;
	width: 68px;
	text-align: center;
	background: var(--stb-ivory);
	border: 1px solid var(--stb-border);
	border-radius: 14px;
	padding: 9px 6px;
	line-height: 1.15;
}
.stb-date-badge__dow { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: var(--stb-muted); font-weight: 700; }
.stb-date-badge__day { display: block; font-family: var(--stb-font-head); font-size: 1.55rem; font-weight: 700; color: var(--stb-espresso); }
.stb-date-badge__mon { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: var(--stb-gold-dark); font-weight: 700; }
.stb-upcoming-body { flex: 1; min-width: 0; }
.stb-upcoming-title { font-family: var(--stb-font-head); font-size: 1.1rem; margin: 0 0 6px; }
.stb-upcoming-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .88rem; color: var(--stb-muted); }
.stb-dot { color: var(--stb-border); }
.stb-upcoming-action { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

/* Booking picker groups (Zoom / in-person) */
.stb-group + .stb-group { margin-top: 26px; }
.stb-group__head { margin-bottom: 12px; }
.stb-group__title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--stb-font-head);
	font-size: 1.05rem;
	margin: 0;
	color: var(--stb-espresso);
}
.stb-group__title svg { color: var(--stb-gold-dark); }
.stb-group__note { font-size: .86rem; color: var(--stb-muted); margin: 4px 0 0; }

/* Session cards — compact horizontal rows so a single option doesn't stretch
   into a big empty box. Body (meta + title + blurb) on the left, price and the
   action pinned right; collapses to a stacked layout on small screens. */
.stb-session-grid { display: flex; flex-direction: column; gap: 12px; }
.stb-session-card {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 0;
	padding: 14px 18px;
}
.stb-session-body { flex: 1; min-width: 0; }
.stb-session-title { font-family: var(--stb-font-head); font-size: 1.05rem; margin: 6px 0 0; line-height: 1.2; }
.stb-session-desc { color: var(--stb-muted); line-height: 1.4; margin: 3px 0 0; font-size: .82rem; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.stb-session-facts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stb-chip { background: var(--stb-canvas); color: var(--stb-espresso); border-radius: 999px; padding: 3px 10px; font-size: .72rem; font-weight: 600; }
/* Delivery-mode chips — tinted so "Zoom meeting" vs "In person" is obvious at a glance. */
.stb-chip--zoom { background: #E7EEF6; color: #2F567E; }
.stb-chip--inperson { background: #F1E6D2; color: #7A5A24; }
.stb-session-aside {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	flex-shrink: 0;
	text-align: right;
}
.stb-price { font-family: var(--stb-font-head); font-size: 1.15rem; color: var(--stb-gold-dark); font-weight: 700; line-height: 1; white-space: nowrap; }
.stb-session-aside .stb-btn { white-space: nowrap; }

/* Buttons */
.stb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 999px;
	padding: 11px 22px;
	font-weight: 600;
	font-size: .92rem;
	cursor: pointer;
	border: 1px solid transparent;
	text-decoration: none;
	transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
	line-height: 1;
}
.stb-btn-gold { background: var(--stb-gold); color: #2A1B14; box-shadow: var(--stb-shadow-sm); }
.stb-btn-gold:hover { background: var(--stb-gold-dark); color: #fff; transform: translateY(-1px); }
.stb-btn-ghost { background: transparent; border-color: var(--stb-border); color: var(--stb-espresso); }
.stb-btn-ghost:hover { border-color: var(--stb-gold); }
.stb-btn-lg { padding: 14px 30px; font-size: 1rem; }
.stb-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* Steps */
.stb-steps { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.stb-step {
	flex: 1;
	min-width: 120px;
	text-align: center;
	padding: 10px 8px;
	border-radius: var(--stb-radius-sm);
	background: var(--stb-ivory);
	border: 1px solid var(--stb-border);
	color: var(--stb-muted);
	font-size: .85rem;
	font-weight: 600;
	position: relative;
}
.stb-step::before { content: attr(data-step-label); display: inline-flex; width: 20px; height: 20px; border-radius: 999px; background: var(--stb-border); color: #fff; align-items: center; justify-content: center; font-size: .72rem; margin-right: 6px; }
.stb-step.is-active { background: var(--stb-cream); border-color: var(--stb-gold); color: var(--stb-espresso); }
.stb-step.is-active::before { background: var(--stb-gold); color: #2A1B14; }
.stb-step.is-done::before { content: "✓"; background: var(--stb-success); }

/* Picker */
.stb-picker { display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px; }
.stb-picker-col { min-width: 0; }
.stb-label { display: block; font-weight: 600; margin-bottom: 8px; font-size: .9rem; }
.stb-select { width: 100%; padding: 11px 14px; border-radius: var(--stb-radius-sm); border: 1px solid var(--stb-border); background: #fff; font-size: .95rem; color: var(--stb-espresso); }
.stb-tz { font-size: .8rem; color: var(--stb-muted); margin: 8px 0 0; }
.stb-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; }
.stb-slot {
	padding: 12px 8px;
	border-radius: var(--stb-radius-sm);
	border: 1px solid var(--stb-border);
	background: #fff;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	font-size: .9rem;
	color: var(--stb-espresso);
	transition: all .12s ease;
}
.stb-slot:hover { border-color: var(--stb-gold); }
.stb-slot.is-selected { background: var(--stb-gold); border-color: var(--stb-gold-dark); color: #2A1B14; }
.stb-chosen-summary { padding: 12px 16px; background: var(--stb-ivory); border-radius: var(--stb-radius-sm); margin-bottom: 18px; font-weight: 600; }

.stb-step-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.stb-step-nav .stb-btn-gold { margin-left: auto; }

/* Summary */
.stb-summary { margin: 0; }
.stb-summary > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--stb-border); }
.stb-summary > div:last-child { border-bottom: 0; }
.stb-summary dt { color: var(--stb-muted); margin: 0; }
.stb-summary dd { margin: 0; font-weight: 600; text-align: right; }
.stb-fineprint { font-size: .82rem; color: var(--stb-muted); margin-top: 14px; }

/* Booking rows */
.stb-booking-list { display: flex; flex-direction: column; gap: 12px; }
.stb-booking-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 0; padding: 18px 22px; flex-wrap: wrap; }
.stb-booking-title { font-weight: 700; font-size: 1rem; }
.stb-booking-meta { color: var(--stb-muted); font-size: .9rem; margin-top: 3px; }
.stb-booking-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Badges */
.stb-badge { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; font-size: .76rem; font-weight: 700; letter-spacing: .01em; }
.stb-badge-confirmed { background: rgba(102,120,95,.15); color: var(--stb-success); }
.stb-badge-completed { background: var(--stb-canvas); color: var(--stb-espresso); }
.stb-badge-pending_payment, .stb-badge-pending { background: rgba(184,134,75,.16); color: var(--stb-warning); }
.stb-badge-cancelled, .stb-badge-expired, .stb-badge-no_show { background: rgba(159,61,53,.12); color: var(--stb-error); }

/* Confirmed page */
.stb-confirm-card { text-align: center; }
.stb-confirm-card .stb-summary { text-align: left; max-width: 420px; margin: 20px auto; }
.stb-confirm-icon { width: 60px; height: 60px; border-radius: 999px; background: var(--stb-success); color: #fff; font-size: 1.8rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.stb-zoom-slot { margin: 18px 0; }
.stb-location-card { background: var(--stb-ivory); border: 1px solid var(--stb-border); border-radius: var(--stb-radius-sm); padding: 16px 20px; text-align: left; max-width: 420px; margin: 0 auto; }
.stb-location-label { font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--stb-gold-dark); margin-bottom: 6px; }
.stb-location-text { margin: 0; line-height: 1.55; }
.stb-booking-location { margin-top: 6px; font-size: .9rem; color: var(--stb-espresso); background: var(--stb-ivory); border-radius: 10px; padding: 8px 12px; }
.stb-status-cell { text-align: right; }

/* Notices */
.stb-notice { padding: 14px 18px; border-radius: var(--stb-radius-sm); margin-bottom: 18px; font-size: .92rem; }
.stb-notice-warn { background: rgba(184,134,75,.12); color: var(--stb-warning); border: 1px solid rgba(184,134,75,.3); }
.stb-notice-error { background: rgba(159,61,53,.1); color: var(--stb-error); border: 1px solid rgba(159,61,53,.3); }
.stb-loading { color: var(--stb-muted); padding: 20px 0; }
.stb-empty { color: var(--stb-muted); }
.stb-help-card { background: var(--stb-ivory); }
.stb-gate { text-align: center; }
.stb-gate p { margin: 12px 0 20px; color: var(--stb-muted); }

/* Mobile */
@media (max-width: 680px) {
	.stb-picker { grid-template-columns: 1fr; gap: 18px; }
	.stb-booking-row { flex-direction: column; align-items: flex-start; }
	.stb-booking-actions { width: 100%; }
	.stb-booking-actions .stb-btn { flex: 1; }
	.stb-step { min-width: 0; font-size: .78rem; }
	.stb-step::before { display: none; }
	.stb-session-card { flex-direction: column; align-items: stretch; gap: 10px; }
	.stb-session-aside { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; }
	.stb-session-aside .stb-btn { flex: 0 0 auto; }
	.stb-step-nav .stb-btn { flex: 1; }
	.stb-hero { align-items: flex-start; }
	.stb-hero .stb-btn-ghost { width: 100%; }
	/* Upcoming card: keep the date badge + details on row 1 and always drop the
	   action (Join Zoom / status badge) to its own full-width row — flex-basis
	   100% guarantees the wrap so the body never gets squeezed to nothing (which
	   was crushing the title to 4 lines + stacking the time/duration). */
	.stb-upcoming-card { flex-wrap: wrap; align-items: flex-start; padding: 14px; column-gap: 14px; row-gap: 10px; }
	.stb-date-badge { width: 54px; padding: 8px 4px; }
	.stb-date-badge__day { font-size: 1.3rem; }
	.stb-upcoming-body { flex: 1 1 0; min-width: 0; }
	.stb-upcoming-title { font-size: 1rem; line-height: 1.25; margin-bottom: 4px; }
	.stb-upcoming-meta { font-size: .84rem; }
	.stb-upcoming-action { flex: 1 1 100%; width: 100%; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; }
	.stb-upcoming-action .stb-btn { flex: 1; }
}

/* =========================================================
   DASHBOARD-HOME 1:1 support — a slim link row (label + two
   buttons), below the normal content. No card/heading: students
   click through to book or view details.
   ========================================================= */
.stb-dash-links {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	flex-wrap: wrap;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--stb-border);
}

.stb-dash-links__lbl {
	font-weight: 700;
	font-size: .95rem;
	color: var(--stb-espresso);
}

.stb-dash-links__btns {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.stb-btn-sm {
	padding: 8px 16px;
	font-size: .85rem;
}

@media (max-width: 782px) {
	.stb-dash-widget {
		padding: 18px;
	}
	.stb-dash-widget__body {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* -------------------------------------------------------------------------
 * In-person practical-training welcome / joining instructions
 * ---------------------------------------------------------------------- */
.stb-welcome {
	margin-top: 8px;
	padding: 24px 24px 22px;
	border: 1px solid var(--stb-border);
	border-left: 4px solid var(--stb-gold);
	border-radius: var(--stb-radius-sm);
	background: var(--stb-ivory);
	text-align: left;
}

.stb-welcome__title {
	margin: 0 0 14px;
	font-family: var(--stb-font-head);
	font-size: 1.3rem;
	line-height: 1.2;
	color: var(--stb-espresso);
}

.stb-welcome p {
	margin: 0 0 14px;
	font-size: .95rem;
	line-height: 1.65;
	color: var(--stb-espresso);
}

.stb-welcome p.stb-muted {
	color: var(--stb-muted);
}

.stb-welcome__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin: 4px 0 18px;
}

.stb-welcome__block {
	padding: 16px 18px;
	border: 1px solid var(--stb-border);
	border-radius: var(--stb-radius-sm);
	background: var(--stb-cream);
}

.stb-welcome__block h4 {
	margin: 0 0 8px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--stb-gold-dark);
}

.stb-welcome__address {
	font-style: normal;
	font-size: .95rem;
	line-height: 1.6;
	color: var(--stb-espresso);
}

.stb-welcome__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.stb-welcome__list li {
	position: relative;
	padding: 3px 0 3px 20px;
	font-size: .92rem;
	line-height: 1.5;
	color: var(--stb-espresso);
}

.stb-welcome__list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 11px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--stb-gold);
}

.stb-welcome__sign {
	margin-top: 4px !important;
	white-space: normal;
	font-size: .95rem;
	line-height: 1.7;
	color: var(--stb-espresso);
}

@media (max-width: 640px) {
	.stb-welcome {
		padding: 18px 16px;
	}
	.stb-welcome__grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}