/* Page-specific styles for make-a-payment.html */
/* #home-logo/#call-now and header nav-link color come from style.css (shared, identical on every page). */
html, body {
  margin: 0;
  padding: 0;
}

.payment-main-wrap { background: #f4f7fb; margin-top: 125px; padding: 56px 0 64px; }
@media only screen and (max-width: 991px) {
  .payment-main-wrap { margin-top: 65px !important; }
}

.pay-container { max-width: 1040px; }

/* ── Heading ───────────────────────────────────────────── */
.pay-hero { margin-bottom: 36px; text-align: center; }
.pay-title { color: #0f1c2e; font-size: 38px; font-weight: 800; margin: 0 0 10px; }
.pay-lede { color: #5b6b82; font-size: 18px; margin: 0 auto; max-width: 560px; }

/* Round icon badge, tinted in its section's color */
.pay-icon {
  align-items: center;
  background: var(--soft, #eaf4ff);
  border-radius: 50%;
  color: var(--accent, #0088f9);
  display: inline-flex;
  flex: none;
  font-size: 26px;
  height: 60px;
  justify-content: center;
  width: 60px;
}
.pay-icon--sm { font-size: 18px; height: 44px; width: 44px; }

/* ── The three ways to pay ────────────────────────────── */
/* Each method has its own color so it's recognizable at a glance. */
.pay-card--card  { --accent: #0088f9; --soft: #e6f2ff; --dark: #006ccc; }
.pay-card--check { --accent: #7b3fbf; --soft: #f1e9fb; --dark: #62309a; }
.pay-card--cash  { --accent: #1a9a5b; --soft: #e5f6ed; --dark: #147a48; }

.pay-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pay-card {
  align-items: center;
  background: #fff;
  border: 1px solid #e6edf6;
  border-radius: 14px;
  border-top: 5px solid var(--accent);
  box-shadow: 0 6px 24px rgba(15, 28, 46, .06);
  display: flex;
  flex-direction: column;
  padding: 28px 24px 26px;
  text-align: center;
}

.pay-card__title { color: #0f1c2e; font-size: 22px; font-weight: 800; margin: 14px 0 8px; }
.pay-card__text { color: #26344a; font-size: 15px; line-height: 1.55; margin: 14px 0 0; }
.pay-details {
  background: var(--soft);
  border-radius: 10px;
  margin: 16px 0 0;
  padding: 4px 18px;
  width: 100%;
}
.pay-details > div { padding: 10px 0; }
.pay-details > div + div { border-top: 1px solid rgba(15, 28, 46, .08); }
.pay-details dt { color: var(--dark); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pay-details dd, .pay-details address { color: #0f1c2e; font-size: 15px; font-weight: 700; line-height: 1.45; margin: 2px 0 0; }

/* Buttons sit on the same line across the cards */
.pay-card__foot { margin-top: auto; padding-top: 22px; }

/* Card logos in their brand colors */
.pay-brands {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 26px;
  gap: 6px;
  justify-content: center;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.pay-brands--wallets { gap: 8px; margin-top: 10px; }
.pay-brand--visa     { color: #1a1f71; }
.pay-brand--mc svg   { display: block; }
.pay-brand--amex     { color: #2e77bc; }
.pay-brand--discover { color: #ff6000; }

.pay-wallet {
  align-items: center;
  border-radius: 5px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  gap: 3px;
  height: 20px;
  padding: 0 6px;
}
.pay-wallet .fa { font-size: 14px; }
.pay-wallet--apple  { background: #000; color: #fff; }
.pay-wallet--google { background: #fff; border: 1px solid #dadce0; color: #3c4043; }
.pay-wallet--google .fa { color: #4285f4; }

.pay-wallet--cashapp { background: #00d632; color: #fff; }
.pay-cashapp-mark { font-size: 14px; font-weight: 800; line-height: 1; }

.pay-btc {
  align-items: center;
  background: #f7931a;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-size: 13px;
  height: 22px;
  justify-content: center;
  transform: rotate(14deg);
  width: 22px;
}

.pay-tag {
  background: #e5f6ed;
  border-radius: 999px;
  color: #147a48;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 4px 12px;
  text-transform: uppercase;
}
.pay-tag--fee { background: #fff4dc; color: #8a5a00; }

.pay-btn {
  background: var(--accent);
  border-radius: 8px;
  color: #fff;
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  padding: 10px 22px;
  transition: background .15s;
}
.pay-btn:hover, .pay-btn:focus { background: var(--dark); color: #fff; text-decoration: none; }
.pay-btn .fa { font-size: 13px; margin-left: 4px; }
.pay-btn--plain { background: #fff; border: 1px solid #cfd8e3; color: #0f1c2e; }
.pay-btn--plain:hover, .pay-btn--plain:focus { background: #f4f7fb; color: #0f1c2e; }

/* ── Card checkout (Square, embedded) ─────────────────── */
.pay-checkout {
  --accent: #0088f9;
  --soft: #e6f2ff;
  background: #fff;
  border: 1px solid #e6edf6;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(15, 28, 46, .07);
  margin: 48px auto 0;
  max-width: 760px;
  overflow: hidden;
}

.pay-checkout__head {
  background: #e6f2ff;
  border-bottom: 1px solid #cfe4fb;
  display: flex;
  gap: 16px;
  padding: 22px 26px;
}
.pay-checkout__head .pay-icon { background: #fff; }
.pay-checkout__title { color: #0f1c2e; font-size: 22px; font-weight: 800; margin: 0 0 4px; }
.pay-checkout__text { color: #26344a; font-size: 14px; line-height: 1.55; margin: 0 0 6px; }
.pay-checkout__alt { font-size: 13px; }

.payment-frame { border: none; display: block; height: 680px; width: 100%; }

/* Landing on #pay-online clears the fixed header */
#pay-online { scroll-margin-top: 110px; }

.pay-help { color: #5b6b82; font-size: 15px; margin: 36px 0 0; text-align: center; }

/* ── Tablet & phone ───────────────────────────────────── */
@media (max-width: 860px) {
  .pay-grid { gap: 16px; grid-template-columns: 1fr; margin: 0 auto; max-width: 480px; }
}

@media (max-width: 767px) {
  .payment-main-wrap { padding: 32px 0 44px; }
  .pay-hero { margin-bottom: 24px; }
  .pay-title { font-size: 30px; }
  .pay-lede { font-size: 16px; }
  .pay-checkout { margin-top: 36px; }
  .pay-checkout__head { padding: 18px; }
  #pay-online { scroll-margin-top: 60px; }
}