/*
 HopCycling Slides
*/


* {
    box-sizing: border-box;
}


html,
body {

    margin:0;

    width:100%;
    height:100%;

    overflow:hidden;

    background:#000;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}



/*
 Main photo
*/

#photo {

    position:absolute;

    width:100%;
    height:100%;

    object-fit:contain;

    background:#000;

    opacity:1;

    transition:
        opacity 0.8s ease;
}


.photo-hidden {

    opacity:0 !important;

}



/*
 Loading screen
*/

#loading {

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:24px;

    background:black;

    z-index:1000;
}



/*
 Bottom panel
*/

#controls {

    position: fixed;

    bottom: 20px;

    left: 50%;

    transform: translateX(-50%);

    width: min(900px, 90%);


    background:
        rgba(0,0,0,0.75);


    color:white;


    padding:15px 20px;

    border-radius:14px;


    display:flex;

    flex-direction:column;

    align-items:center;

    gap:8px;


    font-size:14px;


    transition:
        opacity .3s ease,
        transform .3s ease;


}



#controls.hidden {


    opacity:0;


    pointer-events:none;


    transform:
        translateX(-50%)
        translateY(30px);


}

#uiToggleBtn {

    position: fixed;

    right: 25px;

    bottom: 25px;


    width: 70px;

    height: 70px;


    border-radius: 50%;


    border: none;


    background: rgba(0,0,0,0.65);


    color: white;


    font-size: 38px;


    cursor: pointer;


    z-index: 1000;


    display: flex;

    align-items: center;

    justify-content: center;


    line-height: 1;


}

.controls-hidden {

    opacity:0;

    pointer-events:none;

}




/*
 Buttons
*/

#buttons button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    height: 40px;

    padding: 0 14px;

    margin: 0;

    vertical-align: middle;

}


button:hover {

    background:
        rgba(255,255,255,.3);

}



/*
 Main controls row
*/

#buttons {

    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: center;

    gap: 10px;

    flex-wrap: nowrap;

}




/*
 Tags
*/

#tagPanel {

    margin-top:15px;

    max-width:800px;

    text-align:center;
}



.tag {

    display:inline-block;

    padding:
        7px 12px;


    margin:
        4px;


    border-radius:20px;


    cursor:pointer;


    background:
        rgba(255,255,255,.15);


    user-select:none;

}



.tag.selected {

    background:
        #ffffff;


    color:
        #000;

}








/*
 Photo information
*/
#bottomInfo {

    position: fixed;

    bottom: 95px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 4px;

    background: rgba(0,0,0,0.65);

    color:white;

    padding:12px 20px;

    border-radius:12px;

    font-size:14px;

    line-height:1.4;

    text-align:center;

    max-width:80%;

}
@media (max-width:600px){




    #buttons {

        bottom:15px;

    }

}


#controls {

    position: fixed;

    bottom: 20px;

    left: 50%;

    transform: translateX(-50%);


    width: min(900px, 90%);


    background:
        rgba(0,0,0,0.7);


    color:white;


    padding:15px 20px;


    border-radius:14px;


    display:flex;

    flex-direction:column;

    align-items:center;


    gap:8px;


    font-size:14px;

}



#info {

    width:100%;

    text-align:center;

    line-height:1.4;

}



#stats {

    opacity:0.75;

    font-size:13px;

}



#buttons {

    display:flex;

    flex-direction:row;

    align-items:center;

    justify-content:center;


    gap:10px;

    width:100%;

}



#buttons button {


    height:40px;


    display:inline-flex;

    align-items:center;

    justify-content:center;


    padding:0 14px;


    margin:0;

}



#tagPanel {

    width:100%;

    max-height:250px;

    overflow:auto;

}



.tag-hidden {

    display:none;

}



#info.visible {

    opacity:1;

}



#info a {

    color:white;

    font-weight:bold;

}



/*
 Mobile
*/

@media(max-width:600px){


    #controls {

        bottom:10px;

        width:
            calc(100% - 20px);

    }


    button {

        font-size:14px;

        padding:
            8px 10px;

    }


    #tagPanel {

        max-height:180px;

        overflow:auto;

    }


}


.tag-hidden {

    display:none;

}



#tagPanel {

    margin-top:15px;

    max-height:250px;

    overflow:auto;

}


#tagSearch {

    width:100%;

    padding:10px;

    border-radius:8px;

    border:0;

    margin-bottom:10px;

}

#info {
    margin-bottom:0;
}


#info a {

    color:white;

    text-decoration:underline;

}


/* Refined controls and tag picker */
#controls {
    background: rgba(12, 18, 30, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(16px);
}

#buttons button,
#uiToggleBtn {
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.07));
    color: #fff;
    font: inherit;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22);
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

#buttons button {
    min-width: 112px;
    border-radius: 10px;
}

#buttons button:hover,
#uiToggleBtn:hover {
    background: linear-gradient(145deg, rgba(99, 205, 255, 0.42), rgba(76, 116, 255, 0.32));
    border-color: rgba(175, 229, 255, 0.68);
    box-shadow: 0 8px 20px rgba(49, 127, 255, 0.26);
    transform: translateY(-2px);
}

#buttons button:active,
#uiToggleBtn:active {
    transform: translateY(0) scale(0.97);
}

#buttons button:focus-visible,
#uiToggleBtn:focus-visible,
#tagSearch:focus-visible,
.tag:focus-visible {
    outline: 3px solid #84d8ff;
    outline-offset: 3px;
}

#uiToggleBtn {
    background: rgba(12, 18, 30, 0.78);
    border-radius: 18px;
    width: 58px;
    height: 58px;
    font-size: 28px;
}

#tagPanel {
    margin-top: 8px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
}

#tagList {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.tag {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    margin: 0;
    padding: 7px 13px;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    transition: transform 150ms ease, background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.tag:hover {
    background: rgba(132, 216, 255, 0.19);
    border-color: rgba(132, 216, 255, 0.62);
    transform: translateY(-1px);
}

.tag.selected {
    background: linear-gradient(135deg, #8ae0ff, #7793ff);
    border-color: transparent;
    color: #08101c;
    box-shadow: 0 5px 14px rgba(91, 154, 255, 0.35);
}

#tagSearch {
    padding: 10px 13px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.24);
    color: #fff;
    font: inherit;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

#tagSearch::placeholder {
    color: rgba(255, 255, 255, 0.58);
}

#tagSearch:focus {
    border-color: #84d8ff;
    box-shadow: 0 0 0 3px rgba(132, 216, 255, 0.18);
}

@media (max-width: 600px) {
    #buttons {
        flex-wrap: wrap;
        gap: 8px;
    }

    #buttons button {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
    }
}