{% if site_settings.cookie_consent_enabled %}
<div id="sp-cookie-consent-overlay" class="sp-cc-overlay sp-cc-pos-{{ site_settings.cookie_consent_position }} sp-cc-theme-{{ site_settings.cookie_consent_theme }}" hidden></div>
<div
  id="sp-cookie-consent-banner"
  class="sp-cc-banner sp-cc-pos-{{ site_settings.cookie_consent_position }} sp-cc-theme-{{ site_settings.cookie_consent_theme }}"
  role="dialog"
  aria-live="polite"
  aria-label="Cookie consent"
  hidden
>
  <p class="sp-cc-message">
    {{ site_settings.cookie_consent_message }}
    {% if site_settings.cookie_consent_policy_url %}
      <a href="{{ site_settings.cookie_consent_policy_url }}" class="sp-cc-link">Learn more</a>
    {% endif %}
  </p>
  <div class="sp-cc-actions">
    {% if site_settings.cookie_consent_show_decline %}
      <button type="button" id="sp-cookie-decline" class="sp-cc-btn sp-cc-btn-decline">{{ site_settings.cookie_consent_decline_text|default:"Decline" }}</button>
    {% endif %}
    <button type="button" id="sp-cookie-accept" class="sp-cc-btn sp-cc-btn-accept">{{ site_settings.cookie_consent_button_text|default:"Accept" }}</button>
  </div>
</div>

<style>
  .sp-cc-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 26, 15, 0.35);
    z-index: 9998;
  }
  .sp-cc-overlay:not(.sp-cc-pos-center_modal) { display: none !important; }
  .sp-cc-overlay[hidden] { display: none !important; }

  .sp-cc-banner {
    position: fixed;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
    font-size: 14px;
    line-height: 1.55;
    box-shadow: 0 12px 32px -12px rgba(20, 26, 15, 0.4);
  }
  .sp-cc-message { margin: 0; flex: 1 1 auto; min-width: 200px; }
  .sp-cc-link { text-decoration: underline; margin-left: 6px; white-space: nowrap; }
  .sp-cc-actions { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }
  .sp-cc-btn {
    border: none;
    border-radius: 999px;
    padding: 10px 20px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
  }
  .sp-cc-btn:hover { transform: translateY(-1px); opacity: 0.92; }
  .sp-cc-banner[hidden] { display: none !important; }

  /* Positions */
  .sp-cc-pos-bottom_bar { left: 0; right: 0; bottom: 0; width: 100%; border-radius: 0; justify-content: space-between; }
  .sp-cc-pos-top_bar { left: 0; right: 0; top: 0; width: 100%; border-radius: 0; justify-content: space-between; }
  .sp-cc-pos-bottom_left { left: 18px; bottom: 18px; max-width: 380px; border-radius: 14px; flex-direction: column; align-items: flex-start; }
  .sp-cc-pos-bottom_right { right: 18px; bottom: 18px; max-width: 380px; border-radius: 14px; flex-direction: column; align-items: flex-start; }
  .sp-cc-pos-center_modal {
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    max-width: 460px; width: calc(100% - 40px); border-radius: 16px;
    flex-direction: column; align-items: flex-start;
  }

  /* Themes */
  .sp-cc-theme-dark { background: #1a2e1c; color: #f5f0e8; }
  .sp-cc-theme-dark .sp-cc-link { color: #6aab78; }
  .sp-cc-theme-dark .sp-cc-btn-accept { background: #6aab78; color: #141a0f; }
  .sp-cc-theme-dark .sp-cc-btn-decline { background: transparent; color: #f5f0e8; border: 1px solid #3d4a3e; }

  .sp-cc-theme-light { background: #ffffff; color: #3d4a3e; border: 1px solid #d5e0d6; }
  .sp-cc-theme-light .sp-cc-link { color: #1e4d2b; }
  .sp-cc-theme-light .sp-cc-btn-accept { background: #1e4d2b; color: #ffffff; }
  .sp-cc-theme-light .sp-cc-btn-decline { background: transparent; color: #3d4a3e; border: 1px solid #d5e0d6; }

  .sp-cc-theme-brand { background: #1e4d2b; color: #f5f0e8; }
  .sp-cc-theme-brand .sp-cc-link { color: #e6f4ea; }
  .sp-cc-theme-brand .sp-cc-btn-accept { background: #8c5e38; color: #ffffff; }
  .sp-cc-theme-brand .sp-cc-btn-decline { background: transparent; color: #f5f0e8; border: 1px solid #3a7d44; }

  @media (max-width: 640px) {
    .sp-cc-banner { flex-direction: column; align-items: flex-start; }
    .sp-cc-actions { width: 100%; }
    .sp-cc-btn { flex: 1 1 auto; }
  }
</style>

<script>
(function () {
  var COOKIE_NAME = 'sp_cookie_consent';
  var COOKIE_MAX_AGE_DAYS = 180;

  function getCookie(name) {
    var match = document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)');
    return match ? match.pop() : null;
  }

  function setCookie(name, value, days) {
    var expires = new Date();
    expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
    document.cookie = name + '=' + value + ';expires=' + expires.toUTCString() + ';path=/;SameSite=Lax';
  }

  var banner = document.getElementById('sp-cookie-consent-banner');
  var overlay = document.getElementById('sp-cookie-consent-overlay');
  if (!banner) return;

  var existing = getCookie(COOKIE_NAME);
  if (existing === 'accepted' || existing === 'declined') return;

  banner.hidden = false;
  if (overlay) overlay.hidden = false;

  function dismiss(value) {
    setCookie(COOKIE_NAME, value, COOKIE_MAX_AGE_DAYS);
    banner.hidden = true;
    if (overlay) overlay.hidden = true;
  }

  var acceptBtn = document.getElementById('sp-cookie-accept');
  var declineBtn = document.getElementById('sp-cookie-decline');
  if (acceptBtn) acceptBtn.addEventListener('click', function () { dismiss('accepted'); });
  if (declineBtn) declineBtn.addEventListener('click', function () { dismiss('declined'); });
})();
</script>
{% endif %}