/**
 * v3.3 — Complete-profile / registration design.
 * Ported from the approved registration.html mockup (deep club navy,
 * serif headings, numbered section rail, card sections).
 * Scoped to .cpp-regwrap so nothing else on the site is affected.
 */
.cpp-regwrap {
	--cppr-navy: #0e2a47;
	--cppr-navy2: #16395f;
	--cppr-blue: #1f5fa8;
	--cppr-blue-soft: #e8f0f9;
	--cppr-sky: #f5f8fc;
	--cppr-line: #d8e1ec;
	--cppr-gold: #b99a5b;
	--cppr-muted: #5d6b7c;
	--cppr-green: #2f6b4f;
	--cppr-green-soft: #e9f2ec;
	font-family: 'Libre Franklin', system-ui, sans-serif;
	color: var(--cppr-navy);
	font-size: 15px;
	line-height: 1.6;
	background: var(--cppr-sky);
	border-radius: 22px;
	padding-bottom: 60px;
}

/* ---------- top band ---------- */
.cpp-reg-band {
	background: linear-gradient(135deg, var(--cppr-navy) 0%, var(--cppr-navy2) 60%, #1d4471 100%);
	color: #fff;
	border-radius: 22px 22px 0 0;
	margin-bottom: 46px;
}
.cpp-reg-band-inner { max-width: 1080px; margin: 0 auto; padding: 46px 34px 52px; }
.cpp-reg-eyebrow {
	font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
	color: #a8c3e0; margin-bottom: 14px;
}
.cpp-reg-band h1 {
	font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; color: #fff;
	font-size: clamp(28px, 4.2vw, 42px); line-height: 1.12; margin: 0; max-width: 22ch;
}
.cpp-reg-band p { margin: 16px 0 0; max-width: 56ch; color: #c3d4e7; font-size: 15.5px; }
.cpp-reg-rule { width: 56px; height: 2px; background: var(--cppr-gold); margin-top: 26px; border-radius: 2px; }

/* ---------- layout: numbered rail + form ---------- */
.cpp-reg-grid {
	display: grid; grid-template-columns: 210px minmax(0, 1fr);
	gap: 44px; align-items: start;
	max-width: 1080px; margin: 0 auto; padding: 0 24px;
}
.cpp-reg-rail { position: sticky; top: 32px; font-size: 13.5px; }
.cpp-reg-rail-title {
	font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
	color: var(--cppr-muted); margin-bottom: 14px;
}
.cpp-reg-rail ol { list-style: none; counter-reset: cpprstep; margin: 0; padding: 0; }
.cpp-reg-rail li { counter-increment: cpprstep; margin: 0; }
.cpp-reg-rail a {
	display: flex; align-items: center; gap: 11px; padding: 9px 0;
	color: var(--cppr-muted); text-decoration: none; font-weight: 500; transition: color .15s;
}
.cpp-reg-rail a::before {
	content: counter(cpprstep);
	width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--cppr-line);
	display: flex; align-items: center; justify-content: center;
	font-size: 11.5px; font-weight: 600; background: #fff; transition: all .15s; flex-shrink: 0;
}
.cpp-reg-rail a:hover { color: var(--cppr-navy); }
.cpp-reg-rail a:hover::before { border-color: var(--cppr-blue); color: var(--cppr-blue); }
@media (max-width: 880px) {
	.cpp-reg-grid { grid-template-columns: 1fr; gap: 0; }
	.cpp-reg-rail { display: none; }
}

/* ---------- form sections as cards ---------- */
.cpp-regwrap .cpp-form { background: transparent; border: 0; padding: 0; margin: 0; min-width: 0; }
.cpp-regwrap .cpp-sec {
	background: #fff; border: 1px solid var(--cppr-line); border-radius: 22px;
	padding: 36px 38px; margin-bottom: 26px;
	box-shadow: 0 2px 12px rgba(14, 42, 71, .05);
	scroll-margin-top: 30px;
}
@media (max-width: 640px) { .cpp-regwrap .cpp-sec { padding: 26px 20px; } }
.cpp-regwrap .cpp-sec-head { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; flex-wrap: wrap; }
.cpp-regwrap .cpp-sec-head h2 {
	font-family: 'Source Serif 4', Georgia, serif; font-weight: 600;
	font-size: 22px; margin: 0; color: var(--cppr-navy);
}
.cpp-regwrap .cpp-tag {
	font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
	background: var(--cppr-blue-soft); color: var(--cppr-blue);
	padding: 4px 11px; border-radius: 100px;
}
.cpp-regwrap .cpp-tag-green { background: var(--cppr-green-soft); color: var(--cppr-green); }
.cpp-regwrap .cpp-sec-note { color: var(--cppr-muted); font-size: 14px; margin: 4px 0 20px; }

/* ---------- fields ---------- */
.cpp-regwrap .cpp-form label { color: var(--cppr-navy); font-weight: 600; font-size: 13.5px; }
.cpp-regwrap .cpp-form small { display: block; font-weight: 400; color: var(--cppr-muted); margin-top: 4px; }
.cpp-regwrap .cpp-form input[type="text"],
.cpp-regwrap .cpp-form input[type="email"],
.cpp-regwrap .cpp-form input[type="url"],
.cpp-regwrap .cpp-form input[type="number"],
.cpp-regwrap .cpp-form select,
.cpp-regwrap .cpp-form textarea {
	border: 1px solid var(--cppr-line); border-radius: 10px;
	background: #fff; color: var(--cppr-navy); font-size: 15px;
	padding: 11px 13px; transition: border-color .15s, box-shadow .15s;
}
.cpp-regwrap .cpp-form input:focus,
.cpp-regwrap .cpp-form select:focus,
.cpp-regwrap .cpp-form textarea:focus {
	outline: none; border-color: var(--cppr-blue);
	box-shadow: 0 0 0 3px rgba(31, 95, 168, .14);
}
.cpp-regwrap .cpp-form ::placeholder { color: #9aa8b8; }
.cpp-regwrap .cpp-form input[readonly] { background: var(--cppr-sky); color: var(--cppr-muted); }

/* profession multi-select */
.cpp-regwrap .cpp-msel-trigger {
	border: 1px solid var(--cppr-line); border-radius: 10px; background: #fff;
	color: var(--cppr-navy);
}
.cpp-regwrap .cpp-msel-panel { border: 1px solid var(--cppr-line); border-radius: 12px; box-shadow: 0 14px 40px rgba(14, 42, 71, .14); }
.cpp-regwrap .cpp-msel-group { color: var(--cppr-muted); }
.cpp-regwrap .cpp-msel-tags .cpp-chip,
.cpp-regwrap .cpp-msel-tags span {
	background: var(--cppr-blue-soft); color: var(--cppr-blue); border-radius: 100px;
}

/* uploads */
.cpp-regwrap .cpp-drop {
	border: 1.5px dashed var(--cppr-line); border-radius: 14px;
	background: var(--cppr-sky); color: var(--cppr-muted);
}
.cpp-regwrap .cpp-drop strong { color: var(--cppr-navy); }

/* projects accordions */
.cpp-regwrap .cpp-prj-fe {
	border: 1px solid var(--cppr-line); border-radius: 14px;
	background: var(--cppr-sky); padding: 0 16px; margin: 0 0 12px;
}
.cpp-regwrap .cpp-prj-fe summary {
	cursor: pointer; font-weight: 600; padding: 13px 0; color: var(--cppr-navy);
	list-style: none;
}
.cpp-regwrap .cpp-prj-fe summary::before { content: "▸ "; color: var(--cppr-blue); }
.cpp-regwrap .cpp-prj-fe[open] summary::before { content: "▾ "; }
.cpp-regwrap .cpp-prj-fe .cpp-form-grid { padding-bottom: 16px; }
.cpp-regwrap .cpp-prj-thumb {
	display: block; width: 70px; height: 70px; object-fit: cover;
	border-radius: 8px; margin: 6px 0; border: 1px solid var(--cppr-line);
}

/* notices, upsell */
.cpp-regwrap .cpp-notice { border-radius: 12px; }
.cpp-regwrap .cpp-notice-ok { background: var(--cppr-green-soft); color: var(--cppr-green); border: 1px solid #cfe3d6; }
.cpp-regwrap .cpp-notice-error { background: #faecec; color: #8c2f2f; border: 1px solid #ecd2d2; }
.cpp-regwrap .cpp-featured-upsell {
	background: #fbf7ef; border: 1px solid #e8dcc2; border-radius: 14px; padding: 16px 18px; margin: 0 0 22px;
}
.cpp-regwrap .cpp-btn-gold { background: var(--cppr-gold); color: #fff !important; border-radius: 100px; }

/* submit bar */
.cpp-regwrap .cpp-submit-bar {
	background: #fff; border: 1px solid var(--cppr-line); border-radius: 22px;
	padding: 24px 30px; display: flex; align-items: center; justify-content: space-between;
	gap: 18px; flex-wrap: wrap; box-shadow: 0 2px 12px rgba(14, 42, 71, .05);
}
.cpp-regwrap .cpp-submit-bar p { margin: 0; color: var(--cppr-muted); font-size: 13px; max-width: 52ch; }
.cpp-regwrap .cpp-btn-primary,
.cpp-regwrap .cpp-btn-pill {
	background: var(--cppr-blue); color: #fff !important; border: 0;
	border-radius: 100px; padding: 13px 32px; font-weight: 600; font-size: 15px;
	cursor: pointer; transition: background .15s, transform .15s;
}
.cpp-regwrap .cpp-btn-primary:hover { background: var(--cppr-navy2); transform: translateY(-1px); }
.cpp-regwrap .cpp-small { color: var(--cppr-muted); font-size: 13px; margin-top: 12px; text-align: center; }


/* brand row in the band (mockup) */
.cpp-reg-brand {
	display: flex; align-items: center; gap: 12px; margin-bottom: 36px;
	font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 20px; color: #fff;
}
.cpp-reg-mark {
	width: 36px; height: 36px; border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #3d78bd, var(--cppr-blue) 70%);
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35);
}
.cpp-reg-mark svg { width: 18px; height: 18px; }

/* availability callout (mockup) */
.cpp-reg-callout {
	display: flex; gap: 16px; align-items: flex-start;
	background: var(--cppr-blue-soft); border: 1px solid #c8daee;
	border-radius: 14px; padding: 20px 22px; margin-bottom: 22px;
	color: var(--cppr-blue);
}
.cpp-reg-callout svg { flex-shrink: 0; margin-top: 2px; }
.cpp-reg-callout strong { display: block; font-size: 14.5px; margin-bottom: 3px; color: var(--cppr-navy); }
.cpp-reg-callout p { font-size: 13.5px; color: #3c5573; margin: 0; }

/* project number pill (mockup) */
.cpp-regwrap .cpp-prj-fe summary::before { content: none; }
.cpp-regwrap .cpp-prj-fe summary {
	display: inline-flex; align-items: center; gap: 12px;
}
.cpp-regwrap .cpp-prj-fe summary::after {
	content: "▾"; color: var(--cppr-blue); font-size: 13px;
}
.cpp-regwrap .cpp-prj-fe:not([open]) summary::after { content: "▸"; }

.cpp-reg-main { min-width: 0; }
.cpp-reg-main > .cpp-notice, .cpp-reg-main > .cpp-featured-upsell { margin-bottom: 18px; }

/* validation states + language multiselect */
.cpp-regwrap .cpp-field-error,
.cpp-regwrap .cpp-field-error .cpp-msel-trigger { border-color: #c0392b !important; box-shadow: 0 0 0 3px rgba(192, 57, 43, .12) !important; }
.cpp-regwrap .cpp-val-notice { margin-bottom: 18px; }
.cpp-regwrap .cpp-lang-sel { min-height: 150px; }
.cpp-regwrap .cpp-form small a { color: var(--cppr-blue); font-weight: 600; text-decoration: none; }
.cpp-regwrap .cpp-form small a:hover { text-decoration: underline; }

/* v3.7.3 — project media UI */
.cpp-thumbwrap { position: relative; display: inline-block; }
.cpp-thumb-x {
	position: absolute; top: -8px; right: -8px;
	width: 22px; height: 22px; line-height: 20px; padding: 0;
	border: 0; border-radius: 50%; cursor: pointer;
	background: #c0392b; color: #fff; font-size: 15px; font-weight: 700;
	box-shadow: 0 1px 4px rgba(0,0,0,.35); z-index: 2;
}
.cpp-thumb-x:hover { background: #e74c3c; }
.cpp-ba-pair { border: 1px solid #e3e1da; border-radius: 10px; padding: 12px; margin: 0 0 12px; }
.cpp-ba-pair-head { margin: 0 0 6px; font-weight: 600; font-size: .9rem; }
.cpp-ba-title {
	display: block; width: 100%; max-width: 320px;
	font-size: .85rem; padding: 6px 10px; margin: 0 0 10px;
}
.cpp-ba-slot { display: block; margin: 0 0 10px; }
.cpp-ba-slot:last-child { margin-bottom: 0; }
.cpp-ba-slot-lbl { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .7; margin-bottom: 4px; }
.cpp-ba-slot .cpp-thumbwrap { margin: 0 0 6px; }
.cpp-prj-galthumbs { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 10px; }
.cpp-prj-media-ba[hidden], .cpp-prj-media-gal[hidden] { display: none !important; }

/* v3.7.4 */
.cpp-ba-addmore { margin-top: 2px; }
.cpp-ba-pair[hidden] { display: none !important; }

/* v3.8.8 — "See profile" link in the header band */
.cpp-regwrap .cpp-reg-seeprofile{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:10px 18px;border:1px solid rgba(255,255,255,.55);border-radius:999px;color:#fff !important;text-decoration:none !important;font-weight:600;font-size:.95rem;transition:background .15s,color .15s}
.cpp-regwrap .cpp-reg-seeprofile:hover{background:#fff;color:#242241 !important}
.cpp-regwrap .cpp-reg-seeprofile span{transition:transform .15s;display:inline-block}
.cpp-regwrap .cpp-reg-seeprofile:hover span{transform:translateX(3px)}
.cpp-regwrap .cpp-reg-seeprofile-pending{border-style:dashed;opacity:.85;cursor:default}