/*
 * Ciel de lit V17
 * Guide de hauteur A/B, champ facultatif et rendu textile normalise.
 */

#configurateur-tresse-root #canopyRuffleOptions[hidden],
#configurateur-tresse-root #canopyStitchOptions[hidden],
#configurateur-tresse-root #canopyPocketOptions[hidden],
#configurateur-tresse-root #canopyPocketFabricWrap[hidden],
#configurateur-tresse-root #canopyAModelChips[hidden],
#configurateur-tresse-root #canopyBModelChips[hidden],
#configurateur-tresse-root #canopyBackVariantChips[hidden],
#configurateur-tresse-root #canopySizeGuidePanel[hidden]{
  display:none !important;
}

#configurateur-tresse-root .canopy-height-options{
  gap:7px !important;
  margin-top:4px;
  padding-top:11px;
  border-top:1px solid rgba(83, 66, 53, .12);
}

#configurateur-tresse-root .canopy-height-options > label{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

#configurateur-tresse-root .canopy-optional-label{
  padding:3px 7px;
  border:1px solid rgba(83, 66, 53, .12);
  border-radius:999px;
  color:#8a7e75;
  background:rgba(255, 255, 255, .56);
  font-size:9px;
  font-weight:750;
  letter-spacing:.02em;
  text-transform:none;
}

#configurateur-tresse-root .canopy-height-input-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:stretch;
  gap:7px;
}

#configurateur-tresse-root #canopyDesiredHeight{
  width:100%;
  min-width:0;
  min-height:42px;
  padding:0 12px;
  border:1px solid rgba(83, 66, 53, .18);
  border-radius:14px;
  color:#3f342d;
  background:rgba(255, 255, 255, .82);
  box-shadow:0 8px 22px rgba(67, 51, 40, .05);
  font:inherit;
  font-size:12px;
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

#configurateur-tresse-root #canopyDesiredHeight:focus{
  border-color:rgba(209, 145, 97, .72);
  background:#fff;
  box-shadow:0 0 0 3px rgba(226, 159, 110, .14), 0 10px 26px rgba(67, 51, 40, .07);
}

#configurateur-tresse-root #canopyDesiredHeight::placeholder{
  color:#a49a92;
  opacity:1;
}

#configurateur-tresse-root .canopy-size-guide-btn{
  min-height:42px !important;
  padding:0 12px !important;
  border-color:rgba(209, 145, 97, .34) !important;
  border-radius:14px !important;
  color:#735543 !important;
  background:linear-gradient(145deg, rgba(255, 249, 244, .96), rgba(247, 228, 215, .88)) !important;
  white-space:nowrap;
}

#configurateur-tresse-root .canopy-height-help{
  color:#8a7e75;
  font-size:10px;
  line-height:1.45;
}

#configurateur-tresse-root .canopy-size-guide-panel{
  overflow:hidden;
  margin-top:3px;
  border:1px solid rgba(83, 66, 53, .12);
  border-radius:17px;
  background:rgba(255, 255, 255, .94);
  box-shadow:0 18px 44px rgba(61, 46, 36, .13);
  animation:canopy-guide-reveal .24s cubic-bezier(.2, .8, .2, 1);
}

#configurateur-tresse-root .canopy-size-guide-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 11px 9px 13px;
  border-bottom:1px solid rgba(83, 66, 53, .09);
}

#configurateur-tresse-root .canopy-size-guide-heading > div{
  display:grid;
  gap:2px;
}

#configurateur-tresse-root .canopy-size-guide-heading strong{
  color:#4f4036;
  font-size:11px;
}

#configurateur-tresse-root .canopy-size-guide-heading span{
  color:#9b7560;
  font-size:9px;
  font-weight:700;
}

#configurateur-tresse-root .canopy-size-guide-close{
  display:grid;
  flex:0 0 auto;
  width:30px;
  height:30px;
  place-items:center;
  padding:0;
  border:1px solid rgba(83, 66, 53, .12);
  border-radius:50%;
  color:#65564d;
  background:#fffaf6;
  font-size:19px;
  line-height:1;
  cursor:pointer;
}

#configurateur-tresse-root #canopySizeGuideImage{
  display:block;
  width:100%;
  height:auto;
  max-height:56vh;
  object-fit:contain;
  background:#fff;
}

@keyframes canopy-guide-reveal{
  from{
    opacity:0;
    transform:translateY(-5px) scale(.99);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@media (max-width: 640px){
  #configurateur-tresse-root .canopy-height-input-row{
    grid-template-columns:minmax(0, 1fr);
  }

  #configurateur-tresse-root .canopy-size-guide-btn{
    width:100%;
  }

  #configurateur-tresse-root #canopySizeGuideImage{
    max-height:50vh;
  }
}

@media (prefers-reduced-motion: reduce){
  #configurateur-tresse-root .canopy-size-guide-panel{
    animation:none;
  }
}