/* TSP × Momence live-availability widget — brand-styled slot tiles.
 * Full density: 2-studio side-by-side grid, 7 days of slot pills per column.
 * Compact density: single row with next 3 slots per studio.
 */

.tsp-mavail{
	background: var(--tsp-oat-soft, #F7F2EC);
	border: 2px solid var(--tsp-coffee, #28200E);
	border-radius: 14px;
	padding: 24px 24px 20px;
	color: var(--tsp-coffee, #28200E);
	font-family: var(--body, inherit);
}
.tsp-mavail--loading::before{
	content: 'Loading availability…';
	font-size: 13px;
	font-style: italic;
	color: rgba(40,32,14,.55);
}
.tsp-mavail__head{ margin-bottom: 16px; text-align: center; }
.tsp-mavail__eyebrow{
	display: inline-block;
	font-size: 10px; font-weight: 800; letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--tsp-terracotta, #9F543F);
	margin-bottom: 6px;
}
.tsp-mavail__head h3{
	font-family: var(--tsp-hero-font, 'Lobster', 'DM Serif Display', serif);
	font-size: clamp(1.4rem, 3vw, 2rem);
	margin: 0;
	color: var(--tsp-coffee, #28200E);
	font-weight: 400;
	line-height: 1.1;
}
.tsp-mavail__grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
}
.tsp-mavail__col{
	background: #FFFAF2;
	border: 1.5px solid rgba(40,32,14,.15);
	border-radius: 10px;
	padding: 14px 14px 10px;
}
.tsp-mavail__loc{
	font-size: 11px; font-weight: 800;
	letter-spacing: 1.4px; text-transform: uppercase;
	color: var(--tsp-seaglass, #006976);
	margin-bottom: 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(40,32,14,.12);
}
/* One horizontal flow per studio: all day+time pills in a single wrapping
 * row, ending with a "Search more dates" outline pill. Feels like a calendar
 * strip rather than a stacked day list. */
.tsp-mavail__row{
	display: flex; flex-wrap: wrap; gap: 6px;
	align-items: center;
}
.tsp-mavail__slot,
.tsp-mavail__slot:link,
.tsp-mavail__slot:visited{
	display: inline-flex; align-items: baseline; gap: 5px;
	background: var(--tsp-terracotta, #9F543F);
	color: #FFFAF2 !important;
	text-decoration: none;
	padding: 6px 11px;
	border-radius: 999px;
	transition: background .12s ease, transform .12s ease;
	line-height: 1.2;
	white-space: nowrap;
	border: 1.5px solid transparent;
}
.tsp-mavail__slot:hover,
.tsp-mavail__slot:focus,
.tsp-mavail__slot:active{
	background: var(--tsp-coffee, #28200E);
	transform: translateY(-1px);
	color: #FFFAF2 !important;
	text-decoration: none;
}
.tsp-mavail__slot-day,
.tsp-mavail__slot-time{
	color: #FFFAF2 !important;
}
.tsp-mavail__slot-day{
	font-size: 10.5px; font-weight: 700;
	letter-spacing: .3px;
	text-transform: uppercase;
	opacity: .85;
}
.tsp-mavail__slot-time{
	font-size: 12px; font-weight: 700;
}
/* Outline "search more" pill — visually distinct so users don't misread it
 * as another available slot. Same shape, hollow. */
.tsp-mavail__more{
	display: inline-flex; align-items: center;
	background: transparent;
	color: var(--tsp-coffee, #28200E);
	text-decoration: none;
	font-size: 10.5px; font-weight: 800;
	letter-spacing: .8px;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1.5px solid var(--tsp-coffee, #28200E);
	transition: background .12s ease, color .12s ease;
	line-height: 1.2;
	white-space: nowrap;
	margin-left: 4px;
}
.tsp-mavail__more:hover{
	background: var(--tsp-coffee, #28200E);
	color: var(--tsp-cream, #FFFAF2);
}
.tsp-mavail__empty{
	font-size: 13px;
	color: rgba(40,32,14,.6);
	margin: 0 0 8px;
	line-height: 1.5;
}

/* Compact density — used on vibe quiz results + book-a-class crew cards. */
.tsp-mavail-mini{
	display: flex; flex-direction: column; gap: 6px;
	margin-top: 8px;
}
.tsp-mavail-mini__row{
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 6px;
	font-size: 11px;
}
.tsp-mavail-mini__loc{
	font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
	font-size: 9.5px;
	color: var(--tsp-seaglass, #006976);
	flex-shrink: 0;
}
.tsp-mavail-mini__slot{
	background: transparent;
	border: 1.5px solid var(--tsp-terracotta, #9F543F);
	color: var(--tsp-terracotta, #9F543F);
	text-decoration: none;
	font-size: 10.5px; font-weight: 700;
	padding: 3px 8px;
	border-radius: 999px;
	transition: background .12s, color .12s;
	white-space: nowrap;
}
.tsp-mavail-mini__slot:hover{
	background: var(--tsp-terracotta, #9F543F);
	color: var(--tsp-cream, #FFFAF2);
}
.tsp-mavail-mini__empty{
	font-size: 10.5px; font-style: italic;
	color: rgba(40,32,14,.5);
}

/* Aggregate mode — service picker + all-instructors row-per-slot list.
 * Redesigned 2026-07-23 to match the seaglass-wrapper "Book with a time"
 * card style: dark seaglass outer, oat cards, italic serif studio names on
 * cream chips, cream/tan chip behind the date+time, italic terracotta
 * "with {name}", 3D-shadow terracotta BOOK buttons on the right. */
.tsp-mavail-agg{background:transparent;border:none;padding:0;color:#FFFAF2}
/* Picker layout: `gap` alone is unreliable when the parent theme (Ativo/VamTam)
 * ships aggressive button resets that reset `margin`/`display` on buttons. Ship
 * BOTH `gap` (modern) AND an explicit `margin` on each pill so no theme reset
 * can collapse the spacing. Also force `display:inline-flex` on the buttons so
 * they don't fall back to `display:block` from a parent stylesheet. */
.tsp-magg__picker{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 34px !important;padding:0 !important;list-style:none}
.tsp-magg__svc{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;background:#FFFAF2;color:#28200E;border:2px solid #28200E;border-radius:999px;padding:9px 22px !important;margin:0 5px 6px;font-family:var(--body,inherit);font-size:12px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;line-height:1;box-shadow:0 3px 0 rgba(0,0,0,.22);transition:background .15s ease,color .15s ease}
.tsp-magg__svc:hover{background:#EEE2D9}
.tsp-magg__svc.is-active{background:#F2A408;color:#28200E;border-color:#28200E}
.tsp-magg__body{min-height:200px}
.tsp-magg__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
/* !important on padding here because the /private-sessions/ page has a
 * `.ps *` universal reset (`padding: 0`) that outranks class-only rules at
 * equal specificity by load order. This widget also renders on instructor
 * profile pages that don't have that reset, so we can't just prefix with
 * `.ps` — bare-important is the safest override. */
.tsp-magg__col{background:#EEE2D9;color:#28200E;border-radius:14px;padding:26px 26px 18px !important;box-shadow:0 12px 32px rgba(0,0,0,.18)}
.tsp-magg__col-head{display:flex;justify-content:space-between;align-items:baseline;padding:0 0 16px !important;border-bottom:1px dashed rgba(40,32,14,.3);margin-bottom:6px}
.tsp-magg__loc{font-family:var(--display,'DM Serif Display',serif);font-style:italic;font-size:28px;color:#006976;line-height:1;display:inline-block;padding:2px 12px !important;background:#FFFAF2;border-radius:6px}
.tsp-magg__count{font-size:12px;color:rgba(40,32,14,.6);font-weight:600}
.tsp-magg__slot-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 4px !important}
.tsp-magg__slot-row + .tsp-magg__slot-row{border-top:1px dashed rgba(40,32,14,.14)}
.tsp-magg__slot-info{display:flex;flex-direction:column;min-width:0;flex:1}
.tsp-magg__when{font-size:15px;font-weight:800;color:#28200E;display:inline-block;background:#F5E9DE;padding:3px 10px !important;border-radius:6px;line-height:1.35;white-space:nowrap;align-self:flex-start;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.tsp-magg__with{font-family:var(--display,'DM Serif Display',serif);font-style:italic;font-size:15px;color:#9F543F;margin-top:8px;padding-left:2px;line-height:1.2}
.tsp-magg__book,
.tsp-magg__book:link,
.tsp-magg__book:visited{background:#9F543F;color:#FFFAF2 !important;text-decoration:none;padding:9px 18px !important;border-radius:8px;font-size:11.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;white-space:nowrap;box-shadow:0 3px 0 rgba(0,0,0,.28);flex-shrink:0;display:inline-block;border:none;transition:background .12s ease,transform .1s ease}
.tsp-magg__book:hover,
.tsp-magg__book:focus,
.tsp-magg__book:active{background:#28200E;color:#FFFAF2 !important;text-decoration:none;transform:translateY(-1px)}
.tsp-magg__empty{font-size:13px;color:rgba(40,32,14,.6);margin:8px 0;font-style:italic;text-align:center}
.tsp-magg__more{display:block;text-align:center;margin-top:18px;padding:16px 0 4px !important;border-top:1px dashed rgba(40,32,14,.14);font-size:12px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:#28200E !important;text-decoration:none}
.tsp-magg__more span{border-bottom:3px solid #F2A408;padding-bottom:2px}
.tsp-magg__more:hover span{border-bottom-color:#9F543F}

@media (max-width: 700px){
	.tsp-mavail{ padding: 18px 16px 16px; }
	.tsp-mavail__grid{ grid-template-columns: 1fr; gap: 12px; }
	.tsp-mavail__col{ padding: 12px 12px 10px; }
	.tsp-mavail__slot{ padding: 5px 10px; }
	.tsp-mavail__slot-time{ font-size: 11.5px; }
	.tsp-mavail__slot-day{ font-size: 10px; }
	.tsp-mavail__more{ font-size: 10px; padding: 5px 10px; }

	/* Aggregate collapses to a single stacked column on mobile.
	 * Cap the studio-name chip so a wide phone can still see the "N open"
	 * counter; scale slot-row padding down to fit the small "with {name}" +
	 * BOOK button on one line even at 320px. */
	.tsp-magg__grid{ grid-template-columns: 1fr; gap: 14px; }
	.tsp-magg__col{ padding: 20px 18px 14px !important; }
	.tsp-magg__loc{ font-size: 22px; padding: 2px 8px !important; }
	.tsp-magg__slot-row{ padding: 14px 2px !important; gap: 10px; }
	.tsp-magg__when{ font-size: 14px; padding: 3px 8px !important; }
	.tsp-magg__with{ font-size: 13px; margin-top: 6px; }
	.tsp-magg__book{ padding: 8px 14px !important; font-size: 11px; letter-spacing: 1.2px; }
	.tsp-magg__svc{ padding: 8px 16px !important; font-size: 11px; letter-spacing: 1.2px; }
}