/* ==========================================================================
   Component: Payment pages (body.path-payment, body.path-make-payment)
   Two pdfgen-module Stripe card-payment routes share near-identical markup:
     /payment/{nid}/{flg}      → paymentFunc      → payment.html.twig
     /make_payment/{sid}/{flg} → strpPaymentFunc  → makePayment3D.html.twig
   Both ship with zero real styling of their own beyond a few inline styles
   on the summary table — themed here to match the rest of the site (pill
   inputs, red CTA, card panels).
   ========================================================================== */

/* 88px/88px is the site's actual default section rhythm (see .cm-section
   in base.css: "padding-block: var(--cm-section-pad, 88px)") — most
   redesigned pages get this via .cm-section on their own content, but this
   controller-rendered page has no such wrapper, so it's set directly here
   on .cm-container to match. */
body:is(.path-payment, .path-make-payment) .cm-container {
  padding-block: 88px;
}

body:is(.path-payment, .path-make-payment) h3 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--cm-ink);
  margin: 0 0 10px;
}

body:is(.path-payment, .path-make-payment) .row {
  gap: 32px;
  align-items: flex-start;
}

/* .col-md-9/.col-md-3 already sum to exactly 100% — adding the gap above
   without shrinking them pushes the total past 100% and forces an unwanted
   wrap (same issue fixed earlier on the webform tabs page). */
@media (min-width: 768px) {
  body:is(.path-payment, .path-make-payment) .row > .col-md-9 {
    width: calc(75% - 16px);
  }

  body:is(.path-payment, .path-make-payment) .row > .col-md-3 {
    width: calc(25% - 16px);
  }
}

/* The "already paid"/"Success" states render <h3 class="col-md-12"> and the
   message <div class="col-md-12"> as direct siblings inside .row — both
   full-width, so they wrap onto their own flex line and the .row gap above
   (meant for the two-column layout) stacks on top of the h3's own
   margin-bottom, doubling the heading-to-message gap. Cancel that stacked
   contribution back down to a normal ~16px gap. */
body:is(.path-payment, .path-make-payment) .row > h3.col-md-12 {
  margin-bottom: -16px;
}

/* The "please don't leave this window" notice — a plain text div. */
body:is(.path-payment, .path-make-payment) .card-errors {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--cm-muted);
  margin-bottom: 24px;
  max-width: 60ch;
}

/* $msgBkd ("Success!"/booking-confirmation notice) ships with Bootstrap
   3/4 classes (.fade.in) — this theme's real Bootstrap 5 treats .fade
   without .show as opacity:0, so the message was invisible while still
   taking up its own height (the "extra space" above the heading). Bootstrap
   5's own default .alert-success look (pale green, rounded) is kept as-is
   here — just made visible and stretched to the full column width, with
   its link colour left untouched. */
body:is(.path-payment, .path-make-payment) .alert.fade {
  opacity: 1 !important;
}

body:is(.path-payment, .path-make-payment) .alert.alert-success {
  max-width: none;
  margin: 0 0 24px !important;
}

/* "Already paid" state ({% else %} branch: <h3>Payment Status</h3> + this
   div) has no Bootstrap alert classes at all — replicate the exact same
   pale-green look (colours lifted from Bootstrap's own .alert-success) for
   visual consistency with the message above the form. */
body:is(.path-payment, .path-make-payment) .row > div.col-md-12 {
  background: rgb(209, 231, 221);
  border: 1px solid rgb(186, 219, 204);
  border-radius: 6px;
  padding: 16px 20px;
  color: rgb(15, 81, 50);
  font-size: 16px;
}

body:is(.path-payment, .path-make-payment) #frmStripePayment {
  max-width: 100%;
  background: #fff;
  border: 1px solid var(--cm-hairline);
  border-radius: var(--cm-radius-card);
  padding: 32px;
  box-sizing: border-box;
}

/* Card Holder Name input + the div Stripe.js mounts its Card Element into —
   both styled as one consistent pill-input pair. */
body:is(.path-payment, .path-make-payment) #payment-form input[type="text"],
body:is(.path-payment, .path-make-payment) #payment-form .form-control {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--cm-hairline);
  border-radius: var(--cm-radius-pill);
  font: inherit;
  font-size: 14.5px;
  color: var(--cm-ink);
  background: #fff;
  box-sizing: border-box;
  /* Bootstrap's .mb-3 utility (also on the name input) sets this !important. */
  margin-bottom: 20px !important;
}

body:is(.path-payment, .path-make-payment) #payment-form input[type="text"]:focus,
body:is(.path-payment, .path-make-payment) #payment-form .form-control.StripeElement--focus {
  outline: none;
  border-color: var(--cm-ink);
}

body:is(.path-payment, .path-make-payment) #card-errors {
  font-size: 13px;
  font-weight: 600;
  color: var(--cm-red);
  margin: -8px 0 16px;
}

body:is(.path-payment, .path-make-payment) input#stripePayBtn {
  appearance: none;
  background: var(--cm-red);
  border: 1px solid var(--cm-red);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 32px;
  border-radius: var(--cm-radius-pill);
  cursor: pointer;
  margin-top: 4px !important;
  transition: background var(--cm-dur) var(--cm-ease), border-color var(--cm-dur) var(--cm-ease);
}

body:is(.path-payment, .path-make-payment) input#stripePayBtn:hover {
  background: var(--cm-red-hover);
  border-color: var(--cm-red-hover);
}

@media (max-width: 640px) {
  body:is(.path-payment, .path-make-payment) input#stripePayBtn {
    width: 100%;
  }
}

/* "Can't pay by card now?" — only on the make_payment route's form. */
body.path-make-payment #payment-form a {
  float: none !important;
  display: inline-block;
  margin: 0 0 0 16px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--cm-muted);
}

body.path-make-payment #payment-form a:hover {
  color: var(--cm-ink);
}

/* --- Summary sidebar ---------------------------------------------------- */
body:is(.path-payment, .path-make-payment) .col-md-3 {
  background: var(--cm-paper-2);
  border-radius: var(--cm-radius-card);
  padding: 24px;
  box-sizing: border-box;
}

body:is(.path-payment, .path-make-payment) .col-md-3 h5 {
  font-size: 13px;
  font-weight: 700;
  color: var(--cm-muted);
  margin: 0 0 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* The summary table ($smry in pdfGenController::paymentFunc) carries its own
   inline style="" attributes (border, italic, font-size) — !important is
   needed to win against those. */
body:is(.path-payment, .path-make-payment) .scnrDtls table {
  width: 100% !important;
  border: 0 !important;
  border-collapse: collapse;
  font-size: 14px !important;
  font-style: normal !important;
  font-family: inherit !important;
}

body:is(.path-payment, .path-make-payment) .scnrDtls tr {
  background: transparent !important;
}

/* border-collapse merges each cell's border with its neighbour's and picks
   a winner by DOM order, not CSS specificity — that let the browser's own
   default (UA-stylesheet) cell border win over this one, rendering as a
   stray white line no matter how the border-bottom above was declared.
   box-shadow isn't part of that conflict-resolution, so it always wins. */
body:is(.path-payment, .path-make-payment) .scnrDtls td {
  padding: 9px 0 !important;
  border: none !important;
  box-shadow: 0 1px 0 var(--cm-hairline);
  background: transparent !important;
  color: var(--cm-ink);
  font-style: normal !important;
}

/* First row was the "Event Services Required" label — redundant next to the
   "Summary" heading above it, so hide the whole row (its divider goes
   with it). */
body:is(.path-payment, .path-make-payment) .scnrDtls tr:first-child {
  display: none;
}

/* Last row: the bold Total. */
body:is(.path-payment, .path-make-payment) .scnrDtls tr:last-child td {
  box-shadow: none;
  padding-top: 12px !important;
  font-size: 17px !important;
  color: var(--cm-red);
}

@media (max-width: 900px) {
  body:is(.path-payment, .path-make-payment) .col-md-9,
  body:is(.path-payment, .path-make-payment) .col-md-3 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}