<!-- ISWAVLETI.COM Loading Screen (Final Smooth Fill Version) -->
<div id="loader">
  <div class="loader-box">
  <div class="loader-header">
  <strong>ISWAVLETI.COM</strong> გვერდის ჩატვირთვა
  </div>
  <div class="loader-body">
  <div class="alert-box">
  ⚠️ <span>გვერდი იტვირთება — გთხოვთ დაელოდოთ...</span>
  </div>
  <ul class="loading-list">
  <li><span>🔄</span> მონაცემების შემოწმება...</li>
  <li><span>🔄</span> უსაფრთხო კავშირის დამყარება...</li>
  <li><span>🔄</span> კონტენტის ჩატვირთვა...</li>
  </ul>
  <div class="progress-bar">
  <div class="progress-fill"></div>
  </div>
  </div>
  </div>
</div>

<style>
  /* Overlay */
  #loader {
  position: fixed;
  inset: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  transition: opacity 0.6s ease, visibility 0.6s ease;
  }

  #loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  }

  /* Main Box */
  .loader-box {
  width: 420px;
  background: #ffffff;
  border: 2px solid #000;
  box-shadow: 0 0 25px rgba(255, 0, 0, 0.4);
  font-family: 'Segoe UI', 'Noto Sans Georgian', sans-serif;
  animation: pop 0.4s ease-out;
  }

  /* Header */
  .loader-header {
  background: #000;
  color: #fff;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: 0.3px;
  }

  /* Body */
  .loader-body {
  padding: 22px;
  background: #fafafa;
  }

  /* Alert */
  .alert-box {
  background: #fff2f2;
  color: #a40000;
  border: 1px solid #ff3b3b;
  padding: 12px 14px;
  font-size: 13px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  }

  /* Loading List */
  .loading-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px 0;
  color: #222;
  }

  .loading-list li {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.8;
  }

  /* Progress Bar */
  .progress-bar {
  width: 100%;
  height: 10px;
  background: #e0e0e0;
  overflow: hidden;
  border: 1px solid #ccc;
  }

  .progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #ff0000, #b30000);
  animation: fillBar 2.5s forwards;
  }

  /* Animations */
  @keyframes fillBar {
  from { width: 0%; }
  to { width: 100%; }
  }

  @keyframes pop {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
  }
</style>

<script>
document.addEventListener("DOMContentLoaded", () => {
  const loader = document.getElementById('loader');
  const items = document.querySelectorAll('.loading-list li span');

  document.body.style.overflow = 'hidden';

  // ნელ-ნელა ჩატვირთვის სიმულაცია
  setTimeout(() => { items[0].textContent = '✓'; }, 3000);
  setTimeout(() => { items[1].textContent = '✓'; }, 4000);
  setTimeout(() => { items[2].textContent = '✓'; }, 5000);

  // ბოლოს დამალოს ლოდერი
  setTimeout(() => {
  loader.classList.add('hidden');
  document.body.style.overflow = 'auto';
  }, 6000);
});
</script>

<script>
// ჩატვირთე ქართული ფონტი
const fontLink = document.createElement("link");
fontLink.rel = "stylesheet";
fontLink.href = "https://cdn.jsdelivr.net/npm/bpg-arial-caps/css/bpg-arial-caps.min.css";
document.head.appendChild(fontLink);

// დაამატე სტილი
const style = document.createElement("style");
style.textContent = `
/* --- არ შეეხო Font Awesome 4.7 იკონებს --- */
.fa, [class^="fa-"], [class*=" fa-"], i.fa, i[class*="fa-"], [class*="fa-"]::before {
  font-family: "FontAwesome" !important;
  font-style: normal !important;
  font-weight: normal !important;
}

/* --- დანარჩენ ტექსტს მიეცი ქართული ფონტი --- */
body, p, h1, h2, h3, h4, h5, h6,
a, span, div, li, td, th, input, textarea, button, label, strong, em, b, u {
  font-family: "BPG Arial Caps", sans-serif !important;
}

/* მაგრამ არ შეეხო FA ელემენტებს */
.fa, [class^="fa-"], [class*=" fa-"], i.fa, i[class*="fa-"], [class*="fa-"]::before {
  font-family: "FontAwesome" !important;
}
`;
document.head.appendChild(style);
</script>