:root{
      --page-bg: #c9cacc;
      --card-bg: rgba(255,255,255,.78);
      --border: rgba(0,0,0,.08);
      --maroon: #7d2a2a;
      --maroon-2: #6b2222;
      --muted: rgba(0,0,0,.55);
      --shadow: 0 16px 40px rgba(0,0,0,.12);
      --radius: 18px;
    }
    body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--page-bg); color: #1a1a1a; }
    .shell{ max-width: 1140px; margin: 28px auto 60px; padding: 18px; }
    .glass{ background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; backdrop-filter: blur(10px); }
    .section-title{ background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.08)); color: #fff; padding: 16px 18px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; font-size: 1.15rem; }
    .section-body{ padding: 18px; }

    .amount-btn{ border: 1px solid rgba(0,0,0,.08); background: var(--maroon); color: #fff; border-radius: 14px; padding: 18px 14px; width: 100%; min-height: 92px;
      transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 8px 18px rgba(0,0,0,.12);
      display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap: 6px; user-select:none; }
    .amount-btn:hover{ background: var(--maroon-2); transform: translateY(-2px); }
    .amount-btn .amt{ font-size: 1.6rem; font-weight: 800; line-height: 1; }
    .amount-btn .lbl{ font-size: .95rem; font-weight: 600; opacity:.95; }
    .amount-btn.is-active{ background: #fff; color: #111; border-color: rgba(125,42,42,.5); box-shadow: 0 10px 25px rgba(125,42,42,.18); transform: none; }

    .dots{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; padding: 14px 0; }
    .dots span{ width:10px; height:10px; border-radius:50%; background:#fff; box-shadow: 0 2px 6px rgba(0,0,0,.15); opacity:.95; }
    .note{ color: var(--maroon); font-weight: 800; text-transform: uppercase; letter-spacing: .4px; text-align:center; margin: 4px 0 10px; }

    .radio-card{ border: 1px solid rgba(0,0,0,.10); background: rgba(255,255,255,.8); border-radius: 14px; padding: 14px 14px; transition: box-shadow .12s ease, transform .12s ease; height: 100%; }
    .radio-card:hover{ box-shadow: 0 10px 25px rgba(0,0,0,.10); transform: translateY(-1px); }
    .radio-card label{ color: var(--maroon); font-weight: 800; text-transform: uppercase; letter-spacing: .25px; cursor: pointer; }
    .form-check-input{ width: 1.2rem; height: 1.2rem; margin-top: .15rem; }
    .form-check-input:checked{ background-color: var(--maroon); border-color: var(--maroon); }

    .form-control, .form-select{ border-radius: 12px; border: 1px solid rgba(0,0,0,.10); padding: 12px 12px; background: rgba(255,255,255,.92); }
    .form-control:focus, .form-select:focus{ border-color: rgba(125,42,42,.55); box-shadow: 0 0 0 .25rem rgba(125,42,42,.15); }
    textarea.form-control{ min-height: 150px; resize: vertical; }
    .help-muted{ color: var(--muted); font-size: .92rem; }
    .amount-input{ max-width: 240px; margin: 0 auto; }

    .btn-maroon{ background: var(--maroon); border-color: var(--maroon); color:#fff; border-radius: 14px; padding: 12px 22px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; box-shadow: 0 12px 28px rgba(125,42,42,.22); }
    .btn-maroon:hover{ background: var(--maroon-2); border-color: var(--maroon-2); color:#fff; }

    .footer{ text-align:center; margin-top: 22px; color: rgba(0,0,0,.65); font-size: .95rem; }
    .subtle{ color: rgba(0,0,0,.60); }
    /* Payment method segmented toggle */
.pay-toggle{
  display: inline-flex;
  gap: 10px;
  padding: 8px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 999px;
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(10px);
}
.pay-pill{
  cursor: pointer;
  user-select: none;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .2px;
  color: rgba(0,0,0,.65);
  transition: .15s ease;
  border: 1px solid transparent;
}
.btn-check:checked + .pay-pill{
  background: var(--maroon);
  color: #fff;
  box-shadow: 0 10px 24px rgba(125,42,42,.22);
}
.btn-check:disabled + .pay-pill,
.btn-check[disabled] + .pay-pill{
  opacity: .5;
  cursor: not-allowed;
}

/* Unified payment panel */
.pay-panel{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.86);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}
.pay-panel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(125,42,42,.10), rgba(0,0,0,.02));
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.pay-title{
  font-weight: 900;
  letter-spacing: .3px;
}
.pay-sub{
  font-size: .9rem;
  color: rgba(0,0,0,.60);
  margin-top: 2px;
}
.pay-lock{
  width: 36px;
  height: 36px;
  display:grid;
  place-items:center;
  border-radius: 12px;
  background: rgba(125,42,42,.12);
  border: 1px solid rgba(125,42,42,.22);
}
.pay-badges .badge{
  border-radius: 999px;
  font-weight: 700;
}

/* Pay.js iframe wrapper */
.pay-panel__body{
  padding: 16px;
}
/* .pay-iframe-wrap{
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  padding: 12px;
  min-height: 104px; 
  display:flex;
  align-items:center;
}
 */
 .pay-iframe-wrap{
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  padding: 10px 14px;
  min-height: 72px;
  display: flex;
  align-items: center;
}
#usaepay_card_container{
  width: 100%;
}
#usaepay_card_container iframe {
  height: 54px !important;
}

/* Error area */
#paymentCardErrorContainer .alert{
  border-radius: 14px;
}