/* =========================================================
   BUFFALO TREE PRO — COMPONENTS
   Buttons, cards, badges, forms, tags, dividers.
   Shared, reusable across every template. Section-specific
   styling lives in assets/css/layout/*.css
   ========================================================= */

/* ---------- Eyebrow / label ---------- */
.btp-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: var(--space-3);
}
.btp-eyebrow::before{
  content: '';
  width: 22px;
  height: 2px;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
}

/* ---------- Buttons ---------- */
.btp-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  padding: 1rem 1.75rem;
  border-radius: var(--radius-md);
  min-height: 48px;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.btp-btn svg{ width: 18px; height: 18px; flex-shrink: 0; transition: transform var(--dur-base) var(--ease-out); }
.btp-btn:hover{ transform: translateY(-3px); }
.btp-btn:active{ transform: translateY(-1px); }

.btp-btn-accent{
  background: var(--color-accent);
  color: #fff;
  box-shadow: var(--shadow-accent);
}
.btp-btn-accent:hover{ background: var(--color-accent-hover); box-shadow: 0 20px 40px rgba(216,27,96,0.36); }
.btp-btn-accent:hover .btp-btn-arrow{ transform: translateX(4px); }

.btp-btn-outline{
  background: transparent;
  color: var(--color-heading);
  border: 1.5px solid var(--color-border);
}
.btp-btn-outline:hover{ background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btp-btn-outline:hover .btp-btn-arrow{ transform: translateX(4px); }

.btp-btn-outline-light{
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.35);
}
.btp-btn-outline-light:hover{ background: #fff; color: var(--color-primary); border-color: #fff; }

.btp-btn-sm{ padding: 0.75rem 1.25rem; font-size: var(--fs-caption); min-height: 40px; }
.btp-btn-block{ width: 100%; }
.btp-btn-cta-text{ display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.btp-btn-cta-text small{ font-size: 11px; font-weight: var(--fw-regular); opacity: 0.85; }

/* ---------- Badge (hero eyebrow pill with icon) ---------- */
.btp-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.5rem 1rem 0.5rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  font-family: var(--font-heading);
  background: var(--color-accent-light);
  color: var(--color-accent-text);
  margin-bottom: var(--space-4);
}
.btp-badge-icon{ width: 16px; height: 16px; }

.btp-badge--verified{ background: rgba(2,122,72,0.1); color: var(--color-success); }

/* ---------- Icon (default sizing for btp_icon() output) ---------- */
.btp-icon{ width: 20px; height: 20px; }

/* ---------- Icon button (circular) ---------- */
.btp-icon-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  color: var(--color-primary);
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.btp-icon-btn:hover{ background: var(--color-accent); color: #fff; transform: scale(1.08); }
.btp-icon-btn svg{ width: 20px; height: 20px; }

/* ---------- Card ---------- */
.btp-card{
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.btp-card--floating{ box-shadow: var(--shadow-lg); border: none; }
.btp-card--hover:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* ---------- Section head ---------- */
.btp-section-head{ max-width: 640px; margin-bottom: var(--space-6); }
.btp-section-head--center{ margin-inline: auto; text-align: center; }

/* ---------- Dot pagination (generic; reviews slider uses its own) ---------- */
.btp-dots{ display: flex; gap: 8px; align-items: center; }
.btp-dots button{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-border);
  padding: 0;
  transition: width var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.btp-dots button[aria-current="true"]{ width: 26px; border-radius: var(--radius-pill); background: var(--color-accent); }

/* ---------- Organic divider ---------- */
.btp-organic-divider{ display: block; width: 100%; line-height: 0; }

/* ---------- Ripple (button micro-interaction, added via JS) ---------- */
.btp-ripple{
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transform: scale(0);
  animation: btp-ripple-anim 620ms var(--ease-out) forwards;
  pointer-events: none;
}
@keyframes btp-ripple-anim{ to{ transform: scale(3.2); opacity: 0; } }

/* =========================================================
   LINK ARROW — used on blog post cards, etc.
   ========================================================= */
.btp-link-arrow{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-weight: var(--fw-medium);
  color: inherit;
}
.btp-link-arrow svg{ width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); }
.btp-link-arrow:hover svg{ transform: translateX(4px); }