/* Profile-specific EventCard styles that inherit from carousel styles without fixed positioning */

.profile-events-container {
  position: relative;
  width: 100%;
  background: transparent;
  margin-top: 1rem;
}

.profile-events-scrollable {
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  height: 100%;
  padding: 0px;
  position: relative;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.profile-events-scrollable::-webkit-scrollbar {
  display: none;
}

.profile-events-track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  padding: 20px;
  width: 100%;
  min-height: 400px;
}

/* Inherit all carousel-card styles */
.profile-events-track .carousel-card {
  width: 100%;
  max-width: none;
  height: auto;
  /* Remove any scroll-snap alignment for grid layout */
  scroll-snap-align: none !important;
}

/* Mobile responsive layout */
@media (max-width: 767px) {
  .profile-events-track {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
  }
  
  .profile-events-track .carousel-card {
    flex: none;
    width: 100%;
  }
}

/* Medium screens - 2 columns */
@media (min-width: 768px) and (max-width: 1199px) {
  .profile-events-track {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Large screens - 3 columns */
@media (min-width: 1200px) {
  .profile-events-track {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* XL screens - 4 columns */
@media (min-width: 1600px) {
  .profile-events-track {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Settings button styles */
.rumble-settings-dropdown {
  position: relative;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  margin-left: 8px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.rumble-settings-dropdown:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.rumble-settings-dropdown .settings-icon {
  transition: transform 0.2s ease, color 0.2s ease;
  color: #fff;
  opacity: 0.8;
  display: block;
}

.rumble-settings-dropdown .settings-icon:hover {
  transform: scale(1.2);
  opacity: 1;
  color: #f5484d;
}

/* Ensure dropdown menu is above everything */
.rumble-settings-dropdown .dropdown-menu {
  z-index: 9999 !important;
}

/* Prevent event card from capturing clicks when dropdown is open */
.carousel-card:has(.rumble-settings-dropdown .dropdown-menu.show),
.grid-card:has(.rumble-settings-dropdown .dropdown-menu.show) {
  pointer-events: none;
}

.carousel-card .rumble-settings-dropdown,
.grid-card .rumble-settings-dropdown {
  pointer-events: auto;
}

/* Dropdown menu dark theme styles */
.rumble-option-drp {
  background-color: rgb(33, 37, 41);
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-width: 180px;
  border-radius: 8px;
  padding: 0.5rem 0;
}

.rumble-option-drp .dropdown-item {
  color: #fff;
  transition: background-color 0.2s ease;
  padding: 0.5rem 1rem;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.rumble-option-drp .dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.rumble-option-drp .dropdown-item:focus,
.rumble-option-drp .dropdown-item:active {
  background-color: rgba(255, 255, 255, 0.1);
  outline: none;
}

/* Portal dropdown styles */
.rumble-dropdown-portal {
  font-family: inherit;
}

.rumble-dropdown-portal .dropdown-menu {
  display: block;
  position: static;
  transform: none;
  margin: 0;
}

/* Mobile EventCard click fix - Ensure cards are clickable on mobile devices */
@media (max-width: 767px) {
  /* Ensure active carousel panels allow interactions */
  .carousel-panel.active {
    pointer-events: auto !important;
  }

  /* Make EventCards explicitly clickable on mobile */
  .carousel-panel.active .profile-events-track .carousel-card,
  .carousel-panel.active .carousel-card {
    pointer-events: auto !important;
    cursor: pointer !important;
    /* Improve mobile touch handling */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }

  /* Ensure cards remain clickable when dropdown is not open */
  .carousel-panel.active .carousel-card:not(:has(.dropdown-menu.show)) {
    pointer-events: auto !important;
  }

  /* Disable card clicks only when dropdown is actively shown */
  .carousel-panel.active .carousel-card:has(.dropdown-menu.show) {
    pointer-events: none !important;
  }

  /* Always allow dropdown button clicks */
  .carousel-panel.active .carousel-card .rumble-settings-dropdown {
    pointer-events: auto !important;
    position: relative;
    z-index: 20;
  }

  /* Ensure EventCard click areas are properly sized */
  .carousel-panel.active .carousel-card > div:first-child {
    pointer-events: auto !important;
  }
}