.wcwb-configurator,
.wcwb-form{
  width:100%;
}

.wcwb-configurator{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:0 24px;
  box-sizing:border-box;
}

.wcwb-form{
  display:grid;
  grid-template-columns:minmax(0,75%) minmax(0,25%);
  gap:24px;
  align-items:start;
}

.wcwb-main{
  display:grid;
  gap:24px;
  min-width:0;
}

.wcwb-step{
  display:block;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:20px;
  width:100%;
  box-sizing:border-box;
}

.wcwb-step[hidden]{
  display:none !important;
}

.wcwb-step-count{
  font-size:13px;
  font-weight:600;
  color:#6b7280;
  margin-bottom:10px;
}

.wcwb-step-actions{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:20px;
}

.wcwb-step-actions-next-only{
  justify-content:flex-end;
}

.wcwb-options-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.wcwb-radio-card,
.wcwb-extra-card{
  display:block;
  border:1px solid #d1d5db;
  border-radius:12px;
  padding:14px;
  cursor:pointer;
  box-sizing:border-box;
}

.wcwb-radio-card input,
.wcwb-extra-card input{
  margin-right:8px;
}

.wcwb-radio-content{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.wcwb-design-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.wcwb-design-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  border:1px solid #d1d5db;
  border-radius:12px;
  padding:10px;
  cursor:pointer;
  min-width:0;
  box-sizing:border-box;
}

.wcwb-design-title{
  font-weight:600;
}

.wcwb-design-preview{
  display:block;
  height:320px;
  overflow:auto;
  border-radius:8px;
  border:1px solid #e5e7eb;
  background:#f9fafb;
}

.wcwb-design-preview img{
  display:block;
  width:100%;
  height:auto;
}

.wcwb-included-box{
  background:#f9fafb;
  border-radius:10px;
  padding:16px;
}

.wcwb-included-list{
  margin:0;
  padding-left:18px;
}

.wcwb-extras-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.wcwb-extra-card span{
  display:flex;
  justify-content:space-between;
  gap:10px;
}

.wcwb-summary{
  width:100%;
  position:sticky;
  top:24px;
  background:#111827;
  color:#fff;
  border-radius:16px;
  padding:20px;
  box-sizing:border-box;
  align-self:start;
}

.wcwb-summary h3,
.wcwb-summary h4{
  color:#fff;
  margin-top:0;
}

.wcwb-summary-lines>div,
.wcwb-pay-now-box>div{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.wcwb-total-row{
  font-size:1.08em;
  border-top:1px solid rgba(255,255,255,.15);
  padding-top:12px;
  margin-top:12px;
}

.wcwb-payment-box{
  display:grid;
  gap:10px;
  margin:18px 0;
}

.wcwb-payment-box label{
  display:block;
}

.wcwb-submit{
  width:100%;
  justify-content:center;
  text-align:center;
}

.wcwb-help{
  margin-top:10px;
  color:#6b7280;
}

@media (max-width: 767px){
  .wcwb-configurator{
    width:100%;
    max-width:100%;
    margin-left:0;
    margin-right:0;
    padding:0 16px;
  }

  .wcwb-form{
    grid-template-columns:1fr;
    gap:16px;
  }

  .wcwb-summary{
    position:static;
    order:2;
    border-radius:14px;
  }

  .wcwb-options-grid,
  .wcwb-design-grid,
  .wcwb-extras-grid{
    grid-template-columns:1fr;
  }

  .wcwb-step{
    padding:16px;
  }

  .wcwb-step-actions{
    flex-direction:column-reverse;
  }

  .wcwb-step-actions .button{
    width:100%;
  }

  .wcwb-design-preview{
    height:260px;
  }
}