.content {
    max-width: 100% !important;
}

.page-header {
    margin-left: auto;
    margin-right: auto;
}

.page-header,
.page-node {
    max-width: 900px !important;
}

.footer > .page-node {
    max-width: unset !important;
}

.show-api-client-button {
    display: none !important;
}

.request-card-footer {
    display: none !important;
}

.scalar-card-header.scalar-card-header-tabs > div:nth-of-type(2) {
  display: none !important;
}

.light-mode .t-doc__sidebar,
.dark-mode .t-doc__sidebar {
    --scalar-border-color: #e8e8f0;
    --scalar-sidebar-background-1: #F3F5FF;
    --scalar-sidebar-color-1: #2e324b;
    --scalar-sidebar-color-2: #6b7080;
    --scalar-sidebar-border-color: var(--scalar-border-color);

    --scalar-sidebar-item-hover-background: #ffffff;
    --scalar-sidebar-item-hover-color: #2e324b;

    --scalar-sidebar-item-active-background: #ffffff;
    --scalar-sidebar-color-active: #5b5fc7;

    --scalar-sidebar-indent-border: #e8e8f0;
    --scalar-sidebar-indent-border-hover: #d0d4f0;
    --scalar-sidebar-indent-border-active: #5b5fc7;

    --scalar-sidebar-search-background: #ffffff;
    --scalar-sidebar-search-color: #2e324b;
    --scalar-sidebar-search-border-color: #d0d4f0;
}
.light-mode .t-doc__sidebar button[aria-selected="true"],
.dark-mode .t-doc__sidebar button[aria-selected="true"] {
    font-weight: bold;
}

.t-editor__page-link {
  box-shadow: var(--scalar-shadow-1);
  border-radius: var(--scalar-radius);
  background: var(--scalar-background-2);
  padding: 16px;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.light-mode .t-editor__anchor {
  --font-visited: #681da8;
  --font-hover: #681da8;
}

.dark-mode .t-editor__anchor {
  --font-visited: #c58af9;
  --font-hover: #c58af9;
}

.t-editor__anchor {
  --font-color: var(--scalar-color-accent);
  --font-hover: var(--scalar-color-accent);
  --text-decoration: none;
  --text-decoration-hover: underline;
}

.section-column table {
  table-layout: auto !important;
}

.layout-footer {
    padding: 100px 50px;
}

.layout-footer .page-node {
    max-width: unset !important;
}

@media screen and (max-width: 1000px) {
    .layout-footer {
        padding: 10px;
    }
}
.t-doc__sidebar button,
.t-doc__sidebar a {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, sans-serif !important;
}
.t-doc__sidebar a[href="https://product-docs.partech.com"] {
    font-weight: normal;
    color: #5b5fc7;
    background-color: #ffffff;
    border-radius: 6px;
}

.t-doc__sidebar a[href="https://product-docs.partech.com"] .group\/button-label {
    font-weight: normal;
    color: #5b5fc7;
}

.page-nav__container {
  display: none !important;
}
/* Table heading styles */
.t-editor__table thead th {
    background-color: #5b5fc7 !important;
    color:#ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}
/* Table font size */
.t-editor__table td {
    font-size: 16px !important;
}
/* callout font size */
.callout-content__text,
.callout-content__text p,
.callout-content__text ul,
.callout-content__text li,
.callout-content__text .t-editor__list {
    font-size: inherit !important;
}
/* divider line above H2s */
h2 {
  border-top: 1px solid #E2E4EA;
  padding-top: 24px;
  margin-top: 16px !important;
}
/* Undo the divider for H2s inside accordion/detail dropdowns */
.t-editor__detail-content h2 {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* Accordion: Light mode: light grey background */
.light-mode .t-editor__detail-summary {
  background-color: #FAFAFB;
}

/* Accordion: Dark mode: dark background instead, so text stays readable */
.dark-mode .t-editor__detail-summary {
  background-color: #2A2D3A;
  color: #E5E5EA;
}

/* PAR Pay product tag */

:root {
  --pd-label: "PAR Pay";
  --pd-accent: #1a9e5c;
  --pd-tile: linear-gradient(135deg, #e6f9f0, #d8f3e6);
  --pd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231a9e5c' stroke-width='2'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E");
  --pd-text: var(--scalar-color-1);
}

/* Tile stays light in dark mode, matching the home page cards, so the label
   needs an explicit dark colour here. */
.dark-mode {
  --pd-text: #2e324b;
  --pd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231a9e5c' stroke-width='2'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E");
}

.page-body .page-node.t-prose:has(> h1)::before {
  content: var(--pd-label);
  display: block;
  width: fit-content;
  margin: 0 0 14px;
  padding: 5px 14px 5px 33px;
  border: 1px solid color-mix(in srgb, var(--pd-accent) 24%, transparent);
  border-radius: 999px;
  background: var(--pd-icon) 13px center / 14px 14px no-repeat, var(--pd-tile);
  color: var(--pd-text);
  font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
    Roboto, Ubuntu, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

@media print {
  .page-body .page-node.t-prose:has(> h1)::before {
    display: none;
  }
}

/* Homepage exception: hide the PAR POS tag on the homepage only, to match
   the punchh docs homepage which doesn't show this tag. */
.page-body .page-node.t-prose:has(> h1#par-pos-product-documents-overview)::before {
  display: none;
}

/* ---------------------------------------------------------------------------
   Outside-link arrow: PAR Payments Resources (POS Integration)

   Scalar draws its own trailing arrow only when a sidebar link points at a
   DIFFERENT HOST. Our POS link is cross-host from localhost during preview but
   SAME host in production (both sit on product-docs.partech.com, only the
   subpath differs), so Scalar's arrow shows locally and vanishes on deploy.
   We draw it ourselves so it is identical in both.

   The glyph below is the exact icon the PAR Developer Portal renders: Phosphor
   arrow-up-right (bold), 256 viewBox, 14px, fill currentColor. Scalar's anchor
   is already `display:flex` with a `flex-1` label div, so the ::after lands at
   the far right on its own — no margin-left:auto needed. align-self:flex-start
   pins it to the first line when the label wraps, matching the portal's
   items-stretch behaviour.
   --------------------------------------------------------------------------- */
.t-doc__sidebar a[href^="https://product-docs.partech.com/docs/par-pos"]::after {
  content: "";
  align-self: flex-start;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: var(--par-outside-link-arrow) center / contain no-repeat;
  mask: var(--par-outside-link-arrow) center / contain no-repeat;
}

/* Suppress Scalar's native arrow where it does render (preview), so exactly
   one arrow is shown in every environment. */
.t-doc__sidebar a[href^="https://product-docs.partech.com/docs/par-pos"] > svg {
  display: none !important;
}

:root {
  --par-outside-link-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z'/%3E%3C/svg%3E");
}


/* ---------------------------------------------------------------------------
   Screenshot sizing

   The Merchant Services Portal guides carry ~50 UI screenshots that otherwise
   render at the full content width (~900px), which makes tall dashboard shots
   dominate the page.

   Matched on the src path rather than on the content container. Every guide
   screenshot lives under "<page>_images/media/", while the landing page's hero
   logo is an absolute partech.com URL — so this cannot reach the logo, which
   sets its own height and must keep it.
   --------------------------------------------------------------------------- */
.page-body .page-node.t-prose img[src*="_images/media/"] {
  max-width: 700px;
  height: auto;
}

@media (max-width: 760px) {
  .page-body .page-node.t-prose img[src*="_images/media/"] {
    max-width: 100%;
  }
}

/* Larger header logo */
.t-doc__header img,
.scalar-app header img {
  height: 30px !important;
  max-height: none !important;
  width: auto !important;
}

/* Header link colors (light mode only) */
.light-mode .t-header__item,
.light-mode .t-header__item--active {
  color: #5B5FC7 !important;
}

/* Header search bar: centered, longer, rounded */
.search-group {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  width: 560px;
  min-width: 560px;
  max-width: 100%;
}
.search-group .search-wrapper {
  width: 100% !important;
  min-width: 560px !important;
  max-width: none !important;
}
.search-group button.search {
  width: 100% !important;
  border-radius: 999px !important;
}
/* Keyboard shortcut badge inside the search bar (the bordered span wrapping the <kbd>) */
.search-group button.search > span:has(kbd) {
  border-radius: 999px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* Main product page in the sidebar (identified by its credit card icon): always show in the active purple */
.t-doc__sidebar button:has(svg[data-scalar-icon-src*="credit-card-bold"]),
.t-doc__sidebar button:has(svg[data-scalar-icon-src*="credit-card-bold"]):hover {
  color: #5B5FC7 !important;
}