/* ============================================
   REGISTER — 2026 redesign.
   register.css loads last for this page, so these rules win.
   Chrome (header/footer/Raleway) comes from layout-public.css.
   ============================================ */

body#body_register section#mainContent { font-size: 17px; color: #3c474d; line-height: 1.6; }

/* Hide the old jagged SVG dividers on this page */
body#body_register div.skewContainer { display: none !important; }

/* ---- Split hero: form panel + photo ---- */
section#mainContent div.coverContainer:first-of-type { padding: 0; max-width: none; }

div.imgSkew {
	display: grid; grid-template-columns: 1.05fr .95fr; gap: 0;
	max-width: 78rem; margin: 2.5em auto; border-radius: 16px; overflow: hidden;
	border: 1px solid #e4e9eb; box-shadow: 0 24px 50px -24px rgba(12,43,51,.35);
}
div.imgSkew.reverse { direction: rtl; }
div.imgSkew.reverse > * { direction: ltr; }
div.imgSkew div.iskewText {
	background: #fff; color: #3c474d; padding: 42px; clip-path: none; line-height: 1.6;
}
body#body_register div.iskewImage {
	position: relative; min-height: 100%; clip-path: none;
	background-size: cover; background-position: center;
}
div.imgSkew div.iskewImage span.imageCopy {
	position: absolute; bottom: .5em; left: 1em; right: auto; font-size: .65rem; color: rgba(255,255,255,.85);
}
div.iskewText h1 { color: #20272c; font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -.02em; margin-bottom: .3em; line-height: 1.1; }
div.iskewText > p { color: #6c7a80; }

/* ---- Role choice ---- */
div.regConfirm { margin: 1em 0 0; }
div.regConfirm > p { font-weight: 700; color: #20272c; margin-bottom: .6em; }
.regButtonGroup { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 18px; }
.regButtonGroup .role-button {
	display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px;
	border: 1.5px solid #e4e9eb; border-radius: 12px; background: #fff; cursor: pointer;
	font-weight: 700; color: #20272c; font-size: .95rem; transition: border .15s, background .15s;
}
.regButtonGroup .role-button i { font-size: 1.4em; color: var(--color-blue); }
.regButtonGroup .role-button:hover, .regButtonGroup .role-button.active {
	border-color: var(--color-blue); background: rgba(2,98,127,.05);
}

/* ---- Form fields ---- */
div.regForm { transition: opacity .2s; }
div.iskewText div.formGroup { margin: 0; }
div.iskewText .formItem { margin-bottom: 14px; }
div.iskewText .formSubGroup.flex { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
div.iskewText label { display: block; font-weight: 600; font-size: .88rem; color: #20272c; margin-bottom: 6px; }
div.iskewText input, div.iskewText select {
	width: 100%; height: auto !important; font-family: "Raleway", sans-serif; font-size: 1rem;
	padding: .72em .9em !important; border: 1.5px solid #e4e9eb; border-radius: 10px; background: #fff; color: #20272c;
}
div.iskewText input:focus, div.iskewText select:focus {
	outline: none; border-color: var(--color-blue); box-shadow: 0 0 0 3px rgba(2,98,127,.12);
}
div.iskewText .formItem.button input, div.iskewText input[type='button'] {
	background: #db5461; color: #fff; font-weight: 700; border: none; border-radius: 10px;
	padding: .85em 1.5em !important; cursor: pointer; width: 100%; height: auto !important;
}
div.iskewText .formItem.button input:hover, div.iskewText input[type='button']:hover { background: #c8434f; }
span.notice_required { color: #db5461; }

/* ---- Trust tips + fine print ---- */
div.coverTips { margin: 18px 0 0; width: 100%; }
div.coverTips ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
div.coverTips ul li { display: flex; align-items: center; gap: .6em; margin: 0; font-weight: 600; color: #3c474d; }
div.coverTips ul li i { border: 0; color: var(--color-blue); font-size: 1.05em; }
p.offline { color: #6c7a80; font-size: .8em; margin-top: 14px; line-height: 1.5; }

/* ---- Feature strip below the hero (highlightContainer.dark) ---- */
body#body_register div.highlightContainer.dark {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4em;
	max-width: 78rem; margin: 0 auto; padding: 60px 2em; background: #0c2b33; color: #cfe0e4;
}
body#body_register div.highlightContainer.dark > h2 { grid-column: 1 / -1; text-align: center; color: #fff; }
body#body_register div.highlightContainer.dark div.hItem { flex: none; padding: 8px; text-align: center; }
body#body_register div.highlightContainer.dark div.hItem header {
	width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; margin: 0 auto 12px;
	background: rgba(127,208,224,.12); color: #7fd0e0; font-size: 1.4rem; opacity: 1;
}
body#body_register div.highlightContainer.dark div.hItem h3 { color: #fff; font-size: 1.05rem; margin: 0; }

@media (max-width: 59.9rem) {
	div.imgSkew { grid-template-columns: 1fr; margin: 1em; }
	body#body_register div.iskewImage { min-height: 16rem; }
	div.iskewText .formSubGroup.flex { grid-template-columns: 1fr; }
	body#body_register div.highlightContainer.dark { grid-template-columns: 1fr 1fr; }
}