/* ==========================================================================
   components.css — общие компоненты (кнопки)
   Подключается после style.css на всех страницах.
   ========================================================================== */

/* ===== BTN COMPONENT ===== */
/*
  .btn         — base (light) #f2f2f2 bg
  .btn--dark   — dark fill #464646
  .btn--icon   — with arrow icon
*/

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  border-radius: 100px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 20px;
  white-space: nowrap;
  transition: opacity 0.2s, var(--transition-theme);
  box-shadow: 0 1px 2px rgba(180,180,180,0.15);
  background: var(--btn-light, #f2f2f2);
  color: var(--text-primary, #1e1e1e);
}

.btn--dark {
  background: var(--btn-accent, #464646);
  color: var(--btn-text, #fafafa);
}

.btn--dark:hover { opacity: 0.9; }

.btn--icon { gap: 8px; }

.btn__icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}