/* ei-style.css
   Design moderne + états 'error' et 'focus', spinner minimal, accessible.
   Ajout des styles pour .ei-resend-inline-dynamic, .ei-inline-ok, .ei-inline-err
   et règles pour écraser les styles inline injectés par le JS si nécessaire.
*/

/* === Variables (facile à personnaliser) === */
:root{
  --ei-accent: #07a598;      /* primary button */
  --ei-focus: #07a598;       /* focus ring */
  --ei-error: #dc3545;       /* error color */
  --ei-radius: 10px;
  --ei-transition: 180ms ease;
  --ei-input-bg: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  /* precomputed rgba of --ei-accent for shadows */
  --ei-accent-rgba-08: rgba(7,165,152,0.08);
  --ei-accent-rgba-10: rgba(7,165,152,0.10);
  --ei-accent-rgba-85: rgba(7,165,152,0.85);
}

/* === Grid layout: 2 columns desktop, 1 column tablet/mobile === */
.ei-grid-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

/* Make elements that must span both columns */
.ei-grid-form .ei-span-2 {
  grid-column: 1 / -1;
}

/* Keep submit button full width (already span 2 in markup) */
.ei-grid-form .ei-span-2 .ei-submit-btn {
  width: 100%;
  justify-content: center;
}

/* Small tweak: ensure selects keep proper padding when in grid */
.ei-grid-form select { min-height: 44px; }

/* Responsive: tablet & mobile -> single column */
@media (max-width: 991px) {
  .ei-grid-form { grid-template-columns: 1fr; }
  .ei-grid-form .ei-span-2 { grid-column: auto; }
}

/* === Container === */
.ei-form-container { max-width: 900px; margin: 0px auto; font-family: inherit; color: inherit; }

/* === Form groups === */
.ei-form-group { margin-bottom: 0px; position: relative; }
.ei-form-group label { display: block; margin-bottom: 1px; font-weight: 600; font-size: 0.95rem; }

/* === Inputs & selects === */
.ei-form-group input[type="text"],
.ei-form-group input[type="email"],
.ei-form-group input[type="tel"],
.ei-form-group select,
.ei-form-group textarea {
  width: 100%;
  margin: 0;
  padding: 12px 44px 12px 14px; /* space for potential icon */
  border-radius: var(--ei-radius);
  border: 1px solid rgba(0,0,0,0.08);
  background: var(--ei-input-bg);
  box-shadow: 0 2px 8px rgba(16,24,40,0.03);
  transition: box-shadow var(--ei-transition), border-color var(--ei-transition), transform var(--ei-transition);
  font-size: 0.95rem;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* slight floating hover */
.ei-form-group input:hover,
.ei-form-group select:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(16,24,40,0.06); }

/* focus (uses accent color) */
.ei-form-group input:focus,
.ei-form-group select:focus,
.ei-form-group textarea:focus {
  border-color: var(--ei-focus);
  box-shadow: 0 8px 30px var(--ei-accent-rgba-10);
  transform: translateY(-2px);
}

/* Select-specific: stronger accent on hover/focus */
.ei-form-group select:hover,
.ei-form-group select:focus {
  border-color: var(--ei-accent);
  box-shadow: 0 10px 28px var(--ei-accent-rgba-08);
}

/* Style native dropdown arrow fallback (keeps it neat on many themes) */
.ei-form-group select {
  background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%), none;
  background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px), 100% 0;
  background-size: 6px 6px, 6px 6px, 1px 1px;
  background-repeat: no-repeat;
  padding-right: 48px;
}

/* helper small text for hints */
.ei-hint { font-size: 0.86rem; color: rgba(0,0,0,0.45); margin-top:6px; }

/* === Option hover & selected styling ===
   Note: some browsers render <option> with native UI and may ignore these rules.
*/
.ei-form-group select option:hover {
  background: var(--ei-accent);
  color: #ffffff;
}
.ei-form-group select option:checked,
.ei-form-group select option[selected] {
  background: var(--ei-accent);
  color: #ffffff;
}

/* === Error messages & states === */
.ei-error-message {
  color: var(--ei-error);
  font-size: 0.86rem;
  margin-top: 6px;
  display: block;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--ei-transition), transform var(--ei-transition);
}

.ei-form-group.ei-has-error .ei-error-message {
  opacity: 1;
  transform: translateY(0);
}

/* field-level error styling */
.ei-field-error {
  border-color: rgba(220,53,69,0.95) !important;
  box-shadow: 0 8px 20px rgba(220,53,69,0.08) !important;
  background: linear-gradient(180deg, rgba(220,53,69,0.02), rgba(255,255,255,0.01));
  animation: ei-shake 380ms ease;
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px 20px;
  /* small SVG icon (red ! ) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='%23dc3545'/><text x='12' y='16' font-size='12' text-anchor='middle' fill='%23ffffff' font-family='Arial' font-weight='700'>!</text></svg>");
}

@keyframes ei-shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

/* === General messages === */
.ei-message { margin-top: 2px; padding: 12px 14px; border-radius: 8px; font-weight: 600; }
.ei-message.success { color: #0f5132; border: 1px solid rgba(40,167,69,0.15); background: rgba(40,167,69,0.04); }
.ei-message.error { color: var(--ei-error); border: 1px solid rgba(220,53,69,0.08); background: rgba(220,53,69,0.04); }

/* success actions */
.ei-success-actions { margin-top: 10px; display:flex; gap:8px; }
.ei-success-actions button { padding:8px 12px; border-radius:8px; border:none; cursor:pointer; font-weight:700; background:#fff; box-shadow:0 6px 18px var(--ei-accent-rgba-08); }

/* === Submit button + spinner === */
.ei-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 10px 18px;
  border-radius: 8px;
  border: none;
  font-weight: 700;
  transition: transform var(--ei-transition), box-shadow var(--ei-transition), opacity var(--ei-transition);
  box-shadow: 0 8px 24px var(--ei-accent-rgba-08);
  background: linear-gradient(90deg, var(--ei-accent), var(--ei-accent-rgba-85));
  color: #fff;
}

/* disabled state */
.ei-submit-btn[disabled] { opacity: 0.7; cursor: not-allowed; transform: none; }

/* spinner (simple) */
.ei-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: #fff;
  animation: ei-spin 900ms linear infinite;
}

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

/* === Responsive tweaks === */
@media (max-width: 640px) {
  .ei-form-container { padding: 0 12px; }
  .ei-form-group input, .ei-form-group select { padding-right: 40px; }
}

/* === Utility === */
.ei-general-error { border-left: 3px solid var(--ei-error); padding-left: 10px; }


/* Popup container */
.ei-modal {
  display: none; /* caché par défaut */
  position: fixed;
  z-index: 9999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(3px);
  justify-content: center;
  align-items: center;
}

/* Contenu */
.ei-modal-content {
  background: #fff;
  padding: 25px;
  max-width: 400px;
  width: 90%;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
  text-align: center;
  animation: scaleIn 0.3s ease;
}

.ei-modal-content h3 {
  margin-top: 0;
  font-size: 20px;
  color: #333;
}

.ei-modal-actions {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
  gap: 10px;
}

.ei-btn-primary {
  background: #07a598;
  color: white;
  padding: 10px 18px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}
.ei-btn-primary:hover {
  background: #059185;
}

.ei-btn-secondary {
  background: #e0e0e0;
  color: #333;
  padding: 10px 18px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.ei-btn-secondary:hover {
  background: #ccc;
}

@keyframes scaleIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* =========================
   Styles ajoutés pour le "resend" inline (JS dynamique)
   - gardent la même identité visuelle que le plugin
   - écrasent volontairement certains styles inline si nécessaire
   ========================= */
.ei-resend-inline,
.ei-resend-inline-dynamic {
  margin-top: 10px !important;
  font-family: inherit !important;
  color: inherit !important;
  display: block !important;
}

/* container texte */
.ei-resend-inline p,
.ei-resend-inline-dynamic p {
  margin: 0 0 6px 0 !important;
  font-size: 14px !important;
  color: rgba(0,0,0,0.75) !important;
}

/* bouton de renvoi (plus discret que le submit) */
.ei-resend-inline .ei-resend-btn,
.ei-resend-inline-dynamic .ei-resend-btn-dynamic,
.ei-resend-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  border: none !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  background: linear-gradient(90deg, var(--ei-accent), var(--ei-accent-rgba-85)) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px var(--ei-accent-rgba-08) !important;
  font-size: 0.95rem !important;
}

.ei-resend-inline .ei-resend-btn:hover,
.ei-resend-inline-dynamic .ei-resend-btn-dynamic:hover,
.ei-resend-btn:hover {
  transform: translateY(-1px) !important;
}

/* input minimal inside the inline resend form (non-AJAX fallback) */
.ei-resend-inline-form input[type="email"] {
  padding: 8px 10px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  min-width: 220px !important;
}

/* inline success/error signs generated by JS */
.ei-inline-ok {
  margin-top: 8px !important;
  display: inline-block !important;
  color: #0f5132 !important; /* same as .ei-message.success */
  background: rgba(40,167,69,0.04) !important;
  border: 1px solid rgba(40,167,69,0.15) !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
}

.ei-inline-err {
  margin-top: 8px !important;
  display: inline-block !important;
  color: var(--ei-error) !important;
  background: rgba(220,53,69,0.04) !important;
  border: 1px solid rgba(220,53,69,0.12) !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
}

/* ensure inline messages placed near field stay readable on mobile */
@media (max-width: 640px) {
  .ei-resend-inline-form { flex-direction: column; align-items: stretch; gap:8px; }
  .ei-resend-inline-form input[type="email"] { width: 100% !important; min-width: auto !important; }
  .ei-resend-inline-dynamic { width: 100% !important; }
}

/* Small utility to neutralize any style attributes that JS might inject on the wrapper
   (we can't override every inline property, but we neutralize the common ones we care about)
*/
.ei-resend-inline-dynamic[style] {
  /* force background & color & font to our design */
  background: transparent !important;
  color: inherit !important;
  font-family: inherit !important;
}

/* EOF */