/* ==========================================================================
   Seeking English Lead Form — scoped to .selead
   Design system: navy #07122A / gold #F5BD4A / cream #FAF7F0
   Plus Jakarta Sans (display) + DM Sans (body)
   ========================================================================== */

.selead {
  --se-navy: #07122A;
  --se-navy-2: #0C1B3A;
  --se-gold: #F5BD4A;
  --se-gold-dark: #E0A62F;
  --se-cream: #FAF7F0;
  --se-white: #FFFFFF;
  --se-ink: #0E1726;
  --se-muted: #5B6478;
  --se-line: rgba(255, 255, 255, .16);
  --se-field-bg: rgba(255, 255, 255, .07);
  --se-field-text: #FFFFFF;
  --se-radius: 20px;
  --se-max: 520px;
  --se-shadow: 0 22px 60px rgba(7, 18, 42, .22);
  --se-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --se-font-body: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-family: var(--se-font-body);
  position: relative;
}

.selead *,
.selead *::before,
.selead *::after { box-sizing: border-box; }

.selead--display-inline .selead-shell { display: flex; justify-content: center; }
.selead .selead-backdrop { display: none; }

.selead-card {
  position: relative;
  width: 100%;
  max-width: var(--se-max);
  padding: 30px 28px 26px;
  border-radius: var(--se-radius);
  box-shadow: var(--se-shadow);
  overflow: hidden;
}

/* ---------- Variant: navy (default, for dark sections) ------------------ */
.selead--dark .selead-card {
  background: linear-gradient(158deg, #07122A 0%, #0C1B3A 62%, #0A1730 100%);
  border: 1px solid rgba(245, 189, 74, .22);
}
.selead--dark .selead-card::after {
  content: "";
  position: absolute;
  inset: -40% 40% 60% -30%;
  background: radial-gradient(closest-side, rgba(245, 189, 74, .18), transparent 70%);
  pointer-events: none;
}

/* ---------- Variant: cream (for light sections) ------------------------- */
.selead--light {
  --se-line: rgba(7, 18, 42, .12);
  --se-field-bg: #FFFFFF;
  --se-field-text: #0E1726;
}
.selead--light .selead-card {
  background: var(--se-cream);
  border: 1px solid rgba(7, 18, 42, .10);
  box-shadow: 0 18px 44px rgba(7, 18, 42, .10);
}

/* ---------- Variant: gold panel ---------------------------------------- */
.selead--gold {
  --se-line: rgba(7, 18, 42, .18);
  --se-field-bg: #FFFFFF;
  --se-field-text: #0E1726;
}
.selead--gold .selead-card {
  background: linear-gradient(150deg, #F5BD4A 0%, #F0CE83 100%);
  border: 1px solid rgba(7, 18, 42, .12);
}
.selead--gold .selead-btn { background: var(--se-navy); color: #FFFFFF; }
.selead--gold .selead-btn:hover { background: #0C1B3A; }

/* ---------- Head -------------------------------------------------------- */
.selead-head { position: relative; z-index: 1; margin-bottom: 18px; }

.selead .selead-eyebrow {
  display: inline-block;
  font-family: var(--se-font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.selead .selead-title {
  font-family: var(--se-font-display);
  font-size: clamp(21px, 2.4vw, 27px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0 0 8px;
  padding: 0;
}

.selead .selead-sub {
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  padding: 0;
}

/* Triple-defense: text over dark backgrounds beats theme-level declarations */
.selead.selead--dark .selead-card .selead-title,
.selead.selead--dark .selead-card .selead-title span,
.selead.selead--dark .selead-card .selead-done-title,
.selead.selead--dark .selead-card .selead-done-title span { color: #FFFFFF !important; }

.selead.selead--dark .selead-card .selead-title strong,
.selead.selead--dark .selead-card .selead-title b,
.selead.selead--dark .selead-card .selead-sub strong,
.selead.selead--dark .selead-card .selead-sub b { color: var(--se-gold) !important; font-weight: 700; }

.selead.selead--dark .selead-card .selead-sub,
.selead.selead--dark .selead-card .selead-sub span,
.selead.selead--dark .selead-card .selead-done-text,
.selead.selead--dark .selead-card .selead-done-text span { color: rgba(255, 255, 255, .82) !important; }

.selead.selead--dark .selead-card .selead-label,
.selead.selead--dark .selead-card .selead-label span { color: rgba(255, 255, 255, .90) !important; }

.selead.selead--dark .selead-card .selead-avail,
.selead.selead--dark .selead-card .selead-avail span,
.selead.selead--dark .selead-card .selead-consent,
.selead.selead--dark .selead-card .selead-consent span,
.selead.selead--dark .selead-card .selead-cal,
.selead.selead--dark .selead-card .selead-cal span { color: rgba(255, 255, 255, .70) !important; }

.selead.selead--light .selead-card .selead-title,
.selead.selead--light .selead-card .selead-title span,
.selead.selead--gold .selead-card .selead-title,
.selead.selead--gold .selead-card .selead-title span { color: var(--se-navy) !important; }

.selead.selead--gold .selead-card .selead-eyebrow,
.selead.selead--gold .selead-card .selead-eyebrow span { color: var(--se-navy) !important; }

/* Gold panel: small copy needs more weight against the light background */
.selead.selead--gold .selead-card .selead-sub,
.selead.selead--gold .selead-card .selead-sub span,
.selead.selead--gold .selead-card .selead-consent,
.selead.selead--gold .selead-card .selead-consent span,
.selead.selead--gold .selead-card .selead-avail,
.selead.selead--gold .selead-card .selead-avail span,
.selead.selead--gold .selead-card .selead-cal,
.selead.selead--gold .selead-card .selead-cal span,
.selead.selead--gold .selead-card .selead-label,
.selead.selead--gold .selead-card .selead-label span { color: #0F1E3C !important; }
.selead.selead--gold .selead-dot { background: #0B7A46; }

/* ---------- Fields ------------------------------------------------------ */
.selead-form { position: relative; z-index: 1; }

.selead-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.selead--stacked .selead-grid { grid-template-columns: 1fr; }
.selead-field--full { grid-column: 1 / -1; }

.selead-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.selead .selead-label {
  font-family: var(--se-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  margin: 0;
}

.selead .selead-input {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  font-family: var(--se-font-body);
  font-size: 15px;
  line-height: 1.35;
  color: var(--se-field-text);
  background: var(--se-field-bg);
  border: 1px solid var(--se-line);
  border-radius: 12px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
  -webkit-appearance: none;
  appearance: none;
}

.selead .selead-input::placeholder { color: rgba(120, 132, 152, .85); }
.selead--dark .selead-input::placeholder { color: rgba(255, 255, 255, .42); }

.selead .selead-input:focus {
  border-color: var(--se-gold);
  box-shadow: 0 0 0 3px rgba(245, 189, 74, .28);
  background: var(--se-field-bg);
}

.selead .selead-input[aria-invalid="true"] {
  border-color: #E4574C;
  box-shadow: 0 0 0 3px rgba(228, 87, 76, .18);
}

.selead .selead-select {
  padding-right: 38px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23F5BD4A' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
}
.selead--dark .selead-select option { color: #0E1726; background: #FFFFFF; }

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

/* phone with dial prefix */
.selead-phone { position: relative; display: flex; align-items: center; }
.selead .selead-dial {
  position: absolute;
  left: 12px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--se-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  color: var(--se-gold);
  pointer-events: none;
}
.selead--light .selead-dial,
.selead--gold .selead-dial { color: var(--se-navy); }
.selead-phone .selead-input { padding-left: 62px; }

/* honeypot */
.selead-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Field colour enforcement -------------------------------------
   Themes and page builders style inputs harder than almost anything else, and
   a wrong text colour here makes the form unusable rather than just ugly.
   Chained specificity + !important + -webkit-text-fill-color, which is the
   property that actually wins on iOS Safari and on Chrome autofill.
   ------------------------------------------------------------------------ */

.selead.selead--dark .selead-card .selead-form .selead-input,
.selead.selead--dark .selead-card .selead-form input.selead-input,
.selead.selead--dark .selead-card .selead-form select.selead-input,
.selead.selead--dark .selead-card .selead-form textarea.selead-input {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  caret-color: var(--se-gold) !important;
  background-color: rgba(255, 255, 255, .10) !important;
  opacity: 1 !important;
}

.selead.selead--light .selead-card .selead-form .selead-input,
.selead.selead--light .selead-card .selead-form input.selead-input,
.selead.selead--light .selead-card .selead-form select.selead-input,
.selead.selead--light .selead-card .selead-form textarea.selead-input,
.selead.selead--gold .selead-card .selead-form .selead-input,
.selead.selead--gold .selead-card .selead-form input.selead-input,
.selead.selead--gold .selead-card .selead-form select.selead-input,
.selead.selead--gold .selead-card .selead-form textarea.selead-input {
  color: #0E1726 !important;
  -webkit-text-fill-color: #0E1726 !important;
  caret-color: #07122A !important;
  background-color: #FFFFFF !important;
  opacity: 1 !important;
}

/* Placeholders */
.selead.selead--dark .selead-card .selead-input::placeholder {
  color: rgba(255, 255, 255, .45) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .45) !important;
  opacity: 1 !important;
}
.selead.selead--light .selead-card .selead-input::placeholder,
.selead.selead--gold .selead-card .selead-input::placeholder {
  color: #8B94A6 !important;
  -webkit-text-fill-color: #8B94A6 !important;
  opacity: 1 !important;
}

/* Autofill. Chrome paints its own background and text, so the field must be
   repainted with an inset shadow — background-color alone is ignored. */
.selead.selead--dark .selead-card .selead-input:-webkit-autofill,
.selead.selead--dark .selead-card .selead-input:-webkit-autofill:hover,
.selead.selead--dark .selead-card .selead-input:-webkit-autofill:focus,
.selead.selead--dark .selead-card .selead-input:-webkit-autofill:active {
  -webkit-text-fill-color: #FFFFFF !important;
  caret-color: var(--se-gold) !important;
  -webkit-box-shadow: 0 0 0 1000px #142544 inset !important;
  box-shadow: 0 0 0 1000px #142544 inset !important;
  transition: background-color 9999s ease-in-out 0s !important;
}
.selead.selead--light .selead-card .selead-input:-webkit-autofill,
.selead.selead--light .selead-card .selead-input:-webkit-autofill:hover,
.selead.selead--light .selead-card .selead-input:-webkit-autofill:focus,
.selead.selead--gold .selead-card .selead-input:-webkit-autofill,
.selead.selead--gold .selead-card .selead-input:-webkit-autofill:hover,
.selead.selead--gold .selead-card .selead-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #0E1726 !important;
  caret-color: #07122A !important;
  -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
  box-shadow: 0 0 0 1000px #FFFFFF inset !important;
  transition: background-color 9999s ease-in-out 0s !important;
}

/* Native dropdown lists are drawn by the OS — always dark text on white. */
.selead .selead-card .selead-select option,
.selead .selead-card .selead-select optgroup {
  color: #0E1726 !important;
  -webkit-text-fill-color: #0E1726 !important;
  background-color: #FFFFFF !important;
}

/* Dial prefix */
.selead.selead--dark .selead-card .selead-dial { color: var(--se-gold) !important; -webkit-text-fill-color: var(--se-gold) !important; }
.selead.selead--light .selead-card .selead-dial,
.selead.selead--gold .selead-card .selead-dial { color: #07122A !important; -webkit-text-fill-color: #07122A !important; }

/* Consent checkbox stays visible on a dark card in Safari */
.selead .selead-card .selead-consent input[type="checkbox"] {
  accent-color: var(--se-gold);
  -webkit-appearance: checkbox;
  appearance: checkbox;
  opacity: 1 !important;
  filter: none !important;
}

/* ---------- Spacing enforcement ---------------------------------------
   Landing pages routinely open with a universal reset such as
   `.page-wrap * { margin:0; padding:0 }`. That block is written after the
   plugin stylesheet in document order, so on a tie it wins and the form
   loses every bit of its padding — the card collapses to its content and
   the copy runs edge to edge.

   Everything below re-declares the plugin's own spacing at a specificity
   the page reset cannot reach. Same defensive principle as the colour
   rules above: the form must look right no matter what the host page does.
   -------------------------------------------------------------------- */

.selead .selead-card { padding: 30px 28px 26px !important; }
.selead .selead-head { margin: 0 0 18px !important; padding: 0 !important; }
.selead .selead-eyebrow { margin: 0 0 10px !important; padding: 0 !important; }
.selead .selead-title { margin: 0 0 8px !important; padding: 0 !important; }
.selead .selead-sub { margin: 0 !important; padding: 0 !important; }

.selead .selead-form { margin: 0 !important; padding: 0 !important; }
.selead .selead-field { margin: 0 !important; padding: 0 !important; }
.selead .selead-label { margin: 0 !important; padding: 0 !important; }

.selead .selead-input { padding: 11px 14px !important; margin: 0 !important; }
.selead .selead-select { padding: 11px 38px 11px 14px !important; }
.selead .selead-phone .selead-input { padding-left: 62px !important; }
.selead .selead-textarea { padding: 11px 14px !important; min-height: 84px !important; }

.selead .selead-consent { margin: 14px 0 0 !important; padding: 0 !important; }
.selead .selead-consent input[type="checkbox"] { margin: 1px 0 0 !important; padding: 0 !important; }

.selead .selead-btn { margin: 16px 0 0 !important; padding: 15px 22px !important; }
.selead .selead-trigger { margin: 0 !important; padding: 15px 22px !important; }
.selead .selead-btn--link { margin-top: 16px !important; }

.selead .selead-cal { margin: 12px 0 0 !important; padding: 0 !important; }
.selead .selead-avail { margin: 14px 0 0 !important; padding: 0 !important; }
.selead .selead-alert { margin: 14px 0 0 !important; padding: 10px 13px !important; }

.selead .selead-done { padding: 8px 0 4px !important; margin: 0 !important; }
.selead .selead-check { margin: 0 auto 14px !important; }
.selead .selead-done-title { margin: 0 0 6px !important; padding: 0 !important; }
.selead .selead-done-text { margin: 0 !important; padding: 0 !important; }

.selead .selead-shell { margin: 0 !important; }
.selead--display-modal .selead-shell,
.selead--display-sticky .selead-shell { padding: 20px !important; }
.selead .selead-close { padding: 0 !important; margin: 0 !important; }

/* Grid gaps are not affected by margin/padding resets, but a page that
   redefines `gap` on descendants would flatten the layout. */
.selead .selead-grid { gap: 12px !important; }
.selead .selead-field { gap: 6px !important; }

/* ---------- Consent ----------------------------------------------------- */
.selead .selead-consent {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  cursor: pointer;
}
.selead .selead-consent input {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  accent-color: var(--se-gold);
  cursor: pointer;
}

/* ---------- Buttons ----------------------------------------------------- */
.selead .selead-btn,
.selead .selead-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  margin-top: 16px;
  padding: 15px 22px;
  font-family: var(--se-font-display);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  color: var(--se-navy);
  background: var(--se-gold);
  border: none;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(245, 189, 74, .28);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.selead .selead-btn:hover,
.selead .selead-trigger:hover {
  background: var(--se-gold-dark);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(245, 189, 74, .34);
  color: var(--se-navy);
}

.selead .selead-btn:focus-visible,
.selead .selead-trigger:focus-visible,
.selead .selead-input:focus-visible {
  outline: 3px solid rgba(245, 189, 74, .55);
  outline-offset: 2px;
}

.selead .selead-btn[disabled] { opacity: .72; cursor: progress; transform: none; }

.selead-btn-label { display: inline-flex; align-items: center; gap: 10px; color: inherit; }
.selead-wa { flex: 0 0 auto; }

.selead-trigger { width: auto; margin: 0; }
.selead--display-sticky .selead-trigger { margin: 0; }

/* spinner */
.selead-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(7, 18, 42, .3);
  border-top-color: var(--se-navy);
  border-radius: 50%;
  animation: selead-spin .7s linear infinite;
}
.selead-btn.is-loading .selead-btn-label { visibility: hidden; }
.selead-btn.is-loading .selead-spinner { display: block; position: absolute; }
@keyframes selead-spin { to { transform: rotate(360deg); } }

/* ---------- Meta lines -------------------------------------------------- */
.selead .selead-cal {
  display: block;
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 500;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.selead .selead-cal:hover { color: var(--se-gold) !important; }
.selead .selead-cal:hover span { color: var(--se-gold) !important; }

.selead .selead-avail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}
.selead-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3FCF7F;
  box-shadow: 0 0 0 0 rgba(63, 207, 127, .6);
  animation: selead-pulse 2.2s infinite;
}
@keyframes selead-pulse {
  70% { box-shadow: 0 0 0 8px rgba(63, 207, 127, 0); }
  100% { box-shadow: 0 0 0 0 rgba(63, 207, 127, 0); }
}

.selead .selead-alert {
  margin: 14px 0 0;
  padding: 10px 13px;
  font-size: 13.5px;
  line-height: 1.4;
  color: #FFE3E0 !important;
  background: rgba(228, 87, 76, .16);
  border: 1px solid rgba(228, 87, 76, .45);
  border-radius: 10px;
}
.selead--light .selead-alert,
.selead--gold .selead-alert { color: #8E2A22 !important; background: rgba(228, 87, 76, .10); }

/* ---------- Success state ---------------------------------------------- */
.selead-done { position: relative; z-index: 1; text-align: center; padding: 8px 0 4px; }
.selead-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  color: var(--se-navy);
  background: var(--se-gold);
  border-radius: 50%;
}
.selead .selead-done-title {
  font-family: var(--se-font-display);
  font-size: 21px;
  font-weight: 800;
  margin: 0 0 6px;
}
.selead .selead-done-text { font-size: 14.5px; line-height: 1.5; margin: 0; }

/* ---------- Modal ------------------------------------------------------- */
.selead--display-modal .selead-shell,
.selead--display-sticky .selead-shell {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.selead--display-modal .selead-shell[hidden],
.selead--display-sticky .selead-shell[hidden] { display: none; }

.selead--display-modal .selead-backdrop,
.selead--display-sticky .selead-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(7, 18, 42, .70);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.selead--display-modal .selead-card,
.selead--display-sticky .selead-card {
  position: relative;
  z-index: 1;
  margin: auto;
  animation: selead-in .22s ease-out;
}
@keyframes selead-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.selead .selead-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  font-size: 24px;
  line-height: 1;
  color: rgba(255, 255, 255, .8);
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.selead--light .selead-close,
.selead--gold .selead-close { color: rgba(7, 18, 42, .6); }
.selead .selead-close:hover { background: rgba(255, 255, 255, .12); }

/* ---------- Sticky bar -------------------------------------------------- */
.selead--display-sticky > .selead-trigger {
  position: fixed;
  z-index: 99980;
  right: 20px;
  bottom: 20px;
  width: auto;
  box-shadow: 0 14px 34px rgba(7, 18, 42, .30);
}

@media (max-width: 767px) {
  .selead--display-sticky > .selead-trigger {
    left: 14px;
    right: 14px;
    bottom: 14px;
    width: auto;
    border-radius: 16px;
  }
}

/* ---------- Responsive -------------------------------------------------- */
@media (max-width: 600px) {
  .selead-card { padding: 24px 18px 22px; border-radius: 18px; }
  .selead-grid { grid-template-columns: 1fr; }
  .selead .selead-title { font-size: 21px; }
  .selead .selead-avail { font-size: 9.5px; letter-spacing: .06em; }
}

@media (prefers-reduced-motion: reduce) {
  .selead *,
  .selead *::before,
  .selead *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .selead .selead-btn:hover { transform: none; }
}