/*
 * CareShaper practitioner sign-up wizard (provider/signup/...).
 *
 * Loaded only by the three wizard pages, after the theme and site.css, and
 * scoped to .cs-reg so nothing else on the site is touched. It uses the
 * theme's own buttons (.btn-primary + .home_action_pill_container), form
 * controls and font; this file adds layout, the steps card, the code boxes
 * and the profession picker. Pixel units on purpose: the theme's root font
 * size is 20px, so rem would scale everything by 1.25.
 *
 * Colours are the site's: blue #3f78e0 (links #2f63c4 for contrast on white),
 * ink #343f52, muted #60697b, soft band #f1f5fd. Blue stays the colour of
 * everything clickable and of progress; the only warm accent is the theme's
 * hand-drawn yellow underline under one word of each page title.
 */

.cs-reg {
    --cs-reg-blue: #3f78e0;
    --cs-reg-link: #2f63c4;
    --cs-reg-ink: #343f52;
    --cs-reg-muted: #60697b;
    --cs-reg-soft: #f1f5fd;
    --cs-reg-soft-strong: #dbe6fb;
    --cs-reg-line: #e4e9f1;
    --cs-reg-border: #d5dce8;
    --cs-reg-error: #c0392b;
    color: var(--cs-reg-muted);
}

.cs-reg a:not(.btn) { color: var(--cs-reg-link); font-weight: 700; text-decoration: none; }
.cs-reg a:not(.btn):hover { color: #1f4a99; }

/* ------------------------------------------------------------------ hero */
/* The site navbar is position:absolute over the page (88px from 992px, 71px
   below); the band starts under it. */
.cs-reg-hero { background: var(--cs-reg-soft); padding: 104px 0 40px; }
@media (min-width: 992px) { .cs-reg-hero { padding: 144px 0 64px; } }

.cs-reg-eyebrow {
    margin: 0 0 10px; font-size: 14px; font-weight: 800; letter-spacing: 0.8px;
    text-transform: uppercase; color: var(--cs-reg-link);
}
.cs-reg-title {
    margin: 0 0 12px; font-size: 32px; line-height: 1.2; font-weight: 700;
    letter-spacing: -0.3px; color: var(--cs-reg-ink);
}
.cs-reg-lead {
    margin: 0 0 28px; /*max-width: 720px;*/ font-size: 18px; line-height: 1.55;
    font-weight: 500; color: var(--cs-reg-ink);
}
.cs-reg-email { font-weight: 800; word-break: break-word; }
@media (min-width: 768px) {
    .cs-reg-title { font-size: 42px; line-height: 1.15; letter-spacing: -0.4px; }
    .cs-reg-lead { font-size: 21px; line-height: 1.6; margin-bottom: 40px; }
}

/* ------------------------------------------------------------ steps card */
.cs-reg-steps {
    background: #fff; border-radius: 12px; overflow: hidden;
    box-shadow: 0 4px 24px rgba(30, 50, 90, 0.08); padding: 20px 20px 22px;
}
.cs-reg-steps__bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 12px 0 18px; }
.cs-reg-steps__segment { display: block; height: 6px; border-radius: 3px; background: #e4eaf5; }
.cs-reg-steps__segment.is-filled { background: var(--cs-reg-blue); }
.cs-reg-steps__count {
    order: -1; margin: 0; font-size: 14px; font-weight: 800; letter-spacing: 0.6px;
    text-transform: uppercase; color: var(--cs-reg-link);
}
.cs-reg-steps { display: flex; flex-direction: column; }
.cs-reg-steps__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }

.cs-reg-step { display: flex; gap: 14px; align-items: flex-start; }
.cs-reg-step__marker {
    flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 800; color: #4b5568; border: 2px solid #c5d3ee; background: #fff;
}
.cs-reg-step.is-current .cs-reg-step__marker { background: var(--cs-reg-blue); border-color: var(--cs-reg-blue); color: #fff; }
.cs-reg-step.is-done .cs-reg-step__marker { background: var(--cs-reg-soft-strong); border-color: var(--cs-reg-soft-strong); color: var(--cs-reg-link); }
.cs-reg-step.is-done .cs-reg-step__marker svg { width: 16px; height: 16px; }
.cs-reg-step__body { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.cs-reg-step__title { font-size: 16px; font-weight: 800; color: var(--cs-reg-ink); line-height: 1.4; padding-top: 4px; }
.cs-reg-step__state {
    order: 2; font-size: 13px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--cs-reg-link);
}
.cs-reg-step.is-upcoming .cs-reg-step__state { display: none; }
.cs-reg-step__text { order: 3; flex-basis: 100%; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--cs-reg-muted); }
.cs-reg-step.is-done .cs-reg-step__text { display: none; }

@media (min-width: 768px) {
    .cs-reg-steps { padding: 0; }
    .cs-reg-steps__count { display: none; }
    .cs-reg-steps__bar { order: -1; margin: 0; gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cs-reg-steps__segment { border-radius: 0; }
    .cs-reg-steps__list {
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding: 28px 36px 30px;
    }
    .cs-reg-step { gap: 16px; }
    .cs-reg-step__marker { flex-basis: 44px; width: 44px; height: 44px; font-size: 18px; }
    .cs-reg-step.is-done .cs-reg-step__marker svg { width: 20px; height: 20px; }
    .cs-reg-step__body { display: flex; flex-direction: column; align-items: flex-start; }
    .cs-reg-step__state { order: 0; margin-bottom: 2px; color: var(--cs-reg-muted); }
    .cs-reg-step.is-current .cs-reg-step__state,
    .cs-reg-step.is-done .cs-reg-step__state { color: var(--cs-reg-link); }
    .cs-reg-step.is-upcoming .cs-reg-step__state { display: block; }
    .cs-reg-step__title { order: 1; font-size: 18px; padding-top: 0; margin-bottom: 4px; }
    .cs-reg-step__text { order: 2; font-size: 15px; line-height: 1.5; margin-top: 0; }
    .cs-reg-step.is-done .cs-reg-step__text { display: block; }
}

/* ------------------------------------------------------------ main area */
.cs-reg-main { padding: 36px 0 56px; }
@media (min-width: 992px) { .cs-reg-main { padding: 64px 0 80px; } }

.cs-reg-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
@media (min-width: 992px) {
    .cs-reg-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 64px; align-items: start; }
}
@media (min-width: 1200px) {
    .cs-reg-grid { grid-template-columns: minmax(0, 1fr) 420px; gap: 80px; }
}

/* ------------------------------------------------------------------ form */
.cs-reg-form { display: flex; flex-direction: column; gap: 22px; }
.cs-reg-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
@media (min-width: 768px) { .cs-reg-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }

.cs-reg-field { min-width: 0; }
.cs-reg-label { display: block; margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--cs-reg-ink); }
.cs-reg-optional { font-weight: 500; color: var(--cs-reg-muted); }
.cs-reg .cs-reg-input {
    height: 54px; border: 1px solid var(--cs-reg-border); border-radius: 8px; padding: 0 16px;
    font-size: 16px; font-weight: 500; color: var(--cs-reg-ink); background-color: #fff; box-shadow: none;
}
.cs-reg select.cs-reg-input { padding-right: 40px; }
.cs-reg .cs-reg-input::placeholder { color: #7a8496; opacity: 1; }
.cs-reg .cs-reg-input:focus { border-color: var(--cs-reg-blue); box-shadow: 0 0 0 4px var(--cs-reg-soft-strong); outline: 0; }
.cs-reg .cs-reg-input.is-invalid { border-color: var(--cs-reg-error); }
.cs-reg .cs-reg-input.is-valid   { border-color: #27ae60; }
.cs-reg-error   { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: var(--cs-reg-error); }
.cs-reg-success { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: #27ae60; }
.cs-reg-help { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--cs-reg-muted); }

.cs-reg-alert, .cs-reg-notice {
    border-radius: 8px; padding: 14px 18px; font-size: 15px; font-weight: 600; line-height: 1.5;
}
.cs-reg-alert { background: #fdf0ee; color: #8e2a1f; border: 1px solid #f3c9c2; }
.cs-reg-notice { background: var(--cs-reg-soft); color: var(--cs-reg-ink); border: 1px solid #d3dcec; margin-bottom: 22px; }

/* Phone: intl-tel-input wraps the field. */
.cs-reg .iti { display: block; width: 100%; }
.cs-reg .iti .cs-reg-input { padding-left: 92px; }
.cs-reg .iti__flag { background-image: url("../../js/plugins/intl-tel-input/img/flags.png"); }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .cs-reg .iti__flag { background-image: url("../../js/plugins/intl-tel-input/img/flags@2x.png"); }
}

/* Password: Show / Hide and the live checklist. */
.cs-reg-password { position: relative; }
.cs-reg-password .cs-reg-input { padding-right: 88px; }
.cs-reg-password__toggle {
    position: absolute; right: 5px; top: 5px; height: 44px; padding: 0 14px; border: 0; border-radius: 6px;
    background: transparent; font-size: 15px; font-weight: 700; color: var(--cs-reg-link); cursor: pointer;
}
.cs-reg-password__toggle:focus-visible { outline: 2px solid var(--cs-reg-blue); outline-offset: 2px; }
.cs-reg-rules {
    list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px;
    font-size: 14px; font-weight: 400; color: var(--cs-reg-muted);
}
@media (min-width: 768px) { .cs-reg-rules { flex-direction: row; flex-wrap: wrap; gap: 8px 22px; } }
.cs-reg-rules li { display: flex; align-items: center; gap: 8px; }
.cs-reg-rules li::before {
    content: ""; flex: 0 0 16px; width: 16px; height: 16px; border-radius: 40%; box-sizing: border-box;
    border: 1px solid #9aa3b2;
}
.cs-reg-rules li.is-met { color: var(--cs-reg-ink); }
.cs-reg-rules li.is-met::before {
    border-color: var(--cs-reg-blue); background: var(--cs-reg-blue)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat;
}

/* Disclosure links (promo code, change email). */
.cs-reg-disclosure, .cs-reg-linkbutton {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none;
    font-size: 16px; font-weight: 700; color: var(--cs-reg-link); cursor: pointer; text-align: left;
}
.cs-reg-disclosure:hover, .cs-reg-linkbutton:hover { color: #1f4a99; }
.cs-reg-linkbutton[disabled] { color: #4b5568; cursor: default; }
.cs-reg-promo { margin-top: 10px; }

/* Terms. */
.cs-reg-terms { display: flex; align-items: flex-start; gap: 14px; padding-top: 4px; }
.cs-reg-terms .form-check-input { flex: 0 0 auto; width: 22px; height: 22px; margin: 2px 0 0; }
.cs-reg-terms label { font-size: 16px; line-height: 1.55; color: var(--cs-reg-ink); }

/* Honeypot. */
.cs-reg-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* The theme's blue pill button, full width in the form. */
.cs-reg .cs-reg-submit { width: 100%; justify-content: center; font-size: 19px; min-height: 60px; }
@media (min-width: 768px) { .cs-reg .cs-reg-submit--narrow { width: auto; min-width: 320px; } }
.cs-reg-trust i { margin-top: 3px; }
@media (max-width: 992px) {
    .cs-reg-trust { text-align: left; justify-content: flex-start; margin: 0; }
}
.cs-reg-divider { height: 1px; background: var(--cs-reg-line); }
.cs-reg-alt { display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.cs-reg-alt p { margin: 0; }
@media (min-width: 768px) { .cs-reg-alt { flex-direction: row; justify-content: space-between; } }

/* ------------------------------------------------------------ aside cards */
.cs-reg-aside { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 992px) { .cs-reg-aside { gap: 28px; }
    .cs-reg-trust {
        margin: -8px 0 0; display: flex; align-items: flex-start; justify-content: center; gap: 8px;
        font-size: 14px; line-height: 1.5; text-align: center;
    }

}
.cs-reg-card { border: 1px solid var(--cs-reg-line); border-radius: 12px; padding: 24px; background: #fff; }
.cs-reg-card--soft { border-color: transparent; background: var(--cs-reg-soft); }
/* The theme's hand-drawn yellow underline under one word of the title
   (underline-3 style-2 yellow, as in the homepage hero). */
.cs-reg-title .underline-3 { display: inline-block; }
@media (min-width: 992px) { .cs-reg-card { padding: 32px 36px; } }
.cs-reg-card__title { margin: 0 0 10px; font-size: 26px; line-height: 1.2; font-weight: 700; color: var(--cs-reg-ink); }
.cs-reg-card__subtitle { margin: 0 0 8px; font-size: 19px; font-weight: 800; color: var(--cs-reg-ink); }
.cs-reg-card__text { margin: 0 0 16px; font-size: 16px; line-height: 1.6; color: var(--cs-reg-muted); }
.cs-reg-card__strong { margin: 0 0 6px; font-size: 17px; font-weight: 800; color: var(--cs-reg-ink); }
.cs-reg-card__rule { height: 1px; background: #d3dcec; margin: 24px 0 20px; }
@media (min-width: 992px) { .cs-reg-card__title { font-size: 30px; } }

.cs-reg-checks {
    list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px;
    font-size: 16px; line-height: 1.5; font-weight: 600; color: var(--cs-reg-ink);
}
.cs-reg-checks li { display: flex; gap: 12px; align-items: flex-start; }
.cs-reg-checks li::before {
    content: ""; flex: 0 0 26px; height: 26px; border-radius: 50%; margin-top: -1px;
    background: var(--cs-reg-soft-strong)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f63c4' stroke-width='3'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.cs-reg-iconlink { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; }
.cs-reg-iconlink .fa-whatsapp { font-size: 20px; }

/* ------------------------------------------------- profession picker (JS) */
/* registration.js replaces the native select with this; the select stays in
   the form, hidden, and carries the value. */
.cs-combo { position: relative; }
.cs-combo__button {
    width: 100%; height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    border: 1px solid var(--cs-reg-border); border-radius: 8px; padding: 0 16px; background: #fff;
    font-size: 16px; font-weight: 500; color: var(--cs-reg-ink); text-align: left; cursor: pointer;
}
.cs-combo__button.is-placeholder { color: #7a8496; }
.cs-combo__button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-combo__button:focus-visible, .cs-combo.is-open .cs-combo__button {
    border-color: var(--cs-reg-blue); box-shadow: 0 0 0 4px var(--cs-reg-soft-strong); outline: 0;
}
.cs-combo__panel {
    position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 8px);
    border: 1px solid var(--cs-reg-border); border-radius: 10px; background: #fff;
    box-shadow: 0 12px 32px rgba(30, 50, 90, 0.14); overflow: hidden;
}
.cs-combo__search { padding: 12px; border-bottom: 1px solid var(--cs-reg-line); position: relative; }
.cs-combo__search i { position: absolute; left: 26px; top: 50%; transform: translateY(-50%); color: var(--cs-reg-muted); }
.cs-combo__search input {
    width: 100%; height: 46px; border: 1px solid var(--cs-reg-border); border-radius: 8px; padding: 0 14px 0 40px;
    font-size: 16px; font-weight: 500; color: var(--cs-reg-ink); background: #f8fafd;
}
.cs-combo__search input:focus { border-color: var(--cs-reg-blue); background: #fff; outline: 0; }
.cs-combo__list { max-height: 320px; overflow-y: auto; padding: 4px 0 8px; margin: 0; list-style: none; }
.cs-combo__group {
    padding: 14px 18px 6px; font-size: 13px; font-weight: 800; letter-spacing: 0.6px;
    text-transform: uppercase; color: #4b5568;
}
.cs-combo__option { padding: 11px 18px; font-size: 16px; font-weight: 500; color: var(--cs-reg-ink); cursor: pointer; }
.cs-combo__option mark { padding: 0; background: none; font-weight: 800; color: var(--cs-reg-link); }
.cs-combo__option.is-active { background: var(--cs-reg-soft); }
.cs-combo__option[aria-selected="true"] { font-weight: 700; color: var(--cs-reg-link); }
.cs-combo__empty { padding: 14px 18px; font-size: 15px; color: var(--cs-reg-muted); }
.cs-combo__pinned { border-top: 1px solid var(--cs-reg-line); }
.cs-combo__pinned .cs-combo__option { font-weight: 700; color: var(--cs-reg-link); }

/* ------------------------------------------------------------ code boxes */
.cs-code { display: flex; gap: 8px; justify-content: space-between; max-width: 480px; }
@media (min-width: 768px) { .cs-code { gap: 12px; justify-content: flex-start; } }
.cs-code__box {
    width: 48px; height: 60px; flex: 0 0 auto; border: 1px solid var(--cs-reg-border); border-radius: 10px;
    text-align: center; font-size: 26px; font-weight: 800; color: var(--cs-reg-ink); background: #fff;
    text-transform: uppercase; padding: 0;
}
@media (min-width: 768px) { .cs-code__box { width: 64px; height: 72px; font-size: 30px; } }
.cs-code__box:focus { border: 2px solid var(--cs-reg-blue); box-shadow: 0 0 0 4px var(--cs-reg-soft-strong); outline: 0; }
.cs-code.is-invalid .cs-code__box { border-color: var(--cs-reg-error); }
.cs-reg-code-form { display: flex; flex-direction: column; gap: 24px; }

.cs-reg-faq { display: flex; flex-direction: column; gap: 18px; font-size: 16px; line-height: 1.6; }
.cs-reg-faq p { margin: 0; }
.cs-reg-faq strong { color: var(--cs-reg-ink); }
.cs-reg-inline-form { margin: 0; }
.cs-reg-change-email { margin-top: 12px; }
.cs-reg-inline { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 768px) { .cs-reg-inline { flex-direction: row; } .cs-reg-inline .btn { flex: 0 0 auto; } }

/* --------------------------------------------------------- welcome page */
.cs-reg-section-title { margin: 0 0 8px; font-size: 26px; line-height: 1.25; font-weight: 700; color: var(--cs-reg-ink); }
.cs-reg-section-lead { margin: 0 0 24px; font-size: 16px; line-height: 1.6; }
@media (min-width: 768px) {
    .cs-reg-section-title { font-size: 30px; }
    .cs-reg-section-lead { font-size: 18px; margin-bottom: 32px; }
}
.cs-reg-tasks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 28px; }
@media (min-width: 992px) { .cs-reg-tasks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-bottom: 40px; } }
.cs-reg .cs-reg-task {
    display: flex; gap: 16px; align-items: flex-start; padding: 20px; border: 1px solid var(--cs-reg-line);
    border-radius: 12px; background: #fff; box-shadow: 0 4px 18px rgba(30, 50, 90, 0.05); font-weight: 500;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cs-reg .cs-reg-task:hover { border-color: #c5d3ee; box-shadow: 0 8px 24px rgba(30, 50, 90, 0.1); }
@media (min-width: 992px) { .cs-reg .cs-reg-task { flex-direction: column; gap: 14px; padding: 32px; } }
.cs-reg-task__icon {
    flex: 0 0 48px; width: 48px; height: 48px; border-radius: 12px; background: var(--cs-reg-soft);
    display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--cs-reg-blue);
}
.cs-reg-task__body { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.cs-reg-task__title { font-size: 18px; font-weight: 800; color: var(--cs-reg-ink); }
.cs-reg-task__text { font-size: 15px; line-height: 1.55; color: var(--cs-reg-muted); }
.cs-reg-task__link { margin-top: 6px; display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; color: var(--cs-reg-link); }
@media (min-width: 992px) {
    .cs-reg-task__title { font-size: 21px; }
    .cs-reg-task__text { font-size: 16px; }
}
.cs-reg-next { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }
@media (min-width: 768px) { .cs-reg-next { flex-direction: row; align-items: center; gap: 28px; margin-bottom: 64px; } }
.cs-reg-offers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 992px) { .cs-reg-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } }

/* ------------------------------------------------ welcome: minimal navbar */
/* The navbar height normally comes from the nav-link padding inside the
   offcanvas-body. On the welcome page the menu is hidden; give the nav the
   same explicit height so the logo stays vertically centred at the right
   position (71px mobile, 88px desktop — same numbers used in cs-reg-hero). */
.navbar.navbar-minimal { min-height: 71px; display: flex; align-items: center; }
@media (min-width: 992px) { .navbar.navbar-minimal { min-height: 88px; } }