/* FORM REVIEW */


:root{
    --rv-border:#e6e6e6;
    --rv-muted:#8a8a8a;
    --rv-text:#222;
    --rv-bg:#fff;
    --rv-accent:#ffb400; /* star gold */
    --rv-primary:#2f6fed; /* submit enabled */
    --rv-danger:#d53c3c;
    --rv-btn-disabled:#bfbfbf;
    --rv-radius:12px;
  }

  /* Overlay + modal */
  .rv-overlay{position:fixed; inset:0; background:#0006; backdrop-filter:blur(2px); z-index:9998;}
  .rv-modal{
     position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100svh - 80px); /* scroll inside if tall */
  overflow: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  padding: 20px 20px 16px;
  z-index: 9999;
  }
  .rv-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
  .rv-header h3{margin:0;font-size:20px;font-weight:600}
  .rv-close{border:0;background:transparent;font-size:24px;line-height:1;cursor:pointer;color:#777}
  .rv-label{display:block;margin:12px 0 6px;font-weight:600}
  .rv-textarea-wrap{position:relative}
  textarea, input[type="text"], input[type="email"]{
    width:100%;border:1px solid var(--rv-border);border-radius:10px;padding:12px 12px;
    font:inherit;outline:0;background:#fff;
  }
  textarea:focus, input:focus{border-color:#c4cffd; box-shadow:0 0 0 3px rgba(47,111,237,.15)}
  .rv-counter{position:absolute;right:10px;bottom:8px;font-size:12px;color:var(--rv-muted)}
  .rv-error{color:var(--rv-danger);font-size:13px;margin:6px 0 0}
  .rv-hint{color:var(--rv-muted);font-size:13px;margin:8px 0 0}
  .rv-legal{color:var(--rv-muted);font-size:12px;margin:12px 0 16px;line-height:1.5}
  .rv-legal a{color:inherit;text-decoration:underline}

  /* Stars */
  .rv-stars{display:flex;gap:6px;direction:rtl;/* allow hover fill leftwards */}
  .rv-stars input{display:none}
  .rv-stars label{
    font-size:28px;cursor:pointer;user-select:none;color:#ddd;transition:color .15s;
  }
  .rv-stars label:hover,
  .rv-stars label:hover ~ label{color:var(--rv-accent)}
  .rv-stars input:checked ~ label{color:#ddd}
  /* recolor all labels up to checked one */
  .rv-stars input#star1:checked ~ label[for="star1"],
  .rv-stars input#star2:checked ~ label[for="star2"], .rv-stars input#star2:checked ~ label[for="star1"],
  .rv-stars input#star3:checked ~ label[for="star3"], .rv-stars input#star3:checked ~ label[for="star2"], .rv-stars input#star3:checked ~ label[for="star1"],
  .rv-stars input#star4:checked ~ label[for="star4"], .rv-stars input#star4:checked ~ label[for="star3"], .rv-stars input#star4:checked ~ label[for="star2"], .rv-stars input#star4:checked ~ label[for="star1"],
  .rv-stars input#star5:checked ~ label{color:var(--rv-accent)}

  /* Photos */
  .rv-drop{
    border:2px dashed var(--rv-border);border-radius:12px;padding:18px;text-align:center;
    color:#555; display:grid; place-items:center; gap:4px; cursor:pointer; position:relative;
  }
  .rv-drop:focus{outline:3px solid rgba(47,111,237,.25)}
  .rv-plus{font-size:28px;line-height:1.1}
  .rv-count{position:absolute;right:10px;bottom:8px;font-size:12px;color:var(--rv-muted)}
  .rv-previews{display:grid;grid-template-columns:repeat(5, 1fr);gap:8px;margin-top:10px}
  .rv-thumb{position:relative;border:1px solid var(--rv-border);border-radius:10px;overflow:hidden;height:70px;background:#f7f7f7}
  .rv-thumb img{width:100%;height:100%;object-fit:cover}
  .rv-del{position:absolute;top:4px;right:4px;border:0;border-radius:50%;width:22px;height:22px;cursor:pointer;
    background:#0009;color:#fff;font-weight:700;line-height:20px}

  /* Submit */
  .rv-submit{
    width:100%;padding:12px 16px;border-radius:10px;border:0;font-weight:600;color:#fff;
    background:var(--rv-btn-disabled);cursor:not-allowed;transition:background .15s, transform .02s;
  }
  .rv-submit.enabled{background:var(--rv-primary);cursor:pointer}
  .rv-submit.enabled:active{transform:translateY(1px)}
  .rv-success{margin-top:10px;color:#1a7f37;font-weight:600}

  /* Demo open button (remove in production) */
  .rv-open-demo{margin:24px 0;padding:10px 14px;border-radius:8px;border:1px solid var(--rv-border);background:#fff;cursor:pointer}

  @media (max-width: 520px){
    .rv-previews{grid-template-columns:repeat(4, 1fr)}
  }


  /* Mobile tweaks */
@media (max-width: 520px){
  .rv-modal{
    width: calc(100vw - 16px);
    max-height: calc(100svh - 16px);
  }
}


/* BUTTON CUSTOM Ecrire un avis */

/* Center + style the open-review button */
/* Floating left-bottom review button */
.rv-open-fixed{
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: none;
  z-index: 1060;
  direction: rtl;

  background: #0d6efd;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(13,110,253,.25);
  cursor: pointer;

  animation: rv-pulse 2.4s ease-in-out infinite;
}

.rv-open-fixed:hover,
.rv-open-fixed:focus{
  background: #0b5ed7;
  outline: none;
  box-shadow: 0 10px 30px rgba(13,110,253,.35);
}

@media (prefers-reduced-motion: reduce){
  .rv-open-fixed{ animation: none; }
}

/* Simple pulse for bottom placement */
@keyframes rv-pulse{
  0%,100%{ transform: scale(1); }
  50%    { transform: scale(1.05); }
}


/* Loading */


/* Button loading state */
.rv-submit.is-loading {
  position: relative;
  pointer-events: none;
  opacity: .85;
}
.rv-submit.is-loading .rv-btn-label { opacity: 0; }
.rv-submit.is-loading::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: rvspin .8s linear infinite;
}
@keyframes rvspin { to { transform: rotate(360deg); } }

/* Progress bar */
.rv-progress {
  display: flex; align-items: center; gap: .5rem;
  margin-top: .75rem; font-size: .875rem;
}
.rv-bar {
  flex: 1 1 auto; height: 6px; background: #eee; border-radius: 999px;
  overflow: hidden; position: relative;
}
.rv-bar::before {
  content: ""; position: absolute; inset: 0; width: var(--w,0%);
  background: #4c8fff; display: block;
}
.rv-pct { width: 3.5rem; text-align: center; color: #555; }

/* if you prefer width via style attr, keep both; ::before uses CSS var --w */