/*
 * ==========================================================
 * VIBE MODAL CORE 1.0
 * ==========================================================
 */

html.vb-modal-open{
  overflow:hidden;
}


.vb-modal-root{
  position:fixed;
  inset:0;

  z-index:1000;

  display:grid;
  place-items:center;

  padding:24px;

  background:
    rgba(4,5,8,.72);

  backdrop-filter:
    blur(8px);

  opacity:0;

  transition:
    opacity
      var(--vb-motion-panel)
      var(--vb-ease);
}


.vb-modal-root.is-open{
  opacity:1;
}


.vb-modal-panel{
  width:
    min(
      100%,
      520px
    );

  max-height:
    min(
      720px,
      calc(100vh - 48px)
    );

  overflow:auto;

  border:
    1px solid
    rgba(255,255,255,.11);

  border-radius:
    18px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.035),
      transparent 120px
    ),
    #11131a;

  box-shadow:
    0 32px 110px
    rgba(0,0,0,.58);

  opacity:0;

  transform:
    translateY(8px)
    scale(.985);

  transition:
    opacity
      var(--vb-motion-panel)
      var(--vb-ease),
    transform
      var(--vb-motion-panel)
      var(--vb-ease);
}


.vb-modal-root.is-open
.vb-modal-panel{
  opacity:1;

  transform:
    translateY(0)
    scale(1);
}


.vb-modal-panel[data-size="sm"]{
  width:
    min(
      100%,
      420px
    );
}


.vb-modal-panel[data-size="lg"]{
  width:
    min(
      100%,
      680px
    );
}


.vb-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;

  padding:
    20px
    20px
    14px;

  border-bottom:
    1px solid
    rgba(255,255,255,.065);
}


.vb-modal-eyebrow{
  margin-bottom:5px;

  color:
    var(--vb-accent);

  font-size:13px;
  font-weight:850;

  letter-spacing:.14em;
  text-transform:uppercase;
}


.vb-modal-title{
  margin:0;

  color:
    var(--vb-text);

  font-size:18px;
  line-height:1.2;

  letter-spacing:-.025em;
}


.vb-modal-close{
  width:30px;
  height:30px;

  flex:0 0 auto;

  display:grid;
  place-items:center;

  border:
    1px solid
    transparent;

  border-radius:9px;

  background:transparent;

  color:
    var(--vb-muted);

  cursor:pointer;

  transition:
    color
      var(--vb-motion-fast)
      var(--vb-ease),
    background
      var(--vb-motion-fast)
      var(--vb-ease),
    border-color
      var(--vb-motion-fast)
      var(--vb-ease);
}


.vb-modal-close:hover{
  border-color:
    var(--vb-border);

  background:
    rgba(255,255,255,.04);

  color:
    var(--vb-text);
}


.vb-modal-body{
  padding:20px;

  color:
    var(--vb-text-soft);
}


.vb-modal-actions{
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;

  padding:
    14px
    20px
    20px;

  border-top:
    1px solid
    rgba(255,255,255,.065);
}


.vb-modal-summary{
  border:
    1px solid
    var(--vb-border);

  border-radius:
    12px;

  overflow:hidden;
}


.vb-modal-summary-row{
  display:flex;
  justify-content:space-between;
  gap:20px;

  padding:
    11px
    13px;

  border-bottom:
    1px solid
    var(--vb-border);
}


.vb-modal-summary-row:last-child{
  border-bottom:0;
}


.vb-modal-summary-label{
  color:
    var(--vb-muted);
}


.vb-modal-summary-value{
  color:
    var(--vb-text);

  font-weight:750;

  text-align:right;

  font-variant-numeric:
    tabular-nums;
}


@media(max-width:560px){

  .vb-modal-root{
    align-items:end;

    padding:12px;
  }

  .vb-modal-panel,
  .vb-modal-panel[data-size="sm"],
  .vb-modal-panel[data-size="lg"]{
    width:100%;

    max-height:
      calc(
        100vh - 24px
      );
  }

}


@media(prefers-reduced-motion:reduce){

  .vb-modal-root,
  .vb-modal-panel{
    transition:none;
  }

}