/* ============================================================
   Страница «Оповещения о пропажах рядом» (/alerts/)
   Двухколоночный первый экран: слева фото с заголовком,
   справа карточка подписки. Шапка и подвал — общие, из app.js.
   ============================================================ */

.alerts-page{
  padding:28px 0 84px;
  background:
    radial-gradient(900px 430px at 6% -8%, #FFF1E8 0%, rgba(255,241,232,0) 62%),
    radial-gradient(760px 380px at 100% 0%, #FDEFE9 0%, rgba(253,239,233,0) 58%),
    var(--bg);
}

.alerts-grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:22px;
  align-items:stretch;
}

/* ---------- Левая колонка: фото + текст ---------- */

.alerts-visual{
  display:flex;
  flex-direction:column;
  min-height:648px;
  border-radius:26px;
  overflow:hidden;
  background:linear-gradient(180deg,#FFF7F1 0%,#FFFCF9 100%);
  box-shadow:0 30px 70px -42px rgba(43,24,19,.55);
}
/* Фотография больше не служит фоном под текстом: никакой осветляющей
   вуали, животные остаются живыми и контрастными. Текст живёт на
   кремовой подложке сверху, снимок занимает всё оставшееся место. */
.alerts-visual__photo{
  display:block;
  position:static;
  order:2;
  width:100%;
  flex:1 1 auto;
  min-height:270px;
  object-fit:cover;
  object-position: 58% 48%;
}
.alerts-copy{
  position:relative;
  z-index:1;
  display:block;
  order:1;
  padding:38px 40px 26px;
}

.alerts-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:7px;
  align-self:flex-start;
  padding:6px 12px 6px 9px;
  border:1px solid var(--brand-line);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:var(--brand-dark);
  font:800 10.5px/1 var(--ff);
  letter-spacing:.09em;
  text-transform:uppercase;
}
.alerts-eyebrow .ico{width:14px;height:14px}

.alerts-title{
  margin:18px 0 0;
  font-family:var(--ff-display);
  font-size:clamp(32px,3.2vw,42px);
  font-weight:800;
  line-height:1.04;
  letter-spacing:-.032em;
  color:var(--ink);
}
.alerts-title mark{
  background:none;
  color:var(--brand);
  padding:0;
}
.alerts-lead{
  margin:16px 0 0;
  max-width:480px;
  font-size:15.5px;
  line-height:1.55;
  color:var(--ink-2);
}

.alerts-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:20px;
}
.alerts-meta span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 11px;
  border:1px solid var(--brand-line);
  border-radius:999px;
  background:rgba(255,255,255,.82);
  color:var(--ink-2);
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
}
.alerts-meta .ico{width:14px;height:14px;color:var(--brand)}

/* ---------- Правая колонка: карточка подписки ---------- */

.alerts-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:30px 28px 24px;
  border:1px solid var(--line);
  border-radius:26px;
  background:#fff;
  box-shadow:0 30px 70px -42px rgba(43,24,19,.55);
}
.alerts-card__title{
  margin:0;
  font-family:var(--ff-display);
  font-size:clamp(23px,2vw,27px);
  font-weight:800;
  line-height:1.14;
  letter-spacing:-.028em;
  color:var(--ink);
}
.alerts-card__lead{
  margin:8px 0 0;
  font-size:13.5px;
  line-height:1.5;
  color:var(--muted);
  max-width:390px;
}

.alerts-form{margin-top:18px}

.alerts-field-group{display:block;margin-top:13px}
.alerts-field-group:first-child{margin-top:0}
.alerts-field-group > label{
  display:block;
  margin-bottom:6px;
  font-size:12px;
  font-weight:700;
  color:var(--muted);
}

.alerts-field{
  position:relative;
  display:flex;
  align-items:center;
}
.alerts-field > .ico{
  position:absolute;
  left:14px;
  width:18px;
  height:18px;
  color:var(--muted);
  pointer-events:none;
}
.alerts-field input,
.alerts-field select{
  width:100%;
  height:48px;
  padding:0 14px 0 42px;
  border:1px solid var(--line-2);
  border-radius:12px;
  background:#FFFDFB;
  color:var(--ink);
  font:inherit;
  font-size:14.5px;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.alerts-field input::placeholder{color:#B5A39A}
.alerts-field input:hover,
.alerts-field select:hover{border-color:#D9C4B8}
.alerts-field input:focus,
.alerts-field select:focus{
  outline:none;
  border-color:var(--brand);
  background:#fff;
  box-shadow:0 0 0 4px rgba(227,18,76,.1);
}
.alerts-field--select select{
  appearance:none;
  -webkit-appearance:none;
  padding:0 40px 0 14px;
  cursor:pointer;
}
.alerts-field .alerts-field__chev{
  left:auto;
  right:13px;
  width:16px;
  height:16px;
}

.alerts-geo{
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:34px;
  margin-top:8px;
  padding:0 12px;
  border:1px solid var(--brand-line);
  border-radius:9px;
  background:var(--brand-soft);
  color:var(--brand-dark);
  font:700 12.5px/1 var(--ff);
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.alerts-geo:hover{background:#FBE4DA;border-color:#EFBBA9}
.alerts-geo .ico{width:15px;height:15px}

.alerts-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.alerts-consent{
  display:flex;
  gap:9px;
  align-items:flex-start;
  margin:16px 0 0;
  font-size:12.5px;
  line-height:1.45;
  color:var(--muted);
  cursor:pointer;
}
.alerts-consent input{
  width:16px;
  height:16px;
  margin:2px 0 0;
  flex:0 0 16px;
  accent-color:var(--brand);
  cursor:pointer;
}

.alerts-submit{
  width:100%;
  height:52px;
  margin-top:15px;
  border:0;
  border-radius:13px;
  background:linear-gradient(135deg,#DA5B41 0%,#E3124C 55%,#A8321F 100%);
  color:#fff;
  font:800 15px/1 var(--ff);
  letter-spacing:-.01em;
  cursor:pointer;
  box-shadow:0 16px 30px -16px rgba(227,18,76,.75),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
.alerts-submit:hover{transform:translateY(-1px);filter:saturate(1.05);box-shadow:0 20px 34px -16px rgba(227,18,76,.8),inset 0 1px 0 rgba(255,255,255,.24)}
.alerts-submit:active{transform:translateY(0)}
.alerts-submit:disabled{opacity:.6;cursor:default;transform:none;filter:none}

.alerts-status{
  margin:10px 0 0;
  min-height:18px;
  font-size:13px;
  line-height:1.4;
  color:var(--muted);
}
.alerts-status.is-ok{color:#2E8B57;font-weight:600}
.alerts-status.is-err{color:var(--brand);font-weight:600}

/* ---------- Блок с кодом после отправки ---------- */

.alerts-result{
  display:none;
  margin-top:16px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#FFF9F4;
}
.alerts-result b{font-size:15px;color:var(--ink)}
.alerts-result p{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.alerts-code{
  margin:12px 0 10px;
  padding:12px 14px;
  border:1px dashed var(--brand-line);
  border-radius:12px;
  background:#fff;
  font:800 24px/1.2 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.1em;
  color:var(--ink);
  text-align:center;
}
.alerts-result__btn{
  display:block;
  padding:12px;
  border-radius:12px;
  background:var(--ink);
  color:#fff;
  font-size:13.5px;
  font-weight:700;
  text-align:center;
  text-decoration:none;
}
.alerts-result__btn:hover{background:#3A241D}
.alerts-note{margin-top:10px!important;font-size:12px!important}

/* ---------- Строка «Получать и в приложении» ---------- */

.alerts-applink{
  display:flex;
  align-items:center;
  gap:11px;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--line);
  text-decoration:none;
  color:var(--ink);
}
.alerts-applink__ico{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:11px;
  background:var(--brand-soft);
  color:var(--brand);
}
.alerts-applink__ico .ico{width:18px;height:18px}
.alerts-applink__text{display:block;min-width:0}
.alerts-applink__text b{display:block;font-size:13.5px;font-weight:700;color:var(--ink)}
.alerts-applink__text small{display:block;margin-top:3px;font-size:11.5px;line-height:1.35;color:var(--muted)}
.alerts-applink__chev{margin-left:auto;width:16px;height:16px;color:var(--muted);transition:transform .15s ease,color .15s ease}
.alerts-applink:hover .alerts-applink__chev{transform:translateX(3px);color:var(--brand)}

/* ---------- Планшет и телефон ---------- */

@media (max-width:980px){
  .alerts-page{padding:14px 0 56px}
  .alerts-grid{grid-template-columns:1fr;gap:16px}

  .alerts-visual{min-height:0;border-radius:22px}
  .alerts-copy{padding:24px 22px 20px}
  .alerts-visual__photo{
    flex:0 0 240px;
    height:240px;
    min-height:0;
    object-position: 58% 48%;
  }
  .alerts-title{font-size:32px}
  .alerts-lead{max-width:none;margin-top:12px;font-size:14.5px}
  .alerts-meta{margin-top:16px;gap:7px}
  .alerts-meta span{font-size:11.5px;padding:6px 10px}

  .alerts-card{padding:22px 18px 20px;border-radius:22px}
  .alerts-card__lead{max-width:none}
}

@media (max-width:560px){
  .alerts-title{font-size:29px}
  .alerts-row{grid-template-columns:1fr;gap:0}
  .alerts-row .alerts-field-group{margin-top:13px}
  .alerts-visual__photo{flex-basis:200px;height:200px}
  .alerts-card{padding:20px 16px 18px}
  .alerts-code{font-size:21px}
}

@media (prefers-reduced-motion:reduce){
  .alerts-submit,.alerts-geo,.alerts-applink__chev,.alerts-field input,.alerts-field select{transition:none}
}

/* Мобильная тёмная тема сайта красит ВСЕ select внутри #main в чёрный
   (`html body #main select` в app-install.css). На светлой карточке это
   выглядело провалом. Возвращаем поля к светлому виду — селектор выше по
   специфичности, поэтому !important обязателен. */
html body #main.alerts-page .alerts-field select{
  background:#FFFDFB!important;
  color:var(--ink)!important;
  border:1px solid var(--line-2)!important;
}
html body #main.alerts-page .alerts-field select:focus{
  border-color:var(--brand)!important;
  box-shadow:0 0 0 4px rgba(227,18,76,.1)!important;
}
html body #main.alerts-page .alerts-field select option{
  background:#fff;
  color:var(--ink);
}