/** Shopify CDN: Minification failed

Line 16:32 Unexpected "-"
Line 273:0 Unexpected "<"
Line 385:0 Comments in CSS use "/* ... */" instead of "//"
Line 388:0 Comments in CSS use "/* ... */" instead of "//"
Line 390:5 Expected identifier but found whitespace
Line 399:3 Unexpected ","
Line 409:3 Unexpected ","
Line 419:3 Unexpected ","
Line 429:3 Unexpected ","
Line 439:3 Unexpected ","
... and 28 more hidden warnings

**/
<!-- Back in Stock Notify Popup - Aangepaste styling -->
<style>
  /* Notify Popup Overlay */
  .notify-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    animation: fadeIn 0.2s ease;
  }

  .notify-popup-overlay.show {
    display: block;
  }

  /* Notify Popup Container - Roze achtergrond */
  .notify-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: #ECB9AE; /* Roze achtergrond */
    border-radius: 12px;
    padding: 24px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  }

  .notify-popup-overlay.show .notify-popup {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  /* Header */
  .notify-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
  }

  /* Grotere titel */
  .notify-popup-title {
    font-size: 24px; /* Groter */
    font-weight: 700;
    color: #253A66; /* Blauw */
    margin: 0;
    flex: 1;
    text-align: center;
    padding-right: 40px; /* Meer ruimte voor close button */
  }

  /* Close button - Blauw en groter */
  .notify-popup-close {
    background: none;
    border: none;
    font-size: 36px; /* Groter */
    cursor: pointer;
    color: #253A66; /* Blauw */
    padding: 0;
    width: 40px; /* Groter */
    height: 40px; /* Groter */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    position: absolute;
    right: 0;
    top: -5px;
  }

  .notify-popup-close:hover {
    background: rgba(37, 58, 102, 0.1);
    transform: scale(1.1);
  }

  /* Body content */
  .notify-popup-body {
    overflow-y: auto;
    max-height: calc(80vh - 120px);
    margin: 0 -8px;
    padding: 0 8px;
  }

  .notify-description {
    text-align: center;
    color: #000000; /* Zwart */
    margin-bottom: 20px;
    font-size: 22px; /* Groter */
    font-weight: 500;
  }

  /* Form styling */
  .notify-form-group {
    margin-bottom: 15px;
  }

  .notify-form-group input[type="email"],
  .notify-form-group select {
    width: 100%;
    padding: 12px 40px 12px 16px; /* Meer padding rechts voor dropdown pijl */
    border: 2px solid #253A66;
    border-radius: 8px;
    font-size: 16px;
    background: white;
    transition: border-color 0.2s ease;
    color: #253A66;
  }

  /* Custom dropdown arrow met meer ruimte */
  .notify-form-group select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23253A66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center; /* Meer afstand van de rand */
    background-size: 20px;
    padding-right: 45px; /* Extra padding voor pijl */
  }

  .notify-form-group input[type="email"]:focus,
  .notify-form-group select:focus {
    outline: none;
    border-color: #1a2847;
    box-shadow: 0 0 0 3px rgba(37, 58, 102, 0.1);
  }

  /* Newsletter checkbox */
  .notify-newsletter-group {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 20px 0;
  }

  .notify-newsletter-group input[type="checkbox"] {
    margin-top: 2px;
    cursor: pointer;
    accent-color: #253A66;
  }

  .notify-newsletter-group label {
    font-size: 14px;
    color: #000000; /* Zwart */
    line-height: 1.4;
    cursor: pointer;
  }

  /* Submit button - Blauw */
  .notify-submit-btn {
    background-color: #253A66; /* Blauw */
    color: white;
    border: none;
    border-radius: 30px;
    padding: 14px 45px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    float: right;
    text-transform: lowercase;
  }

  .notify-submit-btn:hover:not(:disabled) {
    background-color: #1a2847;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 58, 102, 0.3);
  }

  .notify-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  /* Messages */
  .notify-message {
    display: none;
    margin-top: 20px;
    padding: 12px;
    border-radius: 8px;
    text-align: center;
  }

  .notify-message-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
  }

  .notify-message-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
  }

  /* Spinner */
  .notify-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: notify-spin 0.8s linear infinite;
    vertical-align: middle;
  }

  @keyframes notify-spin {
    to { transform: rotate(360deg); }
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* Mobile responsive */
  @media screen and (max-width: 740px) {
    .notify-popup {
      padding: 20px;
      width: 95%;
    }

    .notify-popup-header {
      margin-bottom: 16px;
      padding-bottom: 12px;
    }

    .notify-popup-title {
      font-size: 20px;
    }

    .notify-popup-body {
      padding: 0 4px;
    }
  }

  /* Clear float */
  .notify-popup-body::after {
    content: "";
    display: table;
    clear: both;
  }
</style>

<!-- Notify Popup HTML Structure met vertalingen -->
<div class="notify-popup-overlay" id="notifyPopup">
  <div class="notify-popup">
    <div class="notify-popup-header">
      <h2 class="notify-popup-title" id="notify-title" data-translate="title">BACK IN STOCK ALERT!</h2>
      <button 
        class="notify-popup-close" 
        id="notify-popup-close"
        aria-label="Close"
      >
        ×
      </button>
    </div>
    
    <div class="notify-popup-body">
      <p class="notify-description" id="notifyDescription">
        <span data-translate="description">Register to receive a notification when</span> "<span id="notifyProductName"></span>" <span data-translate="back_in_stock">comes back in stock.</span>
      </p>
      
      <form id="notifyForm" class="notify-form">
        <div class="notify-form-group">
          <input 
            type="email" 
            id="notifyEmail" 
            name="email" 
            placeholder="Type your email" 
            data-translate-placeholder="email_placeholder"
            required
            aria-label="Email address"
          >
        </div>

        <div class="notify-form-group">
          <select id="notifyCountry" name="country" required aria-label="Select country">
            <option value="" data-translate="select_country">Select your country</option>
            <option value="AT">Austria</option>
            <option value="BE">Belgium</option>
            <option value="BG">Bulgaria</option>
            <option value="HR">Croatia</option>
            <option value="CY">Cyprus</option>
            <option value="CZ">Czech Republic</option>
            <option value="DK">Denmark</option>
            <option value="EE">Estonia</option>
            <option value="FI">Finland</option>
            <option value="FR">France</option>
            <option value="DE">Germany</option>
            <option value="GR">Greece</option>
            <option value="HU">Hungary</option>
            <option value="IE">Ireland</option>
            <option value="IT">Italy</option>
            <option value="LV">Latvia</option>
            <option value="LT">Lithuania</option>
            <option value="LU">Luxembourg</option>
            <option value="MT">Malta</option>
            <option value="NL">Netherlands</option>
            <option value="PL">Poland</option>
            <option value="PT">Portugal</option>
            <option value="RO">Romania</option>
            <option value="SK">Slovakia</option>
            <option value="SI">Slovenia</option>
            <option value="ES">Spain</option>
            <option value="SE">Sweden</option>
            <option value="GB">United Kingdom</option>
            <option value="US">United States</option>
            <option value="CA">Canada</option>
            <option value="AU">Australia</option>
          </select>
        </div>
        
        <div class="notify-form-group">
          <select id="notifyLanguage" name="language" required aria-label="Select language">
            <option value="" data-translate="select_language">Select your language</option>
            <option value="en">English</option>
            <option value="nl">Nederlands</option>
            <option value="de">Deutsch</option>
            <option value="fr">Français</option>
            <option value="es">Español</option>
            <option value="it">Italiano</option>
            <option value="pt">Português</option>
            <option value="pl">Polski</option>
            <option value="sv">Svenska</option>
            <option value="da">Dansk</option>
          </select>
        </div>
        
        <div class="notify-newsletter-group">
          <input 
            type="checkbox" 
            id="notifyNewsletter" 
            name="newsletter" 
            checked
          >
          <label for="notifyNewsletter" data-translate="newsletter">
            Yes, I want to receive The Mouse Mansion news, offers, and 10% discount on my next order!
          </label>
        </div>
        
        <button type="submit" class="notify-submit-btn" id="notifySubmitBtn">
          <span id="notifySubmitText" class="notify-submit-text" data-translate="subscribe">subscribe</span>
          <span class="notify-spinner" style="display: none;"></span>
        </button>
        <div style="clear: both;"></div>
      </form>
      
      <div id="notifyMessage" class="notify-message"></div>
    </div>
  </div>
</div>

<script>
// Direct uitvoerbare code zonder IIFE
console.log('Loading notify popup translations...');

// Vertalingen object
const notifyTranslations = {
  en: {
    title: 'BACK IN STOCK ALERT!',
    description: 'Register to receive a notification when',
    back_in_stock: 'comes back in stock.',
    email_placeholder: 'Type your email',
    select_country: 'Select your country',
    select_language: 'Select your language',
    newsletter: 'Yes, I want to receive The Mouse Mansion news, offers, and 10% discount on my next order!',
    subscribe: 'subscribe'
  },
  nl: {
    title: 'WEER OP VOORRAAD MELDING!',
    description: 'Registreer om een melding te ontvangen wanneer',
    back_in_stock: 'weer op voorraad is.',
    email_placeholder: 'Vul je e-mailadres in',
    select_country: 'Selecteer je land',
    select_language: 'Selecteer je taal',
    newsletter: 'Ja, ik wil Het Muizenhuis nieuws, aanbiedingen en 10% korting op mijn volgende bestelling ontvangen!',
    subscribe: 'aanmelden'
  },
  de: {
    title: 'WIEDER VERFÜGBAR BENACHRICHTIGUNG!',
    description: 'Registrieren Sie sich, um benachrichtigt zu werden, wenn',
    back_in_stock: 'wieder verfügbar ist.',
    email_placeholder: 'Geben Sie Ihre E-Mail ein',
    select_country: 'Wählen Sie Ihr Land',
    select_language: 'Wählen Sie Ihre Sprache',
    newsletter: 'Ja, ich möchte Das Mäusehaus Neuigkeiten, Angebote und 10% Rabatt auf meine nächste Bestellung erhalten!',
    subscribe: 'anmelden'
  },
  fr: {
    title: 'ALERTE RETOUR EN STOCK!',
    description: 'Inscrivez-vous pour être notifié quand',
    back_in_stock: 'sera de nouveau en stock.',
    email_placeholder: 'Entrez votre email',
    select_country: 'Sélectionnez votre pays',
    select_language: 'Sélectionnez votre langue',
    newsletter: 'Oui, je veux recevoir les nouvelles, offres et 10% de réduction sur ma prochaine commande de La Maison des Souris!',
    subscribe: 's\'inscrire'
  },
  es: {
    title: '¡ALERTA DE DISPONIBILIDAD!',
    description: 'Regístrate para recibir una notificación cuando',
    back_in_stock: 'vuelva a estar disponible.',
    email_placeholder: 'Introduce tu email',
    select_country: 'Selecciona tu país',
    select_language: 'Selecciona tu idioma',
    newsletter: '¡Sí, quiero recibir noticias, ofertas y 10% de descuento en mi próximo pedido de La Casa del Ratón!',
    subscribe: 'suscribir'
  },
  it: {
    title: 'AVVISO DISPONIBILITÀ!',
    description: 'Registrati per ricevere una notifica quando',
    back_in_stock: 'tornerà disponibile.',
    email_placeholder: 'Inserisci la tua email',
    select_country: 'Seleziona il tuo paese',
    select_language: 'Seleziona la tua lingua',
    newsletter: 'Sì, voglio ricevere notizie, offerte e 10% di sconto sul mio prossimo ordine da La Casa del Topo!',
    subscribe: 'iscriviti'
  }
};

// Globale functies
window.detectNotifyLanguage = function() {
  const path = window.location.pathname.toLowerCase();
  const urlLangs = ['nl', 'de', 'fr', 'es', 'it'];
  
  for (let lang of urlLangs) {
    if (path.includes('/' + lang + '/') || path.startsWith('/' + lang)) {
      return lang;
    }
  }
  
  const htmlLang = document.documentElement.lang?.toLowerCase().split('-')[0];
  if (htmlLang && notifyTranslations[htmlLang]) {
    return htmlLang;
  }
  
  return 'en';
};

window.applyNotifyTranslations = function(lang) {
  console.log('Applying translations for:', lang);
  const translations = notifyTranslations[lang] || notifyTranslations.en;
  
  // Update teksten
  document.querySelectorAll('[data-translate]').forEach(element => {
    const key = element.getAttribute('data-translate');
    if (translations[key]) {
      element.textContent = translations[key];
    }
  });
  
  // Update placeholders
  document.querySelectorAll('[data-translate-placeholder]').forEach(element => {
    const key = element.getAttribute('data-translate-placeholder');
    if (translations[key]) {
      element.placeholder = translations[key];
    }
  });
  
  // Update language dropdown
  const langSelect = document.getElementById('notifyLanguage');
  if (langSelect && langSelect.value !== lang) {
    langSelect.value = lang;
  }
};

// Test functie
window.testNotifyTranslation = function(lang) {
  console.log('Testing translation for:', lang);
  window.applyNotifyTranslations(lang);
};

// Setup wanneer DOM ready is
document.addEventListener('DOMContentLoaded', function() {
  console.log('DOM ready, setting up notify translations...');
  
  // Hook into NotifyWidget
  const checkInterval = setInterval(function() {
    if (window.NotifyWidget && window.NotifyWidget.open) {
      clearInterval(checkInterval);
      
      const originalOpen = window.NotifyWidget.open;
      window.NotifyWidget.open = function(button) {
        originalOpen.call(this, button);
        
        // Apply translations
        setTimeout(() => {
          const currentLang = window.detectNotifyLanguage();
          window.applyNotifyTranslations(currentLang);
          
          // Setup language change handler
          const langSelect = document.getElementById('notifyLanguage');
          if (langSelect) {
            langSelect.onchange = function() {
              if (this.value) {
                window.applyNotifyTranslations(this.value);
              }
            };
          }
        }, 100);
      };
    }
  }, 100);
});

console.log('Notify translations loaded. Test with: testNotifyTranslation("nl")');
</script>