/* registration.aspx: the childcare provider registration form.
   The form controls (WebUserControls/Forms/FormDC*.ascx) are shared with the admin and member pages,
   so their markup is unchanged and everything here is scoped to div.regPage.
   Breakpoints: 1000px (tablet: section guide becomes a row of chips) and 640px (phone: one column). */

.regPage
{
	--plum: #5B2E57;
	--teal: #0F7C80;
	--tealDark: #0B6266;
	--tealTint: #E7F4F4;
	--lilac: #F6F1F7;
	--border: #D9CCE0;
	--line: #E3DCE8;
	--field: #BFB2C8;
	--text: #3F3F46;
	--muted: #6B6B73;
	--error: #B42318;

	padding-bottom: 8px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--text);
}

.regPage *,
.regPage *::before,
.regPage *::after
{
	box-sizing: border-box;
}

.regPage h1,
.regPage h2,
.regPage h4
{
	margin: 0;
	font-family: verdana, helvetica, sans-serif;
	font-weight: bold;
	color: var(--plum);
}

.regPage p { margin: 0; }
.regPage a { color: var(--teal); }
.regPage a:hover { color: var(--tealDark); }

.regPage .panel
{
	background-color: #ffffff;
	border: 1px solid var(--border);
	border-radius: 10px;
}

.regPage .eyebrow
{
	display: inline-block;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--teal);
}

.regPage .opt
{
	font-weight: normal;
	color: var(--muted);
}

/* ---------- top: title and the chosen package ---------- */

.regTop
{
	margin-top: 32px;
	padding: 32px 40px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 32px;
	align-items: center;
}

.regTop h1
{
	margin-top: 8px;
	font-size: 30px;
	line-height: 1.25;
}

.regTop p
{
	margin-top: 10px;
	color: #52525B;
}

.regPlan
{
	min-width: 300px;
	padding: 18px 22px;
	background-color: var(--lilac);
	border: 1px solid var(--border);
	border-radius: 10px;
}

.regPlanLbl { display: block; font-size: 12px; color: var(--muted); }
.regPlanName { display: block; margin-top: 2px; font-size: 17px; font-weight: bold; color: var(--plum); }
.regPlanPrice { display: block; margin-top: 2px; }
.regPlan a { display: inline-block; margin-top: 8px; font-size: 13px; }

/* ---------- layout: section guide on the left, sections on the right ---------- */

.regLayout
{
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 28px;
	margin-top: 24px;
	align-items: start;
}

.regNav
{
	position: sticky;
	top: 24px;
	padding: 20px;
}

.regNav h2
{
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: normal;
	color: var(--muted);
}

.regNav ol
{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.regNav ol a
{
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 40px;
	padding: 4px 8px;
	border-radius: 6px;
	color: var(--text);
	text-decoration: none;
}

.regNav ol a:hover { background-color: var(--lilac); color: var(--text); }
.regNav ol a.on { background-color: var(--lilac); color: var(--plum); font-weight: bold; }

.regNav .regNum
{
	width: 26px;
	height: 26px;
	font-size: 12px;
	background-color: #ffffff;
	color: var(--teal);
}

.regNav a.on .regNum { background-color: var(--teal); color: #ffffff; }

.regHelp
{
	margin-top: 16px !important;
	padding-top: 16px;
	border-top: 1px solid var(--line);
	font-size: 13px;
	color: #52525B;
}

.regNum
{
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 2px solid var(--teal);
	border-radius: 50%;
	font-size: 14px;
	font-weight: bold;
	background-color: var(--teal);
	color: #ffffff;
}

/* sections are numbered by CSS, so the free package (no hours or photos) still counts 1, 2, 3 ... */
.regSecs { display: flex; flex-direction: column; gap: 24px; counter-reset: regSec; }
.regEnhanced { display: flex; flex-direction: column; gap: 24px; }
.regSec { padding: 32px 36px; counter-increment: regSec; scroll-margin-top: 16px; }
.regSec .regNum::before { content: counter(regSec); }

.regSecHd
{
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin-bottom: 24px;
}

.regSecHd .regNum { margin-top: -2px; }
.regSecHd h2 { font-size: 20px; line-height: 1.3; }
.regSecHd h2 .opt { font-size: 14px; }
.regSecHd p { margin-top: 4px; font-size: 13px; color: var(--muted); }

/* ---------- fields ---------- */

.regPage .inputElement { margin: 0; width: auto; }
.regPage .inputLabel { padding: 0; margin-bottom: 6px; color: var(--text); font-size: 13px; font-weight: bold; }
.regPage .inputLabel label,
.regPage .inputLabel > span:not([style]) { color: var(--text); }
.regPage .inputData { padding: 0; }

/* validators render as red spans with an inline style; show them as a line under the label */
.regPage .inputLabel > span[style],
.regPage .inputLabel .error,
.regPage .inputLabel .validationMessage
{
	display: block;
	margin-top: 2px;
	font: bold 12px verdana, helvetica, sans-serif;
	color: var(--error) !important;
}

.regPage .inputLabel > span[style*="hidden"] { display: none; }
.regPage .inputLabel > span[style]:not([style*="none"]):not([style*="hidden"]) { display: block !important; }

.regPage input[type="text"],
.regPage input[type="email"],
.regPage input[type="password"],
.regPage textarea,
.regPage select
{
	display: block;
	width: 100% !important;
	height: 44px;
	margin: 0;
	padding: 0 12px;
	font: 14px verdana, helvetica, sans-serif;
	color: var(--text);
	background-color: #ffffff;
	border: 1px solid var(--field);
	border-radius: 6px;
}

.regPage select { padding: 0 8px; }

.regPage textarea
{
	height: 120px;
	padding: 10px 12px;
	line-height: 1.5;
	resize: vertical;
}

.regPage input[type="text"]:focus,
.regPage input[type="email"]:focus,
.regPage input[type="password"]:focus,
.regPage textarea:focus,
.regPage select:focus
{
	outline: none;
	border-color: var(--teal);
	box-shadow: 0 0 0 3px rgba(15, 124, 128, .2);
}

/* the 12 column field grid used by the About, Contact and Account sections */
.regGrid,
.regAddressGrid > div,
.regContactGrid > div:last-child
{
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 20px 24px;
	align-items: end;
}

.regGrid > *,
.regAddressGrid > div > * { grid-column: span 12; }

/* panels that only group fields join the grid */
.regAccountGrid > div[id$="_pnlPasswords"] { display: contents; }

/* About: name, description and website full width; age group, total and available on one row */
.regAboutGrid .inputElement:has([id$="_ddlAgeGroupStart"]) { grid-column: span 6; }
.regAboutGrid .inputElement:has([id$="_txtTotalSpaces"]),
.regAboutGrid .inputElement:has([id$="_txtAvailableSpaces"]) { grid-column: span 3; }

.regAboutGrid .inputElement:has([id$="_ddlAgeGroupStart"]) .inputData
{
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--muted);
	font-size: 13px;
}

/* Contact: email full width, phone and extension share a row */
.regContactGrid > div:last-child > div { float: none !important; grid-column: span 8; }
.regContactGrid > div:last-child > div + div { grid-column: span 4; }

/* the phone control has   spacers around the extension; hide them so both fields line up */
.regContactGrid > div:last-child .inputLabel,
.regContactGrid > div:last-child .inputData { font-size: 0; }
.regContactGrid > div:last-child .inputLabel > span:not([style]) { font-size: 13px; }

/* Address: street + suite, then city, province and postal code */
.regAddressGrid .inputElement:has([id$="_txtAddress"]) { grid-column: span 8; }
.regAddressGrid .inputElement:has([id$="_txtSuite"]),
.regAddressGrid .inputElement:has([id$="_txtCity"]),
.regAddressGrid .inputElement:has([id$="_ddlProvince"]),
.regAddressGrid .inputElement:has([id$="_txtPostalCode"]) { grid-column: span 4; }

/* Account: first and last name, email, then the two passwords */
.regAccountGrid .inputElement:has([id$="_txtNameFirst"]),
.regAccountGrid .inputElement:has([id$="_txtNameLast"]),
.regAccountGrid .inputElement:has([id$="_txtPassword"]),
.regAccountGrid .inputElement:has([id$="_txtPasswordConfirm"]) { grid-column: span 6; }

/* city suggestions from the AutoCompleteExtender */
.regPage .completionList,
.regPage ul[id$="_completionListElem"]
{
	border: 1px solid var(--border);
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}

/* ---------- hours of operation (registration.aspx.js adds the Closed column and the copy button) ---------- */

.regHours .inputElement { margin: 0; padding: 0; }
.regHours .inputData { margin: 0; padding: 0; overflow-x: auto; }

.regHours table
{
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--line);
	border-radius: 8px;
	overflow: hidden;
}

.regHours td
{
	padding: 10px 12px !important;
	border-top: 1px solid var(--line);
	color: var(--muted);
	white-space: nowrap;
	width: auto !important;
}

.regHours tr:first-child td
{
	border-top: 0;
	padding-top: 8px !important;
	padding-bottom: 8px !important;
	background-color: var(--lilac);
	font-size: 12px;
	font-weight: bold;
	color: var(--plum);
}

.regHours td.formData { color: var(--text); font-weight: bold; }
.regHours tr:first-child td.formData { color: var(--plum); }

.regHours select
{
	display: inline-block;
	width: 58px !important;
	height: 40px;
	padding: 0 4px;
	vertical-align: middle;
}

.regHours tr.off { background-color: #FAFAFA; }
.regHours tr.off select { background-color: #F1F1F3; color: #9A9AA3; border-color: #DADADF; }

.regChk
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-size: 13px;
	font-weight: normal;
	color: var(--text);
	cursor: pointer;
}

.regChk input,
.regChips input { width: 18px; height: 18px; margin: 0; accent-color: var(--teal); }

.regLinkBtn
{
	margin-top: 4px;
	padding: 10px 0;
	border: 0;
	background: none;
	font: bold 13px verdana, helvetica, sans-serif;
	color: var(--teal);
	text-decoration: underline;
	cursor: pointer;
}

.regLinkBtn:hover { color: var(--tealDark); }

/* ---------- photos: six cards ---------- */

.regPhotos
{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.regPhotos > div
{
	padding: 16px;
	border: 2px dashed #C9BFD0;
	border-radius: 8px;
	background-color: #FBF9FC;
}

.regPhotos > div:hover { border-color: var(--teal); }
.regPhotos > div > div { float: none !important; }
.regPhotos h4 { margin: 0 0 10px !important; font-size: 14px; }

.regPhotos input[type="file"]
{
	display: block;
	width: 100% !important;
	margin: 0 0 14px !important;
	font: 12px verdana, helvetica, sans-serif;
	color: var(--muted);
}

.regPhotos input[type="file"]::file-selector-button
{
	margin-right: 10px;
	min-height: 40px;
	padding: 0 14px;
	font: bold 13px verdana, helvetica, sans-serif;
	color: var(--teal);
	background-color: #ffffff;
	border: 2px solid var(--teal);
	border-radius: 6px;
	cursor: pointer;
}

.regPhotos input[type="text"] { height: 40px; font-size: 13px; }

.regThumb
{
	display: block;
	width: 100%;
	height: 120px;
	margin-bottom: 10px;
	object-fit: cover;
	border-radius: 6px;
}

/* ---------- how did you hear: the CheckBoxList table shown as chips ---------- */

.regChips .inputElement,
.regChips .inputData { margin: 0; padding: 0; }
.regChips table,
.regChips tbody { display: flex; flex-wrap: wrap; gap: 10px; }
.regChips tr { display: contents; }

.regChips td
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--field);
	border-radius: 999px;
	background-color: #ffffff;
	font-size: 13px;
	cursor: pointer;
}

.regChips td label { cursor: pointer; color: var(--text); }
.regChips td:has(input:checked) { border-color: var(--teal); background-color: var(--tealTint); }
.regChips td:has(input:checked) label { color: #0B5F62; font-weight: bold; }

/* ---------- buttons and server messages ---------- */

.regDone { padding: 28px 36px; }

.regDoneRow
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.regNext { color: #52525B; }

.regServerErrors
{
	display: block;
	margin-bottom: 20px;
	padding: 14px 18px;
	background-color: #FEF3F2;
	border: 1px solid #F4C7C3;
	border-radius: 8px;
	color: #912018;
	font-weight: bold;
}

.regServerErrors:empty { display: none; }
.regServerErrors > br:first-child { display: none; }

.regBtns { display: flex; gap: 12px; flex-wrap: wrap; }

.regPage .regBtn
{
	min-height: 46px;
	padding: 0 26px;
	font: bold 15px verdana, helvetica, sans-serif;
	color: #ffffff;
	background-color: var(--teal);
	border: 2px solid var(--teal);
	border-radius: 6px;
	box-shadow: 0 2px 6px rgba(15, 124, 128, .3);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.regPage .regBtn:hover { background-color: var(--tealDark); border-color: var(--tealDark); }

.regPage .regBtnS
{
	color: var(--teal);
	background-color: #ffffff;
	box-shadow: none;
}

.regPage .regBtnS:hover { color: var(--tealDark); background-color: var(--lilac); }

.regPage .regBtn:focus-visible,
.regNav a:focus-visible,
.regLinkBtn:focus-visible
{
	outline: 3px solid var(--plum);
	outline-offset: 2px;
}

/* ---------- tablet ---------- */

@media (max-width: 1000px)
{
	.regTop { grid-template-columns: minmax(0, 1fr); padding: 28px; gap: 20px; }
	.regPlan { min-width: 0; }
	.regLayout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.regNav { position: static; padding: 14px 16px; }
	.regNav h2,
	.regHelp { display: none; }
	.regNav ol { flex-direction: row; flex-wrap: wrap; gap: 6px; }
	.regNav ol a { min-height: 44px; padding: 4px 12px 4px 6px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; }
	.regSec { padding: 28px; }
	.regHours td { padding: 10px 10px !important; }
	.regHours select { width: 54px !important; }
	.regPhotos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- phone ---------- */

@media (max-width: 640px)
{
	.regTop { margin-top: 16px; padding: 22px 18px; }
	.regTop h1 { font-size: 24px; }
	.regNav { display: none; }
	.regSec { padding: 22px 18px; }
	.regSecHd { margin-bottom: 18px; }
	.regSecHd h2 { font-size: 18px; }

	.regGrid,
	.regAddressGrid > div,
	.regContactGrid > div:last-child { gap: 16px; }

	.regGrid .inputElement,
	.regAddressGrid .inputElement,
	.regAboutGrid .inputElement:has([id$="_ddlAgeGroupStart"]),
	.regAddressGrid .inputElement:has([id$="_txtAddress"]),
	.regAddressGrid .inputElement:has([id$="_txtCity"]),
	.regAccountGrid .inputElement:has([id$="_txtNameFirst"]),
	.regAccountGrid .inputElement:has([id$="_txtNameLast"]),
	.regAccountGrid .inputElement:has([id$="_txtPassword"]),
	.regAccountGrid .inputElement:has([id$="_txtPasswordConfirm"]) { grid-column: span 12; }

	.regAboutGrid .inputElement:has([id$="_txtTotalSpaces"]),
	.regAboutGrid .inputElement:has([id$="_txtAvailableSpaces"]),
	.regAddressGrid .inputElement:has([id$="_txtSuite"]),
	.regAddressGrid .inputElement:has([id$="_ddlProvince"]),
	.regAddressGrid .inputElement:has([id$="_txtPostalCode"]) { grid-column: span 6; }

	.regContactGrid > div:last-child > div { grid-column: span 12; }
	.regContactGrid > div:last-child > div + div { grid-column: span 6; }

	/* each day becomes a small card: day and Closed on top, opens and closes below */
	.regHours table,
	.regHours tbody { display: flex; flex-direction: column; gap: 10px; border: 0; border-radius: 0; overflow: visible; }
	.regHours tr:first-child { display: none; }

	.regHours tr
	{
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		padding: 8px 12px;
		border: 1px solid var(--line);
		border-radius: 8px;
	}

	.regHours td { border: 0; padding: 2px 0 !important; }
	.regHours td:nth-child(1) { grid-column: 1; grid-row: 1; }
	.regHours td:nth-child(4) { grid-column: 2; grid-row: 1; }
	.regHours td:nth-child(2),
	.regHours td:nth-child(3) { grid-column: 1 / -1; display: flex; align-items: center; gap: 4px; }
	.regHours td:nth-child(2)::before,
	.regHours td:nth-child(3)::before { content: attr(data-l); width: 56px; font-size: 12px; }
	.regHours select { flex: 1; width: auto !important; }

	.regPhotos { gap: 14px; grid-template-columns: minmax(0, 1fr); }
	.regDone { padding: 22px 18px; }
	.regBtns { width: 100%; flex-direction: column-reverse; }
	.regPage .regBtn { width: 100%; }
}