/* Стилі сторінки «Контакти» */

/* ===== «Зв'яжіться з нами — підберемо продукцію пі» ===== */
.contacts__intro { max-width: 1240px; margin: 0px auto; padding: 58px 28px 24px; }
.contacts__eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: 999px; background: rgb(230, 237, 226); margin-bottom: 12px; }
.contacts__eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent,#C53A2B); flex: 0 0 auto; }
.contacts__eyebrow-text { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-dark,#1C4A2A); }
.contacts__title { font-family: Montserrat, system-ui, -apple-system, sans-serif; font-weight: 600; font-size: 46px; line-height: 1.08; color: var(--green-dark,#1C4A2A); margin: 0px 0px 14px; max-width: 680px; }
.contacts__text { font-size: 17px; line-height: 1.6; color: var(--muted); margin: 0px; max-width: 620px; }

/* ===== «Отримати персональну пропозицію» ===== */
.contacts__main { max-width: 1240px; margin: 0px auto; padding: 18px 28px 56px; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 34px; align-items: stretch; }
.contacts__aside { display: flex; flex-direction: column; }
.contacts__card-dark { flex: 1 1 auto; background: var(--green-dark,#1C4A2A); border-radius: 20px; padding: 30px; color: rgb(237, 232, 216); display: flex; flex-direction: column; }
.contacts__card-label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(157, 195, 162); margin-bottom: 8px; }
.contacts__phone { font-size: 26px; font-weight: 800; color: rgb(255, 255, 255); text-decoration: none; }
.contacts__divider { height: 1px; background: rgba(255, 255, 255, 0.14); margin: 22px 0px; }
.contacts__email { font-size: 17px; font-weight: 600; color: rgb(255, 255, 255); text-decoration: none; }
.contacts__address { font-size: 16px; font-weight: 600; color: rgb(255, 255, 255); }
.contacts__socials { display: flex; gap: 11px; margin-top: 24px; }
.contacts__social { display: inline-flex; line-height: 0; }
.contacts__social:hover { opacity: 0.82; }
.contacts__schedule { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.contacts__schedule-title { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(157, 195, 162); margin-bottom: 14px; }
.contacts__schedule-list { display: flex; flex-direction: column; gap: 11px; }
.contacts__schedule-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.contacts__schedule-day { font-size: 15px; color: rgb(237, 232, 216); }
.contacts__schedule-time { font-size: 15px; font-weight: 700; color: rgb(255, 255, 255); }
.contacts__schedule-off { font-size: 14px; font-weight: 600; color: rgb(157, 195, 162); }
.contacts__schedule-note { display: flex; align-items: center; gap: 9px; margin-top: 18px; font-size: 13.5px; line-height: 1.45; color: rgb(207, 224, 205); }
.contacts__schedule-note-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent,#C53A2B); flex: 0 0 auto; }
.contacts__hours-wrap { margin-top: auto; padding-top: 30px; }
.contacts__hours { background: rgb(255, 255, 255); border-radius: 16px; padding: 20px 22px; }
.contacts__hours-title { font-size: 14px; font-weight: 700; color: var(--green-dark,#1C4A2A); margin-bottom: 15px; }
.contacts__pay { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.contacts__pay-card { display: inline-flex; align-items: center; justify-content: center; }
.contacts__pay-img { width: auto; display: block; }
.contacts__pay-img--privat { height: 34px; }
.contacts__pay-img--apple { height: 25px; }
.contacts__pay-img--google { height: 25px; }
.contacts__pay-img--mc { height: 33px; }
.contacts__pay-img--visa { height: 21px; }
.contacts__form-card { background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 20px; padding: 36px 38px; display: flex; flex-direction: column; transition: box-shadow .3s ease; }
.contacts__form-card--flash { box-shadow: 0 0 0 3px rgba(197,58,43,0.45), 0 18px 40px -18px rgba(28,74,42,0.5); }
.contacts__form-title { font-family: Montserrat, system-ui, -apple-system, sans-serif; font-size: 26px; font-weight: 600; color: var(--green-dark,#1C4A2A); margin: 0px 0px 6px; }
.contacts__form-text { font-size: 14.5px; color: var(--muted); margin: 0px 0px 26px; }
.contacts__form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contacts__field { display: flex; flex-direction: column; gap: 7px; }
.contacts__label { font-size: 13px; font-weight: 700; color: var(--ink); }
.contacts__input { padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; font-family: Montserrat; font-size: 15px; background: var(--cream,#F5F2E8); color: var(--ink); outline: none; }
.contacts__field-wide { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; flex: 1 1 auto; }
.contacts__textarea { flex: 1 1 auto; min-height: 235px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; font-family: Montserrat; font-size: 15px; background: var(--cream,#F5F2E8); color: var(--ink); outline: none; resize: vertical; }
.contacts__submit { display: inline-flex; width: 100%; justify-content: center; align-items: center; margin-top: 22px; padding: 16px; border-radius: 999px; background: var(--accent,#C53A2B); color: rgb(255, 255, 255); font-size: 16px; font-weight: 700; cursor: pointer; }
.contacts__submit:hover { background: var(--accent-dark,#A82E22); }
.contacts__form-note { font-size: 12.5px; color: rgb(154, 148, 134); text-align: center; margin: 14px 0px 0px; }

/* ===== Карта України ===== */
.contacts__map { max-width: 1240px; margin: 0px auto; padding: 0px 28px 70px; }
.contacts__map-card { background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 24px; padding: 38px 40px; overflow: hidden; }
.contacts__map-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.contacts__map-eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: 999px; background: rgb(230, 237, 226); margin-bottom: 10px; }
.contacts__map-title { font-family: Montserrat, system-ui, -apple-system, sans-serif; font-weight: 600; font-size: 32px; line-height: 1.1; color: var(--green-dark,#1C4A2A); margin: 0px; }
.contacts__map-tag { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 999px; background: var(--cream,#F5F2E8); border: 1px solid var(--line); font-size: 13.5px; font-weight: 700; color: var(--green-dark,#1C4A2A); }
.contacts__map-tag-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent,#C53A2B); }
.contacts__map-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 34px; align-items: center; margin-top: 26px; }
.contacts__oblast-panel { background: var(--green-dark,#1C4A2A); border-radius: 20px; padding: 30px; color: rgb(237, 232, 216); min-height: 252px; display: flex; flex-direction: column; }
.contacts__oblast-label { font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: rgb(157, 195, 162); margin-bottom: auto; }
.contacts__oblast-name { font-family: Montserrat, system-ui, -apple-system, sans-serif; font-weight: 600; font-size: 33px; line-height: 1.1; color: rgb(255, 255, 255); margin: 14px 0px 8px; text-wrap: balance; }
.contacts__oblast-center { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: rgb(207, 224, 205); }
.contacts__oblast-center-dot { width: 6px; height: 6px; border-radius: 50%; background: rgb(157, 195, 162); flex: 0 0 auto; }
.contacts__oblast-text { font-size: 14px; line-height: 1.5; color: rgb(217, 227, 214); margin-bottom: 20px; }
.contacts__oblast-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: 999px; background: var(--accent,#C53A2B); color: rgb(255, 255, 255); font-size: 15px; font-weight: 700; cursor: pointer; }
.contacts__oblast-btn:hover { background: var(--accent-dark,#A82E22); }
.contacts__map-figure { width: 100%; }
.contacts__map-svg { display: block; height: auto; filter: drop-shadow(rgba(28, 74, 42, 0.12) 0px 18px 30px); }
.contacts__oblast { cursor: pointer; transition: fill 0.18s; outline: none; }
.contacts__legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 16px; padding-left: 2px; }
.contacts__legend-item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.contacts__legend-swatch-available { width: 13px; height: 13px; border-radius: 4px; background: rgb(231, 238, 228); border: 1px solid var(--line); }
.contacts__legend-swatch-current { width: 13px; height: 13px; border-radius: 4px; background: var(--accent,#C53A2B); }
.contacts__legend-swatch-soon { width: 13px; height: 13px; border-radius: 4px; background: rgb(230, 227, 216); border: 1px solid var(--line); }

/* =====================  АДАПТИВНІСТЬ  ===================== */
@media (max-width: 980px) {
  .contacts__main { grid-template-columns: 1fr; gap: 24px; }
  .contacts__title { font-size: 38px; }
  .contacts__map-grid { grid-template-columns: 1fr; gap: 26px; }
  .contacts__oblast-panel { min-height: 0; min-width: 0; }
}
@media (max-width: 768px) {
  .contacts__intro { padding: 46px 18px 20px; }
  .contacts__main { padding: 18px 18px 48px; }
  .contacts__map { padding: 0 18px 56px; }
  .contacts__title { font-size: 30px; }
  .contacts__form-card { padding: 28px 22px; }
  .contacts__form-grid { grid-template-columns: 1fr; }
  .contacts__map-card { padding: 28px 22px; }
  .contacts__map-title { font-size: 27px; }
  .contacts__oblast-name { font-size: 28px; }
  .contacts__oblast-panel { padding: 20px; }
}

/* ===== Панель області: дані приходять з PHP ===== */
.contacts__oblast-panel--disabled .contacts__oblast-name { color: rgba(255,255,255,.6); }
.contacts__oblast-badge {
  align-self: flex-start;
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  color: rgb(231,217,184);
  font-size: 13px; font-weight: 700;
  margin: 14px 0 16px;
}
.contacts__oblast-panel--disabled .contacts__oblast-text { color: rgb(191,201,188); margin-bottom: 0; }
.contacts__oblast-btn { text-decoration: none; }

/* === Додай у кінець assets/css/contacts.css === */

/* Форма-обгортка (щоб поля лягали як були) */
.contacts__form { display: flex; flex-direction: column; }

/* Антиспам-пастка — прибрана з очей, але доступна ботам */
.contacts__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Повідомлення про результат */
.contacts__form-status {
	margin: 18px 0 0;
	padding: 14px 16px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
}
.contacts__form-status.is-success {
	background: rgba(46, 125, 50, 0.1);
	color: var(--green-dark, #1C4A2A);
	border: 1px solid rgba(46, 125, 50, 0.35);
}
.contacts__form-status.is-error {
	background: rgba(197, 58, 43, 0.08);
	color: var(--accent-dark, #A82E22);
	border: 1px solid rgba(197, 58, 43, 0.35);
}

/* Кнопка під час надсилання */
.contacts__submit.is-loading {
	opacity: 0.75;
	cursor: default;
}

/* submit тепер <button> — скидаємо дефолтний вигляд */
button.contacts__submit {
	border: 0;
	font-family: inherit;
	width: 100%;
}