/*
 * RusaPOS Customer — verified checkout CTAs, mobile-first visual treatment.
 * Presentation only: no provider gates, redirects, ledger mutations or new
 * checkout actions. Source of truth remains Backend order.payment.
 */
.app-shell .checkout-ui {
  --pay-blue: #0c5ac2;
  --pay-blue-dark: #10477f;
  --pay-green: #096b53;
  --pay-ring: #ffbd50;
}
.app-shell .checkout-method-clickable[data-action="start-sepay-sandbox-checkout"],
.app-shell .checkout-method-clickable[data-action="start-square-checkout"],
.app-shell .checkout-method-clickable[data-action="start-stripe-checkout"],
.app-shell .checkout-method-clickable[data-action="open-verified-checkout"] {
  position: relative;
  min-height: 92px;
  width: 100%;
  padding: 18px;
  gap: 14px;
  overflow: visible;
  border: 1.5px solid #acc7eb;
  border-radius: 20px;
  background: linear-gradient(135deg, #f1f7ff 0%, #fff 85%);
  box-shadow: 0 5px 22px rgba(16, 71, 127, .08);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.app-shell .checkout-method-clickable[data-action="start-sepay-sandbox-checkout"] {
  border-color: #90cfbb;
  background: linear-gradient(135deg, #edf9f4 0%, #fff 85%);
}
.app-shell .checkout-method-clickable[data-action="start-sepay-sandbox-checkout"] .checkout-method-icon {
  background: #dbf4e9;
  color: #096b53;
}
.app-shell .checkout-method-clickable[data-action="start-square-checkout"] .checkout-method-icon {
  background: #e4edff;
  color: #1451a0;
}
.app-shell .checkout-method-clickable .checkout-method-copy strong {
  color: #14283f;
  font-size: clamp(14px, 3.6vw, 17px);
  line-height: 1.35;
}
.app-shell .checkout-method-clickable .checkout-method-copy span {
  color: #476077;
  font-size: 12px;
  line-height: 1.5;
}
.app-shell .checkout-method-clickable[data-action="start-sepay-sandbox-checkout"] .checkout-method-state,
.app-shell .checkout-method-clickable[data-action="start-square-checkout"] .checkout-method-state,
.app-shell .checkout-method-clickable[data-action="start-stripe-checkout"] .checkout-method-state,
.app-shell .checkout-method-clickable[data-action="open-verified-checkout"] .checkout-method-state {
  flex-shrink: 0;
  max-width: none;
  border-radius: 12px;
  padding: 11px 13px;
  background: #1258ac;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  white-space: normal;
}
.app-shell .checkout-method-clickable[data-action="start-sepay-sandbox-checkout"] .checkout-method-state {
  background: #096b53;
}
.app-shell .checkout-method-clickable:not(:disabled):hover {
  transform: translateY(-2px);
  border-color: #2f78c9;
  box-shadow: 0 12px 28px rgba(16, 71, 127, .14);
}
.app-shell .checkout-method-clickable[data-action="start-sepay-sandbox-checkout"]:not(:disabled):hover {
  border-color: #13856c;
}
.app-shell .checkout-method-clickable:active:not(:disabled) {
  transform: translateY(0);
}
.app-shell .checkout-method-clickable:disabled,
.app-shell .checkout-action-primary:disabled {
  opacity: .65;
  cursor: progress;
  transform: none;
  box-shadow: none;
}
.app-shell .checkout-action-primary[data-action="start-sepay-sandbox-checkout"],
.app-shell .checkout-action-primary[data-action="start-square-checkout"],
.app-shell .checkout-action-primary[data-action="start-stripe-checkout"],
.app-shell .checkout-action-primary[data-action="open-verified-checkout"] {
  min-height: 62px;
  border-radius: 16px;
  padding: 15px 20px;
  background: linear-gradient(135deg, #0d5bb7, #12447c);
  border: 1px solid #0c4d98;
  color: #fff;
  box-shadow: 0 9px 25px rgba(12, 77, 152, .2);
  font-size: clamp(15px, 4vw, 17px);
  font-weight: 850;
  line-height: 1.3;
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
  touch-action: manipulation;
  transition: box-shadow .18s ease, transform .18s ease, filter .18s ease;
}
.app-shell .checkout-action-primary[data-action="start-sepay-sandbox-checkout"] {
  background: linear-gradient(135deg, #08785c, #07553f);
  border-color: #075b46;
  box-shadow: 0 9px 25px rgba(7, 91, 70, .2);
}
.app-shell .checkout-action-primary[data-action="start-sepay-sandbox-checkout"]:not(:disabled):hover,
.app-shell .checkout-action-primary[data-action="start-square-checkout"]:not(:disabled):hover,
.app-shell .checkout-action-primary[data-action="start-stripe-checkout"]:not(:disabled):hover,
.app-shell .checkout-action-primary[data-action="open-verified-checkout"]:not(:disabled):hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.app-shell .checkout-action-primary:focus-visible,
.app-shell .checkout-method-clickable:focus-visible {
  outline: 3px solid var(--pay-ring);
  outline-offset: 4px;
}
@media (max-width: 600px) {
  .app-shell .checkout-method-clickable[data-action="start-sepay-sandbox-checkout"],
  .app-shell .checkout-method-clickable[data-action="start-square-checkout"],
  .app-shell .checkout-method-clickable[data-action="start-stripe-checkout"],
  .app-shell .checkout-method-clickable[data-action="open-verified-checkout"] {
    min-height: 88px;
    gap: 12px;
    flex-wrap: wrap;
    padding: 15px;
  }
  .app-shell .checkout-method-clickable .checkout-method-icon {
    width: 42px;
    height: 42px;
  }
  .app-shell .checkout-method-clickable[data-action="start-sepay-sandbox-checkout"] .checkout-method-state,
  .app-shell .checkout-method-clickable[data-action="start-square-checkout"] .checkout-method-state,
  .app-shell .checkout-method-clickable[data-action="start-stripe-checkout"] .checkout-method-state,
  .app-shell .checkout-method-clickable[data-action="open-verified-checkout"] .checkout-method-state {
    margin-left: auto;
    padding: 9px 12px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .app-shell .checkout-action-primary[data-action="start-sepay-sandbox-checkout"],
  .app-shell .checkout-action-primary[data-action="start-square-checkout"],
  .app-shell .checkout-action-primary[data-action="start-stripe-checkout"],
  .app-shell .checkout-action-primary[data-action="open-verified-checkout"] {
    width: 100%;
    min-height: 60px;
  }
}
@media (max-width: 350px) {
  .app-shell .checkout-method-clickable .checkout-method-copy { flex-basis: calc(100% - 60px); }
  .app-shell .checkout-method-clickable .checkout-method-state { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .app-shell .checkout-method-clickable,
  .app-shell .checkout-action-primary { transition: none; transform: none !important; }
}
@media (forced-colors: active) {
  .app-shell .checkout-method-clickable,
  .app-shell .checkout-action-primary { border: 2px solid ButtonText; }
  .app-shell .checkout-action-primary:focus-visible,
  .app-shell .checkout-method-clickable:focus-visible { outline-color: Highlight; }
}