/* Customer-facing payment portal: one simple centred card. */
:root {
  --bg: #f5f8fb;
  --card: #ffffff;
  --ink: #1f2937;
  --muted: #6b7280;
  --line: #e5e7eb;
  --field: #f9f9f9;
  --focus: #111827;
  --error: #c0392b;
  --ok: #1f7a4a;
  --pine: #173a30;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body.portal {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: 28px 16px 48px;
}

.portal__card {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  background: var(--card);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, .06), 0 6px 24px rgba(17, 24, 39, .06);
  padding: 36px clamp(20px, 5vw, 38px) 32px;
}

.portal__head { text-align: center; padding-bottom: 28px; margin-bottom: 38px; border-bottom: 1px solid var(--line); }
.portal__brand { display: inline-flex; align-items: center; gap: 12px; font-size: 28px; font-weight: 700; color: var(--ink); }
.portal__brand .logo__mark { width: 40px; height: 40px; }
.portal__sub { margin: 10px 0 0; color: var(--muted); font-size: 16px; }

.invoice-box {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #edf1f5; border-radius: 8px;
  padding: 20px 18px; margin-bottom: 30px;
  font-size: 18px; font-weight: 600;
}
.invoice-box strong { font-weight: 700; }

.label { display: block; font-size: 16px; margin: 0 0 8px; }

/* Card group: number on top, expiry + CVC below, joined like one control */
.card-group { border: 1px solid var(--line); border-radius: 6px; background: var(--field); margin-bottom: 26px; }
.card-group__number, .card-group__expiry, .card-group__cvc { position: relative; display: flex; align-items: center; min-height: 50px; padding: 0 18px; }
.card-group__number { border-bottom: 1px solid var(--line); border-radius: 6px 6px 0 0; }
.card-group__row { display: grid; grid-template-columns: 1fr 1fr; }
.card-group__expiry { border-right: 1px solid var(--line); }
.aw-field { flex: 1; min-width: 0; }
.aw-field iframe { display: block; width: 100% !important; }
.card-group .is-focused { outline: 1.5px solid var(--focus); outline-offset: -1px; border-radius: 6px; background: #fff; z-index: 1; }
.card-group .is-invalid { outline: 1.5px solid var(--error); outline-offset: -1px; border-radius: 6px; }

.brands { display: flex; gap: 6px; flex-shrink: 0; margin-left: 10px; }
.has-input .brands { display: none; }
.brand { width: 34px; height: 22px; display: block; }
.cvc-icon { width: 28px; height: 20px; flex-shrink: 0; margin-left: 10px; }
@media (max-width: 420px) { .brands .brand:nth-child(3) { display: none; } }

.input {
  display: block; width: 100%; height: 50px; padding: 0 18px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--field);
  font: inherit; color: inherit; margin-bottom: 18px;
}
.input:focus { outline: 1.5px solid var(--focus); outline-offset: -1px; background: #fff; }

.form-error { color: var(--error); font-size: 14px; margin: -6px 0 14px; }
.form-error:empty { display: none; }

.pay-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 50px; margin-top: 30px;
  border: 0; border-radius: 6px; background: #000; color: #fff;
  font: 700 16px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; cursor: pointer;
  transition: background .15s;
}
.pay-btn:hover:not(:disabled) { background: #1f2937; }
.pay-btn:disabled { opacity: .55; cursor: not-allowed; }
.pay-btn.is-loading::after { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.portal__back { display: block; text-align: center; margin-top: 30px; color: var(--muted); text-decoration: none; }
.portal__back:hover { color: var(--ink); text-decoration: underline; }

.message { text-align: center; }
.message h1 { font-size: 26px; margin: 0 0 10px; }
.message p { color: var(--muted); margin: 0 0 10px; }
.message--ok h1 { color: var(--ok); }
.message--error h1 { color: var(--error); }
.message code { font-size: 13px; background: #f3f4f6; padding: 2px 6px; border-radius: 4px; }

#auth-form:empty { display: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }