/* === Sheltergram Modal v4 (New Design Integration) === */
  
  /* 1. Каркас модального окна */
  .sg-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 9999; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: 0.3s ease; backdrop-filter: blur(3px); }
  .sg-overlay.active { opacity: 1; visibility: visible; }
  .sg-modal {background: #fafafa;
    width: 600px;
    height: 85vh;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    transform: translateY(20px);
    transition: 0.3s ease; }
  .sg-overlay.active .sg-modal { transform: translateY(0); }
  .sg-header { background: #fff; padding: 15px 20px; border-bottom: 1px solid #dbdbdb; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-text, sans-serif); position: sticky; top: 0; z-index: 10; }
  .sg-header-title { font-weight: bold; font-size: 16px; letter-spacing: 1px; }
  .sg-close { cursor: pointer; font-size: 20px; color: #888; transition: 0.2s; }
  .sg-close:hover { color: #222; }
  .sg-feed { flex: 1; overflow-y: auto; padding: 30px 0; display: flex; flex-direction: column; align-items: center; }
  
  /* Обертка для постов, чтобы они ровно стояли по центру и имели отступ */
  .sg-card { margin-bottom: 40px; width: 100%; display: flex; flex-direction: column; align-items: center; position: relative; }

  /* 2. Механизм нашей карусели (встраивается в форумную) */
  .sg-media-wrap { position: relative; overflow: hidden; display: flex; align-items: center; user-select: none; width: 100%; }
  .sg-slides { display: flex; width: 100%; transition: transform 0.3s ease; }
.sg-slide { 
    flex: 0 0 100% !important; 
    max-width: 100% !important; 
    object-fit: cover !important; 
    
    /* Убиваем невидимость от форумных стилей */
    opacity: 1 !important; 
    visibility: visible !important; 
    display: block !important; 
    position: static !important; 
  }
  
  .sg-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.4); color: white; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: 0.2s; z-index: 5; }
  .sg-media-wrap:hover .sg-nav { opacity: 1; }
  .sg-nav.prev { left: 10px; }
  .sg-nav.next { right: 10px; }
  
  .sg-dots { position: absolute; bottom: 12px; width: 100%; display: flex; justify-content: center; gap: 4px; z-index: 5; }
  .sg-dot { width: 6px; height: 6px; background: rgba(255,255,255,0.4); border-radius: 50%; transition: 0.3s; }
  .sg-dot.active { background: #fff; }
  
  /* 3. Интерактив: Лайки и Анимация */
  .sg-big-heart { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); color: #fff; opacity: 0; pointer-events: none; transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); drop-shadow: 0 0 20px rgba(0,0,0,0.3); z-index: 10; }
  .sg-big-heart.animate { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }

  .sg-actions { display: flex; gap: 15px; margin-top: 5px; margin-left: 20px; align-self: flex-start; }
  .sg-btn-like { cursor: pointer; transition: transform 0.1s; display: flex; align-items: center; }
  .sg-btn-like:active { transform: scale(0.9); }
  .sg-btn-like svg { transition: fill 0.2s, color 0.2s; }
  .sg-btn-like.liked svg { fill: #ed4956; color: #ed4956; }
  .sg-likes-count { margin-top: 5px; margin-left: 20px; margin-bottom: 10px; font-size: 13px; font-weight: bold; color: #262626; align-self: flex-start; font-family: sans-serif;}
  
  .sg-loader { text-align: center; padding: 20px; color: #999; font-size: 12px; width: 100%; }
  .sg-open-btn {      background: #ffffff00;
    border: 1px solid #dbdbdb00;
    /* padding: 10px 20px; */
    /* border-radius: 20px; */
    cursor: pointer;
    /*   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);*/
    text-transform: uppercase;
    font-size: 11px;
    font-weight: bold;
    color: #b02e2d;
    font-family: var(--font-title2);

  
  }