/* ==========================================================================
   Registration Page 1 — right-hand info column + info boxes
   (promotion code / registration fees / biotech start-ups)
   ========================================================================== */

.container-content-inner-regform {
  position: relative;
}

.mb-0 {
  margin-bottom: 0 !important;
}

/* back-to-details nav on the company/assign step */
.reg-back-nav {
  margin-bottom: 18px;
}

/* ==========================================================================
   Registration wizard step indicator (sits on the dark conference banner)
   ========================================================================== */
.reg-steps {
  display: flex;
  list-style: none;
  margin: 10px auto 26px;
  padding: 0 15px;
  max-width: 640px;
  width: 100%;
}

.reg-step {
  flex: 1;
  text-align: center;
  position: relative;
  font-size: 12.5px;
  color: #c3d0dc;
}

.reg-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  color: #fff;
  font-weight: 700;
  margin-bottom: 7px;
  position: relative;
  z-index: 1;
}

.reg-step-label {
  display: block;
}

/* connector line to the left of each step (except the first) */
.reg-step:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 16px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, .22);
  z-index: 0;
}

.reg-step-active .reg-step-num {
  background: #fff;
  color: #2b6cb0;
}

.reg-step-active {
  color: #fff;
  font-weight: 700;
}

.reg-step-done .reg-step-num {
  background: #4a8f3c;
  color: #fff;
}

.reg-step-done {
  color: #e6eef6;
}

.reg-step-done::before,
.reg-step-active::before {
  background: #7fb2e6;
}

/* centered two-column wrapper (form + info); replaces the brittle bootstrap gutters */
.reg-two-col {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
}

.reg-two-col .reg-form-col {
  flex: 1 1 auto;
  min-width: 0;
}

.reg-two-col .reg-info-column {
  flex: 0 0 320px;
  max-width: 320px;
}

.reg-info-column {
  padding-top: 0;
}

/* card wrapper — same panel colour + shadow as the registration form section (.content-white) */
.reg-info-box {
  background-color: rgb(247, 247, 247, 0.96);
  border-radius: 5px;
  padding: 18px 20px;
  margin-bottom: 18px;
  box-shadow: 3px -1px 15px 0px rgb(0 0 0 / 15%);
}

/* small blue uppercase heading (Promotion code) with divider */
.reg-info-box-heading {
  color: #2f6fb0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding-bottom: 9px;
  margin-bottom: 12px;
  border-bottom: 1px solid #e5e8ec;
}

.reg-info-box-text {
  font-size: 13px;
  color: #5a6472;
  line-height: 1.5;
  margin: 0;
}

/* promotion code */
.reg-promo-input-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.reg-promo-input-row .form-control {
  flex: 1 1 auto;
  min-width: 0;
}

.reg-promo-input-row #promo_code_validate {
  max-width: none;
}

.reg-promo-input-row .btn {
  flex: 0 0 auto;
}

.reg-info-column .alert {
  margin-top: 10px;
  font-size: 12.5px;
}

/* registration fees — label (bold) with price below */
.reg-fee-item {
  margin-bottom: 14px;
}

.reg-fee-item + .reg-fee-item {
  border-top: 1px solid #d6deea;
  padding-top: 10px;
}

.reg-fee-item:last-child {
  margin-bottom: 0;
}

.reg-fee-label {
  font-weight: 700;
  color: #2b3a49;
  font-size: 13.5px;
  line-height: 1.4;
  margin-bottom: 2px;
}

.reg-fee-price {
  color: #5a6472;
  font-size: 13.5px;
}

/* early-bird campaign — amber accent matches the landing hero banner (.eb-promo) */
.reg-fee-eb-note {
  margin: 0 0 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  background: linear-gradient(160deg, #1265AB, #062137);
  padding: 10px 16px;
  border-radius: 4px 4px 0 0;
  color: #fff;
  font-size: 12px;
  margin-left: -17px;
  margin-right: -17px;
  margin-top: -11px;
  text-align: center;
}

.reg-fee-eb-note strong {
  color: #EEE600;
}

.reg-fee-eb-note .note-title {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
  justify-content: center;
  background-color: #EEE600;
  color: #000;
  border-radius: 4px;
}

.reg-fee-eb-note .note-title svg {
  width: 20px;
  filter: invert();
}

.reg-fee-eb-note .fa {
  margin-right: 4px;
}

/* struck standard fee + floored discounted fee, stacked */
.reg-fee-eb {
  gap: 6px;
  display: flex;
  align-items: center;
}

.reg-fee-was {
  font-size: 12px;
  font-weight: 600;
  text-decoration: line-through;
  color: #8a939e;
}

.reg-fee-now {
  font-weight: 800;
  color: #000;
  font-size: 14.5px;
  background: #eee600;
  padding: 2px 6px;
  border-radius: 4px;
}

/* ==========================================================================
   Registration step form — card layout (Jun redesign)
   ========================================================================== */
.reg-page-panel {
  background: #eef1f5;
  border-radius: 6px;
  max-width: 1060px;
  margin: 8px auto 30px;
  padding: 26px 30px 20px;
}

.reg-panel-flex {
  display: flex;
  gap: 18px
}

.reg-panel-left{
  width: 100%;
}

.reg-panel-right {
  width: 45%;
}

.reg-page-panel .list_results div {
  overflow: unset;
}

.reg-page-panel.reg-panel-narrow {
  max-width: 640px;
}

/* password-reset form (before submit): content sits directly on the panel, centered - no inner card */
.reset-form-wrap {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}

.reset-form-intro {
  color: #5a6472;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 18px;
}

.reset-form-action {
  text-align: center;
  margin-top: 18px;
}

.reset-form-action .btn {
  min-width: 170px;
}

.reg-partnering-title {
  text-align: center;
  letter-spacing: .02em;
  margin: 4px 0 22px;
  text-transform: uppercase;
  font-weight: bold;
}

/* step indicator recoloured for the light panel (dark-bg colours would sink into it) */
.reg-page-panel .reg-step {
  color: #9aa4ad;
}

.reg-page-panel .reg-step-num {
  background: #d7dde3;
  color: #fff;
}

.reg-page-panel .reg-step:not(:first-child)::before {
  background: #d7dde3;
}

.reg-page-panel .reg-step-active {
  color: #2f6fb0;
  font-weight: 700;
}

.reg-page-panel .reg-step-active .reg-step-num {
  background: #2f6fb0;
  color: #fff;
}

.reg-page-panel .reg-step-done {
  color: #5a6472;
}

.reg-page-panel .reg-step-done .reg-step-num {
  background: #2f6fb0;
  color: #fff;
}

.reg-page-panel .reg-step-active::before,
.reg-page-panel .reg-step-done::before {
  background: #9dc0e6;
}

.reg-card {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
  padding: 20px;
  margin: 0 0 18px;
}

.reg-card-heading {
  color: #2f6fb0;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding-bottom: 10px;
  border-bottom: 2px solid #e5eaf0;
  margin: 0 0 20px;
}

/* field spacing inside the cards: gap between label + input, and between rows */
.reg-card .bs-component {
  margin-bottom: 16px;
}

.reg-card .bs-component label {
  display: block;
  margin-bottom: 7px;
}

label[for="phone_country_code"], label[for="phone_area_code"], label[for="mobile_country_code"], label[for="mobile_area_code"] {
  white-space: nowrap;
}

.reg-card .error {
  margin-top: 6px !important;
}

.reg-card label.error {
    color: #a94442;
    background-color: #f2dede;
    padding: 10px;
    border-radius: 4px;
    font-weight: normal;
    line-height: normal;
}

/* "send me my log-in details" button under the email field */
#div_send_login {
  margin: 10px 0;
}

/* email already registered: warning + button rendered as one blue box */
.reg-card .email-exists label#email-error.error {
  color: #2f6fb0;
  background: #2f6fb01c;
  border: 1px solid #2f6fb0 !important;
  border-bottom: 0 !important;
  border-radius: 4px 4px 0 0;
  margin-bottom: 0;
}

.reg-card .email-exists #div_send_login {
  background: #2f6fb01c;
  border: 1px solid #2f6fb0;
  border-top: 0;
  border-radius: 0 0 4px 4px;
  padding: 0 10px 10px;
  margin: 0;
}

.reg-card .email-exists #btn_send_login {
  font-weight: 600;
}

.reg-card .email-exists #btn_send_login .fa {
  margin-right: 4px;
}

.reg-card .checkbox-container {
  margin-bottom: 10px;
}

/* biotech start-ups dark info box */
.reg-startup-box {
  background: #3a3f45;
  color: #e8eaed;
  border-radius: 6px;
  padding: 16px 20px;
  margin: 0 0 20px;
}

.reg-startup-title {
  font-weight: 700;
  margin-bottom: 6px;
}

.reg-startup-box p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
}

/* fees + promo two-column row inside the fees card */
.reg-fees-row {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

.reg-fees-col {
  width: 100%;
}

.reg-fee-list {
  background: #f5f7fa;
  border-radius: 4px;
  padding: 10px 16px;
  border: 1px solid #d6deea;
}

.reg-fee-list + .reg-fee-list {
  margin-top: 16px;
}

.reg-fee-list .reg-fee-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.reg-fee-list .reg-fee-item:last-child {
  margin-bottom: 0;
}

.reg-fee-list .reg-fee-label {
  color: #2f6fb0;
  font-weight: 700;
  font-size: 14px;
  margin: 0;
}

.reg-fee-list .reg-fee-price {
  color: #2b3a49;
  font-weight: 700;
  font-size: 14px;
}

.reg-fee-list.free {
  background: #16a085;
}

.reg-fee-list.free .reg-fee-label {
  color: #fff;
}

.reg-fee-list.free .reg-fee-price {
  color: #16a085;
  background-color: #fff;
  padding: 0px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

.reg-promo-hint {
  font-size: 12.5px;
  opacity: 0.7;
  margin: 8px 0;
  line-height: normal;
}

/* intro paragraph inside the panel (activate flow) */
.reg-intro-text {
  font-size: 14px;
  line-height: 1.6;
  margin: 4px 0 18px;
}

/* participant summary box (review company details) */
.reg-review-summary {
  background: #fff;
  border-radius: 6px;
  padding: 16px 20px;
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.6;
}

.reg-review-summary div {
  background: #F5F5F5 ;
  border-radius: 6px;
  padding: 16px;
}

.reg-review-summary i {
  width: 20px;
  text-align: center;
  margin-right: 10px;
}

/* terms/back + next bottom bar */
.reg-submit-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

.reg-submit-bar .reg-terms,
.reg-submit-bar .reg-back {
  flex: 1 1 auto;
}

.reg-submit-bar .reg-next {
  flex: 0 0 auto;
}

/* ==========================================================================
   Page 2 — assign company (result cards)
   ========================================================================== */
.assign-section-title {
  font-size: 14px;
  font-weight: 700;
  color: #2b3a49;
  margin: 24px 0 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.assign-section-title:first-child {
  margin-top: 0;
}

.assign-company-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  background: #fff;
  border: 1px solid #e2e7ec;
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 14px;
}

.assign-company-card.is-recommended {
  border-color: #bcd8b7;
  background: #f6faf5;
}
/* recommended badge pinned to the card's top-right corner (matches mockup) */
.assign-company-card{ position:relative; }
.assign-badge-corner{ position:absolute; top:14px; right:18px; }

.assign-company-main {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.assign-company-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.assign-company-name {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #2b3a49;
}

.assign-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.assign-badge-reco {
  background: #4a8f3c;
  color: #fff;
}

.assign-badge-src {
  background: #eef2f6;
  color: #5a6472;
}

.assign-company-addr {
  font-size: 13px;
  color: #5a6472;
  line-height: 1.5;
}

.assign-company-parts {
  margin-top: 8px;
  font-size: 12.5px;
  color: #3a6b30;
}

.assign-company-parts .fa {
  margin-right: 5px;
}

.assign-company-action {
  flex: 0 0 auto;
  align-self: flex-end;
}

/* activate flow (2a) — participant detail list */
.activate-details {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.activate-details li {
  font-size: 13px;
  color: #5a6472;
  padding: 2px 0;
}

.activate-details li .fa {
  width: 16px;
  margin-right: 6px;
  color: #8a939e;
}

/* Page 3 — upgrade options */
.upgrade-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.upgrade-price {
  font-size: 20px;
  font-weight: 700;
  color: #2b3a49;
  white-space: nowrap;
  line-height: 1;
}

.upgrade-price small {
  font-size: 11px;
  font-weight: 600;
  color: #8a939e;
}

.upgrade-price.upgrade-free {
  color: #4a8f3c;
}

/* early-bird campaign — struck standard price above the floored discounted price.
   Same theme as the page-1 fees box (.reg-fee-eb-note): yellow badge + "save X% until DATE" */
.upgrade-eb-note {
  margin: 8px 0 4px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #2b3a49;
  text-align: center;
}

.upgrade-eb-note .fa {
  margin-right: 4px;
}

.upgrade-eb-badge {
  display: inline-block;
  background: #EEE600;
  color: #000;
  border-radius: 4px;
  padding: 2px 8px;
  margin-right: 6px;
}

.upgrade-eb-note strong {
  color: #b5670a;
}

/* on the dark premium card: white text, yellow highlights (like the page-1 header) */
.sub-card-premium .upgrade-eb-note {
  color: #fff;
}

.sub-card-premium .upgrade-eb-note strong {
  color: #EEE600;
}

.upgrade-price-eb {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  white-space: nowrap;
}

.upgrade-price-eb .upgrade-was {
  font-size: 13px;
  font-weight: 600;
  text-decoration: line-through;
  color: #8a939e;
}

.upgrade-price-eb .upgrade-now {
  font-size: 20px;
  font-weight: 800;
  color: #b5670a;
  line-height: 1;
}

/* logged-in plan change: link to the full /payment/subscription comparison */
.upgrade-details-link-wrap {
  margin-top: 8px;
}

.upgrade-details-link {
  font-size: 12.5px;
  font-weight: 600;
  color: #2f6fb0;
}

.upgrade-details-link:hover,
.upgrade-details-link:focus {
  text-decoration: underline;
}

.upgrade-support {
  background: none;
  border: none;
  padding: 0;
  margin-top: 40px;
  text-align: center;
  color: #8a939c;
  font-size: 13px;
}

.upgrade-support a {
  font-weight: 700;
}

.upgrade-promo {
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex-wrap: wrap;
  margin-top: 6px;
}

.upgrade-promo .form-control {
  flex: 1 1 200px;
  min-width: 0;
}

.upgrade-promo .btn {
  flex: 0 0 auto;
}

.upgrade-cancel {
  margin-top: 16px;
  text-align: center;
}

/* Step 3 — subscription option cards (Jun redesign) */
.sub-cards-row {
  display: flex;
  gap: 22px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 30px 0 30px;
}

.sub-card {
  flex: 0 1 340px;
  max-width: 360px;
  background: #fff;
  border: 1px solid #e2e7ec;
  border-radius: 10px;
  padding: 26px 24px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.sub-card-basic {
  background: linear-gradient(160deg, #ffffff, #dddddd);
}

.sub-card-premium {
  background: linear-gradient(160deg, #1265AB, #062137);
  border-color: transparent;
  color: #fff;
}

.sub-card-title {
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #2b3a49;
}

.sub-card-premium .sub-card-title {
  color: #fff;
}

.sub-card-badge {
  display: inline-block;
  background: #5fa617;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 4px 12px;
  border-radius: 12px;
  margin-bottom: 16px;
}

.sub-card-badge-transparent {
  opacity: 0;
  visibility: hidden;
  margin-bottom: 16px;
}

.sub-card-price {
  font-size: 28px;
  font-weight: 700;
  color: #2b3a49;
  margin: 6px 0 16px;
}

.sub-card-price-free {
  font-size: 26px;
}

.sub-card-price-premium, .sub-card-premium .sub-card-desc strong {
  color: #EEE600;
}

/* early-bird was/now inside a subscription card */
.sub-price-was {
  display: block;
  font-size: 15px;
  font-weight: 600;
  text-decoration: line-through;
  opacity: .6;
}

.sub-price-now {
  display: block;
}

.sub-card-desc {
  font-size: 14px;
  color: #5a6472;
  line-height: 1.6;
  flex: 1 1 auto;
}

.sub-card-premium .sub-card-desc {
  color: #dbe6f2;
}

.sub-card-desc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sub-card-desc li {
  padding: 3px 0;
}

.sub-card-desc li:before {
  content: "\00b7";
  font-weight: 700;
  margin-right: 6px;
}

.sub-card-action {
  margin-top: 22px;
}

.btn-white {
  background: #fff;
  color: #1b4a80;
  border: 1px solid #fff;
  font-weight: 600;
}

.btn-white:hover,
.btn-white:focus {
  background: #eef3f9;
  color: #1b4a80;
}

/* "Promo code applied" card: same theme as the premium card (dark gradient, green badge, yellow price) */
.promo-applied-card {
  max-width: 640px;
  margin: 4px auto 22px;
  padding: 26px 24px 28px;
  background: linear-gradient(160deg, #1265AB, #062137);
  border-radius: 10px;
  color: #fff;
  text-align: center;
}

.promo-applied-card .sub-card-title {
  color: #fff;
}

.promo-applied-card .sub-card-badge {
  margin-bottom: 12px;
  text-transform: none;
  font-size: 12px;
}

.promo-applied-card .sub-card-price {
  margin: 4px 0 12px;
}

.promo-applied-card .sub-card-desc {
  color: #dbe6f2;
  line-height: 1.5;
}

.promo-applied-card .sub-card-desc strong {
  color: #EEE600;
}

.promo-applied-card .sub-card-action {
  margin-top: 16px;
}

/* promo block (centered under the cards) */
.upgrade-promo-block {
  text-align: center;
  margin: 6px 0 22px;
}

.upgrade-promo-block .upgrade-promo {
  display: inline-flex;
  justify-content: center;
  margin-top: 0;
}

.upgrade-promo-block .form-control {
  flex: 0 0 auto;
  width: 260px;
  max-width: 60vw;
}

.upgrade-promo-block .upgrade-promo-msg {
  margin-top: 8px;
}

/* opt-out / login / registration banner — conference name (matches Jun's mockup) */
.reg-banner {
  text-align: center;
  padding: 20px;
}

.reg-banner-name {
  color: #fff !important;
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.2;
  margin: 0;
  margin-top: 0 !important;
}

/* opt-out / login banner — short divider under the conference name */
.reg-banner-divider {
  width: 70px;
  height: 2px;
  background: rgba(255, 255, 255, .6);
  margin: 14px auto;
}

/* opt-out page — banner location/date line */
.reg-banner-meta {
  color: #ffffff;
  font-size: 18px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
}

.reg-banner-meta>span {
  display: inline-block;
  margin: 2px 10px;
}

.reg-banner-meta .fa {
  margin-right: 6px;
}

/* opt-out page — Manage registration */
.optout-title {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 10px;
}

.optout-intro {
  text-align: center;
  font-size: 14px;
  margin: 0 0 22px;
}

.optout-form {
  max-width: 500px;
  margin: auto;
}

/* serious warning: solid red background (shown only when an unregister option is selected) */
.optout-alert-serious {
  max-width: 500px;
  margin: 0 auto 18px;
  background: #c0392b;
  border-color: #a93226;
  color: #fff;
}
.optout-alert-serious strong { color: #fff; }

/* "you are not registered" panel: give the register-again line room to breathe */
.optout-register-again-text {
  margin: 22px 0;
}

.optout-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid #e2e7ec;
  border-radius: 10px;
  margin-bottom: 14px;
  cursor: pointer;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.optout-option:hover {
  border-color: #c3d4e6;
}

.optout-option.is-selected {
  border-color: #2f6fb0;
  box-shadow: 0 0 0 1px #2f6fb0 inset;
}

.optout-option-icon {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.optout-option-icon img {
  width: 44px;
  height: 44px;
  display: block;
}

.optout-option-body {
  flex: 1 1 auto;
  min-width: 0;
}

.optout-option-title {
  display: block;
  font-weight: 700;
  color: #2b3a49;
  font-size: 15px;
}

.optout-option-sub {
  display: block;
  color: #8a939c;
  font-size: 12.5px;
  line-height: 1.4;
  margin-top: 2px;
}

.optout-option input[type=radio] {
  flex: 0 0 auto;
  margin: 0;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.optout-actions {
  text-align: center;
  margin-top: 22px;
}

.optout-actions .btn {
  margin: 0 4px;
}

/* opt-out page — OTP 6-box entry */
.optout-otp-wrap {
  text-align: center;
}

.optout-otp-sub {
  font-size: 14px;
  margin: 0 auto 8px;
}

.optout-otp-boxes {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 22px 0;
}

.optout-otp-boxes input {
  width: 46px;
  height: 56px;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: #2b3a49;
  border: 1px solid #cfd6dd;
  border-radius: 8px;
}

.optout-otp-boxes input:focus {
  border-color: #2f6fb0;
  outline: none;
  box-shadow: 0 0 0 2px rgba(47, 111, 176, .15);
}

.optout-resend {
  text-align: center;
  margin-top: 12px;
  color: #8a939c;
  font-size: 13px;
}

.optout-resend .btn-link {
  padding: 0;
  font-size: 13px;
  vertical-align: baseline;
}

/* opt-out page — confirmation modal (matches the card design aesthetic) */
.optout-modal .modal-dialog {
  width: auto;
  max-width: 420px;
  margin: 12vh auto 0;
}

.optout-modal .modal-content {
  position: relative;
  border: none;
  border-radius: 14px;
  box-shadow: 0 12px 44px rgba(0, 0, 0, .25);
  color: #333;
}

.optout-modal .modal-body {
  text-align: center;
  padding: 32px 28px 26px;
}

.optout-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 22px;
  opacity: .5;
  z-index: 10;
}

.optout-modal-close:hover {
  opacity: .9;
}

.optout-modal-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #fdecea;
  color: #d9534f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.optout-modal-title {
  font-size: 19px;
  font-weight: 700;
  color: #2b3a49;
  margin: 0 0 10px;
}

.optout-modal-text {
  font-size: 14px;
  color: #5a6472;
  line-height: 1.5;
  margin: 0 0 4px;
}

.optout-modal-warn {
  font-size: 14px;
  font-weight: 700;
  color: #c0392b;
  margin: 0 0 22px;
}

.optout-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.optout-modal-actions .btn {
  min-width: 118px;
}

/* login — password reset "email sent" confirmation (matches the opt-out card aesthetic) */
.reset-sent {
  text-align: center;
  padding: 10px 4px 4px;
}

.reset-sent-icon {
  margin: 6px auto 18px;
}

.reset-sent-icon img {
  width: 86px;
  height: 86px;
}

.reset-sent-title {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 16px;
  font-weight: 700;
  color: #4a5560;
  margin: 0 0 18px;
}

.reset-sent-email {
  display: inline-block;
  border: 1px solid #cfe0f2;
  background: #f5f9fd;
  color: #2b3a49;
  font-weight: 700;
  border-radius: 8px;
  padding: 8px 18px;
  margin: 0 auto 20px;
}

.reset-sent-text {
  font-size: 14px;
  color: #5a6472;
  line-height: 1.5;
  margin: 0 auto 18px;
  max-width: 520px;
}

.reset-sent-sub {
  font-size: 13px;
  color: #8a939c;
  line-height: 1.5;
  margin: 60px auto 20px auto;
  max-width: 520px;
}

.reset-sent-actions {
  text-align: center;
}

.reset-sent-actions .btn {
  min-width: 140px;
}

/* confirmation (step 4) — highlighted email account box */
.reg-confirm-email-box {
  display: inline-block;
  background: #fff;
  border: 1px solid #cfe0f2;
  border-radius: 8px;
  padding: 10px 24px;
  margin: 30px 0;
  color: #2b3a49;
  line-height: 1.5;
}

.reg-confirm-email {
  color: #2f6fb0;
  font-weight: 600;
}


/* ==========================================================================
   Page 4 — registration success panel
   ========================================================================== */
.reg-success-panel {
  text-align: center;
  padding: 16px 12px 8px;
}

/* free partner/cluster upgrade notice - clean, professional (no icon) */
.reg-success-upgrade {
  max-width: 560px;
  margin: 4px auto 22px;
  padding: 16px 22px;
  background: #eef4fb;
  border: 1px solid #d3e2f2;
  border-radius: 8px;
  text-align: center;
}
.reg-upgrade-heading {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #2f6fb0;
  margin-bottom: 5px;
}
.reg-upgrade-text {
  font-size: 14px;
  line-height: 1.5;
  color: #2b3a49;
}

/* auto-upgrade (step 3 info-only) benefits list + continue button */
.upgrade-auto-benefits {
  max-width: 560px;
  margin: 0 auto 18px;
  text-align: center;
}
.upgrade-auto-benefits ul {
  display: inline-block;
  text-align: left;
  margin: 0;
  color: #2b3a49;
}
.upgrade-auto-continue {
  text-align: right;
  margin-bottom: 8px;
}

/* auto-upgrade: plan cards shown for awareness only -> hide the select buttons */
.sub-cards-readonly .sub-card-action { display: none; }

.reg-success-icon {
  font-size: 60px;
  line-height: 1;
  color: #4a8f3c;
  margin-bottom: 12px;
}

.reg-success-title {
  font-size: 23px;
  font-weight: 700;
  color: #2b3a49;
  margin: 0 0 8px;
}

.reg-success-sub {
  font-size: 15px;
  color: #5a6472;
  line-height: normal;
}

.reg-success-note {
  display: inline-block;
  text-align: left;
  background: #f5f9fd;
  border: 1px solid #cfe0f2;
  border-radius: 8px;
  padding: 12px 18px;
  margin: 0 auto 24px;
  font-size: 13.5px;
  color: #3a5673;
  line-height: 1.5;
}

.reg-success-note .fa {
  margin-right: 6px;
  color: #2f6fb0;
}

.reg-success-actions {
  margin-top: 4px;
}

.reg-success-actions .btn {
  margin-top: 0;
}

/* status variants for the panel icon (confirmation page) */
.reg-success-icon-success {
  color: #4a8f3c;
}

.reg-success-icon-info {
  color: #2f6fb0;
}

.reg-success-icon-error {
  color: #c0392b;
}

/* awaiting-activation extras */
.reg-success-alert {
  text-align: left;
  max-width: 520px;
  margin: 0 auto 18px;
}

.reg-success-resend {
  font-size: 13px;
  color: #5a6472;
  margin-top: 60px;
}

/* footer links (conference website / registration / login) */
.reg-success-links {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #e5e8ec;
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: center;
  font-size: 14px;
}

/* stack below the form on tablet / mobile */
@media (max-width:991px) {
  .reg-two-col {
    flex-direction: column;
  }

  .reg-two-col .reg-info-column {
    flex-basis: auto;
    max-width: none;
    width: 100%;
  }

  .reg-info-column {
    margin-top: 22px;
    padding-top: 0;
  }

  .reg-panel-flex {
    flex-direction: column;
    gap: 0;
  }

  .reg-panel-right {
    width: 100%;
  }
}

@media (max-width:700px) {
  .reg-page-panel {
    padding: 18px 14px;
  }

  .reg-card {
    padding: 18px 16px;
  }

  .reg-fees-row {
    flex-direction: column;
    gap: 18px;
  }

  .reg-submit-bar {
    justify-content: flex-start;
  }
}

@media (max-width:600px) {
  .reg-step {
    font-size: 11px;
  }

  .reg-step-num {
    width: 26px;
    height: 26px;
  }

  .reg-banner-name {
    font-size: 21px;
  }

  .assign-company-card {
    flex-direction: column;
  }
  
  .assign-company-action {
    align-self: stretch;
  }
  
  .assign-company-action .btn {
    width: 100%;
  }
}