/* ===== Contact page ===== */
.contact-cards .cards.four{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.card.contact{min-height:150px}
.contact-ico{
  width:44px;height:44px;border-radius:50%;background:#f59e0b;display:grid;place-items:center;
  color:#fff;margin:0 auto 10px;font-size:22px;box-shadow:var(--shadow)
}

/* Find Us + Form grid */
.contact-grid{background:#f6f9fd;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.contact-grid .grid{
  display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start;
}
.map-card, .contact-form-card{
  background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:18px;
}
.map-card h2, .contact-form-card h2{margin:0 0 10px}
.map-embed {border-radius:14px; overflow:hidden; border:1px solid #e5e7eb; background:#fff}
.map-embed iframe{width:100%; height:360px; border:0}
.map-note{color:var(--muted); margin:.6rem 0 0}

/* Contact form */
.contact-form{display:grid; gap:12px}
.contact-form .form-row{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.contact-form .form-group{display:flex; flex-direction:column}
.contact-form label{font-size:14px; font-weight:600; margin-bottom:4px}
.contact-form input{
  height:48px; padding:0 12px; border:1px solid #dfe3ea; border-radius:12px; background:#fff;
}

/* Office hours dark panel */
.office-hours{background:#fff}
.hours-panel{padding:28px 16px}
.hours-panel h2{text-align:center; margin:0 0 14px; font-size:clamp(26px,3vw,36px)}
.hours-grid{
  background:#0f172a; color:#e6edf6; border-radius:26px; padding:26px; display:grid;
  grid-template-columns:1fr 1fr; gap:20px; max-width:900px; margin:0 auto;
}
.hours-grid .h-item{text-align:center}
.hours-grid h3{margin:0 0 6px}
.hours-grid p{margin:0;color:#c7d1df}

/* Responsive */
@media (max-width: 1024px){
  .contact-cards .cards.four{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 760px){
  .contact-grid .grid{grid-template-columns:1fr}
  .hours-grid{grid-template-columns:1fr}
}
/* Contact form fix — поля в одну колонку */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px; /* расстояние между полями */
}

.contact-form .form-group {
  display: flex;
  flex-direction: column;
  width: 100%;
}
/* Drop-in дизайн для .btn-primary */
.btn-primary{
  --bg1:#f59e0b;           /* верх градиента */
  --bg2:#f59e0b;           /* низ градиента */
  --text:#071b12;
  --ring:#f59e0b;          /* фокус-обводка */
  --shadow:0 8px 24px rgba(34,197,94,.35);
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:0.9rem 1.2rem;
  border-radius:14px;
  border:0;
  background:linear-gradient(180deg,var(--bg1),var(--bg2));
  color:var(--text);
  font:700 16px/1 system-ui,-apple-system,Segoe UI,Roboto;
  letter-spacing:.2px;
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-primary:hover{ transform:translateY(-1px); filter:brightness(1.04) }
.btn-primary:active{ transform:translateY(0); filter:brightness(.98) }
.btn-primary:focus-visible{
  outline:3px solid var(--ring);
  outline-offset:2px;
}
.btn-primary:disabled,
.btn-primary[aria-busy="true"]{
  opacity:.7; cursor:not-allowed; filter:saturate(.7);
}

/* Блик при ховере */
.btn-primary::before{
  content:"";
  position:absolute; inset:2px;
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0));
  pointer-events:none;
  transition:opacity .2s ease;
  opacity:.55;
}
.btn-primary:hover::before{ opacity:.7 }

/* Состояние загрузки без изменения HTML: data-loading="true" */
.btn-primary[data-loading="true"]{
  color:transparent; /* прячем текст, показываем спиннер */
}
.btn-primary[data-loading="true"]::after{
  content:"";
  position:absolute;
  width:1.1em;height:1.1em;
  border:2px solid rgba(255,255,255,.8);
  border-top-color:transparent;
  border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

/* Размеры (по желанию) */
.btn-sm{ padding:.6rem .9rem; font-size:14px; border-radius:12px }
.btn-lg{ padding:1.05rem 1.4rem; font-size:17px; border-radius:16px }

/* Уважение к reduced motion */
@media (prefers-reduced-motion:reduce){
  .btn-primary{ transition:none }
  .btn-primary:hover{ transform:none }
}
.contact-form-card {
  max-width: 500px;   /* ограничение ширины */
  margin: 0 auto;     /* центрирование */
  padding: 20px;
}

.contact-form .form-group {
  margin-bottom: 15px;
}

.contact-form input,
.contact-form button {
  width: 100%;
  box-sizing: border-box;
}