/* =========================
   Helpdesk Modal (clean)
   ========================= */

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

/* base modal */
#roHelpdeskModal.ro-modal[aria-hidden="true"]{ display:none; }
#roHelpdeskModal.ro-modal[aria-hidden="false"]{
  display:block;
}

#roHelpdeskModal .ro-modal__backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
}

#roHelpdeskModal .ro-modal__dialog{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: min(860px, calc(100vw - 24px));
  max-height: 84vh;

  background: var(--ro-bg-0);
  border: 1px solid var(--ro-dolphing-300);
  border-radius: var(--ro-radius-16);
  box-shadow: 0 18px 50px rgba(0,0,0,.18);

  display: flex;
  flex-direction: column;
  overflow: hidden; /* header/footer fixed + body scroll */
}

/* header/footer */
#roHelpdeskModal .ro-modal__header{
  padding: var(--ro-space-16);
  border-bottom: 1px solid color-mix(in srgb, var(--ro-neutral-900) 10%, transparent);
}

@media (max-width: 640px){
  #roHelpdeskModal .ro-modal__header{
  padding: var(--ro-space-8);
  }
}

#roHelpdeskModal .ro-modal__footer{
  padding: var(--ro-space-16);
  border-top: 1px solid color-mix(in srgb, var(--ro-neutral-900) 10%, transparent);
  display: flex;
  gap: var(--ro-space-12);
  justify-content: flex-end;
}

/* body scroll */
#roHelpdeskModal .ro-modal__body{
  flex: 1;
  overflow: auto;
  padding: var(--ro-space-16);
}

/* steps */
#roHelpdeskModal [data-hd-step]{
  display:block;
}

/* text */
.ro-helpdesk__hint{
  margin: 0 0 var(--ro-space-16);
  color: var(--ro-neutral-700);
}


/* meta blocks */
.ro-helpdesk__meta{
  display: flex;
  gap: var(--ro-space-8);
  align-items: baseline;
  padding: var(--ro-space-12);
  border-radius: var(--ro-radius-8);
  background: color-mix(in srgb, var(--ro-dolphing-100) 70%, white);
  margin-bottom: var(--ro-space-12);
}

@media (max-width: 640px){
  .ro-helpdesk__meta{
  padding: var(--ro-space-4) var(--ro-space-12);
  }
}


@media (max-width: 640px){
  #roHelpdeskModal .ro-modal__dialog{
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;
    transform: none;
    width: auto;
    max-height: calc(100dvh - 24px);
  }

  #roHelpdeskModal .ro-modal__body{
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}


.ro-helpdesk__metaLabel{
  color: var(--ro-neutral-700);
  font-size: var(--ro-font-size-s);
}
.ro-helpdesk__metaValue{
  font-weight: var(--ro-font-weight-bold);
  font-size: var(--ro-font-size-s);
}

/* step 1 cards */
.ro-helpdesk__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ro-space-12);
}

@media (max-width: 640px){
  .ro-helpdesk__grid{ grid-template-columns: 1fr; 
  gap: var(--ro-space-8);
  }
}

.ro-helpdesk__card{
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--ro-neutral-900) 10%, transparent);
  background: var(--ro-bg-0);
  border-radius: var(--ro-radius-8);
  padding: var(--ro-space-16);
  text-align: left;
  cursor: pointer;

  display: grid;
  grid-template-columns: var(--ro-size-32) 1fr;
  column-gap: var(--ro-space-12);
  row-gap: var(--ro-space-4);

  box-shadow: 2px 2px 0 0 color-mix(in srgb, var(--ro-dolphing-500) 25%, transparent);
}

@media (max-width: 640px){
  .ro-helpdesk__card{
  padding: var(--ro-space-4) var(--ro-space-12);
  row-gap: 0;
  }
}



.ro-helpdesk__card:hover{
  border-color: color-mix(in srgb, var(--ro-dolphing-500) 35%, transparent);
}
.ro-helpdesk__card:focus-visible{
  outline: 2px solid var(--ro-focus-ring-color);
  outline-offset: var(--ro-space-2);
}
.ro-helpdesk__cardIco i{
  font-size: var(--ro-size-24);
  color: var(--ro-dolphing-700);
}
.ro-helpdesk__cardTitle{
  font-weight: var(--ro-font-weight-bold);
  font-size: var(--ro-font-size-m);
  color: var(--ro-neutral-950);
}

@media (max-width: 640px){
  .ro-helpdesk__cardTitle{
  font-size: var(--ro-font-size-s) ;
  }
}


.ro-helpdesk__cardDesc{
  grid-column: 2 / -1;
  font-size: var(--ro-font-size-s);
  color: var(--ro-neutral-700);
}

@media (max-width: 640px){
  .ro-helpdesk__cardDesc{
  font-size: var(--ro-font-size-xs);
  }
}

/* guided steps (choices) */
.ro-hd__title{
  margin: 0 0 var(--ro-space-6);
  font-size: var(--ro-font-size-xl);
  font-weight: var(--ro-font-weight-bold);
}
.ro-hd__desc{
  margin: 0 0 var(--ro-space-16);
  color: var(--ro-neutral-700);
}

.ro-hd__choices{
  display: grid;
  gap: var(--ro-space-12);
  margin: 0 0 var(--ro-space-16);
}

.ro-hd__choice{
  appearance: none;
  width: 100%;
  text-align: left;
  cursor: pointer;

  padding: var(--ro-space-16);
  border-radius: var(--ro-radius-8);
  border: 1px solid color-mix(in srgb, var(--ro-neutral-900) 10%, transparent);
  background: var(--ro-bg-0);

  box-shadow: 2px 2px 0 0 color-mix(in srgb, var(--ro-dolphing-500) 18%, transparent);
}

@media (max-width: 640px){
  .ro-hd__choice{
  padding: var(--ro-space-4) var(--ro-space-12);
  row-gap: 0;
  }
}


.ro-hd__choice:hover{
  border-color: color-mix(in srgb, var(--ro-dolphing-500) 35%, transparent);
}

/* ✅ ta modif demandée : état sélectionné */
.ro-hd__choice.is-active{
  border-color: color-mix(in srgb, var(--ro-dolphing-700) 55%, transparent);
  box-shadow: 2px 2px 0 0 color-mix(in srgb, var(--ro-dolphing-700) 35%, transparent);
}

/* inputs final step */
.ro-helpdesk .ro-hd__label{
  display: block;
  margin: 0 0 var(--ro-space-12);
  font-size: var(--ro-font-size-s);
  font-weight: var(--ro-font-weight-semB);
}

@media (max-width: 640px){
  .ro-hd__label{
  font-size: var(--ro-font-size-xs);
  }
}

.ro-helpdesk .ro-hd__input,
.ro-helpdesk textarea{
  width: 100%;
  border-radius: var(--ro-radius-12);
  border: 1px solid color-mix(in srgb, var(--ro-neutral-900) 12%, transparent);
  padding: var(--ro-space-12) var(--ro-space-14);
  font: inherit;
  margin-top: var(--ro-space-8);
  min-height: var(--ro-size-44);
}

@media (max-width: 640px){
  .ro-helpdesk textarea{
  margin-top: 0;
  height: 90px;
  }

  .ro-hd__label{
    display: flex !important;
    flex-direction: column; 
  }
}

.ro-helpdesk textarea{ resize: vertical; }

.ro-helpdesk__msg{
  margin: var(--ro-space-12) 0 0;
  color: var(--ro-neutral-700);
  font-size: var(--ro-font-size-s);
}

.ro-helpdesk__done{
  margin: 0;
  font-weight: var(--ro-font-weight-bold);
}

/* Contexte always-on */
#roHelpdeskModal .ro-helpdesk__ctx{
  display: grid;
  gap: var(--ro-space-12);
  margin-bottom: var(--ro-space-16);
}

@media (max-width: 640px){
  #roHelpdeskModal .ro-helpdesk__ctx{
  gap: 0;
  margin-bottom: 0;
  }
}


#roHelpdeskModal .ro-hd__choice.is-active{
  border-color: var(--ro-dolphing-500);
  box-shadow: 2px 2px 0 0 var(--ro-dolphing-400);
}

.ro-hd__recap{
  margin: 0 0 var(--ro-space-12);
  padding: var(--ro-space-12);
  border-radius: var(--ro-radius-12);
  background: color-mix(in srgb, var(--ro-dolphing-100) 70%, white);
  border: 1px solid var(--ro--border-dolphing);
  font-size: var(--ro-font-size-s);
}
.ro-hd__only.is-hidden{ display:none !important; }

.ro-hd__recap{
  display:flex;
  gap: var(--ro-space-8);
  align-items: baseline;
  padding: var(--ro-space-12);
  border-radius: var(--ro-radius-8);
  background: color-mix(in srgb, var(--ro-dolphing-100) 70%, white);
  border: none;
  margin: 0 0 var(--ro-space-12);
}

@media (max-width: 640px){
  .ro-hd__recap{
  gap: 0;
  margin-bottom: 0;
  }
}

.ro-hd__recapLabel{
  font-size: var(--ro-font-size-s);
  color: var(--ro-neutral-700);
}

.ro-hd__recapValue{
  font-size: var(--ro-font-size-s);
  font-weight: var(--ro-font-weight-bold);
  color: var(--ro-neutral-950);
}

@media (max-width: 640px){
  .ro-hd__recapValue{
  font-size: var(--ro-font-size-xs);
  }
}

.ro-helpdesk__done{
  text-align:center;
  padding: var(--ro-space-32) 0;
  font-size: var(--ro-font-size-m);
}