/*
 * Responder partner signup form - styles.
 *
 * Replaces cp.responder.co.il/partners/css/trial.new.new.css.
 *
 * Everything is scoped under .responder-partner-form so it cannot leak into the
 * affiliate's page, and every colour/size is a custom property on that scope so
 * an affiliate can re-theme without overriding rules. To match their site, set
 * the variables:
 *
 *   .responder-partner-form {
 *     --responder-accent: #c2185b;
 *     --responder-radius: 8px;
 *   }
 *
 * Colours follow the app (src/App.scss): accent #0167F4, hover #389CFF,
 * error #FF0D0D.
 */

.responder-partner-form {
  --responder-accent: #0167f4;
  --responder-accent-hover: #389cff;
  --responder-error: #ff0d0d;
  --responder-text: #1a1a1a;
  --responder-label: #333333;
  --responder-border: #d8d8d8;
  --responder-bg: transparent;
  --responder-field-bg: #ffffff;
  --responder-radius: 2px;
  --responder-gap: 18px;
  /* Shared by the input and by the stand-in placeholder painted over it, so the
     two can never drift out of vertical alignment. */
  --responder-field-height: 42px;
  /* An explicit stack rather than `inherit`: a host page with no font-family of
     its own would otherwise fall back to the browser default, which is a serif
     on most desktops and looks nothing like the app. Arial/Helvetica carry
     Hebrew everywhere. Affiliates who want their own face set --responder-font
     (use `inherit` to pick up the surrounding page). */
  --responder-font: system-ui, -apple-system, "Segoe UI", Arial, Helvetica, sans-serif;

  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 420px;
  /* Centred in whatever container the affiliate drops it into. `margin: 0`
     would pin it to the start edge of a full-width parent. */
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  background: var(--responder-bg);
  font-family: var(--responder-font);
  color: var(--responder-text);
  /* Stated here as well as via dir="rtl" in the markup, so the form still lays
     out correctly if an affiliate drops the attribute when pasting. */
  direction: rtl;
  text-align: right;
}

.responder-partner-form *,
.responder-partner-form *::before,
.responder-partner-form *::after {
  box-sizing: inherit;
}

/* ---------- fields ---------- */

.responder-partner-form .responder-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--responder-gap);
}

.responder-partner-form label {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--responder-label);
  text-align: right;
}

.responder-partner-form input[type="text"],
.responder-partner-form input[type="tel"],
.responder-partner-form input[type="email"] {
  width: 100%;
  height: var(--responder-field-height);
  padding: 0 12px;
  font-family: inherit;
  font-size: 16px; /* 16px keeps iOS Safari from zooming on focus */
  /* Set directly on the input, NOT inherited from the form. An inherited value
     loses to any rule that targets the input directly - the browser's own UA
     stylesheet, or a reset on the affiliate's page such as
     `input { text-align: left }`. Stating it here is what makes the RTL
     placeholders survive being embedded in someone else's stylesheet. */
  direction: rtl;
  text-align: right;
  color: var(--responder-text);
  background: var(--responder-field-bg);
  border: 1px solid var(--responder-border);
  border-radius: var(--responder-radius);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.responder-partner-form input::placeholder {
  color: #9a9a9a;
  opacity: 1;
}

/* ---------- typed-value alignment (phone / email) ---------- */

/* The form is RTL for the Hebrew labels and placeholders, but a phone number
   and an email address are Latin content: both are typed left-to-right and are
   aligned to the LEFT once they have a value.

   `:not(:placeholder-shown)` is what keeps the two states apart. It matches
   only when the field has content, so the empty state is untouched and the
   Hebrew placeholders ("מספר טלפון", "כתובת דואר אלקטרוני…") keep the
   right alignment they inherit from the RTL form. Do not move these
   declarations onto the base input rule; that would drag the placeholders
   left along with the values.

   Consequence worth knowing: on an empty field the caret starts at the right,
   with the placeholder, and shifts left on the first keystroke. That is the
   cost of right-aligned Hebrew placeholders - a field cannot render its
   placeholder right and its caret left at the same time, and `::placeholder`
   cannot be given its own `text-align` (the spec allows only inherited-text
   properties like font and colour on that pseudo-element).

   `direction: ltr` accompanies the alignment so a typed "+972…" or an email
   keeps its characters in the order they were typed rather than being
   reordered by the surrounding RTL context. */
.responder-partner-form input[name="phone"]:not(:placeholder-shown),
.responder-partner-form input[name="email"]:not(:placeholder-shown) {
  direction: ltr;
  text-align: left;
}

/* ---------- left caret with a right-aligned placeholder ---------- */

/* The rule above handles the typed value, but on an EMPTY field the caret still
   sits on the right, next to the placeholder - a placeholder is painted at the
   text insertion point, so the two cannot be separated by alignment alone.
   `responder-enhanced` is added by the script once it has replaced the native
   placeholders on these two fields with the positioned span below. Only then is
   it safe to turn the real ones transparent and flip the input to LTR, which is
   what moves the caret to the left edge. Without the script the class is absent,
   the native placeholders stay visible, and the form is plain RTL. */
.responder-partner-form .responder-input-wrap {
  position: relative;
  display: block;
  width: 100%;
}

.responder-partner-form.responder-enhanced input[name="phone"],
.responder-partner-form.responder-enhanced input[name="email"] {
  direction: ltr;
  text-align: left;
}

.responder-partner-form.responder-enhanced input[name="phone"]::placeholder,
.responder-partner-form.responder-enhanced input[name="email"]::placeholder {
  color: transparent;
}

.responder-partner-form .responder-placeholder {
  position: absolute;
  /* Inset matches the input's horizontal padding so the stand-in lands exactly
     where a native placeholder would. */
  top: 0;
  right: 12px;
  bottom: 0;
  left: 12px;
  direction: rtl;
  text-align: right;
  /* Vertically centred without flexbox, so `text-overflow` still works - the
     email placeholder is long enough to need it on narrow screens. */
  line-height: var(--responder-field-height);
  color: #9a9a9a;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Clicks must reach the input underneath. */
  pointer-events: none;
}

/* Gone the moment the field has content, mirroring native behaviour. */
.responder-partner-form input:not(:placeholder-shown) ~ .responder-placeholder {
  display: none;
}

.responder-partner-form input:hover:not(:disabled) {
  border-color: #b5b5b5;
}

.responder-partner-form input:focus {
  border-color: var(--responder-accent);
  box-shadow: 0 0 0 3px rgba(1, 103, 244, 0.15);
}

/* Set by the script alongside the message, so the field itself reads as wrong
   and not only the text beneath it. */
.responder-partner-form input.responder-invalid {
  border-color: var(--responder-error);
}

.responder-partner-form input.responder-invalid:focus {
  box-shadow: 0 0 0 3px rgba(255, 13, 13, 0.15);
}

.responder-partner-form input:disabled {
  background: #f4f4f4;
  color: #8a8a8a;
  cursor: not-allowed;
}

/* ---------- errors ---------- */

.responder-partner-form .responder-error {
  font-size: 13px;
  line-height: 1.4;
  color: var(--responder-error);
  direction: rtl;
  text-align: right;
}

/* ---------- submit ---------- */

.responder-partner-form .responder-submit {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.responder-partner-form button[type="submit"] {
  position: relative;
  width: 100%;
  min-height: 44px;
  padding: 0 20px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
  background: var(--responder-accent);
  border: 1px solid var(--responder-accent);
  border-radius: var(--responder-radius);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.responder-partner-form button[type="submit"]:hover:not(:disabled),
.responder-partner-form button[type="submit"]:focus-visible:not(:disabled) {
  background: var(--responder-accent-hover);
  border-color: var(--responder-accent-hover);
}

.responder-partner-form button[type="submit"]:disabled {
  opacity: 0.65;
  cursor: default;
}

/* While pre-register is in flight the script sets this on the form and disables
   the button; show a spinner so a slow network does not look like a dead click. */
.responder-partner-form[data-responder-submitting="true"] button[type="submit"] {
  color: transparent;
}

.responder-partner-form[data-responder-submitting="true"] button[type="submit"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: responder-spin 0.7s linear infinite;
}

@keyframes responder-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .responder-partner-form input,
  .responder-partner-form button[type="submit"] {
    transition: none;
  }
  .responder-partner-form[data-responder-submitting="true"] button[type="submit"]::after {
    animation-duration: 2s;
  }
}

/* ---------- dark surroundings (opt-in) ---------- */

/* Deliberately NOT keyed off `prefers-color-scheme`. That media query reports
   the visitor's OS preference, which says nothing about the background of the
   page this form is embedded in - a light affiliate site would render a dark
   form for any visitor whose OS is set to dark, on a white background.
   An embedded widget cannot detect its host's background, so the affiliate
   opts in explicitly:
       <form class="responder-partner-form responder-dark" ...>
   The accent and error colours stay put so it still reads as Responder's. */
.responder-partner-form.responder-dark {
  --responder-text: #f2f2f2;
  --responder-label: #d8d8d8;
  --responder-border: #4a4a4a;
  --responder-field-bg: #1c1c1c;
}

.responder-partner-form.responder-dark input::placeholder {
  color: #7d7d7d;
}

.responder-partner-form.responder-dark input:hover:not(:disabled) {
  border-color: #6a6a6a;
}

.responder-partner-form.responder-dark input:disabled {
  background: #2a2a2a;
  color: #7d7d7d;
}