body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
}

body.no-scroll {
    overflow: hidden;
}

h1 {
    margin-top: 20px;
}

#passwordScreen {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

#passwordForm {
    text-align: center;
}

#passwordInput {
    padding: 10px;
    font-size: 18px;
    width: 300px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#submitPassword {
    padding: 10px 20px;
    font-size: 18px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
  
  .header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
  }
  
.back-link {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background-color: #1683f5;
    color: white;
    text-decoration: none;
    border-radius: 25px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    margin-top: 50px; /* Reduce margin above */
}

.back-link:hover {
    background-color: white;
    color: #1d3963;
    border-color: #1d3963;
    transform: translateX(-5px);
}

.back-arrow {
    margin-right: 0.25rem;
    transition: transform 0.3s ease;
}

.back-link:hover .back-arrow {
    transform: translateX(-3px);
}

.logo-container {
    text-align: center;
    margin-top: 1rem;
    padding: 0.5rem 0;
}

.main-logo {
    max-width: 200px;
    height: auto;
    transition: transform 0.3s ease;
}

.main-logo:hover {
    transform: scale(1.02);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .header-container {
        padding: 0 8px;
    }

    .back-link {
        padding: 8px 16px;
        font-size: 14px;
        margin-top: 20px;
    }

    .main-logo {
        max-width: 150px;
    }
}

#searchInput {
    padding: 10px;
    width: 400px;
    max-width: 300px;
    border: 2px solid #007BFF; /* Bolder border */
    border-radius: 15px;
    text-align: center;
    margin-bottom: 50px;
    margin-top: 50px;
    display: block; /* Make it a block element */
    margin-left: auto; /* Center horizontally */
    margin-right: auto; /* Center horizontally */
    height: 30px;
    font-size: 18px; /* Increase font size */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for border and shadow */
}

#searchInput:focus {
    border-color: #007BFF; /* Darker blue border on focus */
    box-shadow: 0 0 10px rgba(0, 86, 179, 0.5); /* Add blue shadow effect */
    outline: none; /* Remove default outline */
}

#searchInput:not(:placeholder-shown) {
    box-shadow: 0 0 20px #007BFF; /* Glowing effect when user types */
}

.download-selected {
    display: inline-block;
    margin: 10px;
    font-size: 20px; /* Increase font size */
    padding: 15px 30px; /* Increase padding */
    background-color: #73a97a; /* Default background color */
    color: white; /* Default text color */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    touch-action: manipulation;
    margin-bottom: 100px; /* Add more space below */
    transition: transform 0.3s ease; /* Smooth hover effect */
}

.download-selected:hover {
    transform: scale(1.1); /* Enlarge by 10% on hover */
}
  
#photoGallery {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 10px;
}

#photoGallery img {
    width: 100%;
    max-width: 300px;
    height: auto;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease; /* Smooth hover effect */
}

#photoGallery img:hover {
    transform: scale(1.1); /* Enlarge by 10% on hover */
}

#pagination {
    margin: 20px;
}

#pagination button {
    padding: 5px 10px;
    margin: 5px;
    background-color: #ccc;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

#pagination button.active {
    background-color: #007BFF;
}

#lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);  /* 50% transparent black */
    backdrop-filter: blur(8px);  /* Add blur effect */
    -webkit-backdrop-filter: blur(8px);  /* For Safari support */
    justify-content: center;
    align-items: center;
    z-index: 1000;
    text-align: center;
}

#closeLightbox {
    width: 60px; /* Adjust size as needed */
    height: 60px; /* Adjust size as needed */
    background-image: url('https://www.croatiacaptured.com/search/icons/cancel-button.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    user-select: none;
    border: none;
    border-radius: 50%; /* Make it circular */
    transition: transform 0.3s ease; /* Smooth hover effect */
    margin: 0 auto 10px auto; /* Center horizontally and add 10px margin below */
    display: block; /* Ensure it's treated as a block element */
}

#closeLightbox:hover {
    transform: scale(1.2); /* Increase size on hover */
}

#keywordsLightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);  /* 50% transparent black */
    backdrop-filter: blur(8px);  /* Add blur effect */
    -webkit-backdrop-filter: blur(8px);  /* For Safari support */
    color: white;
    justify-content: center;
    align-items: center;
    z-index: 2000; /* Above the main lightbox */
    text-align: center;
}

#keywordsContent {
    display: flex;
    flex-wrap: wrap; /* Ensure keywords wrap properly */
    justify-content: center; /* Center the keywords horizontally */
    gap: 10px; /* Reduce the spacing between keywords */
    max-width: 90%;
    text-align: center;
    font-size: 14px; /* Make fonts smaller */
}

#download-option-button {
    display: block;
    margin: 10px auto;
    font-size: 16px;
    padding: 10px 20px;
    background-color: rgb(177, 5, 5);
    color: black;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    touch-action: manipulation;
}

#cancelDownload {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    text-transform: uppercase; /* Make text uppercase */
}

#cancelDownload:hover {
    background-color: #a71d2a !important;
}
/* Styling for the selected photos list */
#selectedPhotosList li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 20px; /* Adjust size of the arrow */
    color: #007BFF; /* Default color */
    cursor: pointer; /* Pointer cursor */
    padding: 10px;
    background-color: #f8f9fa; /* Light gray background */
    border: 2px solid #000000 !important; /* Blue border for emphasis */
    border-radius: 10px; /* Rounded corners */
    padding: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: background-color 0.3s ease, transform 0.3s ease;
}

#selectedPhotosList li:hover {
    background-color: #e9ecef; /* Slightly darker background on hover */
    transform: scale(1.02); /* Slight zoom on hover */
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.2); /* Increase shadow depth on hover */
}

/* Highlight selected photos */
.selected-label {
    position: absolute;
    top: 5px;
    left: 5px;
    background: #000000 !important;
    color: white;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 3px;
    z-index: 1;
}

#selectedPhotosList img {
    width: 200px !important;
    height: auto !important;
    margin-bottom: 10px !important;
    border: 3px solid #000000 !important;
    border-radius: 8px !important;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2) !important;
}

#selectedPhotosList button {
    margin-left: 10px;
    padding: 5px 10px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #007BFF;
    color: white;
}

#selectedPhotosList button:hover {
    background-color: #0056b3;
}

#selectedPhotosList span {
    margin-left: 10px;
    color: red;
    cursor: pointer;
}

/* Styling for the download arrow in a rounded circle */
.download-arrow {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 60px; /* Circle size */
    height: 60px; /* Circle size */
    border-radius: 50%; /* Makes it a perfect circle */
    background-size: cover; /* Ensure the icon covers the button */
    background-position: center; /* Center the icon */
    background-repeat: no-repeat; /* Prevent tiling */
    background-image: url('https://croatiacaptured.com/search/icons/download-button.png'); /* Custom download icon */
    cursor: pointer; /* Pointer cursor for interactivity */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth hover effect */
}

.download-arrow:hover {
    transform: scale(1.1); /* Increase size by 10% on hover */
}

.download-arrow:active {
    transform: scale(0.9); /* Slightly decrease size on click for bounce effect */
}

/* Styling for the remove "x" button in a rounded red circle */
.remove-photo {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 60px; /* Circle size */
    height: 60px; /* Circle size */
    border-radius: 50%; /* Makes it a perfect circle */
    background-size: cover; /* Ensure the icon covers the button */
    background-position: center; /* Center the icon */
    background-repeat: no-repeat; /* Prevent tiling */
    background-image: url('https://croatiacaptured.com/search/icons/remove-photo-button.png'); /* Custom cancel icon */
    cursor: pointer; /* Pointer cursor for interactivity */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth hover effect */
}

.remove-photo:hover {
    transform: scale(1.1); /* Increase size by 10% on hover */
}

.remove-photo:active {
    transform: scale(0.9); /* Slightly decrease size on click for bounce effect */
}

/* Popup container */
#downloadPopup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(146, 146, 146, 0.733); /* Semi-transparent white background */
    padding: 20px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    border-radius: 8px;
    text-align: center;
    backdrop-filter: blur(10px); /* Add blur effect */
    -webkit-backdrop-filter: blur(10px); /* For Safari support */
    font-size: 20px;
    border-radius: 10px;
}

#downloadPopup h3 {
    color: white; /* Make font color white */
}

/* Text message inside the popup */
#downloadPopup p {
    margin-bottom: 15px;
    font-size: 16px;
    color: #ffffff;
    display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}

/* Buttons inside the popup */
#downloadPopup button {
    margin: 20px; /* Increase gap between buttons */
    padding: 15px 30px; /* Make buttons larger */
    font-size: 15px; /* Increase font size */
    border-radius: 5px; /* Add rounded edges */
    border: none; /* Remove border */
    font-family: Arial, sans-serif; /* Match font with Keywords button */
}

#downloadPopup button:hover {
    background-color: #cccccc;
}

#downloadPopup button:active {
    background-color: #cccccc;
}

/* Cancel button specific styling (if needed) */
#downloadPopup button:last-child {
    color: white;
    background-color: #dc3545;
    text-transform: uppercase; /* Make text uppercase */
}

#downloadPopup button:last-child:hover {
    background-color: #a71d2a;
}

#downloadPopup button:last-child:active {
    background-color: #7d1a22;
}

#downloadOptionsPopup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(146, 146, 146, 0.733); /* Semi-transparent white background */
    padding: 20px;
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    backdrop-filter: blur(10px); /* Blur effect beneath the popup */
    -webkit-backdrop-filter: blur(10px); /* For Safari support */
    z-index: 1000;
    color: white !important; /* Make title text white */
    font-size: 20px; /* Increase font size */
}

#downloadOptionsPopup button {
    margin: 20px; /* Increase gap between buttons */
    padding: 15px 30px; /* Make buttons larger */
    font-size: 15px; /* Increase font size */
    border-radius: 5px; /* Add rounded edges */
    border: none; /* Remove border */
    font-family: Arial, sans-serif; /* Match font with Keywords button */
}

#downloadOptionsPopup button:hover {
    background-color: #cccccc; /* Light grey background on hover */
    cursor: pointer; /* Pointer cursor on hover */
}

.download-selected {
    display: block;
    margin: 20px auto;
    font-size: 16px;
    padding: 10px 20px;
}

#prevArrow, #nextArrow {
    color: black;
    margin-top: 0; /* Adds space above */
    padding: 10px 20px;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    touch-action: manipulation;
    display: inline-block; /* Align buttons horizontally */
}

#selectPhotoButton.selected {
    background-image: url('https://www.croatiacaptured.com/search/icons/selected-photo-button.png'); /* Icon when selected */
    background-size: cover; /* Ensure the icon covers the button */
    background-position: center; /* Center the icon */
    background-repeat: no-repeat; /* Prevent tiling */
    background-color: transparent; /* Transparent background */
}

#prevArrow, #nextArrow {
    transform: translateY(-50%);
    background-color: #ffffff00; /* Transparent background */
    border-radius: 50%; /* Make it circular */
    width: 50px; /* Set width */
    height: 50px; /* Set height */
    cursor: pointer;
    user-select: none;
    margin: 0; /* Adjust margin if needed */
    padding: 0; /* No padding inside the circle */
    background-size: cover; /* Ensure the image fits the circle */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent tiling */
    transition: transform 0.3s ease; /* Smooth hover effect */
}

#prevArrow:hover, #nextArrow:hover {
    transform: translateY(-50%) scale(1.3); /* Enlarge by on hover */
}

#prevArrow:active, #nextArrow:active {
    transform: translateY(-50%) scale(0.9); /* Slightly decrease size on click for bounce effect */
}

#prevArrow {
    left: 20px; /* Adjust the position for the left arrow */
    background-image: url('https://croatiacaptured.com/search/icons/arrow-left.png'); /* Left arrow icon */
}

#nextArrow {
    right: 20px; /* Adjust the position for the right arrow */
    background-image: url('https://croatiacaptured.com/search/icons/arrow-right.png'); /* Right arrow icon */
}

.action-button {
    display: inline-block;
    margin: 10px;
    font-size: 18px;
    padding: 10px 20px;
    color: black;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    touch-action: manipulation;
}

#keywordsButton, #editButton, #selectPhotoButton, #downloadLink, #photoshelterButton {
    width: 60px; /* Adjust size as needed */
    height: 60px; /* Adjust size as needed */
    border: none;
    cursor: pointer;
    display: inline-block;
    background-color: transparent; /* Transparent background */
    transition: transform 0.3s ease; /* Smooth hover effect */
}

#downloadLink {
    background-image: url('https://croatiacaptured.com/search/icons/download-one-button.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#downloadLink:hover {
    transform: scale(1.2); /* Enlarge by 20% on hover */
    transition: transform 0.3s ease; /* Smooth hover effect */
}

#selectPhotoButton {
    background-image: url('https://www.croatiacaptured.com/search/icons/select-this-button.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#selectPhotoButton:hover {
    transform: scale(1.2); /* Enlarge by 20% on hover */
    transition: transform 0.3s ease; /* Smooth hover effect */
}

#keywordsButton {
    background-image: url('https://www.croatiacaptured.com/search/icons/keywords-button.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#keywordsButton:hover {
    transform: scale(1.2); /* Enlarge by 20% on hover */
    transition: transform 0.3s ease; /* Smooth hover effect */

}

#photoshelterButton {
    background-image: url('https://www.croatiacaptured.com/search/icons/photoshelter-button.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#photoshelterButton:hover {
    transform: scale(1.2); /* Enlarge by 20% on hover */
    transition: transform 0.3s ease; /* Smooth hover effect */
}

#editButton {
    background-image: url('https://www.croatiacaptured.com/search/icons/crop-button.png'); /* Icon */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#editButton:hover {
    transform: scale(1.2); /* Enlarge by 20% on hover */
    transition: transform 0.3s ease; /* Smooth hover effect */
}

#closeKeywordsLightbox {
    position: absolute;
    top: 20%; /* Adjust this as needed */
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    width: 60px; /* Adjust size as needed */
    height: 60px; /* Adjust size as needed */
    background-image: url('https://croatiacaptured.com/search/icons/cancel-button.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    border: none;
    border-radius: 50%; /* Make it circular */
    transition: transform 0.3s ease; /* Smooth hover effect */
    background-color: transparent; /* Ensure background is transparent */
}

#closeKeywordsLightbox:hover {
    transform: translateX(-50%) scale(1.2); /* Increase size on hover and keep centered */
}

    #lightbox > div {
        margin-bottom: 20px; /* Adjust the value as needed */
    }
    
#keywordsContent {
    margin: 20px;
    font-size: 18px;
    line-height: 1.5;
}

#keywordsContent button {
    font-size: 20px;
    background-color: #ffffff;
    color: rgb(0, 0, 0);
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

#loadingSpinner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2001;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #55a5f3;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#lightbox img {
    max-width: 1000px;
    max-height: 90%;
    border: 5px solid white;
}

#editPage {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white; /* White background */
    color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 3000;
}

#editPage h2 {
    color: black;
    font-size: 24px;
    margin-bottom: 20px;
}

#photoToEdit {
    max-width: 80%;
    max-height: 70vh;
    border: 2px solid black;
}

#buttonContainer {
    text-align: center; /* Center-align buttons */
    margin-top: 10px; /* Add some spacing from the download button */
}

#buttonContainer button {
    display: block; /* Make each button occupy its own row */
    margin: 15px auto; /* Center the button horizontally and add spacing */
    padding: 5px 10px;
    font-size: 16px;
    color: rgb(0, 0, 0); /* Black text */
    border: none;
    border-radius: 3px; /* Rounded corners */
    cursor: pointer;
}

/* Add hover effect for interactivity */
#closeEditButton:hover {
background-color: darkred; /* Darker red background on hover */
}


/* Styling for 9:16, 3:4, 1:1 buttons */
#editPage button {
margin: 10px; /* Add spacing between buttons */
padding: 10px 20px; /* Increase padding for larger buttons */
font-size: 18px; /* Make text larger */
background-color: #ffffff; /* White background */
color: #000000; /* Black text */
border: 2px solid #000000; /* Black border for consistency */
border-radius: 5px; /* Slightly rounded corners */
cursor: pointer; /* Pointer cursor for interactivity */
}

/* Styling for the Crop button */
#cropButton {
padding: 12px 24px; /* Larger padding for a bigger button */
font-size: 20px; /* Larger font size */
background-color: #ffffff; /* White background */
color: #adadad; /* Black text */
border: 2px solid #adadad; /* Black border for consistency */
border-radius: 5px; /* Slightly rounded corners */
cursor: pointer; /* Pointer cursor for interactivity */
font-weight: bold;
}

/* Add hover effects for interactivity */
#editPage button:hover,
#cropButton:hover {
background-color: #f0f0f0; /* Slight gray background on hover */
color: #000000; /* Keep black text */
}

#sortOrder {
    padding: 10px;
    width: 200px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 0px;
    display: block; /* Make it a block element */
    margin-left: auto; /* Center horizontally */
    margin-right: auto; /* Center horizontally */
}

#closeEditButton {
    margin-top: 15px !important;
    padding: 12px 24px !important;
    font-size: 18px !important;
    background-color: #dc3545 !important;
    color: white !important;
    border: none !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    }

#closeEditButton:hover {
background-color: #a71d2a !important;
}

@media (max-width: 768px) {
    #searchInput {
        width: 300px; /* Adjust width for mobile */
        height: 30px; /* Reset height */
        margin: 20px auto; /* Center horizontally and add space above and beneath */
        display: block; /* Ensure it's treated as a block element */
        padding-right: 40px; /* Ensure space for the cancel button */
        margin-top: 30px; /* Add margin top */
        margin-bottom: 30px; /* Add margin bottom */
        border-radius: 15px; /* Add rounded edges */
    }

    #closeLightbox {
        width: 60px; /* Adjust size as needed */
        height: 60px; /* Adjust size as needed */
        background-image: url('https://www.croatiacaptured.com/search/icons/cancel-button.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        cursor: pointer;
        user-select: none;
        border: none;
        border-radius: 50%; /* Make it circular */
        transition: transform 0.3s ease; /* Smooth hover effect */
        position: absolute; /* Position it absolutely */
        top: 10px; /* Move to the top */
        left: 50%; /* Center horizontally */
        transform: translateX(-50%); /* Center horizontally */
    }
    #closeLightbox:hover {
        transform: scale(1.2); /* Increase size on hover */
    }

    #keywordsContent {
        margin: 20px;
        font-size: 18px;
        line-height: 1.5;
    }
    
    #keywordsContent button {
        font-size: 14px;
        background-color: #ffffff;
        color: rgb(0, 0, 0);
        border: none;
        border-radius: 3px;
        cursor: pointer;
    }

    #closeKeywordsLightbox {
        position: absolute;
        top: 1%; /* Adjust this as needed */
        left: 50%;
        transform: translateX(-50%); /* Center horizontally */
        width: 60px; /* Adjust size as needed */
        height: 60px; /* Adjust size as needed */
        background-image: url('https://croatiacaptured.com/search/icons/cancel-button.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        cursor: pointer;
        border: none;
        border-radius: 50%; /* Make it circular */
        transition: transform 0.3s ease; /* Smooth hover effect */
        background-color: transparent; /* Remove white border */
    }

    #sortOrder {
      width: 50%; /* Adjust width for mobile */
      margin: auto; /* Center horizontally and add some margin */
      display: block; /* Ensure it's treated as a block element */
      height: 120%; /* Make it 20 percent taller */
    }

      #selectedPhotosList {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive columns */
        gap: 20px; /* Space between grid items */
        justify-content: center; /* Center the grid */
        padding: 10px; /* Add some padding around the grid */
    }

    #selectedPhotosList li {
        flex-direction: column; /* Stack items vertically on mobile */
        align-items: center; /* Center align items */
    }

    #selectedPhotosList img {
        margin-bottom: 10px; /* Add space below the image */
        width: 300px !important; /* Increase thumbnail size */
        height: auto; /* Maintain aspect ratio */
        margin-bottom: 10px; /* Add space below the image */
    }

    #selectedPhotosList li img {
        border: 3px solid #000000 !important;
        border-radius: 8px;
        box-shadow: 0 0 10px #007BFF; /* Blue glow */
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }
    
    #selectedPhotosList li img:hover {
        box-shadow: 0 0 20px #0056b3; /* Brighter glow on hover */
        transform: scale(1.05); /* Slight zoom on hover */
    }

    #selectedPhotosList span[title="Download this photo"],
    #selectedPhotosList span[title="Remove this photo"] {
        width: 60px; /* Increase button size (50% bigger) */
        height: 60px; /* Ensure the button is square */
        font-size: 28px; /* Adjust font size for the arrow and "x" */
    }

        /* Group buttons into a single row */
        #selectedPhotosList li .button-group {
            display: flex; /* Align buttons in a row */
            gap: 10px; /* Add space between the buttons */
            margin-top: 10px; /* Space between filename and buttons */
        }


/* Styling for the download arrow in a rounded circle */
.download-arrow {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 60px; /* Circle size */
    height: 60px; /* Circle size */
    border-radius: 50%; /* Makes it a perfect circle */
    background-size: cover; /* Ensure the icon covers the button */
    background-position: center; /* Center the icon */
    background-repeat: no-repeat; /* Prevent tiling */
    background-image: url('https://croatiacaptured.com/search/icons/download-button.png'); /* Custom download icon */
    cursor: pointer; /* Pointer cursor for interactivity */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth hover effect */
}

.download-arrow:hover {
    transform: scale(1.1); /* Increase size by 10% on hover */
}

.download-arrow:active {
    transform: scale(0.9); /* Slightly decrease size on click for bounce effect */
}

/* Styling for the remove "x" button in a rounded red circle */
.remove-photo {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 60px; /* Circle size */
    height: 60px; /* Circle size */
    border-radius: 50%; /* Makes it a perfect circle */
    background-size: cover; /* Ensure the icon covers the button */
    background-position: center; /* Center the icon */
    background-repeat: no-repeat; /* Prevent tiling */
    background-image: url('https://croatiacaptured.com/search/icons/remove-photo-button.png'); /* Custom cancel icon */
    cursor: pointer; /* Pointer cursor for interactivity */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth hover effect */
}

.remove-photo:hover {
    transform: scale(1.1); /* Increase size by 10% on hover */
}

.remove-photo:active {
    transform: scale(0.9); /* Slightly decrease size on click for bounce effect */
}


    /* Filename adjustments */
    #selectedPhotosList li p {
        color: black; /* Change filename text to black */
        font-size: 14px; /* Adjust font size (optional) */
        margin-bottom: 10px; /* Space between filename and buttons */
        text-align: center; /* Center align filename */
    }

    /* Align buttons next to each other */
    .download-arrow,
    .remove-photo {
        display: inline-block; /* Ensure buttons are side by side */
}

  #photoGallery img {
    max-width: 300px;
  }

  #lightbox img {
    max-width: 95%;
    max-height: 70%;
  }

/* General Styles for Arrows */
#prevArrow, #nextArrow {
    position: absolute;
    width: 50px;
    height: 50px;
    user-select: none;
    margin: 0;
    padding: 0;
    background-color: transparent; /* Ensure transparent background */
}

/* Mobile-Specific Styles */
#prevArrow, #nextArrow {
    top: auto; /* Reset vertical alignment */
    bottom: 5%; /* Place arrows at the bottom */
    transform: none; /* Remove vertical centering adjustment */
}

#prevArrow {
    left: 5%; /* Adjust left position for mobile */
    background-image: url('https://croatiacaptured.com/search/icons/arrow-left.png'); /* Left arrow icon */
}

#nextArrow {
    right: 5%; /* Adjust right position for mobile */
    background-image: url('https://croatiacaptured.com/search/icons/arrow-right.png'); /* Right arrow icon */
}

/* Full HD-Specific Styles */
@media (min-width: 1920px) and (max-width: 1920px) and (min-height: 1080px) and (max-height: 1080px) {
    #prevArrow, #nextArrow {
        top: 50%; /* Vertically center the arrows */
        transform: translateY(-50%); /* Center arrow vertically */
    }

    #prevArrow {
        left: 5%; /* Adjust position for Full HD */
        background-image: url('https://croatiacaptured.com/search/icons/arrow-left.png'); /* Left arrow icon */
    }

    #nextArrow {
        right: 5%; /* Adjust position for Full HD */
        background-image: url('https://croatiacaptured.com/search/icons/arrow-right.png'); /* Right arrow icon */
    }
}
    
    }