/* ===== Vampire Partner Picker — optimized height + compact modal ===== */

.vpp-wrap, .vpp-wrap *{box-sizing:border-box;font:inherit}
.vpp-wrap{
  --name-size: 20px;
  --attr-size: 12px;
  --input-h:   26px;
  --input-fs:  12px;
  --grid-d:    4;
  --grid-l:    3;
  --grid-m:    2;

  width:100%;
  max-width:none;
  margin:24px auto;
  padding:8px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  color:#0b2948;
}

/* Поиск/кнопка */
.vpp-bar{display:flex;gap:10px;align-items:center;margin-bottom:14px}
.vpp-bar input{flex:1;height:48px;padding:12px 14px;border:1px solid #d1d9e0;border-radius:14px;background:#f7f8fa;outline:0}
.vpp-bar input:focus{border-color:#6366f1;box-shadow:0 0 0 4px rgba(99,102,241,.15)}
.vpp-bar button{height:48px;padding:0 18px;border-radius:14px;border:1px solid #0b5c80;background:#3e6775;color:#fff;cursor:pointer}
.vpp-bar button:hover{filter:brightness(1.06)}

.vpp-msg{margin:4px 0 12px;color:#b00020}

/* === Контейнер с карточками === */
.vpp-list {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 10px;
  padding: 6px 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.vpp-list::-webkit-scrollbar { display: none; }

/* === Карточка партнёра === */
.vpp-item {
  flex: 0 0 240px;
  width: 240px;
  max-width: 240px;

  /* ↓↓↓ Уменьшаем высоту карточки на ~40% ↓↓↓ */
  padding: 4px 8px;             /* меньше отступы */
  min-height: 70px;             /* было 110px */
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  border-left: 3px solid #0b5c80;
  background: #225d6e;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  flex-shrink: 0;
}

/* Заголовок карточки */
.vpp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.vpp-name-text{
  font-weight:500;
  font-size:var(--name-size);
  color:#fff;
  text-align:left;
  padding-left:4px;
}
.vpp-remove{
  background:transparent;
  border:none;
  color:#fff;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  transition:color 0.15s ease, transform 0.1s ease;
}
.vpp-remove:hover{color:#ffb3b3;transform:scale(1.2)}

/* === Сетка атрибутов === */
.vpp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;                    /* чуть плотнее */
}

/* Атрибутная плитка */
.vpp-attr{
  border:1px solid #0f2848ff;
  border-radius:10px;
  padding:6px;                 /* было 8px — компактнее */
  min-height:auto;
}

/* Заголовок иконки */
.vpp-attr h4 { margin: 0 0 4px 0; text-align: center; }

.vpp-icon {
  width: 36px;                 /* было 42px */
  height: 36px;
  display: block;
  margin: 0 auto 4px auto;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0,0,0,0.25);
  background: radial-gradient(circle at center, rgba(255,255,255,0.2), transparent 70%);
}

/* === Поля === */
.vpp-rows{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  align-items:end;
}
.vpp-rows label{
  font-size:10px;
  color:#606d80;
  margin:0 0 2px 2px;
  display:block;
}
.vpp-rows input{
  width:100%;
  height:var(--input-h);
  padding:3px 6px;
  font-size:var(--input-fs);
  border:1px solid #ccd3db;
  border-radius:8px;
  background:#fff;
  color:#0b2948;
  cursor:pointer;
}
.vpp-rows input[readonly]:hover{border-color:#9aa3ad;background:#f9fafb}
.vpp-empty{color:#95a1b1}

/* === Цвета атрибутов === */
.vpp-str { background: #e7d1d1ff !important; }  
.vpp-cha { background: #c3b5c6ff !important; }  
.vpp-int { background: #a9baaaff !important; }  
.vpp-wil { background: #b1aebcff !important; }  
.vpp-str, .vpp-cha, .vpp-int, .vpp-wil { border-color: rgba(0,0,0,0.08); }

/* === Модальные окна === */
.ui-autocomplete{z-index:99998 !important}
.vpp-modal{position:fixed;inset:0;display:none;z-index:999999}
.vpp-modal[aria-hidden='false']{display:block}
.vpp-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.vpp-window{
  position:relative;
  max-width:520px;
  margin:8vh auto;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 18px 46px rgba(0,0,0,.35);
}
.vpp-m-head{padding:12px 14px;border-bottom:1px solid #edf0f3;display:flex;justify-content:space-between;align-items:center}
.vpp-m-title{margin:0;font-size:18px;font-weight:700}
.vpp-m-close{background:transparent;border:none;font-size:22px;cursor:pointer;line-height:1}
.vpp-m-body{padding:14px;display:flex;flex-direction:column;gap:10px}
.vpp-m-input{padding:10px 12px;border:1px solid #cfd4da;border-radius:10px;outline:0;font-size:15px}
.vpp-m-input:focus{border-color:#6b85ff;box-shadow:0 0 0 3px rgba(107,133,255,.15)}
.vpp-m-row{display:flex;gap:8px;flex-wrap:wrap}
.vpp-help{font-size:12px;color:#6a7483}
.vpp-m-foot{border-top:1px solid #edf0f3;padding:10px 14px;display:flex;justify-content:flex-end;gap:8px}
.vpp-btn{border:1px solid #cfd4da;background:#fff;border-radius:10px;padding:8px 14px;color:#0b2948}
.vpp-btn-primary{border-color:#0b5c80;background:#3e6775;color:#fff}
.vpp-btn-primary:hover{filter:brightness(1.05)}

/* === Кнопки + и − === */
.vpp-m-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.vpp-m-input-wrap button {
  background: #3e6775;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  display: flex;                 /* ✅ центрирование */
  align-items: center;           /* ✅ по вертикали */
  justify-content: center;       /* ✅ по горизонтали */
  line-height: 1;                /* сбрасываем стандартную высоту строки */
  padding: 0;                    /* убираем внутренние отступы */
  transition: background 0.15s, transform 0.1s;
}

.vpp-m-input-wrap button:hover { background: #325461; }
.vpp-m-input-wrap button:active { background: #2a4550; transform: scale(0.95); }
.vpp-m-input-wrap input {
  text-align: center;
  font-size: 15px;
  height: 38px;
  flex: 1;
  border: 1px solid #ccd4da;
  border-radius: 10px;
}

/* === Кнопки K/M/B/T === */
.vpp-m-abs-pills button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: #e9eef2;
  color: #0b2948;
  font-weight: 600;
  font-size: 14px;
  border: 1px solid #cfd4da;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.vpp-m-abs-pills button:hover { background: #dfe5e9; }
.vpp-m-abs-pills button:active { background: #d2d9de; transform: scale(0.95); }

/* === Компактная адаптация модалки для мобилок === */
@media (max-width: 480px) {
  .vpp-window {
    max-width: 90vw;
    margin: 8vh auto;
    border-radius: 10px;
    transform: scale(0.94);
  }
  .vpp-m-head { padding: 8px 10px; }
  .vpp-m-title { font-size: 15px; }
  .vpp-m-body { padding: 10px; gap: 6px; }
  .vpp-m-input { font-size: 14px; padding: 8px 10px; height: 34px; }
  .vpp-m-input-wrap button {
    width: 30px;
    height: 30px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
  }
  .vpp-m-input-wrap input {
    height: 32px;
    font-size: 13px;
  }
  .vpp-m-abs-pills button {
    height: 30px;
    min-width: 30px;
    font-size: 13px;
  }
  .vpp-m-foot { padding: 8px 10px; gap: 6px; }
  .vpp-btn, .vpp-btn-primary {
    padding: 6px 10px;
    font-size: 13px;
  }
}