<div class="currency-switcher">
  <select id="currency-toggle">
    <option value="usd">USD</option>
    <option value="egp">EGP</option>
  </select>
</div>

.currency-switcher select {
  background: transparent;
  border: 1px solid #0011250d;
  border-radius: 6px;
  padding: 3px 20px 3px 10px; /* extra padding for arrow */
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border 0.2s ease, background 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  min-width: 70px;
}

/* Custom dropdown arrow */
.currency-switcher {
  position: relative;
  display: inline-block;
}
.currency-switcher::after {
  content: "▾";
  font-size: 14px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #00a2d7;
}

.currency-switcher select:hover {
  border-color: #00a2d74d;
}
.currency-switcher select:focus {
  outline: none;
  border-color: #00a2d74d;
  box-shadow: 0 0 0 2px rgba(0,162,215,0.1);
}

/* --- dropdown list styling (works in most modern browsers) --- */
.currency-switcher select option {
  padding: 6px 10px;
  font-size: 14px;
  background: #fff;
}

.currency-switcher select option:hover {
  background: #f3f9fc; /* soft hover effect */
}

document.addEventListener("DOMContentLoaded", () => {
  const conversionRate = 49; // 1 USD = 49 EGP
  const currencyToggle = document.getElementById("currency-toggle");

  // Save to cookie
  function setCurrencyCookie(value) {
    document.cookie = `currency=${value}; path=/; max-age=${60*60*24*30}`;
  }

  // Get from cookie
  function getCurrencyCookie() {
    const match = document.cookie.match(/(^| )currency=([^;]+)/);
    return match ? match[2] : null;
  }

  // Store base USD price
  document.querySelectorAll(".raw-price").forEach(el => {
    const usdPrice = parseFloat(el.textContent.replace(/[^0-9.]/g, ""));
    el.dataset.usd = usdPrice;
  });

  // Store original hrefs of order buttons
  document.querySelectorAll(".pricing-table-slide-order-button").forEach(btn => {
    btn.dataset.baseHref = btn.getAttribute("href");
  });

  // Update prices + button links
  function updateCurrency(currency) {
    // Update prices
    document.querySelectorAll(".raw-price").forEach(el => {
      const usdPrice = parseFloat(el.dataset.usd);
      if (currency === "usd") {
        el.textContent = `$${usdPrice.toFixed(2)}`;
      } else {
        const egpPrice = usdPrice * conversionRate;
        el.textContent = `${egpPrice.toFixed(0)} EGP`;
      }
    });

    // Update buttons
    document.querySelectorAll(".pricing-table-slide-order-button").forEach(btn => {
      const baseHref = btn.dataset.baseHref;
      const param = currency === "usd" ? "&currency=1" : "&currency=2";
      btn.setAttribute("href", baseHref.replace(/\?currency=\d+$/, "") + param);
    });
  }

  // Listen to dropdown change
  currencyToggle.addEventListener("change", () => {
    const selected = currencyToggle.value;
    setCurrencyCookie(selected);
    updateCurrency(selected);
  });

  // Load saved currency
  const savedCurrency = getCurrencyCookie() || "usd";
  currencyToggle.value = savedCurrency;
  updateCurrency(savedCurrency);
});