/* SB PayBox (scoped only inside .sb-paybox) */

.sb-paybox .sb-pay-card{
  border: 2px solid var(--accent, #D4846A);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 40px -10px rgba(0,0,0,0.1);
  max-width: 480px;
  margin: 0 auto;
}

.sb-paybox .sb-pay-header{
  background: linear-gradient(135deg, var(--brand, #7FA99B) 0%, #6B9080 100%);
  color:#fff;
  text-align:center;
  padding: 15px;
  border-radius: 14px 14px 0 0;
}

.sb-paybox .sb-pay-header h3{
  margin:0;
  color:#fff;
  font-size:.9rem;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
}

.sb-paybox .sb-pay-body{
  padding: clamp(20px, 6vw, 30px) clamp(18px, 5vw, 25px);
  text-align:center;
}

.sb-paybox .sb-price-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  margin-bottom:8px;
  flex-wrap:wrap;
}

.sb-paybox .sb-old-price{
  text-decoration: line-through;
  color:#9CA3AF;
  font-size: clamp(1.1rem, 3vw, 1.3rem);
  font-weight:500;
}

.sb-paybox .sb-main-price{
  display:flex;
  align-items:flex-start;
  color: var(--brand, #7FA99B);
  line-height:1;
}

.sb-paybox .sb-main-price .curr{ font-size: clamp(1.3rem, 4vw, 1.6rem); font-weight:600; margin-top:4px; }
.sb-paybox .sb-main-price .val{ font-size: clamp(2.8rem, 8vw, 3.8rem); font-weight:800; letter-spacing:-2px; }
.sb-paybox .sb-main-price .cents{ font-size: clamp(1rem, 3vw, 1.3rem); font-weight:700; margin-top:6px; }

.sb-paybox .sb-pay-note{
  font-size: clamp(0.85rem, 2vw, 0.9rem);
  color:#6B7280;
  margin-bottom: 20px;
  font-weight:500;
}

/* ---------------------------
   EXPRESS ZONE (FIX GAP)
   --------------------------- */
.sb-paybox .sb-express-wrapper{
  width:100%;
  text-align:left;
  margin-bottom: 0; /* avoid stacking with divider margin */
}

/* CRITICAL FIX: WooCommerce default adds margin-bottom:2em to form.cart */
.sb-paybox .sb-express-wrapper form.cart{
  margin: 0 !important;
  padding: 0;
  width: 100%;
  display:flex;
  flex-direction:column;
  gap: var(--btn-gap, 8px);
}

/* Hide Woo default parts (you want only express + card link) */
.sb-paybox .sb-express-wrapper .quantity,
.sb-paybox .sb-express-wrapper .single_add_to_cart_button,
.sb-paybox .sb-express-wrapper .woocommerce-variation-add-to-cart,
.sb-paybox .sb-express-wrapper .wc-stripe-clear,
.sb-paybox #wc-stripe-payment-request-button-separator{
  display:none !important;
}

/* PayPal container: do NOT add margin-top (gap already exists via form) */
.sb-paybox .sb-express-wrapper .wc-ppcp-product-payments__container{
  margin-top: 0 !important;
  padding: 0;
}

/* PayPal LI sometimes injected with inline max-width:4px */
.sb-paybox .sb-express-wrapper li.wc-ppcp-product-payment-method{
  width: 100% !important;
  max-width: 100% !important;
}

/* ---------------------------
   OR divider + card button
   --------------------------- */
.sb-paybox .sb-divider{
  position:relative;
  margin: 16px 0;
  text-align:center;
}
.sb-paybox .sb-divider::before{
  content:"";
  position:absolute;
  top:50%; left:0;
  width:100%;
  height:1px;
  background:#E5E7EB;
  z-index:1;
}
.sb-paybox .sb-divider span{
  position:relative;
  z-index:2;
  background:#fff;
  padding:0 15px;
  color:#9CA3AF;
  font-size:.85rem;
  font-weight:600;
  text-transform:uppercase;
}

.sb-paybox .sb-btn-white{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  height: var(--btn-height, 48px);
  padding:0 14px;
  border:1px solid #D1D5DB;
  border-radius: var(--btn-radius, 8px);
  background:#fff;
  color:#000;
  font-weight:600;
  font-size: clamp(1rem, 2.5vw, 1.1rem);
  text-decoration:none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  box-sizing:border-box;
}

.sb-paybox .sb-trust-row{
  margin-top: 20px;
  font-size:.75rem;
  color:#9CA3AF;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:15px;
  flex-wrap:wrap;
  font-weight:500;
}