.form-container {
      max-width: 600px;
      background-color: #f8f8f8;
      border-left: 4px solid #f6a20e;
      padding: 24px; /* Increased to QGDS margin standard */
      border-radius: 4px;
      font-size: 16px;
      color: #333333;
      line-height: 1.5;
    }

    .form-container.danger {
      background-color: #fff6f6;
      border-left: 4px solid #e22339;
    }

    .form-container.success {
      background-color: #f7fbf8;
      border-left: 4px solid #339d37;
    }

    .suburb-checker label {
      display: block;
      font-size: 16px;
      margin-bottom: 8px;
      color: #333333;
      font-weight: bold;
    }

    .suburb-checker input[type="text"] {
      width: 100%;
      padding: 12px 15px;
      font-size: 16px;
      border: 1px solid #cccccc;
      border-radius: 4px;
      box-sizing: border-box;
      margin-bottom: 20px;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .suburb-checker input[type="text"]:focus {
      border-color: #007bff;
      box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
      outline: none;
    }

    .suburb-checker button {
      display: inline-block;
      padding: 12px 15px;
      font-size: 16px;
      background-color: #f6a20e;
      color: #000000;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-weight: bold;
      transition: background-color 0.3s ease;
    }

    .suburb-checker button:hover {
      background-color: #000000;
      color: #ffffff;
    }

    .suburb-checker button:disabled {
      background-color: #cccccc;
      color: #666666;
      cursor: not-allowed;
    }

    #outputDiv {
        margin-top: 24px;
    }

    .hidden {
      display: none;
    }

    .suburb-checker ul {
      padding-left: 20px;
    }

    .suburb-checker ul li {
      margin-bottom: 10px;
    }

    .suburb-checker a {
      color: #000000;
      text-decoration: none;
    }

    .suburb-checker a:hover {
      text-decoration: underline;
    }

    .suggestions {
      position: absolute;
      background: #ffffff;
      border: 1px solid #cccccc;
      border-radius: 4px;
      max-height: 250px;
      overflow-y: auto;
      z-index: 1000;
      width: calc(100% - 30px);
      margin-top: -10px;
    }

    .suggestion-item {
      padding: 10px;
      cursor: pointer;
      font-size: 16px;
    }

    .suggestion-item:hover,
    .suggestion-item.active {
      background-color: #f6a20e;
      color: #ffffff;
    }

    .button-group {
      display: flex;
      gap: 10px;
    }

    .focus-visible {
      outline: 2px solid #007bff;
      outline-offset: 2px;
    }