.course-registration-page {
      position: relative;
      margin: 0 -15px;
      padding: 20px 15px 42px;
      color: #243f54;
    }

    .course-registration-page:before {
      content: "";
      position: absolute;
      z-index: -1;
      top: 0;
      right: -100vw;
      bottom: 0;
      left: -100vw;
      background:
        radial-gradient(circle at 8% 10%, rgba(255, 151, 40, .16), transparent 31%),
        linear-gradient(135deg, #fffaf5 0%, #f5f9fc 56%, #eef5f9 100%);
      border-top: 1px solid #edf1f4;
    }

    .registration-intro {
      max-width: 760px;
      margin: 0 auto 28px;
      text-align: center;
    }

    .registration-eyebrow {
      display: inline-block;
      margin-bottom: 9px;
      color: #d76b0d;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 1.7px;
      text-transform: uppercase;
    }

    .registration-intro h1 {
      margin: 0 0 10px;
      color: #193d55;
      font-family: 'Ubuntu', sans-serif;
      font-size: 36px;
      font-weight: 500;
      line-height: 1.2;
    }

    .registration-intro p {
      margin: 0;
      color: #687d8c;
      font-size: 17px;
      line-height: 1.6;
      text-align: center;
    }

    .registration-progress {
      max-width: 900px;
      margin: 0 auto 24px;
    }

    .registration-progress-track {
      display: table;
      width: 100%;
      table-layout: fixed;
    }

    .registration-progress-step {
      position: relative;
      display: table-cell;
      color: #93a0aa;
      font-size: 12px;
      font-weight: 700;
      text-align: center;
    }

    .registration-progress-step:before {
      content: "";
      position: absolute;
      top: 14px;
      right: 50%;
      left: -50%;
      height: 2px;
      background: #dce4e9;
    }

    .registration-progress-step:first-child:before {
      display: none;
    }

    .registration-progress-number {
      position: relative;
      z-index: 1;
      display: block;
      width: 30px;
      height: 30px;
      margin: 0 auto 7px;
      border: 2px solid #dce4e9;
      border-radius: 50%;
      background: #fff;
      line-height: 26px;
    }

    .registration-progress-step.active {
      color: #193d55;
    }

    .registration-progress-step.active .registration-progress-number {
      border-color: #ff9728;
      background: #ff9728;
      color: #fff;
      box-shadow: 0 4px 12px rgba(255, 151, 40, .28);
    }

    .registration-layout {
      max-width: 1120px;
      margin: 0 auto;
    }

    .registration-layout:before,
    .registration-layout:after {
      display: table;
      content: " ";
    }

    .registration-layout:after {
      clear: both;
    }

    .course-selection-card,
    .registration-support-card {
      border: 1px solid #dce5eb;
      border-radius: 14px;
      background: #fff;
      box-shadow: 0 12px 32px rgba(25, 61, 85, .09);
    }

    .course-selection-card {
      padding: 24px 28px 25px;
    }

    .course-selection-card-header {
      position: relative;
      margin-bottom: 19px;
      padding: 0 115px 16px 0;
      border-bottom: 1px solid #e6edf1;
    }

    .course-selection-card-header h1 {
      margin: 2px 0 5px;
      color: #193d55;
      font-family: 'Ubuntu', sans-serif;
      font-size: 27px;
      font-weight: 500;
    }

    .course-selection-card-header p {
      margin: 0;
      color: #738693;
      font-size: 14px;
    }

    .registration-step-badge {
      position: absolute;
      top: 2px;
      right: 0;
      padding: 7px 10px;
      border: 1px solid #ffd2a7;
      border-radius: 20px;
      background: #fff8f0;
      color: #c9630a;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .5px;
      text-transform: uppercase;
    }

    .course-fields-row {
      margin-right: -7px;
      margin-left: -7px;
    }

    .course-fields-primary {
      margin-bottom: 0;
      padding-bottom: 12px;
    }

    .course-fields-primary #courses {
      clear: both;
      padding-top: 11px;
    }

    .course-fields-row:before,
    .course-fields-row:after {
      display: table;
      content: " ";
    }

    .course-fields-row:after {
      clear: both;
    }

    .course-field-column {
      padding-right: 7px;
      padding-left: 7px;
    }

    .course-field {
      margin-bottom: 15px;
    }

    .course-field-heading {
      display: table;
      width: 100%;
      margin-bottom: 9px;
    }

    .course-field-number,
    .course-field-label {
      display: table-cell;
      vertical-align: middle;
    }

    .course-field-number {
      width: 36px;
    }

    .course-field-number span {
      display: inline-block;
      width: 27px;
      height: 27px;
      border-radius: 50%;
      background: #fff0df;
      color: #d76b0d;
      font-size: 13px;
      font-weight: 800;
      line-height: 27px;
      text-align: center;
    }

    .course-field-label label {
      margin: 0;
      color: #294b61;
      font-size: 15px;
      font-weight: 700;
    }

    .course-help-link {
      float: right;
      margin-top: 2px;
      color: #1686c4;
      font-size: 13px;
      font-weight: 600;
    }

    .course-selection-card .bootstrap-select,
    .course-selection-card .form-control {
      width: 100% !important;
    }

    .course-selection-card .bootstrap-select > .btn,
    .course-selection-card select.form-control {
      height: 50px;
      border: 1px solid #cbd9e2;
      border-radius: 7px;
      background: #fff;
      color: #324f63;
      font-size: 15px;
      box-shadow: none;
    }

    .course-selection-card .bootstrap-select > .btn:hover,
    .course-selection-card .bootstrap-select > .btn:focus,
    .course-selection-card select.form-control:focus {
      border-color: #ff9728;
      background: #fff;
      outline: none !important;
      box-shadow: 0 0 0 3px rgba(255, 151, 40, .12);
    }

    .course-selection-card .bootstrap-select.btn-group .dropdown-toggle .caret {
      right: 16px;
    }

    .course-selection-card .dropdown-menu {
      border-color: #d7e1e7;
      border-radius: 7px;
      box-shadow: 0 10px 26px rgba(25, 61, 85, .14);
    }

    .course-selection-card .dropdown-menu > li > a {
      padding-top: 8px;
      padding-bottom: 8px;
    }

    .registration-submit {
      width: 100%;
      min-height: 52px;
      margin-top: 1px;
      border: 0;
      border-radius: 7px;
      background: #ff8418;
      color: #fff;
      font-size: 17px;
      font-weight: 800;
      letter-spacing: .1px;
      box-shadow: 0 8px 18px rgba(255, 132, 24, .25);
      transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
    }

    .registration-submit:hover,
    .registration-submit:focus {
      background: #ec7310;
      color: #fff;
      outline: none;
      box-shadow: 0 10px 22px rgba(236, 115, 16, .3);
      transform: translateY(-1px);
    }

    .registration-submit .fa {
      margin-left: 8px;
    }

    .registration-secure-note {
      margin: 13px 0 0;
      color: #7d8d98;
      font-size: 12px;
      text-align: center;
    }

    .registration-secure-note .fa {
      margin-right: 5px;
      color: #42a76b;
    }

    .registration-support-card {
      overflow: hidden;
    }

    .registration-support-top {
      padding: 23px 23px 20px;
      border-left: 4px solid #ff9728;
    }

    .registration-support-icon {
      display: inline-block;
      width: 45px;
      height: 45px;
      margin-bottom: 11px;
      border-radius: 50%;
      background: #fff0df;
      color: #ed7913;
      font-size: 19px;
      line-height: 45px;
      text-align: center;
    }

    .registration-support-card h3 {
      margin: 0 0 7px;
      color: #193d55;
      font-family: 'Ubuntu', sans-serif;
      font-size: 21px;
      font-weight: 500;
    }

    .registration-support-card p {
      color: #718492;
      font-size: 14px;
      line-height: 1.55;
    }

    .registration-benefits {
      margin: 16px 0 0;
      padding: 0;
      list-style: none;
    }

    .registration-benefits li {
      position: relative;
      margin-top: 11px;
      padding-left: 26px;
      color: #3e596b;
      font-size: 13px;
      font-weight: 600;
    }

    .registration-benefits .fa {
      position: absolute;
      top: 1px;
      left: 0;
      color: #35a565;
    }

    .registration-help-row {
      padding: 16px 23px;
      border-top: 1px solid #e4ebef;
      background: #f8fafb;
    }

    .registration-help-row strong {
      display: block;
      margin-bottom: 3px;
      color: #294b61;
      font-size: 13px;
    }

    .registration-help-row a {
      color: #1686c4;
      font-size: 16px;
      font-weight: 700;
    }

    .registration-help-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 7px 14px;
    }

    .registration-help-actions .registration-chat-link {
      color: #d96c0c;
    }

    .registration-help-row .fa {
      margin-right: 7px;
      color: #ff8b22;
    }

    .course-registration-page .alert {
      border-radius: 7px;
    }

    @media (max-width: 991px) {
      .registration-support-card {
        margin-top: 20px;
      }
    }

    @media (max-width: 767px) {
      .course-registration-page {
        padding-top: 24px;
        padding-bottom: 35px;
      }

      .registration-intro {
        margin-bottom: 21px;
      }

      .registration-intro h1 {
        font-size: 29px;
      }

      .registration-intro p {
        font-size: 15px;
      }

      .registration-progress-step {
        font-size: 0;
      }

      .registration-progress-step.active {
        font-size: 11px;
      }

      .course-selection-card {
        padding: 24px 20px 25px;
        border-radius: 11px;
      }

      .course-selection-card-header {
        padding-right: 0;
      }

      .registration-step-badge {
        position: static;
        display: inline-block;
        margin-bottom: 8px;
      }

      .course-selection-card-header h1 {
        font-size: 22px;
      }

      .course-help-link {
        float: none;
        display: block;
        margin-top: 4px;
      }
    }
  
/* Account step: ETDE visual treatment with the existing UTS fields and rules. */
.course-registration-page, .account-registration-page { isolation: isolate; }
.account-registration-page { position: relative; margin: 0 -15px; padding: 20px 15px 40px; color: #294b61; }
.account-registration-page:before { content: ''; position: absolute; z-index: -1; inset: 0 -100vw; background: linear-gradient(135deg,#fffaf6,#f4f8fb 57%,#eef5f8); }
.account-register-layout { max-width: 1120px; margin: 0 auto; }
.account-form-card, .account-order-card { border: 1px solid #dce5eb; border-radius: 14px; background: #fff; box-shadow: 0 11px 30px rgba(25,61,85,.08); padding: 24px 28px; }
.account-form-header { position: relative; padding: 0 110px 18px 0; border-bottom: 1px solid #e5ecef; }
.account-form-header h1 { margin: 0 0 8px; color: #193d55; font: 500 27px/1.25 Ubuntu,sans-serif; }
.account-form-header p { margin: 0; color: #718492; font-size: 14px; line-height: 1.6; }
.account-form-card .step > [class*='col-'] { margin-bottom: 16px; }
.account-form-card label { margin-bottom: 7px; color: #345469; font-size: 13px; }
.account-form-card .form-control, .account-form-card .bootstrap-select > .btn { min-height: 48px; border: 1px solid #cfdae2; border-radius: 7px; background: #fff; font-size: 16px; box-shadow: 0 2px 5px rgba(25,61,85,.04); }
.account-form-card .bootstrap-select { width: 100% !important; }
.account-form-card .checkbox { position: relative; padding-left: 26px; }
.account-form-card .checkbox input { position: absolute; left: 0; margin-left: 0; }
.account-form-card .checkbox label { padding-left: 0; line-height: 1.6; }
.account-form-card #register-submit { width: 100%; min-height: 52px; border: 0; border-radius: 8px; background: #ff9728; color: #fff; font-size: 17px; font-weight: 700; }
.account-form-card #register-submit:hover { background: #e98317; }
.account-form-card hr { border-color: #e5ecef; margin: 18px 0; }
.account-section-title, .account-order-card h2 { color: #23465d; font: 500 20px/1.3 Ubuntu,sans-serif; margin: 0 0 18px; }
.account-order-card { border-top: 4px solid #ff9728; padding: 22px; }
.account-order-card .table td { padding: 12px 5px; border-color: #e5ecef; color: #345469; font-size: 13px; }
.account-order-card .money { text-align: right; white-space: nowrap; }
.account-change-course { display: inline-block; margin-top: 12px; color: #b85e0e; font-weight: 700; }
.account-summary-column .registration-support-card { margin-top: 18px; }
.account-registration-page > .row { max-width: 1120px; margin: 0 auto 18px; }
.account-registration-page .cf-turnstile { overflow-x: auto; }
.course-registration-page input:focus-visible, .course-registration-page button:focus-visible, .course-registration-page a:focus-visible,
.account-registration-page input:focus-visible, .account-registration-page button:focus-visible, .account-registration-page a:focus-visible { outline: 3px solid #117fd4; outline-offset: 2px; }
@media(max-width:991px) { .account-summary-column { margin-top: 20px; } }
@media(max-width:520px) { .account-form-card { padding: 20px 16px; } .account-form-header { padding-right: 0; } .account-form-header .registration-step-badge { position: static; margin-bottom: 10px; } .account-form-header h1 { font-size: 24px; } }

.account-course-eligibility { margin: 0 0 18px; padding: 14px; border-left: 3px solid #75adc5; border-radius: 5px; background: #f1f7fa; color: #345469; font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.account-course-eligibility h3 { margin: 0 0 8px; color: #23465d; font-size: 15px; font-weight: 700; }
.account-course-eligibility p { margin: 0 0 8px; font-size: inherit; line-height: inherit; }
.account-course-eligibility p:last-child { margin-bottom: 0; }

.account-password-control { display: flex; align-items: stretch; }
.account-password-control .form-control { min-width: 0; border-radius: 7px 0 0 7px; }
.account-password-toggle { flex-shrink: 0; padding: 0 12px; border: 1px solid #cfdae2; border-left: 0; border-radius: 0 7px 7px 0; background: #fff5e9; color: #a34f08; font-weight: 700; }
.account-password-toggle:focus-visible { outline: 3px solid #117fd4; outline-offset: 2px; }
.account-form-card small { color: #647b89; }
.account-form-card select[name="state"] { padding-left: 8px; padding-right: 4px; }

/* Compact enrollment layout with a distinct action area. */
.course-registration-page .course-selection-card { padding: 22px 24px; box-shadow: 0 4px 16px rgba(25,61,85,.05); }
.course-registration-page .course-selection-card-header { padding-bottom: 14px; margin-bottom: 18px; }
.course-registration-page .course-selection-card-header h1 { font-size: 25px; }
.course-registration-page .course-field { margin-bottom: 16px; }
.course-registration-page .course-field-heading { margin-bottom: 7px; }
.course-registration-page .course-field-label label { font-size: 14px; }
.course-registration-page .course-field-number { display: none; }
.course-registration-page .course-help-link { font-size: 12px; }
.course-registration-page .course-fields-primary { padding-bottom: 0; }
.course-registration-page .course-fields-primary #courses { padding-top: 0; }
.course-registration-page .bootstrap-select > .btn { min-height: 44px; padding: 10px 12px; font-size: 14px; }
.course-registration-page .registration-submit { margin-top: 14px; min-height: 44px; width: auto; min-width: 180px; padding: 10px 24px; font-size: 15px; box-shadow: none; font-weight: 700; }
.course-registration-page .registration-secure-note { text-align: left; margin-top: 10px; }
.course-registration-page .registration-support-top { padding: 20px; }
.course-registration-page .registration-support-top h3 { font-size: 19px; }
.course-registration-page .registration-support-icon { display: none; }
.course-registration-page .registration-benefits { margin-top: 12px; }
.course-registration-page .registration-benefits li { font-size: 13px; margin-bottom: 10px; }
.course-registration-page .registration-help-row { display: flex; flex-wrap: wrap; gap: 8px 14px; }
@media(max-width:767px) {
  .course-registration-page .course-selection-card { padding: 20px 16px; }
  .course-registration-page .registration-submit { width: 100%; }
  .course-registration-page .bootstrap-select > .btn { font-size: 16px; }
  .course-registration-page .course-field-label { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 5px; }
}

.course-registration-page .bootstrap-select.form-control { height: auto; min-height: 44px; }
.course-registration-page .bootstrap-select > .btn { height: 44px; }
.course-registration-page .course-selection-card-header .registration-step-badge { display: none; }
.course-registration-page .course-selection-card-header { padding-right: 0; }

/* California Mature Drivers Course Type Selector */
.mature-course-col {
  margin-bottom: 14px;
}

.mature-course-section {
  margin-top: 2px;
  margin-bottom: 2px;
}

.mature-course-label {
  display: block;
  margin-bottom: 8px;
  color: #345469;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.mature-course-label span {
  color: #d9534f;
  margin-left: 2px;
}

.mature-course-grid {
  display: flex;
  gap: 12px;
}

.mature-course-card {
  flex: 1;
  display: flex;
  align-items: flex-start;
  margin: 0;
  padding: 10px 14px;
  border: 1.5px solid #dce5eb;
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
  position: relative;
  user-select: none;
}

.mature-course-card:hover {
  border-color: #ff9728;
  background: #fffdfa;
}

.mature-course-card.is-selected,
.mature-course-card:has(input:checked) {
  border-color: #ff9728;
  background: #fffbf5;
  box-shadow: 0 0 0 1px #ff9728, 0 3px 10px rgba(255, 151, 40, .10);
}

.mature-course-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  margin: 0;
}

.mature-radio-circle {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 50%;
  border: 2px solid #cbd9e2;
  background: #fff;
  margin-top: 2px;
  margin-right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
  flex-shrink: 0;
}

.mature-course-card:hover .mature-radio-circle {
  border-color: #ff9728;
}

.mature-course-card.is-selected .mature-radio-circle,
.mature-course-card:has(input:checked) .mature-radio-circle {
  border-color: #ff9728;
  background: #ff9728;
  box-shadow: inset 0 0 0 3px #fff;
}

.mature-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.mature-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #193d55;
  line-height: 1.25;
  margin-bottom: 2px;
}

.mature-course-card.is-selected .mature-card-title,
.mature-course-card:has(input:checked) .mature-card-title {
  color: #0f2d42;
}

.mature-card-desc {
  font-size: 12px;
  color: #647b89;
  line-height: 1.35;
  font-weight: 400;
}

.mature-course-card.is-selected .mature-card-desc,
.mature-course-card:has(input:checked) .mature-card-desc {
  color: #4a6272;
}

@media (max-width: 640px) {
  .mature-course-grid {
    flex-direction: column;
    gap: 8px;
  }
  .mature-course-card {
    padding: 9px 12px;
  }
}

/* Category Intent Switcher & Quick Select for /register */
.category-intent-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.category-intent-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 24px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  text-decoration: none !important;
}

.category-intent-tab:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.category-intent-tab.is-active {
  background: #ff9728;
  border-color: #ff9728;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(255, 151, 40, 0.28);
}

.category-intent-tab .fa {
  font-size: 13px;
}

.quick-state-pills-wrap {
  margin-top: 8px;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.quick-state-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 6px;
}

.quick-state-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.quick-state-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 6px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.quick-state-pill:hover {
  border-color: #ff9728;
  color: #ea580c;
  background: #fffaf5;
}

.quick-state-pill.is-active {
  background: #ff9728;
  border-color: #ff9728;
  color: #ffffff;
}

.course-reassurance-badge {
  display: none;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 8px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
  font-size: 13px;
  line-height: 1.45;
}

.course-reassurance-badge.is-visible {
  display: flex;
}

.course-reassurance-badge .fa {
  font-size: 16px;
  color: #16a34a;
  margin-top: 2px;
  flex-shrink: 0;
}