/* uk-payment-gateway-setup.css -- styles used only on uk-payment-gateway-setup.html. */

.uk-payment-page-shell::before {
  background:
    radial-gradient(ellipse at 80% 10%, rgba(15, 93, 255, .32), transparent 28rem),
    radial-gradient(circle at 6% 50%, rgba(0, 156, 255, .15), transparent 25rem),
    linear-gradient(105deg, rgba(0, 12, 38, .18), rgba(0, 0, 0, 0) 45%);
}

/* Small bullet dot in front of this page's eyebrow labels, matching the
   screenshot -- kept scoped to this page rather than added to the shared
   .eyebrow class used across the whole site. */
.uk-payment-page-shell .eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.uk-payment-page-shell .eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(0, 211, 255, .8);
}

/* ---------- Section rhythm ----------
   Matches the section-to-section gap already used across the site's USA
   service pages (~72px, e.g. business-address-setup.html,
   registered-agent-service.html, ein-application.html). */
.uk-payment-page-shell .service-main .container > section + section,
.uk-payment-page-shell .service-main .container > .glass-card + section,
.uk-payment-page-shell .service-main .container > section + .glass-card,
.uk-payment-page-shell .service-main .container > .glass-card + .glass-card {
  margin-top: 72px;
}

/* ---------- Hero ---------- */

.uk-payment-visual {
  position: relative;
  min-height: 380px;
}

.uk-payment-visual img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  object-fit: cover;
  object-position: center top;
  box-shadow: 0 22px 55px rgba(0, 0, 0, .3);
}

.uk-payment-hero-features {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 26px;
  margin-top: 30px;
}

.uk-payment-hero-features div {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 10px;
  width: 100px;
}

.uk-payment-hero-features span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(134, 76, 255, .6);
  background: rgba(48, 25, 116, .4);
  color: var(--cyan);
  font-size: 21px;
}

.uk-payment-hero-features p {
  margin: 0;
  color: #dce8ff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

/* ---------- Info strip ---------- */

.uk-payment-info-strip {
  margin-bottom: 18px;
  padding: 22px 26px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  border: 1px solid rgba(54, 213, 255, .4);
  border-radius: 12px;
  background: rgba(6, 20, 52, .5);
}

.uk-payment-info-strip article {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.uk-payment-info-strip .round-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  font-size: 20px;
}

.uk-payment-info-strip h3 {
  margin: 0 0 4px;
  font-size: 14.5px;
  font-weight: 800;
}

.uk-payment-info-strip p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

/* ---------- Providers ---------- */

.uk-payment-providers {
  margin: 56px 0 8px;
}

.uk-payment-providers h2 {
  margin: 0 0 8px;
  font-size: clamp(24px, 2.6vw, 31px);
  line-height: 1.2;
  font-weight: 900;
}

.uk-payment-providers-subtitle {
  margin: 0 0 26px;
  color: var(--muted);
  font-size: 15px;
}

.uk-payment-provider-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}

.uk-payment-provider-card {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(6, 20, 52, .5);
  border: 1px solid var(--line-soft);
}

.uk-payment-provider-logo {
  padding: 26px 24px;
  background: #f4f7fc;
}

.uk-payment-provider-logo b {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.uk-payment-provider-stripe { color: #635bff; font-style: italic; }
.uk-payment-provider-paypal { color: #003087; }
.uk-payment-provider-paypal span { color: #009cde; }
.uk-payment-provider-payoneer { display: inline-flex; align-items: center; gap: 8px; color: #14161c; }
.uk-payment-provider-payoneer i { width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(#ff7a00, #ffb300, #ff7a00); display: inline-block; font-style: normal; }

.uk-payment-provider-card .ra-check-list {
  flex: 1;
  padding: 22px 24px 4px;
}

.uk-payment-provider-card > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 24px 22px;
  color: var(--cyan);
  font-size: 14px;
  font-weight: 700;
}

.uk-payment-note {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 auto 8px;
  padding: 14px 20px;
  border: 1px solid rgba(96, 137, 207, .4);
  border-radius: 10px;
  background: rgba(5, 16, 45, .55);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.uk-payment-note svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--cyan);
}

/* ---------- Process ---------- */

/* Now a glass-card panel (matching the boxed "How It Works" treatment
   used on the site's established UK service pages). */
.uk-payment-process {
  margin: 56px 0 8px;
  padding: 30px 34px;
  text-align: center;
}

.uk-payment-process-heading {
  margin-bottom: 26px;
}

/* This section has no <h2> (just an eyebrow + a description paragraph),
   so the paragraph is styled to read as the section title -- centered
   and sized like the same "How It Works" heading on
   uk-business-bank-account.html (.ukbank-process h2). */
.uk-payment-process-heading .eyebrow {
  justify-content: center;
}

.uk-payment-process-heading h2 {
  margin: 0 0 6px;
  font-size: clamp(22px, 2.4vw, 27px);
  font-weight: 900;
}

.uk-payment-process-heading p:not(.eyebrow) {
  margin: 0 auto;
  max-width: 560px;
  color: #f5f9ff;
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 800;
  line-height: 1.3;
}

/* ---------- FAQ ---------- */

.uk-payment-faq-section {
  margin: 56px 0 8px;
}

.uk-payment-faq-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.uk-payment-faq-heading .eyebrow {
  margin: 0;
}

.uk-payment-faq-heading a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cyan);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.uk-payment-faq {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 20px;
}

.uk-payment-faq details {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(6, 20, 52, .5);
}

.uk-payment-faq summary {
  min-height: 52px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  cursor: pointer;
  color: #f5f9ff;
  font-size: 15px;
  font-weight: 600;
}

.uk-payment-faq summary::-webkit-details-marker {
  display: none;
}

.uk-payment-faq summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--cyan);
  font-size: 20px;
  font-weight: 800;
}

.uk-payment-faq details[open] summary::after {
  content: "\2212";
}

.uk-payment-faq p {
  margin: 0;
  padding: 0 18px 16px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}

/* ---------- CTA ---------- */

.uk-payment-cta {
  margin-top: 8px;
  margin-bottom: 40px;
  background:
    radial-gradient(circle at 15% 50%, rgba(155, 37, 255, .5), transparent 8rem),
    linear-gradient(100deg, #7b1fe0 0%, #4b0f9c 52%, #180440 100%);
}

.uk-payment-cta .cta-icon {
  background: radial-gradient(circle at 35% 25%, #d9a8ff, #8a2be2);
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .uk-payment-visual {
    min-height: 320px;
  }

  .uk-payment-hero-features {
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
  }

  .uk-payment-info-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .uk-payment-provider-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .uk-payment-visual {
    min-height: 260px;
  }

  .uk-payment-hero-features {
    grid-template-columns: repeat(2, 1fr);
  }

  .uk-payment-info-strip {
    grid-template-columns: 1fr;
  }

  .uk-payment-info-strip article {
    align-items: center;
  }

  .uk-payment-faq {
    grid-template-columns: 1fr;
  }

  .uk-payment-faq-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}