/* ===== CONTACT (desktop, clean) ===== */

/* Контейнер сторінки */
.contact-section{ padding:24px 0 0; }
.contact-section .smc-container{ max-width:1440px; margin:0 auto; padding:0 30px; }

/* ===== BREADCRUMBS: правильні відступи на контакт сторінці ===== */
.contact-section nav.ct-bc,
.contact-section .ct-bc {
  margin: 32px 0 0 !important;
  padding-left: 40px !important; /* 70px - 30px (padding контейнера) = 40px */
  padding-right: 40px !important;
  margin-top: 24px;
  margin-bottom: 66px !important;
  box-sizing: border-box;
}

/* Перебиваємо базові стилі margin з base.css для ol елемента */
.contact-section nav.ct-bc ol,
.contact-section nav.ct-bc ul,
.contact-section .ct-bc ol,
.contact-section .ct-bc ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.contact-section nav.ct-bc .ct-bc__list,
.contact-section .ct-bc .ct-bc__list {
	margin-left: 0 !important;
	margin-right: 0 !important;
}
/* --- Секція з зеленим блоком --- */
.contact-frame-section{
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 70px;
  box-sizing: border-box;
  margin-bottom: 70px;
}

/* --- Суцільний зелений блок: H1 + колонки + карта --- */
.contact-frame{
  background: var(--Light-Green, #EFF7F6);
  border-radius:20px;
  padding: 32px 0;
  width: 100%;
  box-sizing: border-box;
}

/* H1 */
.contact-title{
  color:#091311;
  font:700 40px/100% Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  margin:0 0 40px 0;
  padding: 0 70px;
}

/* 3 колонки */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 420px;
  gap:32px;
  align-items:start;
  padding-left: 70px;
}

/* Тексти у колонках */
.contact-h{
  margin:0 0 16px 0;
  color:#091311;
  font:600 24px/110% Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
}
.contact-p{
  margin:0 0 8px 0;
  color:#1D1D1F;
  font:500 20px/140% Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
}

/* Соцкнопки — беремо з футера, тільки вирівнювання */
.smc-footer__socials--contact{ margin-top:12px; }

/* Права колонка — форма (всередині зеленого блока) */
.contact-form{
  background:#0DAAA2;
  color:#fff;
  border-radius:16px;
  padding:20px;
}
.contact-form__title{
  margin:0 0 12px 0;
  font:700 18px/110% Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
}
.contact-form__note{
  margin:0 0 16px 0;
  font:500 14px/140% Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  opacity:.9;
}
.contact-form .field{ margin-bottom:12px; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
  width:100%; height:44px; border-radius:10px; border:2px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.1); color:#fff; outline:none;
  font:500 14px/44px Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  padding:0 12px;
}
.contact-form textarea{ height:120px; line-height:1.4; padding:10px 12px; resize:vertical; }
.contact-form input::placeholder,
.contact-form textarea::placeholder{ color:rgba(255,255,255,.85); }

/* Subtle error indication only */
.contact-form .field.has-error input,
.contact-form .field.has-error textarea {
  border-color: #ff6b6b;
}
.contact-form .field-error {
  display: none; /* Hide field errors - use toast instead */
}

/* Submit button states */
.contact-form .btn{
  width:100%; height:44px; border-radius:10px; border:0; cursor:pointer;
  background:#fff; color:#01A9A0; font:700 14px/44px Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  transition: transform .06s ease, box-shadow .12s ease, opacity 0.3s ease;
  position: relative;
}
.contact-form .btn:hover:not(:disabled){ box-shadow:0 6px 18px rgba(0,0,0,.12); }
.contact-form .btn:active:not(:disabled){ transform: translateY(1px); }
.contact-form .btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}
.contact-form .btn-loader {
  display: none;
}
.contact-form .btn.loading .btn-text {
  display: none;
}
.contact-form .btn.loading .btn-loader {
  display: inline;
}

/* Hide form message - use toast instead */
.contact-form .form-message {
  display: none !important;
}

/* Карта — частина того ж зеленого блоку */
.contact-map{ margin-top:24px; padding: 0 70px; }
.contact-map__inner{
  position:relative; width:100%; height:520px;
  border-radius:12px; overflow:hidden; background:#dfeeee;
}
.contact-map__inner iframe,
.contact-map__inner .map-embed{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}
/* Відступ 40px між телефоном і наступним заголовком у лівій колонці */
.contact-col--left .contact-p + .contact-h{
  margin-top: 40px !important;
}
/* Email row: 40px зверху і знизу */
.contact-col .contact-p:has(a[href^="mailto:"]) {
  margin: 40px 0 !important;
}

/* Відступ для "Юридична адреса" */
.contact-col .contact-h.jur {
  margin-top: 40px !important;
}

/* ===== CONTACT — Form (desktop, exact) ===== */
.contact-form{
  width: 346px;
  height: 471px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 24px;
  padding: 40px 24px;
  border-radius: 20px;
  background: var(--Green, #01A9A0);
  color: #fff;
  box-sizing: border-box;
}

/* Заголовок / підзаголовок */
.contact-form__title{
  color: #fff;
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0;
  text-align: center;
  margin: 0;
}
.contact-form__note{
  color: #fff;
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
  text-align: center;
  margin: 0;
}

/* Поля */
.contact-form .field{ width: 100%; display:flex; justify-content:center; }

.contact-form input[type="email"],
.contact-form input[type="text"]{
  width: 298px;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  box-sizing: border-box;
  border: 1px solid #fff;
  border-radius: 10px;
  background: transparent;
  color: #fff;
  outline: none;
  font: 500 16px/20px Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
}

.contact-form textarea{
  width: 298px;
  height: 120px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  box-sizing: border-box;
  border: 1px solid #fff;
  border-radius: 10px;
  background: transparent;
  color: #fff;
  outline: none;
  resize: vertical;
  font: 500 16px/20px Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{ color: rgba(255,255,255,.9); }

/* Кнопка */
.contact-form .btn{
  width: 298px;
  height: 52px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 14px 40px 16px;
  box-sizing: border-box;
  border: 1px solid var(--Green, #01A9A0);
  border-radius: 10px;
  background: #fff;
  color: var(--Black, #091311);
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
}

/* необов’язково: фокус */
.contact-form input:focus,
.contact-form textarea:focus{
  box-shadow: 0 0 0 2px rgba(255,255,255,.25) inset;
}

/* ===== CONTACT — mobile (≤480px) ===== */
@media (max-width: 480px){

  /* загальний контейнер секції */
  .contact-section{ padding: 16px 0 48px; }
  .contact-section .smc-container{ padding: 0 20px !important; }

  /* секція з зеленим блоком */
  .contact-frame-section{
    padding: 0 20px !important;
  }

  /* зелена «рама» */
  .contact-frame{
    padding: 0;                 /* скидаємо паддинг, щоб контролювати контент окремо */
    border-radius: 20px;
  }

  /* контент всередині зеленої рами */
  .contact-title{
    color:#091311;
    font:700 24px/100% Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
    text-align:center;
    margin: 0 0 24px;
    padding: 24px 20px 0;       /* верхній відступ 24px, бокові 20px */
  }

  /* колонки контенту */
  .contact-grid{
    display:block;
    padding: 0 20px;            /* бокові відступи 20px для контенту */
  }

  /* підзаголовки та текст */
  .contact-h{
    color:#091311;
    font:600 18px/100% Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
    margin: 0 0 16px 0;
    text-align:left;            /* по лівому краю */
  }
  .contact-p{
    color:#091311;
    font:500 16px/20px Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
    margin: 0 0 8px 0;
    text-align:left;            /* по лівому краю */
  }

  /* формa */
  .contact-form{
    margin-top: 24px;
    padding: 40px 24px;         /* за макетом */
    border-radius: 20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap: 24px;
  }
  .contact-form__title{
    color:#fff;
    font:600 20px/100% Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
    text-align:center;
    margin:0;
  }
  .contact-form__note{
    color:#fff;
    font:500 16px/20px Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
    text-align:center;
    margin:0;
    opacity:1;
  }

  .contact-form .field{ width:100%; margin:0; }

  .contact-form input[type="email"],
  .contact-form input[type="text"]{
    width: 100%;
    max-width: 298px;
    height: 48px;
    padding: 12px 16px;
    border: 1px solid #fff;
    border-radius: 10px;
    background: transparent;
    color: #F0F0F0;                       /* колір елементів форми */
    font:500 16px/20px Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
    box-sizing: border-box;
  }

  .contact-form textarea{
    width: 100%;
    max-width: 298px;
    height: 120px;
    padding: 12px 16px;
    border: 1px solid #fff;
    border-radius: 10px;
    background: transparent;
    color: #F0F0F0;
    font:500 16px/20px Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
    resize: vertical;
    box-sizing: border-box;
  }

  .contact-form input::placeholder,
  .contact-form textarea::placeholder{
    color:#F0F0F0;
  }

  .contact-form .btn{
    width: 100%;
    max-width: 298px;
    height: 52px;
    padding: 14px 40px 16px;
    border-radius: 10px;
    border: 1px solid #01A9A0;
    background: #fff;
    color: #091311;                         /* текст кнопки */
    font:500 16px/20px Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  }

  /* карта */
  .contact-map{ 
    margin-top: 24px; 
    padding: 0 20px 24px;       /* бокові відступи 20px, нижній 24px */
  }
  .contact-map__inner{ height: 322px; border-radius: 20px; }

  /* дрібні відступи, що просили раніше */
  .contact-col .contact-p:last-of-type{ margin-bottom: 16px; }
}

/* ===== CONTACT — mobile full-bleed (≤480px) ===== */
@media (max-width: 480px){

  /* перекриваємо та розтягуємо зелений фон на всю ширину */
  .contact-frame-section{
    padding: 0 !important;
  }

  /* зелений блок на всю ширину екрана */
  .contact-frame{
    /* розтягуємо фон на всю ширину */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;                  /* без заокруглень по краях екрана */
    /* паддинг контролюється окремими елементами всередині */
    background: var(--Light-Green, #EFF7F6);
  }

  /* сама форма всередині */
  .contact-form{
    border-radius: 20px;               /* локальні заокруглення форми */
  }

  /* карта всередині блоку */
  .contact-map{ margin-top: 24px; }
  .contact-map__inner{
    height: 322px;
    border-radius: 20px;               /* округлення тільки елемента карти */
    overflow: hidden;
  }
}
/* ===== Breadcrumbs — mobile (≤480px) ===== */
@media (max-width: 480px){
  
  /* перекриваємо десктопні відступи breadcrumbs */
  .contact-section nav.ct-bc,
  .contact-section .ct-bc {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 16px 0 0 !important;
  }
  
  /* типографіка */
  .ct-bc,
  .ct-bc a,
  .ct-bc__item,
  .ct-bc__sep{
    font: 500 16px/1.2 Montserrat, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #091311;
  }

  /* скидання стандартних відступів списків */
  .ct-bc ol,
  .ct-bc ul{
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* вертикальні відступи: 16px зверху, 40px до секції */
  .ct-bc{ margin: 16px 0 0; }
  .ct-bc + .contact-frame{ margin-top: 40px; }
}

/* ===== Contact: mobile typography for phones & labels ===== */
@media (max-width: 480px){

  /* 1) Перший номер після "Відділ закупівлі:" без лейбла */
  .contact-col--left .contact-h:first-of-type + .contact-p{
    font: 600 18px/100% Montserrat, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    color:#091311;
  }

  /* 2) Телефони в рядках з лейблами (Експорт / По Україні) */
  .contact-col a[href^="tel:"]{
    font: 600 18px/100% Montserrat, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    color:#091311;
    text-decoration: none;
  }

  /* 3) Лейбли та e-mail — тонкі 16/500 */
  .contact-p{
    font: 500 16px/20px Montserrat, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    color:#091311;
  }
  .contact-col a[href^="mailto:"]{
    font: 500 16px/20px Montserrat, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    color:#091311;
    text-decoration: underline; /* можна прибрати, якщо не треба */
  }
}
/* ===== Contact: mobile — bold phones & email ===== */
@media (max-width: 480px){

  /* усі tel:/mailto: посилання */
  .contact-col a[href^="tel:"],
  .contact-col a[href^="mailto:"]{
    font: 600 18px/100% Montserrat, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    color:#091311;
    text-decoration: none; /* якщо треба підкреслення — прибери цей рядок */
  }

  /* перший номер (закупівля) може бути звичайним текстом */
  .contact-col--left .contact-h:first-of-type + .contact-p{
    font: 600 18px/100% Montserrat, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    color:#091311;
  }

  /* базовий текст/лейбли залишаємо 16/500 */
  .contact-p{
    font: 500 16px/20px Montserrat, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    color:#091311;
  }
  .contact-col .contact-p:has(a[href^="mailto:"]) {
  margin: 16px 0 !important;
}
.smc-footer__socials--contact{
	display:none !important;
}
.contact-col.contact-col--mid {
margin-top:32px !important;
}
.contact-form .field {
	margin-bottom: 8px !important;
}
.contact-form .btn {
	margin-top:24px !important;
}
}

/* ==================== MODAL NOTIFICATIONS ==================== */
.smc-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.smc-modal.show {
  opacity: 1;
  visibility: visible;
}

.smc-modal__content {
  background: white;
  border-radius: 16px;
  padding: 24px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  transform: translateY(20px) scale(0.95);
  transition: transform 0.3s ease;
}

.smc-modal.show .smc-modal__content {
  transform: translateY(0) scale(1);
}

.smc-modal__icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.smc-modal__icon.success {
  background: #10b981;
}

.smc-modal__icon.error {
  background: #ef4444;
}

.smc-modal__icon.warning {
  background: #f59e0b;
}

.smc-modal__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: #1f2937;
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.smc-modal__message {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 20px 0;
  line-height: 1.5;
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.smc-modal__button {
  background: #0DAAA2;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.smc-modal__button:hover {
  background: #0891a4;
}

.smc-modal__button.error {
  background: #ef4444;
}

.smc-modal__button.error:hover {
  background: #dc2626;
}

/* Toast notifications */
.smc-toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  pointer-events: none;
}

.smc-toast {
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  padding: 16px 20px;
  margin-bottom: 12px;
  min-width: 300px;
  max-width: 400px;
  display: flex;
  align-items: center;
  transform: translateX(100%);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
  cursor: pointer;
  border-left: 4px solid #ddd;
}

.smc-toast.show {
  transform: translateX(0);
  opacity: 1;
}

.smc-toast.success {
  border-left-color: #27ae60;
  background: linear-gradient(135deg, #ffffff 0%, #f8fff9 100%);
}

.smc-toast.error {
  border-left-color: #e74c3c;
  background: linear-gradient(135deg, #ffffff 0%, #fff8f8 100%);
}

.smc-toast-icon {
  font-size: 18px;
  margin-right: 12px;
  flex-shrink: 0;
}

.smc-toast.success .smc-toast-icon {
  color: #27ae60;
}

.smc-toast.error .smc-toast-icon {
  color: #e74c3c;
}

.smc-toast-message {
  color: #333;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  flex: 1;
}

.smc-toast-close {
  margin-left: 12px;
  color: #999;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.smc-toast-close:hover {
  opacity: 1;
}

/* Mobile adaptations */
@media (max-width: 767px) {
  .smc-toast-container {
    top: 10px;
    right: 10px;
    left: 10px;
  }
  
  .smc-toast {
    min-width: auto;
    max-width: none;
  }
}