/* General body styles */
body {
    font-family: 'Roboto', sans-serif; /* Use Roboto for better readability */
    background-color: #f4f4f4; /* Light gray background */
    margin: 0;
    padding: 0;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

/* Dark mode styles */
body.dark-mode {
    background-color: #121212; /* Dark background */
}

/* Container for the main content */
.container {
    max-width: 700px; /* Set maximum width of the container */
    margin: 50px auto; /* Center the container */
    padding: 20px; /* Padding inside the container */
    background-color: #fff; /* White background for the container */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */
}

/* Dark mode container styles */
body.dark-mode .container {
    background-color: #1e1e1e; /* Darker container background */
}

/* Header styles */
h1 {
    text-align: center; /* Center align the header */
    color: #333; /* Dark gray color for text */
}

/* Dark mode header styles */
body.dark-mode h1 {
    color: #ffffff; /* Light text color for header in dark mode */
}

/* Form styles */
form {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
}

/* Form group for input and buttons alignment */
.form-group {
    display: flex;
    justify-content: space-between; /* Space between elements */
    align-items: center; /* Align items vertically centered */
}

/* Styles for select and input fields */
select, input[type="text"] {
    width: calc(70% - 10px); /* Width of input and select elements with spacing adjustment */
    padding: 10px; /* Padding inside input and select elements */
    margin-right: 10px; /* Space between elements */
    border: 1px solid #ccc; /* Light gray border */
    border-radius: 4px; /* Rounded corners */
    font-size: 16px; /* Font size for better readability */
}

/* Button styles */
button {
   padding: 10px 15px; /* Padding inside buttons (top/bottom, left/right) */
   border: none; /* No border for buttons */
   border-radius: 4px; /* Rounded corners for buttons */
   background-color: #007bff; /* Blue background color for buttons */
   color: white; /* White text color for buttons */
   cursor: pointer; /* Pointer cursor on hover */
   font-size: 16px; /* Font size for better readability */
   display: flex;
   align-items: center;
   justify-content: center;
}

button:hover {
   background-color: #0056b3; /* Darker blue on hover for buttons */
}

/* Result section styles */
.result {
   margin-top: 20px; /* Space above results section */
}

/* Styles for individual items returned from the API (cards)*/
.item {
   display: flex;
   justify-content: space-between;   /* Aligns item content and download link horizontally */ 
   align-items: center;               /* Center items vertically */ 
   background-color: #f9f9f9;         /* Light background for items */ 
   border: 1px solid #ddd;            /* Light gray border around items */ 
   border-radius: 5px;                /* Rounded corners for items */ 
   padding: 15px;                     /* Padding inside each item card*/ 
   margin-bottom: 10px;               /* Space between item cards*/ 
}

/* Styles for item content within cards*/
.item-content {
   flex-grow: 1;                      /* Allow item content to take available space */ 
   overflow-wrap: break-word;         /* Allow long words to break and wrap onto next line */ 
   white-space: normal;               /* Allow normal wrapping of text */ 
}

/* Download link styles within items*/
.download-button {
   display: inline-flex;       /* Use flexbox for alignment within item cards */ 
   align-items: center;        /* Center icon vertically in the link */ 
   padding: 10px 15px;        /* Padding inside link to fit text properly */ 
   background-color: #007bff; /* Blue background for download link */ 
   color: white;               /* White text color for link */ 
   border-radius: 4px;        /* Rounded corners for link */ 
   text-decoration: none;      /* Remove underline from link */ 
   transition: background-color 0.3s ease, transform 0.3s ease;/* Smooth transitions on hover*/ 
}

.download-button:hover {
   background-color: #0056b3;/* Darker blue on hover for download link*/ 
   transform: translateY(-2px);/* Slight lift effect on hover*/ 
}

.download-icon { 
   margin-right: 5px;         /* Space between icon and text in download link*/ 
}

/* Hidden class for elements that should not be displayed initially (like next page button) */ 
.hidden { 
   display: none;              /* Hides elements with this class from view */ 
}

/* Pagination Buttons Styling */
.pagination-buttons {
    display: flex;
    justify-content: center;     /* Center align buttons horizontally */
    margin-top: 20px;           /* Space above buttons */
}

.pagination-buttons button {
    margin-left: 10px;
    margin-right: 10px;
}
  
/* Moon/Sun Icon Styles*/
.dark-mode-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    cursor: pointer;
    font-size: 24px;
}

.dark-mode-toggle:hover {
     color:#007bff;
}

body.dark-mode .dark-mode-toggle .fa-sun {
    color: white; /* Change sun icon color to white in dark mode */
}