.elementor-3853 .elementor-element.elementor-element-2fa7bfaa:not(.elementor-motion-effects-element-type-background), .elementor-3853 .elementor-element.elementor-element-2fa7bfaa > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-3853 .elementor-element.elementor-element-2fa7bfaa > .elementor-container{max-width:1000px;}.elementor-3853 .elementor-element.elementor-element-2fa7bfaa{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:0px;margin-bottom:0px;padding:1em 0em 1em 0em;}.elementor-3853 .elementor-element.elementor-element-2fa7bfaa > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-3853 .elementor-element.elementor-element-200bbc8a > .elementor-widget-container{background-color:#D2D2D2;margin:0px 0px 0px 0px;padding:15px 15px 0px 15px;border-radius:3px 3px 3px 3px;}.elementor-3853 .elementor-element.elementor-element-521178ed > .elementor-element-populated{padding:3em 3em 3em 3em;}.elementor-3853 .elementor-element.elementor-element-428b447b .elementor-heading-title{font-family:"Josefin Sans", Sans-serif;font-size:1.9em;font-weight:500;color:#7A7A7A;}.elementor-3853 .elementor-element.elementor-element-78023f7b{margin-top:-6px;margin-bottom:33px;padding:0px 0px 0px 0px;}.elementor-3853 .elementor-element.elementor-element-67b5594c > .elementor-element-populated{margin:-10px -10px -10px -10px;--e-column-margin-right:-10px;--e-column-margin-left:-10px;}.elementor-3853 .elementor-element.elementor-element-162ca8e{width:auto;max-width:auto;}.elementor-3853 .elementor-element.elementor-element-162ca8e > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-bc-flex-widget .elementor-3853 .elementor-element.elementor-element-4890b1c.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-3853 .elementor-element.elementor-element-4890b1c.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-3853 .elementor-element.elementor-element-4890b1c.elementor-column > .elementor-widget-wrap{justify-content:flex-end;}.elementor-3853 .elementor-element.elementor-element-4890b1c > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){--kit-widget-spacing:0px;}.elementor-3853 .elementor-element.elementor-element-4890b1c > .elementor-element-populated{margin:0px 0px 8px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-3853 .elementor-element.elementor-element-663085c7{--grid-row-gap:0px;border-radius:10px 10px 10px 10px;--grid-column-gap:13px;}.elementor-3853 .elementor-element.elementor-element-57c0b69 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-3853 .elementor-element.elementor-element-572e403{--display:flex;}.elementor-3853 .elementor-element.elementor-element-92e4127{--display:flex;}.elementor-3853 .elementor-element.elementor-element-3fb8980{--display:flex;}.elementor-3853 .elementor-element.elementor-element-f46964e{--display:flex;}.elementor-3853 .elementor-element.elementor-element-d0a6090{--n-menu-dropdown-content-max-width:initial;--n-menu-heading-wrap:wrap;--n-menu-heading-overflow-x:initial;--n-menu-title-distance-from-content:0px;--n-menu-toggle-icon-wrapper-animation-duration:500ms;--n-menu-title-space-between:0px;--n-menu-title-transition:300ms;--n-menu-icon-size:16px;--n-menu-toggle-icon-size:20px;--n-menu-toggle-icon-hover-duration:500ms;--n-menu-toggle-icon-distance-from-dropdown:0px;}@media(min-width:768px){.elementor-3853 .elementor-element.elementor-element-67b5594c{width:50%;}.elementor-3853 .elementor-element.elementor-element-4890b1c{width:50%;}}/* Start custom CSS for column, class: .elementor-element-72f63f03 */body .geodir-listing-search.gd-search-bar-style .geodir-loc-bar .clearfix.geodir-loc-bar-in .geodir-search button {
    margin: 0px !important;
    padding: 20px 60px !important;
    height: auto;
    border-radius: 0px 3px 3px 0px !important;
    background: #DA3743 !important;
    color: #fff !important;
}
body .geodir-listing-search.gd-search-bar-style .geodir-loc-bar .clearfix.geodir-loc-bar-in .geodir-search .gd-search-input-wrapper .geodir-search-input-label+input {
    height: auto !important;
    padding: 20px 30px !important;
}
.geodir-search-input-label {
    top: 17px !important;
}

.geodir-loc-bar {
    border: 0px !important;
}
.geodir-loc-bar-in {
    padding: 0px;
    border: 0px;
}
body .geodir-listing-search.gd-search-bar-style .geodir-loc-bar .clearfix.geodir-loc-bar-in .geodir-search .gd-search-input-wrapper {
    margin: 0px;
}/* End custom CSS */
/* Start custom CSS for wp-widget-gd_loop_actions, class: .elementor-element-162ca8e */.elementor-3853 .elementor-element.elementor-element-162ca8e .geodir-list-view-select{
    display:none;
}
.elementor-3853 .elementor-element.elementor-element-162ca8e .geodir-tax-sort{
    float: right
}/* End custom CSS */
/* Start custom CSS for archive-posts, class: .elementor-element-663085c7 */.elementor-334 .elementor-element.elementor-element-663085c7 .elementor-pagination {
    
    padding: 60px 0px;
    font-size: 20px;
}/* End custom CSS */
/* Start custom CSS for wp-widget-gd_loop_paging, class: .elementor-element-57c0b69 */.elementor-3853 .elementor-element.elementor-element-57c0b69 .page-numbers{
    display:none;
}
.elementor-3853 .elementor-element.elementor-element-57c0b69 .gd-pagination-details{
    color: #ccc
}/* End custom CSS */
/* Start custom CSS for mega-menu, class: .elementor-element-d0a6090 *//* ==========================================================================
   PayrollDirectory.com — "Ledger" Design System v1.0
   Paste into Elementor: Site Settings → Custom CSS (Pro)
   or into your child theme's style.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS (CSS variables — single source of truth)
   -------------------------------------------------------------------------- */
:root {
  /* Core palette */
  --ledger-navy-900:  #0B1F33; /* headlines, footer bg, primary text on light */
  --ledger-navy-700:  #14304D; /* subheadings, secondary outlines, nav links, Verified badge */
  --ledger-slate-600: #3D5468; /* body text & metadata on white/Cloud — never headings */
  --ledger-green-700: #17835F; /* button fills & text links — WCAG AA with white text */
  --ledger-green-600: #1D9E75; /* borders, badge outlines, icons, large numerals only */
  --ledger-gold-500:  #E8B54D; /* featured badges, star ratings — pairs with Navy 900 text only */
  --ledger-mist-300:  #C8D3DD; /* card borders, dividers, input outlines, disabled */
  --ledger-cloud-100: #F5F7FA; /* section backgrounds, filter sidebar, alt rows */
  --ledger-white:     #FFFFFF; /* card surface */

  /* Semantic colors */
  --ledger-success: var(--ledger-green-700);
  --ledger-warning: #B7791F;
  --ledger-error:   #C0392B;
  --ledger-info:    var(--ledger-navy-700);

  /* Typography */
  --ledger-font-heading: 'IBM Plex Sans', sans-serif;
  --ledger-font-body:    'Inter', sans-serif;

  --ledger-h1-size: 40px; --ledger-h1-line: 48px;
  --ledger-h2-size: 30px; --ledger-h2-line: 38px;
  --ledger-h3-size: 22px; --ledger-h3-line: 30px;
  --ledger-overline-size: 12px; --ledger-overline-line: 16px;
  --ledger-body-size: 16px; --ledger-body-line: 26px;
  --ledger-small-size: 14px; --ledger-small-line: 22px;
  --ledger-caption-size: 12px; --ledger-caption-line: 16px;

  /* Spacing — 8px grid */
  --ledger-space-1: 8px;
  --ledger-space-2: 16px;
  --ledger-space-3: 24px;
  --ledger-space-4: 32px;
  --ledger-space-6: 48px;
  --ledger-space-8: 64px;

  /* Layout */
  --ledger-content-max: 1200px;
  --ledger-content-gutter: 24px;
  --ledger-longform-max: 760px;
  --ledger-sidebar-width: 280px;

  /* Radius */
  --ledger-radius-btn: 8px;
  --ledger-radius-card: 8px;
  --ledger-radius-pill: 999px;
}

/* --------------------------------------------------------------------------
   2. FONT IMPORT (only load what the guide specifies — 4 files total)
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600&family=Inter:wght@400;600&display=swap');

/* --------------------------------------------------------------------------
   3. GLOBAL TYPOGRAPHY
   -------------------------------------------------------------------------- */
body,
.elementor-widget-text-editor,
input, textarea, select, button {
  font-family: var(--ledger-font-body);
  font-weight: 400;
  color: var(--ledger-slate-600);
  font-size: var(--ledger-body-size);
  line-height: var(--ledger-body-line);
}

h1, h2, h3,
.elementor-heading-title {
  font-family: var(--ledger-font-heading);
  font-weight: 600;
  color: var(--ledger-navy-900);
  letter-spacing: normal;
}

h1, .ledger-h1 { font-size: var(--ledger-h1-size); line-height: var(--ledger-h1-line); }
h2, .ledger-h2 { font-size: var(--ledger-h2-size); line-height: var(--ledger-h2-line); }
h3, .ledger-h3 { font-size: var(--ledger-h3-size); line-height: var(--ledger-h3-line); }

.ledger-overline {
  font-family: var(--ledger-font-body);
  font-weight: 600;
  font-size: var(--ledger-overline-size);
  line-height: var(--ledger-overline-line);
  text-transform: uppercase;
  letter-spacing: 0.08em; /* +8% tracking */
  color: var(--ledger-slate-600);
}

.ledger-small { font-size: var(--ledger-small-size); line-height: var(--ledger-small-line); }
.ledger-caption { font-size: var(--ledger-caption-size); line-height: var(--ledger-caption-line); color: var(--ledger-slate-600); }

/* Body copy measure */
p, .ledger-body-copy {
  max-width: 75ch; /* keeps 55–75 char line length; tighten per-container as needed */
}

/* Long-form guide pages */
.ledger-longform,
.single-guide .elementor-widget-container {
  max-width: var(--ledger-longform-max);
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   4. PAGE STRUCTURE / SECTIONS
   -------------------------------------------------------------------------- */
.elementor-section.ledger-section-cloud,
.ledger-bg-cloud {
  background-color: var(--ledger-cloud-100);
}

.elementor-section.ledger-section-white,
.ledger-bg-white {
  background-color: var(--ledger-white);
}

.ledger-container,
.elementor-container {
  max-width: var(--ledger-content-max);
  padding-left: var(--ledger-content-gutter);
  padding-right: var(--ledger-content-gutter);
}

/* Section rhythm: 64px OR a Cloud band — never stack both */
.ledger-section-spacing {
  padding-top: var(--ledger-space-8);
  padding-bottom: var(--ledger-space-8);
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */

/* Primary — Green 700 fill, white text. One per screen. */
.elementor-button.ledger-btn-primary,
.ledger-btn-primary,
.geodir-btn.ledger-btn-primary {
  background-color: var(--ledger-green-700);
  color: var(--ledger-white);
  font-family: var(--ledger-font-body);
  font-weight: 600;
  font-size: 16px;
  border: none;
  border-radius: var(--ledger-radius-btn);
  padding: 12px 24px;
  transition: background-color 0.15s ease;
}
.elementor-button.ledger-btn-primary:hover,
.ledger-btn-primary:hover,
.geodir-btn.ledger-btn-primary:hover {
  background-color: #146f4f; /* Green 700 darkened ~8% */
  color: var(--ledger-white);
}

/* Secondary — white fill, Navy 700 outline + text */
.elementor-button.ledger-btn-secondary,
.ledger-btn-secondary {
  background-color: var(--ledger-white);
  color: var(--ledger-navy-700);
  font-family: var(--ledger-font-body);
  font-weight: 600;
  font-size: 16px;
  border: 1px solid var(--ledger-navy-700);
  border-radius: var(--ledger-radius-btn);
  padding: 12px 24px;
}
.elementor-button.ledger-btn-secondary:hover,
.ledger-btn-secondary:hover {
  background-color: var(--ledger-cloud-100);
}

/* Text link — Green 700, arrow, underline on hover only */
.ledger-btn-text {
  color: var(--ledger-green-700);
  font-family: var(--ledger-font-body);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ledger-btn-text:hover { text-decoration: underline; }

/* Disabled state */
.elementor-button.ledger-btn-primary:disabled,
.elementor-button.ledger-btn-secondary:disabled,
.ledger-btn-primary[disabled],
.ledger-btn-secondary[disabled] {
  background-color: var(--ledger-mist-300);
  color: rgba(61, 84, 104, 0.6); /* Slate at 60% */
  border-color: var(--ledger-mist-300);
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   6. BADGES
   -------------------------------------------------------------------------- */
.ledger-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--ledger-font-body);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border-radius: var(--ledger-radius-pill);
  line-height: 1;
}

.ledger-badge-verified {
  background-color: var(--ledger-navy-700);
  color: var(--ledger-white);
}

.ledger-badge-promoted {
  background-color: var(--ledger-white);
  color: var(--ledger-navy-900);
  border: 1.5px solid var(--ledger-green-600);
}

.ledger-badge-featured {
  background-color: var(--ledger-gold-500);
  color: var(--ledger-navy-900);
}

.ledger-badge-new,
.ledger-badge-since {
  background-color: var(--ledger-cloud-100);
  color: var(--ledger-slate-600);
  border: 1px solid var(--ledger-mist-300);
}

/* Never stack more than 3 badges per card */
.ledger-badge-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ledger-badge-row > .ledger-badge:nth-child(n+4) { display: none; }

/* --------------------------------------------------------------------------
   7. LISTING CARDS
   -------------------------------------------------------------------------- */
.ledger-card,
.geodir-listing-card {
  background-color: var(--ledger-white);
  border: 0.5px solid var(--ledger-mist-300);
  border-radius: var(--ledger-radius-card);
  padding: var(--ledger-space-2) var(--ledger-space-3); /* 16–20px internal padding */
  margin-bottom: var(--ledger-space-3); /* 24px between cards */
}

.ledger-card.ledger-card-promoted,
.geodir-listing-card.gd-is-promoted {
  border: 1.5px solid var(--ledger-green-600);
  order: -1; /* Promoted sorts first */
}

.ledger-card h3,
.ledger-card .ledger-card-title {
  font-family: var(--ledger-font-heading);
  font-weight: 600;
  font-size: var(--ledger-h3-size);
  line-height: var(--ledger-h3-line);
  color: var(--ledger-navy-900);
  margin: 0 0 4px;
}

.ledger-card .ledger-card-meta {
  font-family: var(--ledger-font-body);
  font-size: var(--ledger-small-size);
  line-height: var(--ledger-small-line);
  color: var(--ledger-slate-600);
}

.ledger-card .ledger-card-rating {
  color: var(--ledger-gold-500);
}

/* Only the quote/CTA button on a card may use green */
.ledger-card .ledger-btn-primary {
  margin-top: var(--ledger-space-2);
}

/* Provider logo tile */
.ledger-card-logo {
  width: 56px;
  height: 56px;
  border: 0.5px solid var(--ledger-mist-300);
  background-color: var(--ledger-white);
  object-fit: contain;
  padding: 6px;
}

/* --------------------------------------------------------------------------
   8. ARCHIVE / DIRECTORY LAYOUT (city & state pages)
   -------------------------------------------------------------------------- */
.ledger-archive-layout {
  display: flex;
  gap: var(--ledger-space-3);
  align-items: flex-start;
}

.ledger-archive-sidebar,
.geodir-sidebar {
  flex: 0 0 var(--ledger-sidebar-width);
  background-color: var(--ledger-cloud-100);
  padding: var(--ledger-space-3);
  border-radius: var(--ledger-radius-card);
}

.ledger-archive-results {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* two cards per row, desktop */
  gap: var(--ledger-space-3);
}

/* Mobile: filters collapse, single column */
@media (max-width: 767px) {
  .ledger-archive-layout { flex-direction: column; }
  .ledger-archive-sidebar {
    display: none; /* replaced by the pinned "Filter" button below */
  }
  .ledger-archive-results {
    grid-template-columns: 1fr;
  }
  .ledger-filter-button-mobile {
    display: block;
    position: sticky;
    top: 0;
    z-index: 10;
    width: 100%;
    background-color: var(--ledger-navy-900);
    color: var(--ledger-white);
    text-align: center;
    padding: 12px;
    font-family: var(--ledger-font-body);
    font-weight: 600;
  }
}
@media (min-width: 768px) {
  .ledger-filter-button-mobile { display: none; }
}

/* Recommendation module (2 Promoted + AccuPay national) above organic results */
.ledger-recommendation-module {
  background-color: var(--ledger-cloud-100);
  border-radius: var(--ledger-radius-card);
  padding: var(--ledger-space-3);
  margin-bottom: var(--ledger-space-4);
}
.ledger-recommendation-module .ledger-disclosure {
  font-size: var(--ledger-caption-size);
  line-height: var(--ledger-caption-line);
  color: var(--ledger-slate-600);
  margin-top: var(--ledger-space-1);
}

/* --------------------------------------------------------------------------
   9. MAP STYLING (container only — actual map skin is set via
      Custom Map Styles add-on / Snazzy Maps JSON, not CSS)
   -------------------------------------------------------------------------- */
.ledger-map-container {
  border-radius: var(--ledger-radius-card);
  overflow: hidden;
  border: 0.5px solid var(--ledger-mist-300);
}
/* Pin colors are set in the map style config:
   Standard = Navy 700 (#14304D)
   Promoted = Gold 500 (#E8B54D) with Navy dot
   Selected = Green 600 (#1D9E75) */

/* --------------------------------------------------------------------------
   10. ICONS
   -------------------------------------------------------------------------- */
.ledger-icon,
.elementor-icon svg {
  stroke: var(--ledger-slate-600);
  stroke-width: 1.5px;
  fill: none;
  width: 20px;
  height: 20px;
}
.ledger-icon-lg { width: 24px; height: 24px; }

/* --------------------------------------------------------------------------
   11. SEMANTIC / FORM STATES
   -------------------------------------------------------------------------- */
.ledger-alert-success { color: var(--ledger-success); }
.ledger-alert-warning { color: var(--ledger-warning); }
.ledger-alert-error   { color: var(--ledger-error); }
.ledger-alert-info    { color: var(--ledger-info); }

input, textarea, select {
  border: 1px solid var(--ledger-mist-300);
  border-radius: var(--ledger-radius-btn);
  background-color: var(--ledger-white);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--ledger-navy-700);
}
input.ledger-input-error, textarea.ledger-input-error {
  border-color: var(--ledger-error);
}

/* --------------------------------------------------------------------------
   12. CLEANUP — remove theme/Elementor defaults the guide says to drop
   -------------------------------------------------------------------------- */
body, h1, h2, h3, h4, h5, h6, p, button, input, textarea, select {
  font-family: var(--ledger-font-body); /* Roboto override baseline; headings re-set above */
}/* End custom CSS */