/* Patch v3: enforce solid fill using RTCL variables with high specificity + !important */
#ekcl-floating-compare a,
#ekcl-floating-compare a:link,
#ekcl-floating-compare a:visited{
  display:inline-flex !important;
  align-items:center !important;
  gap:.5rem !important;
  background: var(--rtcl-button-bg-color, var(--rtcl-primary-color, #00c194)) !important;
  color: var(--rtcl-button-color, #ffffff) !important;
  border: 1px solid var(--rtcl-button-bg-color, var(--rtcl-primary-color, #00c194)) !important;
  border-radius: var(--rtcl-button-radius, 12px) !important;
  padding: var(--rtcl-button-padding-block, 8px) var(--rtcl-button-padding-inline, 14px) !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.12) !important;
  transition: background-color .18s ease, border-color .18s ease, transform .06s ease !important;
  font-family: var(--rt-body-font, Lato, sans-serif) !important;
  font-size: 16px !important;
}

#ekcl-floating-compare a:hover{
  background: var(--rtcl-button-hover-bg-color, var(--rtcl-secondary-color, #07c196)) !important;
  color: var(--rtcl-button-hover-color, #ffffff) !important;
  border-color: var(--rtcl-button-hover-bg-color, var(--rtcl-secondary-color, #07c196)) !important;
}
#ekcl-floating-compare a:active{
  background: var(--rtcl-primary-700, var(--rtcl-button-hover-bg-color, #07c196)) !important;
  border-color: var(--rtcl-primary-700, var(--rtcl-button-hover-bg-color, #07c196)) !important;
  transform: translateY(1px) scale(.99) !important;
}

/* Only a safety class if needed by scripts */
#ekcl-floating-compare.is-armed a{
  background: var(--rtcl-button-bg-color, var(--rtcl-primary-color, #00c194)) !important;
  color: var(--rtcl-button-color, #ffffff) !important;
  border-color: var(--rtcl-button-bg-color, var(--rtcl-primary-color, #00c194)) !important;
}



/* === Mobile bubble: solid fill + bigger icon === */
@media (max-width: 767.98px){
  #ekcl-floating-compare{
    position: fixed !important;
    right: 14px !important;
    bottom: 84px !important;
    z-index: 2147483645 !important;
  }
  #ekcl-floating-compare a.ekcl-floating-link{
    width: 64px !important;
    height: 64px !important;
    padding: 0 !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    background: var(--rtcl-button-bg-color, var(--rtcl-primary-color, #00c194)) !important;
    color: var(--rtcl-button-color, #ffffff) !important;
    border: 1px solid var(--rtcl-button-bg-color, var(--rtcl-primary-color, #00c194)) !important;
    text-indent: 101% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
  #ekcl-floating-compare a.ekcl-floating-link::before{
    content: "⇄";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    text-indent: 0;
    color: currentColor;
  }
}



/* === Force solid fill globally for Compare Now button === */
#ekcl-floating-compare a,
#ekcl-floating-compare a:link,
#ekcl-floating-compare a:visited{
  background: var(--rtcl-button-bg-color, var(--rtcl-primary-color, #00c194)) !important;
  color: var(--rtcl-button-color, #ffffff) !important;
  border: 1px solid var(--rtcl-button-bg-color, var(--rtcl-primary-color, #00c194)) !important;
}
#ekcl-floating-compare a:hover{
  background: var(--rtcl-button-hover-bg-color, var(--rtcl-secondary-color, #07c196)) !important;
  border-color: var(--rtcl-button-hover-bg-color, var(--rtcl-secondary-color, #07c196)) !important;
}
#ekcl-floating-compare a:active{
  background: var(--rtcl-primary-700, var(--rtcl-button-hover-bg-color, #07c196)) !important;
  border-color: var(--rtcl-primary-700, var(--rtcl-button-hover-bg-color, #07c196)) !important;
}


:root{ --ek-safe-bottom: env(safe-area-inset-bottom, 0px); }
@media (max-width: 767.98px){ #ekcl-floating-compare{ padding-bottom: env(safe-area-inset-bottom, 0px) !important; } }



/* === Mobile: show 'Compare' label instead of icon-only === */
@media (max-width: 767.98px){
  #ekcl-floating-compare{
    position: fixed !important;
    right: 14px !important;
    bottom: 84px !important;
    z-index: 2147483645 !important;
  }
  #ekcl-floating-compare a.ekcl-floating-link{
    width: auto !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 10px 16px !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* solid fill comes from global block; keep it */
    text-indent: 0 !important;       /* show label */
    white-space: nowrap !important;
    overflow: visible !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: .1px !important;
  }
  /* Remove icon glyph on mobile label version */
  #ekcl-floating-compare a.ekcl-floating-link::before{
    content: none !important;
  }
}