/* Страница оплаты наградных документов.
   Опирается на токены и компоненты из styles.css. */

/* ------------------------------------------------------------- шапка --- */

.pay-hero{padding:56px 0 64px;}

/* Текст и картинка в две колонки. Картинка декоративная, поэтому на узком
   экране уходит вниз, а не сжимает текст. */
.pay-hero-grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
}
.pay-hero-text{min-width:0;}
.pay-hero-media img{
  width:100%;height:auto;display:block;
  border-radius:var(--radius-card);
  box-shadow:0 8px 28px rgba(42,37,33,.12);
}
.pay-hero h1{
  font-size:clamp(28px,3.6vw,44px);
  line-height:1.12;letter-spacing:-0.02em;font-weight:800;
  max-width:18ch;margin-bottom:18px;
}
.pay-lead{
  font-size:16.5px;line-height:1.65;color:var(--muted);
  max-width:56ch;margin-bottom:32px;
}

/* Цена — главное, что человек ищет на этой странице, поэтому она набрана
   крупно и стоит до всех объяснений, а не после них. */
.pay-price-card{
  display:inline-flex;align-items:center;gap:22px;
  background:var(--surface);border-radius:var(--radius-card);
  padding:20px 28px;box-shadow:0 1px 2px rgba(42,37,33,.06);
}
.pay-price{display:flex;align-items:baseline;gap:4px;}
.pay-price b{font-size:44px;font-weight:800;letter-spacing:-0.03em;font-variant-numeric:tabular-nums;}
.pay-price span{font-size:24px;font-weight:700;color:var(--muted);}
.pay-price-what p{font-size:14px;color:var(--muted);line-height:1.5;}
.pay-price-what p:first-child{font-weight:700;color:var(--ink);font-size:15px;margin-bottom:3px;}
.pay-price-list{max-width:42ch;}

/* ---------------------------------------------------------- две колонки --- */

.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}

/* min-width:0 обязателен. Элементы сетки по умолчанию не сжимаются уже
   своего содержимого, и таблица с min-width раздвигает колонку, а вместе
   с ней и всю страницу — на телефоне появляется прокрутка вбок. */
.pay-col{min-width:0;}
.pay-col h2{font-size:22px;font-weight:800;letter-spacing:-0.01em;margin-bottom:14px;}
.pay-col h2 + .pay-note{margin-top:-4px;}
.pay-col h2:not(:first-child){margin-top:40px;}
.pay-col p{font-size:15.5px;line-height:1.65;margin-bottom:14px;}
.pay-col a{color:var(--accent);font-weight:600;text-decoration:underline;}

.pay-note{font-size:14px;color:var(--muted);line-height:1.6;}

/* ------------------------------------------------------------ таблица --- */

.pay-table-wrap{overflow-x:auto;margin:18px 0 16px;-webkit-overflow-scrolling:touch;}
.pay-table{border-collapse:collapse;width:100%;min-width:380px;font-size:15px;}
.pay-table th,.pay-table td{
  border-bottom:1px solid var(--line);
  padding:13px 14px;text-align:left;vertical-align:top;line-height:1.5;
}
.pay-table thead th{
  font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);border-bottom-width:1.5px;
}
.pay-table tbody tr:last-child td{border-bottom:none;}
.pay-table td:first-child{white-space:nowrap;color:var(--muted);font-variant-numeric:tabular-nums;}

/* ------------------------------------------------------------- форма --- */

/* Карточка вокруг формы ЮKassa. Саму форму не трогаем — её разметку
   и поведение задаёт их скрипт; мы правим только обрамление и поля ввода,
   чтобы виджет не выглядел чужеродной вставкой. */
.pay-form{
  background:var(--surface);border-radius:var(--radius-card);
  padding:26px 28px;margin:18px 0 24px;
  box-shadow:0 1px 2px rgba(42,37,33,.06);
}

.pay-form .ym-block-title{
  font-size:13px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:12px;
}

.pay-form .ym-customer-info .ym-input{
  display:block;width:100%;height:auto;margin-bottom:12px;
  font-family:var(--font);font-size:16px;   /* 16px: меньший размер заставляет Safari увеличивать страницу при вводе */
  min-height:50px;padding:13px 15px;
  border:1.5px solid var(--line);border-radius:var(--radius-btn);
  background:var(--bg);color:var(--ink);
}
.pay-form .ym-customer-info .ym-input:focus{
  outline:none;border-color:var(--accent);background:var(--surface);
}
.pay-form .ym-customer-info .ym-input::placeholder{color:var(--muted-softer);}

.pay-form .ym-payment-btn-block{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding-top:18px;margin-top:6px;border-top:1px solid var(--line);
  /* Виджет задаёт этой строке height:32px. Кнопку мы подняли до 50,
     и она вылезала за нижний край карточки: контейнер не растёт,
     потому что высота фиксированная. Возвращаем высоту по содержимому. */
  height:auto;min-height:0;
  gap:14px;row-gap:16px;
}

/* Зелёный цвет кнопки — родной для ЮKassa, его не трогаем: узнаваемый
   платёжный элемент вызывает больше доверия, чем перекрашенный под сайт.
   Правим только размер: у виджета кнопка 32 пикселя высотой, для касания
   пальцем нужно не меньше 44. Класс ym-btn-pay сохраняем — по нему
   скрипт находит кнопку. */
.pay-form .ym-btn-pay{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;height:auto;padding:12px 28px;width:auto;
  border-radius:var(--radius-btn);cursor:pointer;
  font-family:var(--font);font-size:15px;font-weight:600;
  transition:transform 140ms var(--ease-out), opacity 140ms var(--ease-out);
  /* У виджета справа от кнопки свои 20px. Расстояние до логотипа
     задаёт gap строки, а лишний отступ выталкивал логотип на вторую. */
  margin-right:0;
}
.pay-form .ym-btn-pay:active{transform:scale(.97);}
@media (hover:hover) and (pointer:fine){
  .pay-form .ym-btn-pay:hover{opacity:.92;}
}
.pay-form .ym-price-output{font-variant-numeric:tabular-nums;}

/* Логотип всегда справа: и когда помещается в одну строку с кнопкой,
   и когда переносится на свою — в узкой колонке второй формы поле суммы
   с кнопкой занимают строку целиком. */
.pay-form .ym-logo{
  /* У картинки атрибуты width=230 height=40, а в стилях виджета — min-height,
     из-за которого height не срабатывает и логотип растягивается.
     Поэтому задаём ширину, а высоту отпускаем. */
  width:110px;height:auto;min-height:0;
  opacity:.75;flex:0 0 auto;
  /* margin сбрасываем целиком: у виджета справа от логотипа свои 20px,
     из-за них строка не помещалась и логотип срывался на вторую. */
  margin:0 0 0 auto;
}

/* Служебные блоки виджета: их скрывает его же класс ym-display-none,
   но подстраховываемся, чтобы поле суммы и список товаров не всплыли
   при задержке загрузки скрипта. */
.pay-form .ym-display-none{display:none;}

.pay-after{
  border:1.5px solid var(--line);border-radius:var(--radius-card);
  padding:22px 24px;
}
.pay-after h3{font-size:16px;font-weight:700;margin-bottom:10px;}
.pay-after p{font-size:14.5px;line-height:1.6;margin-bottom:10px;}
.pay-eta{color:var(--muted);margin-bottom:0 !important;}

/* --------------------------------------------------------- подвал блока --- */

.pay-help{
  display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:start;
}
.pay-help h2{font-size:22px;font-weight:800;margin-bottom:12px;}
.pay-help h3{font-size:15px;font-weight:700;margin-bottom:10px;}
.pay-help p{font-size:15px;line-height:1.65;margin-bottom:10px;}
.pay-help a{color:var(--accent);font-weight:600;text-decoration:underline;}
.pay-legal{
  background:var(--surface);border-radius:var(--radius-card);
  padding:24px 26px;
}
.pay-legal p{font-size:14px;color:var(--muted);}

/* Текущий раздел в меню отмечен цветом и весом, а не только цветом:
   по одному оттенку его не различить при слабом зрении. */
.nav-links a.is-current{color:var(--ink);font-weight:700;}

@media (max-width:900px){
  .pay-grid{grid-template-columns:1fr;gap:44px;}
  .pay-help{grid-template-columns:1fr;gap:32px;}
}

@media (max-width:900px){
  .pay-hero-grid{grid-template-columns:1fr;gap:36px;}
  /* Картинку на узком экране показываем после текста: сначала суть,
     потом украшение. */
  .pay-hero-media{order:2;}
}

@media (max-width:640px){
  .pay-hero{padding:36px 0 44px;}
  .pay-price-card{width:100%;gap:18px;padding:18px 20px;}
  .pay-price b{font-size:36px;}
  .pay-form{padding:22px 20px;}
  .pay-col h2:not(:first-child){margin-top:32px;}
}

/* ------------------------------------------------- другие способы оплаты --- */

.pay-methods{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:start;}
.pay-method{min-width:0;}
.pay-method h3{font-size:19px;font-weight:800;letter-spacing:-0.01em;margin-bottom:10px;}
.pay-method .pay-note{margin-bottom:12px;}
.pay-method .pay-form{margin-top:0;}

/* Поле суммы во второй форме видимое, в отличие от первой. Приводим его
   к тому же виду, что и остальные поля. */
.pay-form .ym-sum-input{
  height:auto;min-height:50px;width:150px;
  font-family:var(--font);font-size:16px;font-weight:600;
  padding:13px 15px;border:1.5px solid var(--line);border-radius:var(--radius-btn);
  background:var(--bg);color:var(--ink);
}
.pay-form .ym-sum-input:focus{outline:none;border-color:var(--accent);background:var(--surface);}

.pay-form .ym-textarea{
  display:block;width:100%;min-height:88px;resize:vertical;
  font-family:var(--font);font-size:16px;
  padding:13px 15px;border:1.5px solid var(--line);border-radius:var(--radius-btn);
  background:var(--bg);color:var(--ink);
}
.pay-form .ym-textarea:focus{outline:none;border-color:var(--accent);background:var(--surface);}
.pay-form .ym-textarea::placeholder{color:var(--muted-softer);}

/* QR печатают на бумаге и наводят камеру с расстояния — мелкий не считается.
   Белая подложка обязательна: на цветном фоне часть сканеров сбоит. */
.pay-qr{
  background:#fff;border-radius:var(--radius-card);
  padding:20px;display:inline-block;
  box-shadow:0 1px 2px rgba(42,37,33,.06);
}
.pay-qr img{
  /* Ширина в пикселях, а не в процентах: контейнер сжимается по содержимому,
     и процент от него до загрузки картинки даёт нулевую ширину. */
  width:260px;max-width:100%;height:auto;display:block;
}

@media (max-width:900px){
  .pay-methods{grid-template-columns:1fr;gap:40px;}
}

@media (max-width:640px){
  .pay-form .ym-sum-input{width:100%;}
  .pay-form .ym-payment-btn-block{gap:12px;}
}