/* ══════════════════════════════════════════════════════════════
   BUTTONS PRO  —  PC ACADEMY  (buttons-pro.css)
   Cubre: CTA de cursos, nav, checkout, follow, search, topbar
   ══════════════════════════════════════════════════════════════ */

/* ── Token base ──────────────────────────────────────────────── */
:root {
  --btn-radius:  11px;
  --btn-radius-sm: 8px;
  --btn-purple:  #4338ca;
  --btn-purple2: #6366f1;
  --btn-green:   #059669;
  --btn-green2:  #10b981;
  --btn-red:     #dc2626;
  --btn-red2:    #f87171;
  --btn-gold:    #d97706;
  --btn-gold2:   #f59e0b;
  --btn-shadow-purple: 0 6px 22px rgba(67,56,202,.38);
  --btn-shadow-green:  0 6px 22px rgba(5,150,105,.35);
  --btn-shadow-red:    0 6px 18px rgba(220,38,38,.30);
  --btn-transition: all .22s cubic-bezier(.34,1.2,.64,1);
}

/* ══ 1. CURSO — botones del panel derecho ════════════════════ */
.course-right-section .button { display: grid; gap: 10px; padding: 0 24px 20px !important; }
.course-right-section .button a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 !important;
  padding: 13px 20px !important;
  border-radius: var(--btn-radius) !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: var(--btn-transition) !important;
  border: 2px solid transparent !important;
  letter-spacing: .01em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/* Shimmer on CTA */
.course-right-section .button a::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform .5s;
}
.course-right-section .button a:hover::after { transform: translateX(100%); }

/* Buy Now — principal CTA (primer enlace o a con crédito) */
.course-right-section .button a:has(.fa-credit-card),
.course-right-section .button a[href*="handle_buy_now"] {
  background: linear-gradient(120deg, var(--btn-purple) 0%, var(--btn-purple2) 100%) !important;
  color: #fff !important;
  box-shadow: var(--btn-shadow-purple) !important;
  border-color: transparent !important;
}
.course-right-section .button a:has(.fa-credit-card):hover,
.course-right-section .button a[href*="handle_buy_now"]:hover {
  background: linear-gradient(120deg, #3730a3 0%, var(--btn-purple) 100%) !important;
  box-shadow: 0 10px 32px rgba(67,56,202,.50) !important;
  transform: translateY(-2px) !important;
  color: #fff !important;
}

/* Add to Cart — secundario */
.course-right-section .button a:has(.fa-plus),
.course-right-section .button a[id*="add_to_cart"] {
  background: #fff !important;
  color: var(--btn-purple) !important;
  border-color: var(--btn-purple) !important;
  box-shadow: 0 2px 10px rgba(67,56,202,.12) !important;
}
.course-right-section .button a:has(.fa-plus):hover,
.course-right-section .button a[id*="add_to_cart"]:hover {
  background: var(--btn-purple) !important;
  color: #fff !important;
  box-shadow: var(--btn-shadow-purple) !important;
  transform: translateY(-2px) !important;
}

/* Remove from Cart */
.course-right-section .button a:has(.fa-minus),
.course-right-section .button a[id*="added_to_cart"] {
  background: #fef2f2 !important;
  color: var(--btn-red) !important;
  border-color: #fca5a5 !important;
}
.course-right-section .button a:has(.fa-minus):hover,
.course-right-section .button a[id*="added_to_cart"]:hover {
  background: var(--btn-red) !important;
  color: #fff !important;
  border-color: var(--btn-red) !important;
  transform: translateY(-1px) !important;
}

/* Start Now / Enroll Now */
.course-right-section .button a:has(.fa-play-circle),
.course-right-section .button a[href*="lesson"],
.course-right-section .button a[href*="get_enrolled"] {
  background: linear-gradient(120deg, var(--btn-green) 0%, var(--btn-green2) 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: var(--btn-shadow-green) !important;
}
.course-right-section .button a:has(.fa-play-circle):hover,
.course-right-section .button a[href*="lesson"]:hover,
.course-right-section .button a[href*="get_enrolled"]:hover {
  background: linear-gradient(120deg, #047857 0%, var(--btn-green) 100%) !important;
  box-shadow: 0 10px 30px rgba(5,150,105,.45) !important;
  transform: translateY(-2px) !important;
  color: #fff !important;
}

/* Gift */
.course-right-section .button a:has(.fa-gift) {
  background: linear-gradient(120deg, var(--btn-gold) 0%, var(--btn-gold2) 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 20px rgba(217,119,6,.35) !important;
}
.course-right-section .button a:has(.fa-gift):hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(217,119,6,.5) !important;
  color: #fff !important;
}

/* Share and Earn */
.btn-custom_coursepage {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 11px 20px !important;
  border-radius: var(--btn-radius) !important;
  background: linear-gradient(120deg, #7c3aed, #a855f7) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: var(--btn-transition) !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(124,58,237,.35) !important;
  width: calc(100% - 48px);
  justify-content: center;
  margin: 0 24px;
}
.btn-custom_coursepage:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(124,58,237,.5) !important;
  color: #fff !important;
}

/* ══ 2. btn-primary global ══════════════════════════════════ */
.btn-primary,
a.btn-primary {
  background: linear-gradient(120deg, var(--btn-purple) 0%, var(--btn-purple2) 100%) !important;
  border: none !important;
  border-radius: var(--btn-radius) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 10px 24px !important;
  box-shadow: 0 4px 16px rgba(67,56,202,.30) !important;
  transition: var(--btn-transition) !important;
  letter-spacing: .01em;
}
.btn-primary:hover,
a.btn-primary:hover {
  background: linear-gradient(120deg, #3730a3 0%, var(--btn-purple) 100%) !important;
  box-shadow: var(--btn-shadow-purple) !important;
  transform: translateY(-2px) !important;
  color: #fff !important;
}
.btn-primary:active { transform: translateY(0) !important; }

/* ══ 3. btn-fill — outline CTA ══════════════════════════════ */
.btn-fill {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  border: 2px solid var(--btn-purple) !important;
  border-radius: var(--btn-radius) !important;
  color: var(--btn-purple) !important;
  background: transparent !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 10px 26px !important;
  transition: var(--btn-transition) !important;
}
.btn-fill:hover {
  background: var(--btn-purple) !important;
  color: #fff !important;
  box-shadow: var(--btn-shadow-purple) !important;
  transform: translateY(-2px) !important;
}

/* ══ 4. Follow instructor ════════════════════════════════════ */
.follow-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  padding: 9px 22px !important;
  border-radius: var(--btn-radius) !important;
  background: linear-gradient(120deg, var(--btn-purple) 0%, var(--btn-purple2) 100%) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(67,56,202,.28) !important;
  transition: var(--btn-transition) !important;
  cursor: pointer;
}
.follow-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--btn-shadow-purple) !important;
  color: #fff !important;
}
.instructor-right .follow-btn { font-size: 13px !important; padding: 8px 18px !important; }

/* ══ 5. Social share buttons ════════════════════════════════ */
.social-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  border: 1.5px solid #e5e7eb !important;
  background: #fff !important;
  color: #374151 !important;
  font-size: 15px !important;
  transition: var(--btn-transition) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
}
.social-btn:hover {
  background: var(--btn-purple) !important;
  border-color: var(--btn-purple) !important;
  color: #fff !important;
  transform: translateY(-3px) rotate(-3deg) !important;
  box-shadow: var(--btn-shadow-purple) !important;
}

/* ══ 6. Search button ════════════════════════════════════════ */
.search-btn,
.search-input-button {
  background: linear-gradient(120deg, var(--btn-purple) 0%, var(--btn-purple2) 100%) !important;
  border: none !important;
  border-radius: 0 10px 10px 0 !important;
  color: #fff !important;
  padding: 0 20px !important;
  font-size: 15px !important;
  transition: var(--btn-transition) !important;
  cursor: pointer;
}
.search-btn:hover,
.search-input-button:hover {
  background: linear-gradient(120deg, #3730a3 0%, var(--btn-purple) 100%) !important;
}

/* ══ 7. Cart popup — Checkout / Go to Wishlist ══════════════ */
.menu_pro_btn .btn.btn-primary {
  width: 100% !important;
  border-radius: var(--btn-radius) !important;
  padding: 11px 20px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* ══ 8. Topbar announcement "Ver Oferta" ════════════════════ */
.top-bar a[href],
.top-bar .btn,
.announcement-bar a.btn,
a.btn.btn-sm.rounded-pill,
[class*="topbar"] a.btn,
.top-bar-cta {
  border-radius: 20px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 6px 18px !important;
  transition: var(--btn-transition) !important;
}

/* ══ 9. Pagination buttons ══════════════════════════════════ */
.page-link {
  border-radius: var(--btn-radius-sm) !important;
  font-weight: 600 !important;
  transition: var(--btn-transition) !important;
}

/* ══ 10. Form submit buttons ════════════════════════════════ */
input[type="submit"].btn,
button[type="submit"].btn:not(.search-btn):not(.list-btn) {
  border-radius: var(--btn-radius) !important;
  font-weight: 700 !important;
  transition: var(--btn-transition) !important;
}
input[type="submit"].btn-primary,
button[type="submit"].btn-primary {
  background: linear-gradient(120deg, var(--btn-purple) 0%, var(--btn-purple2) 100%) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(67,56,202,.28) !important;
}
input[type="submit"].btn-primary:hover,
button[type="submit"].btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--btn-shadow-purple) !important;
}

/* ══ 11. Profile menu buttons ═══════════════════════════════ */
.btn-profile-menu {
  border-radius: var(--btn-radius-sm) !important;
  font-weight: 600 !important;
  transition: var(--btn-transition) !important;
  font-size: 13px !important;
}
.btn-profile-menu:hover,
.btn-profile-menu.active {
  background: var(--btn-purple) !important;
  color: #fff !important;
  border-color: var(--btn-purple) !important;
  transform: translateY(-1px) !important;
}

/* ══ 12. Blog / General outlined buttons ════════════════════ */
.blog-search-button {
  border-radius: 0 var(--btn-radius) var(--btn-radius) 0 !important;
  background: var(--btn-purple) !important;
  border-color: var(--btn-purple) !important;
  color: #fff !important;
  font-weight: 700 !important;
  transition: var(--btn-transition) !important;
}
.blog-search-button:hover {
  background: #3730a3 !important;
  transform: scale(1.03) !important;
}

/* ══ 13. eins / misc utility buttons ═══════════════════════ */
.einsBtn .btn {
  border-radius: var(--btn-radius) !important;
  font-weight: 700 !important;
  transition: var(--btn-transition) !important;
  padding: 10px 22px !important;
}

/* ══ 14. Active / pressed state global ═════════════════════ */
.btn:active,
.follow-btn:active,
.btn-fill:active { transform: scale(.97) !important; transition: transform .1s !important; }

/* ══ RESPONSIVE ═════════════════════════════════════════════ */
@media (max-width: 575px) {
  .course-right-section .button a { font-size: 13.5px !important; padding: 11px 16px !important; }
  .btn-fill, .follow-btn { font-size: 13px !important; padding: 9px 18px !important; }
}