/* ==========================================================================
   MONT — BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.6em 1.3em;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px solid transparent;
  transition: transform var(--transition-base), background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
  white-space: nowrap;
}

.btn:hover { transform: translateY(-1px); }

/* Primary — solid terracotta, used for main CTAs (incl. the header "Get a
   Free Quote" button, since it shares this class). Colors editable in
   Customize → Buttons; hover just dims/brightens so custom colors still
   get a hover effect automatically. */
.btn--primary {
  background: var(--btn-primary-bg, var(--color-terracotta));
  color: var(--color-white);
}
.btn--primary:hover {
  filter: brightness(0.92);
}

/* Secondary — soft cream outline, used next to a primary button */
.btn--secondary {
  background: var(--btn-secondary-bg, var(--color-cream-soft));
  color: var(--btn-secondary-text, var(--color-terracotta));
  border-color: var(--btn-secondary-border, rgba(163, 86, 58, 0.25));
}
.btn--secondary:hover {
  filter: brightness(0.96);
  border-color: var(--btn-secondary-text, var(--color-terracotta));
}

/* Ochre / "yellow" button — used on service & making-room cards */
.btn--ochre {
  background: var(--btn-ochre-bg, var(--color-ochre));
  color: var(--btn-ochre-text, var(--color-white));
  padding: 0.7em 1.5em;
  font-size: 0.9rem;
}
.btn--ochre:hover { filter: brightness(0.92); }

.btn--ochre[aria-disabled="true"],
.btn--ochre.is-disabled {
  background: var(--btn-ochre-bg, var(--color-ochre));
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--outline-ink {
  background: transparent;
  border-color: var(--color-ink);
  color: var(--color-ink);
}
.btn--outline-ink:hover {
  background: var(--color-ink);
  color: var(--color-white);
}

.btn--block { width: 100%; }