/* Раздел «Позиции» (шеринг) — детальная карточка игры: кубики П2/П3 + объяснялка.
   Цвета строго по брендбуку: blue/cyan — основной акцент и active/selected состояния
   (НЕ оранжевый конкурента). Панели dark navy, cyan-обводки. Только .sharing-* —
   СНГ/Турцию не трогает. */

.sharing-pos-card .sharing-pos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.sharing-pos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 14px 16px;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.sharing-pos-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #8f9ab9;
}

.sharing-pos-price {
  font-size: 20px;
  font-weight: 800;
  color: #fffdf8;
}

.sharing-pos-desc {
  font-size: 12px;
  line-height: 1.3;
  color: #8f9ab9;
}

/* Выбранная позиция — cyan/blue active state (по брендбуку) */
.sharing-pos.is-selected {
  border-color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
}

.sharing-pos.is-selected .sharing-pos-label {
  color: #5de7ff;
}

/* Блок «Что такое Позиции?» */
.sharing-explain-lead {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: #b4c0d4;
}

.sharing-explain-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.sharing-explain-tag {
  flex: 0 0 auto;
  min-width: 34px;
  padding: 4px 8px;
  border-radius: 8px;
  background: linear-gradient(135deg, #38bdf8, #4e80ff);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.sharing-explain-text strong {
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
  color: #fffdf8;
}

.sharing-explain-text span {
  font-size: 13px;
  line-height: 1.4;
  color: #8f9ab9;
}

/* «Главный плюс» — мягкая blue-violet панель (наша глубина), cyan-обводка */
.sharing-explain-main {
  margin-top: 14px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(56, 189, 248, 0.22);
  background: rgba(78, 128, 255, 0.1);
  font-size: 13px;
  line-height: 1.5;
  color: #d4d8ef;
}

.sharing-explain-main strong {
  color: #5de7ff;
}

/* --- Детальная страница подписки-шеринг --- */

/* Переключатель консоли PS4 / PS5 */
.sharing-console-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.sharing-console {
  flex: 1;
  padding: 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #b4c0d4;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.sharing-console.is-selected {
  background: linear-gradient(135deg, #38bdf8, #4e80ff);
  color: #ffffff;
}

/* PS4 → одна плашка П3 на всю ширину */
.sharing-sub-pos-grid.is-single {
  grid-template-columns: 1fr;
}

/* Квадратная картинка-обложка подписки на всю ширину столбца (как в СНГ/Турции) */
.sharing-sub-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto 12px;
  border: 1px solid rgba(93, 231, 255, 0.28);
  border-radius: 28px;
  overflow: hidden;
}

.sharing-sub-art-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Запасной визуал под картинкой — виден, только если webp не загрузилась */
.sharing-sub-art-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Правила пользования */
.sharing-rules-list {
  margin: 0;
  padding-left: 18px;
}

.sharing-rules-list li {
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: #b4c0d4;
}

/* --- Страница-объяснение «Что такое позиции (П2 и П3)?» --- */

.sharing-explain-header {
  margin-bottom: 6px;
}

.sharing-explain-h1 {
  line-height: 1.15;
}

.sharing-explain-h1-sub {
  color: #5de7ff;
}

.sharing-explain-intro {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: #b4c0d4;
}

/* Абзац-примечание внутри карточки объяснения */
.sharing-explain-note {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: #b4c0d4;
}

.sharing-explain-note strong {
  color: #5de7ff;
}

/* Ссылка «специальном чате» — оформлена как inline-акцент, не как кнопка */
.sharing-explain-link {
  padding: 0;
  border: 0;
  background: none;
  color: #5de7ff;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* Предупреждение о нарушении правил — мягкая тёплая (gold) обводка-акцент */
.sharing-explain-warning {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 209, 102, 0.3);
  background: rgba(255, 209, 102, 0.08);
  font-size: 13px;
  line-height: 1.5;
  color: #e7d9b4;
}

/* Цена «от N» в капсуле длиннее обычной. Вместо уменьшения шрифта — на телефоне
   расширяем колонку цены (сужая цветную часть), чтобы отступы у цены были как в
   СНГ (~20px слева/справа), а не липли. subscription-price-fix.css фиксит колонку
   112px !important — перебиваем его для .sharing-sub-card (breakpoints как у него). */
@media (max-width: 430px) {
  .region-page .sharing-sub-card {
    grid-template-columns: minmax(0, 1fr) 150px !important;
  }
}

@media (max-width: 360px) {
  .region-page .sharing-sub-card {
    grid-template-columns: minmax(0, 1fr) 130px !important;
  }
}

/* Спойлер в конце раздела «Позиции»: заказать сборку недостающей позиции.
   Тёмная карточка в общем стиле, blue-акцент как у остального интерфейса. */
.sharing-request-block {
  margin: 18px 14px 8px;
  padding: 0;
  border-radius: 14px;
  border: 1px solid rgba(120, 170, 255, 0.22);
  background: rgba(90, 130, 220, 0.08);
  overflow: hidden;
}

.sharing-request-summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #d7e4ff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sharing-request-summary::-webkit-details-marker { display: none; }

.sharing-request-summary::after {
  content: "▾";
  margin-left: 10px;
  font-size: 12px;
  color: #8fb4ff;
  transition: transform 0.2s ease;
}

.sharing-request-block[open] .sharing-request-summary::after {
  transform: rotate(180deg);
}

.sharing-request-body {
  padding: 0 16px 16px;
}

.sharing-request-body p {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.55;
  color: #b9c6e0;
}

.sharing-request-link {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, #3b82f6, #6ea8ff);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}