/* Westside - approved desktop header and bottom-footer layout, 07 Nov 2026.
   Desktop only. No changes to the mobile version or existing phone animations. */
@media screen and (min-width:1200px) {
  /* Header: icons LEFT, original centered logo, both phones RIGHT. */
  html body > header#home#home .header-top > .ws-desktop-header-social {
    display:flex!important;
    position:absolute!important;
    left:clamp(20px,3vw,58px)!important;
    top:88px!important;
    transform:translateY(-50%)!important;
    width:clamp(270px,29vw,475px)!important;
    z-index:30!important;
    flex-direction:column!important;
    align-items:center!important;
    box-sizing:border-box!important;
  }
  html body > header#home#home .header-top > .ws-approved-call-row.ws-approved-call-row {
    position:absolute!important;
    top:88px!important;
    left:auto!important;
    right:clamp(18px,1.5vw,42px)!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    flex-direction:row!important;
    justify-content:flex-end!important;
    align-items:center!important;
    gap:clamp(10px,1.6vw,25px)!important;
  }
  html body > header#home#home .header-top > .ws-approved-call-row > a.ws-approved-call {
    flex:0 0 auto!important;
    grid-column:auto!important;
  }
  /* Bottom footer: the same three-part layout, no vertical dividers. */
  html body .ws-footer-bottom-contact-strip.ws-footer-bottom-contact-strip {
    height:176px!important;
    min-height:176px!important;
    overflow:hidden!important;
  }
  html body .ws-footer-bottom-contact-strip.ws-footer-bottom-contact-strip > .ws-approved-call-row.ws-approved-call-row {
    position:absolute!important;
    top:50%!important;
    left:auto!important;
    right:clamp(18px,1.5vw,42px)!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    flex-direction:row!important;
    justify-content:flex-end!important;
    align-items:center!important;
    gap:clamp(10px,1.6vw,25px)!important;
  }
  html body .ws-footer-bottom-contact-strip .ws-approved-call-row > a.ws-approved-call {
    flex:0 0 auto!important;
    grid-column:auto!important;
  }
  html body .ws-footer-bottom-contact-strip.ws-footer-bottom-contact-strip > .ws-footer-social.ws-footer-social {
    position:absolute!important;
    left:clamp(20px,3vw,58px)!important;
    right:auto!important;
    top:50%!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
    width:clamp(270px,29vw,475px)!important;
    padding:0!important;
    margin:0!important;
    align-items:center!important;
  }
}
@media screen and (min-width:701px) and (max-width:1199px) {
  /* Keep all content visible at laptop/tablet widths: stack phone buttons on right. */
  html body > header#home#home .header-top > .ws-desktop-header-social {
    display:flex!important;
    position:absolute!important;
    left:10px!important;
    top:88px!important;
    transform:translateY(-50%)!important;
    width:clamp(170px,24vw,270px)!important;
    z-index:30!important;
    flex-direction:column!important;
    align-items:center!important;
  }
  html body > header#home#home .header-top > .ws-approved-call-row.ws-approved-call-row {
    position:absolute!important;
    top:88px!important;
    left:auto!important;
    right:10px!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
    width:205px!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;
    gap:8px!important;
  }
  html body > header#home#home .header-top > .ws-approved-call-row > a.ws-approved-call {
    width:205px!important;max-width:205px!important;height:49px!important;
    grid-column:auto!important;flex:0 0 auto!important;
  }
  html body .ws-footer-bottom-contact-strip.ws-footer-bottom-contact-strip {
    height:176px!important;min-height:176px!important;overflow:hidden!important;
  }
  html body .ws-footer-bottom-contact-strip.ws-footer-bottom-contact-strip > .ws-approved-call-row.ws-approved-call-row {
    position:absolute!important;
    top:50%!important;left:auto!important;right:10px!important;bottom:auto!important;
    transform:translateY(-50%)!important;
    width:205px!important;height:auto!important;margin:0!important;padding:0!important;
    display:flex!important;flex-direction:column!important;justify-content:center!important;
    align-items:center!important;gap:8px!important;
  }
  html body .ws-footer-bottom-contact-strip .ws-approved-call-row > a.ws-approved-call {
    width:205px!important;max-width:205px!important;height:49px!important;
    grid-column:auto!important;flex:0 0 auto!important;
  }
  html body .ws-footer-bottom-contact-strip.ws-footer-bottom-contact-strip > .ws-footer-social.ws-footer-social {
    position:absolute!important;left:10px!important;right:auto!important;top:50%!important;bottom:auto!important;
    transform:translateY(-50%)!important;width:clamp(170px,24vw,270px)!important;
    margin:0!important;padding:0!important;align-items:center!important;
  }
}
@media screen and (min-width:701px) {
  /* Heading and social icons, with matching lime horizontal accents. */
  html body > header#home#home .ws-desktop-header-social {
    box-sizing:border-box!important;
    font-family:Arial,Helvetica,sans-serif!important;
    color:#fff!important;
    pointer-events:auto!important;
  }
  html body > header#home#home .ws-desktop-header-social-title {
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    gap:13px!important;
    margin:0 0 10px!important;
    font-size:clamp(17px,1.8vw,25px)!important;
    font-weight:800!important;
    line-height:1.1!important;
    white-space:nowrap!important;
    text-align:center!important;
  }
  html body > header#home#home .ws-desktop-header-social-title::before,
  html body > header#home#home .ws-desktop-header-social-title::after {
    content:""!important;
    display:block!important;
    height:3px!important;
    background:#7EDC00!important;
    flex:1 1 0!important;
  }
  html body > header#home#home .ws-desktop-header-social-links {
    width:100%!important;
    display:flex!important;
    justify-content:space-evenly!important;
    align-items:center!important;
    gap:clamp(4px,.75vw,14px)!important;
    box-sizing:border-box!important;
  }
  html body > header#home#home .ws-desktop-header-social-links > .ws-footer-social-profile {
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 1 auto!important;
    min-width:0!important;
    text-decoration:none!important;
    cursor:default!important;
  }
  html body > header#home#home .ws-desktop-header-social-links > a.ws-footer-social-profile {cursor:pointer!important;}
  html body > header#home#home .ws-desktop-header-social-links img {
    display:block!important;
    width:clamp(29px,3.15vw,49px)!important;
    height:clamp(29px,3.15vw,49px)!important;
    max-width:100%!important;
    border:2px solid #fff!important;
    border-radius:12px!important;
    box-sizing:border-box!important;
    object-fit:contain!important;
  }
  html body > header#home#home .ws-desktop-header-social-links .ws-footer-social-label {display:none!important;}
  html body > header#home#home .ws-desktop-header-social-links > a:hover img,
  html body > header#home#home .ws-desktop-header-social-links > a:focus-visible img {
    outline:2px solid #7EDC00!important;outline-offset:2px!important;
  }
  /* Footer existing Follow Us: same icon-only layout as header. */
  html body .ws-footer-bottom-contact-strip .ws-footer-social-heading {
    font-size:clamp(17px,1.8vw,25px)!important;
    width:100%!important;
    gap:13px!important;
    margin-bottom:10px!important;
  }
  html body .ws-footer-bottom-contact-strip .ws-footer-social-links {
    display:flex!important;
    align-items:center!important;
    justify-content:space-evenly!important;
    width:100%!important;
    gap:clamp(4px,.75vw,14px)!important;
  }
  html body .ws-footer-bottom-contact-strip .ws-footer-social-profile {flex:0 1 auto!important;}
  html body .ws-footer-bottom-contact-strip .ws-footer-social-profile img {
    width:clamp(29px,3.15vw,49px)!important;
    height:clamp(29px,3.15vw,49px)!important;
  }
  html body .ws-footer-bottom-contact-strip .ws-footer-social-label {display:none!important;}
  /* Centre logo added only to black desktop footer bar. Never shown on mobile. */
  html body .ws-footer-bottom-contact-strip.ws-footer-bottom-contact-strip > .ws-desktop-footer-logo {
    display:block!important;
    position:absolute!important;
    top:50%!important;
    left:50%!important;
    transform:translate(-50%,-50%)!important;
    width:clamp(135px,12vw,195px)!important;
    height:145px!important;
    max-width:22vw!important;
    object-fit:contain!important;
    z-index:2!important;
    margin:0!important;padding:0!important;
  }
}
@media screen and (max-width:700px) {
  /* The user approved the existing mobile header and footer; leave them untouched. */
  html body > header#home#home .ws-desktop-header-social {display:none!important;}
  html body .ws-footer-bottom-contact-strip .ws-desktop-footer-logo {display:none!important;}
}


/* WESTSIDE desktop-only quote button (7 November 2026).
   Do not move either logo. Mobile intentionally retains its two call buttons.
   Actual link goes directly to the existing Cash for Cars submission form. */
@media screen and (max-width:700px) {
  html body .ws-footer-bottom-contact-strip.ws-footer-bottom-contact-strip .ws-approved-call-row > a.ws-approved-quote {
    display:none!important;
  }
}
@media screen and (min-width:701px) {
  html body .ws-footer-bottom-contact-strip .ws-approved-call-row > a.ws-approved-quote {
    display:inline-flex!important;
    flex:0 0 auto!important;
    text-decoration:none!important;
  }
  html body .ws-footer-bottom-contact-strip .ws-approved-call-row > a.ws-approved-quote .ws-approved-icon-area {
    flex:0 0 52px!important;
    margin-right:-11px!important;
  }
  html body .ws-footer-bottom-contact-strip .ws-approved-call-row > a.ws-approved-quote .ws-approved-number {
    padding:0 1px 0 11px!important;
    font-size:15px!important;
    font-weight:900!important;
    letter-spacing:-.5px!important;
    line-height:1!important;
    white-space:nowrap!important;
    animation:none!important;
    color:#101010!important;
  }
  html body .ws-footer-bottom-contact-strip .ws-approved-call-row .ws-gold-dollar {
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    width:30px!important;
    height:30px!important;
    margin:0!important;
    border-radius:50%!important;
    box-sizing:border-box!important;
    background:#111!important;
    color:#FFD34F!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:25px!important;
    font-weight:900!important;
    line-height:1!important;
    text-shadow:0 1px 1px #9b6500!important;
    transform:none!important;
    animation:none!important;
  }
  /* Enough horizontal space: three identical width buttons in one row. */
}
@media screen and (min-width:1700px) {
  html body .ws-footer-bottom-contact-strip.ws-footer-bottom-contact-strip > .ws-approved-call-row.ws-approved-call-row {
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    width:auto!important;
    height:auto!important;
    align-items:center!important;
    gap:clamp(10px,1vw,18px)!important;
  }
  html body .ws-footer-bottom-contact-strip .ws-approved-call-row > a.ws-approved-call {
    width:214px!important;
    max-width:214px!important;
    height:54px!important;
  }
}
/* Medium desktops: stack three full-width identical buttons in the existing
   right-hand area rather than let them overlap the fixed centred logo. */
@media screen and (min-width:1200px) and (max-width:1699px) {
  html body .ws-footer-bottom-contact-strip.ws-footer-bottom-contact-strip > .ws-approved-call-row.ws-approved-call-row {
    right:clamp(18px,1.5vw,42px)!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:center!important;
    width:214px!important;
    height:auto!important;
    gap:6px!important;
  }
  html body .ws-footer-bottom-contact-strip .ws-approved-call-row > a.ws-approved-call {
    width:214px!important;
    max-width:214px!important;
    height:50px!important;
  }
}
@media screen and (min-width:701px) and (max-width:1199px) {
  html body .ws-footer-bottom-contact-strip .ws-approved-call-row > a.ws-approved-quote {
    width:205px!important;
    max-width:205px!important;
    height:49px!important;
  }
  html body .ws-footer-bottom-contact-strip .ws-approved-call-row > a.ws-approved-quote .ws-approved-number {
    font-size:14.5px!important;
  }
  html body .ws-footer-bottom-contact-strip .ws-approved-call-row .ws-gold-dollar {
    width:28px!important;
    height:28px!important;
    font-size:23px!important;
  }
}