/* BASIC RESET */
    * { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; }
   
    /* HEADER */
     h1 { text-align: center; margin-top: 30px; font-size: 1.5rem; }
    /* CONTAINER */
    .propertycontainer {
      width: 95%; max-width: 500px;
      margin: 1rem auto;
      background-color: #fff; border: 1px solid #2c3e50;
      padding: 1rem;
    }
    /* INFO BOXES */
    .rate-boxes { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
    .rate-box { background-color: #000; color: #fff; padding: 0.5rem; border-radius: 4px; font-size: 0.9rem; }
    /* FORM */
    .form-group { margin-bottom: 1rem; display: flex; flex-direction: column; }
    .form-group label { font-weight: bold; margin-bottom: 0.25rem; }
    .form-group select, .form-group input { padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; }
    /* Button to add more property fields */
    #addPropertyBtn {
      background-color: #36A2EB; color: #fff; border: none;
      padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; font-size: 0.9rem;
      margin-top: 0.5rem;
margin-bottom: 20px;
    }
    #addPropertyBtn:hover { background-color: #2a8ac6;}
    /* BUTTONS */
    .button-group { display: flex; gap: 1rem; margin-top: 1rem; justify-content: flex-start; }
    .button-group button {
      background-color: #2c3e50; color: #fff; border: none;
      padding: 0.7rem 1rem; border-radius: 4px; cursor: pointer; font-size: 1rem;
    }
    .button-group button:hover { background-color: #2a36a5; }
    /* MESSAGE */
    #message { margin-top: 0.5rem; color: red; font-weight: bold; }
    /* RESULTS SECTION & TABLE */
    .results { margin-top: 1rem; padding: 1rem; background-color: #f3f3f3;
      border: 1px solid #ddd; border-radius: 4px; display: none; }
    .results table { width: 100%; border-collapse: collapse; }
    .results table, .results th, .results td { border: 1px solid #ccc; }
    .results th, .results td { padding: 0.5rem; text-align: center; }
    .results th { background-color: #f0f0f0; }
    /* Make table scrollable on mobile */
    .table-container { overflow-x: auto; }
    /* Currency Rates Table */
    #currencyTableContainer { width: 100%; display: none; margin-top: 1rem; }
    #currencyTableContainer table { width: 100%; border-collapse: collapse; }
    #currencyTableContainer, #currencyTableContainer th, #currencyTableContainer td { border: 1px solid #ccc; }
    #currencyTableContainer th, #currencyTableContainer td { padding: 0.5rem; text-align: center; }
    #currencyTableContainer th { background-color: #f0f0f0; }
    /* Toggle Button */
    #toggleRatesBtn {
      background-color: #2c3e50; color: #fff; border: none;
      padding: 0.2rem 0.5rem; border-radius: 4px; cursor: pointer; font-size: 1rem;
      margin-top: 1rem;
    }
    #toggleRatesBtn:hover { background-color: #2a36a5; }
    /* Chart Container - reduced size */
    #chartContainer {
      width: 250px;
      margin: 1rem auto;
    }
    /* RESPONSIVE */
    @media (max-width: 480px) {
      .container { width: 95%; padding: 0.5rem; }
      .button-group { flex-direction: column; gap: 0.5rem; }
    }