/* =================================================================
   NapaPay dark-mode overlay + squircle slide toggle  (SANDBOX BUILD v3)
   Brand v2 — page #202430 · surface #2e3346 · accent #0094D4
   ================================================================= */

:root {
  --np-page-bg: #ffffff;
  --np-surface-bg: #f5f6f6;
  --np-text: #1a1a1a;
  --np-text-muted: #5b6470;
  --np-accent: #0094d4;
  --np-accent-hover: #007ab2;
  --np-border: rgba(0, 0, 0, 0.08);
}

/* OS dark — applies unless user manually picked light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --np-page-bg: #202430;
    --np-surface-bg: #2e3346;
    --np-text: #f5f6f6;
    --np-text-muted: #d4dae4;
    --np-accent: #0094d4;
    --np-accent-hover: #2eb4f0;
    --np-border: rgba(255, 255, 255, 0.10);
  }
}
/* Manual dark — overrides OS */
html[data-theme="dark"] {
  --np-page-bg: #202430;
  --np-surface-bg: #2e3346;
  --np-text: #f5f6f6;
  --np-text-muted: #d4dae4;
  --np-accent: #0094d4;
  --np-accent-hover: #2eb4f0;
  --np-border: rgba(255, 255, 255, 0.10);
}

/* ============ DARK OVERRIDES ============ */
html[data-theme="dark"],
html[data-theme="dark"] body { background-color: var(--np-page-bg) !important; color: var(--np-text); }

html[data-theme="dark"] header.bg-white,
html[data-theme="dark"] header { background-color: var(--np-page-bg) !important; border-color: var(--np-border) !important; }

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] section.bg-white { background-color: var(--np-page-bg) !important; }

html[data-theme="dark"] [class*="bg-[#f"],
html[data-theme="dark"] [class*="bg-[#F"],
html[data-theme="dark"] [class*="bg-[#e"],
html[data-theme="dark"] [class*="bg-[#E"] { background-color: var(--np-surface-bg) !important; }

html[data-theme="dark"] [class*="bg-gray-"],
html[data-theme="dark"] [class*="bg-slate-"],
html[data-theme="dark"] [class*="bg-neutral-"] { background-color: var(--np-surface-bg) !important; }

/* Dark heading/body text → light */
html[data-theme="dark"] [class*="text-gray-9"],
html[data-theme="dark"] [class*="text-gray-8"],
html[data-theme="dark"] [class*="text-gray-7"],
html[data-theme="dark"] [class*="text-black"],
html[data-theme="dark"] [class*="text-[#1"],
html[data-theme="dark"] [class*="text-[#2"],
html[data-theme="dark"] [class*="text-[#3"],
html[data-theme="dark"] [class*="text-[#4"] { color: var(--np-text) !important; }

/* Mid-grey body copy → readable lighter grey */
html[data-theme="dark"] [class*="text-gray-6"],
html[data-theme="dark"] [class*="text-gray-5"],
html[data-theme="dark"] [class*="text-gray-4"],
html[data-theme="dark"] [class*="text-[#5"],
html[data-theme="dark"] [class*="text-[#6"],
html[data-theme="dark"] [class*="text-[#7"],
html[data-theme="dark"] [class*="text-[#8"] { color: var(--np-text-muted) !important; }

/* All links (nav, inline, card wrappers) → brand blue.
   This makes card heading text blue too, which is the intended look. */
html[data-theme="dark"] a:not(.btn) { color: var(--np-accent); }
html[data-theme="dark"] a:not(.btn):hover { color: var(--np-accent-hover); }

/* Card body copy (grey small print under heading) stays soft-grey */
html[data-theme="dark"] a.block [class*="text-gray-6"],
html[data-theme="dark"] a.block [class*="text-gray-5"] { color: var(--np-text-muted) !important; }

html[data-theme="dark"] [class*="border-[#"],
html[data-theme="dark"] [class*="border-gray"],
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-t,
html[data-theme="dark"] .border-b,
html[data-theme="dark"] hr { border-color: var(--np-border) !important; }

html[data-theme="dark"] footer,
html[data-theme="dark"] footer.bg-white { background-color: var(--np-page-bg) !important; color: var(--np-text); }

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background-color: var(--np-surface-bg) !important;
  color: var(--np-text) !important;
  border: 1px solid var(--np-border) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--np-text-muted) !important; }

/* Cards & shadows soften */
html[data-theme="dark"] [class*="shadow"] { box-shadow: 0 2px 14px rgba(0,0,0,.35) !important; }

/* Product card light-blue hover tint (--csas) → surface in dark */
html[data-theme="dark"] a[style*="--csas"] {
  background-color: var(--np-surface-bg) !important;
  border-color: var(--np-border) !important;
}
html[data-theme="dark"] a[style*="--csas"]:hover {
  background-color: #353a4e !important;
}

/* =================================================================
   LOGO SWAP — two copies of the logo in HTML, hide based on theme.
   Light mode: show original (.np-logo-light), hide white variant.
   Dark mode: hide original, show white-wordmark (.np-logo-dark).
   ================================================================= */
.np-logo-dark { display: none; }
.np-logo-light { display: inline-block; }

html[data-theme="dark"] .np-logo-light { display: none !important; }
html[data-theme="dark"] .np-logo-dark  { display: inline-block !important; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .np-logo-light { display: none !important; }
  :root:not([data-theme="light"]) .np-logo-dark  { display: inline-block !important; }
}

/* =================================================================
   PRODUCT ICONS — keep TWO-COLOR (black→white, blue accent stays blue).
   invert(1) flips black→white, then hue-rotate(180deg) round-trips the
   blue back to a near-identical blue. Class-based so URL encoding
   can't break the selector match.
   ================================================================= */
html[data-theme="dark"] img.np-dm-icon {
  filter: invert(1) hue-rotate(180deg) saturate(1.1);
}

/* =================================================================
   ABOUT-US ILLUSTRATION — swap to outline-only variant in dark mode.
   Light = original PNG with solid white shapes.
   Dark  = outline-only PNG (white fills replaced with teal outlines).
   ================================================================= */
.np-pattern-dark { display: none; }
.np-pattern-light { display: block; }

html[data-theme="dark"] .np-pattern-light { display: none !important; }
html[data-theme="dark"] .np-pattern-dark  { display: block !important; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .np-pattern-light { display: none !important; }
  :root:not([data-theme="light"]) .np-pattern-dark  { display: block !important; }
}

/* Auto-dark mirror for icon filter */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img.np-dm-icon {
    filter: invert(1) hue-rotate(180deg) saturate(1.1);
  }
}

/* =================================================================
   ACCORDION ("Your Partner in Payment Solutions") — mirror tile colors:
   blue heading, white body. The dynamic classes use inline
   text-[#2B2A29] (near-black) for inactive titles and text-[--elcolor]
   (#0094D4 brand-blue) for active ones. The body paragraphs use
   `_cie` wrapper which gets text-gray-600 by default — force white.
   ================================================================= */
html[data-theme="dark"] [class*="text-[#2B2A29]"],
html[data-theme="dark"] [class*="text-[#2b2a29]"] { color: var(--np-text) !important; }

/* Active heading already uses --elcolor inline; reinforce in case */
html[data-theme="dark"] [class*="text-[--elcolor]"] { color: var(--np-accent) !important; }

/* Accordion body content (._cie wrapper) → white instead of grey */
html[data-theme="dark"] ._cie,
html[data-theme="dark"] ._cie p,
html[data-theme="dark"] ._cie strong { color: var(--np-text) !important; }

/* "Learn more" inline links inside accordion already blue via a:not(.btn) rule */

/* Auto-dark mirrors all the other dark rules */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body { background-color: var(--np-page-bg) !important; color: var(--np-text); }
  :root:not([data-theme="light"]) header,
  :root:not([data-theme="light"]) .bg-white,
  :root:not([data-theme="light"]) section.bg-white,
  :root:not([data-theme="light"]) footer { background-color: var(--np-page-bg) !important; border-color: var(--np-border) !important; }
  :root:not([data-theme="light"]) [class*="bg-gray-"],
  :root:not([data-theme="light"]) [class*="bg-[#f"],
  :root:not([data-theme="light"]) [class*="bg-[#F"],
  :root:not([data-theme="light"]) [class*="bg-[#e"],
  :root:not([data-theme="light"]) [class*="bg-[#E"] { background-color: var(--np-surface-bg) !important; }
  :root:not([data-theme="light"]) [class*="text-gray-9"],
  :root:not([data-theme="light"]) [class*="text-gray-8"],
  :root:not([data-theme="light"]) [class*="text-gray-7"],
  :root:not([data-theme="light"]) [class*="text-black"] { color: var(--np-text) !important; }
  :root:not([data-theme="light"]) [class*="text-gray-6"],
  :root:not([data-theme="light"]) [class*="text-gray-5"] { color: var(--np-text-muted) !important; }
  :root:not([data-theme="light"]) a:not(.btn) { color: var(--np-accent); }
  :root:not([data-theme="light"]) a.block [class*="text-gray-6"],
  :root:not([data-theme="light"]) a.block [class*="text-gray-5"] { color: var(--np-text-muted) !important; }
  :root:not([data-theme="light"]) [class*="text-[#2B2A29]"],
  :root:not([data-theme="light"]) [class*="text-[#2b2a29]"] { color: var(--np-text) !important; }
  :root:not([data-theme="light"]) ._cie,
  :root:not([data-theme="light"]) ._cie p,
  :root:not([data-theme="light"]) ._cie strong { color: var(--np-text) !important; }
  :root:not([data-theme="light"]) a[style*="--csas"] {
    background-color: var(--np-surface-bg) !important;
    border-color: var(--np-border) !important;
  }
  :root:not([data-theme="light"]) a[style*="--csas"]:hover {
    background-color: #353a4e !important;
  }
  :root:not([data-theme="light"]) input,
  :root:not([data-theme="light"]) textarea,
  :root:not([data-theme="light"]) select {
    background-color: var(--np-surface-bg) !important;
    color: var(--np-text) !important;
    border: 1px solid var(--np-border) !important;
  }
}

/* =================================================================
   BACKGROUND-IMAGE patterns (hero banners use `Pattern_main_white.svg`
   as a div background). In dark mode hide them so they don't appear
   as bright washes against the dark hero photo.
   ================================================================= */
html[data-theme="dark"] [style*="Pattern_main_white"],
html[data-theme="dark"] [style*="Pattern_main_blue"] {
  opacity: 0.18;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [style*="Pattern_main_white"],
  :root:not([data-theme="light"]) [style*="Pattern_main_blue"] {
    opacity: 0.18;
  }
}

/* Footer dark text fix (footer has its own bg color, force readable text) */
html[data-theme="dark"] footer * { color: var(--np-text-muted) !important; }
html[data-theme="dark"] footer a:not(.btn) { color: var(--np-accent) !important; }
html[data-theme="dark"] footer h1,
html[data-theme="dark"] footer h2,
html[data-theme="dark"] footer h3,
html[data-theme="dark"] footer h4,
html[data-theme="dark"] footer strong { color: var(--np-text) !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) footer * { color: var(--np-text-muted) !important; }
  :root:not([data-theme="light"]) footer a:not(.btn) { color: var(--np-accent) !important; }
}

/* =================================================================
   FEATURE / SCREENSHOT IMAGES (laptop card, app shots).
   These PNGs have a baked-in pale-blue background. In dark mode we
   blend them with the page bg so the rectangle softens. Slight
   brightness drop keeps highlights from glowing on a dark surface.
   ================================================================= */
html[data-theme="dark"] img.rounded-\[30px\],
html[data-theme="dark"] picture img[class*="rounded-"] {
  mix-blend-mode: luminosity;
  filter: brightness(0.85) contrast(1.05);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img.rounded-\[30px\],
  :root:not([data-theme="light"]) picture img[class*="rounded-"] {
    mix-blend-mode: luminosity;
    filter: brightness(0.85) contrast(1.05);
  }
}

/* =================================================================
   FORM custom select (Alpine widget `.sa-main`, `.sa-wrap`, `.sa-list`,
   `.sa-option`). The closed pill is fine; when open the popover and
   list items keep light styles. Force them to dark surface + readable
   text + brand-blue hover.
   ================================================================= */
html[data-theme="dark"] .sa-main,
html[data-theme="dark"] .sa-values,
html[data-theme="dark"] .sa-selected {
  background-color: var(--np-surface-bg) !important;
  color: var(--np-text) !important;
  border-color: var(--np-border) !important;
}
html[data-theme="dark"] .sa-wrap {
  background-color: var(--np-surface-bg) !important;
  border: 1px solid var(--np-border) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}
html[data-theme="dark"] .sa-search {
  background-color: var(--np-page-bg) !important;
  color: var(--np-text) !important;
  border: 1px solid var(--np-border) !important;
}
html[data-theme="dark"] .sa-list { background-color: transparent !important; }
html[data-theme="dark"] .sa-option { background-color: transparent !important; }
html[data-theme="dark"] .sa-option .sa-option-value,
html[data-theme="dark"] .sa-option a { color: var(--np-text) !important; }
html[data-theme="dark"] .sa-option.sa-active,
html[data-theme="dark"] .sa-option:hover { background-color: rgba(0, 148, 212, 0.18) !important; }
html[data-theme="dark"] .sa-option.sa-active .sa-option-value,
html[data-theme="dark"] .sa-option:hover .sa-option-value { color: var(--np-accent) !important; }
html[data-theme="dark"] .sa-arrow { color: var(--np-text) !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sa-main,
  :root:not([data-theme="light"]) .sa-values,
  :root:not([data-theme="light"]) .sa-selected {
    background-color: var(--np-surface-bg) !important;
    color: var(--np-text) !important;
    border-color: var(--np-border) !important;
  }
  :root:not([data-theme="light"]) .sa-wrap {
    background-color: var(--np-surface-bg) !important;
    border: 1px solid var(--np-border) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
  }
  :root:not([data-theme="light"]) .sa-search {
    background-color: var(--np-page-bg) !important;
    color: var(--np-text) !important;
    border: 1px solid var(--np-border) !important;
  }
  :root:not([data-theme="light"]) .sa-option .sa-option-value,
  :root:not([data-theme="light"]) .sa-option a { color: var(--np-text) !important; }
  :root:not([data-theme="light"]) .sa-option.sa-active,
  :root:not([data-theme="light"]) .sa-option:hover { background-color: rgba(0, 148, 212, 0.18) !important; }
  :root:not([data-theme="light"]) .sa-option.sa-active .sa-option-value,
  :root:not([data-theme="light"]) .sa-option:hover .sa-option-value { color: var(--np-accent) !important; }
}

/* smooth crossfade on every theme change */
body, header, footer, section, main, div, .bg-white,
input, textarea, select, button, .btn, a, span, p, h1, h2, h3, h4 {
  transition: background-color 350ms ease, color 350ms ease, border-color 350ms ease;
}

/* =================================================================
   Squircle slide toggle — pill with sliding thumb + sun/moon icons
   ================================================================= */
.np-theme-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 9999;
  width: 62px;
  height: 32px;
  padding: 0;
  border: 1.6px solid var(--np-text);
  background: transparent;
  border-radius: 9px;
  cursor: pointer;
  color: var(--np-text);
  transition: border-color 350ms ease, transform 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.np-theme-toggle:hover { transform: scale(1.04); }
.np-theme-toggle:active { transform: scale(0.96); }
.np-theme-toggle:focus-visible { outline: 2px solid var(--np-accent); outline-offset: 3px; }

.np-theme-toggle__track {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 7px;
  overflow: hidden;
}

.np-theme-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(50% - 2px);
  height: calc(100% - 4px);
  background: var(--np-text);
  border-radius: 6px 4px 4px 6px;
  transition: transform 450ms cubic-bezier(.4,0,.2,1), border-radius 450ms cubic-bezier(.4,0,.2,1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .np-theme-toggle__thumb {
    transform: translateX(calc(100% + 0px));
    border-radius: 4px 6px 6px 4px;
  }
}
html[data-theme="dark"] .np-theme-toggle__thumb {
  transform: translateX(calc(100% + 0px));
  border-radius: 4px 6px 6px 4px;
}

.np-theme-toggle__icon {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: color 350ms ease;
}
.np-theme-toggle__icon svg { width: 14px; height: 14px; }
.np-theme-toggle__icon--sun  { left: 8px;  color: var(--np-page-bg); }
.np-theme-toggle__icon--moon { right: 8px; color: var(--np-text); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .np-theme-toggle__icon--sun  { color: var(--np-text); }
  :root:not([data-theme="light"]) .np-theme-toggle__icon--moon { color: var(--np-page-bg); }
}
html[data-theme="dark"] .np-theme-toggle__icon--sun  { color: var(--np-text); }
html[data-theme="dark"] .np-theme-toggle__icon--moon { color: var(--np-page-bg); }

html[data-theme-mode="auto"] .np-theme-toggle::after {
  content: "A";
  position: absolute;
  top: -6px;
  right: -6px;
  width: 14px;
  height: 14px;
  background: var(--np-accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  border-radius: 50%;
  font-family: -apple-system, system-ui, sans-serif;
}

/* Touch devices (phones + tablets, any orientation): move toggle to
   bottom-right so it never collides with the Client Portal button in
   the header. Respect iOS safe-area inset. */
@media (pointer: coarse), (max-width: 900px) {
  .np-theme-toggle {
    top: auto;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    right: calc(14px + env(safe-area-inset-right, 0px));
    width: 56px;
    height: 30px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    background: var(--np-page-bg);
  }
  .np-theme-toggle__icon svg { width: 12px; height: 12px; }
  .np-theme-toggle__icon--sun  { left: 7px; }
  .np-theme-toggle__icon--moon { right: 7px; }
  html[data-theme-mode="auto"] .np-theme-toggle::after {
    top: -5px;
    right: -5px;
    width: 12px;
    height: 12px;
    line-height: 12px;
    font-size: 8px;
  }
}