/* Global Styles */
html, body {
    font-family: 'Poppins', sans-serif;
  }
  
  /* Utility Classes */
  .leftMargin {
    margin-left: 20px;
  }
  
  /* Navbar Styles */
  .navbar {
    padding: 0.5rem 1rem;
  }
  
  .navbar-brand {
    font-size: 1.5rem;
    font-weight: bold;
  }
  
  .navbar-nav .nav-link {
    margin-right: 1rem;
    font-size: 1.1rem;
  }
  
  .navbar-toggler {
    border: none;
  }
  
  /* Responsive Navbar */
  @media (max-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
      padding-left: 0;
    }
  }

  .multiselect-container>li>a>label {
    padding: 1px !important;
  }

  .multiselect  {
    border: 1.5px solid black !important;
  }
  
  /* Dashboard Styles */
  .dashboard-container {
    margin-top: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .dashboard-container .header-image {
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position: center;
  }
  
  /* Magnify Lens Styles */
  .magnify-lens {
    display: none;
    position: absolute;
    border-radius: 50%;
    border: 2px solid #fff;
    width: 150px;
    height: 150px;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  }
  
  .map-container:hover .magnify-lens {
    display: block;
  }
  
  /* Mountain Cards */
  .mountain-square {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    background-color: #f8f9fa;
    border: 1.5px solid black !important;
    border-radius: .25rem;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
  }
  
  .mountain-square:hover {
    background-color: #e2e6ea;
    transform: scale(1.05);
  }

  .resort-open {
    color: green;
    border-color: #c3e6cb;
  }
  
  .resort-closed {
    color: red;
    border-color: #f5c6cb;
  }

  .bg-dark {
    background-color: #5d5e69 !important;
  }
  
  .resort-open-card {
    background-color: #d4edda;
    border-color: #c3e6cb;
  }
  
  .resort-closed-card {
    background-color: #f8d7da;
    border-color: #f5c6cb;
  }

  .mountain-open {
    background-color: #d4edda;
    border-color: #c3e6cb;
  }
  
  .mountain-closed {
    background-color: #f8d7da;
    border-color: #f5c6cb;
  }
  
  /* Dropdown Styles */
  .selectBox2 {
    width: 100%;
  }
  
  .custom-dropdown {
    width: 100%;
    padding: .375rem 1.75rem .375rem .75rem;
    line-height: 1.5;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    appearance: none;
  }
  
  .multiselect-container.dropdown-menu {
    z-index: 1050;
    overflow: hidden;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
    
  }
  
  .submarketText {
    padding: .375rem .75rem;
  }
  
  /* Pagination Styles */
  .pagination {
    display: flex;
    justify-content: center;
    padding: 1rem;
  }
  
  .pagination a {
    color: white;
    padding: 0.5rem 0.75rem;
    margin: 0 0.25rem;
    background: #5d5e69;
    border: 1px solid #5d5e69;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
  }
  
  .pagination a:hover {
    background-color: #98b0d7;
  }
  
  @media (max-width: 576px) {
    .pagination {
      flex-direction: column;
    }
  
    .pagination a {
      margin-bottom: 0.5rem;
    }
  }
  
  /* Button Styles */
  .btn {
    padding: 8px 16px;
    border-radius: 4px;
    transition: all 0.3s ease;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
  }
  
  .primary-btn {
    color: #FFFFFF;
    background: #5d5e69;
    border: 1.5px solid black;
  }
  
  .primary-btn:hover {
    color: white;
    background: #98b0d7;
  }
  
  .primary-btn:active {
    transform: scale(0.98);
  }
  
  /* Search Bar */
  #searchBarID {
    width: 100%;
    padding: 8px 16px;
    color: #5d5e69;
    background: #FFFFFF;
    border: 1.5px solid black;
    border-radius: 4px;
  }
  
  /* Star Logo */
  .star-logo {
    display: inline-block;
    width: 25px;
    height: 25px;
    cursor: pointer;
    transition: fill 0.3s;
  }
  
  .star-logo:hover {
    background-color: yellow;
  }
  
  /* Tables */
  .table th, .table td {
    text-align: center;
    padding: .75rem;
  }
  
  .table thead th {
    background-color: #5d5e69;
    color: white;
  }

  table th, .table td {
    border: 1px solid grey !important;
  }
  
  /* Responsive Adjustments */
  @media (max-width: 768px) {
    .custom-dropdown {
      padding: .375rem .75rem;
    }
  }
  

  td button img {
    transition: all 0.2s ease-in-out;
}

/* Change image to star_filled for buttons with star_blank image */
td button img[src="{% static 'images/star_blank.png' %}"]:hover {
    content: url("{% static 'images/star_filled.png' %}");
}

/* Change image to star_blank for buttons with star_filled image */
td button img[src="{% static 'images/star_filled.png' %}"]:hover {
    content: url("{% static 'images/star_blank.png' %}");
}