/* ==========================================================================
   LEAD FORM — shared component (hero second column on each landing page)
   --------------------------------------------------------------------------
   Dark glass card designed for the navy hero:
   • .lead__bridge  — compact "relationship bridge" overlapping the card's
                      top edge (advisor → arc → F-mark → arc → client)
   • fields         — Full Name · Company Website · Work Email · Phone
                      (country picker with flag + search by name or code)
   • states         — invalid (inline message), loading (pixel loader in
                      the button, fields locked), error banner, success
                      panel with a self-drawing check.
   Pairs with assets/js/components/lead-form.js.
   ========================================================================== */

.lead {
  position: relative;
  inline-size: min(100%, 30rem);
  margin-inline: auto;
  padding: 3.25rem clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.75rem);
  border-radius: var(--r-panel);
  border: 1px solid rgba(0, 169, 182, 0.35);
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(0, 169, 182, 0.16), transparent 70%),
    rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 40px 80px -30px rgba(0, 0, 0, 0.65);
  color: var(--c-on-dark-body);
}

@media (min-width: 48rem) {
  .lead {
    margin-inline: auto 0;
  }
}

/* ---------------------------------------------------------------------------
   Compact relationship bridge (decorative, overlaps the top edge)
   --------------------------------------------------------------------------- */
.lead__bridge {
  position: absolute;
  inset-block-start: -2.25rem;
  inset-inline: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  direction: ltr;                  /* advisor → Fatorly → client reads the same everywhere */
}

.lead__face {
  inline-size: 3.75rem;
  block-size: 3.75rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.6), 0 0 0 6px rgba(0, 169, 182, 0.14);
}

.lead__face--client {
  inline-size: 3.25rem;
  block-size: 3.25rem;
}

.lead__face img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Icon-node variant of the bridge (LP01: ERP → Fatorly → UAE e-invoicing) */
.lead__node {
  display: grid;
  place-items: center;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  flex-shrink: 0;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: #0B2559;
  color: var(--c-on-dark);
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.6);
}

.lead__node svg {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.lead__node--done {
  position: relative;
  color: var(--c-teal);
}

/* Small verified tick on the destination node */
.lead__node--done::after {
  content: "";
  position: absolute;
  inset-block-start: -0.35rem;
  inset-inline-end: -0.35rem;
  inline-size: 1rem;
  block-size: 1rem;
  border-radius: 50%;
  border: 2px solid #0B2559;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2302113A' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 70% no-repeat,
    var(--c-teal);
}

.lead__arc {
  inline-size: 3.25rem;
  block-size: 1.75rem;
  flex-shrink: 0;
  overflow: visible;
}

.lead__arc path {
  fill: none;
  stroke: var(--c-teal);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 3 5;
  animation: lead-flow 1s linear infinite;
}

@keyframes lead-flow {
  to { stroke-dashoffset: -8; }
}

.lead__mark {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  flex-shrink: 0;
  border-radius: 14px;
  background-color: var(--c-white);
  box-shadow: 0 0 0 1px rgba(0, 169, 182, 0.35), 0 12px 30px -10px rgba(0, 169, 182, 0.7);
}

.lead__mark img {
  inline-size: 70%;
}

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */
.lead__title {
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  line-height: 1.25;
  text-align: center;
  color: var(--c-on-dark);
}

/* ---------------------------------------------------------------------------
   Form layout + fields
   --------------------------------------------------------------------------- */
.lead__form {
  display: grid;
  gap: var(--space-md);
  margin-block-start: var(--space-lg);
}

/* `display: grid` above would otherwise override the [hidden] attribute */
.lead__form[hidden] {
  display: none;
}

.field {
  position: relative;
  display: grid;
  gap: 0.375rem;
  min-inline-size: 0;
}

.field__label {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--c-on-dark);
}

.field__control {
  position: relative;
  display: flex;
  align-items: center;
  min-block-size: 3rem;
  border-radius: var(--r-btn);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background-color: rgba(2, 17, 58, 0.45);
  transition: border-color var(--dur-micro) var(--ease-out),
              box-shadow var(--dur-micro) var(--ease-out),
              background-color var(--dur-micro) var(--ease-out);
}

.field__control:hover {
  border-color: rgba(255, 255, 255, 0.32);
}

.field__control:focus-within {
  border-color: var(--c-teal);
  background-color: rgba(2, 17, 58, 0.65);
  box-shadow: 0 0 0 3px rgba(0, 169, 182, 0.28);
}

/* Leading icon inside each field */
.field__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: 2.75rem;
  color: rgba(127, 220, 227, 0.85);
}

.field__icon svg {
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

.field__input {
  flex: 1;
  min-inline-size: 0;
  block-size: 3rem;
  padding-inline-end: var(--space-md);
  border: 0;
  background: transparent;
  color: var(--c-on-dark);
  font-size: 1rem;                 /* ≥ 16px: no zoom-on-focus on iOS */
}

.field__input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.field__input:focus {
  outline: none;                   /* the whole control shows the focus ring */
}

/* Autofill: keep the dark field look */
.field__input:-webkit-autofill {
  -webkit-text-fill-color: var(--c-on-dark);
  -webkit-box-shadow: 0 0 0 100px #0B2150 inset;
  caret-color: var(--c-on-dark);
}

/* Invalid state */
.field.is-invalid .field__control {
  border-color: #FF8A8A;
  box-shadow: 0 0 0 3px rgba(255, 138, 138, 0.18);
}

.field__error {
  display: none;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--fs-caption);
  font-weight: 500;
  color: #FFB4B4;
}

.field__error svg {
  inline-size: 0.875rem;
  block-size: 0.875rem;
  flex-shrink: 0;
}

.field.is-invalid .field__error {
  display: flex;
}

/* ---------------------------------------------------------------------------
   Phone field with country picker
   --------------------------------------------------------------------------- */
/* Lift the whole phone field above its siblings: entrance animations
   leave transforms on the fields and the submit button, which turns each
   into its own stacking context — without this the button (painted
   later) would cover the country popup. */
.phone {
  z-index: 30;
}

.phone .field__control {
  overflow: visible;
}

.phone__country {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  block-size: 100%;
  min-block-size: 3rem;
  padding-inline: 0.75rem 0.6rem;
  border-inline-end: 1px solid rgba(255, 255, 255, 0.14);
  border-start-start-radius: var(--r-btn);
  border-end-start-radius: var(--r-btn);
  color: var(--c-on-dark);
  font-size: 0.9375rem;
  font-weight: 600;
  direction: ltr;
}

.phone__country:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.phone__country:focus-visible {
  outline-offset: -3px;
}

.phone__flag {
  inline-size: 1.375rem;
  block-size: auto;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.phone__chev {
  inline-size: 0.875rem;
  block-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  transition: rotate var(--dur-micro) var(--ease-out);
}

.phone__country[aria-expanded="true"] .phone__chev {
  rotate: 180deg;
}

.phone .field__input {
  padding-inline-start: var(--space-sm);
  direction: ltr;                  /* phone digits always LTR */
}

[dir="rtl"] .phone .field__input {
  text-align: end;
}

/* Popup */
.phone__pop {
  position: absolute;
  inset-block-start: calc(100% + 0.5rem);
  inset-inline: 0;
  z-index: 20;
  display: grid;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: var(--r-card);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background-color: #071A47;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7);
}

.phone__pop[hidden] {
  display: none;
}

.phone__search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: var(--r-btn);
  background-color: rgba(255, 255, 255, 0.07);
}

.phone__search-wrap svg {
  flex-shrink: 0;
  inline-size: 1rem;
  block-size: 1rem;
  margin-inline: 0.75rem 0.25rem;
  color: rgba(255, 255, 255, 0.55);
}

.phone__search {
  flex: 1;
  min-inline-size: 0;
  block-size: 2.625rem;
  padding-inline-end: 0.75rem;
  border: 0;
  background: transparent;
  color: var(--c-on-dark);
  font-size: 1rem;
}

.phone__search::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.phone__search:focus {
  outline: none;
}

.phone__search-wrap:focus-within {
  box-shadow: 0 0 0 2px var(--c-teal);
}

.phone__list {
  max-block-size: 15rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 169, 182, 0.6) transparent;
}

.phone__option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-block-size: 2.5rem;
  padding-inline: 0.625rem;
  border-radius: 8px;
  color: var(--c-on-dark-body);
  font-size: 0.9375rem;
  cursor: pointer;
}

.phone__option img {
  inline-size: 1.25rem;
  block-size: auto;
  border-radius: 2px;
  flex-shrink: 0;
}

.phone__option-name {
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone__option-dial {
  color: var(--c-on-dark-meta);
  font-variant-numeric: tabular-nums;
  direction: ltr;
}

.phone__option.is-active,
.phone__option:hover {
  background-color: rgba(0, 169, 182, 0.16);
  color: var(--c-on-dark);
}

.phone__option[aria-selected="true"] {
  color: var(--c-teal);
}

.phone__option[aria-selected="true"]::after {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background-color: var(--c-teal);
}

.phone__divider {
  block-size: 1px;
  margin-block: 0.375rem;
  background-color: rgba(255, 255, 255, 0.1);
}

.phone__empty {
  padding: 0.75rem;
  font-size: var(--fs-small);
  color: var(--c-on-dark-meta);
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Submit + loading
   --------------------------------------------------------------------------- */
.lead__submit {
  position: relative;
  inline-size: 100%;
  min-block-size: 3.25rem;
  margin-block-start: var(--space-xs);
  font-size: 1rem;
}

.lead__submit-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  transition: opacity var(--dur-micro) var(--ease-out);
}

/* Pixel loader — 3 × 3 data blocks pulsing in a wave (the F-mark motif) */
.lead__loader {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-micro) var(--ease-out);
}

.lead__loader-grid {
  display: grid;
  grid-template-columns: repeat(3, 0.4rem);
  gap: 0.2rem;
}

.lead__loader-grid i {
  inline-size: 0.4rem;
  block-size: 0.4rem;
  border-radius: 2px;
  background-color: var(--c-navy);
  animation: lead-pixel 1s var(--ease-in-out) infinite;
  animation-delay: calc(var(--d) * 0.1s);
}

@keyframes lead-pixel {
  0%, 100% { opacity: 0.25; scale: 0.7; }
  50%      { opacity: 1;    scale: 1; }
}

.lead.is-loading .lead__submit-label { opacity: 0; }
.lead.is-loading .lead__loader { opacity: 1; }

.lead.is-loading .lead__submit {
  cursor: progress;
  transform: none;
}

.lead.is-loading .field__control {
  opacity: 0.6;
}

/* Reduced motion: a static "busy" indicator instead of the pulse */
@media (prefers-reduced-motion: reduce) {
  .lead__loader-grid i { opacity: 0.8; }
}

/* ---------------------------------------------------------------------------
   Error banner (submission failed)
   --------------------------------------------------------------------------- */
.lead__alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: 0.75rem 0.875rem;
  border-radius: var(--r-btn);
  border: 1px solid rgba(255, 138, 138, 0.45);
  background-color: rgba(229, 72, 77, 0.14);
  color: #FFD2D2;
  font-size: var(--fs-small);
  line-height: 1.45;
}

.lead__alert[hidden] {
  display: none;
}

.lead__alert svg {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  flex-shrink: 0;
  margin-block-start: 0.1rem;
  color: #FF8A8A;
}

.lead__alert strong {
  display: block;
  color: var(--c-on-dark);
}

/* Small reassurance line under the button */
.lead__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-size: var(--fs-caption);
  color: var(--c-on-dark-meta);
}

.lead__note svg {
  inline-size: 0.875rem;
  block-size: 0.875rem;
  color: var(--c-teal);
}

/* ---------------------------------------------------------------------------
   Success panel
   --------------------------------------------------------------------------- */
.lead__success {
  display: grid;
  justify-items: center;
  gap: var(--space-md);
  padding-block: var(--space-xl) var(--space-md);
  text-align: center;
}

.lead__success[hidden] {
  display: none;
}

.lead__check {
  inline-size: 4.5rem;
  block-size: 4.5rem;
}

.lead__check circle {
  fill: rgba(0, 169, 182, 0.14);
  stroke: var(--c-teal);
  stroke-width: 2.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: lead-draw 0.7s var(--ease-out) forwards;
}

.lead__check path {
  fill: none;
  stroke: var(--c-teal);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: lead-draw 0.45s var(--ease-out) 0.55s forwards;
}

@keyframes lead-draw {
  to { stroke-dashoffset: 0; }
}

.lead__success h3 {
  font-size: var(--fs-h3);
  color: var(--c-on-dark);
}

.lead__success p {
  max-inline-size: 22rem;
  color: var(--c-on-dark-body);
}

/* Success state: only the bridge, the check and the message remain */
.lead.is-sent .lead__title {
  display: none;
}

/* Small secondary action under the success message */
.lead__again {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-block-size: 44px;
  margin-block-start: var(--space-xs);
  padding-inline: var(--space-md);
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--c-on-dark);
  font-size: var(--fs-small);
  font-weight: 600;
  transition: border-color var(--dur-micro) var(--ease-out),
              background-color var(--dur-micro) var(--ease-out);
}

.lead__again:hover {
  border-color: var(--c-teal);
  background-color: rgba(0, 169, 182, 0.12);
}

.lead__again svg {
  inline-size: 1rem;
  block-size: 1rem;
  color: var(--c-teal);
  transition: rotate 0.5s var(--ease-out);
}

.lead__again:hover svg {
  rotate: -180deg;
}

/* Honeypot (spam trap) — off-screen for people, visible to bots */
.lead__hp {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}