/* Store Checkout - Unified UI */

.checkout-page{
  padding: 22px 0 46px 0;
}

.muted{ color: var(--muted); }

.checkout-title{
  font-weight: 900;
  font-size: 22px;
  margin: 0 0 4px 0;
}

.checkout-subtitle{
  font-size: 13px;
  color: var(--muted);
  line-height: 1.8;
}

/* ✅ Sticky summary */
.checkout-sticky{
  position: sticky;
  top: 90px;
}

/* ✅ Pay boxes same feel as plans */
.pay-box{
  border:1px solid rgba(17,24,39,.08);
  border-radius: 8px;
  padding:10px;
  background:#fff;
  cursor:pointer;
  transition:.15s ease;
  display:flex;
  gap:10px;
  align-items:flex-start;
  height: 100%;
}
.pay-box:hover{
  border-color: rgba(17,24,39,.12);
  background: rgba(17,24,39,.01);
  transform: translateY(-1px);
}
.pay-box input{
  margin-top: 4px;
}

/* ✅ Main CTA */
.btn-main{
  background: var(--primary);
  border-color: var(--primary);
  border-radius: 8px;
  font-weight: 900;
  padding: 11px 12px;
}
.btn-main:hover{
  filter: brightness(.95);
}

/* ✅ Loading overlay */
.loading-overlay{
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* ✅ RTL/LTR column swap fix like product page */
@media (min-width: 992px){
  html[dir="rtl"] .checkout-page .row.g-3{
    direction: ltr;
  }
  html[dir="rtl"] .checkout-page .row.g-3 > .checkout-main-col,
  html[dir="rtl"] .checkout-page .row.g-3 > .checkout-side-col{
    direction: rtl;
  }

  html[dir="ltr"] .checkout-main-col{ order: 1; }
  html[dir="ltr"] .checkout-side-col{ order: 2; }

  html[dir="rtl"] .checkout-side-col{ order: 1; }
  html[dir="rtl"] .checkout-main-col{ order: 2; }
}

/* Mobile */
@media(max-width: 991px){
  .checkout-sticky{
    position: static;
  }
}