/*
  REVALYTICS — BUTTON SYSTEM
  All button variants. Always combine .r-btn with a variant class.
*/

/* ─── Base ───────────────────────────────────────────── */
.r-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  padding: 15px 25px;
  border-radius: 100px;
  transition: all var(--dur) ease;
  text-decoration: none;
}

/* ─── Variants ───────────────────────────────────────── */
.r-btn-primary {
  background: var(--blue);
  color: #fff;
}

.r-btn-primary:hover {
  background: #0048c8;
}

.r-btn-dark {
  background: var(--navy-2);
  color: #fff;
}

.r-btn-dark:hover {
  background: #0a1a42;
}

.r-btn-grad {
  background: var(--cta-grad);
  color: #fff;
  padding-right: 6px;
}

.r-btn-grad:hover {
  filter: brightness(1.1);
}

.r-btn-white {
  background: #fff;
  color: var(--navy);
}

.r-btn-white:hover {
  background: var(--blue-25);
}

.r-btn-ghost {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid #fff;
  color: #fff;
}

.r-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Circle icon inside .r-btn */
.r-btn .circle {
  width: 45px;
  height: 45px;
  border-radius: 100px;
  background: var(--blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

/* ─── Pill CTAs (hero / section level) ───────────────── */
.btn-primary-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 6px 12px 20px;
  background: var(--rev-cta-gradient);
  color: #fff;
  border: none;
  border-radius: var(--rev-radius-pill);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.btn-primary-pill:hover {
  filter: brightness(1.1);
}

.btn-primary-pill .circle-arrow {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--rev-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-primary-pill .circle-arrow svg {
  width: 18px;
  height: 18px;
}

.btn-white-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: #fff;
  color: var(--rev-navy-900);
  border: none;
  border-radius: var(--rev-radius-pill);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.btn-white-pill:hover {
  background: var(--rev-blue-25);
}

/* ─── Mobile overrides ───────────────────────────────── */
@media (max-width: 640px) {
  .btn-primary-pill {
    font-size: 13px !important;
    padding: 10px 5px 10px 16px !important;
    gap: 6px !important;
    white-space: normal !important;
  }

  .btn-primary-pill .circle-arrow {
    width: 24px !important;
    height: 24px !important;
  }

  .btn-white-pill {
    font-size: 14px !important;
    padding: 11px 20px !important;
    white-space: normal !important;
  }
}