@charset "utf-8";
/* CSS Document */

 * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
            display: flex;
    flex-direction: column;
    min-height: 100vh;
    }

    #map {
/*      height: 100%;*/
      width: 100%;  
        flex: 1 1 auto;
    min-height: 0;          /* important for flexbox overflow */   
    position: relative;     /* handy if you position stuff inside the map */
    overflow: hidden;
        border-top: 3px solid white;
    }

    .top-controls {
    position: absolute;
    z-index: 1000;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.95);
    padding: 8px 10px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    }

    .top-controls form {
      display: flex;
      gap: 6px;
      align-items: center;
      margin: 0;
    }

    .top-controls input[type="text"] {
      padding: 4px 6px;
      border-radius: 4px;
      border: 1px solid #ccc;
      min-width: 220px;
      max-width: 260px;
    }

    .top-controls button {
      padding: 4px 8px;
      border-radius: 4px;
      border: 1px solid #999;
      background: #f5f5f5;
      cursor: pointer;
      font-size: 0.85rem;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .top-controls button:hover:not(:disabled) {
      background: #e8e8e8;
    }

    .top-controls button:disabled {
      opacity: 0.5;
      cursor: default;
    }

    @media (max-width: 600px) {
      .top-controls {
        top: 5px;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 10px);
        box-sizing: border-box;
      }

      .top-controls input[type="text"] {
        min-width: 0;
        flex: 1 1 auto;
      }
    }

    /* --- Modal styles --- */

    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.55);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 22000;
    }

    .modal-hidden {
      display: none;
    }

    .modal-dialog {
      background: #ffffff;
      padding: 18px 20px 16px;
      border-radius: 8px;
      max-width: 360px;
      width: 90%;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
      box-sizing: border-box;
    }

    .modal-dialog h2 {
      margin: 0 0 8px;
      font-size: 1.1rem;
    }

    .modal-dialog p {
      margin: 0 0 10px;
      font-size: 0.9rem;
      line-height: 1.3;
    }

    .modal-dialog input[type="email"] {
      width: 100%;
      box-sizing: border-box;
      padding: 6px 8px;
      border-radius: 4px;
      border: 1px solid #ccc;
      margin-bottom: 10px;
      font-size: 0.9rem;
    }

    .modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 4px;
    }

    .modal-actions button {
      padding: 5px 10px;
      border-radius: 4px;
      border: 1px solid #999;
      background: #f5f5f5;
      cursor: pointer;
      font-size: 0.85rem;
    }

    .modal-actions button.primary {
      background: #1e88e5;
      border-color: #1e88e5;
      color: #fff;
    }

    .modal-actions button.primary:disabled {
      opacity: 0.6;
      cursor: default;
    }

    .modal-status {
      margin-top: 6px;
      font-size: 0.8rem;
      min-height: 1em;
    }

    .modal-status.error {
      color: #c62828;
    }

    .modal-status.ok {
      color: #2e7d32;
    }
 
  /* refactored with chatGPT 17/11/2025 11:00 UK */

/* Full-screen wrapper: centered, but lets clicks pass through outside the box */
.instructions-modal {
    position: fixed;
    inset: 0;                    /* top:0; right:0; bottom:0; left:0 */
    z-index: 9999;
    display: flex;
    align-items: center;         /* vertical center */
    justify-content: center;     /* horizontal center */
    pointer-events: none;        /* allow background interaction outside the window */
    transition: opacity 0.2s ease, transform 0.2s ease;
    opacity: 1;
    transform: translateY(0);
}

/* The actual “message box” */
.instructions-modal__window {
    pointer-events: auto;        /* box itself captures clicks */
    max-width: 420px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
    padding: 1.5rem 1.8rem 1.6rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #222;
    position: absolute;
    bottom:10%;
    
}

/* Title */
.instructions-modal__window h2 {
    font-size: 18px;
    margin: 0 0 0.75rem;
}

/* Close button (X) */
.instructions-modal__close {
    position: absolute;
    top: 0.5rem;
    right: 0.6rem;
    border: none;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #666;
}

.instructions-modal__close:hover {
    color: #000;
}

/* List styling */
.instructions-modal__list {
    margin: 0;
    padding-left: 1.25rem;
}

.instructions-modal__list li + li {
    margin-top: 0.4rem;
}

/* Hidden state */
.instructions-modal.is-hidden {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
}

/* Optional: small-screen tweak */
@media (max-width: 600px) {
    .instructions-modal__window {
        width: calc(100% - 2rem);
        max-width: 100%;
    }
}

 
#buttonsRow {
    width:auto;
}