/* <span style="color:#16A34A;">Weal</span><span style="color:#DC2626;">Sure</span> V41 — Unified CTA/Button System
   Goal: every actionable CTA uses one consistent premium red button language.
*/
:root{
  --ws-button-red:#d60000;
  --ws-button-red-hover:#b90000;
  --ws-button-red-soft:rgba(214,0,0,.22);
}

/* One visual language for every primary/secondary CTA button. */
:is(.btn,.hero-form-submit){
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  min-height:46px !important;
  padding:13px 20px !important;
  border:1px solid var(--ws-button-red) !important;
  border-radius:12px !important;
  background:var(--ws-button-red) !important;
  color:#fff !important;
  font-family:"Manrope",sans-serif !important;
  font-size:13px !important;
  font-weight:800 !important;
  line-height:1.05 !important;
  letter-spacing:-.01em !important;
  text-decoration:none !important;
  box-shadow:0 10px 24px var(--ws-button-red-soft) !important;
  opacity:1 !important;
  isolation:isolate !important;
  overflow:hidden !important;
  transition:transform .22s ease,background-color .22s ease,border-color .22s ease,box-shadow .22s ease !important;
}

/* Remove legacy variant colors: dark, light, outline and gold all become the same red CTA. */
:is(.btn,.hero-form-submit):is(.btn-dark,.btn-light,.btn-outline,.btn-gold){
  background:var(--ws-button-red) !important;
  color:#fff !important;
  border-color:var(--ws-button-red) !important;
  box-shadow:0 10px 24px var(--ws-button-red-soft) !important;
}

/* Keep the label above the hover sheen so text can never disappear. */
:is(.btn,.hero-form-submit)::before,
:is(.btn,.hero-form-submit)::after{
  z-index:-1 !important;
}
:is(.btn,.hero-form-submit) > *{position:relative !important;z-index:2 !important;}

:is(.btn,.hero-form-submit):hover,
:is(.btn,.hero-form-submit):focus-visible{
  background:var(--ws-button-red-hover) !important;
  border-color:var(--ws-button-red-hover) !important;
  color:#fff !important;
  transform:translateY(-2px) !important;
  box-shadow:0 14px 30px rgba(214,0,0,.28) !important;
}
:is(.btn,.hero-form-submit):active{
  background:#a80000 !important;
  border-color:#a80000 !important;
  color:#fff !important;
  transform:translateY(0) !important;
  box-shadow:0 7px 16px rgba(214,0,0,.20) !important;
}

/* Header CTA follows the same button treatment, with only compact dimensions. */
.wealsure-header .nav > .btn,
header .nav > .btn{
  min-height:42px !important;
  padding:11px 17px !important;
  border-radius:12px !important;
  background:var(--ws-button-red) !important;
  color:#fff !important;
  border-color:var(--ws-button-red) !important;
  box-shadow:0 8px 20px rgba(214,0,0,.20) !important;
}

/* Service-hero buttons: no special white/outline variant remains. */
.service-hero :is(.btn,.hero-form-submit),
.hero-actions :is(.btn,.hero-form-submit){
  background:var(--ws-button-red) !important;
  color:#fff !important;
  border-color:var(--ws-button-red) !important;
}

/* Mobile: retain the same proportions without forcing oversized full-width CTAs. */
@media (max-width:640px){
  :is(.btn,.hero-form-submit){
    min-height:46px !important;
    padding:12px 17px !important;
    border-radius:12px !important;
  }
}
