/* ============================================================
   BoostTags — design polish (preview-gated, CSS only)
   Everything is scoped under body.boost-polish so it has ZERO
   effect unless the preview flag / cookie is active.
   Brand tokens taken from the live site.
   ============================================================ */

body.boost-polish {
  --bp-accent:   #21ceb9;   /* brand teal */
  --bp-accent-d: #16a892;
  --bp-ink:      #12262b;
  --bp-ease:     cubic-bezier(.22,.61,.36,1);
}

/* ---- selection + smoother anchor scrolling ---- */
body.boost-polish ::selection { background: var(--bp-accent); color: #04211c; }
html:has(body.boost-polish) { scroll-behavior: smooth; }

/* ------------------------------------------------------------
   1) BUTTONS — consistent affordance + hover/press/focus
   ------------------------------------------------------------ */
body.boost-polish .elementor-button,
body.boost-polish a.elementor-button {
  transition: transform .25s var(--bp-ease),
              box-shadow .25s var(--bp-ease),
              filter .25s var(--bp-ease),
              background-color .25s var(--bp-ease);
  will-change: transform;
}
body.boost-polish .elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -12px rgba(33,206,185,.6);
  filter: saturate(1.06);
}
body.boost-polish .elementor-button:active { transform: translateY(0); box-shadow: none; }
body.boost-polish .elementor-button:focus-visible {
  outline: 2px solid var(--bp-accent);
  outline-offset: 3px;
}
/* subtle sheen sweep on primary buttons */
body.boost-polish .elementor-button {
  position: relative;
  overflow: hidden;
}
body.boost-polish .elementor-button::after {
  content: "";
  position: absolute; top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .6s var(--bp-ease);
  pointer-events: none;
}
body.boost-polish .elementor-button:hover::after { left: 130%; }

/* ------------------------------------------------------------
   2) CARDS / BOXES — gentle lift + smoother edges
   ------------------------------------------------------------ */
body.boost-polish .elementor-widget-image-box,
body.boost-polish .elementor-widget-icon-box,
body.boost-polish .elementor-widget-call-to-action {
  transition: transform .35s var(--bp-ease), box-shadow .35s var(--bp-ease);
}
body.boost-polish .elementor-widget-image-box:hover,
body.boost-polish .elementor-widget-icon-box:hover {
  transform: translateY(-6px);
}
/* icon inside icon-boxes gets a tiny pop */
body.boost-polish .elementor-widget-icon-box .elementor-icon,
body.boost-polish .elementor-widget-image-box .elementor-icon {
  transition: transform .35s var(--bp-ease);
}
body.boost-polish .elementor-widget-icon-box:hover .elementor-icon {
  transform: scale(1.12) rotate(-3deg);
}

/* ------------------------------------------------------------
   3) HEADINGS — a touch tighter + accent detail
   ------------------------------------------------------------ */
body.boost-polish .elementor-heading-title {
  letter-spacing: -.012em;
}

/* ------------------------------------------------------------
   4) TEXT LINKS — animated underline grow
   ------------------------------------------------------------ */
body.boost-polish .elementor-widget-text-editor a:not(.elementor-button) {
  text-decoration: none;
  background-image: linear-gradient(var(--bp-accent), var(--bp-accent));
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .3s var(--bp-ease);
  padding-bottom: 1px;
}
body.boost-polish .elementor-widget-text-editor a:not(.elementor-button):hover {
  background-size: 100% 1.5px;
}

/* ------------------------------------------------------------
   5) STICKY HEADER — subtle depth once scrolled
   ------------------------------------------------------------ */
body.boost-polish.bp-scrolled .uicore-navbar,
body.boost-polish.bp-scrolled header .uicore-content {
  box-shadow: 0 8px 30px -18px rgba(1,9,10,.5);
  transition: box-shadow .3s var(--bp-ease);
}

/* ------------------------------------------------------------
   6) SCROLL REVEAL — sections fade/rise in (JS-driven)
   .bp-reveal is only added by JS, so if JS is off nothing hides.
   ------------------------------------------------------------ */
body.boost-polish .bp-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .75s var(--bp-ease), transform .75s var(--bp-ease);
}
body.boost-polish .bp-reveal.bp-in {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------
   7) GALLERY (page-id-273) — contained image hover zoom
   Scoped to the gallery page so logos/icons elsewhere are safe.
   ------------------------------------------------------------ */
body.boost-polish.page-id-273 .elementor-widget-image {
  overflow: hidden;
  border-radius: 14px;
}
body.boost-polish.page-id-273 .elementor-widget-image img {
  display: block;
  transition: transform .6s var(--bp-ease), filter .6s var(--bp-ease);
}
body.boost-polish.page-id-273 .elementor-widget-image:hover img {
  transform: scale(1.06);
  filter: saturate(1.08);
}

/* ------------------------------------------------------------
   8) PRICING — hover emphasis on tier cards
   ------------------------------------------------------------ */
body.boost-polish .bdt-switcher-item-content,
body.boost-polish .elementor-widget-price-table {
  transition: transform .3s var(--bp-ease), box-shadow .3s var(--bp-ease);
}
body.boost-polish .elementor-widget-price-table:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px -26px rgba(1,9,10,.45);
}

/* ------------------------------------------------------------
   9) ACCESSIBILITY — visible focus for keyboard users
   ------------------------------------------------------------ */
body.boost-polish a:focus-visible,
body.boost-polish button:focus-visible,
body.boost-polish input:focus-visible,
body.boost-polish textarea:focus-visible {
  outline: 2px solid var(--bp-accent);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   Respect reduced-motion
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  body.boost-polish *,
  body.boost-polish *::after { transition: none !important; }
  body.boost-polish .bp-reveal { opacity: 1 !important; transform: none !important; }
}