/* Layout & form */





.ubn-wcb-form { max-width: 1000px; margin: 1rem auto; }





.ubn-wcb-form .ubn-tracking-header{ background:#f6f7f7; padding:10px 12px; border:1px solid #ddd; margin-bottom:10px; }





.ubn-two-cols{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }





.ubn-two-cols .col{ border:1px solid #e5e5e5; border-radius:8px; padding:12px; background:#fff; }





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





.ubn-wcb-form .ubn-grid .full { grid-column: 1 / -1; }





.ubn-wcb-form label { display:flex; flex-direction:column; font-weight:600; font-size:14px; }





.ubn-wcb-form input, .ubn-wcb-form select, .ubn-wcb-form textarea { padding:8px; font-size:14px; }





#ubn-items .ubn-item { display:grid; grid-template-columns: 120px 1fr; gap:12px; margin-bottom:8px; }





#ubn-items .ubn-item .full { grid-column: 1 / -1; }





.ubn-list { width:100%; border-collapse: collapse; }





.ubn-list th, .ubn-list td { border:1px solid #ccc; padding:6px 8px; }





.ubn-recap{ border:1px solid #e5e5e5; padding:10px; background:#fff; }





.ubn-recap ul{ margin:0 0 8px 18px; }





.ubn-recap-total{ font-weight:bold; }





@media (max-width: 768px){





  .ubn-two-cols{ grid-template-columns: 1fr; }





}







/* Woo-like checkout look */

.ubn-wcb-form{ font-family: inherit; }

.ubn-wcb-form .col{ box-shadow: 0 1px 2px rgba(0,0,0,.06); }

.ubn-wcb-form h3, .ubn-wcb-form h2{ margin-top:0; }

.ubn-wcb-form .ubn-tracking-header{ border-radius:8px; }

.ubn-wcb-form input, .ubn-wcb-form select, .ubn-wcb-form textarea{

  border:1px solid #dcdcde;

  border-radius:6px;

  background:#fff;

}

.ubn-wcb-form input:focus, .ubn-wcb-form select:focus, .ubn-wcb-form textarea:focus{

  outline:none;

  box-shadow: 0 0 0 1px rgba(0,0,0,.15);

}

.ubn-recap{ border-radius:8px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }

.ubn-recap-total{ font-size:16px; padding-top:6px; border-top:1px solid #eee; }



/* Wallet checkout layout */

.ubn-wcb-checkout{ max-width: 1100px; margin: 1rem auto; padding: 0 12px; }

.ubn-wcb-notice{ border:1px solid #ddd; border-left-width:5px; padding:10px 12px; border-radius:10px; background:#fff; margin: 0 0 12px 0; }

.ubn-wcb-notice .small{ font-size:13px; opacity:.9; margin-top:4px; }

.ubn-wcb-notice-success{ border-left-color:#00a32a; }

.ubn-wcb-notice-error{ border-left-color:#d63638; }

.ubn-wcb-notice-info{ border-left-color:#2271b1; }



.ubn-wcb-columns{ display:grid; grid-template-columns: 1.6fr .9fr; gap:16px; align-items:start; }

.ubn-wcb-right{ position:sticky; top:18px; }

.ubn-recap-card{ background:#fff; border:1px solid #e5e5e5; border-radius:12px; padding:12px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }

.ubn-recap-card h4{ margin:0 0 8px 0; }

.ubn-wallet-balance{ margin: 6px 0 10px 0; padding: 8px 10px; border:1px dashed #dcdcde; border-radius:10px; }

.ubn-recap-sub{ font-size:13px; opacity:.85; margin-top:6px; }



/* Pay button emphasis */

.ubn-wcb-pay{

  width:100%;

  padding:14px 16px;

  font-size:16px;

  font-weight:700;

  border-radius:12px !important;

  box-shadow: 0 8px 20px rgba(0,0,0,.12);

  display:flex;

  justify-content:center;

  align-items:center;

  gap:10px;

}

.ubn-wcb-pay:focus{ outline:none; box-shadow: 0 0 0 2px rgba(34,113,177,.25), 0 8px 20px rgba(0,0,0,.12); }

.ubn-wcb-pay.is-loading{ opacity:.85; pointer-events:none; }

.ubn-wcb-btn-spinner{ width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.5); border-top-color: rgba(255,255,255,1); display:none; animation: ubnspin .8s linear infinite; }

.ubn-wcb-pay.is-loading .ubn-wcb-btn-spinner{ display:inline-block; }

@keyframes ubnspin{ to{ transform:rotate(360deg); } }



/* Overlay during submit */

.ubn-wcb-pay-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:99999; align-items:center; justify-content:center; padding:16px; }

.ubn-wcb-pay-overlay.is-open{ display:flex; }

.ubn-wcb-pay-overlay-card{ width:min(420px, 100%); background:#fff; border-radius:16px; padding:18px 16px; text-align:center; box-shadow: 0 16px 48px rgba(0,0,0,.25); }

.ubn-wcb-pay-loader{ width:44px; height:44px; border-radius:50%; border:3px solid #dcdcde; border-top-color:#2271b1; margin: 6px auto 10px; animation: ubnspin 1s linear infinite; }

.ubn-wcb-pay-title{ font-weight:800; font-size:16px; margin-bottom:4px; }

.ubn-wcb-pay-sub{ font-size:13px; opacity:.85; }



/* Small success pop */

.ubn-wcb-notice-success{ position:relative; }

.ubn-wcb-notice-success::after{ content:'✓'; position:absolute; right:12px; top:10px; font-weight:900; }



@media (max-width: 900px){

  .ubn-wcb-columns{ grid-template-columns: 1fr; }

  .ubn-wcb-right{ position:static; }

}