.refuge-downloads h3 {
    margin-bottom: 20px;
  }

  .refuge-downloads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
  }

  .refuge-download-card {
    background: #2E313E;
    border-radius: 12px;
    overflow: hidden;
  }

  .refuge-download-card__image img {
    width: 100%;
    height: auto;
    display: block;
  }

  .refuge-download-card__title {
    background: #363A48;
    padding: 15px;
    font-size: 18px;
    font-weight: 600;
    color: #f5f5f0;
  }

  .refuge-download-card__items {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .refuge-download-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    color: #f5f5f0 !important;
    text-decoration: none !important;
    transition: background 0.2s ease;
  }

  .refuge-download-item:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .refuge-download-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .refuge-download-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .refuge-download-item__title {
    flex: 1;
    font-size: 15px;
  }

  .refuge-download-item__size {
    font-size: 13px;
    color: #8a9eb3;
    font-weight: 500;
  }
  </style>
  <?php
  return ob_get_clean();
}

// Shortcode for Guides
add_shortcode('refuge_guides', 'refuge_guides_shortcode');

function refuge_guides_shortcode() {
  $guides = get_option('refuge_guides', []);

  if (empty($guides)) {
    return '';
  }

  ob_start();
  ?>
  <div class="refuge-guides">
    <h3>Guides</h3>
    <div class="refuge-guides-list">
      <?php foreach ($guides as $guide): ?>
        <?php foreach ($guide['items'] as $item): ?>
          <a href="<?php echo esc_url($item['url']); ?>" class="refuge-guide-item" target="_blank">
            <?php if ($guide['image']): ?>
              <div class="refuge-guide-thumbnail">
                <img src="<?php echo wp_get_attachment_url($guide['image']); ?>" alt="<?php echo esc_attr($item['title']); ?>">
              </div>
            <?php endif; ?>
            <span class="refuge-guide-title"><?php echo esc_html($item['title']); ?></span>
            <span class="refuge-guide-type"><?php echo strtoupper(esc_html($item['type'])); ?></span>
          </a>