:root{
  /* Ultra-bright + high-contrast tech (Apple-ish) */
  --bg:#FAFBFF;
  --card:#FFFFFF;
  --panel:#FFFFFF;

  --stroke: rgba(10,20,40,.18);
  --stroke2: rgba(10,20,40,.12);

  --text:#0B1220;
  --muted: rgba(11,18,32,.72);
  --muted2: rgba(11,18,32,.58);

  --primary:#2563EB;   /* blue */
  --primary2:#06B6D4;  /* cyan */
  --danger:#E11D48;
  --ok:#16A34A;

  --shadow: 0 10px 30px rgba(8,18,40,.08);
  --shadow2: 0 22px 70px rgba(8,18,40,.10);
  --radius: 18px;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 520px at 12% 14%, rgba(37,99,235,.12), transparent 60%),
    radial-gradient(760px 460px at 88% 18%, rgba(6,182,212,.10), transparent 58%),
    radial-gradient(900px 520px at 50% 92%, rgba(225,29,72,.06), transparent 62%),
    linear-gradient(180deg, #FFFFFF 0%, var(--bg) 100%);
  overflow-x:hidden;
}

/* Super-light grid */
.bgGrid{
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(11,18,32,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,18,32,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity:.70;
  pointer-events:none;
  mask-image: radial-gradient(780px 520px at 50% 22%, black 44%, transparent 78%);
}

.wrap{
  width:min(1100px, 92vw);
  margin: 28px auto 40px;
  position:relative;
}

.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.logoDot{
  width:14px; height:14px; border-radius:50%;
  background: linear-gradient(135deg, rgba(37,99,235,1), rgba(6,182,212,1));
  box-shadow: 0 0 0 7px rgba(37,99,235,.10), 0 10px 40px rgba(37,99,235,.18);
}
.brand__title{ font-weight:900; letter-spacing:.2px; }
.brand__sub{ color:var(--muted2); font-size:13px; margin-top:2px; }

.card{
  background: var(--card);
  border: 1px solid var(--stroke2);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding: 22px 22px 18px;
}

.card__title{
  margin: 0 0 10px;
  font-size: 22px;
  letter-spacing:.2px;
}

.card__desc{
  margin: 10px 0;
  color: rgba(11,18,32,.78);
  line-height: 1.65;
}

/* Important callout: high-contrast but bright */
.card__desc--important{
  border-left: 5px solid var(--danger);
  padding: 10px 12px;
  background: rgba(225,29,72,.08);
  color: rgba(11,18,32,.95);
  border-radius: 12px;
  font-weight: 750;
}

.divider{
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(11,18,32,.16), transparent);
  margin: 18px 0;
}

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.panel{
  background: var(--panel);
  border: 1px solid var(--stroke2);
  border-radius: 16px;
  padding: 14px 14px 12px;
  box-shadow: 0 8px 22px rgba(8,18,40,.05);
}
.panel--full{ margin-top:14px; }

.panel__title{
  font-weight: 950;
  margin-bottom: 12px;
  letter-spacing:.2px;
}

.formRow{ margin-bottom: 12px; position:relative; }

.label{
  display:block;
  margin: 0 0 6px;
  font-size: 13px;
  color: rgba(11,18,32,.90);
}

.req{ color: var(--danger); font-weight:950; margin-left:3px; }

/* Inputs — make them WHITE and readable */
.input, .select, .textarea{
  width:100%;
  border-radius: 12px;
  border: 1px solid rgba(11,18,32,.22);
  background: #FFFFFF;
  color: var(--text);
  outline:none;
  padding: 11px 12px;
  font-size: 14px;
  box-shadow: 0 1px 0 rgba(11,18,32,.04);
}

.input::placeholder, .textarea::placeholder{
  color: rgba(11,18,32,.45);
}

.input:focus, .select:focus, .textarea:focus{
  border-color: rgba(37,99,235,.85);
  box-shadow: 0 0 0 4px rgba(37,99,235,.16);
}

.textarea{ min-height: 112px; resize: vertical; }

.hint{
  margin-top: 6px;
  color: rgba(11,18,32,.62);
  font-size: 12px;
  line-height: 1.4;
}

.counter{
  margin-top:6px;
  font-size:12px;
  color: rgba(11,18,32,.56);
  text-align:right;
  font-family: var(--mono);
}

.phoneRow{ display:flex; gap:10px; }
.phoneCode{ width: 44%; }

.strength{ margin-top:10px; }
.strength__bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(11,18,32,.08);
  overflow:hidden;
  border: 1px solid rgba(11,18,32,.12);
}
.strength__fill{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(225,29,72,1), rgba(37,99,235,1), rgba(22,163,74,1));
  transition: width .18s ease;
}
.strength__label{
  margin-top:6px;
  font-size:12px;
  color: rgba(11,18,32,.66);
  font-family: var(--mono);
}

.checkRow{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin: 10px 0;
  color: rgba(11,18,32,.92);
}
.checkRow input{ margin-top:3px; transform: scale(1.12); }
.checkRow a{ color: rgba(37,99,235,.98); text-decoration:none; }
.checkRow a:hover{ text-decoration:underline; }

.recaptchaBox{
  min-height: 78px;
  display:flex;
  align-items:center;
}

.actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top: 8px; }

.btn{
  border: 1px solid rgba(11,18,32,.18);
  background: #FFFFFF;
  color: var(--text);
  border-radius: 12px;
  padding: 11px 14px;
  cursor:pointer;
  font-weight:950;
  letter-spacing:.2px;
  box-shadow: 0 10px 26px rgba(8,18,40,.08);
}
.btn:hover{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12), 0 14px 36px rgba(8,18,40,.10);
}
.btn--primary{
  background: linear-gradient(135deg, rgba(37,99,235,1), rgba(6,182,212,.95));
  border-color: transparent;
  color: #FFFFFF;
}
.btn:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; }

.error{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(225,29,72,.26);
  background: rgba(225,29,72,.10);
  color: rgba(11,18,32,.95);
}
.ok{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(22,163,74,.24);
  background: rgba(22,163,74,.10);
  color: rgba(11,18,32,.95);
}

.hidden{ display:none !important; }
.muted{ color: var(--muted2); font-size: 12.5px; margin-top:10px; }

.success{
  border: 1px solid rgba(22,163,74,.24);
  background: rgba(22,163,74,.10);
  border-radius: 16px;
  padding: 14px;
}
.success__title{ font-weight:950; margin-bottom:8px; }
.success__text{ color: rgba(11,18,32,.92); line-height:1.6; }

.foot{ margin-top: 14px; text-align:center; }

/* Overlays: bright, readable */
.overlay{
  position:fixed; inset:0;
  background: rgba(255,255,255,.78);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 9999;
  backdrop-filter: blur(10px);
}

.modal{
  width:min(520px, 94vw);
  background: #FFFFFF;
  border: 1px solid rgba(11,18,32,.16);
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(8,18,40,.22);
  padding: 16px 16px 14px;
}
.modal__title{
  font-weight: 950;
  font-size: 16px;
  letter-spacing:.2px;
  margin-bottom: 10px;
}
.modal__text{ color: rgba(11,18,32,.90); line-height: 1.65; }
.modal__actions{ display:flex; gap:10px; margin-top: 12px; flex-wrap:wrap; }

.pill{
  display:inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(11,18,32,.18);
  background: rgba(37,99,235,.08);
  font-family: var(--mono);
}

.spinner{
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 4px solid rgba(11,18,32,.16);
  border-top-color: rgba(37,99,235,1);
  animation: spin 1s linear infinite;
  margin: 0 auto 12px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.list{ color: rgba(11,18,32,.90); line-height: 1.7; }

/* ====== Choices.js (critical for your country/code dropdown visibility) ====== */
/* The input box */
.choices{
  width: 100%;
}
.choices__inner{
  background: #FFFFFF !important;
  border: 1px solid rgba(11,18,32,.22) !important;
  border-radius: 12px !important;
  min-height: 44px !important;
  padding: 6px 10px !important;
  box-shadow: 0 1px 0 rgba(11,18,32,.04) !important;
}

/* Placeholder + selected text */
.choices__placeholder{
  color: rgba(11,18,32,.45) !important;
}
.choices__item--selectable,
.choices__item--choice{
  color: rgba(11,18,32,.95) !important;
}

/* Focus ring */
.choices.is-focused .choices__inner,
.choices.is-open .choices__inner{
  border-color: rgba(37,99,235,.85) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.16) !important;
}

/* Dropdown */
.choices__list--dropdown,
.choices__list[aria-expanded]{
  background: #FFFFFF !important;
  border: 1px solid rgba(11,18,32,.18) !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 60px rgba(8,18,40,.16) !important;
  overflow: hidden !important;
}

/* Search input inside dropdown */
.choices__input--cloned{
  background: #FFFFFF !important;
  color: rgba(11,18,32,.95) !important;
}

/* Each row */
.choices__list--dropdown .choices__item{
  color: rgba(11,18,32,.95) !important;
  padding: 10px 12px !important;
}

/* Highlight row (hover/keyboard) */
.choices__list--dropdown .choices__item--selectable.is-highlighted{
  background: rgba(37,99,235,.10) !important;
  color: rgba(11,18,32,.98) !important;
}

/* Selected item chips (if any) */
.choices__list--multiple .choices__item{
  background: rgba(37,99,235,.10) !important;
  border: 1px solid rgba(37,99,235,.25) !important;
  color: rgba(11,18,32,.95) !important;
}

/* Scrollbar readability (optional) */
.choices__list--dropdown .choices__list{
  scrollbar-width: thin;
  scrollbar-color: rgba(11,18,32,.28) rgba(11,18,32,.06);
}

@media (max-width: 900px){
  .grid2{ grid-template-columns: 1fr; }
  .phoneCode{ width: 46%; }
}