/* ===== file: /assets/css/signup.css =====
   SIGNUP — PREMIUM CENTERED + COUNTRY SELECTOR
   ✅ Keep premium centered layout
   ✅ Add phone country selector with flags + dial code
   ✅ Dropdown visible above card
   ✅ Desktop long country names fixed
   ✅ Mobile preserved
==================================================== */

:root {
  --su-mini-h: 52px;
  --su-radius-xl: 24px;
  --su-radius-lg: 16px;

  --su-msg-info: #334155;
  --su-msg-err: #b91c1c;
  --su-msg-ok: #166534;

  --su-msg-bg: rgba(15, 23, 42, 0.05);
  --su-msg-br: rgba(15, 23, 42, 0.12);
}

/* =========================
   SCROLL
========================= */
html,
body {
  height: 100%;
}

body.signup-page {
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) rgba(2, 6, 23, 0.25);
}

body.signup-page::-webkit-scrollbar {
  width: 10px;
}

body.signup-page::-webkit-scrollbar-track {
  background: rgba(2, 6, 23, 0.25);
}

body.signup-page::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  border: 2px solid rgba(2, 6, 23, 0.25);
}

body.signup-page::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.38);
}

/* =========================
   Background
========================= */
.su-bg {
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  /* Base crème douce derrière le motif estompé. */
  background: #f7f4ec;
}

.su-bg__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: none !important;
  transform: translateZ(0);
  /* Motif marocain estompé (option 1) → la carte ressort, identité conservée. */
  opacity: 0.35;
}

/* Voile blanc doux PAR-DESSUS le motif (::after passe devant l'image dans le
   contexte d'empilement de .su-bg) → adoucit encore et fait ressortir la carte. */
.su-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(247, 244, 236, 0.62));
}

.su-bg__overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: transparent;
}

.su-bg__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.08;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* =========================
   Center layout
========================= */
.su-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  /* safe center : centre verticalement, mais si le formulaire est plus haut que
     l'écran il ne se fait pas rogner sous le navbar fixe (le haut reste visible
     et la page scrolle). Espace réservé en haut = hauteur du navbar. */
  align-content: safe center;
  padding: calc(var(--topbar-h, 74px) + 14px) 14px 14px;
}

.su-shell {
  width: min(680px, 100%);
  display: grid;
  /* Gap plus visible (14px) — sans ça, le header et la card (même fond
     vert sombre) semblent collés en une seule grosse boîte. */
  gap: 14px;
}

/* =========================
   Mini header
========================= */
.su-mini {
  min-height: var(--su-mini-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--su-radius-lg);
  /* Fond sombre solide (vert forêt, accord avec la marque VECTRA) :
     fait ressortir le texte blanc sur le fond beige à motifs marocains. */
  background: #0e3b2a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
  transform: translateY(18px);
  opacity: 0;
  animation: suFadeUp 0.75s ease-out forwards;
}

@keyframes suFadeUp {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.su-mini__brand,
.su-mini__right {
  min-width: 0;
}

.su-mini__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.96);
  flex: 1 1 auto;
}

.su-mini__logo {
  width: auto;
  height: 36px;
  max-width: 140px;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
  border: none;
  box-shadow: none;
  flex: 0 0 auto;
}

.su-mini__name {
  font-weight: 1000;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.su-mini__right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.su-mini__badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 1000;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.95);
  /* Sur le mini header vert sombre, le badge utilise un blanc translucide
     plus marqué pour rester visible. */
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  white-space: nowrap;
}

.su-mini__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-weight: 1000;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.98);
  text-decoration: none;
  white-space: nowrap;
  background: linear-gradient(90deg, rgba(0, 128, 55, 0.55), rgba(34, 193, 195, 0.45));
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: 0.18s ease;
}

.su-mini__back:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  background: linear-gradient(90deg, rgba(0, 128, 55, 0.45), rgba(34, 193, 195, 0.38));
}

/* =========================
   Card
========================= */
.su-card {
  position: relative;
  border-radius: var(--su-radius-xl);
  overflow: visible;
  /* Carte claire « frosted » (verre dépoli) — cohérente avec login/forgot/reset,
     très lisible sur le fond beige à motifs marocains. */
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .9);
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow:
    0 28px 64px rgba(2, 6, 23, .16),
    0 10px 24px rgba(2, 6, 23, .08);
  transform: translateY(18px);
  opacity: 0;
  animation: suFadeUp 0.75s ease-out forwards;
}

/* Barre dégradée du haut retirée — redondante avec le fond vert sombre uni
   de la card. Garde le visuel propre et aéré. */
.su-card::before {
  content: none;
}

.su-card__head {
  text-align: center;
  padding: 14px 28px 0;
}

.su-title {
  margin: 2px 0 0;
  font-size: 26px;
  font-weight: 900;
  color: #0b1b48;
  letter-spacing: 0.2px;
}

.su-subtitle {
  margin: 4px 0 0;
  color: #475569;
  font-size: 12.5px;
  line-height: 1.45;
}

/* =========================
   Form
========================= */
.su-form {
  position: relative;
  padding: 12px 28px 18px;
  display: grid;
  gap: 10px;
  overflow: visible;
}

.su-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.su-row .field {
  flex: 1 1 0;
}

.field {
  position: relative;
  overflow: visible;
}

.field label {
  display: block;
  margin-bottom: 4px;
  font-weight: 900;
  color: #0f172a;
  font-size: 13px;
}

.field input,
.field select {
  width: 100%;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, .14);
  background: #ffffff;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  outline: none;
  padding: 0 14px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  font-size: 15px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  letter-spacing: normal;
}

.input-ltr {
  direction: ltr;
  text-align: left;
}

.field input::placeholder {
  color: rgba(15, 23, 42, 0.55) !important;
  -webkit-text-fill-color: rgba(15, 23, 42, 0.55) !important;
}

/* error sous un champ (ex: tأكيد كلمة المرور) */
.signup-page .field-error {
  margin: 4px 0 0;
  min-height: 0;
  font-size: 12px;
  font-weight: 800;
  color: #dc2626;
  text-align: right;
}
[dir="ltr"] .signup-page .field-error { text-align: left; }
.signup-page .field-error:empty { display: none; }

/* Style des champs en erreur — visuel cohérent avec login */
.signup-page .field input.is-invalid,
.signup-page .field select.is-invalid,
.signup-page .su-country-trigger.is-invalid {
  border-color: rgba(248, 113, 113, 0.95);
  box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.16);
}

/* iOS Safari : supprimer le fond jaune autofill */
.signup-page input:-webkit-autofill,
.signup-page input:-webkit-autofill:hover,
.signup-page input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0.95) inset !important;
  -webkit-text-fill-color: #0f172a !important;
  transition: background-color 5000s ease-in-out 0s;
}

.field input:focus,
.field select:focus {
  border-color: rgba(0, 128, 55, 0.85);
  box-shadow: 0 0 0 4px rgba(0, 128, 55, 0.18);
  background: rgba(255, 255, 255, 0.99);
  transform: translateY(-1px);
}

/* =========================
   PHONE FIELD + COUNTRY SELECTOR
========================= */
.su-phone-field {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 12px;
  direction: ltr;
  align-items: stretch;
  overflow: visible;
}

.su-phone-field>* {
  min-width: 0;
}

.su-country-select {
  position: relative;
  z-index: 60;
  min-width: 0;
  overflow: visible;
}

.su-country-trigger {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, .14);
  background: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  font: inherit;
  color: #0f172a;
  transition: 0.18s ease;
}

.su-country-trigger:hover {
  background: rgba(255, 255, 255, 0.99);
}

.su-country-trigger:focus-visible {
  outline: none;
  border-color: rgba(0, 128, 55, 0.85);
  box-shadow: 0 0 0 4px rgba(0, 128, 55, 0.18);
  transform: translateY(-1px);
}

.su-country-trigger-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.su-country-flag {
  width: 28px;
  height: 20px;
  object-fit: cover;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.10);
  flex: 0 0 auto;
}

.su-country-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  direction: ltr;
}

/* Indicatif dans un petit conteneur vert (bien visible). */
.su-country-dial {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 1000;
  color: #008037;
  white-space: nowrap;
  background: rgba(0, 128, 55, 0.10);
  border: 1px solid rgba(0, 128, 55, 0.18);
  padding: 2px 7px;
  border-radius: 7px;
}

.su-country-name {
  display: block;
  min-width: 0;
  font-size: 13px;
  font-weight: 900;
  color: #334155;
  direction: rtl;
  text-align: left;
  unicode-bidi: plaintext;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.su-country-caret {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 9px solid #1e293b;
  flex: 0 0 auto;
  transition: transform 0.18s ease;
}

.su-country-select.open .su-country-caret {
  transform: rotate(180deg);
}

.su-country-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 9999;
  display: none;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 18px 44px rgba(2, 6, 23, 0.22);
}

.su-country-select.open .su-country-menu {
  display: block;
}

.su-country-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border: 0;
  background: transparent;
  border-radius: 14px;
  cursor: pointer;
  font: inherit;
  transition: 0.16s ease;
}

.su-country-option:hover {
  background: rgba(0, 128, 55, 0.08);
}

.su-country-option:focus-visible {
  outline: none;
  background: rgba(0, 128, 55, 0.12);
}

.su-country-option.is-active {
  background: rgba(0, 128, 55, 0.12);
}

.su-country-option-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
  direction: ltr;
}

.su-country-option-name {
  min-width: 0;
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 900;
  color: #0f172a;
  direction: rtl;
  text-align: right;
  unicode-bidi: plaintext;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.su-country-option-dial {
  font-size: 14px;
  font-weight: 1000;
  color: #008037;
  white-space: nowrap;
}

#phone {
  direction: ltr;
  text-align: left;
  unicode-bidi: plaintext;
}

/* =========================
   password
========================= */
.su-pass {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.su-pass input {
  flex: 1 1 auto;
}

/* Supprimer le bouton natif "afficher le mot de passe" du navigateur */
.signup-page input[type="password"]::-ms-reveal,
.signup-page input[type="password"]::-ms-clear {
  display: none;
}
.signup-page input::-webkit-credentials-auto-fill-button,
.signup-page input::-webkit-contacts-auto-fill-button {
  display: none !important;
  pointer-events: none;
}

/* PASSWORD SHOW/HIDE TOGGLE */
.signup-page .pass-wrap {
  position: relative;
}

.signup-page .pass-wrap input {
  padding-inline-end: 48px;
}

.signup-page .pass-toggle {
  position: absolute;
  top: 50%;
  inset-inline-end: 6px;
  transform: translateY(-50%);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;

  color: rgba(15, 23, 42, .45);
  transition: color .18s ease, background .18s ease, transform .12s ease;

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.signup-page .pass-toggle:hover {
  color: rgba(0, 128, 55, .95);
  background: rgba(0, 128, 55, .08);
}

.signup-page .pass-toggle:active {
  transform: translateY(-50%) scale(.94);
}

.signup-page .pass-toggle.is-on {
  color: rgba(0, 128, 55, 1);
  background: rgba(0, 128, 55, .10);
}

.signup-page .pass-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 128, 55, .25);
}

.su-hint {
  margin-top: -6px;
  color: #475569;
  font-weight: 800;
  font-size: 12.5px;
}

/* =========================
   button
========================= */
.su-btn {
  height: 44px;
  border-radius: 14px;
  font-weight: 1000;
  font-size: 14.5px;
  border: none;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #0f766e, #0891b2);
  box-shadow: 0 18px 36px rgba(8, 145, 178, 0.28);
  transition: 0.22s ease;
  margin-top: 4px;
}

.su-btn:hover {
  transform: translateY(-2px) scale(1.01);
  filter: brightness(1.06);
  box-shadow:
    0 22px 44px rgba(8, 145, 178, 0.38),
    0 0 0 4px rgba(8, 145, 178, 0.14);
}

.su-btn:disabled {
  opacity: 0.75;
  cursor: not-allowed;
  transform: none !important;
  filter: none !important;
}

/* =========================
   message
========================= */
.su-msg {
  min-height: 0;
  margin: 8px 0 0;
  text-align: center;
  font-weight: 700;
  white-space: pre-line;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--su-msg-bg);
  border: 1px solid var(--su-msg-br);
  color: var(--su-msg-info);
}

.su-msg:empty {
  display: none;
}

.su-msg[data-type="info"] {
  color: var(--su-msg-info);
}

.su-msg[data-type="error"] {
  color: var(--su-msg-err);
  background: rgba(254, 226, 226, 0.95);
  border-color: rgba(252, 165, 165, 0.9);
}

.su-msg[data-type="success"] {
  color: var(--su-msg-ok);
  background: rgba(240, 253, 244, 0.95);
  border-color: rgba(134, 239, 172, 0.9);
}

/* =========================
   footer note
========================= */
.su-foot {
  margin: 6px 0 0;
  text-align: center;
  color: #475569;
  font-size: 13px;
}

.su-foot a {
  color: #0f766e;
  text-decoration: underline;
}

/* Boutons en forme de lien (écran OTP : renvoyer le code / modifier les infos) */
.su-linklike {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  color: #0f766e;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.su-linklike:hover { color: #0b5e57; }
.su-linklike:disabled { color: #94a3b8; cursor: not-allowed; text-decoration: none; }

.su-glow {
  position: absolute;
  inset: auto 0 0 0;
  height: 92px;
  background: radial-gradient(260px 92px at 50% 100%, rgba(0, 128, 55, 0.18), transparent 65%);
  pointer-events: none;
}

/* =========================
   Desktop fine tuning
========================= */
@media (min-width: 641px) {
  .su-country-trigger {
    height: 44px;
    padding: 0 14px;
  }

  .su-country-trigger-main {
    gap: 8px;
  }

  .su-country-meta {
    gap: 6px;
  }

  .su-country-dial,
  .su-country-option-dial {
    font-size: 13px;
  }

  .su-country-name,
  .su-country-option-name {
    font-size: 13px;
  }
}

/* =========================
   Mobile
========================= */
@media (max-width: 640px) {
  .su-phone-field {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .su-country-menu {
    max-height: 260px;
  }
}

@media (max-width: 520px) {
  /* Plus d'espace sur les côtés (comme login) — la card respire.
     Padding-top = hauteur du navbar fixe mobile. */
  .su-wrap {
    padding: calc(var(--topbar-h, 64px) + 4px) 18px 8px;
    place-items: center;
  }

  .su-mini {
    border-radius: 14px;
    padding: 6px 8px;
    gap: 7px;
  }

  .su-mini__badge {
    display: none !important;
  }

  /* Logo + bouton retour plus compacts (comme login). */
  .su-mini__logo {
    height: 30px;
    max-width: 110px;
  }

  .su-mini__back {
    height: 30px;
    padding: 0 9px;
    font-size: 11.5px;
  }

  .su-mini__brand {
    flex: 1 1 auto;
  }

  .su-mini__name {
    font-size: 12.5px;
    max-width: 100%;
  }

  .su-card__head {
    padding: 12px 14px 0;
  }

  .su-title {
    font-size: 21px;
  }

  .su-subtitle {
    font-size: 11.5px;
    line-height: 1.4;
    padding: 0 4px;
  }

  .su-form {
    padding: 10px 14px 14px;
    gap: 7px;
  }

  .su-row {
    flex-direction: column;
  }

  /* Champs un poil plus petits (40px) — cohérent avec login. */
  .field input,
  .field select {
    height: 40px;
    border-radius: 11px;
    font-size: 14px;
  }

  .field label {
    font-size: 13px;
    margin-bottom: 3px;
  }

  /* Country trigger et téléphone alignés sur la hauteur des champs. */
  .su-country-trigger,
  #phone {
    height: 40px;
  }

  .su-country-name,
  .su-country-option-name,
  .su-country-dial,
  .su-country-option-dial {
    font-size: 12.5px;
  }

  .su-btn {
    height: 40px;
    font-size: 13.5px;
    margin-top: 4px;
  }

  .su-msg {
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 13px;
  }

  .su-foot {
    margin-top: 8px;
    margin-bottom: 4px;
    font-size: 12.5px;
  }

  /* Texte des conditions plus compact. */
  .su-terms__text {
    font-size: 12.5px;
    line-height: 1.4;
  }
}

@media (max-width: 380px) {
  .su-mini__back {
    height: 28px;
    padding: 0 8px;
    font-size: 11px;
  }

  .su-wrap {
    padding: calc(var(--topbar-h, 60px) + 6px) 14px 8px;
  }

  .su-title {
    font-size: 19px;
  }
}

/* =========================
   TERMS CHECKBOX
========================= */
.su-terms {
  margin-bottom: 4px;
}

.su-terms__label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.su-terms__checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.su-terms__box {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 6px;
  border: 2px solid rgba(15, 23, 42, 0.30);
  background: rgba(15, 23, 42, 0.04);
  transition: border-color 0.2s, background 0.2s;
  position: relative;
}

.su-terms__box::after {
  content: "";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center/12px no-repeat;
}

.su-terms__checkbox:checked + .su-terms__box {
  background: #0f766e;
  border-color: #0f766e;
}

.su-terms__checkbox:checked + .su-terms__box::after {
  opacity: 1;
}

.su-terms__label:hover .su-terms__box {
  border-color: rgba(15, 23, 42, 0.5);
}

.su-terms__text {
  font-size: 14px;
  color: #475569;
  line-height: 1.5;
}

.su-terms__link {
  color: #0f766e;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.su-terms__link:hover {
  color: #0f766e;
}

.su-terms__error {
  min-height: 0;
  font-size: 12.5px;
  color: var(--su-msg-err);
  margin-top: 6px;
  padding-right: 30px;
}
.su-terms__error:empty { display: none; }

.su-terms--error .su-terms__box {
  border-color: var(--su-msg-err);
  background: rgba(255, 77, 79, 0.12);
}

.su-terms--error .su-terms__text {
  color: #0f172a;
}

[dir="ltr"] .signup-page .field label { text-align: left; }
/* .su-foot (footers « déjà un compte ? » + « Renvoyer / Modifier ») : centré dans les
   deux langues (la base .su-foot{text-align:center} s'applique aussi en FR). */
[dir="ltr"] .signup-page .su-terms__error { padding-right: 0; padding-left: 30px; }

/* FR (LTR), UNIQUEMENT en 2 colonnes (≥641px) : input à gauche (sous le label
   « Téléphone »), indicatif à droite. En mobile (≤640px) le champ s'empile normalement
   (indicatif en haut, input en bas), exactement comme login. L'arabe reste inchangé. */
@media (min-width: 641px) {
  [dir="ltr"] .signup-page .su-phone-field {
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  }
  [dir="ltr"] .signup-page .su-phone-field > #phone { order: 1; }
  [dir="ltr"] .signup-page .su-phone-field > #countrySelect { order: 2; }
}