/* ============================================================
   BUTTONS — .pill-btn (desktop CTA) + .mh-btn-primary (mobile CTA),
   shared by index.html and about.html.

   NOTE: border-radius is 10px, matching responsive.css's global,
   unconditional "premium button shape" override (still loaded on
   both pages, shared with the other 28 pages) — not the 6px
   var(--r-pill) the base rule below implies on its own. Stated
   directly here so the component's real rendered value is documented,
   rather than relying on the !important fight to be self-evident.
   ============================================================ */
.pill-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--c-text); border-radius: 10px;
  font-family: var(--f); font-weight: 500; font-style: normal;
  text-decoration: none; border: 1.5px solid rgba(48,54,46,0.25); cursor: pointer;
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
  line-height: 1; box-shadow: 0 2px 12px rgba(16,47,39,0.08);
}
/* hover is gated behind (hover:hover) so a tap on touch devices can't leave
   the button stuck in its dark hover state until the user taps elsewhere —
   :active below still fires everywhere for immediate press feedback. */
@media (hover: hover) and (pointer: fine) {
  .pill-btn:hover { background: #6A7C64; border-color: #6A7C64; color: #fdfcf8; box-shadow: none; }
}
.pill-btn:active { transform: scale(0.97); box-shadow: 0 2px 8px rgba(16,47,39,0.1); }
/* Filled dark variant — for CTAs on cream/light backgrounds (index.html only so far) */
.pill-btn--dark { background: var(--c-dark); color: var(--c-text); border-color: var(--c-dark); box-shadow: 0 4px 20px rgba(16,47,39,0.25); }
@media (hover: hover) and (pointer: fine) {
  .pill-btn--dark:hover { background: #6A7C64; border-color: #6A7C64; color: #fdfcf8; box-shadow: 0 8px 28px rgba(16,47,39,0.32); }
}
/* Outline ghost variant — for dark-bg sections (index.html only so far) */
.pill-btn--ghost { background: transparent; color: var(--c-text); border: 1.5px solid rgba(48,54,46,0.45); box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .pill-btn--ghost:hover { background: rgba(48,54,46,0.1); border-color: rgba(48,54,46,0.75); box-shadow: none; }
}

/* mobile-only primary CTA (booking forms, footer, mobile-home sections) */
/* ширина по содержимому с прежними 280px как минимумом: при жёстких
   280px и padding 48px подпись «Записаться на приём» не помещалась
   на экранах 360px и обрезалась */
.mh-btn-primary { display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--c-accent); color: #fff; border-radius: 12px; padding: 18px clamp(24px, 5vw, 48px); text-decoration: none; width: auto; min-width: 280px; max-width: 100%; transition: background 0.2s, transform 0.16s ease-out; border: none; cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .mh-btn-primary:hover { background: #6A7C64; }
}
.mh-btn-primary:active { background: #6A7C64; transform: scale(0.97); }
.mh-btn-primary span { font-size: 24px; font-weight: 400; letter-spacing: -0.04em; white-space: nowrap; }
.mh-btn-primary svg { width: 37px; height: 37px; flex-shrink: 0; }