/* Import a spooky font */
@import url("https://fonts.googleapis.com/css2?family=Creepster&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap");
body {
  font-family: "Merriweather", sans-serif; /* <-- ADD THIS */
  font-weight: 400;
  text-align: center;
  /* --- Full Screen Background --- */

  /* * This applies a semi-transparent dark overlay (rgba(26, 26, 26, 0.7))
     * on top of the background image. This is crucial for making the 
     * white text readable!
    */

  /* !! REPLACE THIS URL with your chosen image !! */
  background-image: url("bg.jpg"); /* Example image */

  background-color: #1a1a1a; /* Fallback color if image fails to load */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* This makes it stay in place on scroll */

  /* Ensure body is at least full height */
  min-height: 100vh;
}

h1 {
  font-family: "Creepster", cursive;
  color: #b10000 !important;
  letter-spacing: 2px;
}

h1 {
  font-size: 4.5rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

h2 {
  font-family: "Creepster", cursive;
  font-size: 1.6rem;
  /* color: #b10000 !important; */
  letter-spacing: 2px;
}

.card {
  /* * This creates the "frosted glass" effect.
     * We use a semi-transparent black background.
     * The backdrop-filter blurs whatever is *behind* the card.
    */
  background-color: rgba(
    0,
    0,
    0,
    0.5
  ) !important; /* Overrides .bg-dark's solid color */

  /* A subtle border to define the edge */
}

/* Make form inputs match the dark theme */
.form-control.bg-dark {
  border-color: #555;
}

.form-control.bg-dark:focus {
  background-color: #2a2a2a !important;
  border-color: #b10000;
  box-shadow: 0 0 0 0.25rem rgba(255, 102, 0, 0.25);
  color: #fff;
}

/* Make datalist suggestions dark */
datalist {
  position: absolute;
  background-color: #2a2a2a;
  border: 1px solid #555;
  border-radius: 0.25rem;
  color: #fff;
}

option {
  padding: 0.5rem;
  cursor: pointer;
}

option:hover {
  background-color: #b10000;
  color: #1a1a1a;
}

.badge.bg-warning {
  background-color: #b10000 !important;
  color: #1a1a1a !important;
}

.list-group-item.bg-dark {
  /* Make the list items transparent too */
  background-color: transparent !important;

  /* Match the new card border style */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* This makes sure the last item in the list still has its bottom border */
.list-group-flush > .list-group-item:last-child {
  border-bottom-width: 1px;
}

/* This removes the border from the very last item if it's the last child in the card */
.list-group-flush:last-child > .list-group-item:last-child {
  border-bottom-width: 0;
}

.blur-me {
  background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent background */
  backdrop-filter: blur(5px); /* Adjust blur intensity as needed */
  /* Other styling for positioning and appearance */
}

/* --- Style the Datalist Dropdown (Firefox-Only) --- */
/* This is a special selector to target the datalist options */
input.form-control + datalist option {
  background-color: #2a2a2a; /* Dark background */
  color: #fff; /* White text */
  padding: 0.5rem;
  cursor: pointer;
  font-size: 1rem;
}

input.form-control + datalist option:hover {
  background-color: #ff6600; /* Your theme's orange */
  color: #1a1a1a;
}

/* --- Custom Suggestions Dropdown --- */
#suggestions-box .list-group-item {
  background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  color: #fff; /* White text */
  border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border */
  cursor: pointer;
}

#suggestions-box .list-group-item:hover,
#suggestions-box .list-group-item:focus {
  background-color: #ff6600; /* Your theme's orange */
  color: #1a1a1a;
}

/* --- Make the input placeholder light --- */
.form-control.bg-transparent::placeholder {
  color: rgba(
    255,
    255,
    255,
    0.7
  ) !important; /* Light, semi-transparent white */
  opacity: 1; /* Override any default transparency */
}

/* --- Fallbacks for older browsers --- */
.form-control.bg-transparent::-moz-placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
  opacity: 1;
}

.form-control.bg-transparent::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
  opacity: 1;
}

.form-control.bg-transparent::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
  opacity: 1;
}