/* ============== TutorsPoint – Global Buttons ============== */

/* Brand tokens */
:root{
  --tp-green-1:#1C9B75;
  --tp-green-2:#9FE4C4;
  --tp-green-3:#116850;
  --tp-text-on:#ffffff;
  --tp-radius:14px;
  --tp-ease: cubic-bezier(.22,.61,.36,1);
}

/* Base button */
.tp-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  padding:12px 38px;
  font:700 16px/1.2 "Poppins",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  border:none; border-radius:var(--tp-radius);
  text-decoration:none; cursor:pointer;
  transition: transform .3s var(--tp-ease), box-shadow .3s var(--tp-ease), background .3s var(--tp-ease), color .3s var(--tp-ease);
  position:relative; z-index:1; will-change:transform;
}

/* Primary (matches your hero + .btn-grad style) */
.tp-btn--primary{
  color:var(--tp-text-on);
  background:linear-gradient(to bottom, var(--tp-green-1) 0%, var(--tp-green-3) 100%);
  box-shadow:0 4px 10px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.12);
}
.tp-btn--primary:hover{
  transform:translateY(-5px);
  color:var(--tp-green-1);
  background:linear-gradient(to bottom, #2DD397 0%, #155C4A 100%);
  box-shadow:0 14px 30px rgba(28,155,117,.28), 0 0 0 1px rgba(28,155,117,.15), inset 0 2px 4px rgba(255,255,255,.25);
}
.tp-btn--primary:active{
  transform:translateY(0);
  background:linear-gradient(to bottom, #188F69 0%, #0D4839 100%);
  color:#d9fff1;
  box-shadow:0 4px 10px rgba(28,155,117,.3), inset 0 2px 6px rgba(0,0,0,.25);
}
.tp-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(156,239,211,.8), 0 6px 12px rgba(0,0,0,.15);
}

/* Secondary variant (optional) */
.tp-btn--secondary{
  color:var(--tp-green-1);
  background:#ffffff;
  border:1px solid rgba(28,155,117,.35);
  box-shadow:0 3px 8px rgba(0,0,0,.06);
}
.tp-btn--secondary:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 16px rgba(0,0,0,.10);
}

/* Size modifiers */
.tp-btn--sm{ padding:8px 20px; font-size:14px; border-radius:12px; }
.tp-btn--lg{ padding:14px 44px; font-size:18px; border-radius:16px; }

/* Loading (optional) */
.tp-btn.is-loading{ pointer-events:none; opacity:.85 }
.tp-btn.is-loading::after{
  content:""; width:1em; height:1em; border:2px solid rgba(255,255,255,.6); border-top-color:#fff;
  border-radius:999px; animation:tp-spin .75s linear infinite;
}
@keyframes tp-spin{ to{ transform:rotate(360deg) } }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .tp-btn{ transition:none }
  .tp-btn:hover{ transform:none }
}
