/* ═══════════════════════════════════════════════════════════════════════
   Кнопка в каталозі
   ═══════════════════════════════════════════════════════════════════════ */
.wcnm-catalog-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  background: #e5e7eb;
  color: #374151;
  border: none;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: background .15s;
}
.wcnm-catalog-btn:hover { background: #d1d5db; }

/* ═══════════════════════════════════════════════════════════════════════
   Спільні стилі поля email + кнопки відправки
   (використовуються і в inline-формі на сторінці товару, і в модалці)
   ═══════════════════════════════════════════════════════════════════════ */
.wcnm-form-wrap { margin: 14px 0; max-width: 380px; }
.wcnm-form-wrap .wcnm-desc { font-size: 13px; color: #6b7280; margin: 0 0 10px; }
.wcnm-form { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }

.wcnm-email {
  flex: 1;
  min-width: 180px;
  height: 46px;
  box-sizing: border-box;
  border: 1.5px solid #e2e4e9;
  border-radius: 10px;
  padding: 0 14px 0 40px;
  font-size: 15px;
  color: #1a1a1a;
  background: #f9fafb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 6l-10 7L2 6'/%3E%3Cpath d='M2 6h20v12H2z'/%3E%3C/svg%3E") no-repeat 12px center / 18px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.wcnm-email::placeholder { color: #9ca3af; }
/* FIX: прибираємо товстий рідний outline браузера (та помаранчеву
   рамку автозаповнення в Chrome на Android) і замінюємо на власне,
   акуратне підсвічування фокусу. */
.wcnm-email:focus {
  outline: none;
  border-color: #f26f21;
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(242, 111, 33, .15);
}
.wcnm-email.wcnm-invalid { border-color: #dc2626; }
.wcnm-email:disabled { opacity: .6; background-color: #f3f4f6; }
/* Chrome/Android часто підсвічує автозаповнені поля жовтим —
   вирівнюємо під наш стиль, щоб не "вистрибувало" з дизайну. */
.wcnm-email:-webkit-autofill {
  -webkit-text-fill-color: #1a1a1a;
  box-shadow: 0 0 0 1000px #fff inset, 0 0 0 3px rgba(242, 111, 33, .15);
  -webkit-transition: background-color 5000s ease-in-out 0s;
}

.wcnm-submit {
  height: 46px;
  padding: 0 20px;
  border: none;
  border-radius: 10px;
  background: #f26f21;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, transform .1s ease;
}
.wcnm-submit:hover:not(:disabled) { background: #d95f16; }
.wcnm-submit:active:not(:disabled) { transform: scale(.98); }
.wcnm-submit:disabled { opacity: .6; cursor: default; }
.wcnm-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(242, 111, 33, .35);
}

.wcnm-msg { margin-top: 10px; font-size: 13px; font-weight: 600; }
.wcnm-msg.wcnm-success { color: #16a34a; }
.wcnm-msg.wcnm-error { color: #dc2626; }

/* ═══════════════════════════════════════════════════════════════════════
   Модальне вікно (каталог)
   ═══════════════════════════════════════════════════════════════════════ */
.wcnm-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99990;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 15, 20, .6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.wcnm-modal-overlay.wcnm-open { display: flex; animation: wcnmFadeIn .15s ease; }
@keyframes wcnmFadeIn { from { opacity: 0; } to { opacity: 1; } }

.wcnm-modal {
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: 32px 28px 28px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  animation: wcnmPopIn .2s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes wcnmPopIn {
  from { opacity: 0; transform: scale(.94) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.wcnm-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  border: none;
  border-radius: 50%;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.wcnm-modal-close:hover { background: #e5e7eb; }

.wcnm-modal-icon { font-size: 38px; text-align: center; margin-bottom: 12px; }
.wcnm-modal-title { font-size: 18px; font-weight: 800; text-align: center; margin-bottom: 6px; letter-spacing: -.01em; }
.wcnm-modal-desc { font-size: 13.5px; color: #6b7280; text-align: center; line-height: 1.55; margin-bottom: 22px; }

.wcnm-modal .wcnm-form { flex-direction: column; }
.wcnm-modal .wcnm-email { width: 100%; }
.wcnm-modal .wcnm-submit { width: 100%; }
.wcnm-modal .wcnm-msg { text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════
   АДАПТИВНІСТЬ: телефон → планшет → ноутбук/десктоп → великий екран/ТБ
   Мобільний стиль вище — базовий (mobile-first), нижче тільки те, що
   відрізняється на більших екранах.
   ═══════════════════════════════════════════════════════════════════════ */

/* Дуже вузькі телефони (менше 360px) — трохи стискаємо відступи */
@media (max-width: 359px) {
  .wcnm-modal { padding: 24px 18px 20px; border-radius: 16px; }
  .wcnm-modal-icon { font-size: 32px; }
  .wcnm-modal-title { font-size: 16px; }
}

/* Планшет і ширше (426px+) — форма в модалці стає рядком, поле + кнопка поруч */
@media (min-width: 426px) {
  .wcnm-modal .wcnm-form { flex-direction: row; }
  .wcnm-modal .wcnm-submit { width: auto; }
}

/* Планшет (600px+) — трохи просторіша модалка */
@media (min-width: 600px) {
  .wcnm-modal { max-width: 400px; padding: 36px 32px 32px; }
  .wcnm-modal-icon { font-size: 42px; }
  .wcnm-modal-title { font-size: 19px; }
  .wcnm-modal-desc { font-size: 14px; }
}

/* Ноутбук/десктоп (1024px+) */
@media (min-width: 1024px) {
  .wcnm-modal { max-width: 420px; padding: 40px 36px 34px; }
  .wcnm-email, .wcnm-submit { height: 48px; }
  .wcnm-catalog-btn:hover { transform: translateY(-1px); }
}

/* Великий екран / телевізор, підключений як монітор (1600px+) —
   масштабуємо модалку помітно більше, інакше на екрані 55"+ вона
   виглядає загубленою маленькою плямою по центру. */
@media (min-width: 1600px) {
  .wcnm-modal { max-width: 480px; padding: 48px 44px 40px; border-radius: 24px; }
  .wcnm-modal-icon { font-size: 52px; margin-bottom: 16px; }
  .wcnm-modal-title { font-size: 24px; }
  .wcnm-modal-desc { font-size: 16px; margin-bottom: 28px; }
  .wcnm-email, .wcnm-submit { height: 54px; font-size: 16px; }
  .wcnm-modal-close { width: 40px; height: 40px; font-size: 18px; }
}

/* Пристрої без точного вказівника (сенсорні екрани) — прибираємо
   hover-ефекти, щоб кнопка не "залипала" у стані ховеру після тапу. */
@media (hover: none) {
  .wcnm-catalog-btn:hover,
  .wcnm-submit:hover:not(:disabled) { background: inherit; }
}