/* event styles */

 html, body {
    /* background-color: #3e1417 !important; */
    background: rgba(62, 20, 23, 0.9);
    font-family: "Lato", sans-serif;
    overflow-x: hidden;
}

.navbar-custom {
    background: linear-gradient(rgba(0,0,0,0.9), rgba(62, 20, 23, 0.9)); 
    border-bottom: 1px solid white;
    /* background: rgba(62, 20, 23, 1); */
    padding-right: 108px;
    padding-left: 108px;
  }

 .theme-text {
    /* color: #3e1417; */
    color: #1B1A1A;
  }

  .theme-btn {
    background-color: #3e1417;
    color: white;
  }

  .theme-btn:hover {
    background-color: #3e1417;
    color: white;
  }

  .event-card {
    border-radius: 20px !important;
    border: 1px solid rgba(62,20,23, 0.5);
    background-color: #FFF9EE;
  }

  /* Position relative for overlay positioning */
.position-relative {
    position: relative;
    margin: 0 !important;           /* Ensure no margin is affecting the container */
    padding: 0 !important;          /* Ensure no padding is affecting the container */
    overflow: hidden;
    background-color: #3e1417;
  }

  .card-img-top-custom {
    /* display: block; 
    width: 100%; 
    margin: 0 !important;           
    padding: 0 !important;  */
    position: relative;
    height: 24rem;
    object-fit: contain;
    left:15%;
    background-color: #3e1417;
  }
  
  .event-card-overlay {
    position: absolute;
    top: 0 !important;
    left:0 !important;
    width: 20%;
    height: 100%; /* Cover 20% of the image height */
    background: rgba(62, 20, 23,1); /* Semi-transparent black overlay */
    z-index: 1;
    /* border-top-left-radius: 30px; */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;  /* Position the ribbon at the top */
    align-items: center;
    text-align: center;
  }


  /* Ribbon styles */
.event-ribbon {
    position: absolute;
    top: 0;
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust to center it properly */
    width: 40px;  /* Adjust the width of the ribbon */
    height: 40%;  /* Cover 50% of the overlay's height */
    background:#FFF9EE; /* Ribbon background color */
    color: #721c24; /* Text color inside the ribbon */
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: normal;
    font-size: 16px;
    /* position: relative; */
    /* border-radius: 5px; */
  }

  /* Text inside the ribbon */
.event-ribbon span {
    writing-mode: vertical-rl; /* Vertical text */
    transform: rotate(180deg); /* Flip text properly */
  }

/* Swallowtail effect at the bottom of the ribbon */
.event-ribbon::after {
    content: "";
    position: absolute;
    bottom: 0px; /* Position the swallowtail just below the ribbon */
    left: 0;
    width: 0;
    height: 0;
    border-left: 20px solid transparent; /* Left side of the swallowtail */
    border-right: 20px solid transparent; /* Right side of the swallowtail */
    border-top: 15px solid #3e1417; /* Swallowtail color matches ribbon */
    transform: rotate(-180deg); /* Rotate to form the swallowtail V-shape */
  }

  /* Dynamic vertical text at the bottom */
.event-type {
    position: absolute;
    bottom: 20px; /* Position the text near the bottom of the overlay */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%) rotate(180deg); /* Center and rotate text to be upright */
    writing-mode: vertical-rl; /* Set text to be vertical */
    color: rgba(255,255,255,0.5); /* Text color */
    font-size: 24px; /* Font size of dynamic text */
    font-weight:lighter;
    white-space: nowrap; /* Prevent text from wrapping */

    /* Opacity fade effect */
  mask-image: linear-gradient(to top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.9)); /* Mask to fade opacity from bottom to top */
  -webkit-mask-image: linear-gradient(to top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255,0.9)); /* For webkit-based browsers */
  }



   /* Change the background color of the dropdown menu */
.dropdown-menu {
    background-color: #3e1417; /* Green background */
  }
  
  /* Change the text color inside the dropdown items */
  .dropdown-item {
    color: white; /* White text */
  }
  
  /* Change the text color on hover */
  .dropdown-item:hover {
    background-color: #3e1417; /* Darker green on hover */
    color: white; /* Keep text white on hover */
  }

  .btn-outline-custom {
    background: transparent;
    border:1px solid #3e1417;
    color: #3e1417;
  }

  .btn-outline-custom:hover {
    background: #3e1417;
    border: #3e1417;
    color: white;
  }

  .btn-rounded-gradient {
    background: rgba(0,0, 0, 1);
    border-radius: 50%;
    padding: 15px;
    color: white;
    border: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
  }

  .card-transparent {
    background-color: rgba(62, 20, 23, 0.5); /* Set transparency with rgba() */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Optional: make the border slightly transparent */
    border-radius: 20px;
    overflow: hidden;
}

.card-transparent > .card-body {
    background-color: rgba(62, 20, 23, 0.3); /* Transparent background for the card body */
}

.text-muted-custom {
  color: rgba(255, 255, 255, 0.5);
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.text-custom-gradient {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.3));
  -webkit-background-clip: text; /* WebKit-based browsers */
  background-clip: text; /* Standard, but less supported */
  color: transparent; /* Make the text itself transparent */
}

/* Change active tab text color to white */
.custom-nav .nav-link.active {
  color: white !important; /* White text color */
  background-color: transparent !important; /* Remove the default background */
  border-color: white !important; /* White underline */
}

.custom-nav .nav-link {
  color: #ccc; /* Optional: default text color */
}

.custom-nav .nav-link:hover {
  color: white; /* Change text color on hover */
}


.card-left-img  {
  /* position: absolute; */
  /* left: 0;
  top: 0;
  bottom: 0; */
  width: 50%; /* Adjust width as per the design */
  object-fit: cover; /* Ensures the image covers the container */
}

.card-relative {
  position: relative;
}

.custom-cover-img {
  height: 15rem;
  object-fit: cover; /* Ensures the image covers the container */
}


@media (max-width: 575.98px) { 
  .custom-cover-img {
    display: none;
  }
 }

 @media (max-width: 768.98px) { 
  .month-picker {
    height: 4rem;
  }
 }


 /* search bar styles */


 /* Style for the month picker */
 .month-picker {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px;
  /* background-color: #f8f9fa; */
  background: radial-gradient(circle, rgba(0, 0, 0, 0.8) 0%, rgba(62, 20, 23, 0.2) 70%);
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 100%;
  position: relative;
}

/* Styling for the arrows */
.month-arrow {
  font-size: 1.5rem;
  color: white;
  cursor: pointer;
  margin: 0 10px;
}

/* Styling for month list */
.month-list {
  display: flex;
  align-items: center;
}

/* Styling for each month item */
.month-item {
  margin: 0 15px;
  font-size: 1.25rem;
  font-weight: 500;
  color: white;
  cursor: pointer;
  transition: color 0.3s ease, font-size 0.3s ease;
}

/* Active month styling */
.month-item.active {
  /* color: #007bff; */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4)); /* Gold gradient */
      background-clip: text;
      -webkit-background-clip: text; /* Safari & Chrome */
      -webkit-text-fill-color: transparent; /* Makes text transparent to show gradient */
      color: transparent; /* Standard fallback */
  font-size: 2.0rem; /* Make the active month bigger */
}

/* Styling for hover */
.month-item:hover {
  color: white;
}

/* Slide-in and slide-out animations */
.slide-in-left {
  animation: slideInLeft 0.5s forwards;
}

.slide-out-left {
  animation: slideOutLeft 0.5s forwards;
}

.slide-in-right {
  animation: slideInRight 0.5s forwards;
}

.slide-out-right {
  animation: slideOutRight 0.5s forwards;
}

@keyframes slideInLeft {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutLeft {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}

@keyframes slideInRight {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutRight {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Styles for the search and filter section */
.icons-section {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 15px;
}

.icon-button {
  border: 1px solid #3e1417;
  background-color: transparent;
  box-shadow:  0 10px 20px rgba(0, 0, 0, 0.2);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 8px 15px;
  border-radius: 50%;
  transition: background-color 0.3s;
  color: white;
}

.icon-button:hover {
  background-color: #3e1417;
}

/* Search box expand animation */
.search-box {
  display: none;
  transition: width 0.5s ease;
  width: 0;
}

.search-box.expanded {
  display: inline-block;
  width: 200px;
}

.search-box input {
  border: none;
  outline: none;
  padding: 5px 10px;
  font-size: 1rem;
  width: 100%;
  background-color: #3e1417;
  color: white;
}


/* Filter Button Styling */
.filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3e1417 !important;
  color: white !important;
  /* border: none; */
  font-size: 1rem;
  cursor: pointer;
  padding: 8px 15px;
  border-radius: 20px;
  transition: all 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  width: 45px; /* Initial width (icon only) */
  border: 1px solid #3e1417;
  /* background-color: transparent; */
  box-shadow:  0 10px 20px rgba(0, 0, 0, 0.2);
}

.filter-button.expanded {
  width: 200px; /* Expanded width (icon + text) */
  background-color: #3e1417;
  color: white !important;
  justify-content: flex-start;
  padding: 12px 20px;
}

.filter-button i {
  font-size: 1.5rem;
  transition: margin-right 0.3s;
  color: white !important;
}

.filter-button span {
  /* opacity: 0; */
  display: none;
  transition: opacity 0.3s ease, margin-left 0.3s ease;
  margin-left: 0;
  color: white !important;
  /* visibility: hidden; */
}

.filter-button.expanded span {
  /* opacity: 1; */
  margin-left: 8px;
  display: inline-block;
  /* visibility: visible;  */
}

/* Filter Dropdown */
/* .filter-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background-color: #ffffff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  width: 200px;
  padding: 10px;
  z-index: 10;
}

.filter-dropdown.show {
  display: block;
} */


/* Filter dropdown styles */
.filter-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background-color: #3e1417;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  width: 200px;
  padding: 20px;
  z-index: 10;
  color: white;
}

.filter-dropdown.show {
  display: block;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1rem;
}




.clear-all-btn {
  font-size: 0.875rem;
  color: #007bff;
  cursor: pointer;
  margin-top: 10px;
}

/* Badge styles */
.badge {
  font-size: 0.875rem;
}

.text-ultra-light {
    color: rgba(255, 255, 255, 0.1);
  }


  /* Container for the search icon and input field */
  .search-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center; /* Center the icon horizontally */
    width: 40px; /* Initially, only fit the search icon */
    height: 40px; /* Make the container square initially */
    transition: width 0.3s ease, box-shadow 0.3s ease-in-out;
    margin: 0 auto;
    border-radius: 50px; /* Rounded container */
    padding: 5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Shadow for container */
    background-color: #3e1417;
  }

  .search-container:hover {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Darker shadow on hover */
  }

  /* Styling for the search icon */
  .search-icon {
    font-size: 20px; /* Size of the search icon */
    cursor: pointer;
    position: absolute;
    left: 10px; /* Keep the icon fixed on the left side of the container */
    color: white;
  }

  /* Input field - hidden by default */
  .search-input {
    width: 0;
    opacity: 0;
    padding: 5px;
    margin-left: 40px; /* Space for the icon */
    transition: width 0.3s ease, opacity 0.3s ease;
    border: none;
    background-color: #3e1417;
    color: white;
    /* border-bottom: 2px solid white; */
  }

  .search-input::placeholder {
      color: white; /* Replace with your desired color */
      opacity: 1;  /* Optional: Make the placeholder fully opaque */
  }

  /* Focus state */
  .search-input:focus {
      outline: none; /* Remove the outline */
    border: none; /* Remove all borders */
    /* border-bottom: 2px solid white;  */
    box-shadow: none; /* Remove any box shadow */
    color: white; /* Ensure the text stays white */
    background-color: #3e1417;
  }

  /* When the container is open, it expands to fit the input field */
  .search-container.open {
    width: 400px; /* Width when expanded */
  }

  .search-container.open .search-input {
    width: 320px; /* Width of the input field */
    opacity: 1;
  }

  /* Dropdown below the input field */
  .search-container .dropdown-menu {
    position: absolute;
    top: 100%; /* Place it directly below the input field */
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    display: none; /* Hidden by default */
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Add shadow to the dropdown */
    background: linear-gradient(to top, #5a2326, #7d3538);
    scrollbar-width:none;
  }

  .search-container .dropdown-menu.show {
    display: block; /* Show dropdown when there are suggestions */
  }

  .search-container .dropdown-item {
    cursor: pointer;
    padding: 5px 10px;
    color: white;
    display: flex;
    margin-bottom: 20px;
    gap: 5px;
  }

  .icon-backdrop {
      height: 30px;
      width: 30px;
      background-color: #3e1417;
      border-radius: 10px;
      padding: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .search-container .dropdown-item:hover {
    background-color: #3e1417; 
    color: white;
  }



  .search-input-wrapper {
    position: relative;
    display: flex;
  }

  .clear-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 18px;
    color: #888;
    display: none; /* Hidden by default */
  }

  .search-input:not(:placeholder-shown) + .clear-icon {
    display: block; /* Show the icon when the input is not empty */
  }


   /* Backdrop Overlay for Blurred Background */
   .backdrop-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);  /* Semi-transparent white */
    backdrop-filter: blur(5px);  /* Apply blur to the backdrop */
    display: none;  /* Hidden initially */
    z-index: 1030;  /* Below the drawer */
}

/* Wrapper for the drawer and button */
.drawer-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040; /* Above the backdrop */
}

/* Drawer Style */
.bottom-drawer {
    /* background-color: #3e1417; */
    background: linear-gradient(to top, #5a2326, #7d3538);
    color: white;
    /* border-top: 1px solid #ccc; */
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    padding: 15px;
    display: none;
    transition: transform 0.3s ease-in-out;
    z-index: 1041; /* Above the backdrop */
    height: 50vh;
}

.bottom-drawer.show {
    display: block;
}

/* Close Button Positioned Above Drawer */
.drawer-close-btn {
    position: relative;
    /* bottom: calc(100% + 0.5rem);  
    right: 15px; */
    background-color: #3e1417;
    color: white;
    border: 1px solid #3e1417;
    border-radius: 50%;
    padding: 10px 14px;
    font-size: 20px;
    font-weight: lighter;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    z-index: 1042;  /* Highest */
    display: none;  /* Hidden initially */
}

.custom-input {
    color: #3e1417;  /* Text color set to #3e1417 */
    padding: 5px;
    margin-left: 40px; /* Space for the icon */
    width: 80%;
    padding-right: 40px;

}

.mobile-search-clear-icon {
  position: absolute;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 18px;
    color: #888;
    display: none; /* Hidden by default */
}

.custom-input:not(:placeholder-shown) + .mobile-search-clear-icon {
  display: block; /* Show the icon when the input is not empty */
}

.mobile-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-input::placeholder {
  color: #3e1417;  /* Text color set to #3e1417 */
}

.custom-input:focus {
    color: #3e1417;
    outline: none;            /* Remove outline on focus */
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.6); /* Glow effect on focus */
}

.close-drawer-btn-backdrop {
  position: absolute;
  bottom: calc(100% + 0.5rem);  /* 0.5rem space between button and drawer */
  right: 15px;
  height: 65px;
  width: 65px;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1041;
  border-radius: 20px;
  padding: 10px 14px;
  display: none;
}

.mobile-suggestions-list {
  max-height: 200px;
  overflow-y: auto;
  /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);  */
  /* background: linear-gradient(to top, #5a2326, #7d3538); */
  scrollbar-width:none;
  justify-self: center;
  width: 80%;
}

.mobile-suggestions-list .dropdown-item {
  cursor: pointer;
  padding: 5px 10px;
  color: white;
  display: flex;
  margin-bottom: 20px;
  gap: 5px;
}

.theme-text-dark {
  color: #3e1417;
}

.theme-text-muted {
  color: rgba(62, 20, 23, 0.7);
}

.mobile-event-card {
  background-color: #FFF9EE;
}