<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sodium Calculator - VISTA SALT</title>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
  <script src="common.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" onerror="console.log('Three.js failed to load')"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js" onerror="console.log('GSAP failed to load')"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js" onerror="console.log('ScrollTrigger failed to load')"></script>
  <style>
    :root {
      --vista-teal: #2D7A7A;
      --vista-dark-teal: #1A4F4F;
      --vista-light-teal: #4A9999;
      --vista-cream: #ffffff;
      --vista-dark-navy: #0F2A2A;
      --vista-black: #0A1A1A;
      --vista-white: #ffffff;
      --vista-star: #ffffff;
      --vista-gradient-main: linear-gradient(135deg, var(--vista-dark-navy) 0%, var(--vista-dark-teal) 40%, var(--vista-teal) 100%);
      --vista-gradient-hero: linear-gradient(180deg, var(--vista-dark-navy) 0%, var(--vista-dark-teal) 60%, var(--vista-teal) 100%);
      --vista-gradient-button: linear-gradient(135deg, var(--vista-teal) 0%, var(--vista-light-teal) 100%);
    }
    
    /* 3D Background Canvas */
    #bg-canvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      opacity: 0.6;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Montserrat', sans-serif;
      background: var(--vista-gradient-main);
      color: var(--vista-cream);
      line-height: 1.6;
      overflow-x: hidden;
      position: relative;
      padding-top: 80px;
    }

    /* Starry Night Effect */
    body::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: 
        radial-gradient(2px 2px at 20px 30px, var(--vista-star), transparent),
        radial-gradient(2px 2px at 40px 70px, var(--vista-star), transparent),
        radial-gradient(1px 1px at 90px 40px, var(--vista-star), transparent),
        radial-gradient(1px 1px at 130px 80px, var(--vista-star), transparent),
        radial-gradient(2px 2px at 160px 30px, var(--vista-star), transparent),
        radial-gradient(1px 1px at 200px 90px, var(--vista-star), transparent),
        radial-gradient(2px 2px at 240px 50px, var(--vista-star), transparent),
        radial-gradient(1px 1px at 280px 110px, var(--vista-star), transparent),
        radial-gradient(1px 1px at 320px 70px, var(--vista-star), transparent),
        radial-gradient(2px 2px at 360px 40px, var(--vista-star), transparent);
      background-repeat: repeat;
      background-size: 400px 200px;
      animation: sparkle 20s linear infinite;
      pointer-events: none;
      z-index: 1;
      opacity: 0.6;
    }

    @keyframes sparkle {
      0%, 100% { opacity: 0.6; }
      50% { opacity: 1; }
    }

    /* Mountain Background */
    .mountain-background {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 50vh;
      z-index: -1;
      opacity: 0.1;
      background: url('mountain-city-illustration.svg') repeat-x center bottom;
      background-size: cover;
      pointer-events: none;
      filter: blur(0.5px);
    }

    /* Header Styles */
    header {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 80px !important;
      background: rgba(15, 42, 42, 0.95) !important;
      backdrop-filter: blur(20px) !important;
      border-bottom: 1px solid var(--vista-teal) !important;
      z-index: 10002 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      padding: 0 15px !important;
      box-sizing: border-box !important;
    }

    .logo {
      font-size: 2rem !important;
      font-weight: 900 !important;
      color: var(--vista-white) !important;
      text-decoration: none !important;
      letter-spacing: 3px !important;
      text-shadow: 0 2px 10px rgba(255, 255, 255, 0.3) !important;
    }
    
    nav {
      display: none !important;
    }
    
    nav a {
      display: none !important;
    }
    
    .hamburger {
      display: flex !important;
      flex-direction: column;
      cursor: pointer;
      padding: 8px;
      background: rgba(45, 122, 122, 0.2);
      border: 2px solid var(--vista-teal);
      border-radius: 8px;
      transition: all 0.3s ease;
      z-index: 99999 !important;
      min-width: 41px;
      min-height: 41px;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
      margin-left: 20px;
      pointer-events: auto !important;
      position: relative !important;
    }

    .hamburger:hover {
      background: rgba(45, 122, 122, 0.4) !important;
      transform: scale(1.05);
      box-shadow: 0 4px 15px rgba(45, 122, 122, 0.3);
    }

    .hamburger:active {
      transform: scale(0.95);
    }

    .hamburger span {
      width: 25px !important;
      height: 3px !important;
      background: var(--vista-cream) !important;
      margin: 3px 0 !important;
      transition: 0.3s !important;
      border-radius: 2px !important;
      display: block !important;
    }
    
    .hamburger.active span:nth-child(1) {
      transform: rotate(-45deg) translate(-5px, 6px) !important;
    }
    
    .hamburger.active span:nth-child(2) {
      opacity: 0 !important;
    }
    
    .hamburger.active span:nth-child(3) {
      transform: rotate(45deg) translate(-5px, -6px) !important;
    }
    
    /* Navigation Dropdown */
    .mobile-nav {
      position: fixed !important;
      top: 80px !important;
      left: 0 !important;
      width: 100% !important;
      background: rgba(15, 42, 42, 0.95) !important;
      backdrop-filter: blur(20px) !important;
      border-bottom: 1px solid var(--vista-teal) !important;
      z-index: 9999 !important;
      transform: translateY(-100%) !important;
      transition: transform 0.3s ease !important;
      display: block !important;
    }

    .mobile-nav.open {
      transform: translateY(0) !important;
    }

    .mobile-nav a {
      display: block !important;
      color: var(--vista-white) !important;
      text-decoration: none !important;
      padding: 15px 20px !important;
      font-size: 1.1rem !important;
      font-weight: 600 !important;
      border-bottom: 1px solid rgba(45, 122, 122, 0.2) !important;
      transition: all 0.3s ease !important;
    }

    .mobile-nav a:hover {
      background: rgba(45, 122, 122, 0.2) !important;
      color: var(--vista-white) !important;
    }

    /* Cart Modal Styles */
    .cart-modal {
      position: fixed;
      top: 0;
      right: -400px;
      width: 400px;
      height: 100vh;
      background: rgba(0, 0, 0, 0.95);
      backdrop-filter: blur(20px);
      border-left: 1px solid rgba(102, 179, 169, 0.2);
      z-index: 1001;
      transition: right 0.3s ease;
      display: flex;
      flex-direction: column;
    }

    .cart-modal.open {
      right: 0;
    }

    .cart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      border-bottom: 1px solid rgba(102, 179, 169, 0.2);
    }

    .cart-header h3 {
      color: var(--vista-teal);
      margin: 0;
      font-size: 1.2rem;
    }

    .cart-close {
      background: none;
      border: none;
      color: var(--vista-teal);
      font-size: 1.5rem;
      cursor: pointer;
      padding: 5px;
      border-radius: 5px;
      transition: all 0.3s ease;
    }

    .cart-close:hover {
      background: rgba(45, 122, 122, 0.2);
    }

    .cart-items {
      flex: 1;
      overflow-y: auto;
      padding: 20px;
    }

    .empty-cart {
      text-align: center;
      color: var(--vista-cream);
      padding: 40px 20px;
    }

    .empty-cart-icon {
      font-size: 3rem;
      margin-bottom: 20px;
      opacity: 0.5;
    }

    .cart-item {
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 15px;
      border: 1px solid rgba(45, 122, 122, 0.2);
      border-radius: 10px;
      margin-bottom: 15px;
      background: rgba(45, 122, 122, 0.05);
    }

    .cart-item-icon {
      font-size: 2rem;
    }

    .cart-item-details {
      flex: 1;
    }

    .cart-item-name {
      color: var(--vista-teal);
      font-weight: 600;
      margin-bottom: 5px;
    }

    .cart-item-price {
      color: var(--vista-cream);
      font-size: 0.9rem;
    }

    .cart-item-controls {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .cart-item-quantity {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .quantity-btn {
      background: rgba(45, 122, 122, 0.2);
      border: 1px solid var(--vista-teal);
      color: var(--vista-teal);
      width: 25px;
      height: 25px;
      border-radius: 5px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }

    .quantity-btn:hover {
      background: var(--vista-teal);
      color: var(--vista-black);
    }

    .cart-item-remove {
      background: rgba(255, 0, 0, 0.2);
      border: 1px solid rgba(255, 0, 0, 0.5);
      color: rgba(255, 0, 0, 0.8);
      padding: 5px 10px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 0.8rem;
      transition: all 0.3s ease;
    }

    .cart-item-remove:hover {
      background: rgba(255, 0, 0, 0.3);
      color: white;
    }

    .cart-footer {
      padding: 20px;
      border-top: 1px solid rgba(102, 179, 169, 0.2);
    }

    .cart-total {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      color: var(--teal);
      font-weight: 600;
      font-size: 1.1rem;
    }

    .cart-checkout-btn {
      width: 100%;
      background: var(--gradient-1);
      color: var(--black);
      border: none;
      padding: 15px;
      border-radius: 10px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .cart-checkout-btn:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 10px 20px rgba(102, 179, 169, 0.3);
    }

    .cart-checkout-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    
    .calculator-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 40px 20px;
    }
    
    .calculator-title {
      text-align: center;
      font-size: 3.5rem;
      font-weight: 900;
      margin-bottom: 40px;
      background: var(--vista-gradient-button);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      letter-spacing: 2px;
      text-shadow: 0 0 30px rgba(45, 122, 122, 0.3);
    }
    
    .calculator-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
      margin-bottom: 40px;
    }
    
    .calculator-section {
      background: rgba(15, 42, 42, 0.6);
      border: 2px solid rgba(45, 122, 122, 0.4);
      border-radius: 20px;
      padding: 30px;
      backdrop-filter: blur(15px);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      z-index: 5;
    }

    .calculator-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle at 50% 0%, rgba(45, 122, 122, 0.2) 0%, transparent 70%);
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
      z-index: 1;
    }

    .calculator-section:hover::before {
      opacity: 1;
    }

    .calculator-section:hover {
      transform: translateY(-5px);
      border-color: var(--vista-teal);
      background: rgba(15, 42, 42, 0.8);
      box-shadow: 0 15px 30px rgba(45, 122, 122, 0.3);
    }
    
    .calculator-section.full-width {
      grid-column: 1 / -1;
      margin-bottom: 30px;
    }
    
    .section-title {
      font-size: 1.8rem;
      font-weight: 700;
      margin-bottom: 25px;
      color: var(--vista-white);
      text-align: center;
      position: relative;
      z-index: 1;
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-group label {
      display: block;
      margin-bottom: 8px;
      font-weight: 600;
      color: var(--vista-cream);
    }

    .form-group input,
    .form-group select {
      width: 100%;
      padding: 15px;
      border: 2px solid rgba(45, 122, 122, 0.4);
      border-radius: 12px;
      background: rgba(15, 42, 42, 0.3);
      color: var(--vista-cream);
      font-family: 'Montserrat', Arial, sans-serif;
      font-size: 1rem;
      font-weight: 600;
      box-sizing: border-box;
      transition: all 0.3s ease;
      position: relative;
      z-index: 1;
    }

    .form-group input:focus,
    .form-group select:focus {
      outline: none;
      border-color: var(--vista-teal);
      background: rgba(15, 42, 42, 0.5);
      box-shadow: 0 0 20px rgba(45, 122, 122, 0.4);
      transform: translateY(-2px);
    }
    
    .slider-container {
      margin-bottom: 15px;
    }
    
    .slider-label {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }
    
    .slider-value {
      font-weight: bold;
      color: var(--vista-cream);
    }

    .slider {
      width: 100%;
      height: 10px;
      border-radius: 8px;
      background: rgba(45, 122, 122, 0.3);
      outline: none;
      -webkit-appearance: none;
      appearance: none;
      transition: all 0.3s ease;
      cursor: pointer;
      touch-action: manipulation;
      position: relative;
      z-index: 10;
      pointer-events: auto;
    }

    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--vista-gradient-button);
      cursor: pointer;
      box-shadow: 0 4px 8px rgba(45, 122, 122, 0.4);
      transition: all 0.3s ease;
    }

    .slider::-webkit-slider-thumb:hover {
      transform: scale(1.2);
      box-shadow: 0 6px 12px rgba(45, 122, 122, 0.6);
    }

    .slider::-moz-range-thumb {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--vista-teal);
      cursor: pointer;
      border: none;
      box-shadow: 0 4px 8px rgba(45, 122, 122, 0.4);
      transition: all 0.3s ease;
    }
    
    .slider-range {
      display: flex;
      justify-content: space-between;
      font-size: 0.8rem;
      color: rgba(249, 236, 215, 0.7);
      margin-top: 5px;
    }
    
    .button-group {
      display: flex;
      gap: 10px;
      margin-top: 10px;
    }
    
    .sweat-btn {
      flex: 1;
      background: rgba(0, 0, 0, 0.6);
      border: 2px solid rgba(102, 179, 169, 0.4);
      border-radius: 12px;
      padding: 15px 10px;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 80px;
      position: relative;
      z-index: 1;
    }
    
    .sweat-btn:hover {
      background: rgba(45, 122, 122, 0.2);
      border-color: var(--vista-teal);
      transform: translateY(-2px);
    }

    .sweat-btn.active {
      background: var(--vista-teal);
      border-color: var(--vista-teal);
      color: var(--vista-white);
      box-shadow: 0 4px 15px rgba(45, 122, 122, 0.4);
    }

    .sweat-btn.active .btn-title,
    .sweat-btn.active .btn-subtitle {
      color: var(--vista-white);
    }

    .btn-title {
      font-size: 1rem;
      font-weight: bold;
      color: var(--vista-cream);
      margin-bottom: 5px;
    }

    .btn-subtitle {
      font-size: 0.8rem;
      color: rgba(255, 255, 255, 0.7);
    }
    
    .results-section {
      background: rgba(15, 42, 42, 0.95);
      border: 2px solid var(--vista-dark-teal);
      border-radius: 15px;
      padding: 25px;
      text-align: center;
      position: fixed;
      top: 100px;
      right: 20px;
      width: 300px;
      z-index: 1000;
      backdrop-filter: blur(10px);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      max-height: 80vh;
      overflow-y: auto;
    }

    .results-title {
      font-size: 0.9rem;
      font-weight: bold;
      margin-bottom: 8px;
      color: var(--vista-cream);
    }

    .result-value {
      font-size: 1.3rem;
      font-weight: bold;
      color: var(--vista-teal);
      margin-bottom: 6px;
    }

    .result-description {
      font-size: 0.7rem;
      color: var(--vista-cream);
      margin-bottom: 8px;
    }

    .packet-info {
      background: rgba(255, 255, 255, 0.1);
      border: 2px solid var(--vista-cream);
      border-radius: 15px;
      padding: 20px;
      margin-bottom: 30px;
    }

    .packet-title {
      font-size: 1.3rem;
      font-weight: bold;
      margin-bottom: 15px;
      color: var(--vista-cream);
      text-align: center;
    }
    
    .packet-details {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 15px;
    }
    
    .packet-item {
      text-align: center;
      padding: 15px;
      background: rgba(15, 42, 42, 0.3);
      border-radius: 10px;
      border: 1px solid var(--vista-teal);
    }

    .packet-amount {
      font-size: 1.5rem;
      font-weight: bold;
      color: var(--vista-teal);
      margin-bottom: 5px;
    }

    .packet-mineral {
      color: var(--vista-cream);
      font-size: 0.9rem;
    }

    .disclaimer {
      background: rgba(255, 0, 0, 0.1);
      border: 2px solid rgba(255, 0, 0, 0.3);
      border-radius: 10px;
      padding: 20px;
      text-align: center;
      color: rgba(255, 255, 255, 0.8);
      font-size: 0.9rem;
    }

    .back-btn {
      display: inline-block;
      background: var(--vista-teal);
      color: var(--vista-white);
      font-size: 1.2rem;
      font-weight: bold;
      border: none;
      border-radius: 30px;
      padding: 15px 40px;
      cursor: pointer;
      letter-spacing: 2px;
      transition: background 0.2s, color 0.2s;
      text-decoration: none;
      margin-top: 20px;
    }

    .back-btn:hover {
      background: var(--vista-cream);
      color: var(--vista-dark-teal);
    }
    
    .activity-selection-container {
      margin: 20px 0;
      padding: 20px;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 10px;
      border: 1px solid var(--teal);
      position: relative;
      z-index: 10;
    }
    
    .activity-intensity-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      margin-bottom: 30px;
    }
    
    .activity-intensity-card {
      background: rgba(102, 179, 169, 0.1);
      border: 2px solid var(--teal);
      border-radius: 12px;
      padding: 20px;
      text-align: center;
      transition: all 0.3s ease;
      position: relative;
      z-index: 15;
    }
    
    .activity-intensity-card:hover {
      background: rgba(102, 179, 169, 0.2);
      transform: translateY(-2px);
    }
    
    .intensity-title {
      font-size: 1.3rem;
      font-weight: bold;
      margin-bottom: 10px;
      color: var(--teal);
    }
    
    .intensity-description {
      font-size: 0.9rem;
      color: var(--cream);
      margin-bottom: 20px;
      line-height: 1.4;
    }
    
    .duration-selector {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      position: relative;
      z-index: 20;
    }
    
    .duration-selector label {
      font-weight: 600;
      color: var(--cream);
      font-size: 0.9rem;
    }
    
    .duration-selector select {
      width: 100%;
      max-width: 200px;
      padding: 10px;
      border: 2px solid var(--teal);
      border-radius: 8px;
      background: rgba(0, 0, 0, 0.8);
      color: var(--teal);
      font-family: 'Montserrat', Arial, sans-serif;
      font-size: 0.9rem;
      cursor: pointer;
      position: relative;
      z-index: 20;
      pointer-events: auto;
    }
    
    .duration-selector select:focus {
      outline: none;
      border-color: var(--cream);
      box-shadow: 0 0 10px rgba(249, 236, 215, 0.3);
    }
    
    .activity-summary {
      background: rgba(15, 79, 87, 0.2);
      border: 2px solid var(--dark-teal);
      border-radius: 12px;
      padding: 20px;
      text-align: center;
    }
    
    .summary-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 20px;
      background: rgba(102, 179, 169, 0.2);
      border-radius: 8px;
      border: 1px solid var(--cream);
      font-weight: bold;
    }
    
    .summary-label {
      color: var(--cream);
      font-size: 1.1rem;
    }
    
    .summary-value {
      color: var(--teal);
      font-weight: bold;
      font-size: 1.2rem;
    }
    
    .dietary-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
    }
    
    .main-content {
      width: 100%;
    }
    
    .calculator-main {
      width: 100%;
    }
    
    .results-sidebar {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 200px;
      height: fit-content;
      background: rgba(15, 79, 87, 0.75);
      border: 2px solid rgba(102, 179, 169, 0.4);
      border-radius: 12px;
      padding: 15px;
      text-align: center;
      backdrop-filter: blur(10px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
      max-height: 60vh;
      overflow-y: auto;
      transition: all 0.3s ease;
      z-index: 1000;
      cursor: move;
      user-select: none;
    }
    
    .results-sidebar.dragging {
      transition: none;
      opacity: 0.9;
      box-shadow: 0 12px 35px rgba(102, 179, 169, 0.6);
    }

    .results-sidebar:hover {
      border-color: var(--teal);
      box-shadow: 0 12px 35px rgba(102, 179, 169, 0.4);
      transform: scale(1.02);
    }
    
    .result-breakdown {
      background: rgba(0, 0, 0, 0.2);
      border-radius: 6px;
      padding: 6px;
      margin-top: 8px;
      text-align: left;
    }
    
    .breakdown-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 3px;
      font-size: 0.6rem;
    }
    
    .breakdown-label {
      color: var(--cream);
    }
    
    .breakdown-value {
      color: var(--teal);
      font-weight: bold;
    }
    
    @media (max-width: 768px) {
      header {
        padding: 0 10px !important;
      }
      
      .hamburger {
        margin-left: 15px;
        min-width: 45px;
        min-height: 45px;
      }
      
      .calculator-grid {
        grid-template-columns: 1fr;
      }
      
      .calculator-title {
        font-size: 2rem;
      }
      
      .results-title {
        font-size: 1.2rem;
      }
      
      .result-value {
        font-size: 1.6rem;
      }
      
      .main-content {
        grid-template-columns: 1fr;
        gap: 15px;
      }
      
      .results-sidebar {
        width: 180px;
        bottom: 15px;
        right: 10px;
        padding: 12px;
        background: rgba(15, 79, 87, 0.7);
      }
      
      .calculator-grid {
        grid-template-columns: 1fr;
      }
      
      .calculator-title {
        font-size: 2rem;
      }
      
      .results-title {
        font-size: 1rem;
      }
      
      .result-value {
        font-size: 1.4rem;
      }
      
      .result-breakdown {
        margin-top: 10px;
        padding: 8px;
      }
      
      .breakdown-item {
        font-size: 0.75rem;
      }
      
      .activity-intensity-grid {
        grid-template-columns: 1fr;
      }
      
      .dietary-grid {
        grid-template-columns: 1fr;
      }
      
      .button-group {
        flex-direction: column;
        gap: 8px;
      }
      
      .sweat-btn {
        min-height: 60px;
        padding: 12px 8px;
      }
      
      .btn-title {
        font-size: 0.9rem;
      }
      
      .btn-subtitle {
        font-size: 0.75rem;
      }
      
      .slider {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 10px;
        border-radius: 8px;
        background: rgba(102, 179, 169, 0.3);
        outline: none;
        cursor: pointer;
      }
      
      .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--gradient-1);
        cursor: pointer;
        box-shadow: 0 4px 8px rgba(102, 179, 169, 0.4);
      }
      
      .slider::-moz-range-thumb {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--teal);
        cursor: pointer;
        border: none;
        box-shadow: 0 4px 8px rgba(102, 179, 169, 0.4);
      }
    }
  </style>
</head>
<body>
  <!-- 3D Background Canvas -->
  <canvas id="bg-canvas"></canvas>
  
  <!-- Mountain Background -->
  <div class="mountain-background"></div>
  
  <!-- Header -->
  <header>
    <a href="index.html" class="logo" style="color: #ffffff; text-shadow: 0 2px 10px rgba(255, 255, 255, 0.3);">VISTA SALT</a>
    <button id="hamburger" onclick="toggleMenu()" class="hamburger">
      <span></span>
      <span></span>
      <span></span>
    </button>
  </header>

  <!-- Mobile Navigation -->
  <div id="mobile-nav" class="mobile-nav">
    <a href="index.html">Order</a>
    <a href="calculator.html">Sodium Calculator</a>
    <a href="contact.html">About</a>
  </div>

  <div class="calculator-container">
    <h1 class="calculator-title">SODIUM CALCULATOR</h1>
    
    <div class="calculator-grid">
      <!-- Personal Factors Section -->
      <div class="calculator-section">
        <h2 class="section-title">Personal Factors</h2>
        
        <div class="form-group">
          <label for="bodyWeight">Body Weight</label>
          <div style="display: flex; gap: 10px;">
            <input type="number" id="bodyWeight" placeholder="Weight" style="flex: 2;">
            <select id="weightUnit" style="flex: 1;">
              <option value="lbs">lbs</option>
              <option value="kg">kg</option>
            </select>
          </div>
        </div>
        
        <div class="form-group">
          <label for="age">Age (years)</label>
          <input type="number" id="age" placeholder="Age">
        </div>
        
        <div class="form-group">
          <label for="gender">Gender</label>
          <select id="gender">
            <option value="male">Male</option>
            <option value="female">Female</option>
          </select>
        </div>
      </div>
      
      <!-- Environmental Factors Section -->
      <div class="calculator-section">
        <h2 class="section-title">Environmental Factors</h2>
        
        <div class="form-group">
          <label>Sweat Rate</label>
          <div class="button-group">
            <button type="button" class="sweat-btn" data-value="0.3" id="sweatLittle">
              <span class="btn-title">A Little</span>
              <span class="btn-subtitle">0.3 L/hr</span>
            </button>
            <button type="button" class="sweat-btn active" data-value="0.8" id="sweatNormal">
              <span class="btn-title">Normal Amount</span>
              <span class="btn-subtitle">0.8 L/hr</span>
            </button>
            <button type="button" class="sweat-btn" data-value="2.0" id="sweatLot">
              <span class="btn-title">A Lot</span>
              <span class="btn-subtitle">2.0 L/hr</span>
            </button>
          </div>
        </div>
        
        <div class="slider-container">
          <div class="slider-label">
            <label>Temperature</label>
            <span class="slider-value" id="tempValue">70°F</span>
          </div>
          <input type="range" id="temperature" class="slider" min="0" max="120" value="70">
          <div class="slider-range">
            <span>0°F</span>
            <span>120°F</span>
          </div>
          <div style="text-align: center; margin-top: 10px;">
            <button id="tempUnitF" class="temp-unit-btn" style="background: var(--teal); color: #000; border: none; padding: 5px 15px; border-radius: 15px; margin-right: 10px; cursor: pointer;">°F</button>
            <button id="tempUnitC" class="temp-unit-btn" style="background: rgba(102, 179, 169, 0.3); color: var(--teal); border: 1px solid var(--teal); padding: 5px 15px; border-radius: 15px; cursor: pointer;">°C</button>
          </div>
        </div>
        
        <div class="slider-container">
          <div class="slider-label">
            <label>Humidity</label>
            <span class="slider-value" id="humidityValue">50%</span>
          </div>
          <input type="range" id="humidity" class="slider" min="0" max="100" value="50">
          <div class="slider-range">
            <span>0%</span>
            <span>100%</span>
          </div>
        </div>
      </div>
    </div>
    
    <div class="main-content">
      <div class="calculator-main">
        <!-- Activity Selection Section -->
    <div class="calculator-section full-width">
      <h2 class="section-title">Daily Activity Schedule</h2>
          <div class="activity-selection-container">
            <div class="activity-intensity-grid">
              <div class="activity-intensity-card">
                <h3 class="intensity-title">Low Intensity</h3>
                <p class="intensity-description">Walking, light stretching, gentle yoga</p>
                <div class="duration-selector">
                  <label for="lowDuration">Duration:</label>
                  <select id="lowDuration">
                    <option value="0">0 minutes</option>
                    <option value="15">15 minutes</option>
                    <option value="30">30 minutes</option>
                    <option value="45">45 minutes</option>
                    <option value="60">1 hour</option>
                    <option value="90">1.5 hours</option>
                    <option value="120">2 hours</option>
                    <option value="180">3 hours</option>
                    <option value="240">4 hours</option>
                  </select>

                </div>
              </div>
              
              <div class="activity-intensity-card">
                <h3 class="intensity-title">Medium Intensity</h3>
                <p class="intensity-description">Jogging, cycling, swimming, moderate workouts</p>
                <div class="duration-selector">
                  <label for="mediumDuration">Duration:</label>
                  <select id="mediumDuration">
                    <option value="0">0 minutes</option>
                    <option value="15">15 minutes</option>
                    <option value="30">30 minutes</option>
                    <option value="45">45 minutes</option>
                    <option value="60">1 hour</option>
                    <option value="90">1.5 hours</option>
                    <option value="120">2 hours</option>
                    <option value="180">3 hours</option>
                    <option value="240">4 hours</option>
                  </select>

                </div>
              </div>
              
              <div class="activity-intensity-card">
                <h3 class="intensity-title">High Intensity</h3>
                <p class="intensity-description">Running, HIIT, intense sports, heavy lifting</p>
                <div class="duration-selector">
                  <label for="highDuration">Duration:</label>
                  <select id="highDuration">
                    <option value="0">0 minutes</option>
                    <option value="15">15 minutes</option>
                    <option value="30">30 minutes</option>
                    <option value="45">45 minutes</option>
                    <option value="60">1 hour</option>
                    <option value="90">1.5 hours</option>
                    <option value="120">2 hours</option>
                    <option value="180">3 hours</option>
                    <option value="240">4 hours</option>
                  </select>

                </div>
              </div>
            </div>
            
            <div class="activity-summary">
              <div class="summary-item">
                <span class="summary-label">Total Active Time:</span>
                <span class="summary-value" id="totalSummary">0 minutes</span>
              </div>

        </div>
      </div>
    </div>
    
    <!-- Dietary Section -->
    <div class="calculator-section full-width">
      <h2 class="section-title">Dietary Factors</h2>
      <div class="dietary-grid">
        <div class="form-group">
          <label for="dietType">Base Need</label>
          <select id="dietType">
            <option value="low-sodium">Low (Whole Foods)</option>
            <option value="standard" selected>Standard (Balanced Diet)</option>
            <option value="high-processed">High (Processed Foods)</option>
          </select>
        </div>
        
        <div class="form-group">
          <label for="carbIntake">Daily Carb Intake</label>
          <select id="carbIntake">
            <option value="ketogenic">Ketogenic (<50g)</option>
            <option value="low">Low Carb (50-150g)</option>
            <option value="moderate" selected>Moderate (150-300g)</option>
            <option value="high">High Carb (>300g)</option>
          </select>
        </div>
        

      </div>
    </div>
    
    <!-- Salt Packet Information -->
    <div class="packet-info">
              <h3 class="packet-title">Vista Salt Packet Details</h3>
      <div class="packet-details">
        <div class="packet-item">
          <div class="packet-amount">1000 mg</div>
          <div class="packet-mineral">Sodium per serving</div>
        </div>
        <div class="packet-item">
          <div class="packet-amount">200 mg</div>
          <div class="packet-mineral">Potassium per serving</div>
        </div>
        <div class="packet-item">
          <div class="packet-amount">60 mg</div>
          <div class="packet-mineral">Magnesium per serving</div>
        </div>
      </div>
    </div>
    
    <!-- Disclaimer -->
    <div class="disclaimer">
      <strong>Disclaimer:</strong> This calculator provides estimates based on general guidelines. Always consult a healthcare professional for personalized dietary advice, especially if you have specific health conditions or intense athletic needs. Individual needs may vary significantly.
    </div>
    
    <div style="text-align: center;">
      <a href="index.html" class="back-btn">BACK TO ORDER</a>
        </div>
      </div>
      
      <!-- Results Sidebar -->
      <div class="results-sidebar">
        <h2 class="results-title">Your Results</h2>
        <div class="result-value" id="sodiumNeeds">-- mg</div>
        <div class="result-description" id="sodiumDescription">Daily sodium needs</div>
        
        <div class="result-breakdown">
          <div class="breakdown-item">
            <span class="breakdown-label">Servings needed:</span>
            <span class="breakdown-value" id="packetsNeeded">--</span>
          </div>
          <div class="breakdown-item">
            <span class="breakdown-label">Base needs:</span>
            <span class="breakdown-value" id="baseNeeds">-- mg</span>
          </div>
          <div class="breakdown-item">
            <span class="breakdown-label">Activity loss:</span>
            <span class="breakdown-value" id="activityLoss">-- mg</span>
          </div>
          <div class="breakdown-item">
            <span class="breakdown-label">Current intake:</span>
            <span class="breakdown-value" id="currentIntake">-- mg</span>
          </div>
          <div class="breakdown-item">
            <span class="breakdown-label">Deficit:</span>
            <span class="breakdown-value" id="sodiumDeficit">-- mg</span>
          </div>
        </div>
      </div>
    </div>
  </div>

    <script>
    // Sodium Calculator functionality
    document.addEventListener('DOMContentLoaded', function() {
      
      // Constants
      const PACKET_SODIUM = 1000; // mg
      
      // State variables
      let temperatureUnit = 'F';
      let currentSweatRate = 0.8; // Default to normal amount
      
      // Get all elements
      const elements = {
        bodyWeight: document.getElementById('bodyWeight'),
        weightUnit: document.getElementById('weightUnit'),
        age: document.getElementById('age'),
        gender: document.getElementById('gender'),
        sweatLittle: document.getElementById('sweatLittle'),
        sweatNormal: document.getElementById('sweatNormal'),
        sweatLot: document.getElementById('sweatLot'),
        temperature: document.getElementById('temperature'),
        tempValue: document.getElementById('tempValue'),
        tempUnitF: document.getElementById('tempUnitF'),
        tempUnitC: document.getElementById('tempUnitC'),
        humidity: document.getElementById('humidity'),
        humidityValue: document.getElementById('humidityValue'),
        dietType: document.getElementById('dietType'),
        carbIntake: document.getElementById('carbIntake'),

        lowDuration: document.getElementById('lowDuration'),
        mediumDuration: document.getElementById('mediumDuration'),
        highDuration: document.getElementById('highDuration'),
        totalSummary: document.getElementById('totalSummary'),
        sodiumNeeds: document.getElementById('sodiumNeeds'),
        sodiumDescription: document.getElementById('sodiumDescription'),
        packetsNeeded: document.getElementById('packetsNeeded'),
        baseNeeds: document.getElementById('baseNeeds'),
        activityLoss: document.getElementById('activityLoss'),
        currentIntake: document.getElementById('currentIntake'),
        sodiumDeficit: document.getElementById('sodiumDeficit')
      };
      
      // Set default values
      function setDefaultValues() {
        if (elements.bodyWeight) elements.bodyWeight.value = '150';
        if (elements.age) elements.age.value = '30';
        if (elements.temperature) elements.temperature.value = '70';
        if (elements.humidity) elements.humidity.value = '50';
      }
      
      // Helper functions
      const toCelsius = (f) => (f - 32) * 5 / 9;
      const toFahrenheit = (c) => (c * 9 / 5) + 32;

      // Update display functions
      function updateSweatRateButtons() {
        // Remove active class from all buttons
        document.querySelectorAll('.sweat-btn').forEach(btn => {
          btn.classList.remove('active');
        });
        
        // Add active class to the button that matches current sweat rate
        if (currentSweatRate === 0.3 && elements.sweatLittle) {
          elements.sweatLittle.classList.add('active');
        } else if (currentSweatRate === 0.8 && elements.sweatNormal) {
          elements.sweatNormal.classList.add('active');
        } else if (currentSweatRate === 2.0 && elements.sweatLot) {
          elements.sweatLot.classList.add('active');
        }
      }

      function updateTemperatureDisplay() {
        if (elements.temperature && elements.tempValue) {
          const value = parseFloat(elements.temperature.value);
          if (temperatureUnit === 'F') {
            elements.tempValue.textContent = `${value}°F`;
          } else {
            elements.tempValue.textContent = `${toCelsius(value).toFixed(0)}°C`;
          }
        }
      }

      function updateHumidityDisplay() {
        if (elements.humidity && elements.humidityValue) {
          const value = parseFloat(elements.humidity.value);
          elements.humidityValue.textContent = `${value}%`;
        }
      }

      function updateTempUnitButtons() {
        if (elements.tempUnitF && elements.tempUnitC) {
          if (temperatureUnit === 'F') {
            elements.tempUnitF.style.background = 'var(--teal)';
            elements.tempUnitF.style.color = '#000';
            elements.tempUnitC.style.background = 'rgba(102, 179, 169, 0.3)';
            elements.tempUnitC.style.color = 'var(--teal)';
          } else {
            elements.tempUnitC.style.background = 'var(--teal)';
            elements.tempUnitC.style.color = '#000';
            elements.tempUnitF.style.background = 'rgba(102, 179, 169, 0.3)';
            elements.tempUnitF.style.color = 'var(--teal)';
          }
        }
      }

      // Calculate functions
      function getEstimatedCurrentSodiumByDietType() {
        if (!elements.dietType) return 2250;
        const dietType = elements.dietType.value;
        switch (dietType) {
          case 'low-sodium':
            return 1100; // Reduced from 1250 for more accuracy
          case 'standard':
            return 1700; // Changed from 2300 to 1700mg for balanced diet with moderate carbs
          case 'high-processed':
            return 3800; // Increased from 3500 (more realistic for processed food diets)
          default:
            return 1700; // Changed default to match standard
        }
      }

      function calculateEstimatedDailySodiumNeeds() {
        const age = parseFloat(elements.age?.value) || 30;
        const gender = elements.gender?.value || 'male';
        
        // More precise age-based base needs (based on WHO and IOM guidelines)
        let baseNeeds = 1500;
        if (age < 1) baseNeeds = 370;
        else if (age >= 1 && age < 3) baseNeeds = 1000;
        else if (age >= 3 && age < 8) baseNeeds = 1200;
        else if (age >= 8 && age < 14) baseNeeds = 1500;
        else if (age >= 14 && age < 18) baseNeeds = 1500;
        else if (age >= 18 && age <= 50) baseNeeds = 1500;
        else if (age > 50 && age <= 70) baseNeeds = 1300;
        else if (age > 70) baseNeeds = 1200;

        // More accurate gender adjustments based on body composition
        if (gender === 'female') {
          baseNeeds = Math.round(baseNeeds * 0.88); // More precise than 0.85
        }

        // Enhanced weight-based calculations using body surface area
        const weight = parseFloat(elements.bodyWeight?.value) || 70;
        const weightUnit = elements.weightUnit?.value || 'lbs';
        let weightInKg = weightUnit === 'lbs' ? weight * 0.453592 : weight;
        
        // Use body surface area for more accurate scaling (DuBois formula)
        const height = 170; // Assume average height if not provided
        const bsa = 0.007184 * Math.pow(weightInKg, 0.425) * Math.pow(height, 0.725);
        const standardBSA = 1.73; // Standard body surface area
        const weightFactor = bsa / standardBSA;

        // More precise carb intake adjustments based on research
        const carbIntake = elements.carbIntake?.value || 'moderate';
        let carbMultiplier = 1.0;
        switch(carbIntake) {
          case 'ketogenic': carbMultiplier = 1.4; break; // Increased for ketosis
          case 'low': carbMultiplier = 1.2; break; // More accurate for low carb
          case 'high': carbMultiplier = 0.9; break; // Slightly higher for high carb
        }

        // Enhanced sweat rate calculations
        const sweatRate = currentSweatRate;
        
        const activityInfo = calculateActivityFromSelections();
        const totalActivityMins = activityInfo.totalMinutes;
        let activitySodium = 0;
        
        if (totalActivityMins > 0) {
          const activityHours = totalActivityMins / 60;
          const averageIntensity = activityInfo.weightedActivity / activityHours;
          
          // More accurate sweat rate adjustment based on activity intensity
          let adjustedSweatRate = sweatRate * (0.5 + averageIntensity * 0.5) * weightFactor;
          
          // Enhanced temperature calculations with more granular ranges
          let tempInF = temperatureUnit === 'F' ? parseFloat(elements.temperature?.value || 70) : toFahrenheit(parseFloat(elements.temperature?.value || 70));
          let climateMultiplier = 1.0;
          
          if (tempInF < 32) climateMultiplier = 0.6; // Freezing
          else if (tempInF >= 32 && tempInF < 50) climateMultiplier = 0.8;
          else if (tempInF >= 50 && tempInF < 65) climateMultiplier = 0.9;
          else if (tempInF >= 65 && tempInF <= 75) climateMultiplier = 1.0;
          else if (tempInF > 75 && tempInF <= 80) climateMultiplier = 1.2;
          else if (tempInF > 80 && tempInF <= 85) climateMultiplier = 1.4;
          else if (tempInF > 85 && tempInF <= 90) climateMultiplier = 1.6;
          else if (tempInF > 90 && tempInF <= 95) climateMultiplier = 1.8;
          else if (tempInF > 95) climateMultiplier = 2.0;

          // More precise humidity adjustments
          const humidity = parseFloat(elements.humidity?.value || 50);
          let humidityMultiplier = 1.0;
          if (humidity <= 15) humidityMultiplier = 0.8;
          else if (humidity > 15 && humidity <= 30) humidityMultiplier = 0.85;
          else if (humidity > 30 && humidity <= 45) humidityMultiplier = 0.9;
          else if (humidity > 45 && humidity <= 60) humidityMultiplier = 1.0;
          else if (humidity > 60 && humidity <= 75) humidityMultiplier = 1.1;
          else if (humidity > 75 && humidity <= 85) humidityMultiplier = 1.2;
          else if (humidity > 85) humidityMultiplier = 1.3;

          // More accurate sodium concentration in sweat (varies by individual)
          // Use a deterministic value based on user factors for consistency
          let sodiumConcentration = 900 + (weightInKg * 1.5) + (age * 0.3); // Deterministic calculation
          // Constrain to realistic range (600-1400 mg/L)
          sodiumConcentration = Math.max(600, Math.min(1400, sodiumConcentration));
          
          activitySodium = adjustedSweatRate * climateMultiplier * humidityMultiplier * sodiumConcentration * activityHours;
        }

        // Add acclimatization factor (reduces needs over time in hot environments)
        const acclimatizationFactor = 0.95; // 5% reduction for acclimatized individuals
        
        // Calculate total needs with more precise rounding
        const totalNeeds = Math.round((baseNeeds + activitySodium) * carbMultiplier * acclimatizationFactor);
        
        // More conservative safety limits
        const minNeeds = age < 18 ? 1200 : age > 70 ? 1200 : 1500;
        const maxNeeds = 6000; // Reduced from 8000 for safety

        return {
          baseNeeds: Math.round(baseNeeds),
          activitySodium: Math.round(activitySodium),
          totalNeeds: Math.max(minNeeds, Math.min(maxNeeds, totalNeeds))
        };
      }

      function calculateSaltPacketRecommendation() {
        const needsData = calculateEstimatedDailySodiumNeeds();
        const currentSodium = getEstimatedCurrentSodiumByDietType();
        const sodiumDeficit = Math.max(0, needsData.totalNeeds - currentSodium);
        const neededServings = sodiumDeficit / PACKET_SODIUM;

        return {
          neededServings: neededServings,
          deficit: sodiumDeficit
        };
      }

      function calculateActivityFromSelections() {
        let totalActivityMinutes = 0;
        let weightedActivity = 0;
        
        const lowDuration = parseInt(elements.lowDuration?.value) || 0;
        const mediumDuration = parseInt(elements.mediumDuration?.value) || 0;
        const highDuration = parseInt(elements.highDuration?.value) || 0;
        
        // More accurate intensity multipliers based on research
        if (lowDuration > 0) {
          weightedActivity += (lowDuration / 60) * 0.4; // Increased from 0.3
          totalActivityMinutes += lowDuration;
        }
        if (mediumDuration > 0) {
          weightedActivity += (mediumDuration / 60) * 0.7; // Increased from 0.6
          totalActivityMinutes += mediumDuration;
        }
        if (highDuration > 0) {
          weightedActivity += (highDuration / 60) * 1.2; // Increased from 1.0
          totalActivityMinutes += highDuration;
        }
        
        return {
          totalMinutes: totalActivityMinutes,
          weightedActivity: weightedActivity
        };
      }

      function updateActivitySummary() {
        if (elements.totalSummary) {
          const lowDuration = parseInt(elements.lowDuration?.value) || 0;
          const mediumDuration = parseInt(elements.mediumDuration?.value) || 0;
          const highDuration = parseInt(elements.highDuration?.value) || 0;
          const totalDuration = lowDuration + mediumDuration + highDuration;
          elements.totalSummary.textContent = `${totalDuration} minutes`;
        }
      }

      function updateResults() {
        const needsData = calculateEstimatedDailySodiumNeeds();
        const currentSodium = getEstimatedCurrentSodiumByDietType();
        const saltPacketRecommendation = calculateSaltPacketRecommendation();

        if (elements.sodiumNeeds) elements.sodiumNeeds.textContent = `${needsData.totalNeeds} mg`;
        if (elements.sodiumDescription) elements.sodiumDescription.textContent = `Daily sodium needs`;
        if (elements.baseNeeds) elements.baseNeeds.textContent = `${needsData.baseNeeds} mg`;
        if (elements.activityLoss) elements.activityLoss.textContent = `${needsData.activitySodium} mg`;
        if (elements.currentIntake) elements.currentIntake.textContent = `${currentSodium} mg`;
        if (elements.sodiumDeficit) elements.sodiumDeficit.textContent = `${saltPacketRecommendation.deficit} mg`;
        if (elements.packetsNeeded) {
          elements.packetsNeeded.textContent = saltPacketRecommendation.neededServings > 0 ? 
            `${saltPacketRecommendation.neededServings.toFixed(1)}` : "0";
        }
      }

      // Event listeners
      // Sweat rate button listeners
      if (elements.sweatLittle) {
        elements.sweatLittle.addEventListener('click', () => {
          currentSweatRate = 0.3;
          updateSweatRateButtons();
          updateResults();
        });
      }
      
      if (elements.sweatNormal) {
        elements.sweatNormal.addEventListener('click', () => {
          currentSweatRate = 0.8;
          updateSweatRateButtons();
          updateResults();
        });
      }
      
      if (elements.sweatLot) {
        elements.sweatLot.addEventListener('click', () => {
          currentSweatRate = 2.0;
          updateSweatRateButtons();
          updateResults();
        });
      }

      if (elements.temperature) {
        elements.temperature.addEventListener('input', () => {
          updateTemperatureDisplay();
          updateResults();
        });
      }

      if (elements.humidity) {
        elements.humidity.addEventListener('input', () => {
          updateHumidityDisplay();
          updateResults();
        });
      }

      if (elements.tempUnitF) {
        elements.tempUnitF.addEventListener('click', () => {
          temperatureUnit = 'F';
          updateTemperatureDisplay();
          updateTempUnitButtons();
          updateResults();
        });
      }

      if (elements.tempUnitC) {
        elements.tempUnitC.addEventListener('click', () => {
          temperatureUnit = 'C';
          updateTemperatureDisplay();
          updateTempUnitButtons();
          updateResults();
        });
      }

      // Activity dropdown event listeners
      if (elements.lowDuration) {
        elements.lowDuration.addEventListener('change', function() {
          updateActivitySummary();
          updateResults();
        });
      }

      if (elements.mediumDuration) {
        elements.mediumDuration.addEventListener('change', function() {
          updateActivitySummary();
          updateResults();
        });
      }

      if (elements.highDuration) {
        elements.highDuration.addEventListener('change', function() {
          updateActivitySummary();
          updateResults();
        });
      }

      // Add event listeners for all form inputs
      [elements.bodyWeight, elements.weightUnit, elements.age, elements.gender, elements.dietType, elements.carbIntake].forEach(element => {
        if (element) {
          element.addEventListener('input', updateResults);
          element.addEventListener('change', updateResults);
        }
      });

      // Initialize calculator
      setDefaultValues();
      updateSweatRateButtons();
      updateTemperatureDisplay();
      updateHumidityDisplay();
      updateTempUnitButtons();
      updateActivitySummary();
      updateResults();
      
      // Draggable results sidebar
      function initDraggableResults() {
        const resultsSidebar = document.querySelector('.results-sidebar');
        if (!resultsSidebar) return;
        
        let isDragging = false;
        let currentX;
        let currentY;
        let initialX;
        let initialY;
        let xOffset = 0;
        let yOffset = 0;
        
        // Load saved position from localStorage
        const savedPosition = localStorage.getItem('resultsSidebarPosition');
        if (savedPosition) {
          const position = JSON.parse(savedPosition);
          xOffset = position.x;
          yOffset = position.y;
          setTranslate(xOffset, yOffset, resultsSidebar);
        } else {
          // Set initial position to bottom right if no saved position
          xOffset = 0;
          yOffset = 0;
        }
        
        function dragStart(e) {
          if (e.type === "touchstart") {
            initialX = e.touches[0].clientX - xOffset;
            initialY = e.touches[0].clientY - yOffset;
          } else {
            initialX = e.clientX - xOffset;
            initialY = e.clientY - yOffset;
          }
          
          if (e.target === resultsSidebar || resultsSidebar.contains(e.target)) {
            isDragging = true;
            resultsSidebar.classList.add('dragging');
          }
        }
        
        function dragEnd(e) {
          initialX = currentX;
          initialY = currentY;
          isDragging = false;
          resultsSidebar.classList.remove('dragging');
          
          // Snap to nearest corner
          snapToCorner();
          
          // Save position to localStorage
          localStorage.setItem('resultsSidebarPosition', JSON.stringify({
            x: xOffset,
            y: yOffset
          }));
        }
        
        function snapToCorner() {
          const sidebar = resultsSidebar;
          const sidebarRect = sidebar.getBoundingClientRect();
          const windowWidth = window.innerWidth;
          const windowHeight = window.innerHeight;
          const sidebarWidth = sidebarRect.width;
          const sidebarHeight = sidebarRect.height;
          
          // Calculate current center position
          const centerX = sidebarRect.left + sidebarWidth / 2;
          const centerY = sidebarRect.top + sidebarHeight / 2;
          
          // Determine which corner to snap to
          let newX, newY;
          
          if (centerX < windowWidth / 2) {
            // Snap to left side
            newX = 20;
          } else {
            // Snap to right side
            newX = windowWidth - sidebarWidth - 20;
          }
          
          if (centerY < windowHeight / 2) {
            // Snap to top side (with space for header)
            newY = 100;
          } else {
            // Snap to bottom side
            newY = windowHeight - sidebarHeight - 20;
          }
          
          // Calculate transform values
          // The sidebar starts at bottom-right, so we need to calculate the transform from there
          const startX = windowWidth - sidebarWidth - 20; // Original bottom-right X
          const startY = windowHeight - sidebarHeight - 20; // Original bottom-right Y
          
          const transformX = newX - startX;
          const transformY = newY - startY;
          
          // Update offsets
          xOffset = transformX;
          yOffset = transformY;
          
          // Smooth animation to target position
          sidebar.style.transition = 'transform 0.3s ease-out';
          setTranslate(transformX, transformY, sidebar);
          
          // Remove transition after animation
          setTimeout(() => {
            sidebar.style.transition = '';
          }, 300);
        }
        
        function drag(e) {
          if (isDragging) {
            e.preventDefault();
            
            if (e.type === "touchmove") {
              currentX = e.touches[0].clientX - initialX;
              currentY = e.touches[0].clientY - initialY;
            } else {
              currentX = e.clientX - initialX;
              currentY = e.clientY - initialY;
            }
            
            // Constrain to screen boundaries
            const sidebar = resultsSidebar;
            const sidebarRect = sidebar.getBoundingClientRect();
            const windowWidth = window.innerWidth;
            const windowHeight = window.innerHeight;
            const sidebarWidth = sidebarRect.width;
            const sidebarHeight = sidebarRect.height;
            
            // Calculate boundaries
            const maxX = windowWidth - sidebarWidth - 20;
            const maxY = windowHeight - sidebarHeight - 20;
            const minX = 20;
            const minY = 100; // Keep space for header
            
            // Constrain current position
            currentX = Math.max(minX - (windowWidth - sidebarWidth - 20), Math.min(maxX - (windowWidth - sidebarWidth - 20), currentX));
            currentY = Math.max(minY - (windowHeight - sidebarHeight - 20), Math.min(maxY - (windowHeight - sidebarHeight - 20), currentY));
            
            xOffset = currentX;
            yOffset = currentY;
            
            setTranslate(currentX, currentY, sidebar);
          }
        }
        
        function setTranslate(xPos, yPos, el) {
          el.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`;
        }
        
        // Mouse events
        resultsSidebar.addEventListener('mousedown', dragStart);
        document.addEventListener('mousemove', drag);
        document.addEventListener('mouseup', dragEnd);
        
        // Touch events for mobile
        resultsSidebar.addEventListener('touchstart', dragStart, { passive: false });
        document.addEventListener('touchmove', drag, { passive: false });
        document.addEventListener('touchend', dragEnd);
        
        // Prevent text selection while dragging
        resultsSidebar.addEventListener('selectstart', (e) => e.preventDefault());
        
        // Handle window resize to keep sidebar in bounds
        window.addEventListener('resize', () => {
          const sidebar = resultsSidebar;
          const sidebarRect = sidebar.getBoundingClientRect();
          const windowWidth = window.innerWidth;
          const windowHeight = window.innerHeight;
          const sidebarWidth = sidebarRect.width;
          const sidebarHeight = sidebarRect.height;
          
          // Check if sidebar is outside bounds
          const maxX = windowWidth - sidebarWidth - 20;
          const maxY = windowHeight - sidebarHeight - 20;
          const minX = 20;
          const minY = 100;
          
          let needsReposition = false;
          let newX = xOffset;
          let newY = yOffset;
          
          // Calculate current position
          const currentX = windowWidth - sidebarWidth - 20 + xOffset;
          const currentY = windowHeight - sidebarHeight - 20 + yOffset;
          
          if (currentX < minX) {
            newX = minX - (windowWidth - sidebarWidth - 20);
            needsReposition = true;
          } else if (currentX > maxX) {
            newX = maxX - (windowWidth - sidebarWidth - 20);
            needsReposition = true;
          }
          
          if (currentY < minY) {
            newY = minY - (windowHeight - sidebarHeight - 20);
            needsReposition = true;
          } else if (currentY > maxY) {
            newY = maxY - (windowHeight - sidebarHeight - 20);
            needsReposition = true;
          }
          
          if (needsReposition) {
            xOffset = newX;
            yOffset = newY;
            setTranslate(newX, newY, sidebar);
          }
        });
      }
      
      // Initialize draggable functionality
      initDraggableResults();
      

      // 3D Background Animation
      try {
        if (typeof THREE !== 'undefined') {
          const canvas = document.getElementById('bg-canvas');
          const renderer = new THREE.WebGLRenderer({ canvas, alpha: true });
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.setClearColor(0x000000, 0);

      // Create particles
      const particlesGeometry = new THREE.BufferGeometry();
      const particlesCount = 1000;
      const posArray = new Float32Array(particlesCount * 3);

      for (let i = 0; i < particlesCount * 3; i++) {
        posArray[i] = (Math.random() - 0.5) * 5;
      }

      particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));

      const particlesMaterial = new THREE.PointsMaterial({
        size: 0.005,
        color: 0x66B3A9,
        transparent: true,
        opacity: 0.8,
        blending: THREE.AdditiveBlending
      });

      const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);
      scene.add(particlesMesh);

      camera.position.z = 2;

      // Mouse movement effect
      let mouseX = 0;
      let mouseY = 0;

      document.addEventListener('mousemove', (event) => {
        mouseX = event.clientX / window.innerWidth - 0.5;
        mouseY = event.clientY / window.innerHeight - 0.5;
      });

      // Animation loop
      function animate() {
        requestAnimationFrame(animate);

        particlesMesh.rotation.x += 0.001;
        particlesMesh.rotation.y += 0.001;

        // Mouse interaction
        particlesMesh.rotation.x += mouseY * 0.01;
        particlesMesh.rotation.y += mouseX * 0.01;

        renderer.render(scene, camera);
      }

      animate();

      // Handle window resize
      window.addEventListener('resize', () => {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
      });

        }
      } catch (error) {
        console.log('Three.js background failed:', error);
      }

      // GSAP Animations
      try {
        if (typeof gsap !== 'undefined') {
          gsap.registerPlugin(ScrollTrigger);

      // Simple fade in animation for all elements
      gsap.fromTo('.calculator-section', 
        { 
          opacity: 0, 
          y: 20 
        },
        {
          opacity: 1,
          y: 0,
          duration: 0.6,
          ease: "power2.out",
          stagger: 0.1
        }
      );

      // Animate results sidebar
      gsap.fromTo('.results-sidebar',
        { 
          opacity: 0, 
          y: 20 
        },
        {
          opacity: 1,
          y: 0,
          duration: 0.6,
          ease: "power2.out",
          delay: 0.2
        }
      );

      // Animate title
      gsap.fromTo('.calculator-title',
        { 
          opacity: 0, 
          y: -20 
        },
        {
          opacity: 1,
          y: 0,
          duration: 0.6,
          ease: "power2.out"
        }
      );

        }
      } catch (error) {
        console.log('GSAP animations failed:', error);
      }

      // Page-specific calculator functionality preserved
      
      // Direct toggleMenu function for calculator page
      window.toggleMenu = function() {
        const hamburger = document.getElementById('hamburger');
        const mobileNav = document.getElementById('mobile-nav');
        
        if (hamburger && mobileNav) {
          const isOpen = mobileNav.classList.contains('open');
          
          if (isOpen) {
            mobileNav.classList.remove('open');
            hamburger.classList.remove('active');
          } else {
            mobileNav.classList.add('open');
            hamburger.classList.add('active');
          }
        }
      };
    });
  </script>
</body>
</html>