/* .rumble-f-section {
    width: 100%;
} */
.rumble-f-section {
  border: 1px solid #f5484d;
  padding: 30px;
  border-radius: 10px;
  margin-top: 60px;
  box-shadow: 0px 0px 5px 0px #0000004f;
}

/* Prize item styles - moved to ItemEditor.css */

/* Keeping only display-specific non-editable styles */
.prize-rank-title {
  color: #f5484d; /* Red rumble default for create/update */
  font-family: "DINBold";
  font-size: 20px;
  margin: 0;
  line-height: 1.2;
}

.prize-description {
  color: rgba(255, 255, 255, 0.9);
  font-family: "DINRegular";
  font-size: 16px;
  margin: 0;
  line-height: 1.5;
}

/* Prize item for ongoing league modal/drawer - with border */
.prize-item-ongoing {
  border: 1px solid rgba(255, 215, 0, 0.2) !important;
}

/* Prize rank title yellow override for ongoing pages */
.prize-item-ongoing .prize-rank-title {
  color: #FFD700; /* Yellow for ongoing */
}

/* Responsive styles */
@media (max-width: 768px) {
  .prize-item-modern {
    padding: 12px;
    gap: 12px;
  }

  .prize-item-thumb-wrapper,
  .prize-item-thumb,
  .prize-upload-placeholder {
    width: 80px;
    height: 80px;
  }

  .prize-rank-title {
    font-size: 18px;
  }

  .prize-description {
    font-size: 14px;
  }
}

/* prize-item-actions styles moved to ItemEditor.css */

.rumble-map-img {
  width: 100%;
}

.rumble-detail-box-title {
  color: #3e4958;
  font-size: 30px;
  font-family: "DINBold";
  margin: 0;
  margin-top: 13px;
}

.rumble-detail-orga {
  color: #3e4958;
  font-size: 12px;
  font-family: "DINLight";
  font-style: italic;
  margin: 0;
}

.rumble-detail-dur {
  color: #3e4958;
  font-size: 16px;
  font-family: "DINLight";
  margin: 0;
  margin-top: 20px;
}

.rumble-detail-dur span {
  font-family: "DINBold";
}

.rumble-detail-boulders {
  color: #3e4958;
  font-size: 16px;
  font-family: "DINLight";
  font-style: italic;
  margin: 0;
  margin-top: 10px;
}

.rumble-detail-boulders span {
  font-family: "DINBold";
  font-style: normal;
}

.rumble-detail-mood {
  color: #3e4958;
  font-size: 16px;
  font-family: "DINLight";
  margin: 0;
  margin-top: 10px;
}

.rumble-detail-mood span {
  font-family: "DINBold";
}

.rumble-detail-prize {
  color: #3e4958;
  font-size: 16px;
  font-family: "DINLight";
  margin: 0;
  margin-top: 10px;
}

.rumble-detail-prize span {
  font-family: "DINBold";
}

.rumble-detail-container {
  width: 100%;
  display: flex;
}

.rumble-detail-left-col {
  width: 50%;
}

.rumble-detail-right-col {
  width: 50%;
}

.rumble-detail-rating {
  display: flex;
  align-items: center;
}

.rumble-detail-start-end {
  color: #3e4958;
  font-size: 16px;
  font-family: "DINLight";
  font-style: italic;
  margin: 0;
  margin-top: 85px;
}

.rumble-detail-allow-participants {
  color: #3e4958;
  font-size: 16px;
  font-family: "DINLight";
  margin: 0;
  margin-top: 10px;
}

.rumble-detail-allow-participants span {
  font-family: "DINBold";
}

.rumble-detail-rumb-participants {
  color: #3e4958;
  font-size: 16px;
  font-family: "DINLight";
  margin: 0;
  margin-top: 10px;
}

.rumble-detail-rumb-participants span {
  font-family: "DINBold";
}

.rumble-detail-status {
  color: #3e4958;
  font-size: 16px;
  font-family: "DINRegular";
  margin: 0;
  margin-top: 10px;
}

.rumb-span-status {
  font-size: 16px;
  font-family: "DINLight";
  color: #3e4958;
  background-color: #b9ff66;
  border: 1px solid #88e619;
  border-radius: 20px;
  padding: 0 5px;
}

.rumble-ruls-container {
  background-color: #f3f3f3;
  border-radius: 10px;
  padding: 40px 10px 40px 40px;
  /* background-image: url("../../assets/media/backgroundR.png"); */
  background-repeat: no-repeat;
  background-blend-mode: overlay;
  background-position: center;
  background-size: cover;
}

.rumble-ruls-heading {
  color: #3e4958;
  font-size: 30px;
  font-family: "DINBold";
}

.rumble-ruls-heading {
  color: #3e4958;
  font-size: 30px;
  font-family: "DINBold";
  margin: 0;
}

.general-ruls-container {
  margin-top: 10px;
}

.rumble-ruls-sub-heading {
  color: #3e4958;
  font-size: 18px;
  font-family: "DINBold";
  margin: 0;
}

.formate-ul {
  margin: 0;
}

.general-ruls-container ul li,
.custom-accordion ul li {
  color: #3e4958;
  font-size: 18px;
  font-family: "DINLight";
  margin: 0;
}

.rumble-detail-acc-container .accordion-button {
  padding: 10px;
}

.rumble-detail-acc-container .accordion-button:focus {
  box-shadow: none;
}

.rumble-detail-acc-container .accordion-item {
  border: 0;
}

.finded-location {
  margin-top: 20px;
}

.finded-location img {
  margin: 0px 10px;
  border-radius: 5px;
}

.image-container img {
  object-fit: fill;
  max-width: 150px;
  max-height: 150px;
  border-radius: 5px;
  height: 100px;
  width: 100px;
}

.modaltit {
  width: 100%;
}

.fontSize26 {
  font-size: 26px !important;
}

#registrationPaymentModal .modal-title {
  color: #191a23 !important;
}

#registrationPaymentModal .modal-header {
  padding: 2px 13px !important;
}

.clred {
  color: #f5484d !important;
}

.fontSize30 {
  font-size: 30px !important;
}

.singlePaymentModal {
  background-color: #f3f3f3;
  font-family: "DINBold";
  border: 1px solid #c4c4c4;
  padding: 50px;
}

#registrationPaymentModal {
  --bs-modal-width: 600px !important;
}

.rumble-ongoing-page .rumb-span-status {
  font-size: 12px;
  font-family: "DINRegular";
  color: #000;
  background-color: #b9ff66;
  border: 1px solid #88e619;
  border-radius: 10px;
  padding: 2px 6px;
}

.rumble-ongoing-page .bg-ogrey {
  background-color: rgb(245, 245, 245);
  /* margin: 0 auto; */
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  border-bottom: 1px solid #c4c4c4;
}

.rumble-ongoing-page .rumble-detail-left-col {
  border-right: 1px solid #c4c4c4;
}

.rumble-ongoing-page .rumble-detail-left-col p {
  padding-left: 0.5rem !important;
}

.dark-mode-active .col-md-8.rumble-first-right-col,
.dark-mode-active .rumble-ongoing-page .rumble-detail-left-col,
.dark-mode-active .row.align-items-center.bg-ogrey {
  border-color: #202020 !important;
}

.dark-mode-active .rumble-ongoing-page .bg-ogrey,
.dark-mode-active .rumble-detail-left-col {
  background-color: rgb(255,255,255,0.05) !important;
  border-color: #202020;
}

.dark-mode-active .rumble-ongoing-page .rumble-detail-left-col,
.dark-mode-active .rumble-ongoing-page .rumble-detail-right-col {
  background-color: rgb(61, 61, 61) !important;
}

.dark-mode-active .modaltit .fontSize26 {
  color: #fff;
}

.dark-mode-active .singlePaymentModal .boldFontFamliy {
  color: #000;
}

.ong-join-btn {
  margin-top: 1px;
  padding: 14px;
  border-radius: 0px;
}

.addata-img-btn.leave {
  padding: 12px 15px;
}

.finded-location.image-list-scroll {
  display: flex;
  overflow: auto;
}

.finded-location.image-list-scroll::-webkit-scrollbar {
  height: 7px;
}

.finded-location.image-list-scroll::-webkit-scrollbar-thumb {
  background: #e4e7ec;
  border-radius: 10px;
}

.rumble-fully-booked-btn {
  background-color: #9f9f9f;
  padding: 11px 15px;
  border-radius: 5px;
  font-size: 19px;
  font-family: "DINBold";
  border: none;
}
.end-rumble-btn {
  background-color: #000 !important;
  border-color: #000 !important;
}

@media (max-width: 767px) {
  .rumble-ongoing-page .slider-container {
    padding: 30px;
  }

  .rumble-ongoing-page .d-flex.justify-content-end {
    justify-content: center !important;
  }

  .col-md-8.rumble-first-right-col.p-0 {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  .rumble-ongoing-page .col-md-4.rumble-first-left-col.mb-3 {
    order: 2;
  }

  .rumble-ongoing-page .col-md-8.col-md-8.rumble-first-right-col {
    order: 1;
    border: 0px;
  }

  .rum-data-main-container {
    padding: 0 10px;
  }

  .finded-location img {
    margin: 0px 10px;
    border-radius: 5px;
    width: 19%;
  }

  .rumble-detail-container {
    width: 100%;
    display: block;
    margin-top: 20px;
  }

  .rumble-detail-left-col {
    width: 100%;
  }

  .rumble-detail-right-col {
    width: 100%;
  }

  .rumble-box-top-tag {
    font-size: 10px;
    padding: 2px 0px;
  }

  .rumble-detail-rating {
    margin-top: 20px;
    align-items: start;
  }

  .rumble-detail-start-end {
    margin-top: 10px;
  }
}

@media (max-width: 1159px) and (min-width: 766px) {
  .rumble-btn-groups .btn span {
    display: none;
  }
}

/* SectorMap component styles - Simplified */
.sector-boulder-map {
  border-radius: 10px;
  width: 100%;
  height: 100%; /* Sempre 100% del container padre */
  /* Min-height rimosso - gestito dal container wrapper */
}

/* Canvas specifics per Mapbox */
.sector-boulder-map .mapboxgl-canvas-container,
.sector-boulder-map .mapboxgl-canvas {
  height: 100% !important;
}

.sector-boulder-map .mapboxgl-popup-content {
  padding: 10px !important;
  font-family: "DINRegular", sans-serif;
  background-color: rgb(33, 37, 41);
  color: #f3f3f3;
  border-radius: 5px;
}

.sector-boulder-map .mapboxgl-popup-close-button {
  position: unset !important;
  color: #f5484d;
  font-size: 20px;
}

.sector-boulder-map .mapboxgl-popup-tip {
  border-top-color: rgb(33, 37, 41) !important;
}

/* Ensure map container has proper z-index for interaction */
.sector-boulder-map .mapboxgl-canvas {
  position: relative;
  z-index: 1;
}

.sector-boulder-map .mapboxgl-control-container {
  position: absolute;
  z-index: 2;
}

/* Marker styles for better interaction */
.sector-boulder-map .marker {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.sector-boulder-map .marker:hover {
  transform: scale(1.1);
  z-index: 10;
}

/* Ensure proper stacking context */
.sector-boulder-map .mapboxgl-marker {
  z-index: 5;
}

/* Fix popup visibility */
.sector-boulder-map .mapboxgl-popup {
  z-index: 1000 !important;
}

/* Ensure popups are always visible */
.sector-boulder-map .mapboxgl-popup-content {
  min-width: 150px !important;
}

/* Line clamp utilities for text truncation */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-clamp: 2;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-clamp: 3;
}

/* Map/Image Slider Styles */
.map-image-slider-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
}

.slider-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.slider-slide.active {
  opacity: 1;
}

.slider-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 15px;
  z-index: 10;
  background: rgba(0, 0, 0, 0.7);
  padding: 0px 8px;
  border-radius: 24px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

.map-image-slider-container:hover .slider-controls {
  opacity: 1;
}

.slider-controls button {
  background: transparent;
  border: none;
  color: #666;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  transition: transform 0.2s ease, color 0.2s ease;
}

.slider-controls button:hover {
  transform: scale(1.1);
  color: #333;
}

.slider-controls button:focus {
  outline: none;
}

.slider-controls button:focus-visible {
  outline: 2px solid #f5484d;
  outline-offset: 2px;
  border-radius: 4px;
}

.slider-dots {
  display: flex;
  gap: 8px;
}

.slider-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: rgba(102, 102, 102, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.slider-dots .dot.active {
  width: 24px;
  background: #f5484d;
  transform: none;
}

.slider-dots .dot:hover {
  background: rgba(102, 102, 102, 0.8);
}

/* Image expansion styles */
.slider-slide img {
  transition: all 0.3s ease;
}

.slider-slide img:hover {
  cursor: zoom-in;
}

.slider-slide img.expanded:hover {
  cursor: zoom-out;
}

/* Mobile responsive for slider */
@media (max-width: 768px) {
  .slider-controls {
    display: none !important;
  }
}

/* Animation for map style toggle visibility on slider */
.slider-slide .map-style-toggle-pill {
  opacity: 0;
  transition: opacity 0.3s ease 0.5s; /* Delay to wait for slide transition */
}

.slider-slide.active .map-style-toggle-pill {
  opacity: 0.4;
}

.slider-slide.active .map-style-toggle-pill:hover {
  opacity: 1;
}

/* Ensure proper z-index stacking for slider elements */
.map-image-slider-container .mapboxgl-canvas-container {
  position: relative;
  z-index: 1;
}

.map-image-slider-container .slider-controls {
  z-index: 20;
}

.map-image-slider-container .map-style-toggle-pill {
  z-index: 15;
}

/* Navigation arrows for slider */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: none;
  color: rgba(255, 255, 255, 0.7);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease, background 0.3s ease, color 0.3s ease, backdrop-filter 0.3s ease;
  z-index: 10;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.slider-arrow-left {
  left: 10px;
}

.slider-arrow-right {
  right: 10px;
}

.map-image-slider-container:hover .slider-arrow {
  opacity: 0.7;
}

.slider-arrow:hover {
  opacity: 1 !important;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  color: rgba(255, 255, 255, 0.9);
}

.slider-arrow:focus {
  outline: none;
}

.slider-arrow:focus-visible {
  outline: 2px solid #f5484d;
  outline-offset: 2px;
}

/* Mobile specific arrow styles */
.slider-arrow.mobile {
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  background: rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.7) !important;
  opacity: 1 !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 20 !important;
}

.slider-arrow-left.mobile {
  left: 5px !important;
}

.slider-arrow-right.mobile {
  right: 5px !important;
}

.slider-arrow.mobile:hover {
  background: rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Ensure arrows are not hidden on mobile hover */
.map-image-slider-container:hover .slider-arrow.mobile {
  opacity: 1 !important;
}

/* Mobile cover image overflow fix */
@media (max-width: 767px) {
  .cover-image-container {
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
  }
  
  .rumble-cover-img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  
  /* Ensure parent containers also respect overflow */
  .position-relative.w-100 {
    overflow: hidden !important;
  }
}