/* ============================================================
   Выход из кооператива (30.09.2026): окна, плашка, блок вышедшего.
   Логика - vyhod.js. Подключается и в кабинет (index.html), и на витрину
   (shop.html): переменные у страниц разные, поэтому у каждого цвета запасное
   значение второй палитры - var(--кабинет, var(--витрина, число)).
   ============================================================ */

/* ── Места в кабинете ─────────────────────────────────────── */
.vy-slot[hidden] { display:none; }

/* Кнопка выхода - НЕБРОСКАЯ ссылка, а не кнопка рядом с «Пополнить»: выход - редкое
   и серьёзное решение, звать к нему глазами незачем. Зона нажатия всё равно 44 px. */
.vy-exit { margin:0 0 24px; }
.vy-exit-link {
  display:inline-flex; align-items:center; min-height:44px; padding:0;
  background:none; border:none; cursor:pointer; text-align:left;
  font:inherit; font-size:13.5px; font-weight:600; line-height:1.4;
  color:var(--gray-600, #757575);
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
  text-decoration-color:var(--gray-400, #BDBDBD);
}
.vy-exit-link:hover { color:#A8392C; text-decoration-color:#A8392C; }
.vy-exit-link:disabled { opacity:.6; cursor:progress; }

/* Плашка заявления - тот же спокойный серо-зелёный, что у заявления на возврат
   остатка (.payout-state): заявление подано - нормальный ход дела, не тревога. */
.vy-state {
  display:flex; align-items:center; gap:12px 16px; flex-wrap:wrap;
  margin:0 0 16px; padding:14px 16px; border-radius:10px;
  background:#F2F6F1; border:1px solid #DCE6D9;
}
.vy-state-text { flex:1 1 260px; display:flex; flex-direction:column; gap:3px; min-width:0; }
.vy-state-text > b { font-size:15px; color:#2C4A34; }
.vy-state-text > span { font-size:13px; color:var(--gray-600, #6F695E); line-height:1.5; overflow-wrap:anywhere; }
/* На «Лицевом счёте» плашка идёт сразу за строкой взносов - отступаем от неё. */
#vyhodBalance > .vy-state:first-child { margin-top:16px; }
.vy-state.is-rejected { background:#FBF4F2; border-color:#EBD3CD; }
.vy-state.is-rejected .vy-state-text > b { color:#8A3A2E; }
.vy-state-actions { display:flex; flex-wrap:wrap; gap:8px; }
.vy-state-actions .vy-pdf { display:inline-flex; align-items:center; text-decoration:none; }

/* Блок «Вы вышли из кооператива»: обзор, «Лицевой счёт», «Членство». */
.vy-exited {
  background:#fff; border:1px solid var(--gray-200, #EEEEEE); border-left:4px solid var(--orange, #ED8936);
  border-radius:var(--radius, 16px); padding:22px 24px; margin:0 0 24px;
}
.vy-exited-title { font-size:18px; font-weight:800; margin:0 0 10px; color:var(--text-primary, #1A1A2E); }
.vy-exited .vy-actions { margin-top:6px; }

/* Вышедшему «Пополнить» не показываем никогда: пополнение у него закрыто сервером.
   «Вернуть остаток на карту» - только при нулевом свободном остатке: деньги у
   вышедшего бывают (статус поставлен руками, перевод пришёл после выхода), и заявку
   на их возврат сервер принимает. Классы ставит vyhod.js. */
body.vy-vyshel [data-topup],
body.vy-vyshel-pusto #refundBtn { display:none !important; }
/* Строки, которые у вышедшего говорят неправду: «Паевой 50 ₽ - возвращается при
   выходе» (уже вернули, см. блок «Вы вышли») и «В кооперативе с …» под статусом
   «Вышел». Их пишет app.js (renderBalance / renderMember) по id из index.html. */
body.vy-vyshel #bal-fees,
body.vy-vyshel #dash-joined { display:none !important; }

.vy-nowrap { white-space:nowrap; }

/* ── Окно ─────────────────────────────────────────────────── */
/* Кабинет: каркас .modal-overlay / .modal из style.css, здесь только ширина и
   выравнивание. Заголовок слева, с отступом под крестик: в окне строки и суммы,
   центрированный заголовок над ними читается хуже. */
.modal.vy-modal { width:460px; max-width:100%; text-align:left; }
.vy-modal .vy-title { text-align:left; padding:0 44px 0 0; margin:0 0 14px; }

/* Витрина: своя пара классов - .modal витрины занят окном товара (сетка). */
.vy-overlay.vy-own {
  position:fixed; inset:0; z-index:3100;
  display:flex; align-items:center; justify-content:center;
  padding:20px; overflow-y:auto;
  background:rgba(31,78,69,.45);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  animation:vyFade .25s ease;
}
.vy-overlay[hidden] { display:none !important; }
.vy-modal.vy-own {
  position:relative; width:480px; max-width:100%; margin:auto;
  padding:32px 28px 26px; border-radius:24px;
  background:var(--card, #FFFDF8); color:var(--ink, #22342E);
  box-shadow:var(--shadow-lg, 0 28px 70px rgba(31,78,69,.18));
  animation:vyPop .3s cubic-bezier(.22,1,.36,1);
}
.vy-own .vy-title {
  font-family:var(--serif, Georgia, serif); font-size:24px; font-weight:600; line-height:1.2;
  color:var(--pine, #1F4E45);
}
.vy-close {
  position:absolute; top:12px; right:12px; width:42px; height:42px; border-radius:50%;
  border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  background:var(--mint, #E8F1EC); color:var(--ink-muted, #5F6F66); font-size:20px; line-height:1;
}
.vy-close:hover { color:var(--ink, #22342E); }
@keyframes vyFade { from { opacity:0; } to { opacity:1; } }
@keyframes vyPop { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:none; } }

/* ── Содержимое окна и блока ──────────────────────────────── */
.vy-text {
  margin:0 0 12px; font-size:14px; line-height:1.55;
  color:var(--text-secondary, var(--ink, #4A4A5A));
}
.vy-strong { font-weight:700; color:var(--text-primary, var(--ink, #1A1A2E)); }
.vy-muted { margin:8px 0 12px; font-size:12.5px; line-height:1.5; color:var(--gray-500, var(--ink-muted, #8A8A8A)); }
.vy-note {
  margin:0 0 12px; padding:10px 14px; border-radius:10px;
  background:#FFF8E7; border:1px solid #F0E2BF; color:#6B5200; font-size:13px; line-height:1.5;
}

/* Расчёт: строка на сумму, итог выделен - как разбивка платежа (.pay-breakdown). */
.vy-rows { margin:0 0 4px; border:1px solid var(--gray-200, var(--line, #EEEEEE)); border-radius:10px; overflow:hidden; }
.vy-row {
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:11px 14px; font-size:14px; border-bottom:1px solid var(--gray-100, var(--line, #F2F2F2));
}
.vy-row:last-child { border-bottom:none; }
.vy-row .vy-k { color:var(--gray-600, var(--ink-muted, #757575)); }
.vy-row .vy-v { font-weight:600; white-space:nowrap; color:var(--text-primary, var(--ink, #1A1A2E)); }
.vy-row.vy-total { background:var(--green-subtle, var(--mint, #F0FFF4)); }
.vy-row.vy-total .vy-k,
.vy-row.vy-total .vy-v { font-weight:800; color:var(--green-dark, var(--pine, #2D6A4F)); }

.vy-check {
  display:flex; gap:10px; align-items:flex-start; min-height:44px; padding:10px 0 4px;
  font-size:14px; font-weight:600; line-height:1.45; cursor:pointer;
  color:var(--text-primary, var(--ink, #1A1A2E));
}
.vy-check input { width:20px; height:20px; flex-shrink:0; margin:0; accent-color:#A8392C; }

.vy-error {
  margin:10px 0 0; padding:10px 14px; border-radius:10px;
  background:#FFF5F5; border:1px solid #FEB2B2; color:#B83227; font-size:13px; line-height:1.45;
}
.vy-error[hidden] { display:none; }

/* Заявки, из-за которых выйти нельзя. Номер и сумма - с сервера, текстом. */
.vy-orders { list-style:none; margin:0 0 4px; padding:0; }
.vy-orders li {
  margin:0 0 8px; padding:10px 14px; border-radius:10px; font-size:13.5px; line-height:1.45;
  border:1px solid var(--gray-200, var(--line, #EEEEEE)); overflow-wrap:anywhere;
  color:var(--text-primary, var(--ink, #1A1A2E));
}

.vy-docs { display:flex; flex-wrap:wrap; gap:0 18px; margin:0 0 8px; }
.vy-doc {
  display:inline-flex; align-items:center; min-height:44px; font-size:14px; font-weight:600;
  color:var(--green-main, var(--leaf, #3E9277)); text-decoration:underline; text-underline-offset:3px;
}

/* Кнопки окна - своего размера в обоих местах: зона нажатия не меньше 44 px. */
.vy-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.vy-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:44px; padding:10px 20px; border-radius:999px; border:1.5px solid transparent;
  font:inherit; font-size:14px; font-weight:700; line-height:1.2; text-align:center;
  text-decoration:none; cursor:pointer; transition:background .2s, border-color .2s, color .2s;
}
.vy-btn:disabled { opacity:.5; cursor:default; }
/* Подача заявления о выходе - сдержанный красный контур, не зелёная «главная». */
.vy-btn-danger { background:transparent; color:#A8392C; border-color:#E3B5AE; }
.vy-btn-danger:not(:disabled):hover { background:#FDF1EF; border-color:#A8392C; }
.vy-btn-primary { background:var(--green-main, var(--pine, #40916C)); color:#fff; }
.vy-btn-primary:hover { background:var(--green-dark, var(--pine-soft, #2D6A4F)); color:#fff; }
.vy-btn-quiet {
  background:transparent; color:var(--text-secondary, var(--ink, #4A4A5A));
  border-color:var(--gray-300, var(--line, #E0E0E0));
}
.vy-btn-quiet:hover { border-color:var(--green-main, var(--leaf, #40916C)); color:var(--green-main, var(--pine, #40916C)); }

/* Узкие телефоны: кнопки окна - столбиком во всю ширину, окно не шире экрана. */
@media (max-width:480px) {
  .vy-modal.vy-own { padding:28px 18px 22px; }
  .vy-own .vy-title { font-size:21px; }
  .vy-actions .vy-btn { flex:1 1 100%; }
  .vy-exited { padding:18px 16px; }
  .vy-row { font-size:13.5px; }
}

/* Кнопка выхода в верхней строке «Лицевого счёта» (01.10.2026): тот же размер, что у
   «Пополнить счёт» и «Вернуть остаток на карту», но сдержанно-красный контур - чтобы не
   спутать с зелёным пополнением и не нажать вместо него. */
.vy-exit-top { color: #a23b2a; border-color: rgba(162, 59, 42, 0.35); }
.vy-exit-top:hover { background: rgba(162, 59, 42, 0.06); }
#vyhodBalanceTop { display: contents; }
#vyhodBalanceTop[hidden] { display: none; }

/* Окно «Вернуть остаток на карту»: поле суммы. */
.vy-amount { display: grid; gap: 6px; margin: 4px 0 2px; }
.vy-amount input {
  font: inherit; font-size: 18px; font-weight: 700; padding: 10px 12px; border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.15); width: 100%; box-sizing: border-box;
}
.vy-amount input:focus { outline: 2px solid rgba(46, 125, 90, 0.35); outline-offset: 1px; }
.vy-amount small { color: #6b7570; }

/* Плашка заявки на возврат стоит над карточкой счёта (01.10.2026): без отступа она
   прилипала к ней на телефоне. */
#payoutState:not([hidden]) { margin-bottom: 14px; }
#vyhodBalance:not([hidden]) { margin-bottom: 14px; }