/**
 * Button Component
 * 汎用ボタンスタイル
 *
 * @package KNOT_For_Dogs
 */

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-sm) var(--sp-lg);
  font-size: var(--fz-sm);
  font-weight: 700;
  letter-spacing: var(--ls-normal);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color var(--duration-fast),
              color var(--duration-fast),
              box-shadow var(--duration-fast);
}

.c-btn--primary {
  background-color: var(--color-cta-primary);
  color: var(--color-bg-white);
}

.c-btn--primary:hover {
  background-color: var(--color-cta-primary-hover);
  box-shadow: var(--shadow-md);
}

.c-btn--outline {
  background-color: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-text);
}

.c-btn--outline:hover {
  background-color: var(--color-text);
  color: var(--color-bg-white);
}

.c-btn--large {
  padding: var(--sp-sm) var(--sp-xl);
  font-size: var(--fz-base);
}

/* LINE ボタン
   ---------------------------------------- */
.c-btn--line {
  background-color: var(--color-cta-secondary);
  color: var(--color-bg-white);
  border: 1px solid var(--color-cta-secondary);
}

.c-btn--line:hover,
.c-btn--line:focus-visible {
  background-color: var(--color-cta-secondary-hover);
  border-color: var(--color-cta-secondary-hover);
  box-shadow: var(--shadow-md);
}

/* Small ボタン
   ---------------------------------------- */
.c-btn--sm {
  padding: 0.4rem 1rem;
  font-size: var(--fz-sm);
}


/* CTA Large ボタン（Contact用）
   ---------------------------------------- */
.c-btn--cta-lg {
  background-color: var(--color-cta-primary);
  color: var(--color-on-dark);
  border: none;
  border-radius: 0;
  padding: 16px 32px; /* Figma: py=16px px=32px */
  font-size: 1.125rem; /* Figma: 18px */
  line-height: 1.3; /* Figma: leading-[1.3] */
}

.c-btn--cta-lg:hover {
  opacity: 0.85;
}

/* Ghost Large ボタン（Contact用）
   ---------------------------------------- */
.c-btn--ghost-lg {
  background-color: var(--color-base);
  color: var(--color-text-main);
  border: 1px solid var(--color-accent);
  border-radius: 0;
  padding: 16px 32px; /* Figma: py=16px px=32px */
  font-size: 1.125rem; /* Figma: 18px */
}

.c-btn--ghost-lg:hover {
  opacity: 0.85;
}

/* SP: 全幅ボタン
   ---------------------------------------- */
@media (max-width: 767px) {
  .c-btn--cta-lg,
  .c-btn--ghost-lg,
  .c-btn--primary {
    width: 100%; /* Figma SP: 全幅ボタン */
  }
}