/* Clean, page-scoped styling for gatekeeper_demo.php.
   Loaded AFTER ../styleGatekeeper.css (and the header's site CSS), so these
   rules win without having to edit any shared stylesheet. */

/* styleGatekeeper.css makes .content a wrapping flex row, which pushes the
   buttons up beside the viewer. Stack everything vertically instead and keep
   the column centred at the viewer's width. */
.content {
    display: block;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Buttons sit in a centred row directly below the viewer. */
.zoom-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

.zoom-buttons button {
    font-family: inherit;
    font-size: 15px;
    padding: 10px 18px;
    border: 1px solid #333;
    border-radius: 0;
    background: #fff;
    color: #222;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.zoom-buttons button:hover {
    background: #222;
    color: #fff;
}

/* Sighting info on its own line, centred below the buttons. */
#sightingInfo {
    margin-top: 14px;
    min-height: 1.2em;
    text-align: center;
    color: #555;
    font-size: 15px;
}