/* OMNI */
/* events.css  */

/* Filters above event list scroll by default */
.list-events-filter-bar ul.list-filter{
   overflow-y: hidden;
   overflow-x: auto;
   white-space: nowrap;   
}
/* non-touch device remove scroll from the filter bar; these wrap instead */
@media (pointer: fine){
   .list-events-filter-bar ul.list-filter{
      overflow: initial;
      white-space: initial;   
   }   
}

.list-events-filter-bar{
   border-bottom: 1px solid #E5E5E5;
}

.list-events-filter-bar ul.list-filter li{
   margin: 0;
   font-size: 1.1rem;
   border: 1px solid #E5E5E5;
   text-align: center;
   padding: 8px 16px;
   margin-right: clamp(8px, 2vw, 16px);
   margin-bottom: clamp(8px, 2vw, 16px);
   display: inline-block;
   position: relative;
   border-radius: 20px;
   background: white;
   max-width: 160px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;   
}

.list-events-filter-bar ul.list-filter li.is-selected, .list-events-filter-bar ul.list-filter li:hover{
   background: var(--btn-events-bg-color);
   color: white;
   cursor: pointer;
}
.list-events-filter-bar ul.list-filter li.is-selected{
   font-weight: 500;
}


ul.list-events{
   container-type:inline-size; /* needed for container query */
}

.list-events li.is-event {
   border: 1px solid #fff;
   border-bottom-color: #f1f1f1;
   position: relative;
   border-radius: 8px;
   background: white;
   line-height: unset;     
}

.list-events li.is-event a {
   color: #000;
   text-decoration: none
}


.list-events li.is-event .link-wrapper {
   position: relative;
   width: 100%;
   display: block;
   height: 100%;
   padding: 20px 12px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;   
}









.list-events .date-block,.list-events .event-block {
   display: inline-grid
}

.list-events .date-block {
   width: 92px;
   line-height: 18px;
   font-size: 1rem;
}

.list-events .event-block {
   width: calc(100% - 184px)
}

.list-events .date-block span.date {
   display: block;
   font-size: 1.1rem;
   font-weight: 500
}

.list-events .date-block span.time {
   display: block
}

.list-events .date-block span.time span.dow, .list-events .date-block span.when span.dow{
   display:inline;
}

.list-events .date-block span.time span.dow:after{
   content: " - ";
}

.list-events .date-block span.when{
   line-height: 1.1; /*in case it wraps*/
}


.list-events .event-block .event-name {
   color: #000;
   font-weight: 700;
   font-size: 1.3rem;
   margin-bottom: .2rem;
   display: block
}

.list-events .event-block .event-name span{
   display: block;
   font-size: 80%;
   line-height: 1.5;
}

/* Main CTA */
.list-events li.is-event button {
   color: #fff;
   background: var(--btn-events-bg-color);
   height: 36px;
   line-height: 36px;
   border-radius: 4px;
   font-size: 1.2rem;
   border: 0;
   position: absolute;
   right: 12px;
}

/* Fill in button text with css */
.list-events li.is-event button:after{
   content: "Tickets";
}

.list-events li.is-event button.select-btn{
   color: white;
   background: black;
   padding: 0 1rem;
}


.list-events li.is-event button.select-btn:after{
   content: "Select";
   font-size: 16px;
}

.list-events .event-block .event-details {
   display: block;
   font-size: 1.1rem;
   color: #222
}

.list-events li.is-event:not([data-active='0']) .event-block .event-details {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden
}



.list-events li.is-event:not([data-active='0']):hover {
   cursor: pointer;
   webkit-box-shadow: 0 2px 4px rgba(0,0,0,.2);
   -moz-box-shadow: 0 2px 4px rgba(0,0,0,.2);
   box-shadow: 0 2px 4px rgb(0 0 0/20%);
   border: 1px solid #E5E5E5;
   transition: box-shadow 200ms ease-out 0s;
   z-index: 1
}

.list-events li.is-event:not([data-active='0']) .event-name:hover {
   text-decoration: underline
}

.list-events li.is-event:not([data-active='0']) button:hover {
   opacity: .7;
   transition: all 100ms ease 0s
}




/* Narrow event lists have a condensed UI */
@container (max-width: 480px) {
   .list-events li.is-event .date-block > *, .list-events li.is-event .event-block > *, .list-events li.is-event button {
      transform: scale(0.888); 
   }
   .list-events li.is-event .date-block{
      width: 84px;
   }
   .list-events li.is-event .event-block{
      width: calc(100% - 164px);
   }   

   .list-events li.is-event a.link-wrapper {
      padding: 16px 12px;
   }   
}

/* Wide event lists have more space for the date */
@container (min-width: 540px){
   .list-events .date-block {
      width: 108px;
   }
   .list-events li.is-event .event-block{
      width: calc(100% - 200px);
   }   
}

/* Super-wide event lists have more prominent CTAs */
@container (min-width: 660px){
   .list-events li.is-event .event-block{
      width: calc(100% - 236px);
   }
   .list-events li.is-event button{
      width: 108px;
   }
   .list-events li.is-event button:after{
      content: "Shop Tickets";
   }  
   .list-events li.is-event button.select-btn:after{
      content: "Select";
   }      
}



/* Very narrow event lists have a condensed UI */
@container (max-width: 424px){
   .list-events  li.is-event button {
      background: none;
      color: var(--btn-events-bg-color);
      transform: none;
      line-height: 1;
      top: calc(50% - 20px);
      height: 32px;
      padding: 0;
   }
   .list-events li.is-event button:after{
      content: "›";
      font-size: 32px;
   }

   .list-events li.is-event .date-block{
      width: 48px;
   }

   .list-events li.is-event .event-block{
      width: calc(100% - 88px);
   }
   .list-events li.is-event a.link-wrapper {
      padding: 12px 4px;
   }
   .list-events .date-block span.time span.dow{
      display: none;
   }
}



/* Makes filters stack vertically (used with filterWall or stacked modes) */
.list-events-filter-bar ul.list-filter.stacked-filters {
   display: flex;
   flex-direction: column;
   align-items: stretch;
   gap: 16px;
   overflow-x: unset;
   overflow-y: unset;
   white-space: normal;
   border-bottom: none;
 }
 
 .list-events-filter-bar ul.list-filter.stacked-filters li {
   display: block;
   margin: 0;
   margin-bottom: 0; /* Already covered by gap above */
   font-size: 1.25rem;
   border-radius: 12px;
   border-width: 2px;
   box-shadow: 0 2px 6px rgba(0,0,0,0.04);
   padding: 18px 20px;
   background: #fff;
   transition: background .15s, color .15s, box-shadow .2s;
 }
 
 .list-events-filter-bar ul.list-filter.stacked-filters li.is-selected,
 .list-events-filter-bar ul.list-filter.stacked-filters li:hover {
   background: var(--btn-events-bg-color, #1976d2);
   color: #fff;
   font-weight: 600;
   box-shadow: 0 6px 16px rgba(25, 118, 210, 0.10);
 }
 


 /* Shows filter wall message when no filter picked */
.filter-wall-message {
   padding: 2em 1em;
   text-align: center;
   font-size: 1.2rem;
   color: #555;
   background: #f8fafb;
   border-radius: 6px;
   margin-top: 24px;
 }
 


 [data-theme="dark"] {
   --btn-events-bg-color: #0a304d;
   background: #181D1F;
   color: #f5f6fa;
 }
 
 [data-theme="light"] {
   --btn-events-bg-color: #1976d2;
   background: #fff;
   color: #111;
 }
 
 /* You can add any palette/brand adjustments in a new theme variable group */
 


 .event-search-box {
   padding: 12px;

   width: 100%;
   border-radius: 8px;
   border: 1px solid #E5E5E5;
   font-size: 1.1em;
   transition: border-color 0.2s;
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg>');
   background-repeat: no-repeat;
   background-position: 12px center;
   padding-left: 40px;   
 }
 .event-search-box:focus {
   border-color: var(--btn-events-bg-color, #1976d2);
   outline: none;
 }
 


 .month-bar {
   display: flex;
   gap: 10px;
   justify-content: flex-start;
   margin: 19px 0;
   padding-bottom: 7px;
   border-bottom: 1px solid #ededed;
 }
 
 .month-bar button {
   background: #f0f3f9;
   color: #1a2337;
   border: 0;
   border-radius: 19px;
   padding: 0.7em 1.4em;
   cursor: pointer;
   font-size: 1rem;
   transition: background 0.14s, color 0.13s;
 }
 
 .month-bar button.selected, .month-bar button:focus {
   background: var(--btn-events-bg-color, #1976d2);
   color: #fff;
 }
 

 .event-search-wrapper {
   position: relative;
   display: inline-block;
   width: 100%;
   max-width: 400px;
   margin-bottom: 16px;;
 }
 .event-search-box {
   width: 100%;
   padding-right: 32px; /* space for clear button */
 }
 .search-clear-btn {
   position: absolute;
   right: 0px;
   top: 50%;
   transform: translateY(-50%);
   border: none;
   background: none;
   cursor: pointer;
   font-size: 1.35em;
   color: #999;
   padding: 0;
   margin: 0;
   line-height: 1;
   z-index: 1;
   display: none;
   width: 32px;
 }
 
 .no-results-message{
    padding: 40px;
    text-align: center;
 }




 #sidebar-events{

 }



 #sidebar-events ul.tickets{
    white-space: nowrap;
} 

#sidebar-events .slider-wrapper ul.tickets{
   white-space: unset;
}


#sidebar-events ul.tickets li[data-role='ticket']{
   display: inline-grid;
   box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
} 

#sidebar-events .slider-wrapper ul.tickets li[data-role='ticket']{
  display: unset;
}


#sidebar-events .is-header{
   line-height: 40px;
   font-size: 15px;
   font-weight: 500;
}

#sidebar-events .navigation-info{
   padding: 0;
   right: 0;
   bottom: 50%;
   transform: translateY(50%);
   border: none;   
}

#sidebar-events .navigation-info button{
   margin: 0;
}



#sidebar-events li[data-role='ticket']{
   position: relative;
   padding: 8px;
   border: 1px solid #E5E5E5;
   margin-bottom: 16px;
   border-radius: 4px;
   height: 96px;
   cursor: pointer;
   background: white;
}
#sidebar-events li[data-role='ticket'] *{
   line-height: 1 !important;
}


#sidebar-events li[data-role='ticket']:hover{
   background: #eff5fc;
   transition: background 0.2s;
   border-color: #E6F0FA;
}


#sidebar-events li[data-role='ticket'] [data-role='details']{
   width: 75%;   
}

#sidebar-events li[data-role='ticket'] [data-role='headline']{
   color: green;
   font-weight: 500;
   font-size: 11px;
   margin-bottom: 8px;
}

#sidebar-events li[data-role='ticket'] [data-role='section']{
   font-size: 15px;
   font-weight: 500;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;   
   margin-bottom: 4px;
}

#sidebar-events li[data-role='ticket'] [data-role='seats']{
   color: #222;
   margin-bottom: 12px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: 13px;   
}

#sidebar-events li[data-role='ticket'] ul[data-role='features']{
   
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
      
   margin-bottom: 0;;
}






#sidebar-events li[data-role='ticket'] [data-role='features'] li{
   margin-bottom: 4px;
   font-size: 13px;
   color: #222;
   padding-left: 1.5em; /* space for the icon */
   position: relative;
   
}


#sidebar-events li[data-role='ticket'] [data-role='features'] li::before {
   content: '';
   display: inline-block;
   position: absolute;
   left: 2px;
   top: 50%;
   transform: translateY(-50%);
   width: 1em;
   height: 0.8em;
   color: rgb(18, 102, 24);
   background-color: currentColor; /* inherits from .ticket-attribute-headline */
   mask: url("https://api.iconify.design/mdi:check.svg?color=white") no-repeat center / contain;
   -webkit-mask: url("https://api.iconify.design/mdi:check.svg?color=white") no-repeat center / contain;
}



#sidebar-events li[data-role='ticket'] [data-role='location']{
   position: absolute;
   top: 8px;
   right: 8px;
   width: 84px;
   height: 48px;
}

#sidebar-events li[data-role='ticket'] [data-role='location'] img{

}


#sidebar-events li[data-role='ticket'] [data-role='price']{
   position: absolute;
   bottom: 8px;
   right: 8px;
   font-weight: bold;
   font-size: 18px;   
}
#sidebar-events li[data-role='ticket'] [data-role='price'] span{
   font-size: 10px;
   font-weight: normal;
}


.featured-tickets-container .is-button{
   height: 48px;
   line-height: 48px;
   width: 100%;
}

#sidebar-events .slide img{
   min-height: unset;
}

#sidebar-events .slider-header.has-navigation{
   margin-bottom: 8px;
}