/* ============================================================================
   PayAdmit static-import \002014 site-wide enhancement styles.
   Linked once on every page via <link rel="stylesheet"> from
   src/layouts/Layout.astro, AFTER the theme stylesheets so these corrective
   rules win on cascade order. Behaviour for the elements styled here lives in
   /enhance.js. (These rules were previously injected inline.)
   ============================================================================ */

/* --- Mobile fixes: burger overlay + mobile grid / overflow guards --------- */
@media (max-width:1025px){
  /* Guard against stray horizontal overflow on small screens. overflow-x:clip
     keeps overflow-y visible, so it never creates a scroll container and never
     breaks position:sticky. */
  html{overflow-x:clip;}
  /* Grid carousels relied on Owl JS but their desktop column counts were never
     reduced for mobile, overflowing the viewport. */
  .stats_cards.offers-carousel{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .payment_solutions_grid.offers-carousel{grid-template-columns:minmax(0,1fr) !important;}
  /* ---- Mobile navigation overlay (real markup uses #site-navigation) ---- */
  #site-navigation.main-navigation.is-open{display:block;position:fixed;inset:0;width:100%;height:100%;z-index:1000;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:88px 18px 40px;background:linear-gradient(180deg,#081722 26.88%,#050F16 97.91%),#0a141c;}
  body.pa-menu-open{overflow:hidden;}
  #site-navigation.main-navigation.is-open .menu-menu-container{margin:0;}
  /* The base theme hides every nav UL (.main-navigation ul{display:none}) and
     only re-shows it as flex at >=1025px, so on mobile #primary-menu stays
     collapsed and the opened overlay looked empty. Restore it as a block list. */
  #site-navigation.main-navigation.is-open #primary-menu{display:block;list-style:none;margin:0;padding:0;}
  #site-navigation.main-navigation.is-open #primary-menu>li{margin:0;padding:0;border-bottom:1px solid rgba(255,255,255,0.08);}
  #site-navigation.main-navigation.is-open #primary-menu li a{display:flex;align-items:center;justify-content:space-between;padding:14px 6px;height:auto;min-height:0;color:#fff;font-size:18px;font-weight:500;line-height:1.3;text-decoration:none;}
  /* Accordion sub-menus: collapsed by default, expand under .open parent.
     The theme's style.css floats every nested UL (.main-navigation ul ul{float:left})
     for its desktop hover-dropdown; reset float:none/clear here or the opened mega
     sub-menu shrink-wraps to ~290px and the following top-level items wrap to its
     RIGHT instead of stacking below it. */
  #site-navigation.main-navigation.is-open .sub-menu{display:none;float:none;clear:both;position:static;left:auto;right:auto;top:auto;width:auto;height:auto;min-width:0;max-height:none;overflow:visible;background:transparent;margin:0;padding:0 0 6px 12px;}
  #site-navigation.main-navigation.is-open li.menu-item-has-children.open>.sub-menu{display:block;}
  #site-navigation.main-navigation.is-open .sub-menu li{margin:0;border:0;}
  #site-navigation.main-navigation.is-open .sub-menu a{font-size:15px;font-weight:400;padding:9px 6px;opacity:.92;}
  #site-navigation.main-navigation.is-open .sub-menu .disabled_item a{font-size:12px;text-transform:uppercase;letter-spacing:.05em;opacity:.5;cursor:default;}
  #site-navigation.main-navigation.is-open .sub-menu a::after{display:none;}
  /* CSS chevron on expandable top-level items. */
  #site-navigation.main-navigation.is-open .menu-item-has-children>a{position:relative;}
  #site-navigation.main-navigation.is-open .menu-item-has-children>a::after{content:"";flex:0 0 auto;width:9px;height:9px;margin-left:12px;border-right:2px solid rgba(255,255,255,.75);border-bottom:2px solid rgba(255,255,255,.75);background:none !important;transform:rotate(45deg);transition:transform .2s ease;}
  #site-navigation.main-navigation.is-open .menu-item-has-children.open>a::after{transform:rotate(-135deg);}
  /* Burger stays above the overlay and doubles as the close (X) control. */
  #burger-toggle.burger{z-index:1100;}
  #burger-toggle.burger.active{position:fixed;top:16px;right:18px;}
}

/* --- Floating PayAdmit support widget ------------------------------------- */
.pa-support{position:fixed;right:20px;bottom:20px;z-index:950;font-family:inherit;}
.pa-support__launcher{width:64px;height:64px;border-radius:18px;border:none;cursor:pointer;background:#fff;color:#0b1622;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(11,22,34,.18);transition:transform .2s ease,box-shadow .2s ease;margin-left:auto;padding:0;overflow:hidden;}
.pa-support__launcher:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(11,22,34,.26);}
.pa-support__launcher svg{width:26px;height:26px;display:block;}
.pa-support__launcher img{width:100%;height:100%;display:block;object-fit:cover;}
.pa-support__ic-open,.pa-support__ic-close{width:100%;height:100%;align-items:center;justify-content:center;}
.pa-support__ic-open{display:flex;}
.pa-support__ic-close{display:none;}
.pa-support[data-open="true"] .pa-support__ic-open{display:none;}
.pa-support[data-open="true"] .pa-support__ic-close{display:flex;}
.pa-support__panel{position:absolute;right:0;bottom:76px;width:382px;max-width:calc(100vw - 40px);max-height:calc(100vh - 130px);background:#fff;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(11,22,34,.28);opacity:0;transform:translateY(14px) scale(.98);pointer-events:none;transition:opacity .22s ease,transform .22s ease;}
.pa-support[data-open="true"] .pa-support__panel{opacity:1;transform:none;pointer-events:auto;}
.pa-support__header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:22px 22px 0;}
.pa-support__title{font-size:22px;font-weight:700;color:#0b1622;line-height:1.2;}
.pa-support__min{width:44px;height:44px;flex:0 0 auto;border:1px solid #d8dee8;background:#fff;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#0b1622;}
.pa-support__min svg{width:20px;height:20px;}
.pa-support__sub{margin:14px 22px 0;color:#3a4654;font-size:15px;line-height:1.5;}
.pa-support__body{padding:20px 22px 6px;flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;background:linear-gradient(180deg,#ffffff 0%,#f3f7fb 100%);}
.pa-support__form{display:flex;flex-direction:column;gap:14px;margin:0;}
.pa-support__input,.pa-support__textarea{width:100%;border:1px solid #e3e8f0;background:#fff;border-radius:16px;padding:17px 20px;font-size:15px;color:#0b1622;font-family:inherit;box-shadow:0 6px 16px rgba(88,121,155,.08);outline:none;box-sizing:border-box;}
.pa-support__input::placeholder,.pa-support__textarea::placeholder{color:#6b7785;}
.pa-support__input:focus,.pa-support__textarea:focus{border-color:#245EFE;box-shadow:0 0 0 3px rgba(36,94,254,.12);}
.pa-support__msgwrap{position:relative;}
.pa-support__textarea{resize:vertical;min-height:140px;}
.pa-support__send{position:absolute;right:16px;bottom:16px;width:64px;height:48px;border:none;border-radius:14px;background:#245EFE;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(36,94,254,.35);transition:background .2s ease;}
.pa-support__send:hover{background:#1a4fe0;}
.pa-support__send svg{width:22px;height:22px;}
.pa-support__status{margin:2px 2px 8px;font-size:14px;line-height:1.4;min-height:18px;}
.pa-support__status.is-ok{color:#1a8f4c;}
.pa-support__status.is-err{color:#d23b3b;}
.pa-support__tg{padding:14px 2px 12px;text-align:center;}
.pa-support__chat{display:flex;align-items:flex-start;gap:14px;text-align:left;}
.pa-support__avatar{flex:0 0 auto;width:48px;height:48px;border-radius:14px;background:#245EFE;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(36,94,254,.35);}
.pa-support__avatar svg{width:24px;height:24px;}
.pa-support__bubble{background:#fff;border-radius:16px;padding:15px 18px;color:#0b1622;font-size:15px;line-height:1.5;box-shadow:0 10px 24px rgba(88,121,155,.14);}
.pa-support__tgbtn{display:inline-flex;align-items:center;gap:9px;margin-top:34px;text-decoration:none;background:#fff;color:#245EFE;padding:14px 26px;border-radius:16px;font-weight:600;font-size:16px;box-shadow:0 12px 28px rgba(36,94,254,.22);transition:box-shadow .2s ease,transform .2s ease;}
.pa-support__tgbtn:hover{box-shadow:0 14px 34px rgba(36,94,254,.34);transform:translateY(-1px);}
.pa-support__tgbtn svg{width:20px;height:20px;}
.pa-support__tabs{display:flex;align-items:stretch;justify-content:center;gap:44px;padding:12px 0 16px;background:#fff;border-top:1px solid #eef2f7;}
.pa-support__tab{border:none;background:none;cursor:pointer;color:#0b1622;padding:8px 6px;display:flex;align-items:center;justify-content:center;border-bottom:2px solid transparent;border-radius:0;}
.pa-support__tab svg{width:26px;height:26px;}
.pa-support__tab.is-active{color:#245EFE;border-bottom-color:#245EFE;}
.pa-support [hidden]{display:none !important;}
@media (max-width:480px){
.pa-support{right:14px;bottom:14px;}
.pa-support__panel{width:calc(100vw - 24px);bottom:72px;max-height:calc(100vh - 110px);}
.pa-support__title{font-size:20px;}
}

/* --- Blog table-of-contents pill styling (list built by enhance.js) --- */
.blog_toc__link{display:block;padding:10px 16px;border-radius:18px;background:#E9F0F9;color:#050F16;text-decoration:none;transition:.2s ease;outline:none;font-size:16px;font-style:normal;font-weight:400;line-height:150%;min-height:44px;text-transform:lowercase;}
.blog_toc__link:first-letter{text-transform:uppercase;}
.blog_toc__link:hover{color:#245EFE;}
.blog_toc__link.is-active{color:#245EFE;outline:none;}
.toc-section{scroll-margin-top:130px;}
/* pbn card-grid robustness */
.post_items>*,.post_item{min-width:0}.post_item img{max-width:100%;height:auto}.post_item .h3_title,.post_item h2,.post_item h3,.post_item .post_excerpt{overflow-wrap:break-word}
/* pbn owl-carousel un-hide (zero-JS neutralizer) */
.owl-carousel{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;-webkit-overflow-scrolling:touch;gap:20px!important;cursor:grab}.owl-carousel.is-dragging{cursor:grabbing;scroll-snap-type:none!important;user-select:none}.owl-carousel img{-webkit-user-drag:none}.owl-carousel>*{flex:0 0 calc(100% - 20px)!important;scroll-snap-align:start!important;min-width:0!important}@media(min-width:768px){.owl-carousel>*{flex-basis:calc(50% - 10px)!important}}@media(min-width:1024px){.owl-carousel>*{flex-basis:calc(33.333% - 14px)!important}}.pbn-owl-dots{display:flex;justify-content:center;gap:8px;margin-top:16px}.pbn-owl-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:currentColor;opacity:.3;cursor:pointer}.pbn-owl-dots button.is-active{opacity:1}
/* pbn contact-hero: grow to contain the lead form.
   The theme pins .banner_hero to a fixed height:810px; when the 2-step form's
   inline validation errors expand it, the taller form spilled out the bottom of
   the dark hero backdrop onto the white section below. Let the hero grow
   (background-size:cover + dark background-color fill any extra height), keeping
   810px as a floor so the at-rest look is unchanged. */
.page-template-contact-us-new .banner_hero{height:auto;min-height:810px}

/* pbn-carousel-fix: verbatim owl-carousel replaced by static CSS (zero-JS).
   owl.css hides .owl-carousel until its (stripped) JS inits \002014 un-hide + make it
   a horizontal scroll-snap slider. offers-carousel (CONTACT INFO) gets the owl
   class only via JS on mobile, so stack it 1-col below 1025px. */
.owl-carousel{display:flex!important;flex-wrap:nowrap;overflow-x:auto;gap:20px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.owl-carousel>*{flex:0 0 auto;scroll-snap-align:start;min-width:0}
@media(max-width:1024px){.offers-carousel{display:block!important}.offers-carousel>.col{width:100%!important;margin:0 0 20px!important}}

/* pbn blog-post closing CTA overlap. The illustration in .col:last-child is
   position:absolute with right:0 against the full-bleed <aside>, at a fixed
   830px, while the text column stays 562px. So the artwork creeps further left
   as the window narrows and covered the last word of the copy (worst case
   ~1280px, where only 380px is clear). The theme solves this per-post
   (.post-template-single-how-to-build-a-payment-gateway caps its column at
   604px / its paragraph at 460px), so scope it the same way rather than
   restyling every post's block: let the image scale with the viewport instead
   of sitting at a fixed 830px, and keep the copy inside what is left.
   Desktop only \002014 below 1025px the theme makes the image position:relative and
   the row stacks, so there is nothing to clear. */
@media (min-width:1026px){
  .postid-9911 .white_label_pages .aside_footer_partners .row .col:last-child img,
  .postid-9910 .white_label_pages .aside_footer_partners .row .col:last-child img,
  .postid-9909 .white_label_pages .aside_footer_partners .row .col:last-child img{max-width:47%;height:auto;}
  .postid-9911 .white_label_pages .aside_footer_partners .row .col:first-child,
  .postid-9910 .white_label_pages .aside_footer_partners .row .col:first-child,
  .postid-9909 .white_label_pages .aside_footer_partners .row .col:first-child{max-width:500px;}
  .postid-9911 .white_label_pages .aside_footer_partners .text_get_started p,
  .postid-9910 .white_label_pages .aside_footer_partners .text_get_started p,
  .postid-9909 .white_label_pages .aside_footer_partners .text_get_started p{max-width:460px;}
}

/* pbn blog TOC casing: .blog_toc__link lowercases every entry (with
   :first-letter re-capitalised), which suits the posts whose <h2>s are authored
   in ALL CAPS but mangles properly-cased headings \002014 "Security: PCI DSS,
   Tokenisation, and Fraud" rendered as "Security: pci dss, tokenisation, and
   fraud". Posts written in title case add .blog_toc--cased to the aside to keep
   their headings verbatim in the contents list. */
.blog_toc--cased .blog_toc__link{text-transform:none;}

/* pbn .three_colour_different unreadable body copy. The theme paints
   article.col:nth-child(2)/(4) blue (#245EFE) and nth-child(3)/(5) with the dark
   gradient, and whitens the .h3_title for BOTH the .first_full and .three_cols
   layouts \002014 but it only whitens .desc_offer p for .three_cols. So a .first_full
   section renders #595959 body text on blue (1.37:1) or near-black (2.59:1), and
   an inline link at #245EFE on the identical #245EFE background is invisible.
   Reported by the operator on two pages (white-label-crypto-payment-gateway-
   development, custom-fintech-software-development) and latent on ~13 more, so
   fixed at the pattern level rather than per page.
   Deliberately limited to nth-child(2)-(5), mirroring the theme's own coloured
   backgrounds exactly. Do NOT add a :last-child clause: whether the final card
   is dark or white varies with the card count and .color_mobile_fix, and
   whitening it blindly puts white text on the white card (seen on
   build-a-payment-gateway, which has six cards). */
.three_colour_different.offers.first_full .row article.col:nth-child(2) .desc_offer p,
.three_colour_different.offers.first_full .row article.col:nth-child(3) .desc_offer p,
.three_colour_different.offers.first_full .row article.col:nth-child(4) .desc_offer p,
.three_colour_different.offers.first_full .row article.col:nth-child(5) .desc_offer p{color:#fff;}
.three_colour_different.offers.first_full .row article.col:nth-child(2) .desc_offer a,
.three_colour_different.offers.first_full .row article.col:nth-child(3) .desc_offer a,
.three_colour_different.offers.first_full .row article.col:nth-child(4) .desc_offer a,
.three_colour_different.offers.first_full .row article.col:nth-child(5) .desc_offer a{color:#fff;text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(255,255,255,.6);}

/* pbn low-contrast brand blue on pale surfaces. A sweep of all 231 composed
   pages found two recurring text colours below the 4.5:1 AA threshold, both of
   them the brand blue sitting on one of the near-white surfaces:
     #4D79FF on #F8FBFF = 3.68:1  (.comparison-table-card__label, 712 nodes \002014
                                   the mobile comparison cards on every page
                                   that ships a comparison table)
     #245EFE on #E9F0F9 = 4.45:1  (active TOC pill, cost-breakdown prices,
                                   accordion button text, .item_pay headings)
   #1E4FD6 is the nearest darkening of #245EFE that clears 4.5:1 against all
   three surfaces (5.82 / 6.43 / 6.68) while staying in the same blue family, so
   the brand read is unchanged. Site-wide by request \002014 the operator reported the
   colours as "\00043f\000440\00043e\000431\00043b\000435\00043c\000430 \00043d\000430 \000431\000430\000433\000430\000442\00044c\00043e\000445 \000441\000442\00043e\000440\000456\00043d\00043a\000430\000445". */
.comparison-table-card__label,
.blog_toc__link.is-active,
.blog_toc__link.is-active span,
.pg-cost-breakdown__item-price,
.payments-scale__accordion-item.is-active .payments-scale__accordion-btn-text,
.level_items .item_pay .h3_title{color:#1E4FD6;}

/* pbn blog FAQ questions rendered as bold body text rather than <h3> headings
   (operator request on /blog/fintech-product-development/). Dropping the
   heading also drops its vertical rhythm: a plain <p> sits 15px from both the
   previous answer and its own answer, so the pairs read as one flat run. Push
   the question away from the answer above it and tuck it against its own. */
.blog_content p.faq-q,
.text_blog p.faq-q{margin-top:28px;margin-bottom:6px;}
/* adjacent margins collapse to the larger of the two, so the answer needs
   trimming as well for the pair to actually close up. */
.blog_content p.faq-q + p,
.text_blog p.faq-q + p{margin-top:6px;}

/* pbn breadcrumb pill overflow. main.css pins #breadcrumbs to height:37px with
   width:fit-content, so any crumb chain that needs more than one line spills its
   remaining words *outside* the rounded pill \002014 they land bare on the hero, right
   above the <h1>. The operator hit this on how-to-create-a-payment-processing-
   company, where the trailing word "Company" hung under the pill; a sweep found
   20 more pages doing the same with long post titles. Let the pill grow instead
   of clipping, keeping 37px as the at-rest height so short chains are unchanged.
   (The theme already does exactly this under 1025px for .blog_single_page and
   one page template \002014 this generalises that patch to every breadcrumb.) */
#breadcrumbs{height:auto;min-height:37px;display:flex;align-items:center;flex-wrap:wrap;}