* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

#content-wrapper {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 20px; 
    gap: 20px;
}

.routes-row {
    display: flex;
    flex-direction: row;
    gap: 5%;
    width: 100%;
    height: 300px;
    border-radius: 15px;
    padding: 10px;
    background-color: goldenrod;
}

.colour-1 {background-color: #440f2a;}
.colour-2 {background-color: #3d668e;}
.colour-3 {background-color: #0f6d44;}
.colour-4 {background-color: #1b1b6b;}
.colour-5 {background-color: #007ca5;}
.colour-6 {background-color: #723d15;}
.colour-7 {background-color: #50098b;}
.colour-8 {background-color: #03806d;}

.string-wrapper {
    display: flex;
    flex-direction: column;
    flex-basis: 30%;
    gap: 8px;
    height: 100%;
}

.text-field {
    flex: 8;
    padding: 10px;
    background-color: #2a2a2a;
    color: #fff;
    border-radius: 4px;
    overflow-y: auto;
    word-break: break-all;
}

.copy-button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: max-content;
    margin: 0 auto;
    padding: 6px 16px;
    background-color: rgb(0, 173, 0);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
}

.copy-button:hover {
    background-color: rgb(0, 200, 0);
}

.img-wrapper {
    display: flex;
    flex: 1; 
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.route-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 15px;
    cursor: pointer;
}

/* Lightbox Overlay Container */
#lightbox-modal {
    display: none;             /* Hidden by default */
    position: fixed;           /* Stays pinned to the screen even when scrolling */
    z-index: 9999;             /* Sits on top of absolutely everything else */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85); /* Smooth dark translucent background */
    justify-content: center;   /* Center horizontally */
    align-items: center;       /* Center vertically */
    cursor: zoom-out;          /* Visual cue that clicking exits */
}

/* Lightbox Image Box */
#lightbox-img {
    max-width: 90%;            /* Leaves a clean margin around the viewport edges */
    max-height: 90%;
    object-fit: contain;       /* Ensures the full map is visible without cropping */
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    
    /* Animation for a slick fade-in effect */
    animation: zoomIn 0.2s ease-out;
}

@keyframes zoomIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}