:root {
  /* Color Palette */
  --color-black: #000000;
  --color-white: #ffffff;

  --color-text-primary: #222222;
  --color-text-secondary: #555555;
  --color-text-muted: #777777;

  --color-border-light: #e0e0e0;
  --color-border-medium: #cccccc;

  --color-background-page: #f9f9f9;
  --color-background-card: var(--color-white);
  --color-background-modal-overlay: rgba(0, 0, 0, 0.6);

  --color-accent-primary: #FF385C;
  /* Example: Airbnb pink/red for likes */
  --color-accent-interactive: #007bff;
  /* Example: Standard blue for interactive elements */

  /* Typography */
  --font-primary: "Nunito Sans", sans-serif;

  /* Spacing (optional, but good practice) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Borders & Shadows (optional) */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Basic Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* HTML Base Styles */
html {
  font-family: var(--font-primary);
  font-size: 16px;
  /* Standard base font size */
  line-height: 1.5;
  /* Improves readability */
  color: var(--color-text-primary);
  background-color: var(--color-white);
  /* Set default to white */
}

body {
  -webkit-font-smoothing: antialiased;
  /* Smoother fonts on WebKit browsers */
  -moz-osx-font-smoothing: grayscale;
  /* Smoother fonts on Firefox */
  background-color: var(--color-white);
  /* Ensure body has white background */
}


/* ====================================
   Base Element Styling & Utilities
   ==================================== */


.flex-gap-1 > *:not(:last-child) {
  margin-right: 0.25rem; /* 4px */
}
.flex-gap-2 > *:not(:last-child) {
  margin-right: 0.5rem; /* 8px */
}
.flex-gap-3 > *:not(:last-child) {
  margin-right: 1rem; /* 16px */
}
.flex-gap-4 > *:not(:last-child) {
  margin-right: 1.5rem; /* 24px */
}
.flex-gap-5 > *:not(:last-child) {
  margin-right: 3rem; /* 48px */
}

/* Default Button Reset and Base Styles */
.btn {
  display: inline-flex;
  /* Good for aligning text/icons if any */
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-primary);
  font-size: 1em;
  /* Default, can be overridden */
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  /* Default to no border, can be added by modifiers */
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  background-color: transparent;
  /* Default, usually overridden */
  color: var(--color-text-primary);
  /* Default, usually overridden */
}

.btn:focus-visible {
  outline: 2px solid var(--color-accent-interactive);
  outline-offset: 2px;
}

/* Remove default button styling for specific cases if needed by overriding */
.btn.reset-appearance {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

.btn-link {
  /* To be used with .btn and .reset-appearance */
  color: var(--color-accent-interactive);
  text-decoration: none;
  /* No underline by default */
  font-weight: 500;
  /* Ensure it has a bit of weight, as reset-appearance uses font:inherit */
}

.btn-link:hover,
.btn-link:focus-visible {
  /* :focus-visible for keyboard users */
  color: #0056b3;
  /* A common darker shade for interactive blue on hover/focus */
  text-decoration: underline;
}


/* ====================================
   Global Styles & Layout Utilities
   ==================================== */

.wrapper {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

/* Special case for the search bar wrapper to extend to full width */
.wrapper:has(.unified-search-bar-container) {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
  background-color: var(--color-background-page);
  /* Light grey background for the header area */
  padding-bottom: 1px;
  /* Ensure the background extends to the border */
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
  padding-left: var(--space-lg);
  /* Match wrapper or be independent */
  padding-right: var(--space-lg);
  background-color: var(--color-background-page);
  /* Light grey background for the header area */
  position: sticky;
  top: 0;
  z-index: 100;
}

/* .header-logo img {
  height: 30px;
  /* Adjust as needed */
} */

.header-nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-nav-links button {
  background: none;
  border: none;
  padding: var(--space-sm) var(--space-md);
  margin: 0 var(--space-md);
  cursor: pointer;
  font-size: 1em;
  font-family: var(--font-primary);
  color: var(--color-text-secondary);
  position: relative;
}

.header-nav-links button.active-header-link,
#explore-btn {
  color: var(--color-black);
  font-weight: bold;
  position: relative;
}

.header-nav-links button.active-header-link::after,
#explore-btn::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: black;
  border-radius: 1.5px;
}

/* New navigation underline approach */
.nav-btn {
  position: relative;
  font-weight: normal;
  color: var(--color-text-secondary);
}

.nav-btn.active {
  font-weight: bold;
  color: var(--color-black);
}

.nav-underline {
  display: none;
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: black;
  border-radius: 1.5px;
}

.nav-btn.active .nav-underline {
  display: block;
}

#explore-btn::after {
  display: none !important;
}

.header-user-menu img {
  height: 30px;
  /* Adjust as needed */
}

.footer {
  padding: var(--space-lg);
  text-align: center;
  font-size: 0.875em;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border-light);
  margin-top: var(--space-xl);
  margin-bottom: 60px;
  /* Add margin to prevent overlap with fixed mobile nav */
}

/* Mobile Bottom Navigation Styles */
.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  text-align: center;
  font-size: 0.75rem;
  /* Smaller text for nav items */
  color: var(--color-text-muted);
  /* De-emphasized text color */
  cursor: pointer;
  padding: var(--space-xs);
  /* Minimal padding for the item itself */
}

.mobile-nav-item .nav-icon {
  width: 24px;
  height: 24px;
  margin-bottom: var(--space-xs);
  opacity: 0.7;
  /* De-emphasized icon */
  transition: opacity 0.2s ease-in-out;
}

.mobile-nav-item>span {
  /* Target the text span directly */
  transition: color 0.2s ease-in-out, font-weight 0.2s ease-in-out;
}

.mobile-nav-item.active {
  color: var(--color-text-primary);
  /* Dark text color for active item */
  font-weight: 600;
  /* Slightly bolder for active item */
}

.mobile-nav-item.active .nav-icon {
  opacity: 1;
  /* Full opacity for active icon */
}

/* Media query to show/hide mobile bottom nav */
@media (max-width: 768px) {
  .mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--color-white);
    border-top: 1px solid var(--color-border-light);
    padding: var(--space-md);
    display: flex;
    justify-content: space-around;
    z-index: 1000;
  }
}

@media (min-width: 769px) {
  .mobile-bottom-nav {
    display: none;
  }
}

/* ====================================
   Component: Filter Bar
   ==================================== */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  /* Allow items to wrap to the next line */
  align-items: center;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
  /* background-color: var(--color-white); */
  /* Optional: if filter bar needs a distinct background */
  /* border-bottom: 1px solid var(--color-border-light); */
  /* Optional */
}

.custom-select-wrapper {
  position: relative;
  display: inline-block;
  /* To wrap select and arrow appropriately */
}

.custom-select-wrapper select {
  padding: var(--space-sm) var(--space-md);
  padding-right: var(--space-xl);
  /* Space for the arrow */
  border: 1px solid var(--color-border-medium);
  border-radius: var(--border-radius-md);
  background-color: var(--color-white);
  font-family: var(--font-primary);
  font-size: 0.9em;
  color: var(--color-text-secondary);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  min-width: 150px;
  /* Example min-width */
}

.custom-select-wrapper .custom-select-arrow {
  position: absolute;
  top: 50%;
  right: var(--space-sm);
  transform: translateY(-50%);
  width: 12px;
  /* Adjust size as needed */
  height: 12px;
  pointer-events: none;
  /* So it doesn't interfere with select click */
  opacity: 0.6;
}

/* ====================================
   Component: Event Cards & Sections
   ==================================== */
.event-section {
  margin-bottom: var(--space-xl);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
  /* Was var(--space-lg) */
}

.section-header h2 {
  margin: 0;
  font-size: 1.5em;
  /* Was 1.6em */
  font-weight: 700;
  /* Was 600 */
  color: var(--color-text-primary);
}

.view-all-controls {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.view-all-controls a {
  text-decoration: none;
  color: var(--color-black);
  font-weight: 500;
}

.view-all-controls a:hover {
  color: var(--color-text-secondary);
  /* Slightly lighter black on hover */
  text-decoration: underline;
}

.arrow-btn {
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s, box-shadow 0.2s;
}

.arrow-btn:hover {
  background-color: #f0f0f0;
  box-shadow: var(--shadow-sm);
}

.arrow-btn img {
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

.event-cards-container {
  overflow: hidden;
  /* Changed back to hidden */
  position: relative;
  width: 100%;
  padding: 0;
  margin: 0;
}

/* Responsive grid columns */
@media (min-width: 768px) {
  .event-cards-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .event-cards-container {
    grid-template-columns: repeat(3, 1fr);
  }
}



.event-card .event-image {
  width: 100%;
  height: 180px;
  /* Fixed height for consistency */
  display: block;
  object-fit: cover;
  /* Crop image to fit */
}

.card-content {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  /* Allows card-meta to push to bottom */
}

.card-content h3 {
  font-size: 1.1em;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: var(--space-sm);
  color: var(--color-text-primary);
  /* For multi-line truncation (optional) */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: calc(1.35em * 2);
  /* Reserve space for 2 lines */
}

.card-meta {
  margin-top: auto;
  /* Pushes this block to the bottom of card-content */
  padding-top: var(--space-sm);
  font-size: 0.9em;
  color: var(--color-text-secondary);
}

.details-row {
  display: flex;
  align-items: flex-start;
  /* Align icon with first line of multi-line text */
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.details-row:last-child {
  margin-bottom: 0;
}

.details-row img {
  width: 14px;
  height: 14px;
  margin-top: 3px;
  /* Align icon better with text lines */
  flex-shrink: 0;
  opacity: 0.7;
}

.venue-location-text {
  display: flex;
  flex-direction: column;
}

.venue-name {
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.3;
}

.venue-address {
  font-size: 0.9em;
  color: var(--color-text-muted);
  line-height: 1.3;
  /* Optional: Truncate long addresses
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; */
}

.see-more-container {
  text-align: center;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.see-more-btn {
  display: block;
  min-width: 200px;
  padding: var(--space-md) var(--space-lg);
  /* Larger padding than base .btn */
  border-radius: var(--border-radius-lg);
  /* Larger radius than base .btn */
  font-weight: 600;
  /* Slightly bolder than base .btn */
  margin: var(--space-xl) auto;
  color: var(--color-text-primary);
  /* Override .btn-secondary's blue text */
  border: 1px solid var(--color-border-medium);
  /* Override .btn-secondary's blue border */
}

.see-more-btn:hover {
  color: var(--color-text-primary);
  /* Ensure text color is what's expected on hover */
  border-color: var(--color-text-primary);
  background-color: #f8f8f8;
  box-shadow: var(--shadow-sm);
}

/* Phase 2: Core Interactions CSS */

/* Component: Heart Icon (within Event Card) */
.heart-icon {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 24px;
  /* Adjust as needed */
  height: 24px;
  cursor: pointer;
  fill: none;
  /* SVG container transparent */
  z-index: 10;
  /* Ensure it's above the image */
}

.heart-icon .heart-fill {
  fill: rgba(0, 0, 0, 0.5);
  /* Default: 50% black interior */
  transition: fill 0.15s ease;
}

.heart-icon .heart-outline {
  fill: none;
  stroke: var(--color-white);
  stroke-width: 1.5px;
  /* Adjust for desired outline thickness */
}

.heart-icon.liked .heart-fill {
  fill: var(--color-accent-primary);
  /* LIKED: Accent color interior */
}

/* ====================================
   Component: Modals (General)
   ==================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-background-modal-overlay);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.3s, opacity 0.3s ease;
  /* Delay visibility for opacity transition */
}

.modal-overlay.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.modal-content {
  background: var(--color-white);
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 500px;
  /* Default max-width */
  position: relative;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.modal-overlay.visible .modal-content {
  transform: scale(1);
}

/* Modal Header (shared styles) */
.modal-header {
  display: flex;
  justify-content: center;
  /* Title centered by default */
  align-items: center;
  position: relative;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border-light);
}

.modal-title {
  font-size: 1.25em;
  font-weight: 600;
  color: var(--color-text-primary);
  text-align: center;
}

/* Generic Close Button (X) for Modals and other components */
/* Assumes .btn class is also applied in HTML for base resets and focus */
.btn-close-modal {
  /* Extends .btn implicitly via HTML, or explicitly add .btn class in HTML */
  /* We'll assume .btn is added in HTML for these properties to be additive */
  background: none;
  /* Override .btn */
  border: none;
  /* Override .btn */
  font-size: 1.8em;
  font-weight: 300;
  color: var(--color-text-muted);
  padding: 0 var(--space-sm);
  /* Override .btn padding for a tighter fit */
  line-height: 1;
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  /* cursor: pointer; from .btn */
  z-index: 10;
  border-radius: 50%;
  /* Make it circular for a common 'x' button style */
  width: 32px;
  /* Fixed size for consistency */
  height: 32px;
}

.btn-close-modal:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--color-text-primary);
}

.modal-body {
  /* Styles for form groups, inputs will be added in later phases */
  margin-bottom: var(--space-lg);
}

/* Modal Footer (shared styles for button layout) */
.modal-footer {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border-light);
}

/* Example: Save Feed Modal footer button alignment */
#saveFeedModalOverlay .modal-footer {
  justify-content: space-between;
}

/* Example: Share Feed Modal footer button alignment */
#shareFeedModalOverlay .modal-footer {
  justify-content: center;
  /* Center the single Close button */
}

/* Specific styling for buttons inside modals */
.modal-footer .btn+.btn {
  margin-left: var(--space-sm);
  /* Add space between buttons in the footer */
}

/* Primary action button style */
.btn-primary {
  background-color: var(--color-accent-interactive);
  color: var(--color-white);
  border-color: var(--color-accent-interactive);
  /* Ensure border matches if .btn had a transparent one */
}

.btn-primary:hover {
  background-color: #0069d9;
  /* Darker shade of --color-accent-interactive */
  border-color: #0069d9;
}

.btn-primary:active {
  background-color: #005cbf;
  /* Even darker shade */
  border-color: #005cbf;
}

/* Secondary action button style (outline or lighter fill) */
.btn-secondary {
  background-color: var(--color-white);
  color: var(--color-accent-interactive);
  border: 1px solid var(--color-accent-interactive);
}

.btn-secondary:hover {
  background-color: rgba(0, 123, 255, 0.05);
  /* Light tint of --color-accent-interactive */
}

/* Custom styling for the See More button */
.see-more-btn {
  background-color: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-medium);
  transition: border-color 0.2s ease-in-out;
}

.see-more-btn:hover {
  background-color: transparent;
  border-color: black;
}

.btn-secondary:active {
  background-color: rgba(0, 123, 255, 0.1);
  /* Slightly darker tint */
}

.filter-bar .filter-action-link:hover {
  color: var(--color-text-primary);
  text-decoration: none;
}

/* Filter Bar Refinements */
.filter-bar {
  /* Original styles: display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; padding: var(--space-md) 0; */
  gap: var(--space-md);
  /* Increased gap for better separation */
  padding-bottom: var(--space-lg);
  /* More space below filter bar */
}

/* Ensure consistent vertical alignment for all filter bar items */
.filter-bar>* {
  margin-bottom: var(--space-sm);
  /* Add some bottom margin for wrapped items */
}

/* Apply border-radius to the wrapper for consistent focus outline */
.custom-select-wrapper {
  border-radius: var(--border-radius-md);
  /* Match select's border-radius */
  /* position: relative; /* Already should be there for the arrow */
}

/* Style for when the select element within the wrapper has focus */
.custom-select-wrapper select:focus {
  outline: none;
  /* Remove default outline from select, as wrapper will show focus */
}

.custom-select-wrapper:focus-within {
  outline: 2px solid var(--color-accent-interactive);
  /* Use a distinct focus color */
  outline-offset: 1px;
  /* Optional: to prevent outline from overlapping border */
  /* border-radius is inherited or should be set on the wrapper if not already */
}

/* Active/Selected Filter State (Visual Cue) */
/* This class would be added by JS when a filter is active (not default option) */
.custom-select-wrapper.filter-selected select,
.custom-select-wrapper.filter-selected select:focus {
  /* Maintain selected style on focus */
  border-color: var(--color-accent-primary);
  font-weight: 600;
  /* Make text slightly bolder */
  color: var(--color-text-primary);
}

/* Optionally, style the custom arrow if it's an SVG that can change color */
/* For the current img, a border on the select is more straightforward */

/* ====================================
   Component: Share Feed Modal
   ==================================== */

/* Share Feed Modal - Input Group (Link) */
#shareFeedModalOverlay .input-wrapper {
  position: relative;
  display: flex;
  /* Align input and button */
}

#shareFeedModalOverlay #shareFeedLink {
  flex-grow: 1;
  padding-right: 45px;
  /* Space for the copy button */
  /* Assuming general input styles are already in place */
}

#shareFeedModalOverlay .copy-btn {
  position: absolute;
  right: var(--space-sm);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-xs);
}

#shareFeedModalOverlay .copy-btn .icon-svg {
  width: 18px;
  /* Adjust size as needed */
  height: 18px;
  vertical-align: middle;
}

/* Collapsible Personal Message Section */
.collapsible-section {
  margin-top: var(--space-lg);
  border-top: 1px solid var(--color-border-light);
  padding-top: var(--space-md);
}

.collapsible-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.collapsible-toggle {
  background: none;
  border: none;
  font-family: var(--font-primary);
  font-size: 1em;
  color: var(--color-text-primary);
  font-weight: 600;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.collapsible-toggle .icon-svg {
  transition: transform 0.2s ease-in-out;
}

.collapsible-toggle[aria-expanded="true"] .icon-svg {
  transform: rotate(90deg);
}

#personalMessageContent textarea {
  width: 100%;
  padding: var(--space-sm);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--border-radius-sm);
  font-family: var(--font-primary);
  font-size: 0.95em;
  resize: vertical;
  margin-top: var(--space-sm);
}

/* Share with Friends Section */
.share-options {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border-light);
}

.share-options p strong {
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
  display: block;
}

.friend-selector-placeholder {
  background-color: #f0f0f0;
  /* Placeholder background */
  border: 1px dashed var(--color-border-medium);
  padding: var(--space-lg);
  text-align: center;
  color: var(--color-text-muted);
  border-radius: var(--border-radius-md);
  font-size: 0.9em;
}

/* Specific styling for buttons inside Share Modal, if different from general modal buttons */
/* #sendInvitesBtn uses .modal-btn and .modal-btn-primary by default */

/* --- Where (Location) Dropdown Styles --- */
#search-where {
  position: relative;
  /* For positioning the dropdown */
}

.location-autocomplete-dropdown .where-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--color-white);
  border-radius: var(--border-radius-lg) !important;
  box-shadow: var(--shadow-md);
  padding: var(--space-sm) 0;
  margin-top: 6px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  max-height: 400px;
  width: 480px;
}

.dropdown-search-container {
  position: sticky;
  top: 0;
  padding: var(--space-sm);
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border-light);
  z-index: 1;
}

.dropdown-search-container input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: none;
  border-radius: var(--border-radius-lg);
  font-size: 0.95em;
  outline: none;
  background: var(--color-white);
  box-shadow: 0 2px 8px rgba(0,0,0,0.10); /* Subtle drop shadow */
  transition: box-shadow 0.2s, background-color 0.2s, color 0.2s;
}

.dropdown-search-container input:focus {
  box-shadow: 0 4px 16px rgba(0,0,0,0.13);
  background: var(--color-white);
}

.search-bar-segment  .selected-tags-container {
  padding: var(--space-sm);
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border-light);
  max-height: 120px;
  overflow-y: auto;
  min-height: 0; /* Allows flex item to shrink below content size */
  flex-shrink: 0; /* Prevents container from shrinking */
}

.location-autocomplete-dropdown .selected-tags-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-sm);
}

.location-autocomplete-dropdown .selected-tags-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  flex: 1;
  min-width: 0;
}

.location-autocomplete-dropdown .clear-all-button {
  border: none;
  background: none;
  color: var(--color-text-primary);
  cursor: pointer;
  font-size: 0.875em;
  text-decoration: underline;
  padding: 2px 4px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.2s;
}

.location-autocomplete-dropdown  .clear-all-button:hover {
  color: var(--color-text-secondary);
}

.location-autocomplete-dropdown  .location-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 8px 10px;
  background-color: var(--color-white);
  border: 1px solid #000000;
  border-radius: 18px;
  font-size: 0.75em;
  color: var(--color-text-primary);
  font-weight: 500;
  max-width: 200px;
}

.location-autocomplete-dropdown .location-tag-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.location-autocomplete-dropdown  .tag-close-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 50%;
  color: var(--color-black);
  font-size: 12px;
  line-height: 1;
  transition: background-color 0.2s, color 0.2s;
  flex-shrink: 0;
}

.location-autocomplete-dropdown  .tag-close-button:hover {
  background-color: #f3f4f6;
  color: var(--color-text-primary);
}

.dropdown-suggestions {
  overflow-y: auto;
  flex: 1;
}

.location-option {
  width: 100%;
  padding: var(--space-md);
  text-align: left;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  transition: background-color 0.2s;
}

.location-option:hover {
  background-color: var(--color-background-subtle);
}

.location-option .location-main-text {
  font-size: 0.875em;
  color: var(--color-text-primary);
  font-weight: 500;
}

.location-option .location-sub-text {
  font-size: 0.75em;
  color: var(--color-text-secondary);
  text-transform: capitalize;
}

.segment-input {
  cursor: pointer;
  background-color: transparent;
}

.segment-input:focus {
  outline: none;
}

.loading-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-md);
  border-top: 1px solid var(--color-border-light);
}

/* When Dropdown Styles */
.when-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 428px;
  background-color: var(--color-white);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-md);
  z-index: 1001;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.when-dropdown[x-show] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.when-dropdown[x-cloak] {
  display: none !important;
}

/* Ensure the parent container has proper positioning */
#search-when {
  position: relative;
}

.date-option-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs);
  border-radius: var(--border-radius-sm);
  transition: background-color 0.2s ease;
}

.date-option-item:hover {
  background-color: var(--color-background-subtle);
}

.date-option-checkbox {
  margin: 0;
  cursor: pointer;
}

.date-option-label {
  flex: 1;
  cursor: pointer;
  user-select: none;
  padding: var(--space-xs) 0;
}

.date-subtext {
  display: block;
  font-size: 0.85em;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Ensure the input field has proper styling */
#search-input-when {
  cursor: pointer;
  background-color: transparent;
  border: none;
  padding: 0;
  width: 100%;
  font-size: 1em;
  color: var(--color-text-primary);
}

#search-input-when:focus {
  outline: none;
}

#search-input-when::placeholder {
  color: var(--color-text-muted);
}

/* --- Unified Search Mobile Button --- */
.unified-search-start-btn-mobile {
  display: none;
  /* Hidden by default, shown via media query */
  align-items: center;
  justify-content: center;
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-light);
  /* Changed to light grey */
  border-radius: 50px;
  /* Fully rounded */
  color: var(--color-black);
  font-family: var(--font-family-primary);
  font-size: 1rem;
  /* Adjust as needed */
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, box-shadow 0.2s;
  flex: 1;
  /* Take up available space */
  min-width: 0;
  /* Allow shrinking below min-content if needed */
  max-width: calc(100% - 72px);
  /* Leave space for the bookmark button + gap */
  box-shadow: var(--shadow-sm);
}

.unified-search-start-btn-mobile svg {
  margin-right: var(--space-sm);
  fill: var(--color-black);
  vertical-align: middle;
  /* Ensure vertical alignment */
}

/* Style the default content container */
.search-btn-default-content {
  display: flex;
  align-items: center;
  /* Vertically center children */
  justify-content: center;
}

/* Ensure the text is aligned properly */
.search-text-default {
  vertical-align: middle;
  line-height: 1;
}

.unified-search-start-btn-mobile:hover {
  background-color: var(--color-background-subtle);
  box-shadow: var(--shadow-md);
}

/* --- Mobile My Feeds Selector --- */
#mobile-my-feeds-selector {
  align-items: center;
  justify-content: center;
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: 50px;
  /* Fully rounded */
  color: var(--color-black);
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, box-shadow 0.2s;
  flex: 1;
  min-width: 0;
  max-width: calc(100% - 72px);
  /* Match search button sizing */
  box-shadow: var(--shadow-sm);
  position: relative;
  /* For dropdown positioning directly under it */
}

#mobile-my-feeds-selector:hover {
  background-color: var(--color-background-subtle);
  box-shadow: var(--shadow-md);
}

#mobile-my-feeds-selector .dropdown-carat {
  margin-left: var(--space-sm);
  width: 16px;
  /* Adjust if chevron-down.svg has different optimal size */
  height: 16px;
  vertical-align: middle;
  /* Helps align with text */
}

/* --- Mobile Feeds Dropdown --- */
.mobile-feeds-dropdown {
  display: none;
  /* Initially hidden, controlled by JS */
  position: absolute;
  top: calc(100% + 4px);
  /* Position below the selector, with a small gap */
  left: 0;
  width: 100%;
  /* Match the width of the selector */
  background-color: var(--color-white);
  border: 1px solid var(--color-border-medium);
  border-radius: 12px;
  /* More rounded appearance */
  box-shadow: var(--shadow-md);
  z-index: 1100;
  padding: var(--space-sm) 0;
}

.mobile-feed-option {
  display: block;
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  /* More generous padding */
  text-align: left;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1rem;
  /* Match selector font size */
  color: var(--color-text-primary);
  transition: background-color 0.2s;
}

.mobile-feed-option:hover,
.mobile-feed-option:focus {
  background-color: var(--color-background-subtle);
  outline: none;
}



/* --- Mobile Filter Overlay Styles --- */
.mobile-filter-overlay-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-background-page);
  /* Light grey page background */
  z-index: 2000;
  /* Higher than other elements */
  display: flex;
  /* Using flex to help center content if needed, though content will be full height */
  flex-direction: column;
  /* overflow-y: auto; */
  transition: transform 0.3s ease-in-out;
  transform: translateY(100%);
  /* Start off-screen */
}

.mobile-filter-overlay-container.active {
  transform: translateY(0%);
  /* Slide in from bottom */
}

.mobile-filter-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Take full height of the overlay */
  width: 100%;
  max-width: 100vw;
  padding: var(--space-lg);
  box-sizing: border-box;
  overflow-y: auto; /* Add scrolling to content area */
}

.mobile-filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-lg);
  /* No border-bottom in mockup, keeping it clean */
}

.mobile-filter-header h2 {
  font-size: 1.75rem;
  /* Larger title */
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}

.btn-close-mobile-filter {
  background: none;
  border: none;
  padding: var(--space-xs);
  cursor: pointer;
  color: var(--color-text-primary);
}

.btn-close-mobile-filter svg {
  display: block;
  /* Remove extra space below SVG */
}

.mobile-filter-options {
  flex-grow: 1;
  /* Takes up available space */
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  /* Space between filter rows */
}

.mobile-filter-options .dropdown-search-container {
  padding-left: 0;
  padding-right: 0;
}

.filter-row {
  /* Flex properties moved to .filter-row-header */
  background-color: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-md);
  padding: var(--space-md);
  /* Uniform padding, replaces original padding */
  /* The original border-bottom is now replaced by the comprehensive 'border' property above. */
  /* Spacing between rows is managed by the 'gap' property in the parent '.mobile-filter-options'. */
  font-size: 1rem;
  color: var(--color-text-primary);
  cursor: pointer;
}

.filter-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  /* Ensure it takes full width available from parent */
}

/* .filter-row:last-child {
  border-bottom: none;
} */

.filter-row span:first-child {
  font-weight: 500;
  /* Slightly bolder label */
}

.filter-value {
  display: flex;
  align-items: center;
  color: var(--color-text-secondary);
  font-weight: 400;
}

.filter-value svg {
  margin-left: var(--space-xs);
  fill: var(--color-text-secondary);
  transition: transform 0.3s ease-in-out;
}

.filter-row[aria-expanded="true"] .filter-value svg.accordion-chevron {
  transform: rotate(90deg);
}

/* --- Location Accordion Panel Styles --- */
.location-accordion-panel,
.timeframe-accordion-panel,
.activity-accordion-panel {
  /* Base styles for collapsed state */
  width: 100%;
  padding: 0;
  margin-top: var(--space-md);
  /* Space between the header and the content */
  transition: max-height 0.3s ease-out;
  opacity: 0;
  display: none;
  /* Start hidden, JavaScript will toggle display */
  transition: opacity 0.2s ease;
  max-height: 0;
  /* Start collapsed */
  overflow: hidden;
}

.filter-row[aria-expanded="true"]>.location-accordion-panel,
.filter-row[aria-expanded="true"]>.timeframe-accordion-panel,
.filter-row[aria-expanded="true"]>.activity-accordion-panel {
  /* Styles for expanded state */
  opacity: 1;
  display: block;
  max-height: 500px;
  /* Large enough to contain our content */
  overflow: visible;
  /* The transition combined with max-height provides a smooth open/close effect */
}

.location-accordion-panel .location-search-input-container {
  display: flex;
  align-items: center;
  background-color: var(--color-background-default);
  border: 1px solid var(--color-border-neutral);
  border-radius: var(--border-radius-md);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
}

.location-accordion-panel .location-search-input-container .search-icon {
  fill: var(--color-text-secondary);
  margin-right: var(--space-sm);
}

.location-accordion-panel #mobile-location-search-input {
  flex-grow: 1;
  border: none;
  outline: none;
  background-color: transparent;
  font-size: 1rem;
  color: var(--color-text-primary);
}

.location-accordion-panel #mobile-location-search-input::placeholder {
  color: var(--color-text-placeholder);
}

.location-accordion-panel .current-location-btn {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--space-md) 0;
  /* Align with filter-row typical padding */
  background-color: transparent;
  border: none;
  /* border-top: 1px solid var(--color-border-subtle); */
  /* Optional: if separation is needed from input */
  font-size: 1rem;
  color: var(--color-accent-interactive);
  cursor: pointer;
  text-align: left;
}

.location-accordion-panel .current-location-btn svg {
  fill: var(--color-accent-interactive);
  margin-right: var(--space-sm);
}

.location-accordion-panel .location-search-results {
  /* Styles for results, if any are shown directly here */
  padding-top: var(--space-sm);
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

.mobile-filter-actions {
  display: flex;
  gap: var(--space-md);
  padding-top: var(--space-xl);
  margin-top: auto;
  /* Push to bottom if content is short */
  width: 100%;
}

.mobile-filter-actions .btn {
  flex-grow: 1;
  padding: var(--space-md) var(--space-lg);
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--border-radius-lg);
  /* More rounded buttons like mockup */
}

#mobile-filter-reset-btn {
  background-color: var(--color-background-default);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-neutral-strong);
}

#mobile-filter-reset-btn:hover {
  background-color: var(--color-background-subtle);
}

#mobile-filter-apply-btn {
  background-color: var(--color-black);
  color: var(--color-white);
  border: 1px solid var(--color-black);
}

#mobile-filter-apply-btn:hover {
  background-color: var(--color-text-primary);
  /* Slightly lighter black on hover */
}

/* --- Accordion Panel Styles for Mobile Filters --- */
.timeframe-accordion-panel,
.activity-accordion-panel {
  padding: var(--space-md) var(--space-md) var(--space-lg);
}

/* Timeframe filter uses two-column grid layout */
.timeframe-accordion-panel .mobile-filter-options-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  width: 100%;
}

/* Activity filter uses flowing flexbox layout */
.activity-accordion-panel .mobile-filter-options-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  /* Moderate spacing between pills (8px) */
  width: 100%;
}

/* Mobile option item base styles */
.date-option-item.mobile,
.activity-option-item.mobile {
  margin: 0;
}

/* Grid-specific styles for date options */
.date-option-item.mobile {
  width: 100%;
  /* Take full width of grid cell */
}

/* Flow-specific styles for activity options */
.activity-option-item.mobile {
  width: auto;
  /* Allow natural sizing based on content */
}

.date-option-checkbox.mobile {
  display: none;
  /* Hide the actual checkbox */
}

/* Base styles for all mobile option labels */
.date-option-label.mobile,
.activity-option-label.mobile {
  background-color: var(--color-white);
  border: 1px solid var(--color-border-medium);
  padding: var(--space-sm) var(--space-md);
  text-align: center;
  cursor: pointer;
  font-size: 0.875em;
  font-weight: 500;
  color: var(--color-text-primary);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  line-height: 1.3;
  user-select: none;
}

/* Grid-specific styles for date labels */
.date-option-label.mobile {
  border-radius: var(--border-radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Flow-specific styles for activity labels */
.activity-option-label.mobile {
  border-radius: 50px;
  /* More rounded pill shape to match desktop */
  display: inline-block;
  /* Allow natural width based on content */
  white-space: nowrap;
  /* Prevent text wrapping inside the pill */
}

/* Hover styles */
.date-option-label.mobile:hover,
.activity-option-label.mobile:hover {
  border-color: var(--color-text-primary);
}

/* Selected state for date options (grid layout) */
.date-option-checkbox.mobile:checked+.date-option-label.mobile {
  background-color: var(--color-background-page);
  color: var(--color-text-primary);
  border: 2px solid var(--color-text-primary);
  /* Adjust padding to account for thicker border */
  padding: calc(var(--space-sm) - 1px) calc(var(--space-md) - 1px);
}

/* Selected state for activity options (flow layout) */
.activity-option-checkbox.mobile:checked+.activity-option-label.mobile {
  background-color: var(--color-background-page);
  color: var(--color-text-primary);
  border: 2px solid var(--color-text-primary);
  /* Adjust padding to account for thicker border */
  padding: calc(var(--space-sm) - 1px) calc(var(--space-md) - 1px);
}

/* --- When Dropdown Styles --- */
#search-when {
  position: relative;
  /* For positioning the dropdown */
}



.date-option {
  background-color: var(--color-white);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--border-radius-lg);
  /* Pill shape */
  padding: var(--space-sm) var(--space-md);
  text-align: center;
  cursor: pointer;
  font-size: 0.875em;
  font-weight: 500;
  color: var(--color-text-primary);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  display: flex;
  flex-direction: column;
  /* Stack main text and subtext */
  align-items: center;
  justify-content: center;
  line-height: 1.3;
}

.date-option .date-subtext {
  font-size: 0.85em;
  /* Smaller for the subtext */
  font-weight: 400;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.date-option:hover {
  border-color: var(--color-text-primary);
}

.date-option.selected {
  background-color: var(--color-background-page);
  /* Light grey background (consistent with page bg) */
  color: var(--color-text-primary);
  /* Default font color */
  border: 2px solid var(--color-text-primary);
  /* Thicker border, darker color for contrast */
}

.date-option.selected .date-subtext {
  color: var(--color-text-muted);
  /* Match non-selected subtext color */
}


/* New styles for checkbox-based date options */
.date-option-item {
  display: flex;
  /* Let the label inside control the content alignment */
  margin: 0;
  /* Rely on parent's gap */
}

.date-option-checkbox {
  display: none;
  /* Hide the actual checkbox */
}

.date-option-label {
  background-color: var(--color-white);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--border-radius-lg);
  padding: var(--space-sm) var(--space-md);
  text-align: center;
  cursor: pointer;
  font-size: 0.875em;
  font-weight: 500;
  color: var(--color-text-primary);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
  width: 100%;
  /* Make label take full width of its grid cell */
  user-select: none;
}

.date-option-label:hover {
  border-color: var(--color-text-primary);
}

.date-option-checkbox:checked+.date-option-label {
  background-color: var(--color-background-page);
  color: var(--color-text-primary);
  border: 2px solid var(--color-text-primary);
  /* Adjust padding to account for thicker border */
  padding: calc(var(--space-sm) - 1px) calc(var(--space-md) - 1px);
}

/* Subtext styling within the new label structure (should largely inherit or be covered) */
.date-option-label .date-subtext {
  font-size: 0.85em;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.date-option-checkbox:checked+.date-option-label .date-subtext {
  color: var(--color-text-muted);
}

/* Main content area */
main.wrapper {
  background-color: var(--color-white);
  margin-top: 0;
  padding-top: var(--space-lg);
  padding-left: 8%;
  padding-right: 8%;
  /* Adding more horizontal spacing */
}

/* ====================================
   Component: Unified Search Bar
   ==================================== */
/* Container for the unified search bar and the Save Feed button */
.unified-search-bar-container {
  background-color: var(--color-background-page);
  /* Light grey background */
  padding: var(--space-sm) var(--space-lg) 30px var(--space-lg);
  /* Top, Right, Bottom (30px), Left */
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  max-width: 1020px;
  /* Default max-width */
  margin: 0 auto;
  /* Center the container */
  transition: max-width 0.3s ease-in-out;
  /* Smooth transition for width change */
}

/* Increase max-width when 'My Feeds' filter is active */
.unified-search-bar-container:has(.unified-search-bar.my-feeds-filter-active) {
  max-width: 1140px;
  /* Increased max-width */
}

/* Full width border underneath the search bar container */
.unified-search-bar-container::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100vw;
  /* Full viewport width */
  height: 1px;
  background-color: var(--color-border-light);
  /* Position the border at the left edge of the screen */
  left: 50%;
  transform: translateX(-50%);
}

.unified-search-bar {
  display: flex;
  background-color: var(--color-white);
  border: 1px solid var(--color-border-light);
  /* Changed to light grey to match header border */
  border-radius: 50px;
  /* Fully rounded search bar */
  align-items: center;
  box-shadow: var(--shadow-sm);
  flex-grow: 1;
  /* Allow search bar to take available space */

  /* --- Mobile Filter Icon --- */
  #mobile-filter-icon-container {
    /* display: none; /* Hidden by default, JS controls visibility - NOTE: HTML inline style handles initial hide */
    width: 48px;
    /* Same height as the feeds selector for alignment */
    height: 48px;
    border-radius: 50%;
    /* Makes it circular */
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    /* Match dropdown */
    box-shadow: var(--shadow-sm);
    /* Match dropdown */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    /* Space between icon and feeds selector */
    cursor: pointer;
    /* Indicates it's clickable (optional, but good UX) */
  }

  #mobile-filter-icon-container img {
    width: 20px;
    /* As specified in the HTML */
    height: 20px;
    /* As specified in the HTML */
    display: block;
  }

  /* --- Mobile View Feed Button --- */
  button#mobile-view-feed-button {
    display: none;
    /* Hidden by default, controlled by JS */
    background-color: var(--color-black) !important;
    border: none !important;
    border-radius: 50% !important;
    /* Makes it circular */
    width: 48px !important;
    /* Match mobile-bookmark-button and filter icon */
    height: 48px !important;
    min-width: 48px !important;
    /* Prevent shrinking */
    display: none;
    /* Initially hidden, JS will set to flex */
    align-items: center !important;
    justify-content: center !important;
    box-shadow: var(--shadow-sm) !important;
    cursor: pointer !important;
    padding: 0 !important;
    /* Remove default button padding */
    margin-left: 8px !important;
    /* Space from the feeds selector */
    transition: background-color 0.2s, transform 0.1s !important;
    /* Smooth transitions */
    position: relative !important;
  }

  /* Override any possible browser default styles */
  button#mobile-view-feed-button:not([disabled]) {
    background-color: var(--color-black) !important;
  }

  /* Target the arrow icon specifically inside mobile-view-feed-button to make it 50% smaller */
  #mobile-view-feed-button .bookmark-icon-img,
  button#mobile-view-feed-button img.bookmark-icon-img,
  button#mobile-view-feed-button .bookmark-button-inner img.bookmark-icon-img {
    width: 10px !important;
    /* 50% of original 20px */
    height: 10px !important;
    /* 50% of original 20px */
    max-width: 10px !important;
    max-height: 10px !important;
    display: block !important;
    transform: scale(0.5) !important;
    /* Additional scaling */
  }

  /* End of /Users/ryanevans/Desktop/Domino explanation modal/js/may_19/css/style.css */
  min-width: 0;
}

.search-bar-segment {
  flex: 1;
  /* Allow segments to grow, but input placeholder will define initial size perception */
  padding: 10px var(--space-md);
  /* Increased vertical padding from var(--space-sm) */
  cursor: pointer;
  position: relative;
  /* For label absolute positioning if needed, or just flow */
  min-width: 100px;
  /* Reduced minimum width for each segment */
}

.search-bar-segment.clickable:hover {
  background-color: #f0f0f0;
  /* Light hover for clickable segments */
}

.search-bar-segment:first-child.clickable:hover {
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
}

.segment-label {
  display: block;
  font-size: 0.85em;
  /* 12px */
  font-weight: 700;
  margin-bottom: 0px;
  /* Reduced space between label and input */
  color: var(--color-text-primary);
  padding-left: var(--space-sm);
  /* Align with input text */
}

.segment-input {
  border: none;
  background-color: transparent;
  width: 100%;
  padding: 2px var(--space-sm) 4px;
  /* Reduced top padding, kept bottom spacing */
  font-size: 1em;
  /* 14px */
  color: var(--color-text-secondary);
}

/* Style for input when it has a selected value */
.segment-input.has-value {
  color: var(--color-text-primary);
  /* Match label color */
  font-weight: 700;
  /* Match label weight */
}

/* Style placeholders across all browsers */
.segment-input::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
  /* Firefox fix */
  font-weight: 500;
  /* Slightly bolder for better readability */
}

/* WebKit browsers */
.segment-input::-webkit-input-placeholder {
  font-weight: 500;
}

/* Firefox 18- */
.segment-input:-moz-placeholder {
  font-weight: 500;
}

/* Firefox 19+ */
.segment-input::-moz-placeholder {
  font-weight: 500;
}

/* IE 10+ */

@media (min-width: 769px) {
  .mobile-bottom-nav {
    display: none;
    /* Hide mobile nav on desktop */
  }

  .footer {
    margin-bottom: 0;
    /* Reset footer margin on desktop */
  }
}

.segment-input:-ms-input-placeholder {
  font-weight: 500;
}

.segment-input:focus {
  outline: none;
}

.search-bar-divider {
  width: 1px;
  background-color: var(--color-border-light);
  height: 32px;
  /* Adjust to match segment inner height */
  align-self: center;
}

.search-bar-button {
  background-color: var(--color-black);
  /* Changed from var(--color-accent-primary) */
  color: var(--color-white);
  border: none;
  border-radius: 50%;
  /* Make it circular */
  width: 48px;
  /* Size of the button */
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: var(--space-xs) var(--space-sm) var(--space-xs) var(--space-xs);
  /* Consistent small margin */
  padding: 0;
  /* Reset padding if any from .btn */
  flex-shrink: 0;
  /* Prevent button from shrinking */
}

.search-bar-button:hover {
  background-color: #333333;
  /* Darker shade of black/grey for hover */
}

.search-bar-button svg {
  width: 20px;
  /* Adjust icon size as needed */
  height: 20px;
  fill: var(--color-white);
}

/* Save Feed Button Styles */
.unified-save-feed-btn {
  background-color: var(--color-black);
  color: var(--color-white);
  border: none;
  padding: var(--space-sm) var(--space-md);
  border-radius: 50px;
  /* Full rounding now */
  font-weight: 600;
  font-size: 0.875em;
  line-height: 1.5;
  height: 48px;
  /* Match search button height */
  display: inline-flex;
  align-items: center;
  /* display: none; /* Controlled by JS */
}

.unified-save-feed-btn:hover {
  background-color: #333333;
  color: var(--color-white);
}

/* Style for the share icon to make it white */
.unified-save-feed-btn img.share-icon-white {
  filter: brightness(0) invert(1);
}



.my-feed-pill {
  display: inline-flex;
  align-items: center;
  background-color: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: 50px;
  padding: 10px 20px;
  min-height: 44px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.2s ease, border-color 0.2s ease;
  min-width: 180px;
  /* Ensure pill has enough space */
}

.my-feed-pill:hover {
  background-color: #f8f9fa;
  border-color: var(--color-border-neutral-strong);
}

.pill-content {
  display: flex;
  align-items: center;
  width: 100%;
  /* Ensure content takes full width of pill */
}

.pill-label {
  font-size: 0.85em;
  font-weight: 700;
  color: var(--color-text-primary);
}

.pill-value-line {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.pill-value {
  display: block;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1em;
  font-weight: 500;
  color: var(--color-text-primary);
}

.pill-icon {
  width: 12px;
  height: 12px;
  margin-left: auto;
  /* Push icon to the right */
}

/* Position the dropdown relative to the pill */
.my-feed-pill .my-feeds-dropdown {
  display: inline-block;
  position: absolute;
  top: calc(100% + 5px);
  /* left: 0; */
  width: 280px;
  z-index: 1001;
  background-color: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-sm) 0;
  max-height: 240px;
  overflow-y: auto;
}

/* Filter action buttons styles */
.filter-action-buttons {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  /* Reduced from var(--space-sm) */
}

#filter-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

#filter-actions .btn,
#filter-actions .filter-menu-icon-container {
  display: flex;
  align-items: center;
}

.btn-filter-action {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* Ghost button style */
.btn-ghost {
  background-color: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-neutral-strong);
  border-radius: 50px;
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.btn-ghost:hover {
  background-color: var(--color-background-subtle);
  border-color: var(--color-text-primary);
}

/* Icon button style */
.btn-icon {
  background: transparent;
  border: none;
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.btn-icon:hover {
  background-color: var(--color-background-subtle);
}

/* Adjustments for specific segments if needed */
#search-where {
  flex-grow: 1.3;
}

/* Reduced from 1.5 */
#search-when {
  flex-grow: 1.2;
}

#search-activity {
  flex-grow: 1.3;
}

/* Reduced from 1.5 */
#search-who {
  flex-grow: 0.8;
}

/* Reduced slightly */


/* --- Activity Dropdown Styles --- */
#search-activity {
  position: relative;
  /* For absolute positioning of the dropdown */
}

.activity-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  /* Reduced width to match narrower search bar */
  background-color: var(--color-white);
  border: none;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-md);
  z-index: 1001;
  display: flex;
  /* Changed from grid */
  flex-wrap: wrap;
  /* Allow items to wrap */
  justify-content: flex-start;
  /* Align items to the start */
  gap: var(--space-sm);
}

.activity-option {
  background-color: var(--color-white);
  border: 1px solid var(--color-border-medium);
  /* Match 'date-option' border */
  border-radius: 20px;
  /* Pill shape */
  padding: var(--space-sm) var(--space-md);
  text-align: center;
  cursor: pointer;
  font-size: 0.875em;
  font-weight: 500;
  /* Match 'date-option' font-weight */
  color: var(--color-text-primary);
  /* Match 'date-option' text color (black) */
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  line-height: 1.3;
}

.activity-option:hover {
  border-color: var(--color-border-medium);
  /* Slightly darker grey border on hover */
}

.activity-option.selected {
  background-color: var(--color-background-page);
  /* Light grey fill, like 'date-option.selected' */
  color: var(--color-text-primary);
  /* Black text for selected */
  border: 2px solid var(--color-text-primary);
  /* Thicker black border for selected */
  /* font-weight will inherit from .activity-option (500), not explicitly bolded */
}


/* New styles for checkbox-based activity options */
.activity-option-item {
  display: inline-block;
  /* Allows items to sit next to each other if dropdown width permits */
  margin: 0;
  /* Rely on parent's gap property */
}

.activity-option-checkbox {
  display: none;
  /* Hide the actual checkbox input */
}

.activity-option-label {
  display: inline-block;
  /* Treat label like a button */
  background-color: var(--color-white);
  border: 1px solid var(--color-border-medium);
  border-radius: 20px;
  /* Pill shape */
  padding: var(--space-sm) var(--space-md);
  text-align: center;
  cursor: pointer;
  font-size: 0.875em;
  font-weight: 500;
  color: var(--color-text-primary);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  line-height: 1.3;
  user-select: none;
  /* Prevent text selection when clicking */
}

.activity-option-label:hover {
  border-color: black;
  /* Adding black border on hover */
  /* background-color: #f8f9fa; */
  /* Optional: subtle background change on hover */
}

.activity-option-checkbox:checked+.activity-option-label {
  background-color: var(--color-background-page);
  color: var(--color-text-primary);
  border: 2px solid var(--color-text-primary);
  /* Adjust padding to account for the thicker border, maintaining overall size */
  padding: calc(var(--space-sm) - 1px) calc(var(--space-md) - 1px);
}

/* --- Group Size Popover Styles --- */
#search-who {
  position: relative;
  /* For popover positioning */
}

.group-size-popover {
  position: absolute;
  top: calc(100% + 5px);
  /* Position below the segment */
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  /* Adjust as needed, mockup looks fairly wide */
  background-color: var(--color-white);
  border: none;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md); /* Add extra drop shadow for visibility */
  padding: var(--space-md);
  z-index: 1002;
  /* Above other dropdowns if they overlap, but below mobile overlay */
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.group-size-popover .popover-title {
  font-size: 0.875rem;
  /* Smaller title text */
  color: var(--color-text-secondary);
  text-align: left;
  margin-bottom: var(--space-xs);
}

.group-size-popover .popover-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Distribute space */
  width: 100%;
}

.group-size-popover .btn-stepper {
  background-color: transparent;
  border: 1px solid var(--color-border-neutral-strong);
  border-radius: 50%;
  /* Circular buttons */
  width: 36px;
  /* Fixed size for circular buttons */
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-primary);
  transition: background-color 0.2s, border-color 0.2s;
}

.group-size-popover .btn-stepper:hover {
  background-color: var(--color-background-subtle);
  border-color: var(--color-brand-primary);
  /* Highlight on hover */
}

.group-size-popover .btn-stepper:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: var(--color-border-neutral);
}

.group-size-popover .btn-stepper svg {
  fill: currentColor;
}

.group-size-popover .popover-value {
  font-size: 1.25rem;
  /* Larger number display */
  font-weight: 600;
  color: var(--color-text-primary);
  min-width: 30px;
  /* Ensure space for number */
  text-align: center;
}

/* --- Mobile Location Search Screen --- */
.mobile-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-white);
  z-index: 1005;
  /* Higher than the mobile filter overlay */
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  /* Initially off-screen to the right */
  transition: transform 0.3s ease-in-out;
}

.mobile-screen.active {
  transform: translateX(0%);
  /* Slide in from the right */
}

.mobile-screen-header {
  display: flex;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border-neutral);
  position: relative;
  /* For absolute positioning of title if needed */
}

.mobile-screen-back-btn {
  background: none;
  border: none;
  color: var(--color-text-primary);
  padding: var(--space-xs);
  margin-right: var(--space-sm);
  cursor: pointer;
}

.mobile-screen-back-btn svg {
  display: block;
}

.mobile-screen-title {
  font-size: 1.125rem;
  /* 18px */
  font-weight: 600;
  color: var(--color-text-primary);
  text-align: center;
  flex-grow: 1;
  /* Allow title to take up space and center */
  /* If back button takes too much space, adjust margins or use absolute for title */
  margin-right: 36px;
  /* Roughly back button width + margin to keep title centered */
}

.mobile-screen-content {
  padding: var(--space-md);
  flex-grow: 1;
  overflow-y: auto;
}

.location-search-input-container {
  display: flex;
  align-items: center;
  background-color: var(--color-background-input);
  border-radius: var(--border-radius-md);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-lg);
}

.location-search-input-container .search-icon {
  color: var(--color-icon-neutral);
  margin-right: var(--space-sm);
}

#mobile-location-search-input {
  flex-grow: 1;
  border: none;
  background: transparent;
  font-size: 1rem;
  color: var(--color-text-input);
  outline: none;
}

#mobile-location-search-input::placeholder {
  color: var(--color-text-placeholder);
}

.current-location-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--space-md);
  background-color: var(--color-background-subtle);
  border: 1px solid var(--color-border-neutral);
  border-radius: var(--border-radius-md);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text-link);
  cursor: pointer;
  margin-bottom: var(--space-lg);
  text-align: center;
}

.current-location-btn svg {
  margin-right: var(--space-sm);
  fill: var(--color-text-link);
}

.location-search-results {
  /* Styles for displaying list of results if/when implemented */
  border-top: 1px solid var(--color-border-neutral);
}

/* ----- End of Mobile Location Search Screen ----- */

/* Ensure first and last segments have rounded corners if hover is applied directly */
/* Styles for the 'My feeds' dropdown */
.my-feeds-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 5px);
  /* Position below the segment */
  /* left: 0; */
  width: 280px;
  /* Adjust as needed, similar to other dropdowns */
  background-color: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-sm) 0;
  z-index: 1001;
  /* Ensure it's above content */
  display: none;
  /* Controlled by JavaScript */
  max-height: 240px;
  /* Adjust as needed */
  overflow-y: auto;
  display: block;
}

.feed-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1em;
  color: var(--color-text-primary);
  line-height: 1.4;
  /* Added for better readability */
}

.feed-option:hover {
  background-color: var(--color-background-page);
  /* Light grey hover, consistent with other dropdowns */
}

.feed-option .feed-main-text {
  display: block;
  font-weight: 500;
  /* Consistent with .location-main-text */
}

/* Default styling for search bar segments regarding left rounded corners and padding */
/* Apply standard padding and no left rounding to all segments initially */
.unified-search-bar .search-bar-segment {
  padding-left: var(--space-md);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* When 'My feeds' filter is hidden (NO .my-feeds-filter-active on .unified-search-bar): */
/* #search-where acts as the first segment. */
.unified-search-bar .search-bar-segment#search-where {
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  padding-left: calc(var(--space-md) + var(--space-xs));
  /* Special padding for the visually first segment */
}

/* When on My Feeds view, ensure search-where is always the first visible segment with proper styling */
.unified-search-bar.my-feeds-filter-active .search-bar-segment#search-where {
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  padding-left: calc(var(--space-md) + var(--space-xs));
  /* Special padding for first segment */
}

/* The last actual input segment before the button might need specific styling if it's not the button itself that rounds the bar */
/* If search-bar-button is outside, then the last segment before it needs rounding.
   If button is inside, then it handles its own rounding or the parent's.
   My current HTML has button inside the .unified-search-bar.
*/

/* Event Card Layout Styles */
.event-card-wrapper {
  flex: 0 0 32%;
  max-width: 32%;
}

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

.event-card .event-image {
  width: 100%;
  height: 172px;
  object-fit: cover;
}

.event-carousel {
  display: flex;
  width: 100%;
}

.carousel-item {
  flex: 0 0 100%;
  transition: transform 0.5s ease-in-out;
  box-sizing: border-box;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .event-card-wrapper {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Event Cards Container and Carousel Styles */
.event-cards-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 0;
  margin: 0;
}

.event-carousel-outer {
  overflow: hidden;
  width: 100%;
  position: relative;
  padding: 0;
  margin: 0 -10px;
  /* Negative margin to compensate for container padding */
}

/* .event-card {
    flex: 0 0 calc((100% - 40px) / 3);
    min-width: 0;
    max-width: none;
    margin-right: 0;
    position: relative;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
} */

.event-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid var(--color-border-light);
  border-radius: 14px;
}


@media (max-width: 767px) {


  /* .event-carousel {
    gap: 16px;
  } */
}




/* Add hover effect */
.event-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Navigation arrows container */
.carousel-navigation {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: calc(100% + 20px);
  /* Compensate for container padding */
  left: -10px;
  /* Align with container padding */
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 10;
  padding: 0 10px;
}

.carousel-navigation button {
  pointer-events: auto;
  background: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: all 0.2s ease;
}

.carousel-navigation button:hover {
  background: #f8f8f8;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.carousel-navigation button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Skeleton Loader Styles */
.skeleton-loader-group {
  display: flex;
  width: 100%;
  gap: 16px;
  margin-bottom: 24px;
}

.skeleton-card {
  flex: 1 1 0%;
  min-width: 0;
  height: 320px;
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  background-size: 400% 100%;
  animation: shimmer 1.2s infinite;
  border-radius: 12px;
}

.skeleton-section-title {
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  background-size: 400% 100%;
  animation: shimmer 1.2s infinite;
  border-radius: 8px;
  display: block;
}

.skeleton-section-btn {
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  background-size: 400% 100%;
  animation: shimmer 1.2s infinite;
  border-radius: 6px;
  display: inline-block;
}

@keyframes shimmer {
  0% {
    background-position: -400px 0;
  }

  100% {
    background-position: 400px 0;
  }
}

/* Image Placeholder Styles */
.image-wrapper {
  position: relative;
  width: 100%;
  height: 180px;
  background: #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
}

.page-event-listing .placeholder-image {
  height: 180px;
}

.page-event-listing .event-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s;
}

.image-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #e0e0e0;
  animation: shimmer 1.2s infinite;
  z-index: 1;
}

.events-container {
  overflow-x: hidden;
}

.events-container .event-carousel {
  display: flex;
  width: 100%;
}

.filter-pill {
  display: inline-block;
  font-weight: 500;
  color: #000;
  padding: 8px 10px;
  margin: 2px;
  cursor: pointer;
  text-decoration: underline;

  &:hover {
    color: #000;
  }
}

.my-domino-filter-bar {
  min-width: 828px;
  /* padding-top: 19px;
  padding-bottom: 19px; */


}

.my-domino-filter-bar .search-bar-segment {
  padding-left: calc(var(--space-md) + var(--space-xs));
  padding: 21px;
}

.my-domino-filter-bar .search-bar-segment.active:first-child {
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
}

.my-domino-filter-bar .search-bar-segment.active:last-child {
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}

.my-domino-filter-bar .search-bar-segment.active {
  background-color: var(--color-background-page);
}


/* User Menu Dropdown Styles */
.header-user-menu {
  position: relative;
  display: inline-block;
}

.user-menu-trigger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.user-menu-trigger:hover {
  opacity: 0.8;
}

.user-menu-trigger img {
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.user-menu-trigger:hover img {
  transform: scale(1.05);
}

.page-event-listing .navbar-nav .dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1000;
  min-width: 220px;
  padding: 8px 0;
  margin: 4px 0 0;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  /* transition: all 0.2s ease; */
}

.page-event-listing .navbar-nav #navbarDropdown.nav-link {
  gap: 10px;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 100px;
  min-width: 80px;
  justify-content: center;
  padding: 12px 0;
  color: #000;
}

.page-event-listing .navbar-nav .dropdown-menu.show {
  opacity: 1 !important;
  visibility: visible !important;
}

.dropdown-menu-right {
  right: 0;
  left: auto;
}

.dropdown-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.dropdown-item:hover {
  background-color: #f8f9fa;
  color: #000;
  text-decoration: none;
}

.dropdown-item:active {
  background-color: #e9ecef;
}

.dropdown-item .m-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: 12px;
  flex-shrink: 0;
}

.dropdown-item .m-icon img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.dropdown-item .ml-2 {
  margin-left: 8px;
  flex-grow: 1;
}

.navbar-nav .nav-item .nav-link {
  display: flex;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .dropdown-menu {
    min-width: 200px;
    right: -10px;
  }

  .dropdown-item {
    padding: 10px 14px;
    font-size: 13px;
  }

  .event-section .circle-feeds {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0;
  }

  .skeleton-card {
    flex: 0 0 100%;
  }

  .page-event-listing .navbar-nav #navbarDropdown.nav-link img {
    display: none;
  }

  .page-event-listing .navbar-nav #navbarDropdown.nav-link {
    border: 0;
    padding: 0;
    justify-content: end;
    font-size: 23px;
    min-width: auto;
  }
}

@media (min-width: 769px) {
  .mobile-bookmark-button {
    display: none !important;
  }
}

/* Share Feed Modal Styles */
.floating-input {
  position: relative;
  margin-bottom: 32px;
}

.floating-input input,
.floating-input textarea {
  width: 100%;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background: #f7f7f7;
  font-size: 1.05rem;
  padding: 26px 48px 10px 16px;
  color: #444;
  outline: none;
  height: 60px;
  box-sizing: border-box;
}

.floating-input textarea {
  height: auto;
  min-height: 90px;
  max-height: 180px;
  resize: none;
}

.floating-input label {
  position: absolute;
  top: 22px;
  left: 16px;
  color: #999;
  font-size: 1rem;
  pointer-events: none;
  transition: all 0.2s ease;
}

.floating-input input:focus+label,
.floating-input input:not(:placeholder-shown)+label,
.floating-input textarea:focus+label,
.floating-input textarea:not(:placeholder-shown)+label {
  top: 10px;
  font-size: 0.85rem;
  color: #888;
}

/* End of Share Feed Modal Styles */

/* --- Responsive Adjustments for Search Bar --- */
/* Desktop-only elements */
@media (min-width: 769px) {
  .mobile-bottom-nav {
    display: none;
  }
}
.mobile-only{ 
  display: none;
}

@media (max-width: 768px) {

  .mobile-only {
    display: block;
  }

  .mobile-bottom-nav {
    display: flex;
    /* Show the nav on mobile */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--color-white);
    border-top: 1px solid var(--color-border-light);
    justify-content: space-around;
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
    z-index: 1000;
  }

  .footer {
    margin-bottom: 60px;
    /* Ensure footer content doesn't hide behind nav. Value should be >= nav height */
  }

  .unified-search-bar-container {
    padding: var(--space-md) var(--space-md);
    /* Add some padding around the button */
    justify-content: center;
    /* Center the button */
    position: relative;
    /* For absolute positioning of bookmark icon */
  }

  /* Container for search and bookmark elements */
  .mobile-search-elements-container {
    position: relative;
    /* For dropdown positioning */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 500px;
  }

  /* Bookmark button styling */
  .mobile-bookmark-button {
    background-color: var(--color-black);
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s;
    padding: 0;
  }

  .mobile-bookmark-button:hover {
    background-color: #333;
    box-shadow: var(--shadow-md);
  }

  .mobile-bookmark-button:active {
    transform: scale(0.95);
  }

  .bookmark-icon-img {
    width: 20px;
    height: 20px;
  }

  /* Hide desktop-only elements */
  .desktop-only

  /* .header-logo, */
  /* .header-user-menu  */
    {
    display: none !important;
  }

  /* Bottom navigation styles */
  .mobile-bottom-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 64px;
    /* Slightly taller for more padding */
    background-color: var(--color-white);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 6px 0;
    /* Add some vertical padding */
  }

  .mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 0;
    width: 33.333%;
    cursor: pointer;
    color: var(--color-text-primary);
    /* Make text black */
    opacity: 0.5;
    /* Default state is inactive/dimmed */
  }

  .mobile-nav-item.active {
    color: var(--color-text-primary);
    /* Keep text black even when active */
    opacity: 1;
    /* Full opacity for active tab */
  }

  .mobile-nav-item .nav-icon {
    width: 22px;
    /* Slightly smaller icon */
    height: 22px;
    /* Slightly smaller icon */
    margin-bottom: 6px;
    /* More space between icon and text */
  }

  .mobile-nav-item span {
    font-size: 11px;
    /* Slightly smaller text */
    font-weight: 500;
    letter-spacing: 0.2px;
    /* Improve text legibility */
  }

  .mobile-nav-item.active span {
    font-weight: 700;
    /* Bold text for active tab */
  }

  /* Add padding to the bottom of the page to accommodate the fixed nav */
  main {
    padding-bottom: 60px;
  }

  /* Adjust footer to appear above the bottom nav */
  .footer {
    margin-bottom: 60px;
  }

  .unified-search-bar {
    display: none !important;
    /* Hide full search bar on small screens */
  }

  .unified-search-bar.my-domino-filter-bar {
    display: flex !important;
  }

  .unified-search-bar.my-domino-filter-bar .segment-input {
    min-width: unset;
    width: auto
  }

  .unified-search-bar.my-domino-filter-bar .search-bar-segment {
    flex: unset;
  }

  .unified-search-bar.my-domino-filter-bar {
    min-width: 100%;
  }

  .unified-save-feed-btn {
    display: none !important;
    /* Hide save feed button on small screens */
  }

  .unified-search-start-btn-mobile {
    display: inline-flex;
    /* Show mobile button */
  }

  /* Optional: Adjust header or other elements for smaller screens if needed */
  .header-nav-links button {
    font-size: 0.875rem;
    padding: var(--space-xs) var(--space-sm);
  }
}

@media (max-width: 768px) {
  .mobile-filter-options {
    position: static;
    /* or remove if not needed */
  }

  .location-accordion-panel .dropdown-suggestions {
    position: static;
    /* Remove absolute positioning */
    max-height: 250px;
    /* or 300px, as you prefer */
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e0e0e0;
    box-shadow: none;
    /* Remove shadow if you want it to blend in */
    z-index: auto;
    margin-bottom: 8px;
    /* Add some space below if needed */
  }

.my-feed-pill-container .my-feed-pill{
  display: flex;
}

  .my-feed-pill-container .pill-label {
    display: none;
  }
.my-feed-pill-container .pill-content{
  display: block;
}
.my-feed-pill-container .pill-value{
  max-width: calc(100% - 24px);
}


  

  .my-feed-pill-container .my-feed-pill {
    padding: 14px 20px;
  }

  .unified-search-start-btn-mobile {
    padding: 14px 20px;
  }

  .mobile-search-elements-container {
    justify-content: center;
  }
  .my-feed-pill-container {
    width: 50%;
  }
}

@media (max-width: 492px) {
  .mobile-search-elements-container {
    display: contents;
  }
  .my-feed-pill-container {
    width: 60%;
  }

  /* .search-text-default {
    display: none;
  } */

  .unified-search-start-btn-mobile {
    padding: 14px 0px;
  }
}

.mobile-filter-content .group-size-popover {
  position: inherit;
  transform: none;
  width: auto
}

/* --- Fix for mobile gear dropdown positioning and text color --- */
.mobile-bookmark-button {
  position: relative;
}
.gear-menu-item {
  color: #222 ;
}
@media (max-width: 768px) {
  .gear-menu-dropdown {
    top: 100% !important;
    min-width: 160px;
    padding: 0;
  }
  .gear-menu-item {
    padding: 10px 14px;
  }
}

.feed-event-section-header-link:hover {
  text-decoration: underline !important;
}

.feed-event-section-header-link .chevron-right {
  width: 22px;
  transition: text-decoration 0.2s;
}

/*****************
Invite Modal Styles
*****************/
.feed-invite-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.feed-invite-modal-content {
  background: white;
  border-radius: 20px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 0;
  margin: 0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  position: relative;
  box-sizing: border-box;
}

.feed-invite-modal-header {
  text-align: center;
  padding: 40px 40px 20px 40px;
}

.feed-invite-modal-title {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 16px 0;
  color: #1a1a1a;
  font-family: inherit;
}

.feed-invite-modal-subtitle {
  font-size: 1.1rem;
  color: #666;
  margin: 0;
  line-height: 1.4;
  font-family: inherit;
}

.feed-invite-personal-message-section {
  padding: 0 40px 20px 40px;
}

.feed-invite-personal-message {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 12px;
  font-style: italic;
  color: #555;
  border-left: 4px solid #007bff;
  margin: 0;
  font-family: inherit;
  line-height: 1.5;
}

.feed-invite-features-section {
  padding: 0 40px 20px 40px;
}

/* Updated list styles for inline format */
.feed-invite-features-list {
  padding-left: 0;
  margin: 0;
  counter-reset: none;
}

.feed-invite-feature-item {
  margin-bottom: 24px;
  text-align: left;
  padding: 0;
  list-style: decimal;
  list-style-position: outside;
  margin-left: 20px;
  font-size: 1.2rem;
  color: #666;
  line-height: 1.5;
  font-family: inherit;
}

.feed-invite-feature-item:last-child {
  margin-bottom: 0;
}

/* Inline bold titles */
.feed-invite-feature-title {
  font-weight: 700;
  color: #1a1a1a;
  font-family: inherit;
}

.feed-invite-actions-section {
  padding: 20px 40px 40px 40px;
  text-align: center;
}

.feed-invite-join-btn {
  background: #000;
  color: white;
  border: none;
  border-radius: 50px;
  padding: 18px 40px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  margin-bottom: 16px;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  font-family: inherit;
  box-sizing: border-box;
  outline: none;
}

.feed-invite-join-btn:hover:not(:disabled) {
  background: #333;
  transform: translateY(-1px);
}

.feed-invite-join-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.feed-invite-join-btn.feed-invite-loading {
  background: #666;
  cursor: not-allowed;
}

.feed-invite-signup-note {
  color: #999;
  font-size: 0.95rem;
  margin: 0 0 20px 0;
  font-family: inherit;
  line-height: 1.4;
}

.feed-invite-maybe-later-btn {
  background: none;
  border: none;
  color: #666;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 8px 16px;
  transition: color 0.2s ease;
  font-family: inherit;
  outline: none;
}

.feed-invite-maybe-later-btn:hover {
  color: #333;
}

.feed-invite-maybe-later-btn:focus {
  color: #333;
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* Loading spinner for join button */
.feed-invite-join-btn .feed-invite-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #ffffff40;
  border-top: 2px solid #ffffff;
  border-radius: 50%;
  animation: feed-invite-spin 1s linear infinite;
  margin-right: 8px;
}

@keyframes feed-invite-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Success notification */
.feed-invite-success-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #28a745;
  color: white;
  padding: 16px 20px;
  border-radius: 8px;
  z-index: 10001;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  animation: feed-invite-slide-in 0.3s ease;
  font-family: inherit;
  max-width: 300px;
  box-sizing: border-box;
}

@keyframes feed-invite-slide-in {
  from {
      transform: translateX(100%);
      opacity: 0;
  }
  to {
      transform: translateX(0);
      opacity: 1;
  }
}

/* Remove any default list styling conflicts */
.feed-invite-modal-content ol {
  margin: 0;
  padding-left: 0;
}



/* Mobile responsiveness */
@media (max-width: 768px) {
  .feed-invite-modal-overlay {
      padding: 10px;
  }
  
  .feed-invite-modal-content {
      border-radius: 16px;
      max-height: 95vh;
  }
  
  .feed-invite-modal-header,
  .feed-invite-personal-message-section,
  .feed-invite-features-section,
  .feed-invite-actions-section {
      padding-left: 24px;
      padding-right: 24px;
  }
  
  .feed-invite-modal-header {
      padding-top: 32px;
      padding-bottom: 16px;
  }
  
  .feed-invite-modal-title {
      font-size: 1.8rem;
  }
  
  .feed-invite-modal-subtitle {
      font-size: 1rem;
  }
  
  .feed-invite-feature-item {
      font-size: 0.95rem;
      margin-bottom: 20px;
      margin-left: 18px;
  }
  
  .feed-invite-join-btn {
      padding: 16px 32px;
      font-size: 1rem;
  }
  
  .feed-invite-success-notification {
      top: 10px;
      right: 10px;
      left: 10px;
      max-width: none;
      font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .feed-invite-modal-header,
  .feed-invite-personal-message-section,
  .feed-invite-features-section,
  .feed-invite-actions-section {
      padding-left: 20px;
      padding-right: 20px;
  }
  
  .feed-invite-modal-title {
      font-size: 1.6rem;
  }
  
  .feed-invite-feature-item {
      margin-bottom: 18px;
      font-size: 0.9rem;
      margin-left: 16px;
  }
}

/* Ensure modal is above other elements */
.feed-invite-modal-overlay {
  z-index: 9999 !important;
}

/* Override any potential conflicts */
.feed-invite-modal-content * {
  box-sizing: border-box;
}

.feed-invite-modal-content button {
  outline: none;
  border: none;
}

.feed-invite-modal-content button:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* Animation classes for Alpine.js transitions */
.feed-invite-modal-enter {
  opacity: 0;
  transform: scale(0.95);
}

.feed-invite-modal-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 300ms ease, transform 300ms ease;
}

.feed-invite-modal-leave {
  opacity: 1;
  transform: scale(1);
}

.feed-invite-modal-leave-active {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 200ms ease, transform 200ms ease;
}


.btn-ghost {
  background-color: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-neutral-strong);
  border-radius: 50px;
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.btn-icon {
  background: transparent;
  border: none;
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

/*
* Search Bar style changes
*/

#search-where {
  position: relative;
}

#search-where .segment-input-container {
  position: relative;
  display: flex;
  align-items: center;
}

#search-where .segment-input {
  width: 100%;
  padding-right: 30px;
  /* Make space for clear button */
}

#search-where .clear-location-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  font-size: 16px;
  padding: 4px;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 10;
}

#search-where:hover .clear-location-btn {
  opacity: 1;
}

#search-where .clear-location-btn:hover {
  background-color: rgba(0, 0, 0, 0.1);
  color: #333;
}

/* Hide clear button when input shows "Anywhere" */
#search-where:has(.segment-input[value="Any"]) .clear-location-btn {
  display: none;
}

#search-where .where-dropdown .location-option {
  position: relative;
}

#search-where .where-dropdown .location-option.selected {
  background-color: #fafafa;
  border-left: 3px solid #000;
}

#search-where .where-dropdown .location-option.selected::after {
  content: "✓";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #000;
  font-weight: bold;
}

#search-where .where-dropdown .dropdown-suggestions {
  max-height: 300px;
  overflow-y: auto;
}

/* Mobile: Filter location */
#mobile-filter-location {
  border-bottom: 1px solid #e0e0e0;
}



#mobile-filter-location .filter-value {
  /* Changed from flex to block */
  color: #666;
  /* Constrain width to prevent overflow */
  max-width: calc(100% - 120px);
  /* Leave space for "Where" label, clear button, and chevron */
  /* Single line with ellipsis for overflow */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 26px;
}

#mobile-filter-location .filter-value.has-value {
  color: #333;
  font-weight: 500;
}

/* Clear button for mobile - scoped to container */
#mobile-filter-location .mobile-clear-btn {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  font-size: 18px;
  padding: 4px;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
  position: relative;
  right: 30px;
}

#mobile-filter-location .filter-row-header:hover .mobile-clear-btn {
  opacity: 1;
}

#mobile-filter-location .mobile-clear-btn:hover {
  background-color: rgba(0, 0, 0, 0.1);
  color: #333;
}

#mobile-filter-location .accordion-chevron {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  /* Don't shrink the chevron */
  margin-left: 8px;
  position: absolute;
  right: 46px;
}

#mobile-filter-location[aria-expanded="true"] .accordion-chevron {
  transform: rotate(90deg);
}

#mobile-filter-location .location-accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

#mobile-filter-location[aria-expanded="true"] .location-accordion-panel {
  max-height: 400px;
}

#mobile-filter-location .accordion-content {
  padding: 0 16px 16px 16px;
}

#mobile-filter-location .dropdown-search-container {
  margin-bottom: 12px;
}

#mobile-filter-location .dropdown-search-container input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
}

#mobile-filter-location .dropdown-suggestions {
  max-height: 250px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: white;
}

#mobile-filter-location .location-option {
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#mobile-filter-location .location-option:last-child {
  border-bottom: none;
}

#mobile-filter-location .location-option:hover {
  background-color: #f5f5f5;
}

#mobile-filter-location .location-option.selected {
  background-color: #fafafa;
  border-left: 3px solid #000;
}

#mobile-filter-location .location-option.selected::after {
  content: "✓";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #000;
  font-weight: bold;
  font-size: 16px;
}

#mobile-filter-location .location-main-text {
  font-size: 16px;
  color: #333;
  margin-bottom: 2px;
}

#mobile-filter-location .location-sub-text {
  font-size: 14px;
  color: #666;
  text-transform: capitalize;
}

/* Loading and empty states - scoped */
#mobile-filter-location .loading-message,
#mobile-filter-location .no-results-message {
  padding: 16px;
  text-align: center;
  color: #666;
  font-size: 14px;
}

#mobile-filter-location .load-more-btn {
  width: 100%;
  padding: 12px;
  border: none;
  background: #f5f5f5;
  color: #666;
  cursor: pointer;
  font-size: 14px;
}

#mobile-filter-location .load-more-btn:hover {
  background: #e8e8e8;
}

.filter-content-area {
  margin-right: 32px;
  /* Reduced from 36px */
}

/* Minimal gap between value and clear button */
.filter-value {
  margin-right: 4px;
  /* Reduced from 8px */
}

@media (max-width: 768px) {
  .mobile-filter-actions.sticky-bottom-mobile {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    z-index: 2001; 
    background: #fff;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
    padding: 12px 16px;
    display: flex;
    gap: 8px;
    border-radius: 0;
    margin: 0;
  }
  .mobile-filter-content {
    padding-bottom: 70px; 
  }
}