/* Hoosha v12.10 — force billing package chooser into a real modal */

.billing-modal-backdrop{
  position:fixed !important;
  inset:0 !important;
  z-index:100300 !important;
  display:grid !important;
  place-items:center !important;
  padding:18px !important;
  background:rgba(31,24,46,.48) !important;
  backdrop-filter:blur(8px) !important;
  overflow:auto !important;
}

.billing-modal-panel{
  width:min(760px,94vw) !important;
  max-height:88vh !important;
  overflow:auto !important;
  position:relative !important;
  direction:rtl !important;
  background:#fff !important;
  border:1px solid rgba(255,255,255,.9) !important;
  border-radius:28px !important;
  box-shadow:0 28px 90px rgba(45,31,82,.28) !important;
  padding:24px !important;
  margin:auto !important;
}

.billing-modal-close{
  position:absolute !important;
  top:14px !important;
  left:14px !important;
  width:36px !important;
  height:36px !important;
  border:0 !important;
  border-radius:12px !important;
  background:#f2eef8 !important;
  color:#3a3148 !important;
  cursor:pointer !important;
  font-size:22px !important;
  line-height:1 !important;
}

.billing-modal-head{
  text-align:center !important;
  padding:2px 50px 10px !important;
}

.billing-modal-kicker{
  display:block !important;
  color:#6c4cf5 !important;
  font-size:9px !important;
  font-weight:900 !important;
}

.billing-modal-head h2{
  margin:5px 0 5px !important;
  font-size:20px !important;
  color:#2f2940 !important;
}

.billing-modal-head p{
  margin:0 !important;
  color:#817a8d !important;
  font-size:10px !important;
}

.billing-gift-banner.popup{
  max-width:520px !important;
  margin:12px auto 18px !important;
  padding:11px 14px !important;
  border-radius:17px !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  background:linear-gradient(120deg,#fff4c7,#fff9e8 48%,#f4edff) !important;
  border:1px solid #f0d978 !important;
}

.billing-gift-banner.popup>span{
  font-size:28px !important;
}

.billing-gift-banner.popup>div{
  display:flex !important;
  flex-direction:column !important;
  gap:1px !important;
}

.billing-gift-banner.popup strong{
  color:#765900 !important;
  font-size:12px !important;
}

.billing-gift-banner.popup small{
  color:#8a7a51 !important;
  font-size:8.5px !important;
}

.billing-modal-packages{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:10px !important;
}

.billing-package.popup-package{
  min-width:0 !important;
  background:#fff !important;
  border:2px solid #eee9f6 !important;
  border-radius:20px !important;
  padding:18px 12px 13px !important;
  position:relative !important;
  text-align:center !important;
  overflow:hidden !important;
  box-shadow:none !important;
}

.billing-package.popup-package.featured{
  border-color:#b7a5f6 !important;
  box-shadow:0 8px 24px rgba(95,69,183,.12) !important;
}

.billing-featured{
  position:absolute !important;
  top:0 !important;
  right:0 !important;
  background:#6c4cf5 !important;
  color:#fff !important;
  border-radius:0 17px 0 14px !important;
  padding:5px 9px !important;
  font-size:7.5px !important;
  font-weight:900 !important;
}

.billing-gift-ribbon.big{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3px !important;
  background:#fff1ae !important;
  color:#745600 !important;
  border:1px solid #efd46a !important;
  border-radius:999px !important;
  padding:6px 9px !important;
  margin:7px auto 9px !important;
  font-size:9px !important;
  font-weight:900 !important;
}

.billing-package.popup-package .billing-package-title{
  display:block !important;
  color:#2f2940 !important;
  font-size:19px !important;
  font-weight:900 !important;
}

.billing-package.popup-package .billing-package-total{
  display:block !important;
  color:#817a8d !important;
  font-size:8.5px !important;
  margin:3px 0 9px !important;
}

.billing-package.popup-package .billing-package-total b{
  color:#5c3fc0 !important;
}

.billing-package.popup-package .billing-package-price{
  color:#5c3fc0 !important;
  font-size:16px !important;
  font-weight:900 !important;
  margin:10px 0 10px !important;
}

.billing-package.popup-package button{
  width:100% !important;
  min-height:42px !important;
  margin-top:3px !important;
  border:0 !important;
  border-radius:12px !important;
  background:linear-gradient(120deg,#5032d8,#6c4cf5) !important;
  color:#fff !important;
  cursor:pointer !important;
  font-size:9.5px !important;
  font-weight:900 !important;
  box-shadow:0 4px 0 #5032d8 !important;
}

.billing-modal-foot{
  margin-top:14px !important;
  padding-top:12px !important;
  border-top:1px solid #eee9f3 !important;
  color:#817a8d !important;
  text-align:center !important;
  font-size:8.5px !important;
}

/* Payment confirmation stays inside the same modal */
.billing-confirm-icon{
  width:54px !important;
  height:54px !important;
  display:grid !important;
  place-items:center !important;
  margin:2px auto 7px !important;
  border-radius:18px !important;
  background:#f4f0ff !important;
  font-size:27px !important;
}

.billing-modal-panel>h2{
  margin:4px 0 5px !important;
  text-align:center !important;
  font-size:19px !important;
}

.billing-modal-subtitle{
  text-align:center !important;
  color:#817a8d !important;
  margin:0 !important;
  font-size:9.5px !important;
}

.billing-payment-summary{
  max-width:500px !important;
  margin:18px auto 12px !important;
  border:1px solid #ebe5f5 !important;
  border-radius:18px !important;
  overflow:hidden !important;
}

.billing-payment-summary>div{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  padding:11px 14px !important;
  border-bottom:1px solid #eee9f3 !important;
  font-size:10px !important;
}

.billing-payment-summary>div:last-child{
  border-bottom:0 !important;
}

.billing-payment-summary span{
  color:#817a8d !important;
}

.billing-payment-summary strong{
  color:#2f2940 !important;
  font-size:11px !important;
}

.billing-payment-summary .final{
  background:#f7f3ff !important;
  padding-top:14px !important;
  padding-bottom:14px !important;
}

.billing-payment-summary .final span,
.billing-payment-summary .final strong{
  color:#5032d8 !important;
  font-weight:900 !important;
}

.billing-payment-summary .final strong{
  font-size:15px !important;
}

.billing-confirm-gift{
  max-width:500px !important;
  margin:0 auto 12px !important;
  padding:10px 12px !important;
  border-radius:14px !important;
  background:#fff5c9 !important;
  color:#725800 !important;
  text-align:center !important;
  font-size:10px !important;
}

.billing-confirm-actions{
  max-width:500px !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:1fr 1.7fr !important;
  gap:8px !important;
}

.billing-confirm-actions button{
  min-height:44px !important;
  border-radius:13px !important;
  cursor:pointer !important;
  font-size:10px !important;
  font-weight:900 !important;
}

.billing-back-button{
  border:1px solid #ded7eb !important;
  background:#fff !important;
  color:#5b5368 !important;
}

.billing-pay-button{
  border:0 !important;
  background:linear-gradient(120deg,#5032d8,#6c4cf5) !important;
  color:#fff !important;
  box-shadow:0 4px 0 #5032d8 !important;
}

@media(max-width:700px){
  .billing-modal-panel{
    width:min(470px,95vw) !important;
    padding:20px 14px 16px !important;
    border-radius:24px !important;
  }
  .billing-modal-packages{
    grid-template-columns:1fr !important;
  }
  .billing-package.popup-package{
    padding:16px !important;
  }
  .billing-confirm-actions{
    grid-template-columns:1fr !important;
  }
}