/* NoStressBorders — Contact page (consumes design-system tokens) */

.nosb-contact-page { background: var(--nosb-light); min-height: calc(100vh - 60px); padding: 60px 20px 80px; box-sizing: border-box; }
.nosb-contact-wrap { max-width: 680px; margin: 0 auto; }

.nosb-contact-header { text-align: center; margin-bottom: 40px; }
.nosb-contact-header__title { font-family: var(--nosb-font-heading); font-size: 36px; color: var(--nosb-dark); margin: 0 0 12px; }
.nosb-contact-header__sub { font-family: var(--nosb-font-body); font-size: 15px; color: var(--nosb-mid); line-height: 1.7; margin: 0; }

.nosb-contact-card { background: #fff; border-radius: var(--nosb-radius-xl); border: 1px solid var(--nosb-border); padding: 40px; box-shadow: 0 2px 12px rgba(0,0,0,.04); }

/* Form */
.nosb-contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.nosb-contact-form__group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.nosb-contact-form__label { font-family: var(--nosb-font-body); font-size: 12px; font-weight: 600; color: var(--nosb-mid); text-transform: uppercase; letter-spacing: 0.06em; }
.nosb-contact-form__label span { color: var(--nosb-danger); margin-left: 2px; }
.nosb-contact-form__input { font-family: var(--nosb-font-body); font-size: 14px; color: var(--nosb-dark); background: #fff; border: 1.5px solid var(--nosb-border); border-radius: var(--nosb-radius); padding: 10px 14px; width: 100%; box-sizing: border-box; transition: border-color 0.15s; outline: none; }
.nosb-contact-form__input:focus { border-color: var(--nosb-primary); }
/* Native dropdown — keep the shared input box styling (border/padding/font) but let the
   browser render its own control + arrow + option list, rather than a custom chevron. */
.nosb-contact-form__select { cursor: pointer; }
.nosb-contact-form__textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.nosb-contact-form__actions { margin-top: 8px; }
.nosb-contact-form__btn { display: inline-flex; align-items: center; background: var(--nosb-primary); color: #fff; font-family: var(--nosb-font-body); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; border: none; border-radius: var(--nosb-radius); padding: 12px 28px; cursor: pointer; transition: background 0.15s; }
.nosb-contact-form__btn:hover { background: var(--nosb-primary-dark); }
.nosb-contact-form__btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Error */
.nosb-contact-error { font-family: var(--nosb-font-body); font-size: 13px; color: var(--nosb-danger); background: var(--nosb-danger-light); border: 1px solid var(--nosb-danger); border-radius: var(--nosb-radius); padding: 10px 14px; margin-bottom: 16px; }

/* Success */
.nosb-contact-success { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 0 8px; gap: 12px; }
.nosb-contact-success__title { font-family: var(--nosb-font-heading); font-size: 24px; color: var(--nosb-dark); margin: 0; }
.nosb-contact-success__body { font-family: var(--nosb-font-body); font-size: 14px; color: var(--nosb-mid); line-height: 1.7; margin: 0; }

@media (max-width: 600px) {
    .nosb-contact-page { padding: 40px 16px 60px; }
    .nosb-contact-card { padding: 28px 20px; }
    .nosb-contact-form__row { grid-template-columns: 1fr; gap: 0; }
    .nosb-contact-header__title { font-size: 28px; }
}