/* =========================
   BASE • Forms (safe)
   - Ne stylise PAS les dimensions/spacing globalement
========================= */

input::placeholder,
textarea::placeholder{
  color: var(--input-placeholder);
  opacity: 1;
}

textarea{ resize: vertical; }

/* Boutons: reset global neutre */
button{
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

/* iOS tap highlight */
button,
.c-close{
  -webkit-tap-highlight-color: transparent !important;
}

/* (Option) Accent-color iOS */
button,
.c-close{
  accent-color: transparent !important;
}

/* forms.css */
:root{
  --range-track-h: 6px;
  --range-thumb: 18px;
  --range-thumb-active: 24px;
  --range-track: #e6e8ee;
  --range-fill: #ff1749;
  --range-shadow: 0 8px 18px rgba(0,0,0,.10);
  --range-ring: 6px;
  --fill: #fa1251;

}

/* =========================================
   C-RANGE — Premium generic slider (theme-aware)
   - BEM friendly, standalone
   - Track progress using CSS vars (--min/--max/--val)
   - Accent color uses --primary
   ========================================= */


:root{
  /* Theme  */
  --c-range-fill: var(--color-primary, #e71945);
  --c-range-track: rgba(21, 33, 47, .10);
  --c-range-ring-color: rgba(21, 33, 47, .16); /* focus soft */

  /* Sizes */
  --c-range-track-h: 6px;
  --c-range-thumb: 18px;
  --c-range-thumb-active: 22px;

  /* Effects */
  --c-range-shadow: 0 2px 10px rgba(0,0,0,.14);
  --c-range-ring: 4px;
}

/* Host */
.c-range{
  width: 100%;
  margin: 0;
  cursor: pointer;
  touch-action: pan-y;

  /* reset */
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  outline: none;

  /* Values (set by JS) */
  --min: 0;
  --max: 100;
  --val: 0;

  /* Locals */
  --track-h: var(--c-range-track-h);
  --thumb: var(--c-range-thumb);
  --thumb-active: var(--c-range-thumb-active);
  --track: var(--c-range-track);
  --fill: var(--c-range-fill);
  --shadow: var(--c-range-shadow);
  --ring: var(--c-range-ring);
  --ring-color: var(--c-range-ring-color);
}

/* ---------- Track (WebKit) ---------- */
.c-range::-webkit-slider-runnable-track{
  height: var(--track-h);
  border-radius: 999px;
  background:
    linear-gradient(to right,
      var(--fill) 0%,
      var(--fill) calc((var(--val) - var(--min)) * 100% / (var(--max) - var(--min))),
      var(--track) 0%) !important;
}

/* ---------- Thumb (WebKit) ---------- */
.c-range::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;

  width: var(--thumb);
  height: var(--thumb);
  margin-top: calc((var(--track-h) - var(--thumb)) / 2);

  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--fill);
  box-shadow: var(--shadow);

  transition: transform 140ms ease, width 140ms ease, height 140ms ease, box-shadow 140ms ease;
}

@media (hover:hover){
  .c-range:hover::-webkit-slider-thumb{
    transform: scale(1.08);
  }
}

.c-range:focus-visible::-webkit-slider-thumb{
  box-shadow: 0 0 0 var(--ring) var(--ring-color), var(--shadow);
}

/* ---------- Firefox ---------- */
.c-range::-moz-range-track{
  height: var(--track-h);
  border-radius: 999px;
  background: var(--track);
}
.c-range::-moz-range-progress{
  height: var(--track-h);
  border-radius: 999px;
  background: var(--fill);
}
.c-range::-moz-range-thumb{
  width: var(--thumb);
  height: var(--thumb);
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--fill);
  box-shadow: var(--shadow);

  transition: transform 140ms ease, width 140ms ease, height 140ms ease, box-shadow 140ms ease;
}

@media (hover:hover){
  .c-range:hover::-moz-range-thumb{
    transform: scale(1.08);
  }
}

.c-range:focus-visible::-moz-range-thumb{
  box-shadow: 0 0 0 var(--ring) var(--ring-color), var(--shadow);
}

/* ---------- Drag state (added by JS on closest wrapper) ---------- */
.c-range.is-dragging::-webkit-slider-thumb{
  width: var(--thumb-active);
  height: var(--thumb-active);
}

.c-range.is-dragging::-moz-range-thumb{
  width: var(--thumb-active);
  height: var(--thumb-active);
}


/* ---------- Disabled ---------- */
.c-range:disabled{
  cursor: not-allowed;
  opacity: .6;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .c-range::-webkit-slider-thumb,
  .c-range::-moz-range-thumb{
    transition: none;
  }
}


/* ===========================
   LISTING FORM (layout)
   =========================== */
.listing-form__fields{
  display: grid;
  gap: 14px;
}

/* ===========================
   FIELD (generic)
   =========================== */
.c-field{
  display: grid;
  gap: 6px;
}

.c-field__label{
  font-size: .95rem;
  font-weight: 600;
  color: rgba(15, 23, 42, .90);
}

.c-field__control{
  position: relative;
}


/* ===========================
   ERRORS
   =========================== */

/* default error */
.is-hidden{ display:none !important; }

.c-field__error{
  min-height: 16px;
  font-size: .85rem;
  color: #b42318;
  margin: 0;
  display: none;
}

.c-field.is-error .c-field__error{
  display: block;
}

.c-field.is-error .c-input,
.c-field.is-error .c-textarea,
.c-field.is-error .c-select{
  border-color: rgba(180,35,24,.45);
  box-shadow: 0 0 0 4px rgba(180,35,24,.10);
}

.c-field__error{
  margin: 6px 0 0 0;
  font-size: .9rem;
  color: #b42318;
  min-height: 1em;
}

.c-field.is-error .c-select{
  border-color: rgba(180, 35, 24, .55);
  box-shadow: 0 0 0 4px rgba(180, 35, 24, .10);
}

.c-alert {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(180, 35, 24, .25);
  background: rgba(180, 35, 24, .06);
  color: #b42318;
  margin: 0 0 12px 0;
}