/* ==========================================================================
   Файл: znk-popup.css
   Опис: Стилі для pop‑up та inline‑форм
   ========================================================================== */

/* ----------------------------------------
   Основні змінні
   ---------------------------------------- */
:root {
  --znk-overlay-bg: rgba(0, 0, 0, 0.6);
  --znk-modal-bg: #ffffff;
  --znk-modal-border: #dddddd;
  --znk-modal-width-desktop: 600px;
  --znk-modal-width-mobile: 90%;
  --znk-modal-max-height: 80vh;
  --znk-close-color: #ff0000;
  --znk-btn-bg: #ff0000;
  --znk-btn-hover-bg: #cc0000;
  --znk-btn-text-color: #ffffff;
  --znk-title-color: #222222;
  --znk-text-color: #444444;
  --znk-success-bg: #e0ffe0;
  --znk-success-border: #9f9;
  --znk-gap: 12px;
  --znk-icon-size: 24px;
  --znk-icon-gap: 8px;
  --znk-radius: 4px;
  --znk-font-family: 'Arial', sans-serif;
  --znk-font-size-base: 14px;
  --znk-font-size-large: 16px;
  --znk-z-index-overlay: 9998;
  --znk-z-index-modal: 9999;
}

/* ----------------------------------------
   1) Overlay (затемнення)
   ---------------------------------------- */
.znk-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: var(--znk-overlay-bg);
  z-index: var(--znk-z-index-overlay);
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* ----------------------------------------
   2) Modal Window (pop‑up)
   ---------------------------------------- */
.znk-modal {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: var(--znk-modal-width-desktop);
  max-height: var(--znk-modal-max-height);
  background-color: var(--znk-modal-bg);
  border: 1px solid var(--znk-modal-border);
  border-radius: var(--znk-radius);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  z-index: var(--znk-z-index-modal);
  padding: var(--znk-gap);
  overflow-y: auto;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Коли потрібно показати (JS додає .active) */
.znk-overlay.active {
  display: block;
  opacity: 1;
}
.znk-modal.active {
  display: block;
  opacity: 1;
}

/* ----------------------------------------
   3) Кнопка «×» (закрити)
   ---------------------------------------- */
.znk-close-btn {
  position: absolute;
  top: 12px; right: 12px;
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--znk-close-color);
  cursor: pointer;
}

/* ----------------------------------------
   4) «Липуча» кнопка (Sticky button)
   ---------------------------------------- */
.znk-open-btn {
  position: fixed;
  bottom: 20px; right: 20px;
  background-color: var(--znk-btn-bg);
  color: var(--znk-btn-text-color);
  padding: 12px 20px;
  border: none;
  border-radius: var(--znk-radius);
  font-size: var(--znk-font-size-large);
  font-family: var(--znk-font-family);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: background-color 0.2s ease, transform 0.1s ease;
  z-index: 10000;
}
.znk-open-btn:hover {
  background-color: var(--znk-btn-hover-bg);
  transform: translateY(-1px);
}

/* ----------------------------------------
   5) HEADER pop‑up (логотип, заголовок, контакти)
   ---------------------------------------- */
.znk-header {
  text-align: center;
  margin-bottom: var(--znk-gap);
}
.znk-logo {
  margin-bottom: var(--znk-gap);
  text-align: center;
}
.znk-logo img {
  max-width: 120px;
  height: auto;
  display: inline-block;
}
.znk-title {
  margin: 0;
  font-size: 22px;
  color: var(--znk-title-color);
  font-family: var(--znk-font-family);
}
.znk-subtitle {
  margin: 4px 0 var(--znk-gap);
  font-size: var(--znk-font-size-base);
  color: var(--znk-text-color);
  font-family: var(--znk-font-family);
}

/* Телефонний список */
.znk-phone-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--znk-gap);
  margin-bottom: var(--znk-gap);
}
.znk-phone-item {
  color: #050;
  text-decoration: none;
  font-size: var(--znk-font-size-base);
  font-family: var(--znk-font-family);
}
.znk-phone-item:hover {
  color: #070;
}

/* Месенджери */
.znk-messenger-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--znk-gap);
  margin-bottom: var(--znk-gap);
}
.znk-messenger-item {
  display: inline-flex;
  align-items: center;
  background-color: #ebebeb;
  border: 1px solid #e0e0e0;
  border-radius: var(--znk-radius);
  padding: 6px 12px;
  text-decoration: none;
  color: var(--znk-text-color);
  font-size: var(--znk-font-size-base);
  font-family: var(--znk-font-family);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}
.znk-messenger-item:hover {
  background-color: #cacaca;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.znk-messenger-icon {
  width: var(--znk-icon-size);
  height: var(--znk-icon-size);
  margin-right: var(--znk-icon-gap);
}

/* ----------------------------------------
   6) BODY pop‑up: текст + форма
   ---------------------------------------- */
.znk-body {
  text-align: center;
  margin-bottom: var(--znk-gap);
}
.znk-text {
  margin: 0 0 var(--znk-gap);
  color: var(--znk-text-color);
  font-size: var(--znk-font-size-base);
  font-family: var(--znk-font-family);
}

/* ФОРМА pop‑up */
.znk-form {
  display: flex;
  flex-wrap: wrap;      /* дві колонки */
  gap: var(--znk-gap);
  margin-bottom: var(--znk-gap);
}
.znk-form-label {
  font-size: var(--znk-font-size-base);
  color: var(--znk-text-color);
  font-family: var(--znk-font-family);
  width: 48%;           /* приблизно 50% ширини */
  box-sizing: border-box;
}
.znk-form-select,
.znk-form-input,
.znk-form-textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #cccccc;
  border-radius: var(--znk-radius);
  font-size: var(--znk-font-size-base);
  font-family: var(--znk-font-family);
  box-sizing: border-box;
  margin-top: 4px;
}
.znk-form-textarea {
  resize: vertical;
}
.znk-form-submit {
  background-color: var(--znk-btn-bg);
  color: var(--znk-btn-text-color);
  border: none;
  border-radius: var(--znk-radius);
  padding: 10px;
  font-size: var(--znk-font-size-large);
  font-family: var(--znk-font-family);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  width: 100%;
}
.znk-form-submit:hover {
  background-color: var(--znk-btn-hover-bg);
  transform: translateY(-1px);
}

/* Повідомлення успіху */
.znk-success {
  display: none;
  background-color: var(--znk-success-bg);
  border: 1px solid var(--znk-success-border);
  border-radius: var(--znk-radius);
  padding: var(--znk-gap);
  text-align: center;
  margin-top: var(--znk-gap);
}
.znk-success-text {
  margin: 0 var(--znk-gap) var(--znk-gap);
  color: #084f08;
  font-family: var(--znk-font-family);
}
.znk-success-close {
  background-color: var(--znk-btn-bg);
  color: var(--znk-btn-text-color);
  border: none;
  border-radius: var(--znk-radius);
  padding: 8px 16px;
  font-size: var(--znk-font-size-base);
  cursor: pointer;
  margin-top: 8px;
  transition: background-color 0.2s ease, transform 0.1s ease;
}
.znk-success-close:hover {
  background-color: var(--znk-btn-hover-bg);
  transform: translateY(-1px);
}

/* ----------------------------------------
   7) INLINE‑ФОРМА
   ---------------------------------------- */
.znk-inline-wrapper {
  max-width: 600px;
  margin: 20px auto;
  padding: var(--znk-gap);
  background-color: var(--znk-modal-bg);
  border: 1px solid var(--znk-modal-border);
  border-radius: var(--znk-radius);
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  box-sizing: border-box;
}
.znk-inline-title {
  margin-top: 0;
  margin-bottom: var(--znk-gap);
  color: var(--znk-title-color);
  font-size: 24px;
  text-align: center;
  font-family: var(--znk-font-family);
}
.znk-inline-wrapper .znk-form {
  display: flex;
  flex-wrap: wrap;      /* дві колонки */
  gap: var(--znk-gap);
}
.znk-inline-wrapper .znk-form-label {
  width: 48%;
  font-size: var(--znk-font-size-base);
  color: var(--znk-text-color);
  font-family: var(--znk-font-family);
  box-sizing: border-box;
}
.znk-inline-wrapper .znk-form-select,
.znk-inline-wrapper .znk-form-input,
.znk-inline-wrapper .znk-form-textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #cccccc;
  border-radius: var(--znk-radius);
  font-size: var(--znk-font-size-base);
  font-family: var(--znk-font-family);
  box-sizing: border-box;
  margin-top: 4px;
}
.znk-inline-wrapper .znk-form-textarea {
  resize: vertical;
}
.znk-inline-wrapper .znk-form-submit {
  background-color: var(--znk-btn-bg);
  color: var(--znk-btn-text-color);
  border: none;
  border-radius: var(--znk-radius);
  padding: 10px;
  font-size: var(--znk-font-size-large);
  font-family: var(--znk-font-family);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  width: 100%;
}
.znk-inline-wrapper .znk-form-submit:hover {
  background-color: var(--znk-btn-hover-bg);
  transform: translateY(-1px);
}

/* ----------------------------------------
   АДАПТИВ: ≤767px та ≤480px
   ---------------------------------------- */
@media only screen and (max-width: 767px) {
  .znk-modal {
    width: var(--znk-modal-width-mobile);
    padding: var(--znk-gap);
  }
  .znk-phone-list,
  .znk-messenger-list,
  .znk-form {
    flex-direction: column;
    align-items: center;
  }
  .znk-phone-item,
  .znk-messenger-item {
    width: 100%;
    justify-content: center;
  }
  .znk-messenger-item {
    padding: 8px;
  }
  .znk-form-label {
    width: 100%;
  }
}

@media only screen and (max-width: 480px) {
  .znk-title {
    font-size: 20px;
  }
  .znk-subtitle,
  .znk-form-label,
  .znk-phone-item,
  .znk-messenger-label {
    font-size: 13px;
  }
  .znk-form-submit,
  .znk-close-btn {
    font-size: 15px;
    padding: 10px;
  }
}