.elementor-widget-container .xopc-wrap{width:100%;}
.xopc-wrap{
  max-width:900px;
  margin:24px auto;
  padding:0 12px;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#111827;
}
.xopc-form{
  background:#ffffff;
  border-radius:12px;
  border:1px solid #e5e7eb;
  padding:16px 16px 18px;
}
.xopc-title {
    margin: 14px 0 8px;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.xopc-title::after {
    content: "";
    flex: 1;                  /* garis memenuhi sisa ruang */
    border-bottom: 1px solid #000;
    margin-left: 12px;        /* jarak antara teks dan garis */
}
.xopc-products{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:6px;
}
.xopc-card{
  display:flex;
  align-items:center;
  gap:10px;
  background:#ffffff;
  border-radius:10px;
  border:1px solid #e5e7eb;
  padding:10px 12px;
  cursor:pointer;
  width:100%;
}
.xopc-card-img{
  width:52px;
  height:52px;
  object-fit:cover;
  border-radius:8px;
}
.xopc-card-info{
  display:flex;
  flex-direction:column;
}
.xopc-prod{
  font-size:14px;
  font-weight:600;
}
.xopc-price{
  font-size:14px;
  font-weight:700;
  color:#15803d;
}
.xopc-grid{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.xopc-grid label{
  font-size:14px;
  font-weight:600;
	margin-bottom:4px;
  display:flex;
  flex-direction:column;
}
.xopc-grid input{
  margin-top:4px !important;
  padding:8px 10px !important;
  border-radius:8px !important;
  border:1px solid #d1d5db !important; /* border lebih jelas */
  font-size:14px !important;
}

.xopc-phone-group{
  display:grid;
  grid-template-columns:170px 1fr;
  gap:8px;
  margin-top:4px;
	margin-bottom:12px;
}
.xopc-summary{
  border-radius:10px;
  border:1px solid rgb(8 153 207);
  background:#f9fafb;
  padding:10px 12px;
  margin-bottom:10px;
margin-top:12px;
}
.xopc-summary .xopc-prod-name{
  margin:0 0 6px;
  font-size:14px;
  font-weight:600;
}

.xopc-summary-title{
  font-size:15px;
  font-weight:700;
  margin-bottom:8px;
  padding-bottom:6px;
  border-bottom:1px solid #e5e7eb;
  color:#111827;
}
.xopc-summary-title{
  font-size:16px;
  font-weight:700;
  margin-bottom:10px;
  color:#111827;
}
.xopc-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:14px;
  margin:2px 0;
}
.xopc-row.total{
  font-weight:700;
  font-size:15px;
}
.xopc-coupon-box{
  display:flex;
  flex-direction:row;
  gap:8px;
  align-items:center;
  margin-bottom:4px;
}
.xopc-coupon-input{
  flex:1;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid #d1d5db; /* border lebih jelas */
  font-size:14px;
}
.xopc-apply-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 14px;
  border-radius:8px;
  border:1px solid #2563eb;
  background:#2563eb;
  color:#fff;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  position:relative;
}
.xopc-apply-btn[disabled]{
  cursor:not-allowed;
  opacity:.8;
}
.xopc-apply-spinner{
  width:14px;
  height:14px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.6);
  border-top-color:#ffffff;
  animation:spin 1s linear infinite;
  display:none;
}
.xopc-apply-btn.loading .xopc-apply-spinner{
  display:inline-block;
}
.xopc-coupon-msg{
  margin:0;
  font-size:13px;
}
.xopc-payments{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:6px 0 14px;
}
.xopc-payment-item{
  display:flex;
  align-items:center;
  gap:8px;
  border-radius:8px;
  border:1px solid #e5e7eb;
  padding:9px 11px;
  font-size:14px;
  background:#ffffff;
  cursor:pointer;
}
.xopc-pay-icon{
  width:28px;
  height:28px;
  object-fit:contain;
}
.xopc-btn{
  width:100% !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:8px;
  background:#2563eb;
  border:1px solid #1d4ed8;
  color:#ffffff;
  font-weight:600;
  font-size:15px;
  cursor:pointer;
}
.xopc-btn[disabled]{
  opacity:.7;
  cursor:not-allowed;
}
.spinner{
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.6);
  border-top-color:#ffffff;
  animation:spin 1s linear infinite;
  display:none;
}
.xopc-btn.loading .spinner{
  display:inline-block;
}
.xopc-recaptcha-note{
  margin-top:8px;
  font-size:12px;
  color:#6b7280;
  text-align:center;
}
.xopc-recaptcha-note a{
  color:#2563eb;
  text-decoration:none;
}
.xopc-recaptcha-note a:hover{
  text-decoration:underline;
}

/* Bootstrap-like validation */
.form-control,
.form-select{
  display:block;
  width:100%;
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #d1d5db; /* border lebih jelas */
  border-radius: 0.375rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-control:focus,
.form-select:focus{
  color: #212529;
  background-color: #fff;
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}

.invalid-feedback{
  display:none;
  width:100%;
  margin-top:4px;
  font-size:12px;
  color:#dc2626;
}
.was-validated .form-control:invalid,
.was-validated .form-select:invalid{
  border-color:#dc2626;
}
.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-select:invalid ~ .invalid-feedback{
  display:block;
}

/* FORCE FULL WIDTH SUBMIT */
.xopc-btn .xopc-submit{
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:100% !important;
  max-width:100% !important;
  flex:1 1 100% !important;
  box-sizing:border-box;
}

/* Pastikan parent tidak membatasi */
.xopc-wrap .xopc-form{
  width:100%;
}
@keyframes spin{
  to{transform:rotate(360deg);}
}

@media(max-width:640px){
  .xopc-phone-group{
    grid-template-columns:1fr;
  }
  .xopc-coupon-box{
    flex-direction:column;
    align-items:stretch;
  }
}


/* === v1.25.5: Product skeleton + out of stock === */

.xopc-products-skeleton{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:6px;
}
.xopc-skel-card{
  height:64px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  background:linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 37%, #f3f4f6 63%);
  background-size:400% 100%;
  animation:xopcShimmer 1.2s ease-in-out infinite;
}
@keyframes xopcShimmer{
  0%{background-position:100% 0}
  100%{background-position:0 0}
}
.xopc-card.is-disabled{
  opacity:.55;
  cursor:not-allowed;
}
.xopc-card.is-disabled:hover{
  border-color:#e5e7eb;
}
.xopc-stock-badge{
  margin-left:auto;
  font-size:12px;
  font-weight:700;
  color:#dc2626;
  background:#fee2e2;
  border:1px solid #fecaca;
  padding:4px 8px;
  border-radius:999px;
  white-space:nowrap;
}
.xopc-no-stock-msg{
  margin:10px 0 0;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #fecaca;
  background:#fff1f2;
  color:#9f1239;
  font-size:14px;
  font-weight:600;
}