/* ═══════════════════════════════════════════════════════════════════════════
   MannyPay — Hover Preset System (V2)
   A small, named library of hover micro-interactions. Apply one or several to
   ANY element with  data-hover="lift glow"  (space-separated, combinable).
   The site's own components are pre-mapped to the SAME preset rules below, so a
   "lift" on a card and a "lift" you add in the Studio are pixel-identical.

   Presets:  lift · lift-lg · float · scale · pop · sink · glow · border ·
             brighten · tilt · sheen · zoom · underline · icon-pop
   Loaded on the homepage (.mp scope) and inner pages. Honors reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --mp-ease: cubic-bezier(.22,.61,.36,1);
  --mp-spring: cubic-bezier(.34,1.4,.5,1);
  --mp-glow: 0 14px 32px rgba(23,104,239,.22);
  --mp-lift-shadow: 0 18px 44px rgba(7,22,48,.13);
  --mp-lift-shadow-lg: 0 28px 64px rgba(7,22,48,.18);
  --mp-blue: var(--blue, #1768ef);
}

/* ─────────────── Shared transition base ───────────────
   Applied to anything carrying a data-hover token AND to every component that
   adopts a preset by default (selector lists below stay in lock-step).        */
[data-hover],
:is(.mp, body) .button,
:is(.mp, body) :is(.industry-card,.industry-landing-card,.merchant-card,.payment-option,.featured-product-card,.product-result-card,.catalog-card,.mega-feature,.solution-support-card,.trusted-tool-card,.partner-program-card,.integration-dropdown-card,.related-product-card,.product-card,.integration-logo-card,.integration-logo){
  transition: transform .26s var(--mp-spring), box-shadow .26s var(--mp-ease),
              border-color .2s var(--mp-ease), filter .25s var(--mp-ease),
              background-color .2s var(--mp-ease), background-size .26s var(--mp-ease);
  will-change: transform;
}

/* ═══════════════ PRESETS ═══════════════ */

/* lift — rise + soft shadow (the workhorse for cards) */
[data-hover~="lift"]:hover,
:is(.mp, body) :is(.industry-card,.industry-landing-card,.merchant-card,.payment-option,.featured-product-card,.product-result-card,.catalog-card,.mega-feature,.solution-support-card,.trusted-tool-card,.partner-program-card,.integration-dropdown-card,.related-product-card,.product-card):hover{
  transform: translateY(-6px);
  box-shadow: var(--mp-lift-shadow);
  border-color:#afc7f4;
}
/* lift-lg — bigger rise for hero / feature blocks */
[data-hover~="lift-lg"]:hover{ transform: translateY(-10px); box-shadow: var(--mp-lift-shadow-lg); border-color:#afc7f4; }
/* float — gentle rise, no shadow change */
[data-hover~="float"]:hover{ transform: translateY(-5px); }

/* scale — subtle grow */
[data-hover~="scale"]:hover{ transform: scale(1.03); }
/* pop — springy grow (great for icon chips, controls) */
[data-hover~="pop"]:hover,
:is(.mp, body) .testimonial-controls button:hover{ transform: scale(1.07); }
/* sink — press down (for things that feel physical) */
[data-hover~="sink"]:hover{ transform: translateY(2px) scale(.99); }

/* glow — brand-blue shadow bloom, no movement */
[data-hover~="glow"]:hover{ box-shadow: var(--mp-glow); }
/* border — ring + brand border */
[data-hover~="border"]:hover{ border-color: var(--mp-blue); box-shadow: 0 0 0 3px rgba(23,104,239,.14); }
/* brighten — light filter */
[data-hover~="brighten"]:hover{ filter: brightness(1.06); }
/* tilt — slight 3D tip */
[data-hover~="tilt"]:hover{ transform: perspective(720px) rotateX(4deg) translateY(-3px); }

/* sheen — a light streak sweeps across (buttons, CTAs) */
[data-hover~="sheen"],
:is(.mp, body) .button{ position:relative; overflow:hidden; }
[data-hover~="sheen"]::after,
:is(.mp, body) .button::after{
  content:""; position:absolute; top:0; left:-130%; width:60%; height:100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-18deg); pointer-events:none; transition: left .6s var(--mp-ease);
}
[data-hover~="sheen"]:hover::after,
:is(.mp, body) .button:hover::after{ left:150%; }

/* zoom — clip a container and scale its inner <img> */
[data-hover~="zoom"],
:is(.mp, body) :is(.payment-option-image,.product-main-shot,.catalog-device-card,.category-visual-card,.solution-visual,.online-hero-visual){ overflow:hidden; }
[data-hover~="zoom"] > img,
:is(.mp, body) :is(.payment-option-image,.product-main-shot) > img{ transition: transform .5s var(--mp-ease); }
[data-hover~="zoom"]:hover > img,
:is(.mp, body) :is(.payment-option,.featured-product-card,.product-result-card,.catalog-card):hover :is(.payment-option-image,.product-main-shot) > img{ transform: scale(1.05); }

/* underline — animated reveal (text links) */
[data-hover~="underline"],
:is(.mp, body) :is(.breadcrumbs a,.footer-col a,.footer-links a,.mega-link,.product-category-line a){
  background-image: linear-gradient(var(--mp-blue), var(--mp-blue));
  background-repeat:no-repeat; background-position:0 100%; background-size:0% 1.5px;
  transition: background-size .26s var(--mp-ease), color .2s var(--mp-ease);
}
[data-hover~="underline"]:hover,
:is(.mp, body) :is(.breadcrumbs a,.footer-col a,.footer-links a,.mega-link,.product-category-line a):hover{
  background-size:100% 1.5px; color: var(--mp-blue);
}

/* icon-pop — a child .material-symbols pops + turns brand on hover */
[data-hover~="icon-pop"] .material-symbols{ transition: transform .28s var(--mp-spring), color .2s var(--mp-ease); }
[data-hover~="icon-pop"]:hover .material-symbols{ transform: scale(1.12) translateY(-2px); color: var(--mp-blue); }

/* ═══════════════ COMPONENT DEFAULTS (built from the same presets) ═══════════════ */

/* Buttons: lift + glow + arrow nudge + sheen (sheen wired above) */
:is(.mp, body) .button:hover{ transform: translateY(-3px); }
:is(.mp, body) .button:active{ transform: translateY(-1px) scale(.985); transition-duration:.08s; }
:is(.mp, body) .button-primary:hover{ box-shadow: var(--mp-glow); }
:is(.mp, body) .button-dark:hover{ box-shadow: 0 16px 34px rgba(0,62,170,.32); }
:is(.mp, body) .button-yellow:hover{ box-shadow: 0 14px 30px rgba(255,212,49,.45); filter:brightness(1.02); }
:is(.mp, body) .button-secondary:hover{ border-color: var(--mp-blue); box-shadow: 0 10px 26px rgba(23,104,239,.14); }
:is(.mp, body) .button > .material-symbols{ transition: transform .22s var(--mp-spring); }
:is(.mp, body) .button:hover > .material-symbols:last-child{ transform: translateX(3px); }

/* Card icons pop (icon-pop preset, applied to known cards) */
:is(.mp, body) :is(.industry-card,.merchant-card,.catalog-card,.solution-support-card,.trusted-tool-card) > .material-symbols,
:is(.mp, body) .line-icon{ transition: transform .28s var(--mp-spring), color .2s var(--mp-ease); }
:is(.mp, body) :is(.industry-card,.merchant-card,.catalog-card,.solution-support-card,.trusted-tool-card):hover > .material-symbols{ transform: scale(1.12) translateY(-2px); color: var(--mp-blue); }

/* Text-arrow CTA */
:is(.mp, body) .text-arrow > span{ transition: transform .24s var(--mp-spring); }
:is(.mp, body) .text-arrow:hover > span{ transform: translateX(5px); }

/* List / check rows: slide + accent */
:is(.mp, body) :is(.online-checks li,.check-list li,.quote-points > span){ transition: transform .2s var(--mp-ease), border-color .2s var(--mp-ease), background-color .2s var(--mp-ease); }
:is(.mp, body) :is(.online-checks li,.check-list li):hover{ transform: translateX(4px); border-color:#afc7f4; background:rgba(255,255,255,.95); }

/* Integration logos: desaturate → color (lift comes from the shared list above) */
:is(.mp, body) :is(.integration-logo-card,.integration-logo) img{ filter: grayscale(1); opacity:.62; transition: filter .3s var(--mp-ease), opacity .3s var(--mp-ease); }
:is(.mp, body) :is(.integration-logo-card,.integration-logo):hover img{ filter:grayscale(0); opacity:1; }

/* Form inputs: focus glow */
:is(.mp, body) :is(.quote-field input,.quote-field select,.dynamic-field input,.dynamic-field select,.dynamic-field textarea,.application-panel input){ transition: border-color .18s var(--mp-ease), box-shadow .18s var(--mp-ease); }
:is(.mp, body) :is(.quote-field input,.quote-field select,.dynamic-field input,.dynamic-field select,.dynamic-field textarea,.application-panel input):focus{ border-color: var(--mp-blue); box-shadow: 0 0 0 3px rgba(23,104,239,.14); }

/* Form submissions — inline notice below the form + invalid-field highlighting.
   Wired generically by wireMannyPayForm() in page-shell.js for every real form
   on the site (free quote, sign-ups, contact, partner apply). */
:is(.mp, body) .form-notice,:is(.mp, body) .quote-status{
  margin:2px 0 0;min-height:1px;font-size:12.5px;font-weight:600;line-height:1.5;
  transition:opacity .2s var(--mp-ease);
}
:is(.mp, body) .form-notice:empty{margin:0}
:is(.mp, body) .form-notice.pending,:is(.mp, body) .quote-status.pending{color:#5d6b82}
:is(.mp, body) .form-notice.success,:is(.mp, body) .quote-status.success{color:#178a55}
:is(.mp, body) .form-notice.error,:is(.mp, body) .quote-status.error{color:#c0293f}
:is(.mp, body) form.was-validated :is(input,select,textarea):invalid{border-color:#c0293f!important;box-shadow:0 0 0 3px rgba(192,41,63,.1)!important}
:is(.mp, body) button[type="submit"][disabled],:is(.mp, body) .form-submit[disabled]{opacity:.65;cursor:not-allowed}

/* Tab hover hint (pre-active underline peek) */
:is(.mp, body) .tab::after{ transition: transform .2s var(--mp-ease); }
:is(.mp, body) .tab:not(.active):hover{ color:#33405a; }
:is(.mp, body) .tab:not(.active):hover::after{ transform: scaleX(.4); }

/* ═══════════════ REDUCED MOTION ═══════════════ */
@media (prefers-reduced-motion: reduce){
  [data-hover],
  [data-hover]::after,
  :is(.mp, body) .button,
  :is(.mp, body) .button::after,
  :is(.mp, body) .button > .material-symbols,
  :is(.mp, body) [class*="-card"],
  :is(.mp, body) img,
  :is(.mp, body) .text-arrow > span{
    transition: none !important; transform: none !important;
  }
}