<?if(!$USER_LOGGED_IN$)?>
<style>
  @media (max-width: 600px) {
  .welcome-window {
  padding: 15px 20px; /* padding for mobile */
  border-width: 3px; /* thicker border */
  border-radius: 10px; /* rounded corners for mobile */
  font-size: 11px; /* smaller font size */
  }

  .welcome-window h2 {
  font-size: 1.2em; /* smaller title font */
  }

  .welcome-window div {
  font-size: 0.8em; /* smaller body text */
  }

  .welcome-window a {
  padding: 5px 8px; /* smaller button padding */
  font-size: 0.8em; /* smaller button font */
  }
  }
</style>

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
  var welcomeWindow = document.createElement('div');
  welcomeWindow.className = 'welcome-window'; // add class for styling
  welcomeWindow.style.position = 'fixed';
  welcomeWindow.style.left = '50%';
  welcomeWindow.style.top = '50%';
  welcomeWindow.style.transform = 'translate(-50%, -50%)';
  welcomeWindow.style.backgroundColor = '#ffffff';
  welcomeWindow.style.border = '3px solid #e63946'; // thicker border for visibility
  welcomeWindow.style.padding = '20px 30px'; // padding: top-bottom, left-right
  welcomeWindow.style.borderRadius = '15px'; // rounded corners
  welcomeWindow.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.2)'; // more pronounced shadow
  welcomeWindow.style.zIndex = '1000';
  welcomeWindow.style.textAlign = 'center'; // text alignment
  welcomeWindow.style.maxWidth = '90vw'; // max width
  welcomeWindow.style.width = '400px'; // fixed width
  welcomeWindow.style.fontFamily = 'Arial, sans-serif'; // font family
  welcomeWindow.style.fontSize = '14px'; // font size
  welcomeWindow.style.lineHeight = '1.4'; // line height

  welcomeWindow.innerHTML = `
  <h2 style="color: #e63946; font-size: 1.5em; margin-bottom: 15px; font-style: italic; font-weight: bold;">კეთილი იყოს თქვენი მობრძანება!</h2>
  <div style="margin-bottom: 15px; color: #333; font-size: 0.9em; font-style: italic; font-weight: bold;">გთხოვთ რეგისტრირდეთ!  
  თქვენი დახმარებით, ჩვენ ვახორციელებთ განვითარებას.  
  მადლობთ, რომ ჩვენი ნაწილი ხართ!</div>
  <hr style="border: 1px solid #000000; margin: 10px 0;">
  <a href="/index/3" style="text-decoration: none; color: white; background-color: #000000; padding: 5px 8px; border-radius: 5px; margin: 5px; display: inline-block; transition: background-color 0.3s, transform 0.3s; font-size: 0.8em;">რეგისტრაცია</a>  
  <a href="/index/14-0-0-1" onclick="closeWindow()" style="text-decoration: none; color: white; background-color: #000000; padding: 5px 8px; border-radius: 5px; margin: 5px; display: inline-block; transition: background-color 0.3s, transform 0.3s; font-size: 0.8em;">სწრაფი შესვლა</a>  
  <hr style="border: 1px solid #000000; margin: 10px 0;">
  <a href="javascript:void(0);" onclick="closeWindow()" style="text-decoration: none; color: white; background-color: #e63946; padding: 5px 8px; border-radius: 5px; margin: 5px; display: inline-block; transition: background-color 0.3s, transform 0.3s; font-size: 0.8em;">ფანჯრის დახურვა</a>
  <hr style="border: 1px solid #000000; margin: 10px 0;">
  `;

  document.body.appendChild(welcomeWindow);

  // Add hover effects using JavaScript
  const buttons = welcomeWindow.querySelectorAll('a');
  buttons.forEach(button => {
  button.addEventListener('mouseenter', function() {
  this.style.backgroundColor = '#000000'; // Change color on hover
  this.style.transform = 'scale(1.05)'; // Slightly increase size
  });

  button.addEventListener('mouseleave', function() {
  this.style.backgroundColor = this.dataset.originalColor; // Revert to original color
  this.style.transform = 'scale(1)'; // Revert to original size
  });

  // Store original color for revert functionality
  button.dataset.originalColor = button.style.backgroundColor;
  });

  window.closeWindow = function() {
  document.body.removeChild(welcomeWindow);
  };
});
</script>
<?endif?>