@keyframes spinner-border {
  to { transform: rotate(360deg); }
}

.qg-spinner {
    text-align: left;
    display: flex;
    align-items: center;
}

.qg-spinner .spinner-border {
    color: #000000;
    width: 30px;
    height: 30px;
    margin-right: 1rem;
}
.spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: -0.125em;
    animation-timeline: auto;
    animation-range-start: normal;
    animation-range-end: normal;
    border-width: 0.25em;
    border-style: solid;
    border-color: currentcolor transparent currentcolor currentcolor;
    border-image: initial;
    border-radius: 50%;
    animation: 0.75s linear 0s infinite normal none running spinner-border;
}

    .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;
    }

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

    .address-finder 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;
    }

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

    .address-finder 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;
    }

    .address-finder button:hover {
      background-color: #000000;
      color: #ffffff;
    }

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

    #outputDiv {
        margin-top: 24px;
    }
    
    .hidden {
      display: none;
    }

    .address-finder ul {
      padding-left: 20px;
    }

    .address-finder ul li {
      margin-bottom: 10px;
    }

    .address-finder a {
      color: #000000;
      text-decoration: none;
    }

    .address-finder 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 styles for better visibility */
    .focus-visible {
      outline: 2px solid #007bff;
      outline-offset: 2px;
    }