/* Payment page (pay) – production stylesheet
 * 8pt spacing (multiples of 4px / 8px), local design tokens,
 * and refined interaction states. */
:root{
  --pay-ink:#0b1b3a;
  --pay-muted:#6b7280;
  --pay-border:#e5e7eb;
  --pay-border-soft:#e2e8f0;
  --pay-surface:#ffffff;
  --pay-surface-2:#f8fafc;
  --pay-accent:#2563eb;
  --pay-accent-2:#0ea5e9;
  --pay-accent-soft:#dbeafe;
  --pay-radius-lg:1.5rem;   /* 24px */
  --pay-radius-md:1rem;     /* 16px */
  --pay-radius-pill:999px;
  --pay-shadow-soft:0 12px 30px rgba(15,23,42,.08);
  --pay-shadow-strong:0 18px 45px rgba(15,23,42,.10);
  --pay-spacing-2:0.25rem;  /* 4px  */
  --pay-spacing-4:0.5rem;   /* 8px  */
  --pay-spacing-6:0.75rem;  /* 12px */
  --pay-spacing-8:1rem;     /* 16px */
  --pay-spacing-12:1.5rem;  /* 24px */
  --pay-spacing-16:2rem;    /* 32px */
}

.payment-shell{
  position: relative;
  background:
    radial-gradient(1200px 700px at 15% 10%, rgba(37,99,235,.08) 0%, rgba(37,99,235,0) 60%),
    radial-gradient(900px 500px at 85% 20%, rgba(14,165,233,.08) 0%, rgba(14,165,233,0) 55%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 60%, #ffffff 100%);
}

.payment-shell .container{
  max-width: 1120px;
}

/* Typography – local hierarchy */
.payment-title{
  color: var(--pay-ink);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.payment-heading-lg{
  color: var(--pay-ink);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.25;
}

.payment-heading-md{
  color: var(--pay-ink);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.3;
}

.payment-body{
  color: #1f2933;
  font-size: 0.95rem;
  line-height: 1.6;
}

.payment-eyebrow{
  color: var(--pay-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
}

.payment-step-badge{
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.payment-brand-panel{
  position: relative;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92) 0%, rgba(248,250,252,.92) 40%, rgba(255,255,255,.92) 100%),
    radial-gradient(900px 500px at 20% 0%, rgba(37,99,235,.10) 0%, rgba(37,99,235,0) 55%),
    radial-gradient(600px 500px at 90% 15%, rgba(14,165,233,.10) 0%, rgba(14,165,233,0) 50%);
  border: 1px solid var(--pay-border-soft);
  border-radius: var(--pay-radius-lg);
  box-shadow: var(--pay-shadow-strong);
  overflow: hidden;
  padding: var(--pay-spacing-16);
}

.payment-logo-wrap{
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: rgba(37,99,235,.08);
  border: 1px solid rgba(37,99,235,.12);
  display: grid;
  place-items: center;
}
.payment-logo{
  max-height: 44px;
  max-width: 52px;
  object-fit: contain;
}

.payment-eyebrow{
  color: var(--pay-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
}
.payment-title{
  color: var(--pay-ink);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.payment-brand-copy{
  max-width: 56ch;
  margin-bottom: var(--pay-spacing-12);
}
.payment-brand-copy p{
  color: #0f172a;
  font-size: 0.98rem;
  line-height: 1.7;
}

.payment-brand-contact{
  background: rgba(255,255,255,.9);
  border-radius: var(--pay-radius-md);
  border: 1px solid var(--pay-border-soft);
  padding: var(--pay-spacing-12);
}

.payment-brand-watermark{
  position: absolute;
  bottom: -12px;
  left: -8px;
  pointer-events: none;
  opacity: .06;
  transform: rotate(-4deg);
}
.payment-watermark-text{
  font-size: 80px;
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.05em;
  color: #0f172a;
}

.payment-card{
  border: 1px solid var(--pay-border-soft);
  background: var(--pay-surface);
  border-radius: var(--pay-radius-lg);
  box-shadow: var(--pay-shadow-soft);
}

.payment-fields{
  display: grid;
  gap: var(--pay-spacing-8);
}
.payment-field .form-label{
  margin-bottom: var(--pay-spacing-4);
}
.payment-country-code{
  display: inline-flex;
  align-items: center;
  padding: var(--pay-spacing-4) var(--pay-spacing-6);
  border-radius: var(--pay-radius-pill);
  border: 1px solid var(--pay-border-soft);
  background: #f8fafc;
  font-weight: 700;
  color: #334155;
  white-space: nowrap;
}

.payment-amount-display{
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: var(--pay-radius-md);
  border: 1px solid var(--pay-border-soft);
}

.payment-amount-pill{
  display: flex;
  align-items: baseline;
  gap: var(--pay-spacing-4);
  border-radius: var(--pay-radius-pill);
  border: 1px solid var(--pay-border-soft);
  background: linear-gradient(135deg, rgba(37,99,235,.10) 0%, rgba(14,165,233,.06) 100%);
  padding: var(--pay-spacing-6) var(--pay-spacing-8);
}
.payment-currency{
  color: #1e293b;
  font-weight: 900;
}
.payment-amount{
  font-size: 1.6rem;
  font-weight: 900;
  color: #0f172a;
}

.payment-pay-btn{
  background: linear-gradient(90deg, var(--pay-accent) 0%, var(--pay-accent-2) 100%);
  border: none;
  box-shadow: 0 14px 30px rgba(37, 99, 235, .25);
  border-radius: var(--pay-radius-md);
  transition: transform .16s ease-out, box-shadow .16s ease-out, filter .12s ease-out;
}
.payment-pay-btn:hover{
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(37, 99, 235, .3);
}
.payment-pay-btn:active{
  transform: translateY(0);
  box-shadow: 0 8px 20px rgba(37, 99, 235, .25);
}
.payment-pay-btn:focus-visible{
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}

.payment-method-icons{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pay-spacing-6);
  padding-top: var(--pay-spacing-6);
  border-top: 1px dashed var(--pay-border);
}
.payment-method-chip{
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 var(--pay-spacing-4);
  border-radius: var(--pay-radius-pill);
  border: 1px solid var(--pay-border-soft);
  background: #fff;
  font-size: .75rem;
  font-weight: 800;
  color: #334155;
}

.payment-bank-row{
  padding: var(--pay-spacing-4) 0;
  border-bottom: 1px solid #eef2f7;
}
.payment-bank-row:last-of-type{ border-bottom: none; }

.payment-note-box{
  background: #f0f7ff;
  border-radius: var(--pay-radius-md);
  border-left: 4px solid var(--pay-accent);
}

.payment-qr{
  max-width: 200px;
}

/* Make right column feel like the screenshot on desktop */
@media (min-width: 992px){
  /* Sticky only for step-1 (form) to avoid overlap on success stack */
  .payment-shell.is-step1 .payment-card{
    position: sticky;
    top: 112px; /* 7 x 16px */
  }
  .payment-shell.is-success .payment-card{
    position: static;
    top: auto;
  }
}

/* Inputs & controls – focus and hover refinement (local scope) */
.payment-card .form-control.form-control-solid,
.payment-card .form-select.form-select-solid,
.payment-card .input-group-text{
  border-radius: var(--pay-radius-md);
  border-color: var(--pay-border-soft);
}

.payment-card .form-control.form-control-solid:focus,
.payment-card .form-select.form-select-solid:focus{
  border-color: var(--pay-accent);
  box-shadow: 0 0 0 1px rgba(37,99,235,.18);
}

.payment-card .form-control.form-control-solid:hover,
.payment-card .form-select.form-select-solid:hover{
  border-color: #cbd5f5;
}

.payment-card .invalid-feedback{
  font-size: 0.78rem;
  margin-top: var(--pay-spacing-2);
}

.payment-alt-methods .card{
  border-radius: var(--pay-radius-lg);
  box-shadow: var(--pay-shadow-soft);
}

/* Success step: stacked cards with consistent spacing */
.payment-success-stack{
  display: grid;
  gap: var(--pay-spacing-12); /* 24px */
}
.payment-shell.is-success .payment-alt-methods{
  margin-top: 0 !important;
}

.payment-qr{
  max-width: 200px;
  border-radius: var(--pay-radius-md);
}

@media (max-width: 991.98px){
  .payment-brand-panel{
    margin-bottom: var(--pay-spacing-12);
    padding: var(--pay-spacing-12);
  }
}

/* Constrain hero panel height on desktop so it does not dominate */
@media (min-width: 992px){
  .payment-brand-panel{
    display: flex;
    flex-direction: column;
    gap: var(--pay-spacing-12);
  }
  .payment-brand-watermark{
    margin-top: auto;
  }
}

/* Second-step summary styling */
.payment-summary-tile{
  border-radius: var(--pay-radius-md);
  border: 1px solid var(--pay-border-soft);
  background: linear-gradient(135deg, rgba(219,234,254,.45) 0%, rgba(248,250,252,1) 60%);
  padding: var(--pay-spacing-8);
}
.payment-summary-meta .summary-chip{
  padding: var(--pay-spacing-4) var(--pay-spacing-6);
  border-radius: var(--pay-radius-pill);
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(226,232,240,.9);
  display: inline-flex;
  flex-direction: column;
  min-width: 0;
}
.payment-summary-meta .summary-label{
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--pay-muted);
}
.payment-summary-meta .summary-value{
  font-size: .8rem;
  font-weight: 600;
  color: var(--pay-ink);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 180px;
}

/* QR + info row layout safeguards */
.payment-qr-block{
  display: flex;
  flex-direction: column;
  gap: var(--pay-spacing-6);
}