#pa-preaux-modal{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(2px);

  font-family:Montserrat,Arial,sans-serif;
}

#pa-preaux-modal.is-open{
  display:flex;
}

.pa-preaux-dialog{
  width:min(100%,620px);
  padding:32px;
  background:#fff;
  border-radius:10px;
}

.pa-preaux-title{
  margin:0 0 24px;
  text-align:center;
  font-size:42px;
  font-weight:300;
  line-height:1.1;
  color:#2B2725;
}

.pa-preaux-list{
  display:grid;
  gap:9px;
  width:100%;
  max-width:520px;
  margin:0 auto;
}

.pa-preaux-card{
  display:grid;
  grid-template-columns:
      24px
      minmax(0,1fr)
      auto;
  align-items:center;
  gap:14px;
  width:100%;
  min-height:56px;
  padding:14px 18px;
  border:0;
  border-radius:10px;
  background:#6F7673;
  color:#fff;
  font:500 12px Montserrat,Arial,sans-serif;
  text-align:left;
  cursor:pointer;
  transition:
      opacity .18s ease,
      background .18s ease;
}
.pa-preaux-card:hover{
  opacity:.94;
}
.pa-preaux-card.is-selected{
  background:#6F7673;
}

.pa-preaux-check{
  width:18px;
  height:18px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.55);
  background:transparent;
  transition:
      background .18s ease,
      border-color .18s ease;
}
.pa-preaux-card.is-selected .pa-preaux-check{
  background:#111;
  border-color:#111;
}
.pa-preaux-price{
  color:rgba(255,255,255,.82);
  font-size:12px;
  white-space:nowrap;
}
.pa-preaux-actions{
  display:flex;
  gap:12px;
  width:100%;
  max-width:520px;
  margin:24px auto 0;
}
.pa-preaux-actions button{
  min-height:48px;
  padding:0 20px;
  border-radius:10px;
  font:500 13px Montserrat,Arial,sans-serif;
  cursor:pointer;
}

#pa-preaux-book{
  border:1px solid #6F7673;
  background:#6F7673;
  color:#fff;
}

#pa-preaux-book:hover{
  background:#fff;
  color:#6F7673;
}

#pa-preaux-skip{
  border:1px solid #6F7673;
  background:#fff;
  color:#6F7673;
}
#pa-preaux-skip:hover{
  background:#fff;
  color:#6F7673;
}

@media (max-width:600px){

  #pa-preaux-modal{
    padding:12px;
  }
  .pa-preaux-dialog{
    padding:20px 16px;
  }
  .pa-preaux-title{
    font-size:12px;
    margin-bottom:16px;

  }
  .pa-preaux-card{
    min-height:52px;
    padding:13px 14px;
    gap:10px;
    grid-template-columns:
        22px
        minmax(0,1fr)
        auto;
  }
  .pa-preaux-check{
    width:16px;
    height:16px;
  }

  .pa-preaux-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:20px;
  }

  .pa-preaux-actions button{
    width:100%;
    min-height:46px;
    padding:8px 12px;
    font-size:12px;
  }

}