/* =========================================================
   Payment summary page (PaymentSummary.cshtml) — styles for the
   selected-invoices recap and the payment-method picker.

   Reuses the same design tokens (--bg, --accent, --border, …) and the
   .app-shell / .info-row / .status-badge classes already defined in
   invoice_list.css, which this page also loads, so both pages in the
   choose-invoices -> payment-summary flow stay visually consistent
   without duplicating the token definitions.
   ========================================================= */

/* ---------- Selected-invoices recap ---------- */

.summary-list {
  padding: 12px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.summary-card {
  background-color: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.summary-row-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.summary-row-top .invoice-number {
  font-size: 1.03rem;
  font-weight: 700;
  color: var(--text);
}

.summary-row-top .invoice-amount {
  font-size: 1.03rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}

/* ---------- Total row ---------- */

.summary-total {
  margin: 4px 16px 0;
  padding: 16px;
  background-color: var(--accent-soft);
  border: 1.5px solid var(--accent-border);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.summary-total .label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.summary-total .amount {
  font-size: 1.4rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* ---------- Payment method picker ---------- */

.payment-method-list {
  padding: 4px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.payment-method-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background-color: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.payment-method-card:hover {
  border-color: #d8d4c8;
}

.payment-method-card.selected {
  background-color: var(--accent-soft);
  border-color: var(--accent-border);
}

.payment-method-card .form-check-input {
  float: none;
  width: 22px;
  height: 22px;
  margin: 1px 0 0 0;
  border: 2px solid #d8d4c8;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.payment-method-card .form-check-input:checked {
  border-color: var(--accent);
}

.payment-method-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.payment-method-text .label {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text);
}

.payment-method-text .desc {
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* ---------- Confirm bar (mirrors .payment-bar) ---------- */

.confirm-bar-spacer {
  height: 96px;
}

.confirm-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  background-color: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px rgba(32, 30, 26, 0.08);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.confirm-bar-inner {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 20px;
}

.confirm-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--accent);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px 24px;
  border: none;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(13, 148, 136, 0.35);
  transition: background-color 0.15s ease, transform 0.05s ease;
}

.confirm-btn:hover:not(:disabled) {
  background-color: var(--accent-dark);
  color: #ffffff;
}

.confirm-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.confirm-btn:disabled {
  background-color: #cfcac0;
  color: #ffffff;
  box-shadow: none;
  cursor: not-allowed;
}

/* ---------- Section subheading ----------
   Used under a section's <h3> on PaymentSummary.cshtml/PaymentResult.cshtml
   (e.g. "Selecciona un método de pago"). Pulled out of an inline
   style="color: var(--text-muted); font-size: 0.85rem;" attribute on both
   views so this app's Content-Security-Policy (see Program.cs) can use a
   plain "style-src 'self'" with no 'unsafe-inline' carve-out. */

.section-subheading {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ---------- Back link ---------- */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.back-link:hover {
  color: var(--accent-dark);
}

/* ---------- Receipt delivery method ----------
   The Email/SMS radios reuse .payment-method-card/.payment-method-list
   as-is (same look, same "selected" toggle in payment_summary.js) via the
   ".receipt-method-card" marker class, which only exists so JS can query
   the two groups of cards separately — it adds no styles of its own.
   Whichever field doesn't apply is hidden (and disabled — see
   PaymentSummary.cshtml's comment) rather than removed from the DOM, so
   toggling between Email/SMS never loses whatever the patient already
   typed into the other one. */

.receipt-field-group {
  /* More top margin than the payment-method-card list above it needs on
     its own (12px .payment-method-list gap) — this field sits right below
     the Email/SMS radio cards, so it needs its own visual break from
     "which option did I pick" before "now fill this field in". */
  margin-top: 20px;
  padding: 4px 16px 0;
  display: flex;
  flex-direction: column;
  /* Label and input read as one unit, so keep them close together —
     tighter than the 20px above, which separates the group as a whole
     from the radio cards, not the label from its own input. */
  gap: 0;
}

.receipt-field-group .info-label {
  /* invoice_list.css's base ".info-label" rule fixes width at 6.9rem —
     right for the label-next-to-value ".info-row" layout it's normally
     used in, but this label sits ABOVE its input (.receipt-field-group is
     a column flex container), so that same 6.9rem left it too narrow for
     "Dirección de Correo Electrónico:"/"Número de Teléfono Móvil:" to fit
     on one line, wrapping instead of matching the full-width input below
     it. Overriding width here (flex-shrink doesn't matter in a column
     flex container — that governs the vertical/main axis, not width) is
     what makes it span the same width as .receipt-field-input. */
  width: 100%;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
}

.receipt-field-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text);
  background-color: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.receipt-field-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Toggled by payment_summary.js's updateEmailValidity() once receiptEmail
   has a non-empty value that fails EMAIL_PATTERN — the same --danger
   token invoice_list.css already defines, reused here rather than
   redefined, so this reads consistently with any other error state in the
   app. Kept separate from :invalid (the native type="email" pseudo-class)
   since :invalid also matches an empty-but-required field, which this
   page doesn't want flagged as an error before the patient's typed
   anything. */
.receipt-field-input.is-invalid {
  border-color: var(--danger);
}

.receipt-field-input.is-invalid:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-soft);
}

.field-error {
  /* .receipt-field-group is a column flexbox with gap: 0 (the label and
     input are meant to sit flush together) — this margin is what gives
     the error message its own breathing room below the input instead of
     sitting flush against it too. */
  margin-top: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--danger);
}

/* Disabled whenever its own radio (Email or SMS) isn't the one picked —
   same dimmed treatment as .payment-amount-input:disabled on the
   choose-invoices page, for the same reason (visually obvious it isn't
   the one currently in effect, and it isn't the one being submitted). */
.receipt-field-input:disabled {
  background-color: var(--neutral-soft);
  border-color: var(--border);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* Extra breathing room below these receipt/payment-method fields — each
   sits right above whatever section comes next on the page, so they get
   more separation than .receipt-field-group's own margin-top gives the
   section above them. Different amounts on purpose: #receiptEmail and
   #receiptPhone each sit right above the confirm bar / next section with
   nothing else in between, while #athMovilPhone sits right above the
   disclaimer heading, which already carries its own larger top margin
   (see #disclaimer-title below) — stacking both would be excessive.
   #receiptEmail's margin applies to the input itself, same as the other
   two — when #receiptEmailError is showing (right below the input in the
   same .receipt-field-group), that message sits inside this 40px gap
   rather than being pushed further down by it. */
#receiptEmail,
#receiptPhone {
  margin-bottom: 40px;
}

#athMovilPhone {
  margin-bottom: 10px;
}

/* ---------- Payment-authorization disclaimer ----------
   A single-item version of .summary-list/.summary-card (same card look),
   but laid out as a row — checkbox on the left, the disclaimer text on
   the right — the same shape as an .invoice-card on the choose-invoices
   page, which is what "select this to accept it" is meant to evoke here.
   The enlarged checkbox itself is unstyled here on purpose: the
   ".form-check.invoice-checkbox" wrapper below picks up the exact same
   rounded, 24px checkbox rules already defined once in invoice_list.css
   (which this page also loads), rather than redefining them. */

/* Now that this section sits directly under "Método de Pago" (see
   PaymentSummary.cshtml), its heading needs more breathing room above it
   than the shared "mt-5" utility class gives the other section titles —
   otherwise it reads as part of the payment-method card list right above
   it. An ID selector already outranks the ".mt-5" class on specificity, so
   this overrides that inline utility without touching #method-title or
   #receipt-title, which keep the normal spacing. */
#disclaimer-title {
  margin-top: 4.5rem;
}

.disclaimer-list {
  padding: 4px 16px 0;
}

.disclaimer-card {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.disclaimer-card:hover {
  border-color: #d8d4c8;
}

.disclaimer-card.selected {
  background-color: var(--accent-soft);
  border-color: var(--accent-border);
}

.disclaimer-text {
  flex: 1;
  min-width: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text);
  cursor: pointer;
}