/*!
 * Red Apron Grid Cart – Modal Styles (trash removed)
 */

/* Ensure modal body scrolls if content is tall */
#ragcModal .modal-body{
  overflow-y:auto;
  max-height:80vh;
}

/* Cap carousel images so title/details remain visible */
#ragcModalCarousel .carousel-item img{
  object-fit:contain;
  width:100%;
}

/* Smaller viewports: shrink modal width */
@media (max-width:767px){
  #ragcModal .modal-dialog{
    max-width:95vw;
    margin:1rem auto;
  }
}

/* Desktop cap */
@media (min-width:768px){
  #ragcModal .modal-dialog{
    max-width:80vw;
  }
}

/* Darken carousel controls in the modal */
#ragcModalCarousel .carousel-control-prev-icon,
#ragcModalCarousel .carousel-control-next-icon{
  filter:invert(1);
}

/* Full‑screen zoom overlay */
#ragcZoomOverlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  align-items:center;
  justify-content:center;
  z-index:1060; /* above Bootstrap modal (1050) */
  cursor:zoom-out;
}
#ragcZoomOverlay img{
  max-width:90%;
  max-height:90%;
  object-fit:contain;
}

/* ---------- Controls (trash removed) ---------- */

/* Container for price + controls in modal */
.ragc-modal-price-row{
  gap:.5rem;
}

/* Buttons container */
.ragc-modal-btns{
  display:flex;
  align-items:center;
  gap:12px;
}

/* Fruit buttons only (increase/decrease) */
#ragcModal .ragc-modal-btns .ragc-fruit-btn,
#ragcModal .ragc-price-row .ragc-fruit-btn{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:56px !important;
  height:56px !important;
  flex:0 0 56px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  border-radius:50%;
  cursor:pointer;
}

/* Images/SVGs inside the buttons should fill */
#ragcModal .ragc-modal-btns .ragc-fruit-btn img,
#ragcModal .ragc-modal-btns .ragc-fruit-btn svg,
#ragcModal .ragc-price-row .ragc-fruit-btn img,
#ragcModal .ragc-price-row .ragc-fruit-btn svg{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}

/* Quantity chip */
#ragcModalQty{
  min-width:1.5rem;
  text-align:center;
  display:inline-block;
}

/* Legacy Bootstrap .btn override (in case something slips in) */
#ragcModal button.btn{
  background:none !important;
  border:none !important;
  width:auto !important;
  height:auto !important;
  padding:0 !important;
}

/* Optional tighter spacing on generic price rows if used elsewhere */
.ragc-price-row{ gap:.5rem; }
.ragc-price-row .d-flex.align-items-center{
  gap:.5rem;
  margin-left:auto; /* push controls to the right */
}

/* ---------- Slide‑in info panel ---------- */

#ragcModal #ragcModalDetails{
  position:relative;
  overflow:hidden;
  border-radius:20px;
}

#ragcModal #ragcModalDetails .ragc-info-panel{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform:translateX(105%);
  opacity:0;
  visibility:hidden;
  pointer-events:none;

  background:rgba(255,255,255,.95);
  color:#111;

  border-radius:24px;
  box-shadow:-12px 0 36px rgba(0,0,0,.25);
  transition:transform .28s ease, opacity .22s ease, visibility 0s linear .28s;
  z-index:5;
  overflow:hidden;
}

#ragcModal #ragcModalDetails .ragc-info-panel.open{
  transform:translateX(0);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:transform .28s ease, opacity .22s ease, visibility 0s;
}

#ragcModal #ragcModalDetails .ragc-info-panel__inner{
  height:100%;
  overflow-y:auto;
  padding:1.25rem;
  box-sizing:border-box;
}

/* Close button */
.ragc-info-panel__close{
  position:absolute;
  top:16px;
  right:16px;
  z-index:10;
  width:36px;
  height:36px;
  border:none;
  border-radius:50%;
  background:#000;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  line-height:1;
  font-weight:700;
  cursor:pointer;
}

/* Content typography (dark on light panel) */
#ragcModal #ragcModalDetails .ragc-info-panel__content{
  white-space:pre-wrap;
  line-height:1.5;
}
#ragcModal #ragcModalDetails .ragc-info-panel__inner h1,
#ragcModal #ragcModalDetails .ragc-info-panel__inner h2,
#ragcModal #ragcModalDetails .ragc-info-panel__inner h3{
  margin-top:0;
  color:#111;
}
#ragcModal #ragcModalDetails .ragc-info-panel__inner p{
  color:#222;
}
#ragcModal #ragcModalDetails .ragc-info-panel__inner ul{
  padding-left:1.25rem;
}
#ragcModal #ragcModalDetails .ragc-info-panel__inner li{
  color:#222;
}
#ragcModal #ragcModalDetails .ragc-info-panel__inner a{
  color:#c21f1f;
  text-decoration:underline;
}

/* Mobile tweaks */
@media (max-width:768px){
  #ragcModal #ragcModalDetails .ragc-info-panel{
    border-radius:18px;
  }
}
[inert] { pointer-events: none; }
[inert] * { pointer-events: none; }