/* ROXI / DIALOG — estilos específicos */
.modal {
  position:fixed;
  z-index:81;
  top:50%;
  left:50%;
  transform:translate(-50%,-47%) scale(.97);
  width:min(830px,calc(100% - 30px));
  max-height:calc(100vh - 48px);
  background:var(--color-white);
  border-radius:24px;
  box-shadow:0 20px 70px var(--swatch-15071147);
  overflow:auto;
  opacity:0;
  visibility:hidden;
  transition:transform .2s,opacity .2s,visibility .2s
}
.modal.active {
  opacity:1;
  visibility:visible;
  transform:translate(-50%,-50%) scale(1)
}
.modal-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:22px 26px 17px;
  border-bottom:1px solid var(--border)
}
.modal-header h2 {
  font:900 24px var(--font-heading);
  margin:0
}
.modal-inner {
  display:grid;
  grid-template-columns:.84fr 1.16fr;
  gap:20px;
  padding:24px 26px 30px
}
.modal-preview {
  background:var(--swatch-ffedf3);
  border-radius:19px;
  overflow:hidden;
  min-height:290px
}
.modal-preview img {
  width:100%;
  height:100%;
  object-fit:cover
}
.modal-form h3 {
  font:800 20px var(--font-heading);
  margin:5px 0 15px
}
.form-label {
  display:block;
  font-size:var(--font-size-11);
  font-weight:900;
  margin:15px 0 8px
}
.choices {
  display:flex;
  flex-wrap:wrap;
  gap:7px
}
.chip {
  border:1px solid var(--swatch-eddae2);
  background:white;
  border-radius:9px;
  font-size:var(--font-size-11);
  font-weight:750;
  padding:10px 11px
}
.chip.selected {
  border-color:var(--pink);
  background:var(--color-surface-pink);
  color:var(--pink)
}
.modal select,.modal input {
  border:1px solid var(--swatch-efdde6);
  border-radius:10px;
  padding:12px 13px;
  outline:0;
  width:100%;
  font-size:var(--font-size-12);
  background:var(--color-white);
  color:var(--ink)
}
.builder-total {
  background:var(--swatch-fff3f7);
  border-radius:12px;
  padding:14px;
  margin:17px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px
}
.builder-total small {
  font-size:var(--font-size-11);
  color:var(--swatch-8f7181)
}
.builder-total strong {
  font:900 23px var(--font-heading);
  color:var(--pink)
}
.modal-form .btn {
  width:100%
}
.modal-subtext {
  color:var(--swatch-9c8590);
  font-size:var(--font-size-10);
  line-height:1.55;
  margin-top:10px
}
.detail-modal .modal-inner {
  grid-template-columns:.95fr 1.05fr;
  align-items:center
}
.detail-modal .modal-preview {
  min-height:350px
}
.detail-title {
  font:900 32px var(--font-heading);
  letter-spacing:-.9px;
  margin:10px 0
}
.detail-modal .detail-desc {
  font-size:var(--font-size-13);
  color:var(--swatch-86747e);
  line-height:1.7;
  margin:15px 0
}
.detail-modal ul {
  font-size:var(--font-size-12);
  line-height:2;
  color:var(--swatch-806b79);
  padding-left:19px
}
.detail-modal .btn {
  margin-top:15px
}
.detail-tag {
  color:var(--pink);
  font-weight:900;
  letter-spacing:1.8px;
  text-transform:uppercase;
  font-size:var(--font-size-10)
}