/* ===== Modal preview (3ddd-style, smooth) ===== */
:root{
  --m3d-overlay: rgba(0,0,0,.55);
  --m3d-card-bg: #eef3f6;
  --m3d-card-border: #dde3ea;
  --m3d-text: #2b2b2b;
  --m3d-sep: #c7cdd7;

  /* анимации */
  --m3d-dur: .36s;
  --m3d-ease: cubic-bezier(.22,.61,.36,1);

  /* цвета проекта */
  --m3d-primary: #78bca1;
  --m3d-primary-hover:#71b097;

  --m3d-badge-free:#3986c6;
  --m3d-badge-om:#474747;
  --m3d-badge-pro:#6cc39f;
}

/* Оверлей */
.m3d-modal{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--m3d-overlay);
  z-index: 1000;
  padding: 24px;
  box-sizing: border-box;

  opacity: 0;
  transition: opacity var(--m3d-dur) var(--m3d-ease);
  will-change: opacity;
}
.m3d-modal.is-open    { opacity: 1; }
.m3d-modal.is-closing { opacity: 0; }

/* Карточка */
.m3d-card{
  position: relative;
  display: inline-block;
  width: max-content;
  max-width: calc(100vw - 48px);
  max-height: 90vh;
  overflow: visible;
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);

  transform: translateY(12px) scale(.985);
  opacity: 0;
  transition:
    transform var(--m3d-dur) var(--m3d-ease),
    opacity   var(--m3d-dur) var(--m3d-ease);
  will-change: transform, opacity;
}
.m3d-modal.is-open .m3d-card{
  transform: none;
  opacity: 1;
}
.m3d-modal.is-closing .m3d-card{
  transform: translateY(8px) scale(.985);
  opacity: 0;
}

/* Топ-маркер (в углу карточки) */
.m3d-top-badge{
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: rgba(255,255,255,.96);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  z-index: 6;
}
.m3d-top-badge img{ width: 28px; height: auto; display: block; }
.m3d-top-badge .tooltip{ font-size: .85rem; color:#222; }

/* Крестик */
.m3d-close{
  position:absolute; top:10px; right:10px;
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(25,28,33,.95); color:#fff;
  font-size:22px; line-height:1; border:0; cursor:pointer; z-index:5;
  transition: transform .08s ease, background .15s ease, box-shadow .15s ease;
}
.m3d-close:hover{ background:rgba(25,28,33,1); transform:scale(1.05); }
.m3d-close:focus-visible{ outline:2px solid #62a1ff; outline-offset:2px; }

/* Картинка */
.m3d-hero{ background:#fff; border-radius:12px 12px 0 0; display:block; }
.m3d-hero-img{
  display:block;
  width:auto;
  max-width: calc(100vw - 48px);
  height:auto;
  max-height: calc(90vh - 140px);
  object-fit: contain;
  border-radius:12px 12px 0 0;
}

/* Информация под картинкой */
.m3d-info{
  width:100%;
  background: var(--m3d-card-bg);
  color: var(--m3d-text);
  border: 1px solid var(--m3d-card-border);
  border-top: 1px solid var(--m3d-card-border);
  border-radius: 0 0 12px 12px;
  padding: 14px 16px;
  box-sizing: border-box;
}

/* Строка 1 */
.m3d-headline{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:8px;
  margin:0 0 8px 0;
  font-size:1.05rem; line-height:1.25; font-weight:500;
  color:#424242;
}
.m3d-headline .m3d-cats,
.m3d-headline .m3d-name{ font-weight:500; }
.m3d-headline .m3d-slash{ color:#97a1ad; user-select:none; }

/* Строка 2 */
.m3d-line2{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.m3d-l2-left{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* Разделители */
.m3d-dot{ width:1px; height:18px; background:var(--m3d-sep); display:inline-block; transform: translateY(1px); }

/* Бейджи */
.m3d-badges{ display:inline-flex; align-items:center; gap:8px; }
.m3d-badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding:2px 8px; font-size:.78rem; text-transform:uppercase;
  color:#fff; border-radius:6px; line-height:1; font-weight:500;
}
.m3d-badge--free{ background:var(--m3d-badge-free); }
.m3d-badge--om{ background:var(--m3d-badge-om); }
.m3d-badge--pro{ background:var(--m3d-badge-pro); }

/* Иконки платформ/рендеров */
.m3d-icons{ display:inline-flex; gap:6px; align-items:center; }
.m3d-ico{ width:22px; height:22px; object-fit:contain; cursor:help; max-width:none; }

/* Размер файла */
.m3d-size{ font-size:.95rem; color:#445; min-width:70px; }

/* Кнопка «Подробнее» — убираем синий bootstrap-фокус, делаем просто затемнение */
.m3d-actions{ margin-left:auto; }
.m3d-btn{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; }
.m3d-btn--primary{
  background: var(--m3d-primary);
  color:#fff;
  padding: 8px 14px;
  border-radius: 12px;
  border: none;
  font-size: 17px;
  transition: background-color .15s ease, transform .08s ease;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none;
}
.m3d-btn--primary:hover{ background: var(--m3d-primary-hover); }
.m3d-btn--primary:focus,
.m3d-btn--primary:focus-visible{ outline: none; box-shadow: none; }
.m3d-btn--primary:active{ transform: scale(.99); }
.m3d-btn-ico{ display:inline-block; }

/* Адаптив */
@media (max-width: 920px){
  .m3d-hero-img{ max-height: calc(88vh - 150px); }
  .m3d-headline{ font-size: 1rem; }
}
@media (max-width: 640px){
  .m3d-headline{ font-size: .95rem; }
  .m3d-ico{ width:20px; height:20px; }
  .m3d-btn--primary{ padding:8px 12px; }
}
@media (max-width: 460px){
  .m3d-line2{ gap:10px; }
  .m3d-actions{ width:100%; display:flex; justify-content:flex-end; }
}

/* Печать */
@media print{ .m3d-modal{ display:none !important; } }

/* Фоллбек */
@supports not (width: max-content){ .m3d-card{ width: auto; } }

/* Меньше движения — меньше анимаций */
@media (prefers-reduced-motion: reduce){
  .m3d-modal, .m3d-card{ transition: none !important; }
}

/* Держим текст белым во всех состояниях ссылки-кнопки */
a.m3d-btn.m3d-btn--primary,
a.m3d-btn.m3d-btn--primary:hover,
a.m3d-btn.m3d-btn--primary:focus,
a.m3d-btn.m3d-btn--primary:active,
a.m3d-btn.m3d-btn--primary:visited {
  color: #fff;                 /* не синеет */
  text-decoration: none;       /* без подчёркивания */
}

/* На ховере только темним фон */
a.m3d-btn.m3d-btn--primary:hover {
  background: var(--m3d-primary-hover);
  transform: translateY(-1px);
}

/* Без синего фокуса от bootstrap */
a.m3d-btn.m3d-btn--primary:focus,
a.m3d-btn.m3d-btn--primary:focus-visible {
  outline: none;
  box-shadow: none;
}
