.barkaphone-contact { display: block; max-inline-size: var(--content-width); margin-inline: auto; padding: var(--section-space-m) var(--site-padding); border-block-start: var(--border-width) solid var(--primary); background: var(--neutral); }
.barkaphone-contact__inner { max-inline-size: 700px; margin-inline: auto; }
.barkaphone-contact__heading { text-align: center; padding-block-end: var(--space-l); margin-block-end: var(--space-l); border-block-end: var(--border); & h2 { font-size: var(--h3); margin-block: var(--space-s); } }
.barkaphone-contact__eyebrow { color: var(--primary); font-family: var(--font-heading); font-size: var(--text-s); margin: 0; }
.barkaphone-contact__intro { font-size: var(--text-l); font-style: italic; margin: var(--space-s) 0 0; }
.barkaphone-contact__form { display: flex; flex-direction: column; gap: var(--space-m); }
.barkaphone-contact__field { display: flex; flex-direction: column; gap: var(--space-xs); & label { font-family: var(--font-heading); font-size: var(--text-m); color: var(--primary); } & input, & textarea { inline-size: 100%; min-block-size: var(--tap-target); padding: var(--space-s); border: var(--border-width) solid var(--primary-40); background: var(--white); border-radius: var(--radius-s); color: var(--base); font: inherit; } & textarea { resize: vertical; } & [aria-invalid='true'] { border-color: var(--accent); } }
.barkaphone-contact__error { margin: 0; color: var(--accent); font-size: var(--text-s); &:empty { display: none; } }
.barkaphone-contact__submit { inline-size: 100%; &:disabled { opacity: .65; cursor: not-allowed; } }
.barkaphone-contact__availability { text-align: center; font-size: var(--text-s); color: var(--primary); margin: 0; &:empty { display: none; } }
.barkaphone-contact__status { margin: 0; padding: var(--space-s); border-inline-start: var(--space-xxs) solid var(--primary); color: var(--primary); &:empty { display: none; } }
.barkaphone-contact__status--error { border-color: var(--accent); color: var(--accent); }
.barkaphone-contact__note { font-size: var(--text-s); font-style: italic; text-align: center; margin-block: var(--space-l) var(--space-s); }
.barkaphone-contact__disclaimer { font-size: var(--text-xs); color: var(--base-70); text-align: center; margin-block: var(--space-m) 0; padding-block-start: var(--space-m); border-block-start: var(--border); }