/* =============================================================
   RGB SKYLINE — WEB TRIAL REGISTRATION PAGE
   ============================================================= */

.rgb-trial{ position: relative; overflow: hidden; }

.rgb-trial-glow{
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, var(--glow-soft), transparent 70%);
  pointer-events: none;
}
.rgb-trial > .container{ position: relative; z-index: 1; }

/* ---- pitch column ---- */
.rgb-trial-pitch .rgb-section-title{ margin-bottom: .7rem; text-align: start; }
.rgb-trial-pitch .rgb-section-desc{ margin-bottom: 1.6rem; max-width: 42ch; }
.rgb-trial-pitch .rgb-check-list{ margin-top: 0; }

/* ---- form card ---- */
.rgb-trial-form-title{
  font-size: 1.1rem; font-weight: 800;
  margin-bottom: 1.3rem;
}

.rgb-req{
  color: var(--b-500);
  margin-inline-start: .25rem;
  font-weight: 700;
}

/* ---- dial code + phone ---- */
.rgb-dial-group{ display: flex; align-items: stretch; gap: .5rem; }
.rgb-dial-group .rgb-phone-input{ flex: 1 1 auto; min-width: 0; }
.rgb-dial-code{
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 4.25rem; padding: 0 .7rem;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-2); font-weight: 700; font-size: .92rem;
  font-variant-numeric: tabular-nums;
}

/* ---- searchable country picker ---- */
.rgb-cpick{ position: relative; }

/* Native <select> kept for validation and the payload, visually hidden. */
.rgb-cpick-native{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.rgb-cpick-btn{
  display: flex; align-items: center; gap: .55rem;
  width: 100%; text-align: start;
  cursor: pointer;
}
.rgb-cpick-btn .rgb-cpick-btn-dial{
  color: var(--text-2); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rgb-cpick-btn .rgb-cpick-btn-name{
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rgb-cpick-btn-name.is-placeholder{ color: var(--text-3); }
.rgb-cpick-caret{
  flex: none; font-size: .7rem; color: var(--text-3);
  transition: transform .2s var(--ease);
}
.rgb-cpick-btn[aria-expanded="true"] .rgb-cpick-caret{ transform: rotate(180deg); }

.rgb-flag{
  flex: none;
  width: 24px; height: 16px;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid var(--border);
}

.rgb-cpick-pop{
  position: absolute; z-index: 20;
  inset-inline: 0; top: calc(100% + .35rem);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 40px -18px rgba(25,118,210,.45);
  overflow: hidden;
}

.rgb-cpick-search-wrap{
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--border);
}
.rgb-cpick-search-wrap .bi-search{ flex: none; color: var(--text-3); font-size: .9rem; }
.rgb-cpick-search{
  flex: 1 1 auto; min-width: 0;
  background: transparent; border: 0; outline: 0;
  color: var(--text-1); font-family: inherit; font-size: .92rem;
}
.rgb-cpick-search::placeholder{ color: var(--text-3); }

.rgb-cpick-list{
  list-style: none; margin: 0; padding: .25rem;
  max-height: 16rem; overflow-y: auto;
  overscroll-behavior: contain;
}
.rgb-cpick-opt{
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .6rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: .92rem; color: var(--text-1);
}
.rgb-cpick-opt-dial{
  flex: none; min-width: 3.1rem;
  color: var(--text-3); font-weight: 700;
  font-variant-numeric: tabular-nums;
  direction: ltr; text-align: start;
}
.rgb-cpick-opt-name{ flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rgb-cpick-opt.is-active{ background: rgba(66,165,245,.14); }
.rgb-cpick-opt[aria-selected="true"]{ color: var(--b-400); font-weight: 700; }

.rgb-cpick-empty{
  margin: 0; padding: .9rem .7rem;
  text-align: center; font-size: .88rem; color: var(--text-3);
}

/* ---- inline validation ---- */
.rgb-field-err{
  display: none;
  margin: .4rem 0 0;
  font-size: .82rem;
  color: #E5484D;
}
.rgb-trial-form .form-control.is-invalid{ border-color: #E5484D; }
.rgb-trial-form .rgb-cpick-btn.is-invalid ~ .rgb-field-err{ display: block; }
.rgb-trial-form .form-control.is-invalid:focus{
  border-color: #E5484D;
  box-shadow: 0 0 0 .2rem rgba(229, 72, 77, .18);
}
.rgb-trial-form .form-control.is-invalid ~ .rgb-field-err,
.rgb-trial-form .rgb-dial-group:has(.is-invalid) ~ .rgb-field-err{ display: block; }
.rgb-turnstile{ display: flex; justify-content: center; }
.rgb-turnstile:empty{ display: none; }
.rgb-trial-form .rgb-turnstile.is-invalid ~ .rgb-field-err{ display: block; }
/* Turnstile is a fixed 300px box: scale it down on narrow phones. */
@media (max-width: 389.98px){
  .rgb-turnstile{ height: 58px; }
  .rgb-turnstile > div{ transform: scale(.78); transform-origin: top center; }
}

.rgb-trial-cta{ display: flex; flex-wrap: wrap; gap: .6rem; }
.rgb-trial-cta > *{ flex: 1 1 12rem; }
.rgb-trial-home{
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center;
  box-shadow: 0 18px 40px -18px rgba(25,118,210,.45);
}
/* Bootstrap's .btn removes the focus outline; restore it. */
.rgb-trial-cta .btn:focus-visible{
  outline: 2px solid var(--b-400);
  outline-offset: 3px;
}

.rgb-trial-submit{ width: 100%; }
.rgb-trial-submit[disabled]{ opacity: .65; cursor: progress; }
.rgb-trial-note{
  margin-top: .8rem;
  font-size: .85rem;
  color: var(--text-3);
  text-align: center;
}

/* ---- general alert ---- */
.rgb-trial-alert{
  display: flex; align-items: flex-start; gap: .6rem; flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: .9rem 1.1rem;
  background: rgba(229, 72, 77, .1);
  border: 1px solid rgba(229, 72, 77, .38);
  border-radius: var(--radius-md);
  color: var(--text-1);
  font-size: .9rem; line-height: 1.7;
}
.rgb-trial-alert > .bi{ flex: none; margin-top: .15rem; color: #E5484D; font-size: 1.05rem; }
.rgb-trial-alert-text{ flex: 1 1 14rem; min-width: 0; word-break: break-word; }

/* ---- provisioning ---- */
.rgb-trial-provisioning{ text-align: center; }
.rgb-trial-provisioning:focus{ outline: none; }
.rgb-trial-provisioning h2{ font-size: 1.25rem; font-weight: 800; margin-bottom: .6rem; }
.rgb-trial-provisioning-msg{
  margin: 0 0 .3rem; min-height: 1.4em;
  color: var(--text-2); font-size: .95rem; line-height: 1.8;
}
.rgb-trial-provisioning .rgb-trial-note{ margin-top: .6rem; }

.rgb-trial-spinner{
  display: block; width: 2.6rem; height: 2.6rem;
  margin: 0 auto 1.1rem;
  border: 3px solid var(--border);
  border-top-color: var(--b-400);
  border-radius: 50%;
  animation: rgb-trial-spin 1s linear infinite;
}
@keyframes rgb-trial-spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .rgb-trial-spinner{ border-top-color: var(--b-400); opacity: .75; }
}

/* ---- success ---- */
.rgb-trial-success{ text-align: center; }
.rgb-trial-success:focus,
.rgb-trial-failed:focus{ outline: none; }
.rgb-trial-success-msg{
  margin: -.7rem 0 1.3rem;
  color: var(--text-2); font-size: .95rem; line-height: 1.8;
}
.rgb-trial-success-icon{
  font-size: 2.6rem; color: var(--b-400);
  display: block; margin-bottom: .9rem;
}
.rgb-trial-success h2{ font-size: 1.25rem; font-weight: 800; margin-bottom: 1.4rem; }

.rgb-trial-summary{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .55rem 1.1rem;
  text-align: start;
  margin: 0 0 1.5rem;
  padding: 1rem 1.1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.rgb-trial-summary dt{ color: var(--text-3); font-size: .88rem; font-weight: 700; }
.rgb-trial-summary dd{ margin: 0; color: var(--text-1); font-size: .92rem; font-weight: 600; }
.rgb-trial-summary a{ color: var(--b-400); word-break: break-all; }
.rgb-trial-summary a:hover{ text-decoration: underline; }

/* ---- credentials ---- */
.rgb-trial-creds{
  text-align: start;
  margin: 0 0 1.5rem;
  padding: 1rem 1.1rem;
  background: var(--surface-2);
  border: 1px solid rgba(229, 72, 77, .38);
  border-radius: var(--radius-md);
}
.rgb-trial-creds-warn{
  display: flex; align-items: flex-start; gap: .55rem;
  margin: 0 0 1rem;
  color: var(--text-2); font-size: .85rem; line-height: 1.7;
}
.rgb-trial-creds-warn .bi{ flex: none; margin-top: .15rem; color: #E5484D; }

.rgb-trial-cred{
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .55rem 0;
  border-top: 1px solid var(--border);
}
.rgb-trial-cred-label{
  flex: 0 0 7rem;
  color: var(--text-3); font-size: .85rem; font-weight: 700;
}
.rgb-trial-cred-value{
  flex: 1 1 8rem; min-width: 0;
  padding: .35rem .6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .95rem; font-weight: 700;
  word-break: break-all;
}

.rgb-trial-copy{
  flex: none;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .7rem;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-2); font: inherit; font-size: .82rem; font-weight: 700;
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.rgb-trial-copy:hover{ color: var(--text-1); border-color: var(--b-400); background: rgba(66,165,245,.08); }
.rgb-trial-copy:focus-visible{ outline: 2px solid var(--b-400); outline-offset: 2px; }
.rgb-trial-copy.is-copied{ color: #2FA36B; border-color: rgba(47,163,107,.55); background: rgba(47,163,107,.1); }

/* ---- failure ---- */
.rgb-trial-failed{ text-align: center; }
.rgb-trial-failed-icon{
  font-size: 2.6rem; color: #E5484D;
  display: block; margin-bottom: .9rem;
}
.rgb-trial-failed h2{ font-size: 1.25rem; font-weight: 800; margin-bottom: .8rem; }
.rgb-trial-failed-msg{
  margin: 0 0 1.5rem;
  color: var(--text-2); font-size: .95rem; line-height: 1.8;
}

/* ---- OTP dialog ---- */
.rgb-otp .modal-dialog{ max-width: 27rem; }
.rgb-otp-card{
  padding: 1.7rem 1.5rem;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-blue);
}
.rgb-otp-badge{ margin-bottom: 1rem; }
.rgb-otp-badge .bi-whatsapp{ color: #25D366; }
.rgb-otp-title{ font-size: 1.15rem; font-weight: 800; margin-bottom: .6rem; color: var(--text-1); }
.rgb-otp-intro{ margin-bottom: .25rem; font-size: .9rem; color: var(--text-2); }
.rgb-otp-phone{
  margin-bottom: 1.4rem;
  font-size: 1.02rem; font-weight: 800; color: var(--text-1);
  font-variant-numeric: tabular-nums;
}

/* Dual channel: a heading above each code group. */
.rgb-otp-code-label{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .2rem .45rem;
  margin: 1rem 0 .55rem;
  font-size: .88rem; font-weight: 700; color: var(--text-2);
}
.rgb-otp-code-label .bi-whatsapp{ color: #25D366; }
.rgb-otp-dest{ color: var(--text-1); font-weight: 800; font-variant-numeric: tabular-nums; }

.rgb-otp-digits{ display: flex; justify-content: center; gap: .5rem; }
.rgb-otp-digit{
  flex: 1 1 0; min-width: 0; max-width: 3rem;
  height: 3.2rem; padding: 0;
  text-align: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  font-family: inherit; font-size: 1.3rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.rgb-otp-digit:focus{
  outline: 0;
  border-color: var(--b-400);
  box-shadow: 0 0 0 .2rem rgba(66,165,245,.2);
}
.rgb-otp-digits.is-invalid .rgb-otp-digit{ border-color: #E5484D; }

.rgb-otp-msg{
  margin: .9rem 0 0; min-height: 1.3em;
  font-size: .85rem; color: var(--b-300);
}
.rgb-otp-msg.is-error{ color: #E5484D; }
.rgb-otp-msg.is-success{ color: #2FA36B; }

.rgb-otp-submit{ width: 100%; margin-top: 1.1rem; }
.rgb-otp-submit[disabled]{ opacity: .65; cursor: progress; }
.rgb-otp-card .btn:focus-visible{
  outline: 2px solid var(--b-400);
  outline-offset: 3px;
}

.rgb-otp-resend{ margin: 1rem 0 0; font-size: .85rem; color: var(--text-3); }
.rgb-otp-resend-btn{
  padding: 0; background: none; border: 0;
  color: var(--b-400); font: inherit; font-weight: 700; cursor: pointer;
}
.rgb-otp-resend-btn:hover{ text-decoration: underline; }
.rgb-otp-resend-btn[disabled]{ color: var(--text-3); cursor: default; text-decoration: none; }

.rgb-otp-edit{
  margin-top: .8rem; padding: 0;
  background: none; border: 0;
  color: var(--text-3); font: inherit; font-size: .85rem; cursor: pointer;
}
.rgb-otp-edit:hover{ color: var(--text-2); }

/* ---- responsive ---- */
@media (max-width: 991.98px){
  .rgb-trial-pitch{ text-align: center; }
  .rgb-trial-pitch .rgb-section-title{ text-align: center; }
  .rgb-trial-pitch .rgb-section-desc{ margin-inline: auto; }
  .rgb-trial-pitch .rgb-check-list{ align-items: center; }
  .rgb-trial-pitch .rgb-check-list li{ justify-content: center; }
}

@media (max-width: 575.98px){
  /* Header must fit on one line: show the short language code. */
  .rgb-lang-btn .rgb-lang-current{ display: none; }
  .rgb-lang-btn .rgb-lang-code{ display: inline; }

  .rgb-trial-form-title{ font-size: 1.02rem; margin-bottom: 1.1rem; }
  .rgb-dial-code{ min-width: 3.9rem; padding: 0 .55rem; font-size: .88rem; }
  .rgb-cpick-list{ max-height: 12rem; }
  .rgb-cpick-opt{ padding: .6rem .6rem; }
  .rgb-trial-summary{ grid-template-columns: 1fr; gap: .2rem .8rem; }
  .rgb-trial-summary dd{ margin-bottom: .55rem; }

  .rgb-trial-cred-label{ flex: 1 0 100%; }
  .rgb-trial-cred-value{ flex: 1 1 8rem; }

  .rgb-otp-card{ padding: 1.4rem 1.1rem; }
  .rgb-otp-digits{ gap: .4rem; }
  .rgb-otp-digit{ height: 2.9rem; font-size: 1.15rem; }
}