/**
 * HAVEN Groups CSS
 * Styles for groups directory and group-related components
 */

@media (max-width: 768px) {
   /* =================== Mobile Groups Directory Filters Select2 Dropdown =================== */
   /* Overlay background for groups select2 dropdown */
   body .bb-rl-groups-select2-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      z-index: 99998;
   }
   
   body .bb-rl-groups-select2-overlay.is_visible {
      display: block;
   }
   
   /* Select2 dropdown container - bottom sheet style - targeting groups order by */
   body .select2-dropdown:has(#select2-bb-rl-groups-order-by-results) {
      display: block !important;
      position: fixed !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      top: auto !important;
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      padding: 32px 16px 16px !important;
      border-radius: 0 !important;
      border: 0 !important;
      background-image: none !important;
      background-color: transparent !important;
      z-index: 99999 !important;
      transform: translateY(calc(100% + 100px)) !important;
      transition: transform 0.3s ease-in-out !important;
      box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5) !important;
   }
   
   body .select2-dropdown:has(#select2-bb-rl-groups-order-by-results).is_visible {
      transform: translateY(0) !important;
   }
   
   /* Options container */
   body #select2-bb-rl-groups-order-by-results {
      border: 1px solid #002E51 !important;
      background-image: url(https://www.haven-0.com/wp-content/uploads/2025/08/Frame-588.png) !important;
      background-repeat: repeat !important;
      background-size: auto !important;
      border-radius: 4px !important;
      padding: 8px 0 !important;
      display: block !important;
      max-height: none !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
   }

   
   /* Dropdown items */
   body #select2-bb-rl-groups-order-by-results .select2-results__option {
      margin: 0 !important;
      padding: 12px 16px !important;
      color: #F8F8FF !important;
      border-radius: 8px !important;
      background-color: transparent !important;
      transition: background-color 0.2s ease !important;
      font-family: IBM Plex Sans !important;
      font-weight: 500 !important;
      font-size: 15px !important;
      line-height: 140% !important;
   }
   
   body #select2-bb-rl-groups-order-by-results .select2-results__option:hover,
   body #select2-bb-rl-groups-order-by-results .select2-results__option[aria-selected="true"] {
      background-color: #00599533 !important;
      border-radius: 0 !important;
   }
   
   body #select2-bb-rl-groups-order-by-results .select2-results__option:active {
      background-color: #01294678 !important;
   }
   
   /* Cancel button */
   body .select2-dropdown:has(#select2-bb-rl-groups-order-by-results)::after {
      content: 'Annuler' !important;
      display: block !important;
      font-family: IBM Plex Sans !important;
      font-size: 15px !important;
      line-height: 140% !important;
      text-align: center !important;
      font-weight: 500 !important;
      color: #F8F8FF !important;
      padding: 12px !important;
      margin-top: 16px !important;
      border-radius: 4px !important;
      cursor: pointer !important;
      transition: background-color 0.2s ease !important;
      border: 1px solid #002E51 !important;
      background-image: url(https://www.haven-0.com/wp-content/uploads/2025/08/Frame-588.png) !important;
      background-repeat: no-repeat !important;
      background-size: cover !important;
      background-color: #001829 !important;
      pointer-events: auto !important;
      position: relative !important;
      z-index: 1 !important;
   }
   
   body .select2-dropdown:has(#select2-bb-rl-groups-order-by-results)::after:active {
      background-color: #01294678 !important;
   }
   
   /* Handle bar at top of bottom sheet */
   body .select2-dropdown:has(#select2-bb-rl-groups-order-by-results)::before {
      content: '' !important;
      position: absolute !important;
      top: 12px !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      width: 40px !important;
      height: 4px !important;
      background-color: rgba(248, 248, 255, 0.3) !important;
      border-radius: 2px !important;
   }
   
   /* Hide search box in mobile */
   body .select2-dropdown:has(#select2-bb-rl-groups-order-by-results) .select2-search {
      display: none !important;
   }

   /* =================== Mobile Group Type Filters Select2 Dropdown =================== */
   /* Select2 dropdown container - bottom sheet style - targeting group type order by */
   body .select2-dropdown:has(#select2-group-type-order-by-results) {
      display: block !important;
      position: fixed !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      top: auto !important;
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      padding: 32px 16px 16px !important;
      border-radius: 0 !important;
      border: 0 !important;
      background-image: none !important;
      background-color: transparent !important;
      z-index: 99999 !important;
      transform: translateY(calc(100% + 100px)) !important;
      transition: transform 0.3s ease-in-out !important;
      box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5) !important;
   }
   
   body .select2-dropdown:has(#select2-group-type-order-by-results).is_visible {
      transform: translateY(0) !important;
   }
   
   /* Options container */
   body #select2-group-type-order-by-results {
      border: 1px solid #002E51 !important;
      background-image: url(https://www.haven-0.com/wp-content/uploads/2025/08/Frame-588.png) !important;
      background-repeat: repeat !important;
      background-size: auto !important;
      border-radius: 4px !important;
      padding: 8px 0 !important;
      display: block !important;
      max-height: none !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
   }
   
   /* Hide scrollbar for options container */
   body #select2-group-type-order-by-results::-webkit-scrollbar {
      display: none !important;
      width: 0 !important;
      height: 0 !important;
   }
   
   body #select2-group-type-order-by-results {
      -ms-overflow-style: none !important;
      scrollbar-width: none !important;
   }
   
   /* Dropdown items */
   body #select2-group-type-order-by-results .select2-results__option {
      margin: 0 !important;
      padding: 12px 16px !important;
      color: #F8F8FF !important;
      border-radius: 8px !important;
      background-color: transparent !important;
      transition: background-color 0.2s ease !important;
      font-family: IBM Plex Sans !important;
      font-weight: 500 !important;
      font-size: 15px !important;
      line-height: 140% !important;
   }
   
   body #select2-group-type-order-by-results .select2-results__option:hover,
   body #select2-group-type-order-by-results .select2-results__option[aria-selected="true"] {
      background-color: #00599533 !important;
      border-radius: 0 !important;
   }
   
   body #select2-group-type-order-by-results .select2-results__option:active {
      background-color: #01294678 !important;
   }
   
   /* Cancel button */
   body .select2-dropdown:has(#select2-group-type-order-by-results)::after {
      content: 'Annuler' !important;
      display: block !important;
      font-family: IBM Plex Sans !important;
      font-size: 15px !important;
      line-height: 140% !important;
      text-align: center !important;
      font-weight: 500 !important;
      color: #F8F8FF !important;
      padding: 12px !important;
      margin-top: 16px !important;
      border-radius: 4px !important;
      cursor: pointer !important;
      transition: background-color 0.2s ease !important;
      border: 1px solid #002E51 !important;
      background-image: url(https://www.haven-0.com/wp-content/uploads/2025/08/Frame-588.png) !important;
      background-repeat: no-repeat !important;
      background-size: cover !important;
      background-color: #001829 !important;
      pointer-events: auto !important;
      position: relative !important;
      z-index: 1 !important;
   }
   
   body .select2-dropdown:has(#select2-group-type-order-by-results)::after:active {
      background-color: #01294678 !important;
   }
   
   /* Handle bar at top of bottom sheet */
   body .select2-dropdown:has(#select2-group-type-order-by-results)::before {
      content: '' !important;
      position: absolute !important;
      top: 12px !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      width: 40px !important;
      height: 4px !important;
      background-color: rgba(248, 248, 255, 0.3) !important;
      border-radius: 2px !important;
   }
   
   /* Hide search box in mobile */
   body .select2-dropdown:has(#select2-group-type-order-by-results) .select2-search {
      display: none !important;
   }

    /* =================== Mobile Groups Scope Filters Select2 Dropdown =================== */
   /* Select2 dropdown container - bottom sheet style - targeting groups scope options */
   body .select2-dropdown:has(#select2-bb-rl-groups-scope-options-results) {
      display: block !important;
      position: fixed !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      top: auto !important;
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      padding: 32px 16px 16px !important;
      border-radius: 0 !important;
      border: 0 !important;
      background-image: none !important;
      background-color: transparent !important;
      z-index: 99999 !important;
      transform: translateY(calc(100% + 100px)) !important;
      transition: transform 0.3s ease-in-out !important;
      box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5) !important;
   }
   
   body .select2-dropdown:has(#select2-bb-rl-groups-scope-options-results).is_visible {
      transform: translateY(0) !important;
   }
   
   /* Options container */
   body #select2-bb-rl-groups-scope-options-results {
      border: 1px solid #002E51 !important;
      background-image: url(https://www.haven-0.com/wp-content/uploads/2025/08/Frame-588.png) !important;
      background-repeat: repeat !important;
      background-size: auto !important;
      border-radius: 4px !important;
      padding: 8px 0 !important;
      display: block !important;
      max-height: none !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
   }
   
   /* Hide scrollbar for options container */
   body #select2-bb-rl-groups-scope-options-results::-webkit-scrollbar {
      display: none !important;
      width: 0 !important;
      height: 0 !important;
   }
   
   body #select2-bb-rl-groups-scope-options-results {
      -ms-overflow-style: none !important;
      scrollbar-width: none !important;
   }
   
   /* Dropdown items */
   body #select2-bb-rl-groups-scope-options-results .select2-results__option {
      margin: 0 !important;
      padding: 12px 16px !important;
      color: #F8F8FF !important;
      border-radius: 8px !important;
      background-color: transparent !important;
      transition: background-color 0.2s ease !important;
      font-family: IBM Plex Sans !important;
      font-weight: 500 !important;
      font-size: 15px !important;
      line-height: 140% !important;
   }
   
   body #select2-bb-rl-groups-scope-options-results .select2-results__option:hover,
   body #select2-bb-rl-groups-scope-options-results .select2-results__option[aria-selected="true"] {
      background-color: #00599533 !important;
      border-radius: 0 !important;
   }
   
   body #select2-bb-rl-groups-scope-options-results .select2-results__option:active {
      background-color: #01294678 !important;
   }
   
   /* Cancel button */
   body .select2-dropdown:has(#select2-bb-rl-groups-scope-options-results)::after {
      content: 'Annuler' !important;
      display: block !important;
      font-family: IBM Plex Sans !important;
      font-size: 15px !important;
      line-height: 140% !important;
      text-align: center !important;
      font-weight: 500 !important;
      color: #F8F8FF !important;
      padding: 12px !important;
      margin-top: 16px !important;
      border-radius: 4px !important;
      cursor: pointer !important;
      transition: background-color 0.2s ease !important;
      border: 1px solid #002E51 !important;
      background-image: url(https://www.haven-0.com/wp-content/uploads/2025/08/Frame-588.png) !important;
      background-repeat: no-repeat !important;
      background-size: cover !important;
      background-color: #001829 !important;
      pointer-events: auto !important;
      position: relative !important;
      z-index: 1 !important;
   }
   
   body .select2-dropdown:has(#select2-bb-rl-groups-scope-options-results)::after:active {
      background-color: #01294678 !important;
   }
   
   /* Handle bar at top of bottom sheet */
   body .select2-dropdown:has(#select2-bb-rl-groups-scope-options-results)::before {
      content: '' !important;
      position: absolute !important;
      top: 12px !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      width: 40px !important;
      height: 4px !important;
      background-color: rgba(248, 248, 255, 0.3) !important;
      border-radius: 2px !important;
   }
   
   /* Hide search box in mobile */
   body .select2-dropdown:has(#select2-bb-rl-groups-scope-options-results) .select2-search {
      display: none !important;
   }
}