/* Compact approved two-number header buttons. The icon alone shakes. */
html body > header#home#home .ws-approved-call-row {
  position:absolute!important; top:42px!important; left:8%!important; right:8%!important;
  z-index:20!important; display:flex!important; align-items:center!important;
  justify-content:space-between!important; gap:12px!important;
  pointer-events:none!important; width:auto!important; height:58px!important;
  margin:0!important; padding:0!important; transform:none!important;
}
html body > header#home#home .ws-approved-call {
  pointer-events:auto!important; position:relative!important; display:inline-flex!important;
  align-items:center!important; justify-content:flex-start!important; flex:0 0 auto!important;
  width:214px!important; max-width:214px!important; min-width:0!important;
  height:54px!important; box-sizing:border-box!important; padding:0!important; margin:0!important;
  overflow:hidden!important; border:3px solid #7EDC00!important; border-radius:14px!important;
  background:#fff!important; color:#101010!important;
  box-shadow:0 3px 7px rgba(0,0,0,.35)!important; text-decoration:none!important;
  font-family:Arial,Helvetica,sans-serif!important; transition:box-shadow .2s ease!important;
}
html body > header#home#home .ws-approved-call:hover {box-shadow:0 3px 12px rgba(0,110,0,.55)!important;}
html body > header#home#home .ws-approved-call .ws-approved-icon-area {
  flex:0 0 49px!important; align-self:stretch!important;
  display:flex!important; align-items:center!important; justify-content:center!important;
  background:#7EDC00!important; border-radius:11px 0 0 11px!important;
  border-right:2px solid #006400!important; box-sizing:border-box!important;
}
html body > header#home#home .ws-approved-call .ws-approved-icon {
  display:block!important; width:29px!important; height:29px!important; color:#fff!important;
  transform-origin:50% 55%!important;
  animation:ws-approved-ring 1.8s ease-in-out infinite!important;
}
html body > header#home#home .ws-approved-call .ws-approved-number {
  flex:1 1 auto!important; min-width:0!important; display:block!important;
  text-align:center!important; white-space:nowrap!important; padding:0 1px!important;
  font-size:19px!important; font-weight:800!important; line-height:1!important;
  letter-spacing:-.4px!important; color:#101010!important; text-shadow:none!important;
  transform:none!important; animation:none!important;
}
@keyframes ws-approved-ring {
  0%, 15%, 38%, 100% {transform:rotate(0deg)}
  20%, 30% {transform:rotate(-14deg)}
  25%, 35% {transform:rotate(14deg)}
}
@media (min-width:701px) and (max-width:950px) {
 html body > header#home#home .ws-approved-call-row {left:3%!important;right:3%!important;}
 html body > header#home#home .ws-approved-call {width:205px!important;max-width:205px!important;}
 html body > header#home#home .ws-approved-call .ws-approved-number {font-size:17px!important;}
}
@media (max-width:700px) {
 html body > header#home#home .ws-approved-call-row {
  top:95px!important; left:8px!important; right:8px!important;
  height:43px!important; width:auto!important; gap:8px!important;
  justify-content:space-between!important; flex-wrap:nowrap!important;
 }
 html body > header#home#home .ws-approved-call {
  flex:1 1 0!important; width:0!important; max-width:none!important;
  height:42px!important; border-radius:10px!important;
 }
 html body > header#home#home .ws-approved-call .ws-approved-icon-area {
  flex:0 0 32px!important; border-radius:8px 0 0 8px!important;
 }
 html body > header#home#home .ws-approved-call .ws-approved-icon {width:19px!important;height:19px!important;}
 html body > header#home#home .ws-approved-call .ws-approved-number {
  font-size:clamp(11px,3.4vw,16px)!important;letter-spacing:-.45px!important;
  flex:0 0 auto!important; width:auto!important; padding:0 2px!important;
 }
 /* Mobile only: shrink each button to its number, without excess side padding. */
 html body > header#home#home .ws-approved-call {
  flex:0 1 auto!important; width:auto!important; max-width:calc(50% - 4px)!important;
  padding:0!important; justify-content:flex-start!important;
 }
}
@media (prefers-reduced-motion:reduce) {
 html body > header#home#home .ws-approved-call .ws-approved-icon {animation:none!important;}
}

/* Approved sketch: diagonal green-to-white join. Only the icon panel changes shape.
   The number and whole button do NOT animate. */
html body > header#home#home .ws-approved-call .ws-approved-icon-area {
  position:relative!important;
  z-index:1!important;
  flex:0 0 61px!important;
  margin-right:-13px!important;
  clip-path:polygon(0 0,100% 0,78% 100%,0 100%)!important;
  -webkit-clip-path:polygon(0 0,100% 0,78% 100%,0 100%)!important;
  border-right:0!important;
  border-radius:0!important;
}
html body > header#home#home .ws-approved-call .ws-approved-number {
  position:relative!important;
  z-index:0!important;
  padding-left:15px!important;
  padding-right:1px!important;
}
@media (max-width:700px) {
  html body > header#home#home .ws-approved-call .ws-approved-icon-area {
    flex:0 0 43px!important;
    margin-right:-10px!important;
  }
  html body > header#home#home .ws-approved-call .ws-approved-number {
    padding-left:11px!important;
    padding-right:1px!important;
  }
}

/* Mobile header: distribute the remaining horizontal space evenly into
   left margin, middle gap, and right margin; desktop is unchanged. */
@media screen and (max-width:700px) {
  html body > header#home#home .ws-approved-call-row {
    left:0!important;
    right:0!important;
    width:100%!important;
    padding:0!important;
    gap:0!important;
    justify-content:space-evenly!important;
    box-sizing:border-box!important;
  }
}

/* 2026-11-06: Desktop equal spacing refinement.
   Large desktop: equal left, middle and right spacing for the two buttons.
   Medium desktop: symmetric placement with a protected centre zone for the logo. */
@media screen and (min-width:1200px) {
  html body > header#home#home .ws-approved-call-row {
    left:0 !important;
    right:0 !important;
    width:100% !important;
    padding:0 clamp(48px, 5vw, 110px) !important;
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) !important;
    align-items:center !important;
    justify-items:center !important;
    gap:0 !important;
  }
  html body > header#home#home .ws-approved-call-row > .ws-approved-call:first-child {grid-column:2 !important;}
  html body > header#home#home .ws-approved-call-row > .ws-approved-call:last-child {grid-column:4 !important;}
}
@media screen and (min-width:701px) and (max-width:1199px) {
  html body > header#home#home .ws-approved-call-row {
    left:0 !important;
    right:0 !important;
    width:100% !important;
    padding:0 clamp(24px, 3vw, 48px) !important;
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto minmax(220px,0.95fr) auto minmax(0,1fr) !important;
    align-items:center !important;
    justify-items:center !important;
    gap:0 !important;
  }
  html body > header#home#home .ws-approved-call-row > .ws-approved-call:first-child {grid-column:2 !important;}
  html body > header#home#home .ws-approved-call-row > .ws-approved-call:last-child {grid-column:4 !important;}
}

/* Desktop only: centre each call button between its nearest page edge
   and the visible left/right WESTSIDE lettering (approx. 190px centre zone).
   Logo remains centred and untouched. */
@media screen and (min-width:701px) {
  html body > header#home#home .ws-approved-call-row {
    left:0 !important;
    right:0 !important;
    width:100% !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) 190px minmax(0, 1fr) !important;
    justify-items:center !important;
    align-items:center !important;
    gap:0 !important;
    box-sizing:border-box !important;
  }
  html body > header#home#home .ws-approved-call-row > .ws-approved-call:first-child {
    grid-column:1 !important;
  }
  html body > header#home#home .ws-approved-call-row > .ws-approved-call:last-child {
    grid-column:3 !important;
  }
}

/* 2026-11-06: MOBILE ONLY. Ensure full 10-digit phone numbers remain visible on
   narrow screens and mobile Safari. Keep the angled icon, motion and height. */
@media screen and (max-width:700px) {
  html body > header#home#home .ws-approved-call-row {
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:100%!important;
    padding:0 8px!important;
    margin:0!important;
    box-sizing:border-box!important;
    display:flex!important;
    justify-content:space-between!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
  }
  html body > header#home#home .ws-approved-call-row > a.ws-approved-call {
    flex:1 1 0!important;
    width:0!important;
    max-width:184px!important;
    min-width:0!important;
    height:42px!important;
    padding:0!important;
    box-sizing:border-box!important;
  }
  html body > header#home#home .ws-approved-call-row > a.ws-approved-call .ws-approved-icon-area {
    flex:0 0 43px!important;
    margin-right:-10px!important;
  }
  html body > header#home#home .ws-approved-call-row > a.ws-approved-call .ws-approved-number {
    display:block!important;
    flex:1 1 0!important;
    min-width:0!important;
    width:auto!important;
    max-width:none!important;
    padding:0 2px 0 11px!important;
    font-size:clamp(11px,3.3vw,14px)!important;
    font-weight:800!important;
    letter-spacing:-.35px!important;
    line-height:1.1!important;
    text-align:center!important;
    white-space:nowrap!important;
    overflow:visible!important;
    -webkit-text-size-adjust:100%!important;
    text-size-adjust:100%!important;
  }
}
@media screen and (max-width:350px) {
  html body > header#home#home .ws-approved-call-row > a.ws-approved-call .ws-approved-icon-area {
    flex-basis:39px!important;
  }
  html body > header#home#home .ws-approved-call-row > a.ws-approved-call .ws-approved-number {
    padding-left:9px!important;
  }
}

/* 06 Nov 2026 — mobile phone-number font matches Cash for Cars page CTA.
   Desktop stays at existing 19px. Button height, position, colours and motion stay unchanged.
   Reduced icon panel footprint and text padding prevent clipping on narrower phones. */
@media screen and (max-width:700px) {
  html body > header#home#home .ws-approved-call-row > a.ws-approved-call .ws-approved-icon-area {
    flex-basis:38px!important;
    margin-right:-9px!important;
  }
  html body > header#home#home .ws-approved-call-row > a.ws-approved-call .ws-approved-number {
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:clamp(12px,4.1vw,17px)!important;
    font-weight:800!important;
    letter-spacing:-.6px!important;
    line-height:1!important;
    padding:0 2px 0 7px!important;
    white-space:nowrap!important;
    text-align:center!important;
    min-width:0!important;
    flex:1 1 0!important;
  }
}
@media screen and (max-width:350px) {
  html body > header#home#home .ws-approved-call-row > a.ws-approved-call .ws-approved-icon-area {
    flex-basis:32px!important;
    margin-right:-8px!important;
  }
  html body > header#home#home .ws-approved-call-row > a.ws-approved-call .ws-approved-number {
    padding-left:5px!important;
  }
}
