@font-face {
      font-family: 'Baloo Bhaijaan 2';
      src: url('https://quamtex.ir/fonts/webfonts/baloo-bhaijaan-2-arabic-500-normal.woff') format('woff');
      font-weight: normal; font-style: normal; font-display: swap;
    }
    
    :root {
        --primary: #112548;
        --primary-hover: #1e3a6e;
        --accent: #3b82f6; /* رنگ آبی روشن برای تاکید */
        --bg-input: #f8fafc;
        --border-light: #e2e8f0;
        --text-muted: #64748b;
    }

    body {
      background-color: #dae0e2;
      font-family: "Baloo Bhaijaan 2", arial;
      margin: 0; padding: 0; box-sizing: border-box;
    }
 
    /* کانتینر اصلی */
.main-container {
  display: flex;
  flex-direction: row;
}

.main-content {
      padding: clamp(1rem, 2vw, 2rem);
      margin: clamp(0.5rem, 1.5vw, 1.5rem);
      background-color: #ffffff;
      border-radius: 24px;
      font-size: clamp(0.938rem, 0.842rem + 0.426vw, 1.188rem);
      text-align: center;
      /* مدرن‌سازی سایه کانتینر اصلی */
      border: 1px solid rgba(255, 255, 255, 0.5);
      color: var(--primary);
      width: 100%;
      direction: rtl;
}

    h1 { margin-bottom: 30px; font-size: clamp(1.5rem, 2vw, 2rem); }

    /* گرید فرم */
    .bmi {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      background: #ffffff;
      border: 2px solid var(--border-light);
      border-radius: 24px;
      padding: 30px;
      margin-bottom: 30px;
    }

    /* استایل اینپوت گروپ‌ها برای اضافه کردن آیکون */
    .input-group {
      display: flex;
      flex-direction: column;
      position: relative;
    }

    .input-group label {
      font-size: 0.9rem;
      color: var(--text-muted);
      margin-bottom: 8px;
      text-align: right;
      font-weight: bold;
    }

    .input-wrapper {
        position: relative;
        display: flex;
        align-items: center;
    }

    .input-icon {
        position: absolute;
        right: 15px;
        color: var(--primary);
        z-index: 1;
        pointer-events: none;
    }

    /* اینپوت‌ها و سلکت‌ها */
    input, select {
      width: 100%;
      height: 50px;
      border: 2px solid var(--border-light);
      background-color: var(--bg-input);
      border-radius: 16px;
      padding: 0 45px 0 15px; /* فضای خالی برای آیکون */
      font-family: "Baloo Bhaijaan 2", sans-serif;
      font-size: 16px;
      color: var(--primary);
      outline: none;
      transition: all 0.3s ease;
      box-sizing: border-box;
      /* حذف استایل‌های پیش‌فرض قدیمی */
      margin: 0; bottom: 0; box-shadow: none;
    }

    input:focus, select:focus {
      border-color: var(--primary);
      background-color: #fff;
      box-shadow: 0 0 0 4px rgba(17, 37, 72, 0.1);
    }

    /* دکمه محاسبه */
    button.pop {
      grid-column: span 2;
      width: 60%;
      min-width: 200px;
      height: 55px;
      margin: 20px auto 0;
      background: linear-gradient(135deg, var(--primary) 0%, #2c4a85 100%);
      color: white;
      border: none;
      border-radius: 20px;
      font-size: 1.2rem;
      font-family: "Baloo Bhaijaan 2", sans-serif;
      cursor: pointer;
      box-shadow: 0 10px 20px rgba(17, 37, 72, 0.2);
      transition: all 0.3s ease;
    }

    button.pop:hover {
      transform: translateY(-3px);
      box-shadow: 0 15px 25px rgba(17, 37, 72, 0.3);
    }

    /* بخش نتایج - مدرن شده */
    .results {
      grid-column: span 2;
      background-color: #f0f9ff;
      border: 2px dashed #bae6fd;
      border-radius: 20px;
      padding: 20px;
      margin-top: 25px;
      display: none; /* در ابتدا مخفی */
      flex-direction: column;
      align-items: center;
      gap: 10px;
      animation: fadeIn 0.5s ease-out;
    }
    
    .results.active { display: flex; }

    .result-main {
        font-size: 1.8rem;
        color: var(--primary);
        font-weight: bold;
    }

    .result-sub {
        font-size: 1.1rem;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .glass-icon { color: #3b82f6; font-size: 1.2rem; }

    /* -----------------------------------------------------------
       امکانات جدید: سوییچ آب و هوا
    ----------------------------------------------------------- */
    .weather-toggle {
        grid-column: span 2;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-top: 10px;
        background: #fffbeb;
        padding: 10px;
        border-radius: 12px;
        border: 1px solid #fcd34d;
    }

    .switch {
      position: relative;
      display: inline-block;
      width: 50px;
      height: 28px;
    }

    .switch input { opacity: 0; width: 0; height: 0; }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0; left: 0; right: 0; bottom: 0;
      background-color: #ccc;
      transition: .4s;
      border-radius: 34px;
    }

    .slider:before {
      position: absolute;
      content: "";
      height: 20px; width: 20px;
      left: 4px; bottom: 4px;
      background-color: white;
      transition: .4s;
      border-radius: 50%;
    }

    input:checked + .slider { background-color: #f59e0b; }
    input:checked + .slider:before { transform: translateX(22px); }

    /* ریسپانسیو */
    @media (max-width: 768px) {
        .bmi {         display: flex;
        flex-direction: column; gap: 15px; }
        button.pop { width: 100%; }
        .weather-toggle, .results { grid-column: span 1; }
    }

    /* توضیحات */
    .description {
      border: 2px solid var(--border-light);
      border-radius: 20px;
      padding: 25px;
      text-align: right;
      line-height: 1.8;
      background: #fff;
    }
    
    .description-title { 
        color: var(--primary); 
        border-bottom: 2px solid #f1f5f9; 
        padding-bottom: 10px; 
        margin-bottom: 15px;
    }

    /* نوتیفیکیشن */
    .notification {
        position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
        background: #fee2e2; border: 1px solid #ef4444; color: #b91c1c;
        padding: 15px 25px; border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        z-index: 1000; opacity: 0; pointer-events: none; transition: all 0.3s;
        display: flex; align-items: center; gap: 10px;
        font-size: medium;
    }
    .notification.show { opacity: 1; top: 90px; }

    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }