/*
 * KashKrypto Square modal — same layout as Kashpack square.blade.php.
 * Local classes use sqp- prefix (Square SDK owns sq-*).
 */
:root {
  --sqp-maroon: #5c1a1a;
  --sqp-maroon-hover: #4a1414;
  --sqp-border: #d0d5dd;
  --sqp-muted: #667085;
  --sqp-bg: #ffffff;
}

.sqp-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  visibility: hidden;
  pointer-events: none;
}

.sqp-modal.is-open {
  visibility: visible;
  pointer-events: auto;
}

/*
 * Cash App Pay resumes behind the processing overlay after the buyer approves in
 * the Cash App app. Square still has to attach its wallet elements, which needs a
 * laid-out and rendered container, so the modal is kept fully transparent and
 * inert instead of hidden — the buyer never sees it and never has to tap again.
 */
.sqp-modal.is-silent {
  visibility: visible;
  opacity: 0;
  pointer-events: none;
}

.sqp-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 30, 0.55);
}

.sqp-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 32px);
  overflow: visible;
  background: var(--sqp-bg);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  padding: 28px 24px 24px;
}

.sqp-modal__close {
  position: absolute;
  top: 10px;
  right: 14px;
  border: 0;
  background: transparent;
  font-size: 32px;
  line-height: 1;
  color: #667085;
  cursor: pointer;
  padding: 4px 8px;
}

.sqp-modal__header {
  text-align: center;
  margin-bottom: 22px;
  padding-right: 18px;
}

.sqp-modal__title {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 12px;
  color: #101828;
}

.sqp-modal__amount {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sqp-modal__amount-label {
  font-size: 1rem;
  color: var(--sqp-muted);
}

.sqp-modal__amount-value {
  font-size: 1.85rem;
  font-weight: 700;
  color: #101828;
}

.sqp-modal__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: visible;
  min-height: 220px;
  position: relative;
}

.sqp-modal-loader {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 30;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 220px;
  padding: 24px 12px;
  width: 100%;
  background: #fff;
  border-radius: 8px;
}

.sqp-modal-loader.is-active {
  display: flex;
}

.sqp-modal-loader__spinner {
  width: 44px;
  height: 44px;
  border: 4px solid rgba(92, 26, 26, 0.15);
  border-top-color: var(--sqp-maroon);
  border-radius: 50%;
  animation: sqp-spin 0.85s linear infinite;
}

.sqp-modal-loader__text {
  margin: 0;
  font-size: 1rem;
  color: var(--sqp-muted);
  text-align: center;
}

.sqp-modal-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.sqp-modal-fields.is-loading {
  pointer-events: none;
  min-height: 220px;
}

.sqp-wallets {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  gap: 10px;
  align-items: stretch;
  --sqp-wallet-btn-height: 48px;
}

.sqp-wallets[data-layout="none"] {
  display: none;
}

/* Wallet buttons always share one row with an identical footprint, on every
   screen size. Square sizes its own wallet markup, so the slot dimensions are
   pinned here and the injected button/iframe is stretched to fill the slot. */
.sqp-wallets > .sqp-wallet-slot,
.sqp-wallets > .sqp-cap-btn,
.sqp-wallets > .sqp-apple-pay-shell,
.sqp-wallets > #cash-app-pay {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: none;
  height: var(--sqp-wallet-btn-height);
  min-height: var(--sqp-wallet-btn-height);
  max-height: var(--sqp-wallet-btn-height);
  align-self: stretch;
}

.sqp-wallets[data-layout="single"] {
  justify-content: center;
}

.sqp-wallets[data-layout="single"] > .sqp-wallet-slot,
.sqp-wallets[data-layout="single"] > .sqp-cap-btn,
.sqp-wallets[data-layout="single"] > .sqp-apple-pay-shell,
.sqp-wallets[data-layout="single"] > #cash-app-pay {
  flex: 0 1 260px;
  max-width: 260px;
}

.sqp-wallet-slot[hidden],
.sqp-apple-pay-shell[hidden] {
  display: none !important;
}

.sqp-apple-pay-shell {
  position: relative;
  width: 100%;
  height: var(--sqp-wallet-btn-height);
  min-height: var(--sqp-wallet-btn-height);
  padding: 0;
  border-radius: 999px;
  overflow: hidden;
  background: #000;
}

.sqp-cap-btn {
  min-height: var(--sqp-wallet-btn-height);
  height: var(--sqp-wallet-btn-height);
  border-radius: 999px;
  overflow: hidden;
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 5;
  pointer-events: auto;
  background: #000;
}

.sqp-cap-btn[hidden] {
  display: none !important;
}

/* Native Apple Pay button in Safari — Square does not use attach(). */
.sqp-apple-pay-btn {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  border: none;
  border-radius: 999px;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: #000;
  box-sizing: border-box;
}

.sqp-apple-pay-btn.sqp-apple-pay-btn--native {
  -webkit-appearance: -apple-pay-button;
  -apple-pay-button-type: plain;
  -apple-pay-button-style: black;
  appearance: -apple-pay-button;
  --apple-pay-button-width: 100%;
  --apple-pay-button-height: var(--sqp-wallet-btn-height);
  --apple-pay-button-border-radius: calc(var(--sqp-wallet-btn-height) / 2);
  --apple-pay-button-padding: 0;
  --apple-pay-button-box-sizing: border-box;
}

.sqp-apple-pay-btn.sqp-apple-pay-btn--fallback {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sqp-apple-pay-btn--native .sqp-apple-pay-fallback {
  display: none;
}

.sqp-apple-pay-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  height: 100%;
  color: #fff;
  pointer-events: none;
}

.sqp-apple-pay-logo {
  width: 20px;
  height: 22px;
  flex-shrink: 0;
  display: block;
}

.sqp-apple-pay-word {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
}

.sqp-cap-btn--cash {
  z-index: 8;
  background: transparent;
  overflow: hidden;
  padding: 0;
}

#cash-app-pay {
  width: 100%;
  height: var(--sqp-wallet-btn-height);
  min-height: var(--sqp-wallet-btn-height);
  max-height: var(--sqp-wallet-btn-height);
  border-radius: 999px;
  overflow: hidden;
  box-sizing: border-box;
}

#cash-app-pay > *,
#cash-app-pay button,
#cash-app-pay [role="button"],
#cash-app-pay iframe {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
}

#cash-app-pay iframe {
  border: 0 !important;
  display: block;
}

.sqp-or-divider {
  text-align: center;
  color: var(--sqp-muted);
  font-size: 1rem;
}

.sqp-card-box {
  width: 100%;
  min-height: 160px;
  border: 1px solid var(--sqp-border);
  border-radius: 10px;
  overflow: visible;
  background: #fff;
  padding: 12px;
}

.sqp-error {
  color: #b42318;
  font-size: 0.95rem;
  font-weight: 600;
  min-height: 1.35em;
  visibility: hidden;
}

.sqp-error.is-visible {
  visibility: visible;
}

.sqp-pay-btn {
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: var(--sqp-maroon);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  padding: 15px 16px;
  cursor: pointer;
}

.sqp-pay-btn:hover:not(:disabled) {
  background: var(--sqp-maroon-hover);
}

.sqp-pay-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.sqp-processing {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 30, 0.88);
  z-index: 100001;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 18px;
}

.sqp-processing__spinner {
  width: 56px;
  height: 56px;
  border: 5px solid rgba(255, 255, 255, 0.25);
  border-top-color: #006aff;
  border-radius: 50%;
  animation: sqp-spin 0.9s linear infinite;
}

.sqp-processing__title {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

.sqp-processing__sub {
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  text-align: center;
  padding: 0 16px;
}

@keyframes sqp-spin {
  to { transform: rotate(360deg); }
}

body.sqp-modal-open {
  overflow: hidden;
}

.sqp-wallet-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  left: auto;
  bottom: auto;
  max-width: min(calc(100vw - 32px), 360px);
  padding: 14px 18px;
  background: linear-gradient(180deg, #f5d47a 0%, #d4af37 100%);
  color: #1a1a1a;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
  z-index: 100002;
  opacity: 0;
  transform: translateY(-120%);
  pointer-events: none;
  transition: transform 0.28s ease, opacity 0.28s ease;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(184, 134, 11, 0.35);
}

.sqp-wallet-toast.is-visible {
  transform: translateY(0);
  opacity: 1;
}

@media (max-width: 575.98px) {
  .sqp-modal {
    padding: 0;
    align-items: flex-end;
  }
  .sqp-modal__dialog {
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    padding: 24px 16px 20px;
  }
  .sqp-wallets {
    gap: 8px;
  }
  .sqp-apple-pay-word {
    font-size: 1.05rem;
  }
  .sqp-wallet-toast {
    top: 14px;
    right: 14px;
    left: auto;
    max-width: calc(100vw - 28px);
  }
}

/* Narrow phones: keep both capsules on one line by trimming the gap and the
   Apple Pay wording instead of letting a button wrap. */
@media (max-width: 379.98px) {
  .sqp-wallets {
    gap: 6px;
    --sqp-wallet-btn-height: 46px;
  }
  .sqp-apple-pay-fallback {
    gap: 5px;
  }
  .sqp-apple-pay-logo {
    width: 17px;
    height: 19px;
  }
  .sqp-apple-pay-word {
    font-size: 0.95rem;
  }
}