/*
 * Boot camp registration.
 *
 * Hand authored and copied verbatim by Mix, like the rest of the public CSS.
 * Shares the design language of the admin console (same navy, same radii, same
 * card treatment) but sized for a parent on a phone rather than staff at a desk.
 *
 * Everything is scoped under .cr, so it cannot reach the Bootstrap layout this
 * page sits inside.
 */

.cr {
	--cr-navy: #0a1f5c;
	--cr-navy-soft: #174891;
	--cr-tint: #eef3fb;
	--cr-action: #a94706;
	--cr-action-dark: #8f3b05;
	--cr-line: #e2e6ef;
	--cr-line-strong: #cdd4e4;
	--cr-ink: #1b2233;
	--cr-ink-soft: #4a5268;
	--cr-ink-faint: #6a7290;
	--cr-good: #15803d;
	--cr-good-bg: #f0fdf4;
	--cr-warn: #8a4b00;
	--cr-warn-bg: #fff8e6;
	--cr-bad: #8a1c1c;
	--cr-bad-bg: #fdeaea;

	max-width: 1120px;
	margin: 0 auto;
	padding: 32px 20px 72px;
	color: var(--cr-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.55;
}

.cr *, .cr *::before, .cr *::after { box-sizing: border-box; }
.cr [hidden] { display: none !important; }

.cr h1 { font-size: 34px; line-height: 1.15; color: var(--cr-navy); margin: 0 0 8px; letter-spacing: -.02em; }
.cr .cr-lede { color: var(--cr-ink-soft); font-size: 17px; margin: 0 0 28px; max-width: 62ch; }

/* ------------------------------------------------------------- two column -- */

.cr-layout { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
@media (max-width: 900px) { .cr-layout { grid-template-columns: minmax(0, 1fr); } }

/* The summary follows the parent down a long form, so the total is never more
   than a glance away while they are filling it in. */
.cr-aside { position: sticky; top: 20px; }
@media (max-width: 900px) { .cr-aside { position: static; } }

/* ------------------------------------------------------------------ steps -- */

.cr-step {
	background: #fff; border: 1px solid var(--cr-line); border-radius: 14px;
	padding: 22px 24px; margin: 0 0 20px; box-shadow: 0 1px 2px rgba(10, 31, 92, .05);
}
.cr-step > h2 {
	font-size: 20px; color: var(--cr-navy); margin: 0 0 16px;
	display: flex; align-items: center; gap: 12px; letter-spacing: -.01em;
}
.cr-num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 50%; flex: none;
	background: var(--cr-navy); color: #fff; font-size: 15px; font-weight: 700;
}
.cr-step-note { color: var(--cr-ink-faint); font-size: 14px; margin: -8px 0 16px; }

/* ------------------------------------------------------------------- rows -- */

.cr-row {
	display: flex; justify-content: space-between; gap: 16px;
	padding: 14px 0; border-bottom: 1px solid #f0f2f7;
}
.cr-row:last-child { border-bottom: 0; }
.cr-row strong { font-size: 16px; }
.cr-meta { color: var(--cr-ink-faint); font-size: 14px; margin-top: 2px; }
.cr-price { font-weight: 700; white-space: nowrap; font-size: 16px; }

/* ---------------------------------------------------------------- children -- */

.cr-kids { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.cr-kid {
	display: flex; gap: 10px; align-items: center; cursor: pointer;
	border: 1px solid var(--cr-line-strong); border-radius: 10px; padding: 12px 14px; background: #fff;
}
.cr-kid:hover { border-color: var(--cr-navy-soft); }
.cr-kid:has(:checked) { border-color: var(--cr-navy-soft); background: var(--cr-tint); box-shadow: inset 0 0 0 1px var(--cr-navy-soft); }

/* ------------------------------------------------------------------ forms -- */

.cr-field { display: block; margin: 0 0 14px; }
.cr-field > span { display: block; font-size: 13px; font-weight: 600; color: var(--cr-ink-soft); margin-bottom: 5px; }
.cr-field input, .cr-field select, .cr-field textarea {
	width: 100%; padding: 11px 13px; font-size: 16px; font-family: inherit; color: var(--cr-ink);
	border: 1px solid var(--cr-line-strong); border-radius: 9px; background: #fff;
}
.cr-field input:focus, .cr-field select:focus, .cr-field textarea:focus {
	border-color: var(--cr-navy-soft); outline: 2px solid rgba(23, 72, 145, .18);
}
.cr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 640px) { .cr-cols { grid-template-columns: 1fr; } }

.cr-inline { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.cr-inline .cr-field { flex: 1 1 150px; margin-bottom: 0; }

.cr-fieldset { border: 0; padding: 0; margin: 0 0 22px; }
.cr-fieldset + .cr-fieldset { border-top: 1px solid #f0f2f7; padding-top: 20px; }
.cr-legend { font-weight: 700; font-size: 16px; color: var(--cr-navy); padding: 0 0 10px; }

/* ----------------------------------------------------------- payment cards -- */

.cr-pay { display: grid; gap: 10px; margin-top: 6px; }
.cr-pay label {
	display: flex; align-items: center; gap: 12px; cursor: pointer;
	border: 1px solid var(--cr-line-strong); border-radius: 10px; padding: 14px 16px; background: #fff;
}
.cr-pay label:hover { border-color: var(--cr-navy-soft); }
.cr-pay label:has(:checked) { border-color: var(--cr-navy-soft); background: var(--cr-tint); box-shadow: inset 0 0 0 1px var(--cr-navy-soft); }
.cr-pay-name { font-weight: 600; }
.cr-pay-why { display: block; font-size: 13px; color: var(--cr-ink-faint); font-weight: 400; margin-top: 2px; }
.cr-pay-cost { margin-left: auto; text-align: right; font-weight: 700; white-space: nowrap; }
.cr-pay-save { display: block; font-size: 12px; font-weight: 700; color: var(--cr-good); }

/* ----------------------------------------------------------------- totals -- */

.cr-summary {
	background: #fff; border: 1px solid var(--cr-line); border-radius: 14px;
	padding: 20px 22px; box-shadow: 0 1px 2px rgba(10, 31, 92, .05);
}
.cr-summary h2 { font-size: 17px; color: var(--cr-navy); margin: 0 0 14px; }
.cr-totals { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 2px solid var(--cr-navy); }
.cr-totals div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 15px; }
.cr-totals .cr-off { color: var(--cr-good); }
.cr-grand { font-size: 22px; font-weight: 700; color: var(--cr-navy); padding-top: 12px !important; }

/* ------------------------------------------------------------------ legal -- */

/* The documents are parsed into real structure by CampDocumentFormatter, so a
   heading, a sub-clause, and a paragraph no longer all look identical. The box
   is taller than the old 220px because a contract scrolled through a letterbox
   is a contract nobody reads. */
.cr-legal {
	max-height: 420px; overflow-y: auto; font-size: 14.5px; line-height: 1.65;
	border: 1px solid var(--cr-line); border-radius: 10px; padding: 20px 22px; background: #fafbfe;
}
.cdoc__title {
	font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	color: var(--cr-navy); margin: 0 0 14px; padding-bottom: 12px;
	border-bottom: 2px solid var(--cr-line-strong); line-height: 1.35;
}
.cdoc__h {
	font-size: 15px; font-weight: 700; color: var(--cr-navy);
	margin: 22px 0 7px; line-height: 1.4; scroll-margin-top: 12px;
}
.cdoc__h:first-of-type { margin-top: 4px; }
.cdoc__num { color: var(--cr-navy-soft, #4A6FE3); margin-right: 3px; }
.cdoc__p { margin: 0 0 10px; color: #2a3150; }
.cdoc__clauses { list-style: none; margin: 0 0 12px; padding: 0; }
.cdoc__clause {
	position: relative; padding: 0 0 0 30px; margin: 0 0 9px; color: #2a3150;
}
.cdoc__marker {
	position: absolute; left: 0; top: 0; font-weight: 700; color: var(--cr-navy-soft, #4A6FE3);
	font-variant-numeric: tabular-nums;
}
/* An unfilled business term is impossible to miss in review. It already blocks
   production use; this makes it visible to the person reading. */
.cdoc__todo {
	background: #fff3cd; color: #6b3b00; border: 1px dashed #d9a441;
	border-radius: 4px; padding: 0 5px; font-weight: 600;
}
@media (max-width: 560px) {
	.cr-legal { max-height: 340px; padding: 16px; font-size: 14px; }
	.cdoc__clause { padding-left: 26px; }
}
.cr-accept {
	display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: 15px;
	border: 1px solid var(--cr-line-strong); border-radius: 10px; padding: 12px 14px; cursor: pointer;
}
.cr-accept:has(:checked) { border-color: var(--cr-navy-soft); background: var(--cr-tint); }
.cr-accept input { margin-top: 3px; flex: none; }
/* The name permission sits under the photo permission it depends on. */
.cr-accept--sub { margin-left: 22px; font-size: 14px; transition: opacity .15s; }
.cr-accept--sub input:disabled { cursor: not-allowed; }

/* --------------------------------------------------------------- messages -- */

.cr-note, .cr-err, .cr-ok {
	border: 1px solid; border-radius: 10px; padding: 14px 16px; font-size: 15px; margin: 0 0 20px;
}
.cr-note { background: var(--cr-warn-bg); border-color: #f0dda6; color: #6b3b00; }
.cr-err { background: var(--cr-bad-bg); border-color: #f2b8b8; color: var(--cr-bad); }
.cr-ok { background: var(--cr-good-bg); border-color: #bbf7d0; color: #14532d; }

.cr-pill {
	display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 9px;
	border-radius: 999px; background: var(--cr-warn-bg); color: var(--cr-warn);
}
.cr-pill.is-tight { background: var(--cr-bad-bg); color: var(--cr-bad); }

/* ---------------------------------------------------------------- buttons -- */

.cr-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	background: #fff; border: 1px solid var(--cr-navy); color: var(--cr-navy);
	border-radius: 9px; padding: 11px 18px; font: inherit; font-weight: 600; cursor: pointer;
}
.cr-btn:hover { background: var(--cr-tint); color: var(--cr-navy); text-decoration: none; }

.cr-cta {
	display: block; width: 100%; margin-top: 18px;
	background: var(--cr-action); color: #fff; border: 0; border-radius: 10px;
	padding: 16px 26px; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer;
}
/* Also used on anchors, which the site underlines by default. */
.cr-cta { text-align: center; text-decoration: none; }
.cr-cta:hover { background: var(--cr-action-dark); color: #fff; text-decoration: none; }
.cr-cta:disabled { opacity: .55; cursor: not-allowed; }

.cr-muted { color: var(--cr-ink-faint); font-size: 14px; }
.cr-danger { color: var(--cr-bad); }