/* ===== Form Input Fields Styling ===== */
/* Input fields and textareas styling */
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  border: 1px solid #555;         /* Darker grey border */
  border-radius: 4px;
  padding: 0.5rem;
  background-color: #2c2c2c;        /* Grey background */
  color: #fff;                    /* White text */
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2); /* Subtle inner shadow */
  transition: border-color 0.2s ease-in-out;
}

/* On focus, change the border color (optional) */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
  border-color: #90caf9;          /* Blue-ish highlight on focus */
  outline: none;
}

/* ===== Button Styling ===== */
.btn-primary {
  background-color: #555 !important;   /* Grey background */
  border-color: #555 !important;       /* Grey border */
  color: #fff !important;              /* White text */
  padding: 0.5rem 1rem;                /* Adjust padding if needed */
  border-radius: 4px;                  /* Rounded corners */
  transition: background-color 0.2s ease-in-out,
              border-color 0.2s ease-in-out;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #444 !important;   /* Slightly darker on hover/focus */
  border-color: #444 !important;
  color: #fff !important;
}

/* ===== Optional: Form Container Styling ===== */
/* Wrap your forms in a container (if not already done) to give a neat border and padding */
.form-section {
  /* First definition */
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 1.5rem;
  background-color: #313131;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 2rem;
}

/* Alternatively, you can also use this version (placed in static/css/forms.css) */
.form-section {
  background-color: #222;    /* Dark grey background */
  border: 1px solid #444;    /* Subtle border */
  padding: 2rem;             /* Space inside the box */
  border-radius: 8px;        /* Rounded corners */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Optional shadow for depth */
  margin-bottom: 2rem;       /* Optional spacing at bottom */
}

/* Ensure muted text appears white */
.text-muted {
  color: #fff !important;
}

/* Increase dropdown width and ensure text wraps */
#notificationsList {
  width: 500px;  /* Increase width as desired */
  white-space: normal; /* Allow text to wrap */
  word-wrap: break-word;
}
#notificationsList .dropdown-item {
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}


/* ===== CONTENT BAr ===== */
/* ===== Custom Text Size Classes ===== */
.content-text-small { font-size: 0.8rem; }
.content-text-medium { font-size: 1rem; }
.content-text-large { font-size: 1.3rem; }


/* Ensure the offcanvas sidebar uses the dark greyscale theme */
.offcanvas {
  background-color: #2c2c2c !important;  /* Dark grey background */
  color: #e0e0e0;                        /* Light text */
}

/* Style the header and body of the offcanvas to match */
.offcanvas .offcanvas-header,
.offcanvas .offcanvas-body {
  background-color: #2c2c2c !important;
  color: #e0e0e0;
}

/* Optionally, style any links inside the sidebar */
.offcanvas a {
  color: #90caf9;  /* Light blue for links, for example */
}
.offcanvas a:hover {
  color: #64b5f6;
}

/* If you want to adjust any borders or other elements */
.offcanvas .card {
  background-color: #2c2c2c;
  border-color: #444;
}

/* Style each content group */
.sidebar-group {
  margin-bottom: 1.5rem;        /* Adds space below each group */
  padding: 1rem;                /* Adds internal padding for a bit of breathing room */
  background-color: #2c2c2c;    /* A slightly different background (adjust as needed) */
  border-radius: 8px;           /* Rounded corners for a modern look */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}

/* Optionally add a divider for the group header */
.sidebar-group .group-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Light divider */
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: 600;
}

/* If you’d like to add extra spacing between individual items, you can target the items container */
.group-items > * {
  margin-bottom: 0.5rem;
}

/* Remove bottom margin on the last item in a group */
.group-items > *:last-child {
  margin-bottom: 0;
  
}

/* Container to center the pagination controls */
.pagination-container {
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 1rem;       /* Small margin at the bottom */
  transform: scale(0.9);     /* Scale down the entire pagination slightly */
  transform-origin: center;
}

/* Unified bubble that holds the arrows and page number */
.pagination-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #222;            /* Dark background */
  border: 2px solid #444;            /* Dark border */
  border-radius: 50px;               /* Rounded bubble */
  padding: 10px 15px;                /* Internal spacing */
  margin: 0 auto;
}

/* Enhanced styling for the arrow buttons within the bubble */
.pagination-bubble .arrow {
  font-size: 1.75rem;                /* Increase arrow icon size */
  font-weight: bold;
  color: #fff;                       /* Pure white text */
  background: linear-gradient(135deg, #333, #222);
  border: 2px solid #444;
  border-radius: 50%;                /* Make it circular */
  width: 50px;                       /* Fixed width */
  height: 50px;                      /* Fixed height */
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.2s, background 0.2s;
  margin: 0 10px;                    /* Spacing between elements */
}

.pagination-bubble .arrow:hover {
  transform: scale(1.1);             /* Slightly larger on hover */
  background: linear-gradient(135deg, #555, #333);
}

.pagination-bubble .arrow.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Modern styling for the current page number bubble */
.pagination-bubble .current-page {
  font-size: 1.5rem;
  font-weight: 500;
  color: #ffffff !important;         /* Always pure white */
  background: linear-gradient(135deg, #333, #222);
  border: 2px solid #444;
  border-radius: 50%;                /* Perfect circle */
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  font-family: 'Roboto', sans-serif;
  margin: 0 10px;
  cursor: default;
}

/* Ensure the navbar items never wrap */
.navbar .left-items,
.navbar .right-items {
  white-space: nowrap;
}

/* When viewport width gets below 768px, scale down the right-items */
@media (max-width: 768px) {
  .navbar .right-items {
    transform: scale(0.85);
    transform-origin: center right;
  }
}

/* When viewport width gets even narrower, scale further */
@media (max-width: 500px) {
  .navbar .right-items {
    transform: scale(0.75);
    transform-origin: center right;
  }
}


@media (max-width: 768px) {
  .pagination-container {
    /* Adds extra space: use the safe-area inset if available, and fallback to 20px */
    padding-bottom: calc(env(safe-area-inset-bottom, 50px) + 50px);
  }
}


/* Flex container to hold the login/signup buttons */
.auth-buttons {
  /* Ensure the container takes up the available space if needed */
  width: 100%;
}

/* Bubble button style */
.auth-buttons a.btn-bubble {
  background: #333;            /* Dark grey background */
  border: none;                /* Remove default border */
  border-radius: 50px;         /* Fully rounded corners for a bubble look */
  padding: 10px 20px;          /* Sufficient padding for a modern feel */
  color: #e0e0e0;              /* Light grey text */
  font-size: 1.1rem;           /* Slightly larger text */
  text-transform: uppercase;   /* Uppercase letters for emphasis */
  letter-spacing: 0.5px;       /* A bit of spacing between letters */
  transition: transform 0.2s, box-shadow 0.2s;  /* Smooth hover effect */
  flex: 1;                     /* Make buttons equally flexible */
  text-align: center;
  white-space: nowrap;         /* Prevent line breaks */
}

/* Hover effect for the bubble buttons */
.auth-buttons a.btn-bubble:hover {
  transform: translateY(-2px);           /* Lift the button on hover */
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);  /* Soft white glow shadow */
}

/* download exploratory button */
.btn-download {
  /* Modern gradient background */
  background: linear-gradient(135deg, #48A4FFFF, rgb(15, 100, 132));
  color: #fff;
  border: none;
  border-radius: 4px;
  
  /* Spacing and font styling */
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  font-weight: 600;
  
  /* Transition for smooth hover effects */
  transition: all 0.3s ease;
}

/* Hover effect: subtle shift and shadow */
.btn-download:hover {
  background: linear-gradient(135deg, #19c2ff, #1aa5d8);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  text-decoration: none; /* Ensures text doesn’t underline on hover */

}



/* review modal */
.star-rating {
  display: flex;
  flex-direction: row-reverse;  /* <— add this */
  justify-content: center;
  gap: 0.5rem;
  font-size: 2.5rem;
  user-select: none;
  cursor: pointer;
}
.star-rating input {
  display: none;
}
.star-rating label {
  flex: 1;
  text-align: center;
  color: #444;
  transition: color 0.2s;
}
.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label {
  color: #ffd700;
}