.contract-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 20px;
}

.contract {
  background: var(--cbtt-surface-alt, #f7f3ec);
  padding: 2em;
  border-radius: 0.2em;
}

.contract-section {
  margin-bottom: 2.5rem;
}

/* ── The signing page (contract_form.php, [display_contract_form]) ─────────
   One reading column, as DESIGN-SYSTEM.md allows the frontend to centre
   (720px). The shortcode renders inside whatever content container the
   customer's theme provides — CBTT-Turbo hands it 1288px on a 1440px screen
   (measured 2026-09-23) — so the column has to be the form's own. The
   contract text carries its own .contract-container (800px, centred, padded)
   from the shipped templates; inside this column that is a box in a box and
   made the text narrower than the price table beneath it, so it is flattened
   here and only here (the wp-admin preview and the PDF keep it).

   Card language per DESIGN-SYSTEM.md rule 3: surface + 1px border + radius,
   no shadow. Headings are sized here because the document's own h1/h2/h3
   otherwise take the theme's website headings (32px uppercase in CBTT-Turbo)
   — a contract is a document, not a landing page. Every var() keeps a literal
   fallback for the `theme` preset, which prints no palette. */
.contract-signing {
  max-width: 720px;
  margin-inline: auto;
  font-family: var(--cbtt-font-sans, inherit);
  color: var(--cbtt-text, #1f2733);
}

.contract-signing h1,
.contract-signing h2,
.contract-signing h3 {
  font-family: inherit;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cbtt-text, #1f2733);
}

.contract-signing > h1 {
  font-size: 24px;
  margin: 0 0 20px;
}

.contract-signing .contract-content h1 {
  font-size: 20px;
  margin: 28px 0 12px;
}

.contract-signing .contract-content h2 {
  font-size: 17px;
  margin: 24px 0 8px;
}

.contract-signing .contract-content h3 {
  font-size: 15px;
  margin: 18px 0 6px;
}

.contract-signing .contract-content p,
.contract-signing .contract-content li {
  font-size: 15px;
  line-height: 1.55;
}

.contract-signing .contract-content > .contract-container > :first-child,
.contract-signing .contract-content > :first-child {
  margin-top: 0;
}

.contract-signing .contract-container {
  max-width: none;
  margin: 0;
  padding: 0;
}

.contract-signing .contract {
  margin: 8px 0 24px;
  /* 32px of air on a desktop, 16px on a phone: 2em on both sides left a
     390px phone with a 294px text column. */
  padding: clamp(16px, 4vw, 32px);
  background: var(--cbtt-surface, #ffffff);
  border: 1px solid var(--cbtt-border, #e6e1d7);
  border-radius: var(--cbtt-radius-md, 11px);
}

.contract-signing .contract-section {
  margin-bottom: 1.5rem;
}

/* Price table. The markup keeps Bootstrap's class names (.table, .table-primary,
   .table-secondary, .table-responsive) on purpose: it is part of the document
   that is stored, hashed and turned into the PDF, and contract_print.css
   styles it by element. So this styles by structure too, and outranks the
   theme's Bootstrap extract (CBTT-Turbo still ships one) by specificity. The
   two numeric columns carry text-align:center inline from the same markup,
   hence the !important — numbers sit right, tabular (DESIGN-SYSTEM.md rule 7). */
.contract-signing .price-table {
  margin-top: 1.5rem;
}

.contract-signing .price-table .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Scroll shadow (the allowed gradient exception, DESIGN-SYSTEM.md Mobile
     1): the table is 520px wide on a 324px phone column, so the reader needs
     to see that there is more to the right. Two covers in surface colour
     scroll with the content (local) and hide the two shadows (scroll) at
     each end. Shows through the transparent body cells only. */
  background:
    linear-gradient(to right, var(--cbtt-surface, #ffffff) 40%, rgba(255, 255, 255, 0)) left / 40px 100% no-repeat local,
    linear-gradient(to left, var(--cbtt-surface, #ffffff) 40%, rgba(255, 255, 255, 0)) right / 40px 100% no-repeat local,
    linear-gradient(to right, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0)) left / 14px 100% no-repeat scroll,
    linear-gradient(to left, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0)) right / 14px 100% no-repeat scroll;
}

.contract-signing .price-table table {
  width: 100%;
  min-width: 520px;
  margin: 0;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.4;
  color: var(--cbtt-text, #1f2733);
}

.contract-signing .price-table table th,
.contract-signing .price-table table td {
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid var(--cbtt-border-soft, #f0ebe1);
  text-align: left;
  vertical-align: top;
  background: transparent;
}

.contract-signing .price-table table thead th {
  background: var(--cbtt-primary, #003f86);
  color: var(--cbtt-on-primary, #ffffff);
  font-weight: 600;
  border-bottom: 0;
}

.contract-signing .price-table table thead th:not(:first-child),
.contract-signing .price-table table td.cbtt-ui-text-center {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.contract-signing .price-table table tr.table-secondary > th {
  padding-top: 16px;
  background: var(--cbtt-surface-alt, #f7f3ec);
  font-weight: 600;
  text-align: left;
}

.contract-signing .price-table table tbody tr:nth-of-type(odd),
.contract-signing .price-table table tbody tr:hover {
  background: transparent;
}

/* The spacer rows between the three scenarios. */
.contract-signing .price-table table td:empty {
  border-bottom: 0;
}

.contract-signing .price-table .cbtt-ui-alert small {
  font-size: 13px;
}

.contract-signing .price-table .dashicons {
  font-size: 16px;
  width: 16px;
  height: 16px;
  vertical-align: text-bottom;
}

/* Bootstrap's validation helpers are still in the markup; without Bootstrap
   they would be visible on load. The submit-time validator (contract_form.php)
   reports through its own banner and marks, so these stay hidden except for
   the consent rows below (.contract-consent-error). */
.contract-signing .invalid-feedback {
  display: none;
}

.contract-signing .toggle-label {
  font-size: 15px;
  line-height: 1.4;
  padding-top: 3px;
}

.contract-signing .cbtt-btn--lg {
  white-space: normal;
}

.contract-signing .contract-footer {
  margin-top: 1rem;
}

.bank-details {
  padding: 15px;
  margin: 15px 0;
}

.price-table {
  margin-top: 1rem;
}

/* Modify bootstrap table styles */
.table-primary,
.table-primary>td,
.table-primary>th {
  background-color: var(--cbtt-accent, #0193aa);
  color: var(--cbtt-on-primary, #ffffff);
}


.signature-section {
  border-top: 1px solid var(--cbtt-border, #e6e1d7);
  padding-top: 2rem;
}


/* Custom Toggle Switch Styles */
.toggle-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 46×26, the proportions of cbtt-ui's .cbtt-ui-check--switch scaled to a
   44px-class tap target (DESIGN-SYSTEM.md, Mobile 5). It was 60×34 — the
   biggest control on the page, for a yes/no. */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Off is neutral, not red. It used to be #dc3545, which meant every consent
   toggle screamed "error" before the reader had touched anything — and left
   the validator no colour to say it with once one of them really was the
   reason the submission failed. Red now means red. */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--cbtt-border, #e6e1d7);
  transition: background-color .25s ease, box-shadow .15s ease;
}

/* The checkbox itself is 0x0 and transparent, so without this the toggles are
   invisible to a keyboard. :focus as well as :focus-visible on purpose — there
   is no visible control to carry the ring instead. */
.toggle-switch input:focus + .slider,
.toggle-switch input:focus-visible + .slider {
  box-shadow: var(--cbtt-focus-ring, 0 0 0 3px rgba(228, 92, 0, 0.35));
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: var(--cbtt-on-primary, #ffffff);
  transition: .4s;
}

/* On is teal, like every other switch in the suite (.cbtt-ui-check--switch):
   "here is your choice", not a status. It used to be the success green, which
   DESIGN-SYSTEM.md reserves for status. */
input:checked+.slider {
  background-color: var(--cbtt-teal, #0193aa);
}

input:checked+.slider:before {
  transform: translateX(20px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 26px;
}

.slider.round:before {
  border-radius: 50%;
}

.toggle-label {
  margin-bottom: 0;
  cursor: pointer;
}


/* ── Submit-time validation ────────────────────────────────────────────────
   The error line is fixed to the viewport, not placed above the form. It is
   raised by a failure that is usually BELOW the fold (the consent toggles at
   the foot of the page), and the reader is sent there to fix it — a message
   sitting at the top of the document would be off-screen the moment it was
   needed. position:sticky was the other candidate and was rejected: any
   ancestor with overflow:hidden, which themes hand out freely, silently turns
   it back into position:relative and the message scrolls away again.
   It removes itself as soon as nothing is outstanding (see contract_form.php),
   so it never lingers over the page. */
.contract-alert {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(680px, calc(100% - 24px));
  padding: 10px 14px;
  background: var(--cbtt-error-tint, #fbe3e0);
  color: var(--cbtt-error-ink, #992e26);
  border: 1px solid var(--cbtt-error, #c4443a);
  border-radius: var(--cbtt-radius-md, 11px);
  box-shadow: var(--cbtt-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.15));
  font-size: 15px;
  line-height: 1.35;
  animation: contractAlertIn 0.2s ease;
}

/* The WordPress admin bar is fixed above 600px and would cover the line. */
body.admin-bar .contract-alert {
  top: 44px;
}

@media (max-width: 782px) {
  body.admin-bar .contract-alert {
    top: 58px;
  }
}

@media (max-width: 600px) {
  body.admin-bar .contract-alert {
    top: 12px;
  }
}

.contract-alert__icon {
  flex: none;
  width: 20px;
  height: 20px;
}

.contract-alert__text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

@keyframes contractAlertIn {
  from {
    transform: translate(-50%, -8px);
    opacity: 0;
  }

  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

/* Outline, not border or padding: the marker must not change the size of the
   control, or every field below it jumps the moment the error appears.
   Outline also sidesteps the specificity race with Bootstrap's
   .was-validated :invalid rules, which own border-color. */
.contract-invalid {
  outline: 2px solid var(--cbtt-error, #c4443a);
  outline-offset: 1px;
}

.contract-consent-error .slider {
  background-color: var(--cbtt-error, #c4443a);
  outline: 2px solid var(--cbtt-error, #c4443a);
  outline-offset: 2px;
}

/* A consent's .invalid-feedback sits in the neighbouring grid column, so
   Bootstrap's sibling selector can never reach it — hence it never appeared,
   and the toggle failed silently. */
.contract-consent-error .invalid-feedback {
  display: block;
  color: var(--cbtt-error-ink, #992e26);
}

/* block:'center' does most of the work; this covers the sticky headers themes
   put over the top of the page. */
#contract-form .cbtt-ui-input,
#contract-form .cbtt-ui-row,
#signature-container {
  scroll-margin-top: 96px;
  scroll-margin-bottom: 24px;
}

/* ── Confirmation ──────────────────────────────────────────────────────────
   Modelled on .cbtt-sm-sysrow in assets/css/cbtt-sm-shell.css — same accent edge, same
   quiet tinted band — but self-contained, because it must render even where
   the shell stylesheet is not in play. It replaces the form inside the page's
   own container, which is what keeps it out of the site header. */
.contract-done {
  max-width: 720px;
  margin: 24px auto;
}

.contract-done:focus {
  outline: none;
}

.contract-done__row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  margin: 0;
  padding: 10px 12px 10px 16px;
  background: var(--cbtt-success-tint, #e4f3ec);
  color: var(--cbtt-success-ink, #166b46);
  border-left: 3px solid var(--cbtt-success, #1f8f5f);
  font-size: 16px;
  line-height: 1.3;
}

.contract-done__icon {
  flex: none;
  width: 22px;
  height: 22px;
}

.contract-done__text {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.contract-done__back {
  margin: 10px 0 0;
  padding-left: 16px;
}

.contract-done__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--cbtt-link, #086b7e);
  font-weight: 600;
  text-decoration: none;
}

.contract-done__link:hover,
.contract-done__link:focus-visible {
  text-decoration: underline;
}

.contract-done__link:focus-visible {
  outline: 2px solid var(--cbtt-link, #086b7e);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

  .contract-alert {
    animation: none;
  }

  .slider,
  .slider:before {
    transition: none;
  }
}

.spinner-border {
  vertical-align: -0.125em;
}

.contract-footer {
  position: relative;
  margin-top: 2rem;
  font-size: 12px;
  color: var(--cbtt-text-muted, #7c8494);
  text-align: center;
}


/* The cancellation dialog is a native <dialog> since 2026-08-22 — the old
   Bootstrap modal-open/backdrop overrides are gone with it. */

.hidden-dashboard {
  display: none;
}

/* Fixed: Popup moved to body via JS + max z-index to appear above header */
.qr-code-popup-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2147483647 !important;
  isolation: isolate !important;

  /* Load-bearing. Without these the overlay was a trap on a phone: it is fixed
     and full-screen, its content runs to roughly 700 px, and a 375x667 device
     leaves about 555 px of usable height. The box was centred, so it overflowed
     top AND bottom — putting BOTH close controls outside the viewport, with no
     way to scroll to them because a fixed element with the default
     overflow:visible does not scroll. The only way out was reloading the page.
     align-items:flex-start keeps the top edge (and with it the X) reachable
     even when the content is taller than the screen. */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
}

@media (max-height: 760px) {
  .qr-code-popup-overlay {
    align-items: flex-start;
  }
}

.custom-popup-modal {
  background: var(--cbtt-surface, #ffffff);
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: var(--cbtt-radius-md, 11px);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3em;
}

/* 3em of padding on every side is 96 px of nothing on a phone that only has
   375 to give. */
@media (max-width: 480px) {
  .custom-popup-modal {
    padding: 2.5em 1.25em 1.25em;
  }
}

.custom-popup-close {
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 18px;
  color: var(--cbtt-text-muted, #7c8494);
  cursor: pointer;
  font-weight: bold;
  background: none;
  border: none;
}

/* Balance popup (contracts/contract/qr_code.php): "last accounting" line and
   the "how are the amounts calculated?" popover. Static declarations only —
   the popup's script toggles display and rewrites left/right inline. The
   shadow is allowed: a popover floats. Small z-index on purpose: the modal is
   its own stacking context (isolation: isolate above), so 2 is plenty. */
.cbtt-qr-lastrun {
  font-size: 0.9em;
  margin: 0 0 var(--cbtt-space-3, 12px);
}

.cbtt-qr-popover-anchor {
  position: relative;
}

.cbtt-qr-popover {
  position: absolute;
  top: 100%;
  left: 0;
  width: 300px;
  max-width: calc(100vw - 48px);
  margin-top: var(--cbtt-space-1, 4px);
  padding: var(--cbtt-space-3, 12px);
  background: var(--cbtt-surface, #ffffff);
  border: 1px solid var(--cbtt-border, #cccccc);
  border-radius: var(--cbtt-radius-md, 5px);
  box-shadow: var(--cbtt-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
  text-align: left;
  font-size: 0.9em;
  z-index: 2;
}

.qr-input-group {
  margin-top: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
}

#custom-amount-input {
  margin-left: 1em;
  width: 5ch;
  padding: 0.375rem 0;
  font-size: 1rem;
  color: var(--cbtt-text, #1f2733);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--cbtt-border, #e6e1d7);
  border-radius: 0;
  outline: none;
  box-shadow: none;
  transition: border-color 0.2s;
  text-align: right;
}

#custom-amount-input:focus {
  border-bottom: 2px solid var(--cbtt-accent, #0193aa);
}

#custom-popup-close-btn {
  margin-top: 2em;
}

/* A way out of the fixed banner. It is the only control that can dismiss the
   server-error variant, which marks no field and therefore never triggers the
   recheck that hides the banner otherwise. */
.contract-alert__close {
    flex: none;
    align-self: flex-start;
    min-width: 44px;
    min-height: 44px;
    margin: -8px -8px -8px 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.contract-alert__close:focus-visible {
    outline: 2px solid var(--cbtt-focus-ring, #0073aa);
    outline-offset: -3px;
    border-radius: var(--cbtt-radius-sm, 8px);
}