/* ==========================================================================
   buttons.css — primary/secondary/ghost buttons
   Markup: .btn-otzivi-primary / .btn-otzivi-secondary / .btn-otzivi-link
   applied alongside existing Bootstrap .btn base class.
   Notes:  one primary per view — see .claude/skills/otzivi-design/buttons.md.
   ========================================================================== */

.btn-otzivi-primary,
.btn-otzivi-secondary,
.btn-otzivi-link {
  font-family: var(--otzivi-font-base);
  font-weight: var(--otzivi-fw-semibold);
  font-size: var(--otzivi-fs-btn);
  border-radius: var(--otzivi-radius-md);
  padding: 12px 24px;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.btn-otzivi-primary {
  background: var(--otzivi-accent-button);
  border: 1px solid var(--otzivi-accent-button);
  color: #fff;
}
.btn-otzivi-primary:hover,
.btn-otzivi-primary:focus {
  background: var(--otzivi-accent-button-hover);
  border-color: var(--otzivi-accent-button-hover);
  color: #fff;
}

.btn-otzivi-secondary {
  background: transparent;
  border: 1px solid var(--otzivi-primary);
  color: var(--otzivi-primary);
}
.btn-otzivi-secondary:hover,
.btn-otzivi-secondary:focus {
  background: var(--otzivi-primary-button);
  border-color: var(--otzivi-primary-button);
  color: #fff;
}

.btn-otzivi-link {
  background: transparent;
  border: 1px solid transparent;
  color: var(--otzivi-primary);
  padding-left: var(--otzivi-space-8);
  padding-right: var(--otzivi-space-8);
}
.btn-otzivi-link:hover,
.btn-otzivi-link:focus {
  text-decoration: underline;
  color: var(--otzivi-primary-hover);
}

.btn-otzivi-primary:focus-visible,
.btn-otzivi-secondary:focus-visible,
.btn-otzivi-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--otzivi-primary-rgb), .35);
}

.btn-otzivi-primary[disabled],
.btn-otzivi-secondary[disabled] {
  opacity: .6;
  cursor: not-allowed;
}

/* The legacy theme's .btn-secondary/.btn-primary/.btn-green/.btn-blue carry
   a large colored "glow" box-shadow (anti-slop: glowing colored shadow on
   light surfaces) — neutralize it everywhere these legacy classes are still
   used (e.g. the footer's "Send a Message" button, bootstrap-filestyle's
   generated label) without having to track down every call site. */
.btn-secondary,
.btn-primary,
.btn-green,
.btn-blue {
  box-shadow: none !important;
}

/* .btn-primary's legacy background (#03e582, neon green) with the base
   .btn rule's white text gives ~1.7:1 contrast — nearly unreadable (found on
   the footer contact-message modal's submit button). */
.btn-primary {
  background-color: var(--otzivi-primary-button) !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--otzivi-primary-button-hover) !important;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 720px) {
  .otzivi-cta-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--otzivi-space-12);
  }
  .otzivi-cta-group .btn-otzivi-primary,
  .otzivi-cta-group .btn-otzivi-secondary,
  .otzivi-cta-group .btn-otzivi-link {
    width: 100%;
    text-align: center;
  }
}