/* ================================
TEXT UNDERLINES
================================ */
.underline,
.underlinelight {
position: relative;
display: inline;
}

.underline::after,
.underlinelight::after {
content: '';
position: absolute;
left: 0;
width: 100%;
bottom: 0;
background: var(--grad-color, currentColor);
}

.underline::after { height: 2px; }
.underlinelight::after { height: 1px; }

/* ================================
SLIDER PAGINATION LIMIT
================================ */

/* Desktop: show max 3 */
.splide__pagination li:nth-child(n+4),
.swiper-pagination-bullet:nth-child(n+4) {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}

/* Mobile: show max 2 */
@media (max-width: 767px) {
.splide__pagination li:nth-child(n+3),
.swiper-pagination-bullet:nth-child(n+3) {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
}

/* Center pagination */
.splide__pagination,
.swiper-pagination {
display: flex !important;
justify-content: center !important;
gap: 8px;
}

/* ================================
EDITOR CLEANUP
================================ */
#bricks-editor .element:focus,
#bricks-editor .element:focus-within {
outline: none !important;
}

/* ================================
GRID CONTEXT
================================ */
.process-grid {
position: relative;
isolation: isolate;
}

/* ================================
TAB BUTTONS
================================ */
.tab-button {
cursor: pointer;
transition: all 0.3s ease;
opacity: 0.6;
border: 2px solid transparent;
}

.tab-button:hover {
opacity: 0.9;
transform: translateY(-2px);
}

.tab-button.active {
opacity: 1 !important;
background-color: #E3F4F6 !important;
box-shadow: 0 0 0 2px #5EB1BF !important;
color: #0e3f4a !important;
}

/* ================================
RADIO & CHECKBOX STATES
================================ */
input[type="radio"]:checked + div,
input[type="radio"]:checked + label,
.bf-radio-button input:checked + .bf-radio-content,
input[type="checkbox"]:checked + div,
input[type="checkbox"]:checked + label {
box-shadow: 0 0 0 2px #5EB1BF !important;
}

/* ================================
INPUT FOCUS + SAFARI FIXES
================================ */
input,
textarea,
select {
color: inherit;
-webkit-text-fill-color: currentColor;
}

input:focus,
textarea:focus,
select:focus {
outline: none;
border-color: #5EB1BF !important;
box-shadow: 0 0 0 3px rgba(94, 177, 191, 0.2);
}

/* iOS Safari autofill fix */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-text-fill-color: currentColor !important;
transition: background-color 9999s ease-in-out 0s;
}

/* ================================
FORM SUBMIT BUTTON FIX ONLY
================================ */
.brxe-form input[type="submit"],
.brxe-form button[type="submit"] {
-webkit-appearance: none;
appearance: none;

color: inherit;
-webkit-text-fill-color: currentColor;
}

/* Ensure inner elements behave */
.brxe-form button[type="submit"] * {
color: inherit;
-webkit-text-fill-color: currentColor;
}

/* SVG inside submit button */
.brxe-form button[type="submit"] svg {
fill: currentColor;
}

/* ================================
FORM LABEL STRUCTURE
================================ */
.bf-custom-label {
display: flex;
flex-direction: column;
line-height: 1.3;
}

.bf-label-title {
font-size: var(--aptext-m);
font-weight: 400;
}

.bf-label-subtitle {
font-size: var(--aptext-xs);
opacity: 0.8;
margin-top: 0;
}

/* ================================
REMOVE UNWANTED FIELD STATES
================================ */
label[for*="form-field-timing"],
label[for*="form-field-services"] {
border: none !important;
outline: none !important;
box-shadow: none !important;
}

input[id*="form-field-timing"]:checked + label,
input[id*="form-field-services"]:checked + label,
input[id*="form-field-timing"]:focus + label,
input[id*="form-field-services"]:focus + label {
border: none !important;
outline: none !important;
box-shadow: none !important;
}

/* ================================
GRADIENT TEXT (STRICTLY SCOPED)
================================ */
[data-highlight].has-gradient-highlight {
-webkit-background-clip: initial !important;
background-clip: initial !important;
}

[data-highlight].has-gradient-highlight span {
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-image: inherit;
}

/* ================================
HEADER LOGO (note, not a fix)
The header logo is a raster PNG (Bricks attachment 37386 -> Ampy-logo.png).
The earlier raster-in-SVG (a 701x201 PNG that declared its size as 90x28)
rendered blurry on iOS because Safari rasterizes an SVG-as-img at the
declared intrinsic size. Fixed by swapping the ASSET to a real raster,
not via CSS. Display size is set by Bricks logoHeight per breakpoint.
================================ */

/* Prevent gradient interference */
svg * {
-webkit-text-fill-color: initial !important;
}

/* ================================
UNDERLINE SAFETY FIX
================================ */
span[style*="text-decoration: underline"] {
-webkit-text-fill-color: initial !important;
color: inherit !important;
}

/* ================================
AMPY CALL-BUTTON ICON CHIP (puls-ring)
Adds ONLY the round pulsing background behind the phone glyph.
Geometry is deliberately untouched: no width/height, no button padding,
no gap -- the svg keeps its existing 24px box via box-sizing:border-box,
so the button's balance is exactly as the owner set it in Bricks.
(The glyph sits ~4px inside the disc as a result. To match the Hero 1
proportions instead, raise the svg box to 36px in Bricks -- owner's call.)
The chip is WHITE on all of them. A navy chip was tried on the blue-cta
(whose icon is white) but that button is near-black, so a dark disc on a
dark button was effectively invisible -- owner's call, 2026-07-27.
  ONLY .brxe-12f74e (blue-cta-__button) is still handled here.
  .brxe-679b49 (ce-block__button) and .brxe-f76647 (footer-seo__button) were
  both reverted out on 2026-07-27 — the owner styles those in Bricks himself.
  Do not re-add them: a rule here is (0,2,1) and would override the builder.
  .brxe-12f74e blue-cta-__button   icon was #fff -> flipped to ink so it
                                   reads on the white chip (see below)
Buttons that already carry a chip (1337d2, yejhro, cbdhet, 395b4f) are
intentionally excluded.
================================ */
a.brxe-12f74e[href^="tel:"] svg {
  flex: 0 0 auto;
  /* 36px disc / ~17px glyph — the Hero 1 proportions (template 15556).
     The asymmetric padding is the owner's optical centring of the handset. */
  width: 36px;
  height: 36px;
  padding: 10.5px 10.5px 8.5px 8.5px;
  box-sizing: border-box;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  overflow: visible;
  animation: ampyChipLight 2.8s cubic-bezier(0.4, 0, 0.4, 1) infinite;
}

/* blue-cta only: its glyph is white, which would vanish on the white chip.
   Same ink as every other chipped CTA on the site (hsl(237 35% 24%)).
   NOTE: if the icon colour is set in Bricks instead, delete this rule --
   otherwise it will win over the builder (0,2,1 vs 0,1,1). */
a.brxe-12f74e[href^="tel:"] svg {
  color: rgb(40, 42, 83);
  stroke: rgb(40, 42, 83);
}

@keyframes ampyChipLight {
  0%   { box-shadow: 0 1px 3px rgba(9, 11, 50, 0.14), 0 0 0 0 rgba(255, 255, 255, 0.65); }
  55%  { box-shadow: 0 1px 3px rgba(9, 11, 50, 0.14), 0 0 0 9px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 1px 3px rgba(9, 11, 50, 0.14), 0 0 0 0 rgba(255, 255, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
  a.brxe-12f74e[href^="tel:"] svg { animation: none; }
}