/* ════════════════════════════════════════════════════════════════════
   carrier-rtl.css — RTL (arabe) + animations pour transporteurs.html
   ────────────────────────────────────────────────────────────────────
   Chargé UNIQUEMENT par transporteurs.html (jamais par index.html).
   Toutes les règles qui touchent des classes partagées avec index.html
   sont préfixées par [dir="rtl"] : le fichier est donc inerte (et la page
   d'accueil LTR intacte) même s'il était chargé ailleurs par erreur.
   Les classes spécifiques à cette page (.otp-*, .reveal, .lbl-fr) ne
   peuvent pas fuiter — elles n'existent pas ailleurs.
   ════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   CRITICAL RTL FIX — blank white page on mobile (Android / narrow viewport).
   ───────────────────────────────────────────────────────────────────────
   ROOT CAUSE: the anti-spam honeypot in style.css hides its field with
       .hp-field { position: absolute; left: -9999px; }
   In LTR (index.html) that overflows harmlessly off the left edge and is
   clipped. In RTL the inline-start flips: `left: -9999px` makes the document
   ~10 500px wide and the browser anchors the initial scroll to the empty side,
   so the whole page paints WHITE on narrow widths. Desktop hid it because the
   wide viewport absorbed the offset.

   FIX: re-hide the honeypot with a direction-agnostic "visually-hidden"
   technique that does NOT overflow the page in either writing direction.
   Scoped to [dir="rtl"] → index.html is untouched.
   ═══════════════════════════════════════════════════════════════════════ */
[dir="rtl"] .hp-field {
  position: absolute !important;
  left: auto !important;          /* cancel the -9999px from style.css */
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Defence-in-depth: clip any other stray horizontal overflow in RTL without
   breaking the sticky header (clip, unlike hidden, creates no scroll container). */
html[dir="rtl"],
[dir="rtl"] body {
  overflow-x: clip;
  max-width: 100%;
}

/* ── Typographie arabe (Cairo) ──────────────────────────────────────── */
[dir="rtl"] body,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] .btn,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea,
[dir="rtl"] .section-tag,
[dir="rtl"] .hero__badge {
  font-family: 'Cairo', 'Poppins', sans-serif;
}

/* Petits sous-libellés français sous les labels arabes (repère bilingue) */
.lbl-fr {
  display: inline-block;
  margin-inline-start: 5px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: .72rem;
  color: #9aa4b1;
  direction: ltr;
  unicode-bidi: isolate;
}

/* ── Corrections directionnelles (classes partagées → scope [dir=rtl]) ─ */

/* Le bouton CTA du header : poussé vers le bord de fin (inline-start logique
   déjà géré en HTML via margin-inline-start). Rien à faire ici. */

/* Flèche des étapes « comment ça marche » : doit pointer vers la gauche
   (sens de lecture RTL). La flèche est le caractère → dans .hiw__connector-arrow. */
[dir="rtl"] .hiw__connector-arrow {
  transform: scaleX(-1);
  display: inline-block;
}

/* Immatriculation 123 [TN] 4567 : reste en LTR pour ne pas inverser la plaque.
   (L'ordre DOM est inchangé → FormData identique : imm1 puis imm2.) */
[dir="rtl"] .imm-input { direction: ltr; }

/* Numéros/Emails latins : contenu LTR mais aligné au bord de début (droite). */
[dir="rtl"] #phone,
[dir="rtl"] #email {
  direction: ltr;
  text-align: right;
}

/* Liste à puces du panneau de succès : alignée à droite en RTL. */
[dir="rtl"] .success-panel .check-list { text-align: right; }

/* ── Étape OTP (champ de vérification du numéro) ────────────────────── */
.otp-panel {
  background: var(--white);
  border: 1px solid rgba(235,185,95,.4);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: var(--shadow);
  text-align: center;
}
.otp-panel__icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  background: rgba(235,185,95,.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.otp-panel h3 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
}
.otp-panel > p {
  font-size: .95rem;
  color: #5a6472;
  line-height: 1.7;
  margin-bottom: 20px;
}
.otp-panel > p #otpPhone {
  direction: ltr;
  unicode-bidi: isolate;
  color: var(--navy);
}

/* Le champ code : grand, centré, chiffres latins espacés, toujours LTR. */
.otp-code-input {
  display: block;
  width: 100%;
  max-width: 280px;
  margin: 8px auto 16px;
  padding: 14px 12px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: .35em;
  direction: ltr;
  color: var(--navy);
  background: var(--cream);
  border: 1.5px solid rgba(62,73,87,.18);
  border-radius: var(--radius-sm);
  outline: none;
  transition: var(--transition);
}
.otp-code-input:focus {
  border-color: var(--gold);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(235,185,95,.18);
}

/* Lien « renvoyer le code » + état du compte à rebours */
.otp-resend {
  margin-top: 14px;
  background: none;
  border: none;
  padding: 4px 8px;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  color: #b07c1a;
  cursor: pointer;
}
.otp-resend:hover:not(:disabled) { text-decoration: underline; }
.otp-resend:disabled { color: #9aa4b1; cursor: default; }

/* Bouton en cours de chargement (on ne touche pas au textContent). */
.btn.is-loading { opacity: .65; pointer-events: none; }

/* ── Animations : apparition au scroll ──────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* FAQ : ouverture en douceur (le natif <details> ferme instantanément). */
details.faq-item[open] .faq-item__answer {
  animation: faqReveal .26s ease;
}
@keyframes faqReveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* Micro-interactions */
[dir="rtl"] .vehicle-card { transition: var(--transition), transform .15s ease; }
[dir="rtl"] .vehicle-card:hover,
[dir="rtl"] .vehicle-card:has(input:checked) { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }

/* Léger flottement de la carte illustration du hero (vie). */
.illus-card--carrier { animation: carrierFloat 5s ease-in-out infinite; }
@keyframes carrierFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* ── Mobile (≤ 768px) ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* En colonne, les connecteurs pointent vers le bas (.hiw__connector
     tourne de 90°). On annule le scaleX(-1) de la flèche pour qu'elle
     pointe bien vers le bas (et non vers le haut) en RTL. */
  [dir="rtl"] .hiw__connector-arrow { transform: none; }
}

/* ── Floating contact widget (Messenger) ───────────────────────────── */
.float-contact {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 900;
}
.float-contact__label {
  font-family: 'Cairo', 'Poppins', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  color: var(--navy);
  background: var(--white);
  padding: 3px 12px;
  border-radius: 99px;
  box-shadow: 0 2px 10px rgba(0,0,0,.14);
  white-space: nowrap;
}
.float-contact__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
  transition: transform .15s ease, box-shadow .15s ease;
  text-decoration: none;
}
.float-contact__btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.float-contact__btn--msg { background: #0084FF; }

/* ── Préférence « réduire les animations » ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  details.faq-item[open] .faq-item__answer { animation: none !important; }
  .illus-card--carrier { animation: none !important; }
  [dir="rtl"] .vehicle-card,
  .btn,
  .float-contact__btn { transition: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════
   NEW GRAPHIC ELEMENTS — v2.0 (Carrier persona: trust + identity)
   All additions scoped carefully to avoid affecting index.html.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Mission notification card (hero overlay) ───────────────────────── */
/* Floating live-mission card above the driver card — makes the app feel real */
.mission-notif {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1.5px solid var(--gold, #EBB95F);
  border-radius: 16px;
  padding: 10px 14px;
  box-shadow: 0 8px 28px rgba(235,185,95,.28);
  margin-bottom: -18px;
  margin-inline: auto;
  max-width: 270px;
  z-index: 2;
  animation: notifSlideIn .55s cubic-bezier(.22,.68,0,1.2) .4s both;
}
@keyframes notifSlideIn {
  from { opacity: 0; transform: translateY(-14px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
/* Pulsing green "live" dot */
.mission-notif__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.2);
  flex-shrink: 0;
  animation: dotPulse 2.2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
  50%      { box-shadow: 0 0 0 7px rgba(34,197,94,.07); }
}
.mission-notif__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mission-notif__label {
  font-family: 'Cairo', 'Poppins', sans-serif;
  font-weight: 700;
  font-size: .83rem;
  color: var(--navy, #1A2332);
  white-space: nowrap;
}
.mission-notif__route {
  font-family: 'Cairo', 'Poppins', sans-serif;
  font-size: .74rem;
  color: #6b7280;
  white-space: nowrap;
}
.mission-notif__price {
  background: linear-gradient(135deg, var(--gold, #EBB95F), var(--gold2, #F5A962));
  color: var(--navy, #1A2332);
  font-family: 'Cairo', 'Poppins', sans-serif;
  font-weight: 800;
  font-size: .88rem;
  padding: 5px 11px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Social proof ticker ─────────────────────────────────────────────── */
/* Infinite horizontal scroll of beta driver quotes — navy bg for contrast */
.proof-ticker {
  background: linear-gradient(135deg, var(--navy, #1A2332) 0%, #253347 100%);
  padding: 15px 0;
  overflow: hidden;
  position: relative;
}
/* Force LTR on the ticker container so overflow and transform go left→right.
   Arabic text inside .proof-item still renders correctly via Unicode BiDi. */
.proof-ticker {
  direction: ltr;
}

/* Fade edges for smooth entry/exit */
.proof-ticker::before,
.proof-ticker::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.proof-ticker::before {
  right: 0;
  background: linear-gradient(to left, var(--navy, #1A2332), transparent);
}
.proof-ticker::after {
  left: 0;
  background: linear-gradient(to right, var(--navy, #1A2332), transparent);
}
/* LTR direction so translateX(-50%) scrolls conventionally left */
.proof-ticker__track {
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  direction: ltr;              /* override RTL for the scroll mechanic */
  animation: tickerScroll 38s linear infinite;
}
@keyframes tickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.proof-item {
  font-family: 'Cairo', 'Poppins', sans-serif;
  font-size: .83rem;
  color: rgba(249,246,241,.82);
  white-space: nowrap;
  flex-shrink: 0;
}
.proof-item strong {
  color: var(--gold, #EBB95F);
  font-weight: 700;
}
.proof-divider {
  color: rgba(235,185,95,.35);
  font-size: 1rem;
  flex-shrink: 0;
  user-select: none;
}

/* ── "Made in Tunisia" team tag ──────────────────────────────────────── */
.tunisia-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(235,185,95,.1);
  border: 1px solid rgba(235,185,95,.3);
  color: var(--char, #3E4957);
  font-family: 'Cairo', 'Poppins', sans-serif;
  font-size: .8rem;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 99px;
  margin-bottom: 14px;
}

/* ── Payment guarantee flow ──────────────────────────────────────────── */
/* 3-step visual that answers "how is it guaranteed?" before the form */
.pay-flow {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  background: var(--navy, #1A2332);
  border-radius: 22px;
  padding: 22px 20px;
  margin-bottom: 28px;
  max-width: 560px;
  margin-inline: auto;
  flex-wrap: nowrap;
}
.pay-flow__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  color: rgba(249,246,241,.78);
  font-family: 'Cairo', 'Poppins', sans-serif;
  font-size: .8rem;
  line-height: 1.45;
  flex: 1;
  min-width: 0;
  max-width: 130px;
}
.pay-flow__icon-wrap {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(235,185,95,.12);
  border: 1.5px solid rgba(235,185,95,.28);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--gold, #EBB95F);
}
/* Highlighted final step (payment) */
.pay-flow__step--highlight .pay-flow__icon-wrap {
  background: var(--gold, #EBB95F);
  border-color: var(--gold, #EBB95F);
  color: var(--navy, #1A2332);
  box-shadow: 0 4px 16px rgba(235,185,95,.35);
}
.pay-flow__step--highlight {
  color: var(--gold, #EBB95F);
}
.pay-flow__step--highlight strong {
  color: #fff;
  font-weight: 800;
}
.pay-flow__arrow {
  color: rgba(235,185,95,.4);
  font-size: 1.2rem;
  flex-shrink: 0;
  padding: 0 2px;
  margin-top: 14px; /* align vertically with icon center */
  display: inline-block;
}
/* In RTL, arrows point left (the "forward" reading direction) */
[dir="rtl"] .pay-flow__arrow {
  transform: scaleX(-1);
}
@media (max-width: 480px) {
  [dir="rtl"] .pay-flow__arrow { transform: none; }
  .pay-flow {
    padding: 16px 14px;
    gap: 4px;
  }
  .pay-flow__step { font-size: .74rem; }
  .pay-flow__icon-wrap { width: 38px; height: 38px; }
}

/* ── Trust: vehicle-photo verification (compact device + text row) ──── */
.trust-mini {
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: 560px;
  margin: 0 auto 28px;
  padding: 18px 22px;
  background: var(--cream, #F9F6F1);
  border-radius: 22px;
}
.device--sm { max-width: 108px; padding: 6px; border-radius: 22px; flex-shrink: 0; }
.device--sm .device__screen { border-radius: 16px; }
.device--sm .device__island { top: 8px; width: 34px; height: 9px; }
.device--sm .device__statusbar { padding: 4px 9px 1px; }
.device--sm .device__time { font-size: .38rem; }
.device--sm .device__sb-icons { gap: 2px; }
.device--sm .device__sb-icons svg { height: 5px; }
.device--sm .device__home { width: 34%; height: 2.5px; bottom: 3px; }
.trust-mini__text { flex: 1; min-width: 0; }
.trust-mini__text .brand-icon { color: var(--gold, #EBB95F); margin-bottom: 6px; }
.trust-mini__text h3 { font-size: 1rem; margin: 0 0 4px; color: var(--navy, #1A2332); }
.trust-mini__text p { font-size: .85rem; line-height: 1.5; margin: 0; color: var(--char, #3E4957); }
@media (max-width: 560px) {
  .trust-mini { flex-direction: column; text-align: center; gap: 14px; padding: 20px; }
}

/* ── Form trust signals ──────────────────────────────────────────────── */
/* Micro-copy below the CTA — removes last hesitation before submitting */
.form-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(62,73,87,.09);
}
.form-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Cairo', 'Poppins', sans-serif;
  font-size: .75rem;
  color: #8a939f;
  white-space: nowrap;
}
.form-trust__item::before {
  content: '✓';
  color: var(--gold, #EBB95F);
  font-weight: 700;
  font-size: .8rem;
}

/* ── Messenger-first CTA (replaces the old web form) ─────────────────── */
.messenger-cta {
  text-align: center;
}
.messenger-cta__note {
  margin-top: 14px;
  font-family: 'Cairo', 'Poppins', sans-serif;
  font-size: .82rem;
  line-height: 1.7;
  color: #8a939f;
}
.messenger-cta__note a {
  color: var(--navy, #1A2332);
  text-decoration: underline;
}

/* ── Carrier testimonials ────────────────────────────────────────────── */
/* 3-column grid of real driver quotes — Karim trusts "weld kima ya" */
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.testimonial-card {
  background: #fff;
  border-radius: 22px;
  padding: 24px 22px;
  box-shadow: 0 4px 22px rgba(62,73,87,.07);
  border: 1px solid rgba(62,73,87,.07);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 36px rgba(62,73,87,.12);
}
/* Middle featured card — gold accent border */
.testimonial-card--featured {
  border: 1.5px solid var(--gold, #EBB95F);
  background: linear-gradient(160deg, #fffef8, var(--cream, #F9F6F1));
  box-shadow: 0 8px 34px rgba(235,185,95,.18);
}
.testimonial-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.testimonial-card__header > div:last-of-type {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.testimonial-card__header strong {
  font-family: 'Cairo', 'Poppins', sans-serif;
  font-size: .93rem;
  font-weight: 700;
  color: var(--navy, #1A2332);
}
.testimonial-card__header span {
  font-family: 'Cairo', 'Poppins', sans-serif;
  font-size: .72rem;
  color: #9aa4b1;
}
/* Avatar circle — initial letter with color-coded background */
.testimonial-avatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cairo', 'Poppins', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
}
.testimonial-avatar--gold  { background: linear-gradient(135deg, var(--gold, #EBB95F), var(--gold2, #F5A962)); color: var(--navy, #1A2332); }
.testimonial-avatar--blue  { background: #3b82f6; }
.testimonial-avatar--navy  { background: var(--navy, #1A2332); }
.testimonial-stars {
  color: var(--gold, #EBB95F);
  font-size: .95rem;
  letter-spacing: 1px;
  margin-inline-start: auto;
  flex-shrink: 0;
}
.testimonial-card p {
  font-family: 'Cairo', 'Poppins', sans-serif;
  font-size: .87rem;
  color: var(--char, #3E4957);
  line-height: 1.75;
  margin: 0;
  flex: 1;
}
/* "Verified profile" badge on featured card */
.testimonial-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(235,185,95,.1);
  border: 1px solid rgba(235,185,95,.28);
  color: #a06c10;
  font-family: 'Cairo', 'Poppins', sans-serif;
  font-size: .73rem;
  font-weight: 600;
  padding: 4px 13px;
  border-radius: 99px;
  align-self: flex-start;
}
@media (max-width: 900px) {
  .testimonials__grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-inline: auto;
  }
}

/* ── Trajets planifiés (TC-148/TC-151 — planned trips) ────────────────── */
.trips { background: var(--cream, #F9F6F1); }
.trips__cta { text-align: center; margin-top: 36px; }

/* ── Earnings estimator ──────────────────────────────────────────────── */
/* Interactive income calculator — makes "2000 DT" feel personal & credible */
.earnings .section-header { margin-bottom: 32px; }
.earnings__card {
  max-width: 580px;
  margin: 0 auto;
  background: var(--navy, #1A2332);
  border-radius: 28px;
  padding: 36px 32px 32px;
  text-align: center;
  box-shadow: 0 18px 52px rgba(26,35,50,.24);
  border: 1px solid rgba(235,185,95,.1);
}
.earnings__selector {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.earn-btn {
  background: rgba(235,185,95,.08);
  border: 1.5px solid rgba(235,185,95,.2);
  color: rgba(249,246,241,.68);
  font-family: 'Cairo', 'Poppins', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.3;
  padding: 10px 18px;
  border-radius: 50px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
  min-height: 52px;
  min-width: 88px;
}
.earn-btn small { font-size: .7rem; font-weight: 400; opacity: .7; }
.earn-btn:hover {
  background: rgba(235,185,95,.18);
  border-color: rgba(235,185,95,.45);
  color: var(--cream, #F9F6F1);
  transform: translateY(-1px);
}
.earn-btn--active {
  background: var(--gold, #EBB95F);
  border-color: var(--gold, #EBB95F);
  color: var(--navy, #1A2332);
  font-weight: 800;
  transform: translateY(-2px);
  box-shadow: 0 5px 18px rgba(235,185,95,.38);
}
.earn-btn--active small { opacity: .65; }
.earnings__result {
  margin-bottom: 28px;
}
.earnings__number {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
  line-height: 1;
}
#earnAmount {
  font-family: 'Cairo', 'Poppins', sans-serif;
  font-size: 4.2rem;
  font-weight: 800;
  color: var(--gold, #EBB95F);
  letter-spacing: -2px;
  transition: color .2s;
}
.earnings__currency {
  font-family: 'Cairo', 'Poppins', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: rgba(249,246,241,.52);
}
/* Progress bar showing relative income level */
.earnings__bar {
  height: 8px;
  background: rgba(255,255,255,.09);
  border-radius: 99px;
  overflow: hidden;
  max-width: 380px;
  margin: 0 auto 14px;
}
.earnings__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold, #EBB95F), var(--gold2, #F5A962));
  border-radius: 99px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.earnings__note {
  font-family: 'Cairo', 'Poppins', sans-serif;
  font-size: .7rem;
  color: rgba(249,246,241,.35);
  max-width: 380px;
  margin: 0 auto;
  line-height: 1.6;
}
.earnings__card .btn {
  margin-top: 4px;
}
@media (max-width: 600px) {
  .earnings__card { padding: 26px 18px 22px; border-radius: 20px; }
  #earnAmount { font-size: 3rem; }
  .earnings__selector { gap: 8px; }
  .earn-btn { min-width: 72px; padding: 9px 12px; font-size: .76rem; }
}

/* ── Prefers-reduced-motion additions ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mission-notif,
  .mission-notif__dot { animation: none !important; }
  .proof-ticker__track { animation: none !important; }
  @keyframes notifSlideIn { from { opacity: 1; } }
  @keyframes dotPulse     { from { } }
}


/* ═══════════════════════════════════════════════════════════════════════
   STICKY REGISTRATION BAR — v3.0
   Floats at the bottom of the screen when the inscription section is
   out of view. Slides in/out smoothly. Hides near the footer.
   ═══════════════════════════════════════════════════════════════════════ */

.sticky-register {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 800;
  background: var(--navy, #1A2332);
  border-top: 2px solid var(--gold, #EBB95F);
  box-shadow: 0 -6px 30px rgba(26, 35, 50, .38);
  padding: 14px 0;
  /* Start translated off-screen downward */
  transform: translateY(110%);
  transition: transform .42s cubic-bezier(.22, .68, 0, 1.2), opacity .3s ease;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Shown state — slides up into view */
.sticky-register.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.sticky-register__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* Left-side label (in RTL → right side visually) */
.sticky-register__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cairo', 'Poppins', sans-serif;
  font-size: .92rem;
  font-weight: 600;
  color: rgba(249, 246, 241, .78);
  white-space: nowrap;
}
.sticky-register__label strong {
  color: var(--gold, #EBB95F);
  font-weight: 800;
}

/* Pulsing dot to convey "live / accepting now" */
.sticky-register__pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: stickyDotPulse 2.4s ease-in-out infinite;
}
@keyframes stickyDotPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
  50%       { box-shadow: 0 0 0 7px rgba(34, 197, 94, .06); }
}

/* Email form inside the bar */
.sticky-register__form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  max-width: 440px;
}
.sticky-register__input {
  flex: 1;
  min-width: 0;
  padding: 10px 18px;
  border-radius: 50px;
  border: 1.5px solid rgba(235, 185, 95, .28);
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: .88rem;
  outline: none;
  transition: border-color .2s, background .2s, box-shadow .2s;
  direction: ltr;
  text-align: left;
}
.sticky-register__input::placeholder {
  color: rgba(249, 246, 241, .38);
}
.sticky-register__input:focus {
  border-color: var(--gold, #EBB95F);
  background: rgba(255, 255, 255, .12);
  box-shadow: 0 0 0 3px rgba(235, 185, 95, .15);
}
.sticky-register__btn {
  white-space: nowrap;
  flex-shrink: 0;
  padding: 10px 24px;
  font-size: .88rem;
  min-height: 44px; /* WCAG touch target */
}

/* Dismiss (×) button — lets user hide the bar if it bothers them */
.sticky-register__dismiss {
  background: none;
  border: none;
  padding: 6px;
  color: rgba(249, 246, 241, .38);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: color .18s, background .18s;
  flex-shrink: 0;
  min-width: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sticky-register__dismiss:hover {
  color: rgba(249, 246, 241, .78);
  background: rgba(255, 255, 255, .08);
}

/* ── Mobile (≤ 600px): stack label above form ────────────────────────── */
@media (max-width: 600px) {
  .sticky-register { padding: 12px 0 18px; }
  .sticky-register__inner { flex-direction: column; gap: 10px; }
  .sticky-register__label { font-size: .82rem; }
  .sticky-register__form  { width: 100%; max-width: 100%; }
  .sticky-register__input { font-size: .82rem; }
  .sticky-register__dismiss { position: absolute; top: 8px; left: 10px; }
  .sticky-register__inner  { position: relative; }
}

/* ── Prefers-reduced-motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sticky-register {
    transition: opacity .2s ease;
    transform: none !important;
  }
  .sticky-register__pulse { animation: none !important; }
}