/* Sitewide button styling. Loads after theme.css, so plain class selectors win. */
.btn{
  border-radius:999px;
  padding:10px 24px;
  font-weight:600;
  line-height:1.35;
  letter-spacing:0.01em;
  transition:transform 0.25s ease,box-shadow 0.25s ease,background 0.25s ease,color 0.25s ease,border-color 0.25s ease;
}
.btn-sm{padding:8px 18px;font-size:0.875rem}
.btn-lg{padding:13px 30px;font-size:1rem}

.btn-primary,
.btn-primary:visited{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#f70e88 0%,#ff5fae 100%);
  border-color:transparent;
  color:#fff;
  box-shadow:0 4px 14px rgba(247,14,136,0.30);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active{
  background:linear-gradient(135deg,#e30b7c 0%,#ff4fa4 100%);
  border-color:transparent;
  color:#fff;
  box-shadow:0 9px 24px rgba(247,14,136,0.42);
}
.btn-primary:hover,
.btn-primary:focus{transform:translateY(-2px)}
.btn-primary:not(:disabled):not(.disabled):active{transform:translateY(0)}

.btn-primary::after{
  content:'';
  position:absolute;
  top:0;
  left:-130%;
  width:60%;
  height:100%;
  transform:skewX(-20deg);
  background:linear-gradient(120deg,transparent,rgba(255,255,255,0.35),transparent);
  pointer-events:none;
}
.btn-primary:hover::after{animation:btnShine 0.85s ease}
@keyframes btnShine{to{left:150%}}

.btn-outline-primary,
.btn-outline-primary:visited{
  background:transparent;
  border-color:#f70e88;
  color:#f70e88;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active{
  background:linear-gradient(135deg,#f70e88 0%,#ff5fae 100%);
  border-color:transparent;
  color:#fff;
  box-shadow:0 9px 24px rgba(247,14,136,0.35);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus{transform:translateY(-2px)}

/* Header call-to-action buttons, ranked by intent:
   cta-primary (open an account) > cta-secondary (add funds) > cta-ghost (log in). */
.navbar-nav .btn.cta-primary,
.navbar-nav .btn.cta-secondary,
.navbar-nav .btn.cta-ghost{
  border-radius:999px;
  padding:9px 22px;
  font-size:0.875rem;
  border:1px solid transparent;
}

/* Between lg and xl the nav genuinely runs out of room, so keep the CTAs
   compact and let them wrap rather than pushing the logo off screen. */
@media (min-width:992px) and (max-width:1199.98px){
  .navbar-nav .btn.cta-primary,
  .navbar-nav .btn.cta-secondary,
  .navbar-nav .btn.cta-ghost{
    padding:7px 13px;
    font-size:0.8125rem;
  }
}
@media (min-width:1200px){
  .navbar-nav .btn.cta-primary,
  .navbar-nav .btn.cta-secondary,
  .navbar-nav .btn.cta-ghost{white-space:nowrap}
}
@media (min-width:1200px) and (max-width:1399.98px){
  .navbar-nav .btn.cta-primary,
  .navbar-nav .btn.cta-secondary,
  .navbar-nav .btn.cta-ghost{
    padding:8px 16px;
    font-size:0.8125rem;
  }
}

.navbar-nav .btn.cta-primary{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#f70e88 0%,#ff5fae 100%);
  color:#fff;
  box-shadow:0 4px 14px rgba(247,14,136,0.35);
}
.navbar-nav .btn.cta-primary:hover,
.navbar-nav .btn.cta-primary:focus{
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 9px 24px rgba(247,14,136,0.45);
}

.navbar-nav .btn.cta-secondary{
  background:rgba(247,14,136,0.09);
  color:#f70e88;
  box-shadow:none;
}
.navbar-nav .btn.cta-secondary:hover,
.navbar-nav .btn.cta-secondary:focus{
  background:rgba(247,14,136,0.16);
  color:#d10a72;
  transform:translateY(-1px);
  box-shadow:none;
}

.navbar-nav .btn.cta-ghost{
  background:transparent;
  color:#6a747b;
  border-color:#e0e5ea;
  box-shadow:none;
}
.navbar-nav .btn.cta-ghost:hover,
.navbar-nav .btn.cta-ghost:focus{
  background:rgba(247,14,136,0.05);
  color:#f70e88;
  border-color:#f70e88;
  box-shadow:none;
}

/* Product card CTAs carry long labels; keep them on one line where space is tight. */
@media (min-width:992px) and (max-width:1199.98px){
  .investment-card .btn{padding:9px 14px;font-size:0.8125rem}
}

@media (prefers-reduced-motion:reduce){
  .btn{transition:none}
  .btn:hover{transform:none}
  .btn-primary:hover::after{animation:none}
}