/* ═══════════════════════════════════════════════════════════════════════════
   Free dance week sign-up — apexgymnast.com/Dance

   Direction: STAGE AT NIGHT. The house lights are down, a warm spotlight pools
   on the poster, and everything else recedes into black. It is the launch
   flyer's own palette — deep navy, gold, bright blue — but lit rather than
   printed, and it sits on the same black-to-navy ground the site header uses.

   Typography is the site's own pairing, already loaded by includes/header.php:
   Barlow Condensed (condensed display, set big and tight) over DM Sans.
   ═══════════════════════════════════════════════════════════════════════════ */

.dance-page {
	/* Ground */
	--d-black:    #04070d;
	--d-deep:     #0a1424;
	--d-navy:     #0F1B2D;

	/* Panels — light laid over the dark, never a painted colour, so the
	   spotlight behind them still reads through. */
	--d-panel:    rgba(255, 255, 255, .045);
	--d-panel-up: rgba(255, 255, 255, .075);
	--d-edge:     rgba(255, 255, 255, .10);
	--d-edge-up:  rgba(255, 255, 255, .20);

	/* Ink */
	--d-ink:      #eef3fa;
	--d-dim:      #97a7bf;
	--d-faint:    #6b7d97;

	/* Accents — the site's own variables, restated so this file stands alone. */
	--d-gold:     #E8B930;
	--d-gold-hi:  #F7D065;
	--d-blue:     #5AB0E3;
	--d-blue-dk:  #367BC8;

	position: relative;
	isolation: isolate;
	padding: 0 0 64px;
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--d-ink);
	/* 🛑 The top band is PURE #000 and the stops that hold it are in PIXELS, not
	   percentages: the Apex logo is drawn for black, and a percentage stop would
	   lift the ground behind it on a short page (the closed state) while looking
	   right on a long one. The ground only starts warming BELOW the logo, and the
	   gold spotlight is centred well down the page for the same reason. */
	background:
		radial-gradient(64% 26% at 50% 780px, rgba(232, 185, 48, .10) 0%, rgba(232, 185, 48, 0) 72%),
		linear-gradient(180deg,
			#000     0px,
			#000     330px,
			#03050a  520px,
			#060b14  820px,
			#0a1220  1250px,
			#0e1a2c  1850px,
			var(--d-navy) 100%);
	background-color: #000;
	overflow: hidden;
}

/* Film grain. Keeps a very large flat dark field from banding, and gives the
   panels something to sit on. Pointer-events off so it never eats a tap.
   🛑 MASKED AWAY FROM THE TOP BAND. feTurbulence is COLOUR noise, so laying it
   over #000 lifts it — measured at rgb(17,17,21), a visible ~7% grey directly
   behind a logo drawn for pure black. The mask is in pixels for the same reason
   the gradient's top stops are. */
.dance-page::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: .42;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
	-webkit-mask-image: linear-gradient(180deg, transparent 0px, transparent 340px, #000 760px);
	        mask-image: linear-gradient(180deg, transparent 0px, transparent 340px, #000 760px);
}

.dance-container {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 16px;
	position: relative;
}

/* ── The site header, on this page only ────────────────────────────────────
   includes/header.php draws its logo on a radial that ends in navy at the
   edges (#112d4a / #0f2440). Against this page's pure-black top band that left
   a lighter navy seam across the full width. Flat black here instead.

   🛑 `.hero` is NOT inside `.dance-page` — it is the site's own element, and
   this rule reaches it because dance.css is only ever loaded by /dance/. That
   is the scoping. Do not move this rule into a shared stylesheet. It wins on
   source order: header.php's <style> is in the head, this <link> is in the body. */
.hero {
	background: #000;
}

/* ── The flyer ──────────────────────────────────────────────────────────────
   The poster IS the hero. It carries the Apex logo, the offer, Alyssa and every
   class time, so the page renders no headline of its own. It links to the full
   image so a phone can pin-zoom the class times, which are ~7px tall at 390px
   wide — the times a parent has to act on are real text in the picker below. */
.dance-flyer {
	display: block;
	position: relative;
	max-width: 560px;
	margin: 26px auto 4px;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .7), 0 0 0 1px rgba(232, 185, 48, .28);
	line-height: 0;
	transition: transform .25s cubic-bezier(.2, .8, .3, 1), box-shadow .25s ease;
}

.dance-flyer:hover {
	transform: translateY(-3px);
	box-shadow: 0 30px 70px rgba(0, 0, 0, .75), 0 0 0 1px rgba(232, 185, 48, .55);
}

.dance-flyer img {
	display: block;
	width: 100%;
	height: auto;
}

/* Sits BELOW the poster, not on it — overlaid it covered the flyer's own
   footer line. */
.dance-flyer-zoom {
	margin: 12px 0 0;
	text-align: center;
	font-size: 13px;
	letter-spacing: .03em;
	color: var(--d-faint);
}

.dance-flyer-zoom i { color: var(--d-gold); margin-right: 6px; }

/* ── Cards ──────────────────────────────────────────────────────────────────
   Glass over the spotlight, with a hairline top highlight so each panel has a
   lit edge rather than a drawn border. */
.dance-card {
	position: relative;
	background: var(--d-panel);
	border: 1px solid var(--d-edge);
	border-radius: 20px;
	padding: 26px 24px;
	margin-top: 18px;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
}

.dance-card::before {
	content: '';
	position: absolute;
	inset: 0 20% auto;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
}

.dance-card h2 {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 27px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 18px;
	text-align: center;
}

.dance-card h2 i { color: var(--d-gold); margin-right: 9px; }

.dance-help {
	text-align: center;
	color: var(--d-dim);
	font-size: 15px;
	line-height: 1.55;
	margin: 0 0 20px;
}

/* ── Per-child picker ───────────────────────────────────────────────────── */
.dance-child {
	border: 1px solid var(--d-edge);
	border-radius: 16px;
	padding: 18px;
	margin-bottom: 16px;
	background: rgba(0, 0, 0, .25);
}

.dance-child-head {
	display: flex;
	align-items: center;
	gap: 11px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--d-edge);
}

.dance-child-name {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 27px;
	font-weight: 700;
	letter-spacing: .02em;
	color: #fff;
}

.dance-child-age {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--d-blue);
	border: 1px solid rgba(90, 176, 227, .4);
	border-radius: 999px;
	padding: 3px 10px;
}

.dance-age-warn {
	margin-top: 13px;
	background: rgba(232, 185, 48, .1);
	border: 1px solid rgba(232, 185, 48, .32);
	border-radius: 11px;
	padding: 10px 13px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--d-gold-hi);
}

.dance-age-warn i { margin-right: 6px; }

.dance-child-venue { margin-top: 18px; }

.dance-child-venue-label {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--d-blue);
	margin-bottom: 10px;
}

.dance-child-venue-label span {
	font-family: 'DM Sans', sans-serif;
	font-weight: 500;
	font-size: 12px;
	text-transform: none;
	letter-spacing: 0;
	color: var(--d-faint);
	margin-left: 8px;
}

.dance-class-grid { display: grid; gap: 9px; }

@media (min-width: 540px) {
	.dance-class-grid { grid-template-columns: 1fr 1fr; }
}

.dance-class-pick {
	display: flex;
	align-items: center;
	gap: 11px;
	border: 1px solid var(--d-edge);
	border-radius: 12px;
	padding: 12px 14px;
	cursor: pointer;
	background: rgba(255, 255, 255, .03);
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.dance-class-pick:hover { border-color: var(--d-edge-up); background: var(--d-panel-up); }

/* Picked reads GOLD, matching the flyer's own highlight. */
.dance-class-pick.checked {
	border-color: rgba(232, 185, 48, .6);
	background: rgba(232, 185, 48, .1);
	box-shadow: 0 0 0 1px rgba(232, 185, 48, .22), 0 6px 20px rgba(232, 185, 48, .1);
}

/* Custom box. A native checkbox paints a bright white square on this ground,
   and `accent-color` only reaches the CHECKED state, so the unticked six on
   every child card were the loudest thing on the page. */
.dance-class-pick input,
.dance-other-row input {
	appearance: none;
	-webkit-appearance: none;
	width: 21px;
	height: 21px;
	flex: 0 0 auto;
	margin: 0;
	cursor: pointer;
	border: 1.5px solid rgba(255, 255, 255, .3);
	border-radius: 6px;
	background: rgba(0, 0, 0, .4);
	display: grid;
	place-content: center;
	transition: background .15s ease, border-color .15s ease;
}

.dance-class-pick input::before,
.dance-other-row input::before {
	content: '';
	width: 11px;
	height: 6px;
	border-left: 2.5px solid #1a1206;
	border-bottom: 2.5px solid #1a1206;
	transform: rotate(-45deg) translate(1px, -1px) scale(0);
	transition: transform .16s cubic-bezier(.3, 1.4, .5, 1);
}

.dance-class-pick input:checked,
.dance-other-row input:checked {
	background: var(--d-gold);
	border-color: var(--d-gold);
}

.dance-class-pick input:checked::before,
.dance-other-row input:checked::before {
	transform: rotate(-45deg) translate(1px, -1px) scale(1);
}

.dance-class-pick input:focus-visible,
.dance-other-row input:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(232, 185, 48, .3);
}

.dance-class-pick:hover input:not(:checked) { border-color: rgba(255, 255, 255, .5); }

.dance-pick-name { font-weight: 600; font-size: 15px; flex: 1 1 auto; }

.dance-pick-time {
	font-size: 13px;
	color: var(--d-dim);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.dance-class-pick.checked .dance-pick-time { color: var(--d-gold-hi); }

/* ── Add a child ────────────────────────────────────────────────────────── */
.dance-add-child { margin-top: 4px; text-align: center; }

.dance-add-child-note { color: var(--d-dim); font-size: 15px; margin: 0 0 14px; }

.dance-add-toggle {
	background: none;
	border: 1px dashed rgba(255, 255, 255, .28);
	color: var(--d-blue);
	border-radius: 12px;
	padding: 11px 20px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}

.dance-add-toggle:hover { border-color: var(--d-blue); background: rgba(90, 176, 227, .08); }

.dance-add-child-form { margin-top: 14px; }

.dance-add-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	justify-content: center;
	align-items: center;
}

.dance-input {
	background: rgba(0, 0, 0, .45);
	border: 1px solid var(--d-edge);
	border-radius: 10px;
	padding: 11px 13px;
	font-family: inherit;
	font-size: 15px;
	color: var(--d-ink);
	width: 145px;
	min-width: 0;
	box-sizing: border-box;
}

.dance-input::placeholder { color: var(--d-faint); }

.dance-input:focus {
	outline: none;
	border-color: var(--d-gold);
	box-shadow: 0 0 0 3px rgba(232, 185, 48, .16);
}

.dance-bday { display: inline-flex; align-items: center; gap: 4px; }
.dance-bday-part { width: 50px; text-align: center; padding: 11px 4px; }
.dance-bday-year { width: 70px; }
.dance-bday-sep { color: var(--d-faint); }

.dance-add-error { color: #ff9b9b; font-size: 14px; margin-top: 10px; min-height: 18px; }

/* ── Other programs ─────────────────────────────────────────────────────── */
.dance-other-row {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	cursor: pointer;
	font-size: 15px;
	line-height: 1.55;
	color: var(--d-dim);
}

.dance-other-row b { color: var(--d-ink); }

.dance-other-row input { margin-top: 1px; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.dance-btn {
	background: linear-gradient(160deg, var(--d-gold-hi), var(--d-gold));
	color: #1a1206;
	border: 0;
	border-radius: 13px;
	padding: 16px 28px;
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 23px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 8px 28px rgba(232, 185, 48, .26);
	transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.dance-btn:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 12px 34px rgba(232, 185, 48, .36);
	filter: brightness(1.05);
}

.dance-btn:active:not(:disabled) { transform: translateY(0); }
.dance-btn:disabled { opacity: .55; cursor: default; box-shadow: none; }

.dance-btn-full { display: block; width: 100%; }

.dance-btn-small {
	padding: 11px 20px;
	font-size: 17px;
	border-radius: 10px;
}

.dance-submit { text-align: center; }

.dance-submit-note {
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--d-faint);
	letter-spacing: .02em;
}

/* ── Banners, closed state ──────────────────────────────────────────────── */
.dance-banner {
	border-radius: 12px;
	padding: 12px 15px;
	font-size: 15px;
	margin-bottom: 18px;
	text-align: center;
}

.dance-banner-ok {
	background: rgba(52, 211, 153, .1);
	border: 1px solid rgba(52, 211, 153, .34);
	color: #6ee7b7;
}

/* ── Confirmation itinerary ─────────────────────────────────────────────────
   A schedule, not a receipt: grouped by day and venue, the time reading down
   the left edge so a parent can scan where to be. */
.dance-confirm {
	text-align: center;
	border-color: rgba(52, 211, 153, .3);
}

.dance-confirm-icon {
	font-size: 46px;
	color: #34d399;
	margin-bottom: 10px;
	filter: drop-shadow(0 0 22px rgba(52, 211, 153, .5));
}

.dance-confirm-lead {
	margin: 0;
	color: var(--d-dim);
	font-size: 15px;
}

.dance-confirm-list { text-align: left; margin: 24px 0 4px; }

.dance-itin-group + .dance-itin-group {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--d-edge);
}

.dance-itin-head { display: flex; align-items: center; gap: 11px; }

.dance-itin-day {
	font-family: 'Barlow Condensed', sans-serif;
	background: var(--d-gold);
	color: #1a1206;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .14em;
	padding: 4px 10px 3px;
	border-radius: 6px;
}

.dance-itin-date {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 25px;
	font-weight: 700;
	color: #fff;
}

.dance-itin-where { font-size: 15px; font-weight: 600; margin-top: 9px; }

.dance-itin-address { font-size: 12.5px; color: var(--d-faint); margin-top: 3px; }

.dance-itin-rows {
	margin-top: 13px;
	border-left: 2px solid var(--d-gold);
	padding-left: 16px;
}

.dance-itin-row {
	display: grid;
	grid-template-columns: 112px 1fr auto;
	align-items: baseline;
	gap: 4px 14px;
	padding: 9px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.dance-itin-row:last-child { border-bottom: 0; }

.dance-itin-time {
	font-variant-numeric: tabular-nums;
	font-size: 14px;
	font-weight: 700;
	color: var(--d-gold);
	white-space: nowrap;
}

.dance-itin-class { font-size: 15px; font-weight: 600; }

.dance-itin-child {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--d-blue);
	border: 1px solid rgba(90, 176, 227, .32);
	border-radius: 999px;
	padding: 3px 11px;
	white-space: nowrap;
}

.dance-confirm-foot {
	margin: 22px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--d-edge);
	font-size: 14px;
	color: var(--d-dim);
}

.dance-confirm-foot b { color: var(--d-ink); }

.dance-footer-contact {
	text-align: center;
	margin-top: 28px;
	color: var(--d-faint);
	font-size: 14px;
	letter-spacing: .03em;
}

.dance-footer-contact i { color: var(--d-gold); margin-right: 6px; }

/* ── Toast ──────────────────────────────────────────────────────────────── */
.dance-toast {
	position: fixed;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%) translateY(140%);
	background: #12203a;
	border: 1px solid var(--d-edge-up);
	color: #fff;
	padding: 14px 24px;
	border-radius: 12px;
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	font-weight: 600;
	box-shadow: 0 14px 40px rgba(0, 0, 0, .6);
	opacity: 0;
	transition: transform .26s cubic-bezier(.2, .9, .3, 1), opacity .26s;
	z-index: 9999;
	max-width: 90vw;
	text-align: center;
}

.dance-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

.dance-toast-success { border-color: rgba(52, 211, 153, .5); color: #6ee7b7; }
.dance-toast-error   { border-color: rgba(248, 113, 113, .5); color: #fca5a5; }

/* ── Flyer lightbox ─────────────────────────────────────────────────────── */
.dance-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(0, 0, 0, .93);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	opacity: 0;
	transition: opacity .2s ease;
	display: flex;
	flex-direction: column;
}

/* 🛑 `display: flex` above beats the `hidden` ATTRIBUTE's default `display:none`,
   so without this the overlay is invisible but still covers the viewport and
   swallows every click on the page. Measured: the flyer itself was unclickable. */
.dance-lightbox[hidden] { display: none; }

.dance-lightbox.open { opacity: 1; }

.dance-lightbox-scroll {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 52px 16px 8px;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

/* 🛑 `<picture>` is an inline box of automatic height, so an `img` inside it
   resolves `max-height: 100%` against NOTHING and the cap is ignored — the
   poster opened at full width with its top cut off. `display: contents` drops
   the wrapper from layout so the img becomes the flex child directly. The
   <source> type switching is unaffected; it is not a layout feature. */
.dance-lightbox-scroll picture { display: contents; }

.dance-lightbox-scroll img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	border-radius: 10px;
	cursor: zoom-in;
	transition: opacity .2s ease;
}

/* Zoomed: natural width inside the scroller, so the poster can be panned. The
   flex centring has to go, or a wide image is clipped instead of scrollable. */
.dance-lightbox.zoomed .dance-lightbox-scroll {
	display: block;
	padding-top: 52px;
}

.dance-lightbox.zoomed .dance-lightbox-scroll img {
	max-width: none;
	max-height: none;
	width: 1025px;
	margin: 0 auto;
	cursor: zoom-out;
	border-radius: 0;
}

.dance-lightbox-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid var(--d-edge-up);
	background: rgba(255, 255, 255, .1);
	color: #fff;
	font-size: 19px;
	cursor: pointer;
	display: grid;
	place-content: center;
	transition: background .15s ease, border-color .15s ease;
}

.dance-lightbox-close:hover { background: rgba(255, 255, 255, .2); border-color: var(--d-gold); }

.dance-lightbox-close:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(232, 185, 48, .45);
}

.dance-lightbox-hint {
	flex: 0 0 auto;
	margin: 0;
	padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px));
	text-align: center;
	font-size: 13px;
	color: var(--d-faint);
	letter-spacing: .03em;
}

/* ── Page load: one orchestrated reveal, staggered down the page ─────────── */
@keyframes danceRise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

/* The stagger index is written on each element as --d-i, not derived with
   nth-of-type: the waiver module injects its own markup into this container
   when a waiver is due, so sibling position is not stable. */
.dance-flyer,
.dance-card,
.dance-page .waiver-container {
	animation: danceRise .6s cubic-bezier(.2, .8, .3, 1) backwards;
	animation-delay: calc(var(--d-i, 0) * .08s + .02s);
}

.dance-page .waiver-container { --d-i: 1; }

@media (prefers-reduced-motion: reduce) {
	.dance-page *,
	.dance-page *::before {
		animation: none !important;
		transition: none !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   WAIVER MODULE OVERRIDES

   The waiver module renders INSIDE this page and ships its own stylesheet
   (includes/waiver_module/assets/waiver.css) built for a white page: light
   slabs, near-black text and an indigo gradient on the header and the child
   table. All of it is unreadable on black.

   🛑 waiver.css loads AFTER this file — the module echoes its own <link> inline
   — so a TIE on specificity goes to waiver.css. Every selector below therefore
   matches or beats its counterpart there, and the three places the module uses
   an inline style attribute need !important, which is the only thing that beats
   one.

   🛑 Everything is scoped to .dance-page, so the standalone /waiver/ page and
   the party RSVP page are untouched.

   ⚠ The list below was derived by extracting every light background and every
   dark text colour from waiver.css. If that file gains one, it will show up
   here as a white slab or invisible text — re-run that extraction rather than
   patching whatever you happened to notice.
   ═══════════════════════════════════════════════════════════════════════════ */
.dance-page .waiver-container {
	max-width: 100%;
	padding: 0;
	margin-top: 18px;
	font-family: 'DM Sans', sans-serif;
	color: var(--d-ink);
}

/* ── Panels ─────────────────────────────────────────────────────────────── */
.dance-page .waiver-header {
	background: rgba(0, 0, 0, .32);
	border: 1px solid var(--d-edge);
	border-radius: 18px;
	padding: 24px;
	margin-bottom: 18px;
}

.dance-page .waiver-header h1 {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 34px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
}

.dance-page .waiver-header p { color: var(--d-dim); }

.dance-page .form-section,
.dance-page .section-card,
.dance-page .add-child-form-container,
.dance-page .signature-section,
.dance-page .table-wrapper {
	background: var(--d-panel);
	border: 1px solid var(--d-edge);
	border-radius: 18px;
	color: var(--d-ink);
	box-shadow: none;
}

.dance-page .existing-child-row,
.dance-page .new-child-row {
	background: rgba(0, 0, 0, .28);
	border: 1px solid var(--d-edge);
	border-radius: 12px;
}

.dance-page .waiver-text-container {
	background: rgba(0, 0, 0, .42);
	border: 1px solid var(--d-edge);
	border-radius: 12px;
	color: var(--d-dim);
}

.dance-page .checkbox-group {
	background: rgba(232, 185, 48, .08);
	border: 1px solid rgba(232, 185, 48, .3);
	border-radius: 12px;
}

/* ── Headings and body text ─────────────────────────────────────────────── */
.dance-page .section-card h2,
.dance-page .section-card h3,
.dance-page .form-section h2,
.dance-page .form-section h3,
.dance-page .waiver-text-container h3,
.dance-page #email-entry h2 {
	color: #fff;
	border-bottom-color: var(--d-edge);
}

.dance-page #email-entry h2 {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.dance-page .form-group label,
.dance-page .inline-field label,
.dance-page .add-child-form .form-group label,
.dance-page .checkbox-group label,
.dance-page .waiver-text-container p,
.dance-page .waiver-text-container li,
.dance-page .info-display,
.dance-page .info-display strong,
.dance-page .signature-date,
.dance-page #email-entry p,
.dance-page .save-status {
	color: var(--d-dim);
}

.dance-page .children-table td,
.dance-page .empty-message { color: var(--d-ink); }

.dance-page .child-number { color: var(--d-gold); }
.dance-page .error-message { color: #fca5a5; }

/* The email is shown read-only in a light chip. */
.dance-page .email-display {
	background: rgba(0, 0, 0, .42);
	border: 1px solid var(--d-edge);
	border-radius: 10px;
	color: var(--d-ink);
}

/* The bold acknowledgement paragraph in templates/waiver_text.php carries an
   inline `background-color:#f0f0f0; border:2px solid #333`. */
.dance-page .waiver-text-container p[style] {
	background-color: rgba(232, 185, 48, .1) !important;
	border-color: rgba(232, 185, 48, .45) !important;
	color: var(--d-gold-hi);
	border-radius: 10px;
}

/* ── The child table's indigo gradient header ───────────────────────────── */
.dance-page .children-table thead {
	background: rgba(90, 176, 227, .16);
}

.dance-page .children-table thead th {
	color: var(--d-blue);
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.dance-page .children-table,
.dance-page .children-table td,
.dance-page .children-table th { border-color: var(--d-edge); }

.dance-page .children-table tbody tr:hover { background: rgba(255, 255, 255, .05); }

.dance-page .add-child-form-container h4 {
	background: rgba(90, 176, 227, .14);
	color: var(--d-blue);
	border-radius: 999px;
}

/* ── Inputs ─────────────────────────────────────────────────────────────── */
.dance-page .form-control,
.dance-page .signature-input,
.dance-page .birthday-field,
.dance-page input[type="text"],
.dance-page input[type="email"],
.dance-page input[type="tel"],
.dance-page input[type="date"],
.dance-page textarea,
.dance-page select {
	background: rgba(0, 0, 0, .45);
	border: 1px solid var(--d-edge);
	border-radius: 10px;
	color: var(--d-ink);
	font-family: 'DM Sans', sans-serif;
}

.dance-page .form-control::placeholder,
.dance-page input::placeholder,
.dance-page textarea::placeholder { color: var(--d-faint); }

.dance-page .form-control:focus,
.dance-page .signature-input:focus,
.dance-page input:focus,
.dance-page textarea:focus {
	outline: none;
	border-color: var(--d-gold);
	box-shadow: 0 0 0 3px rgba(232, 185, 48, .16);
}

.dance-page .checkbox-group input[type="checkbox"] { accent-color: var(--d-gold); }

/* The email box on the not-logged-in step is styled inline by the module. */
.dance-page #entry-email {
	background: rgba(0, 0, 0, .45) !important;
	border: 1px solid rgba(255, 255, 255, .16) !important;
	border-radius: 10px !important;
	color: var(--d-ink);
}

/* On the logged-OUT email step the header is a call to action, so its subtitle
   reads gold. `:has(#email-entry)` keeps this off the waiver form, whose header
   is a plain label. */
.dance-page .waiver-container:has(#email-entry) .waiver-header p { color: var(--d-gold); }

.dance-page #entry-email:focus {
	border-color: var(--d-gold) !important;
	box-shadow: 0 0 0 3px rgba(232, 185, 48, .16);
	outline: none;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.dance-page .btn,
.dance-page .btn-primary,
.dance-page .btn-success,
.dance-page .btn-primary:hover:not(:disabled) {
	background: linear-gradient(160deg, var(--d-gold-hi), var(--d-gold));
	color: #1a1206;
	border: 0;
	border-radius: 12px;
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	box-shadow: 0 8px 24px rgba(232, 185, 48, .24);
}

.dance-page .btn-secondary {
	background: rgba(255, 255, 255, .08);
	color: var(--d-ink);
	border: 1px solid var(--d-edge);
	box-shadow: none;
}

.dance-page .btn-danger,
.dance-page .btn-remove-child,
.dance-page .remove-btn-float {
	background: rgba(248, 113, 113, .16);
	color: #fca5a5;
	border: 1px solid rgba(248, 113, 113, .4);
	box-shadow: none;
}

.dance-page .btn-remove-child:hover { color: #fff; background: rgba(248, 113, 113, .32); }

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.dance-page .alert { border-radius: 12px; }
.dance-page .alert-success { background: rgba(52, 211, 153, .12); border: 1px solid rgba(52, 211, 153, .34); color: #6ee7b7; }
.dance-page .alert-error   { background: rgba(248, 113, 113, .12); border: 1px solid rgba(248, 113, 113, .34); color: #fca5a5; }
.dance-page .alert-warning { background: rgba(232, 185, 48, .12); border: 1px solid rgba(232, 185, 48, .34); color: var(--d-gold-hi); }

/* ── Narrow screens ─────────────────────────────────────────────────────── */
@media (max-width: 520px) {
	.dance-card { padding: 22px 17px; border-radius: 17px; }
	.dance-input { width: 100%; }
	.dance-bday { width: 100%; justify-content: center; }
	.dance-bday-part { width: 56px; }
}

@media (max-width: 480px) {
	.dance-itin-row { grid-template-columns: 1fr auto; }
	.dance-itin-time { grid-column: 1 / -1; }
}