/* =========================================================
   Xshops Pay checkout — clone layer
   Adds: amount validation hint, payment interface (step 2),
   card form, wallet rows, processing overlay, success page.
   Base look & feel comes from index.css / checkout-layout.css.
   ========================================================= */

:root {
  --clone-line: #e5e7eb;
  --clone-line-strong: #d1d5db;
  --clone-text: #202020;
  --clone-muted: #64748b;
  --clone-danger: #dc2626;
  --clone-panel: #f5f8ff;
}

/* ---------- step 1: amount field ---------- */
.payment-link-amount-field .amount-hint {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--clone-danger);
}

.payment-link-amount-field.is-invalid .payment-link-amount-input input {
  border-color: var(--clone-danger);
  box-shadow: 0 0 0 1px var(--clone-danger);
}

/* confirm state carries the merchant theme colour inline on the live site */
.payment-link-amount-action.is-confirm {
  background-color: var(--checkout-theme, #000);
  border-color: transparent;
}

/* the shipped stylesheet leaves the fill to the theme variable */
.checkout-pay-btn {
  background: var(--checkout-theme, #111827);
}

/* ---------- step 2: payment interface ---------- */
.pay-alert {
  border: 1px solid #f3c9c9;
  background: #fdf3f3;
  color: #b42318;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.55;
}
.pay-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  margin: 0 0 4px;
  border: 0;
  background: transparent;
  color: var(--clone-muted);
  font-size: 13px;
  cursor: pointer;
}
.pay-back:hover { color: var(--clone-text); }

.pay-amount-bar {
  border: 1px solid var(--clone-line);
  background: #fff;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.pay-amount-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}
.pay-amount-value {
  flex-shrink: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  direction: ltr;
}

.pay-panel {
  background: var(--clone-panel);
  border: 1px solid #e3eafc;
  border-radius: 10px;
  padding: 14px;
}

.pay-panel .deepseek-method-option {
  border-radius: 8px;
}

.pay-panel .deepseek-method-options > div > .deepseek-method-option {
  min-height: 48px;
}

/* ---------- card form ---------- */
.card-form { display: flex; flex-direction: column; gap: 10px; }

.cf-field { position: relative; }
.cf-input {
  box-sizing: border-box;
  width: 100%;
  height: 52px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--clone-text);
  background: #fff;
  border: 1px solid var(--clone-line);
  border-radius: 8px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  direction: ltr;
}
.cf-input::placeholder { color: #9ca3af; }
.cf-input:focus {
  border-color: #93a5c9;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}
.cf-field.is-invalid .cf-input {
  border-color: var(--clone-danger);
  box-shadow: 0 0 0 1px var(--clone-danger);
}
.cf-error {
  display: none;
  margin: 5px 2px 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--clone-danger);
}
.cf-field.is-invalid .cf-error { display: block; }

.cf-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }

.cf-brands {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}
.cf-brands img { height: 20px; width: auto; display: block; }

.cf-hint-icon {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #9ca3af;
  color: #9ca3af;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}
.cf-cvv-icon {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: #9ca3af;
  display: inline-flex;
  pointer-events: none;
}

.cf-lock-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 12px;
  color: var(--clone-muted);
}

/* wallet rows */
.wallet-row span.wallet-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 18px;
  font-weight: 500;
  color: #111827;
}
.wallet-row span.wallet-label.is-black { color: #000; font-weight: 600; }

/* ---------- PayPal inline panel ---------- */
.pp-panel {
  margin-top: 10px;
  background: #fff;
  border: 1px solid var(--clone-line);
  border-radius: 10px;
  padding: 16px;
  font-size: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.pp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eef1f4;
  margin-bottom: 12px;
}
.pp-logo { height: 22px; width: auto; display: block; }
.pp-secure {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #6b7280;
}
.pp-amount-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: #4b5563;
  background: #f6f9fc;
  border: 1px solid #e6eef5;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.pp-amount-value { color: #0b2b45; font-weight: 700; font-variant-numeric: tabular-nums; direction: ltr; }

.pp-form { display: flex; flex-direction: column; gap: 10px; }
.pp-form[hidden], .pp-review[hidden] { display: none !important; }
.pp-field { display: flex; flex-direction: column; gap: 5px; }
.pp-field > label { font-size: 12px; font-weight: 600; color: #4b5563; }
.pp-input {
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 15px;
  color: #111827;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  direction: ltr;
}
.pp-input::placeholder { color: #9ca3af; }
.pp-input:focus {
  border-color: #0070ba;
  box-shadow: 0 0 0 3px rgba(0, 112, 186, .14);
}
.pp-field.is-invalid .pp-input {
  border-color: var(--clone-danger);
  box-shadow: 0 0 0 1px var(--clone-danger);
}
.pp-error { display: none; margin: 0; font-size: 12px; line-height: 1.4; color: var(--clone-danger); }
.pp-field.is-invalid .pp-error { display: block; }

.pp-btn {
  width: 100%;
  height: 46px;
  border: 0;
  border-radius: 24px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.pp-btn:active { transform: translateY(1px); }
.pp-btn-blue { background: #0070ba; color: #fff; }
.pp-btn-blue:hover { background: #005ea6; }
.pp-btn-gold { background: #ffc439; color: #003087; }
.pp-btn-gold:hover { background: #f5b62f; }
.pp-btn:disabled { opacity: .6; cursor: not-allowed; }

.pp-review { display: flex; flex-direction: column; gap: 12px; }
.pp-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: #111827;
}
.pp-account-email {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.pp-link {
  border: 0;
  background: transparent;
  padding: 0;
  color: #0070ba;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: underline;
}
.pp-link:hover { color: #005ea6; }

.pp-funding { display: flex; flex-direction: column; gap: 8px; }
.pp-fund-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 11px 13px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13.5px;
  color: #374151;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.pp-fund-item:hover { background: #f9fafb; }
.pp-fund-item.is-active {
  border-color: #0070ba;
  background: #f1f8fd;
  color: #0b3f66;
  font-weight: 600;
}
.pp-fund-dot {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid #d1d5db;
  background: #fff;
}
.pp-fund-item.is-active .pp-fund-dot {
  border-color: #0070ba;
  background: radial-gradient(circle, #0070ba 42%, transparent 43%);
}

.pp-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px dashed #e5e7eb;
  font-size: 13px;
  color: #4b5563;
}
.pp-total b { font-size: 17px; color: #111827; font-variant-numeric: tabular-nums; }
.pp-legal { margin: 0; font-size: 11.5px; line-height: 1.5; color: #6b7280; text-align: center; }

.pp-alt {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.pp-alt-line { flex: 1; height: 1px; background: #eceff3; }
.pp-foot { margin: 12px 0 0; font-size: 11.5px; color: #9aa1ac; text-align: center; }

/* ---------- processing overlay ---------- */
.processing-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(2px);
}
.processing-overlay.is-open { display: flex; }
.processing-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 26px 34px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, .16);
  font-size: 14px;
  color: #111827;
}
.spinner {
  width: 26px;
  height: 26px;
  border: 3px solid #e5e7eb;
  border-top-color: #111827;
  border-radius: 50%;
  animation: clone-spin .8s linear infinite;
}
@keyframes clone-spin { to { transform: rotate(360deg); } }

/* ---------- success page ---------- */
.success-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 0 4px;
  text-align: center;
}
.success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #111827;
  color: #fff;
  margin-bottom: 6px;
  animation: clone-pop .35s cubic-bezier(.16, 1, .3, 1);
}
@keyframes clone-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.success-icon svg { width: 30px; height: 30px; }
.success-title { margin: 0; font-size: 22px; font-weight: 700; color: #111827; }
.success-desc { margin: 0; font-size: 14px; color: var(--clone-muted); }
.success-table {
  width: 100%;
  margin: 18px 0 8px;
  border-top: 1px solid var(--clone-line);
}
.success-table div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--clone-line);
}
.success-table span { color: var(--clone-muted); }
.success-table b { font-weight: 600; color: #111827; text-align: right; word-break: break-all; }

/* ---------- mobile summary mirror (step 1 bottom pill) ---------- */
.clone-mobile-summary { display: none; }
@media (width <= 768px) {
  .clone-mobile-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 0;
    border: 0;
    border-top: 1px solid var(--clone-line);
    background: transparent;
    font-size: 16px;
    font-weight: 600;
    color: var(--clone-text);
    cursor: pointer;
  }
  .clone-mobile-summary .clone-mobile-summary-label { display: inline-flex; align-items: center; gap: 8px; }
  .clone-mobile-summary .checkout-summary-triangle { font-size: 11px; }
  .pay-panel { padding: 10px; }
  .cf-input { height: 50px; }
}