/* =============================================
   WIDGET OPFOURPRO — OVERRIDE STYLES
   ============================================= */

/* Palette de la landing : fond clair, accents orange et bouton jaune Snapchat. */
.partner-form-slot {
  background: transparent;
  color: var(--ink);
  border-radius: 0;
  padding: 0;
}

/* --- Conteneur global --- */
#selector {
  background: transparent !important;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* --- Inputs (Mon Email / Mon pseudo) --- */
#selector input[type="text"],
#selector input[type="email"],
#selector input[type="password"],
#selector input[type="tel"] {
  background: var(--paper) !important;
  border: 1.5px solid #f1d9c6 !important;
  border-radius: 50px !important;
  color: var(--ink) !important;
  font-size: 1rem !important;
  padding: 15px 22px !important;
  width: 100% !important;
  margin-bottom: 12px !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#selector input[type="text"]:focus,
#selector input[type="email"]:focus,
#selector input[type="password"]:focus,
#selector input[type="tel"]:focus {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 3px rgba(255, 122, 33, 0.15) !important;
}

#selector input::placeholder {
  color: var(--muted) !important;
  font-size: 0.95rem !important;
}

/* --- Checkbox row --- */
#selector label:has(input[type="checkbox"]),
#selector .checkbox-row,
#selector .checkbox-wrapper,
#selector div:has(> input[type="checkbox"]) {
  margin-left: 5% !important;
}

/* --- Checkbox + label --- */
#selector input[type="checkbox"] {
  width: 13.5px !important;
  height: 13.5px !important;
  border: 1px solid var(--orange) !important;
  border-radius: 2px !important;
  accent-color: var(--orange-deep) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

#selector label {
  color: #62585f !important;
  font-size: 0.77rem !important;
  line-height: 1.4 !important;
}

#selector label a,
#selector [style*="color: rgb(255"],
#selector [style*="color: orange"],
#selector [style*="color:#f"],
#selector [style*="color: #f"],
#selector [style*="color:#e"],
#selector [style*="color: #e"] {
  color: var(--orange-deep) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

/* --- Bouton CONTINUER --- */
/* Les couleurs en ligne ne ciblent que les contrôles, pas les champs ni les encarts. */
#selector button[type="submit"],
#selector input[type="submit"],
#selector .btn-primary,
#selector button.submit,
#selector button.btn,
#selector :is(button, input[type="submit"], input[type="button"], [role="button"]):is(
  [style*="background: rgb(255"],
  [style*="background-color: rgb(255"],
  [style*="background: rgb(239"],
  [style*="background-color: rgb(239"],
  [style*="background: rgb(249"],
  [style*="background-color: rgb(249"],
  [style*="background:#f"],
  [style*="background: #f"],
  [style*="background:#e"],
  [style*="background: #e"],
  [style*="background: orange"],
  [style*="background-color: orange"],
  [style*="background: linear-gradient"]
) {
  background: var(--snap) !important;
  border: none !important;
  border-radius: 50px !important;
  color: #000000 !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 17px !important;
  width: 100% !important;
  cursor: pointer !important;
  box-shadow: 0 0 28px rgba(255, 252, 0, 0.25), 0 4px 16px rgba(232, 90, 10, 0.14) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  margin-top: 10px !important;
}

#selector button[type="submit"]:hover,
#selector input[type="submit"]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 0 40px rgba(255, 252, 0, 0.4), 0 6px 20px rgba(232, 90, 10, 0.2) !important;
}

#selector button[type="submit"]:active,
#selector input[type="submit"]:active {
  transform: translateY(0) !important;
}

/* --- Accordéon « Est-ce discret ? » --- */
#selector details,
#selector .faq,
#selector .accordion {
  background: var(--peach) !important;
  border: 1px solid #f1d9c6 !important;
  border-radius: 14px !important;
  margin-top: 14px !important;
  overflow: hidden !important;
}

#selector details summary,
#selector .faq-question {
  color: var(--ink) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  padding: 14px 18px !important;
  cursor: pointer !important;
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

#selector details summary svg,
#selector details summary i {
  color: var(--orange-deep) !important;
}

/* --- Textes / liens génériques --- */
#selector a {
  color: var(--orange-deep) !important;
}

#selector h1 span,
#selector h2 span {
  color: var(--orange-deep) !important;
}

/* --- Messages d’erreur --- */
/* Le prestataire garde la maîtrise de leur affichage et de leur masquage. */
#selector .error,
#selector .error-message,
#selector .field-error,
#selector .invalid-feedback,
#selector .form-error,
#selector :is(p, span, div)[class*="error"],
#selector :is(p, span, div)[class*="invalid"],
#selector p[style*="color: red"],
#selector span[style*="color: red"],
#selector div[style*="color: red"],
#selector p[style*="color:red"],
#selector span[style*="color:red"],
#selector div[style*="color:red"] {
  color: #ef4444 !important;
  text-align: center !important;
  font-size: 0.693rem !important;
  width: 100% !important;
}

/* --- Scrollbar --- */
#selector ::-webkit-scrollbar { width: 4px !important; }
#selector ::-webkit-scrollbar-track { background: transparent !important; }
#selector ::-webkit-scrollbar-thumb { background: rgba(255, 122, 33, 0.3) !important; border-radius: 4px !important; }

/* --- Mention bancaire sous le bouton final --- */
#selector:has(button[type="submit"], input[type="submit"], .btn-primary, button.submit, button.btn)::after {
  content: "Discrétion totale - Le nom du site n’apparaît pas sur votre relevé";
  display: block;
  width: 100%;
  margin-top: 9px;
  color: #776879;
  font-size: clamp(0.5rem, 2.25vw, 0.625rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  #selector input,
  #selector button,
  #selector .btn-primary,
  #selector [role="button"] {
    transition: none !important;
    transform: none !important;
  }
}