/* aFactor phone field + OTP step. Pairs with /assets/phone-otp.js. */
.afp { position: relative; display: block; }
.afp__row { display: flex; align-items: stretch; gap: 0; position: relative; }
.afp__cc {
  appearance: none; display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 0 10px 0 12px; margin: 0; cursor: pointer;
  font: inherit; font-size: .95rem; color: var(--ink, #0a2540);
  background: #f6f9fb; border: 1px solid var(--line, #e6ebf1); border-right: 0;
  border-radius: var(--radius-sm, 8px) 0 0 var(--radius-sm, 8px);
}
.afp__cc:hover { background: #eef4f6; }
.afp__cc:focus-visible { outline: 2px solid var(--brand, #63989e); outline-offset: 1px; position: relative; z-index: 1; }
.afp__cc:disabled { cursor: default; opacity: .85; }
.afp__dial { font-variant-numeric: tabular-nums; }
.afp__caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .6; }
.afp .afp__num { flex: 1 1 auto; min-width: 0; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; margin: 0; }
.afp .afp__num[readonly] { background: #f6f9fb; }
.afp-flag {
  display: inline-block; flex: 0 0 auto; width: 20px; height: 15px; border-radius: 2px;
  background: #e6ebf1 url(/assets/flags.webp?v=1) no-repeat; background-size: 320px 240px;
  box-shadow: 0 0 0 1px rgba(10, 37, 64, .08);
}
.afp__badge {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: .75rem; font-weight: 700; color: #1f7a52; background: #e6f6ee;
  padding: 3px 8px; border-radius: 999px; pointer-events: none;
}
.afp__badge::before { content: "\2713\00a0"; }
.afp__err { margin-top: 6px; font-size: .82rem; font-weight: 600; color: #c4462c; }

.afp__pop {
  position: absolute; z-index: 60; left: 0; top: calc(100% + 6px);
  width: min(360px, calc(100vw - 32px));
  background: #fff; color: var(--ink, #0a2540);
  border: 1px solid var(--line, #e6ebf1); border-radius: 12px;
  box-shadow: 0 18px 40px -12px rgba(10, 37, 64, .28);
  padding: 8px;
}
.afp__pop[hidden] { display: none; }
.afp .afp__search {
  width: 100%; box-sizing: border-box; padding: 10px 12px; margin: 0 0 6px;
  border: 1px solid var(--line, #e6ebf1); border-radius: 8px; font: inherit; font-size: .9rem;
  background: #fff; color: var(--ink, #0a2540);
}
.afp .afp__search:focus { outline: none; border-color: var(--brand, #63989e); box-shadow: 0 0 0 3px rgba(99, 152, 158, .18); }
.afp__list { list-style: none; margin: 0; padding: 0; max-height: 264px; overflow-y: auto; overscroll-behavior: contain; }
.afp__list li {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  cursor: pointer; font-size: .9rem; line-height: 1.25; color: var(--ink, #0a2540);
}
.afp__list li:hover, .afp__list li.is-active { background: #eef4f6; }
.afp__list li[aria-selected="true"] { font-weight: 700; }
.afp__list li.afp__sep { border-bottom: 1px solid var(--line, #e6ebf1); border-radius: 8px 8px 0 0; margin-bottom: 4px; padding-bottom: 10px; }
.afp__list .afp__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.afp__list .afp__code { color: var(--muted, #8792a2); font-variant-numeric: tabular-nums; }
.afp__list .afp__none { cursor: default; color: var(--muted, #8792a2); }

/* code step */
.afp-otp {
  margin-top: 10px; padding: 14px 16px; border-radius: 12px;
  background: #f3f8f9; border: 1px solid #d7e7ea; color: var(--ink, #0a2540);
  font-size: .9rem; font-weight: 400; text-align: left;
}
.afp-otp[hidden] { display: none; }
.afp-otp__lead { margin: 0 0 10px; }
.afp-otp__row { display: flex; flex-wrap: wrap; gap: 8px; }
.afp-otp .afp-otp__code {
  flex: 1 1 160px; max-width: 220px; padding: 12px 14px; margin: 0;
  font: inherit; font-size: 1.15rem; letter-spacing: .3em; font-variant-numeric: tabular-nums;
  background: #fff; color: var(--ink, #0a2540); border: 1px solid #c9dde1; border-radius: 8px;
}
.afp-otp .afp-otp__code:focus { outline: none; border-color: var(--brand, #63989e); box-shadow: 0 0 0 3px rgba(99, 152, 158, .2); }
.afp-otp .afp-otp__verify {
  appearance: none; flex: 0 0 auto; border: 0; cursor: pointer;
  padding: 12px 18px; border-radius: 8px; font: inherit; font-weight: 700; font-size: .92rem;
  background: var(--brand-deep, #2a5e64); color: #fff; box-shadow: none; width: auto;
}
.afp-otp .afp-otp__verify:disabled { opacity: .7; cursor: default; }
.afp-otp__links { display: flex; gap: 8px; align-items: center; margin-top: 10px; font-size: .85rem; color: var(--muted, #8792a2); }
.afp-otp .afp-otp__link {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer; width: auto; box-shadow: none;
  font: inherit; font-weight: 600; color: var(--brand-deep, #2a5e64); text-decoration: underline; text-underline-offset: 2px;
}
.afp-otp .afp-otp__link:disabled { color: var(--muted, #8792a2); text-decoration: none; cursor: default; }
.afp-otp__status { margin: 8px 0 0; min-height: 1em; font-size: .85rem; font-weight: 600; color: #1f7a52; }
.afp-otp__status.is-bad { color: #c4462c; }

/* dark enquire band */
.afp--dark .afp__cc { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .18); color: #fff; border-radius: 10px 0 0 10px; }
.afp--dark .afp__cc:hover { background: rgba(255, 255, 255, .16); }
.afp--dark .afp__num[readonly] { background: rgba(255, 255, 255, .04); }
.afp--dark .afp__err { color: #ffb4a3; }
.afp-otp--dark { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #fff; }
.afp-otp--dark .afp-otp__verify { background: var(--grad-warm, #f48066); }
.afp-otp--dark .afp-otp__link { color: #ffd0c2; }
.afp-otp--dark .afp-otp__status { color: #9be3c1; }
.afp-otp--dark .afp-otp__status.is-bad { color: #ffb4a3; }
.afp-otp--dark .afp-otp__links { color: rgba(255, 255, 255, .6); }

@media (max-width: 520px) {
  .afp__pop { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; }
  .afp__list { max-height: 50vh; }
}

/* keep host form styles (.enquire__form button / input) off the widget's own controls */
.afp .afp__search::placeholder, .afp-otp .afp-otp__code::placeholder { color: #8792a2; letter-spacing: normal; }
.enquire__form .afp__cc:hover, .enquire__form .afp-otp button:hover { transform: none; filter: none; }
.enquire__form .afp__cc { box-shadow: none; font-weight: 400; white-space: nowrap; }