/* ==============================
   GENERAL STYLES & RESETS
============================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}




body {
  font-family: Arial, sans-serif;
  color: #333;
  line-height: 1.6;
  background-color: #fff;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 0;
}

.container-single-listing {
  width: 68%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 0;
}

.container-listings {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Center content horizontally */
  justify-content: center;
  /* Center content vertically */
  width: 100%;
  /* Ensure it takes full width */
}

/* View All Listings Button */
.hero__btn--listings {
  background: #fff;
  color: #000;
  border: none;
  /* Border removed */
}

/* 2-col flex wrapper */
.two-col-wrapper {
  display: flex;
  gap: 20px;
  /* spacing between columns */
  margin-top: 1rem;
}


.ad-col {
  flex: 0 0 30%;
  /* fix it at 30% */
  background: #ffa;
  /* bright to confirm it’s visible */
  border: 2px solid #000;
  /* thick black border to ensure you see it */
  min-height: 300px;
  padding: 20px;
  box-sizing: border-box;
}

.homepage-listings-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Center the items */
  gap: 20px; /* Space between cards */
  margin-top: 1rem;
  padding: 0 15px; /* Add side padding for better spacing */
}

.homepage-listing-card-wrapper {
  text-decoration: none;
  color: inherit;
  flex: 0 1 calc(48% - 20px); /* Slightly less than half to fit two cards */
  max-width: 550px; /* Prevent cards from growing too wide */
  box-sizing: border-box;
}

.homepage-listing-card {
  display: flex;
  flex-direction: row;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
  width: 100%;
  height: 100%;
}

.homepage-listing-card:hover {
  transform: translateY(-5px);
}

.homepage-listing-card__image {
  flex: 0 0 150px; /* Fixed width for the image section */
  max-height: 150px; /* Keep the height consistent */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.homepage-listing-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.homepage-listing-card__info {
  flex: 1;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.homepage-listing-card__price {
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 0.5rem;
}

.homepage-listing-card__address {
  font-size: 0.95rem;
  color: #666;
  margin-bottom: 0.5rem;
}

.homepage-listing-card__details {
  font-size: 0.85rem;
  color: #999;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.homepage-listing-card__date {
  font-size: 0.85rem;
  color: #666;
}

/* Responsive Design */
@media (max-width: 1155px) {
  .homepage-listings-grid {
      padding: 0 10px; /* Add padding to prevent cards from touching screen edges */
  }
}

@media (max-width: 768px) {
  .homepage-listing-card-wrapper {
      flex: 0 1 100%; /* Full width on smaller screens */
  }

  .homepage-listings-grid {
      gap: 15px; /* Reduce spacing for smaller screens */
  }
}



/* Right column = 70% for Listings */
.listings-col {
  flex: 0 0 70%;
  /* fix it at 70% */
  background: #f0f8ff;
  /* light blue to confirm it’s visible */
  min-height: 300px;
  padding: 10px;
  box-sizing: border-box;
}

.listings-ad-grid {
  display: grid;
  grid-template-columns: 30% 70%;
  /* Ad gets 30%, listings 70% */
  gap: 20px;
  /* space between columns */
  margin-top: 1rem;
  /* optional */
}

.listing-card__content img {
  border-radius: 5px;
}

.listing-card__footer a i {
  margin-right: 6px;
  /* or 8px, if you prefer bigger spacing */
}


.listing-card__action {
  text-decoration: none;
  font-size: 14px;
  color: #007bff;
  display: flex;
  align-items: center;
  gap: 5px;
}

.listing-card__action:hover {
  text-decoration: underline;
}


/* ==============================
   HEADER
============================== */
.header {
  background-color: #f6f6f6;
  position: relative;
  z-index: 1000;
}

.header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}

.header__logo-img {
  max-height: 50px;
  /* Adjust as needed */
}

.header__logo {
  flex: 1; /* Take available space */
}

/* Default: Navigation always visible for larger screens */
.header__nav {
  display: flex; /* Ensure it's visible on desktop */
  flex-direction: row; /* Horizontal layout for desktop */
  background-color: transparent; /* No background for desktop */
  position: static; /* No absolute positioning for desktop */
  width: auto; /* Auto width for desktop */
  padding: 0;
  z-index: 2000; /* Higher than other elements */
}

/* Mobile-specific styles */
@media (max-width: 768px) {
  .header__nav {
      display: none; /* Hide on mobile by default */
      flex-direction: column;
      position: absolute;
      top: 100%; /* Place just below the header */
      right: 0;
      width: 100%; /* Full width on mobile */
      background-color: #fff;
      z-index: 1000;
      padding: 1rem 0;
  }

  /* Show navigation when active */
  .header__nav.active {
      display: flex; /* Show nav on mobile */
  }

  .header__nav .nav__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  .nav__link {
    display: block;
    padding: 0.75rem 1.5rem;
    color: #000;
    transition: background-color 0.3s ease;
  }
  .nav__link:hover {
    background-color: #f68127;
    color: #fff;
  }
}


/* Active state: Show the navigation */
.header__nav.active {
  display: flex;
}

.header__nav .nav__list {
  list-style: none;
  display: flex;
  gap: 1rem;
}

/* Navigation links (desktop and mobile) */
.nav__link {
  display: block;
  padding: 0.75rem 1.5rem;
  color: #000;
  transition: background-color 0.3s ease;
}

.nav__link:hover {
  background-color: #f68127;
  color: #fff;
  border-radius: 4px;
}

.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__item {
  text-align: left;
}


/* Breadcrumb Menu Styles */
.breadcrumb-nav {
  display: none; /* Hide on larger screens */
  background-color: #f9f9f9;
  padding: 0.5rem 1rem;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.breadcrumb {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.breadcrumb li {
  display: inline;
}

.breadcrumb a {
  color: #007bff;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

/* Add separator between breadcrumb items */
.breadcrumb li + li::before {
  content: ">";
  margin: 0 0.5rem;
  color: #666;
}

/* Show the toggle button only on mobile */
.header__menu-toggle {
  display: none; /* Hide toggle button by default */
}


@media (max-width: 768px) {
  .header__menu-toggle {
    display: flex; /* Ensure the button is a flex container */
    justify-content: center; /* Center the icon horizontally */
    align-items: center; /* Center the icon vertically */
    width: 50px; /* Adjust size for larger icon */
    height: 50px; /* Make it a square button */
    background: none; /* No background colour */
    font-size: 24px;
    border: none; /* Remove border */
    cursor: pointer; /* Pointer cursor on hover */
    color: #f68127; /* Solid white lines */
    padding: 0; /* Remove extra padding */
  }
  
  .header__menu-toggle span {
    display: block; /* Ensure each line is a block element */
    width: 35px; /* Width of the lines (slightly bigger) */
    height: 4px; /* Thickness of the lines */
    margin: 6px 0; /* Spacing between lines */
    background-color: white; /* Solid white lines */
    border-radius: 2px; /* Slightly rounded edges */
  }
  
  /* Hover effect for the hamburger */
  .header__menu-toggle:hover span {
    background-color: #df6f19; /* Slightly lighter white on hover */
  }
}




/* Default: Filters are always visible on larger screens */
.filter-summary--mobile {
  display: none; /* Hide the collapsible button on desktop */
}

.filter-summary__content {
  display: block; /* Always show filters on desktop */
}

/* Mobile-specific styles */
@media (max-width: 768px) {
  .filter-summary--mobile {
    display: block; /* Show the collapsible button on mobile */
  }

  .filter-summary__content {
    display: none; /* Hide filters by default on mobile */
  }

  .filter-summary__content[aria-hidden="false"] {
    display: block; /* Show filters when expanded */
  }

  .filter-summary__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    padding: 0.75rem 1.5rem;
    background-color: #f68127; /* Gold background */
    color: #fff; /* White text */
    font-size: 1rem;
    font-weight: bold;
    border: none;
    border-radius: 5px; /* Rounded corners */
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s ease; /* Smooth hover effect */
  }
  
  .filter-summary__toggle:hover {
    background-color: #df6f19; /* Darker gold on hover */
  }
  
  .filter-summary__toggle:active {
    background-color: #f68127; /* Even darker gold on active press */
  }
  
  .filter-summary__toggle:focus {
    outline: none;/
  }
  
}


/* Default layout: side-by-side for desktop */
@media (min-width: 1300px) {
  .listings-wrapper {
    display: table;
    width: 100%;
  }

  .listings-container {
    display: table-cell;
    width: 65%;
    vertical-align: top;
    box-sizing: border-box;
  }

  .ad-section {
    display: table-cell;
    width: 35%;
    vertical-align: top;
    background: #ffa;
    padding: 20px;
    margin-left: 25px;
    box-sizing: border-box;
  }
}

.ad-container {
  margin-left: 25px;
}

.listings-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.listings-container > * {
  flex: 0 0 calc(33.333% - 1rem);  /* Adjust width as needed */
}

/* Mobile layout: stack ad below listings */
@media (max-width: 767px) {
  .listings-wrapper {
    display: block;
  }

  .listings-container {
    display: block;
    width: 100%;
  }

  .ad-container {
    margin-left: 0px;
  }
}




@media (max-width: 768px) {
  .listing-card__image-img {
    height: 200px; /* Increase height on mobile */
    object-fit: cover; /* Dynamically crop the image */
    width: 100%; /* Full width */
    border-radius: 5px 5px 0 0; /* Rounded corners for the top */
  }
}


/* ==============================
   HERO SECTION
============================== */
.hero {
  position: relative;
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
  padding: 3rem 0;
}

/* Add a slight black overlay */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  /* Adjust opacity as needed */
  z-index: 0;
}

.hero__container {
  position: relative;
  z-index: 1;
  /* So text & form appear above the overlay */
}

.hero__title {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.hero__subtitle {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

/* Search Form in hero */
.search-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.search-form__group {
  display: flex;
  flex-direction: column;
}

.search-form__label {
  margin-bottom: 0.5rem;
  font-weight: bold;
}

.search-form__select {
  padding: 0.5rem;
  min-width: 150px;
}

/* Remove the old search-form__btn styles if not needed 
   or keep them if you want an extra reference 
.search-form__btn {
  ...
}
*/

/* 
   CTA Buttons (Search + View All Listings) 
   You can wrap them in the same form or keep them separate,
   depending on whether you want the Search button to submit 
   the form. 
*/

/* Hero Buttons (Search + View Listings) */
.hero__btn {
  padding: 0.75rem 1.5rem;
  margin-top: 1rem;
  transition: background 0.3s ease, color 0.3s ease;
  cursor: pointer;
  font-weight: bold;
  font-size: 1rem;
  border-radius: 4px;
  /* Ensures consistent font size */
  display: inline-block;
  text-align: center;
  min-width: 150px;
  /* Ensures consistent button width */
}

/* Search Button */
.hero__btn--search {
  background: #f68127;
  color: #fff;
  border-radius: 4px;
  border: none;
  /* No border for consistency */
}

/* View All Listings Button */
.hero__btn--listings {
  background: #fff;
  color: #000;
  border-radius: 4px;
  border: none;
  /* Border removed */
}

/* Hover states */
.hero__btn:hover {
  opacity: 0.9;
  /* Consistent hover effect for both buttons */
}

.hero__btn--listings:hover {
  background: #eaeaea;
}

.hero__btn--search:hover {
  background: #df6f19;
}

/* Align buttons side-by-side */
.hero__btns {
  display: flex;
  justify-content: center;
  gap: 1rem;
  /* Space between buttons */
  margin-top: 1rem;
}

p.listing-card__date {
  padding-top: 28px;
}

/* ==============================
   FEATURED LISTINGS
============================== */
.featured-listings {
  padding: 2rem 0;
  background-color: #f7f7f7;
}

.section-title {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  text-align: center;
}

/* Listings Grid */
.listings-grid-home {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 2fr));
  /* Increased min width for larger boxes */
  gap: 20px;
  /* Increased gap for better spacing */
  justify-content: center;
  /* Center the grid items */
}

@media (max-width: 1325px) {
  .listings-grid-home {
    grid-template-columns: 1fr;
    gap: 15px;
    justify-content: center;
  }
}

/* ==============================
   FEATURED LISTINGS GRID
============================== */
.listings-grid-listings {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Two columns of equal width */
  gap: 20px;
  /* Space between grid items */
  margin-top: 1rem;
  /* Optional: Adds space above the grid */
}

@media (max-width: 768px) {
  .listings-grid-listings {
    grid-template-columns: 1fr;
    /* Single column on small screens */
  }
}

.content-wrapper {
  display: flex;
  gap: 20px;
  margin-top: 1rem;
}

.listings-grid {
  flex: 0 0 70%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  align-items: stretch;  /* Stretch items to match heights */
}

.listings-layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
}

/* Right: 30%, sticky so it stays on scroll */
.ad-section {
  background: #ffa;
  /* bright colour so you see it! */
  border: 2px solid #000;
  /* black border so it’s really obvious */
  min-height: 300px;
  /* ensure it’s visible */
  padding: 20px;
  box-sizing: border-box;
}

/* .ad-placeholder is just for the coloured box inside the ad-section */
.ad-placeholder {
  background-color: #c3dffb;
  border-radius: 4px;
  padding: 1rem;
  text-align: center;
}

/* Listing Card */
.listing-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;  /* Fill the entire height of the container */

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.listing-card__content {
  display: flex;
  flex: 1;  /* Take up remaining space */
}


.listing-card__header {
  display: flex;
  align-items: center;
  padding: 5px 10px;
}

.listings-section {
  background: #f0f8ff;
  /* light bluish to ensure you see it */
  min-height: 300px;
  padding: 10px;
  box-sizing: border-box;
}

.listing-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.listing-card__footer {
  justify-content: space-between;
  align-items: center;
  background-color: #f9f9f9;
  border-top: 1px solid #ddd;
  padding: 10px;
}

/* Date and Time */
.listing-card__datetime {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 10px;
}

.listing-card__footer a {
  color: #666;
  /* Grey color */
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
}

.listing-card__footer a:hover {
  text-decoration: underline;
}

/* Date and Time */
.listing-date-time {
  display: flex;
  /* Use flexbox for alignment */
  justify-content: space-between;
  /* Push date to the left and time to the right */
  align-items: center;
  /* Align vertically */
  padding: 5px 10px;
  /* Optional: Adjust spacing for aesthetics */
  font-size: 0.9rem;
  /* Adjust font size as needed */
}

.listing-date {
  flex: 1;
  /* Allow the date to take up space on the left */
  text-align: left;
  /* Align the text to the left */
}

.listing-time {
  flex: 1;
  /* Allow the time to align properly */
  text-align: right;
  /* Align the text to the right */
}

.listings-grid .listing-date {
  margin-left: 16px;
  /* Float slightly left of the listing box */
}



/* ==============================
   SEARCH/FILTER FORM
============================== */
.search-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  background-color: #f9f9f9;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-form_homepage {
  display: grid;
  gap: 1rem;
  background-color: #f9f9f9;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  grid-template-columns: repeat(4, 1fr);
}

/* Between 923px and 1217px: 2 columns */
@media (max-width: 1217px) and (min-width: 923px) {
  .search-form_homepage {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Below 923px but above 600px: also 2 columns
   (If you like 2 columns down to 600px) */
   @media (max-width: 922px) and (min-width: 601px) {
    .search-form_homepage {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }

  /* Under 600px: 1 column */
@media (max-width: 600px) {
  .search-form_homepage {
    grid-template-columns: 1fr !important;
  }
}
  

.search-form__group {
  display: flex;
  flex-direction: column;
}

.search-form__label {
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #333;
}

.search-form__select {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

.search-form__btn {
  padding: 0.75rem;
  background-color: #f68127;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  grid-column: span 2;
  /* Make the button span across two columns */
}

.search-form__btn:hover {
  background-color: #df6f19;
}

/* Responsive Adjustments */
@media (max-width: 600px) {
  .search-form {
    grid-template-columns: 1fr;
  }

  .search-form__btn {
    grid-column: span 1;
  }
}

/* Common styling for select and date input elements */
.search-form__select,
.search-form__input[type="date"] {
  width: 100%;
  /* Make elements take full width of their container */
  padding: 0.5rem 0.75rem;
  /* Consistent padding */
  font-size: 1rem;
  /* Consistent font size */
  border: 1px solid #ccc;
  /* Consistent border */
  border-radius: 4px;
  /* Consistent border radius */
  box-sizing: border-box;
  /* Include padding and border in element's total width and height */
  background-color: #fff;
  /* Consistent background color */
  appearance: none;
  /* Remove default styling (especially for date inputs) */
  -webkit-appearance: none;
  /* Remove default styling in Safari */
  -moz-appearance: none;
  /* Remove default styling in Firefox */
}

/* Add a consistent height */
.search-form__select,
.search-form__input[type="date"] {
  height: 2.5rem;
  /* Adjust as needed */
}

/* Add focus effects for better UX */
.search-form__select:focus,
.search-form__input[type="date"]:focus {
  border-color: #66afe9;
  outline: none;
  box-shadow: 0 0 5px rgba(102, 175, 233, 0.6);
}

/* Optional: Add a background image for the select to indicate it's a dropdown */
.search-form__select {
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="5"><path fill="%23999" d="M0 0l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 10px 5px;
  padding-right: 2.5rem;
  /* Ensure text doesn't overlap the dropdown arrow */
}

/* Optional: Customize the date input's calendar icon (browser-dependent) */
/* Note: Styling native date inputs can be limited due to browser restrictions */
.search-form__input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.search-form__input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

#shareListingModal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  max-width: 90%;
  background: #fff;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
  z-index: 1000;
  box-sizing: border-box;
}

#shareListingModal .form-group {
  margin-bottom: 1rem;
}

#shareListingModal .form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

#shareListingModal .form-group input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#shareListingModal .btn {
  display: block;
  width: 100%;
  padding: 0.75rem;
  background-color: #f68127;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
}

#shareListingModal .btn:hover {
  background-color: #df6f19;
}

.confirmation-box {
  display: none; /* Hidden by default */
  background-color: #d4edda; /* Light green background */
  color: #155724; /* Dark green text */
  padding: 10px;
  margin-top: 15px;
  border: 1px solid #c3e6cb; /* Light green border */
  border-radius: 5px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

.listing-card__logo {
  height: 40px;
  width: auto;
}

.listing-card__calendar,
.listing-card__reminder {
  text-align: left;
  font-size: 14px;
  display: inline-block;
  margin-right: 10px;
}

.listing-card__calendar:hover,
.listing-card__reminder:hover {
  text-decoration: underline;
}

.listing-card__image {
  flex: 0 0 200px;
  /* Slightly larger image */
}



/* Card Info */
.listing-card__info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.listing-card__price {
  font-size: 1.5rem;
  color: #333;
}

.listing-card__address {
  font-size: 1rem;
  color: #666;
  margin: 0 0 0.5rem;
  line-height: 1.2;
}

.listing-card__details {
  margin: 0;
  display: flex;
  gap: 0.7rem;
  margin-top: auto;  /* Push details to bottom of info section */
}

.listing-card__details .icon {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.listing-card__details .icon i {
  font-size: 1rem;
}

/* Footer */

.listing-card__calendar {
  color: #1b3a57;
  text-decoration: none;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.listing-card__calendar i {
  font-size: 1rem;
}

.listing-card__calendar:hover {
  text-decoration: underline;
}

.listing-card__favourite {
  font-size: 1.5rem;
  color: #ddd;
  cursor: pointer;
  transition: color 0.3s;
}

.listing-card__favourite:hover {
  color: #ffcc00;
}



/* Pagination (placeholder styles) */
.pagination {
  text-align: center;
  margin-top: 1.5rem;
}

.pagination__link {
  margin: 0 0.5rem;
  color: #0077cc;
  text-decoration: underline;
}

.pagination__current {
  margin: 0 1rem;
}

/* ==============================
   WHY GRIFFITH REALTY CONNECT
============================== */
.why-grc {
  padding: 2rem 0;
}

.why-grc__text {
  max-width: 700px;
  margin: 1rem auto;
  text-align: center;
}

/* Sign Up to Get Alerts = #f68127 */
.why-grc__cta-btn {
  display: block;
  margin: 1rem auto;
  padding: 0.75rem 1.5rem;
  background: #f68127;
  border-radius: 4px;
  color: #fff;
  text-align: center;
  width: fit-content;
  transition: background 0.3s ease;
  font-weight: bold;
  border: none;
  cursor: pointer;
}

.why-grc__cta-btn:hover {
  background: #df6f19;
}

/* ==============================
   FOOTER
============================== */
.footer {
  background: #7d4897;
  color: #fff;
}


.footer__container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: #fff;
}

.footer__links {
  display: flex;
  gap: 1rem;
}

.footer__link {
  color: #fff;
  text-decoration: underline;
}

.footer__socials {
  font-size: 0.9rem;
}

.footer__social-link {
  color: #fff;
  text-decoration: underline;
}

.footer__copy {
  flex-basis: 100%;
  text-align: center;
  margin-top: 1rem;
  color:#fff;
  font-size: 0.8rem;
}

/* Dimmed Overlay: hidden by default */
.calendar-overlay {
  display: none;
  position: fixed;
  inset: 0; /* top:0; left:0; right:0; bottom:0; */
  background: rgba(0,0,0,0.4);
  z-index: 999;
}

/* Modal container */
.calendar-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  max-width: 90%;
  background: #fff;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
  z-index: 1000;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

.calendar-modal__content {
  position: relative;
  padding: 1rem;
}

/*********************************************
 * Close Button (X)
 *********************************************/
 .calendar-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-size: 1.2rem;
  cursor: pointer;
}

/* Sample for the icons inside the list */
.calendar-modal__links i {
  font-size: 1.3rem;
  /* bigger icon */
}

/*********************************************
 * Title and Event Text
 *********************************************/
 .calendar-modal__title {
  margin: 0 0 0.75rem; /* some bottom spacing */
  font-size: 1.3rem;
  font-weight: 600;
}

.calendar-modal__event p {
  margin: 0 0 1.5rem; /* spacing below */
  line-height: 1.4;
  font-size: 0.95rem;
  color: #333;
}

/* Possibly style the bullet list */
.calendar-modal__options {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
}

/*********************************************
 * Calendar Links (list style)
 *********************************************/
 .calendar-modal__links {
  list-style: none;
  margin: 0;
}

.calendar-modal__links li {
  margin-bottom: 1rem;
}

.calendar-modal__options li {
  margin-bottom: 0.5rem;
}

/*********************************************
 * Individual Links
 *********************************************/
 .calendar-modal__link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #0055AA;           /* darkish blue text */
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
}

.calendar-modal__link:hover {
  text-decoration: underline;
  color: #003f87;           /* darker hover colour */
}


/* The anchor links themselves */
.calendar-modal__links a {
  display: flex;
  align-items: center;
  gap: 0.8rem;           /* space between icon & text */
  color: #0055AA;        /* or your chosen colour */
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
}

/* Icon style: fixed width/height so the text lines up */
.calendar-modal__links a i {
  display: flex; /* center the icon in its container */
  align-items: center;
  justify-content: center;
  width: 33px;        /* fixed width */
  height: 33px;       /* fixed height */
  border-radius: 50%; /* circle */
  background: #e2e2e2;
  color: #444;        /* dark grey for icon */
  font-size: 1.1rem;  /* tweak icon size */
}

.calendar-modal__links a:hover {
  text-decoration: none;
  color: #003f87; /* darker hover colour if you like */
}

.calendar-modal__options a {
  color: #007bff;
  text-decoration: none;
}

/*********************************************
 * Icon with grey circle
 *********************************************/
 .calendar-modal__link i {
  background: #e2e2e2;      /* light grey circle behind icon */
  color: #444;             /* dark grey icon */
  border-radius: 50%;
  padding: 0.5rem;
  font-size: 1.15rem;       /* a bit bigger icon */
  width: 1.15rem; /* optional: ensure circle is a circle, not an oval */
  height: 1.15rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

/* On hover, underline or darken text */
.calendar-modal__options a:hover {
  text-decoration: underline;
}

/* Adjust the details text inside the modal */
.calendar-modal__details {
  font-size: 0.95rem;
  line-height: 1.4;
  color: #333;
  margin-bottom: 1rem;
}



/* ==============================
   RESPONSIVE DESIGN
============================== */
@media (max-width: 768px) {
  .search-form {
    flex-direction: column;
    align-items: center;
  }

  .footer__container {
    flex-direction: column;
  }
}

.share-button, .favourite-button {
  text-decoration: none;
  color: #000; /* Change color as needed */
}


a.favourite-button {
  padding-left: 15px;
}

.favourite-button {
  color: #000; /* Default color */
  transition: color 0.3s ease; /* Smooth transition */
}

.fa-star {
  transition: color 0.3s ease;
}

.favourite-listing .fa-star {
  color: inherit;
}

.favourite-listing.active .fa-star,
.fa-star.active {
  color: #FFD700 !important;
}

.favourite-listing i.fa-star {
  color: #666666;
}

.favourite-listing i.fa-star[style*="FFD700"] {
  color: #FFD700 !important;
}

.favourite-listing {
  text-decoration: none;
}

.favourite-listing:hover {
  text-decoration: none;
}






.favourite-listing-single .fa-star {
  color: inherit;
}

.favourite-listing-single.active .fa-star,
.fa-star.active {
  color: #FFD700 !important;
}

.favourite-listing-single i.fa-star {
  color: #fff;
}

.favourite-listing-single i.fa-star[style*="FFD700"] {
  color: #FFD700 !important;
}

.favourite-listing-single {
  text-decoration: none;
}

.favourite-listing-single:hover {
  text-decoration: none;
}


.listing-card__footer a {
  text-decoration: none;
}

.listing-card__footer:hover a {
  text-decoration: none;
}

.nav__link--star {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
}

.nav__link--star .fa-star {
  color: #FFD700;
  text-shadow: 
      1px 1px 1px rgba(0,0,0,0.2),
      -1px -1px 1px rgba(255,255,255,0.8);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));
  transition: transform 0.2s ease;
}

.nav__link--star:hover .fa-star {
  transform: scale(1.1);
}

.balloon-tag {
  bottom: 4px;
  position: absolute; 
}

.price-listing {
  font-size: 1.5rem; 
}

.address-listing {
  font-size: 1rem; 
}

@media (max-width: 501px) {
.balloon-tag {
  bottom: 9px;
  position: relative;
}

.price-listing {
  font-size:1rem;
}

.address-listing {
  font-size: 0.9rem;
}

.listing-card__details {
  gap: 0;
}
}