/**
 * Coaxia RH — Cookie preferences toggles (page /cookies)
 *
 * Styles the toggle-switch preference form rendered by the
 * coaxiarh/cookie-preferences-form block:
 *
 *   form#cookie-preferences-form
 *     .cookie-toggle-item
 *       .cookie-toggle-info > h3 + p
 *       label.toggle-switch > input[type="checkbox"] + span.toggle-slider
 *     button.cookie-form-submit
 *     #cookie-pref-confirmation
 *
 * Mobile-first : rangée compacte par défaut (le toggle ne fait que 52px, il
 * reste à côté du texte dès 320px), aération verticale à partir de 640px.
 */

.cookie-toggle-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-gray-soft);

  &:last-of-type {
    border-bottom: none;
  }

  @media (min-width: 640px) {
    & {
      gap: var(--space-6);
      padding: var(--space-5) 0;
    }
  }

  & .cookie-toggle-info {
    /* flex child : sans min-width:0, une chaîne insécable force un dépassement
       horizontal sur mobile */
    min-width: 0;

    & h3 {
      margin-top: 0;
      margin-bottom: var(--space-1);
      font-family: var(--font-heading);
      font-size: var(--text-base);
      font-weight: 600;
      color: var(--color-black);
    }

    & p {
      font-size: var(--text-sm);
      line-height: 1.6;
      color: var(--color-gray-soft);
    }
  }
}

/**
 * Toggle switch (label.toggle-switch > input[type="checkbox"] + span.toggle-slider)
 */

.toggle-switch {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 52px;
  height: 28px;

  & input {
    width: 0;
    height: 0;
    opacity: 0;

    &:checked + .toggle-slider {
      background-color: var(--color-brand);

      &::before {
        transform: translateX(24px);
      }
    }

    &:focus + .toggle-slider {
      box-shadow: 0 0 0 3px var(--color-brand);
    }

    &:disabled + .toggle-slider {
      background-color: var(--color-brand);
      opacity: 0.6;
      cursor: not-allowed;
    }
  }

  & .toggle-slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background-color: var(--color-gray-soft);
    border-radius: 28px;
    transition: var(--transition);

    &::before {
      content: '';
      position: absolute;
      left: 4px;
      bottom: 4px;
      width: 20px;
      height: 20px;
      background-color: var(--color-white);
      border-radius: 50%;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
      transition: var(--transition);
    }
  }
}

/**
 * Confirmation notice (#cookie-pref-confirmation)
 *
 * Initial state hidden ; assets/js/cookies.js flips display to `block` on
 * submit (inline style), then back after 4s.
 */

#cookie-pref-confirmation {
  display: none;
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background-color: var(--color-brand);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: 600;
}