/* ============================================================
   FORM DROPDOWN — PREMIUM (ex-ln-dropdown-hour)
   Attention perf : backdrop-filter présent (desktop OK)
============================================================ */

/* Container */
.form-dropdown{
  position: relative;
  width: 100%;
  overflow: visible !important;
  z-index: 60; /* passe devant le contenu du step */
}

/* ============================================================
   INPUT
============================================================ */
.form-dropdown-input{
  width: 100%;
  padding: 16px 56px 16px 20px;
  border-radius: var(--radius-md);
  box-sizing: border-box;

  background:
    radial-gradient(
      900px 380px at 50% -20%,
      rgba(255,255,255,0.16),
      transparent 70%
    ),
    linear-gradient(
      180deg,
      rgba(117,84,60,0.28) 0%,
      rgba(88,57,38,0.36) 100%
    );

  border: 1px solid rgba(255,255,255,0.22);
  color: var(--ink);

  font-size: 1.06rem;
  line-height: 1.25;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 10px 22px rgba(0,0,0,0.22);

  outline: none;
  cursor: pointer;

  transition:
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}

/* Empêche tout effet parasite dans les form-step */
.form-step .form-dropdown-input:focus{
  transform: none !important;
}

/* Focus */
.form-dropdown-input:focus{
  background:
    radial-gradient(
      900px 380px at 50% -20%,
      rgba(255,255,255,0.22),
      transparent 70%
    ),
    linear-gradient(
      180deg,
      rgba(130,96,72,0.38) 0%,
      rgba(92,63,45,0.45) 100%
    );

  border-color: rgba(230,214,158,0.55);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 18px 32px rgba(0,0,0,0.32),
    0 0 0 4px rgba(230,214,158,0.12);
}

/* ============================================================
   TOGGLE (FLÈCHE RONDE)
============================================================ */
.form-dropdown-toggle{
  position: absolute;
  right: 14px;
  top: 45%;
  transform: translateY(-50%);

  width: 38px;
  height: 38px;
  border-radius: 50%;
  box-sizing: border-box;

  border: 1px solid rgba(230,214,158,0.25);
  background:
    radial-gradient(
      900px 260px at 50% 0%,
      rgba(255,255,255,0.12),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.07),
      rgba(0,0,0,0.20)
    );

  color: rgba(230,214,158,0.92);
  font-size: 1.05rem;
  line-height: 1;

  display: grid;
  place-items: center;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 14px 26px rgba(0,0,0,0.22);

  cursor: pointer;
  padding: 0;
  outline: none;

  transition:
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease;
}

/* Focus-within */
.form-dropdown:focus-within .form-dropdown-toggle{
  border-color: rgba(230,214,158,0.50);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 18px 32px rgba(0,0,0,0.30);
}

/* Hover */
.form-dropdown-toggle:hover{
  border-color: rgba(230,214,158,0.60);
  background: rgba(255,255,255,0.12);
}

/* Open state */
.form-dropdown.is-open .form-dropdown-toggle{
  transform: translateY(-50%) rotate(180deg);
}

/* ============================================================
   LISTE
============================================================ */
.form-dropdown-list{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;

  background:
    radial-gradient(
      800px 380px at 50% -20%,
      rgba(255,255,255,0.12),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      rgba(40,20,10,0.96),
      rgba(20,10,4,0.98)
    );

  border: 1px solid rgba(230,214,158,0.20);
  border-radius: 16px;

  box-shadow:
    0 24px 60px rgba(0,0,0,0.40),
    inset 0 1px 0 rgba(255,255,255,0.08);

  backdrop-filter: blur(10px);

  padding: 6px 0;
  max-height: 260px;
  overflow-y: auto;

  display: none;
  z-index: 9999; /* doit gagner contre tout ce qui est dans le step */
}

/* Open */
.form-dropdown.is-open .form-dropdown-list{
  display: block;
  animation: formDropFade .22s ease;
}

@keyframes formDropFade{
  from{ opacity: 0; transform: translateY(-6px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* ============================================================
   OPTIONS
============================================================ */
.form-dropdown-option{
  padding: 12px 18px;
  cursor: pointer;

  color: #fffdf8;
  font-size: 1rem;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  transition:
    background .18s ease,
    padding-left .18s ease;
}

.form-dropdown-option:hover{
  background: rgba(230,214,158,0.14);
  padding-left: 24px;
}

/* ============================================================
   SCROLLBAR (DESKTOP)
============================================================ */
.form-dropdown-list{
  scrollbar-width: thin;
  scrollbar-color:
    rgba(230,214,158,0.75)
    rgba(255,255,255,0.06);
}

.form-dropdown-list::-webkit-scrollbar{
  width: 6px;
}

.form-dropdown-list::-webkit-scrollbar-track{
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
}

.form-dropdown-list::-webkit-scrollbar-thumb{
  background: linear-gradient(
    180deg,
    rgba(230,214,158,0.85),
    rgba(230,214,158,0.45)
  );
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
}

.form-dropdown-list::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(
    180deg,
    rgba(230,214,158,0.95),
    rgba(230,214,158,0.60)
  );
}

/* ============================================================
   PERF MOBILE (IMPORTANT)
============================================================ */
@media (max-width: 768px){
  .form-dropdown-list{
    backdrop-filter: none;
  }
}