:root{
  --bsc-radius:34px;
  --bsc-glass:rgba(61,85,102,.55);
  --bsc-line:rgba(255,255,255,.25);
  --bsc-muted:rgba(255,255,255,.75);
  --bsc-text:#fff;
}

.bsc-open{
  padding:12px 18px;border-radius:12px;border:0;cursor:pointer;
  background:#fff;color:#1c3550;font-weight:800;
}

.bsc-modal{position:fixed;inset:0;display:none;z-index:999999}
.bsc-modal.is-open{display:block}
.bsc-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}

.bsc-dialog{
  position:relative;
  width:min(1100px, calc(100vw - 32px));
  margin:clamp(14px, 5vh, 60px) auto;
  padding:clamp(18px, 3vw, 46px);
  border-radius:var(--bsc-radius);
  color:var(--bsc-text);
  background:var(--bsc-glass);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 90px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow:hidden;
}

/* Backdrop image داخل الـModal */
.bsc-dialog::before{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(135deg, rgba(6,27,44,.65), rgba(61,85,102,.45)),
    var(--bsc-modal-bg, none);
  background-size:cover;
  background-position:center;
  filter:saturate(1.05) contrast(1.05);
  z-index:0;
}
.bsc-dialog > *{position:relative;z-index:1}

.bsc-close{
  position:absolute;top:18px;right:18px;
  width:40px;height:40px;border-radius:12px;
  background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.15);
  color:#fff;font-size:22px;cursor:pointer;line-height:1;
}

.bsc-title{margin:0;text-align:center;font-size:clamp(22px, 2.2vw, 34px);font-weight:900}
.bsc-sub{margin:8px 0 20px;text-align:center;color:var(--bsc-muted);font-size:clamp(12px, 1.2vw, 14px)}

.bsc-stepsbar{margin:14px 0 26px}
.bsc-stepsLine{position:relative;height:2px;background:var(--bsc-line);margin:16px 0 14px}
.bsc-stepsProgress{position:absolute;left:0;top:0;height:2px;width:0;background:#fff;transition:width .25s}

.bsc-steps{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.bsc-step{display:flex;align-items:center;gap:10px;min-width:140px;opacity:.85}
.bsc-stepIcon{
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
}
.bsc-step.is-active{opacity:1}
.bsc-step.is-active .bsc-stepIcon{background:#fff;color:#1c3550;border-color:#fff}
.bsc-stepMeta{font-size:12px;color:var(--bsc-muted);line-height:1.1}
.bsc-stepLabel{font-weight:900;line-height:1.1}

.bsc-body{min-height:180px}
.bsc-field{margin:18px 0}
.bsc-field label{display:block;margin-bottom:10px;font-weight:900}
.bsc-field input,.bsc-field select{
  width:100%;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.12);
  color:#fff;
  outline:none;
}
.bsc-field input::placeholder{color:rgba(255,255,255,.65)}

.bsc-cards{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px}
.bsc-card{
  width:150px;height:150px;
  background:#fff;color:#1c3550;
  border-radius:18px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;
  cursor:pointer;
  border:3px solid transparent;
  transition:.2s;
}
.bsc-card i{font-size:34px;color:#4f6cff}
.bsc-card:hover{transform:translateY(-3px)}
.bsc-card.is-active{border-color:#4f6cff}

.bsc-actions{display:flex;gap:14px;justify-content:flex-end;margin-top:22px}
.bsc-prev,.bsc-next{
  padding:12px 26px;border-radius:12px;border:0;cursor:pointer;font-weight:900
}
.bsc-prev{background:#fff;color:#1c3550;opacity:.9}
.bsc-next{background:#fff;color:#1c3550}
.bsc-prev:disabled,.bsc-next:disabled{opacity:.6;cursor:not-allowed}

.bsc-error{color:#ffd2d2;margin-top:10px;font-weight:800}

@media (max-width:600px){
  .bsc-step{min-width:46px}
  .bsc-stepTxt{display:none}
  .bsc-cards{justify-content:center}
  .bsc-actions{justify-content:space-between}
}

/* =========================
   DONE message (inside modal)
   ========================= */
.bsc-result{
  margin-top: 18px;
}

.bsc-result-card{
  width: min(520px, 100%);
  margin: 0 auto;
  padding: 22px 18px;
  border-radius: 18px;
  text-align: center;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  transform: scale(.96);
  animation: bscResultPop .22s ease-out forwards;
}

@keyframes bscResultPop{
  to{ transform: scale(1); }
}

.bsc-result-card.is-success{
  background: #081a12;
  border-color: rgba(34,197,94,.35);
}

.bsc-result-title{
  margin-top: 10px;
  font-size: 34px;
  font-weight: 900;
  color: #ffffff;
}

.bsc-result-card.is-success .bsc-result-title{
  color: #22c55e;
}

.bsc-result-sub{
  margin-top: 6px;
  font-size: 14px;
  color: rgba(255,255,255,.85);
}

.bsc-result-icon{
  width: 84px;
  height: 84px;
  margin: 0 auto;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,.55);
  position: relative;
}

.bsc-result-card.is-success .bsc-result-icon{
  border-color: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,.25);
  animation: bscDonePulse .5s ease-out .05s forwards;
}

@keyframes bscDonePulse{
  to{ box-shadow: 0 0 0 14px rgba(34,197,94,0); }
}

.bsc-result-card.is-success .bsc-result-icon:after{
  content:"";
  position:absolute;
  width: 22px;
  height: 44px;
  border-right: 6px solid #22c55e;
  border-bottom: 6px solid #22c55e;
  transform: rotate(45deg);
  left: 28px;
  top: 16px;
  opacity: 0;
  animation: bscDoneDraw .25s ease-out .15s forwards;
}

@keyframes bscDoneDraw{
  to{ opacity: 1; }
}