/* =========================
   BP MODAL
========================= */

.bp-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.bp-modal.is-open{
  display:block;
}

/* =========================
   OVERLAY
========================= */

.bp-modal__overlay{
  position:absolute;
  inset:0;
  background: var(--bp-modal-bg, rgba(15,17,21,.55));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* =========================
   PANEL
========================= */

.bp-modal__panel{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);

  width:min(720px, calc(100vw - 32px));
  max-height:min(760px, calc(100vh - 48px));

  background: var(--bp-modal-card, #fff);
  color: var(--bp-modal-txt, #111827);

  border-radius:24px;

  box-shadow:
    0 22px 70px rgba(0,0,0,.28);

  overflow:hidden;

  outline:1px solid rgba(0,0,0,.06);
}

/* =========================
   HEADER
========================= */

.bp-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding:14px 16px;

  border-bottom:1px solid rgba(0,0,0,.06);

  position:relative;
}

.bp-modal__title{
  margin:0;

  font-weight:800;
  font-size:16px;
  line-height:1.2;
}

/* =========================
   CLOSE
========================= */

.bp-modal__close{
  appearance:none;
  border:0;
  background:transparent;

  cursor:pointer;

  width:36px;
  height:36px;

  border-radius:10px;

  display:grid;
  place-items:center;

  padding:0;
  line-height:0;

  transition: background .15s ease;
}

.bp-modal__close:hover{
  background:#000 !important;
}

.bp-modal__close:focus,
.bp-modal__close:focus-visible{
  outline:none;
  box-shadow:none;
  background:transparent;
}

.bp-modal__close svg{
  width:18px;
  height:18px;
  display:block;

  stroke: rgba(31,41,55,.8);
}

.bp-modal__close:hover svg{
  stroke:#fff;
}

/* =========================
   BODY
========================= */

.bp-modal__body{
  padding:18px 20px 22px;

  overflow:auto;

  font-size:.95rem;
  line-height:1.65;

  color: rgba(15,23,42,.68);
}

.bp-modal__body h3{
  margin:22px 0 8px;
  font-size:1rem;
  color:#111827;
}

.bp-modal__body h3:first-child{
  margin-top:0;
}

.bp-modal__body p{
  margin:0 0 14px;
}

/* =========================
   MOBILE / TABLET
========================= */

@media (max-width:1024px){

  .bp-modal__panel{
    left:0;
    right:0;
    top:auto;
    bottom:0;

    transform:none;

    width:100%;
    max-height:82vh;

    border-radius:18px 18px 0 0;

    box-shadow:
      0 -18px 60px rgba(0,0,0,.28);

    display:flex;
    flex-direction:column;
  }

  .bp-modal__body{
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }

  .bp-modal__head::before{
    content:"";

    position:absolute;

    left:50%;
    top:8px;

    transform:translateX(-50%);

    width:44px;
    height:4px;

    border-radius:999px;

    background:rgba(0,0,0,.12);
  }

  .bp-modal__head{
    padding-top:18px;
  }
}