/* ViyaBook — Compact, uniform Payment Method buttons (Prompt 81).
   Applied identically across Checkout, Create Invoice, Sales POS, Trip/Project
   Checkout and the Payment Modal. UI ONLY — no payment logic is touched.
   Loaded LAST on each page so it wins the cascade; uses !important to override
   the pages' own inline styles and older rules. */

/* ── Container: 2×2 grid so ALL 4 methods always fit — no horizontal scroll,
   nothing clipped, in every context (Checkout, Create Invoice, Sales POS,
   Trip/Project checkout, Payment Modal). ── */
.payment-grid,
.payment-methods,
.pay-grid,
#paymentMethods,
#paymentMethodRow,
.pay-method-row{
  display:grid !important;
  grid-template-columns:repeat(2, 1fr) !important;
  gap:8px !important;
  width:100% !important;
  margin:8px 0 !important;
  overflow:visible !important;           /* remove the old horizontal scroll */
  box-sizing:border-box !important;
}

/* ── Buttons: identical compact size on every screen ── */
.pay-method,
.pay-inv-btn,
.pay-btn,
.pay-method-btn{
  width:auto !important;                 /* was 108px — fill the grid cell instead */
  min-width:0 !important;                /* was 108px — this fixed width caused the overflow/clip */
  max-width:none !important;
  flex:initial !important;               /* grid item — cancel the old flex:0 0 auto */
  height:58px !important;
  min-height:58px !important;
  box-sizing:border-box !important;
  border-radius:12px !important;
  border:1.5px solid #e2e8f0 !important;
  background:#fff !important;
  color:#475569 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  padding:0 6px !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
  cursor:pointer !important;
  position:relative !important;
  transition:all .2s ease !important;
  box-shadow:none !important;
  text-align:center !important;
}

/* Icon: 20px, above the label (works for <i> icons and emoji <span> icons). */
.pay-method .pay-icon,
.pay-method-btn .pay-icon,
.pay-inv-btn > span:first-child,
.pay-btn > i,
.pay-btn > .ti{
  font-size:18px !important;
  width:18px !important;
  height:18px !important;
  line-height:1 !important;
  margin:0 !important;
}

.pay-method:hover,
.pay-inv-btn:hover,
.pay-btn:hover,
.pay-method-btn:hover{
  border-color:var(--primary,#185FA5) !important;
  color:var(--primary,#185FA5) !important;
  background:#f7faff !important;
}

/* ── Selected: filled blue, white icon + text, green check badge top-right ── */
.pay-method.active,
.pay-inv-btn.active,
.pay-btn.active,
.pay-method-btn.active,
.pay-btn.selected{
  background:var(--primary,#185FA5) !important;
  border-color:var(--primary,#185FA5) !important;
  color:#fff !important;
  box-shadow:0 4px 12px rgba(24,95,165,.25) !important;
}
.pay-method.active *,
.pay-inv-btn.active *,
.pay-btn.active *,
.pay-method-btn.active *,
.pay-btn.selected *{ color:#fff !important; }

.pay-method.active::after,
.pay-inv-btn.active::after,
.pay-btn.active::after,
.pay-method-btn.active::after,
.pay-btn.selected::after{
  content:"\2713" !important;            /* ✓ */
  position:absolute !important;
  top:-6px !important;
  right:-6px !important;
  width:18px !important;
  height:18px !important;
  border-radius:50% !important;
  background:#16a34a !important;
  color:#fff !important;
  font-size:11px !important;
  font-weight:900 !important;
  line-height:18px !important;
  text-align:center !important;
  border:2px solid #fff !important;
  box-shadow:0 1px 3px rgba(0,0,0,.25) !important;
}

/* ── Tablet ── (grid cell controls width — keep only the compact height/font) */
@media (max-width:1024px){
  .pay-method,.pay-inv-btn,.pay-btn,.pay-method-btn{
    width:auto !important; min-width:0 !important; height:56px !important; min-height:56px !important;
    font-size:12px !important;
  }
}

/* ── Mobile: still 2 per row (same 2×2 grid) ── */
@media (max-width:560px){
  .payment-grid,.payment-methods,.pay-grid,#paymentMethods,#paymentMethodRow,.pay-method-row{
    grid-template-columns:repeat(2, 1fr) !important; overflow:visible !important; gap:8px !important;
  }
  .pay-method,.pay-inv-btn,.pay-btn,.pay-method-btn{
    width:auto !important; min-width:0 !important; height:56px !important; min-height:56px !important;
  }
}

/* ── Checkout (POS) payment methods ────────────────────────────────────────────
   Checkout has THREE methods (Pay Later · Paid by Cash · Bank Transfer). On
   desktop (1025px+) and tablet (768–1024px) they sit on ONE row of equal-width
   cells and must never wrap or overflow; if the tablet row gets tight the font
   and height shrink slightly instead of wrapping. On mobile (<768px) they keep
   the current compact 2-per-row responsive layout. Scoped to `.pos-body`, which
   exists ONLY on checkout.html — no other payment surface (Create Invoice,
   Payment Modal, Sales POS, Trip/Project checkout) is touched. Colours, the
   active blue fill (white text) and the green ✓ badge are inherited from above. */

/* Desktop + Tablet: all three methods on one row */
.pos-body .payment-grid,
.pos-body .payment-methods,
.pos-body .pay-grid,
.pos-body #paymentMethods,
.pos-body #paymentMethodRow,
.pos-body .pay-method-row{
  display:grid !important;
  grid-template-columns:repeat(3, 1fr) !important;   /* one row, equal width */
  gap:12px !important;
  width:100% !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}
.pos-body .pay-method,
.pos-body .pay-inv-btn,
.pos-body .pay-btn,
.pos-body .pay-method-btn{
  width:auto !important;
  min-width:0 !important;
  flex:1 1 0 !important;             /* equal width */
  height:56px !important;
  min-height:56px !important;
  box-sizing:border-box !important;
  border-radius:12px !important;
  padding:0 8px !important;
  display:flex !important;
  flex-direction:column !important;  /* icon above label — fits the narrow cart cell */
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  font-size:15px !important;
  font-weight:500 !important;        /* medium */
  line-height:1.15 !important;
  white-space:nowrap !important;     /* never wrap the label */
  overflow:visible !important;       /* keep the corner ✓ badge visible */
}
.pos-body .pay-method .pay-icon,
.pos-body .pay-method-btn .pay-icon,
.pos-body .pay-inv-btn > span:first-child{
  font-size:19px !important;
  width:19px !important;
  height:19px !important;
  line-height:1 !important;
}

/* Tablet (768–1024): shrink the button font/height a touch so the single row
   never wraps or overflows when the cart column is narrow. */
@media (min-width:768px) and (max-width:1024px){
  .pos-body .pay-method,
  .pos-body .pay-inv-btn,
  .pos-body .pay-btn,
  .pos-body .pay-method-btn{
    height:52px !important;
    min-height:52px !important;
    font-size:14px !important;
    padding:0 6px !important;
  }
  .pos-body .pay-method .pay-icon,
  .pos-body .pay-method-btn .pay-icon,
  .pos-body .pay-inv-btn > span:first-child{
    font-size:18px !important; width:18px !important; height:18px !important;
  }
}

/* Mobile (<768px): keep the current compact 2-per-row responsive layout
   (three methods = 2 + 1). */
@media (max-width:767px){
  .pos-body .payment-grid,
  .pos-body .payment-methods,
  .pos-body .pay-grid,
  .pos-body #paymentMethods,
  .pos-body #paymentMethodRow,
  .pos-body .pay-method-row{
    grid-template-columns:repeat(2, 1fr) !important;
    gap:10px !important;
  }
  .pos-body .pay-method,
  .pos-body .pay-inv-btn,
  .pos-body .pay-btn,
  .pos-body .pay-method-btn{
    height:auto !important;
    min-height:0 !important;
    flex:0 1 auto !important;
    padding:10px 6px !important;
    font-size:13px !important;
    gap:4px !important;
  }
  .pos-body .pay-method .pay-icon,
  .pos-body .pay-method-btn .pay-icon{ font-size:20px !important; width:20px !important; height:20px !important; }
}