/* ZIC Pronos — modale « Publier un prono » (landing home).

   Thème CLAIR aligné sur les autres popups de la landing (ZIC Live / Newsletter) :
   mêmes tokens ``--pp-*`` + fallbacks blancs, scrim ``rgba(15,23,42,.55)``. On
   conserve l'accent violet Pronos sur les pills sélectionnées et le CTA. Overlay
   z-index 1500. Aucun pari, aucun argent. */

.zpr-c-overlay {
  --zpr-accent: #7B3FF2;
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--pp-scrim, rgba(15, 23, 42, 0.55));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: zpr-c-fade 0.18s ease;
}
.zpr-c-overlay[hidden] { display: none; }
@keyframes zpr-c-fade { from { opacity: 0; } to { opacity: 1; } }

body.zpr-c-open { overflow: hidden; }

.zpr-c-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 26px 24px 24px;
  border-radius: 18px;
  background: var(--pp-card, #ffffff);
  border: 1px solid var(--pp-border, #e5e7eb);
  box-shadow: 0 30px 80px var(--pp-shadow, rgba(15, 23, 42, 0.28));
  animation: zpr-c-pop 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes zpr-c-pop {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.zpr-c-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1px solid var(--pp-border, #e5e7eb);
  background: var(--pp-card, #ffffff);
  color: var(--pp-text, #1f2937);
  cursor: pointer;
  transition: background 0.15s ease;
}
.zpr-c-close:hover { background: var(--pp-overlay, #f3f4f6); }

.zpr-c-head { margin-bottom: 18px; padding-right: 40px; }
.zpr-c-head h3 {
  margin: 0 0 5px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: var(--pp-text, #1f2937);
}
.zpr-c-sub {
  margin: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  color: var(--pp-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
}

.zpr-c-label {
  display: block;
  margin: 16px 0 8px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.3px;
  color: var(--pp-text, #374151);
}

/* ── Pills domaine ───────────────────────────────────────────────────── */
.zpr-c-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.zpr-c-pill {
  --zpr-domain: #7B3FF2;
  padding: 7px 13px;
  border-radius: 99px;
  cursor: pointer;
  background: color-mix(in srgb, var(--zpr-domain) 10%, #fff);
  border: 1.5px solid color-mix(in srgb, var(--zpr-domain) 45%, transparent);
  color: color-mix(in srgb, var(--zpr-domain) 78%, #1a0a3d);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 12px;
  transition: all 0.15s ease;
}
.zpr-c-pill:hover { background: color-mix(in srgb, var(--zpr-domain) 18%, #fff); }
.zpr-c-pill.is-selected {
  background: var(--zpr-domain);
  border-color: var(--zpr-domain);
  color: #fff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--zpr-domain) 38%, transparent);
}
.zpr-c-pill--other { --zpr-domain: #A855F7; }

.zpr-c-custom {
  width: 100%;
  margin-top: 10px;
  padding: 11px 13px;
  border-radius: 10px;
  background: var(--pp-input-bg, #f9fafb);
  border: 1.5px solid var(--pp-border, #e5e7eb);
  color: var(--pp-text, #111827);
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
}
.zpr-c-custom[hidden] { display: none; }

.zpr-c-textarea,
.zpr-c-input {
  width: 100%;
  padding: 11px 13px;
  border-radius: 10px;
  background: var(--pp-input-bg, #f9fafb);
  border: 1.5px solid var(--pp-border, #e5e7eb);
  color: var(--pp-text, #111827);
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  resize: vertical;
}
.zpr-c-textarea::placeholder { color: var(--pp-text-muted, #9ca3af); }
.zpr-c-textarea:focus,
.zpr-c-input:focus,
.zpr-c-custom:focus {
  outline: none;
  border-color: #A855F7;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18);
}

.zpr-c-submit {
  width: 100%;
  margin-top: 20px;
  padding: 13px;
  border: none;
  border-radius: 11px;
  cursor: pointer;
  background: linear-gradient(90deg, #7B3FF2, #A855F7);
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.3px;
  box-shadow: 0 10px 26px rgba(123, 63, 242, 0.32);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.zpr-c-submit:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(123, 63, 242, 0.42); }
.zpr-c-submit:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Toasts (scopés à la modale) ─────────────────────────────────────── */
.zpr-c-toasts {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 5;
  pointer-events: none;
  width: max-content;
  max-width: 90%;
}
.zpr-c-toast {
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--pp-card, #ffffff);
  border: 1px solid var(--pp-border, #e5e7eb);
  color: var(--pp-text, #1f2937);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 13px;
  text-align: center;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
  animation: zpr-c-toast-in 0.2s ease;
}
.zpr-c-toast--error { border-color: #ef4444; color: #b91c1c; }
.zpr-c-toast--success { border-color: #10b981; color: #047857; }
@keyframes zpr-c-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 520px) {
  .zpr-c-card { padding: 22px 18px 20px; }
}