:root{
   --height-card-hero: 190px;   
}





.is-tiered .seating-guide-buy-tickets .card{
    height: 138px;
  }
  .is-tiered .seating-guide-buy-tickets .card h2:after{
      content: "100% Buyer Guarantee";
      font-size: 15px;
      position: absolute;
      top: 28px;
      left: 0;
      width: 176px;
  }
  
  
  .is-tiered .seating-guide-buy-tickets img{
    height: 108px !important;
  }
  .is-tiered .seating-guide-upload-rate{
    height: 125px !important;
  }
  
  .is-tiered .seating-guide-explore{
    height: 119px !important;
  }
  
  .is-tiered .sc-holder, .is-tiered .cropped-chart{
    height: 68px !important;
  }
  
  .is-tiered .seating-guide-upload-rate{
    padding-top: 5px !important;
  }
  
  .is-tiered .seating-guide-upload-rate span.eighteen{
    line-height:24px !important;
  }
  

  #preview-seating-container{position:absolute;top:430px;width:630px;background:rgba(255,255,255,0.9) none;z-index:5;left:-15px; box-shadow: 0 -3px 4px 0px rgba(0,0,0,0.15);border-bottom:1px solid #DDD;border-top:1px solid #DDD;}
#preview-seating-container .interior{width:600px;padding:10px 15px;box-shadow: 0 3px 4px 0px rgba(0,0,0,0.15);z-index:6;overflow:auto;}
.preview-seating-select.active em{display:none;}
.venue-header.marbottom{margin-bottom:0 !important;} /*super-hack with cover photo*/
.cover-photo{width:100%; background-repeat:no-repeat;background-position:50% 35%;background-size:100%;}
.cover-photo-interior{padding-top:20px;width:1000px;margin:0px auto; overflow:auto;}
.cover-photo-interior h1,.cover-photo-interior h2{text-align:center;}
.cover-photo .card{-moz-box-shadow:6px 6px 5px #000;-webkit-box-shadow:6px 6px 5px #000;box-shadow:6px 6px 5px #000;position:relative;background:white;border:1px solid #CCC;}
.cover-photo .card h2{color:black !important;text-shadow:none !important;font-size:18px;font-weight:normal !important;text-align:left;}
.cover-photo .card h2:hover{text-decoration:underline;}
.cover-photo .card:hover{border-color:black;}
.cover-photo ul.navigation-onpage{border-top:1px solid #333;}
.cover-photo ul.navigation-onpage li{font-weight:bold;color:#AEAEAE;font-size:14px;padding:20px 30px;position:relative;}
.cover-photo ul.navigation-onpage img.arrow-active{display:none;position:absolute;bottom:0;left:50%;margin-left:-7px;}
.cover-photo ul.navigation-onpage li.active{color:white;}
.cover-photo ul.navigation-onpage li.active img.arrow-active{display:block;}
.cover-photo ul.navigation-onpage li:hover{color:white;cursor:pointer;}
.cover-photo-interior{padding-bottom:0 !important;} /*if we have inpage navigation*/
a.item-location{border-left:16px solid #D1D1D1;padding-left:10px;}
#section-rows-description div{background:#E1E1E1;border-radius:4px;min-width:16px;text-align:center;font-size:11px;color:#333;height:16px;line-height:16px;float:left;margin-right:10px;font-weight:bold;}
#section-rows-description span{line-height:16px;float:left;font-weight:bold;color:#999;font-size:11px; margin-right:20px;}
#section-rows-description span.last{margin-right:0;}
ul.page-contents li{color:black !important;font-size:12px;line-height:26px;}
table.table-staff-picks{color:#666;}
table.table-staff-picks th{color:#666;font-weight:bold;text-align:left;border-bottom:1px solid #CCC;padding:10px}
table.table-staff-picks th:first-child, table.table-staff-picks td:first-child{padding-left:0;}
table.table-staff-picks td{padding:10px;border-top:1px solid #F1F1F1;}
table.table-staff-picks tr.continuous td:first-child{border-top:none;}
table.table-staff-picks td li{font-size:12px;margin-bottom:0;}
.custom-event-box,.custom-event-box .bg-black-transparent-dark{border-radius:10px;}
.article-body p.callout-inline{margin-left:-15px;-moz-box-shadow:1px 2px 2px 0px #666;-webkit-box-shadow:1px 2px 2px 0px #666;box-shadow:1px 2px 2px 0px #666;background:#333;color:white;padding:10px;}
.article-body p.callout-inline a{color:white;text-decoration:underline;}











.thumbnail-container{overflow:auto;}
.thumbnail-container img{
   width: 100%;
   border-radius: 4px;
   object-fit: cover;
   height: 100%;   
}

.thumbnail-container .thumbnail-holder{
   float:left;margin-right:10px; width:calc(20% - 10px);max-width: 90px;
   height: 15vw;
   max-height: 90px;
   border-radius: 4px;
   box-sizing: border-box;
}

.thumbnail-container .thumbnail-holder .caption{padding:3px 5px;position:absolute;bottom:0;left:0;color:white !important;background:rgba(0,0,0,0.85) none;width: 100%;box-sizing: border-box;
font-size: --fsize-d-xsmall;
}

.thumbnail-holder.link-holder{   
   background: black;
   color: white;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   font-weight: 500;  
}




.mobile #seating_overview section:first-child{margin-top:0px;}
/*MOBILE EVENT LIST STYLING*/
.mobile #mobile-ajax-event-list{margin:10px;margin-bottom:20px;border:1px solid #E5E5E5;}
.mobile #mobile-ajax-event-list ul.simple-event-list{border-top:none;}
.mobile #mobile-ajax-event-list h2.list-header{border-bottom:1px solid #E5E5E5;border-top:none;background:#FFF;color:#666;font-size:18px;padding:15px;}
.mobile #seating_overview{padding-top:20px;}

ul.header-navigation{padding:15px;background:white;border-top:1px solid #CCC;border-bottom:1px solid #CCC;}
ul.header-navigation.navigation-scroll{overflow-y:hidden;overflow-x:scroll;white-space: nowrap;}
.header-navigation li{border-radius:3px;border:1px solid #0067CE;color:#0067CE;text-align:center;padding:7px 0;width:90px;margin-right:15px;display:inline-block;text-transform:uppercase;font-size:11px;position:relative;}



#trending-events{background:white;border-bottom:1px solid #CCC;}

/*Test default has sticky header at the top*/
#sticky-event-teaser{position:fixed;top:auto;bottom:0;width:100%;-moz-box-shadow:1px -2px 2px 0px #CCC;-webkit-box-shadow:1px -2px 2px 0px #CCC;box-shadow:1px -2px 2px 0px #CCC;z-index:1000000;left:0;}


/**
 * The default mobile event list has a date block, event block and button
 * [ ][      ][  ]
 *
 * The default button text is "Tickets"
 *
*/
.mobile .list-events-style-default li.event{background:white;position:relative;border-bottom:1px solid #F1F1F1; overflow:auto;font-size:12px;color:black;padding:10px 0;}

.mobile .list-events-style-default li.event .date-block{float:left;width:30px;line-height:1;padding:0 15px;margin-top:-2px;}
.mobile .list-events-style-default li.event .date-block span{display:block;text-align:center;}
.mobile .list-events-style-default li.event .date-block .day-of-month{font-size:22px;margin-bottom:3px;}
.mobile .list-events-style-default li.event .date-block .month{text-transform:uppercase;}
.mobile .list-events-style-default li.event .event-block{float:left;width:calc(100% - 60px - 72px - 22px);-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;line-height:1;}
.mobile .list-events-style-default li.event .event-block .event-name{margin-bottom:2px;font-size:14px;color:#0067CE;font-weight:500;}
.mobile .list-events-style-default li.event .event-block .event-location,.list-events-style-default li.event .event-block .event-time{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.mobile .list-events-style-default li.event .event-block .event-location{margin-bottom:2px;}
.mobile .list-events-style-default li.event button{position:absolute;right:15px;width:72px;font-size:14px;height:32px;padding:0;line-height:32px;top:10px;}


  
/**
 * Styles for event overlay popup
 */
 
#list-overlay-popup-events{max-height:calc(100% - 270px);}
#list-overlay-popup-events li{margin-bottom:15px;text-align:center;color:white;position:relative;padding:10px;height:60px;background:black;cursor:pointer;}
#list-overlay-popup-events li:last-child{margin-bottom:0;}
#list-overlay-popup-events li:active{opacity:0.85}
#list-overlay-popup-events li .abbreviation{left:0px;width:60px;top:0;text-align:center;font-size:24px;line-height:60px;height:60px;position:absolute;font-weight:bold;}
#list-overlay-popup-events .event-name{line-height:24px;font-weight:bold;font-size:20px;width:calc(100% - 60px);margin-left:30px;position:relative;z-index:2;}
#list-overlay-popup-events .event-name.has-abbrev{width:calc(100% - 120px);margin-left:60px;}
#list-overlay-popup-events .event-details{line-height:16px;}
#list-overlay-popup-events li .image-performer{position:absolute;right:0;top:0;height:60px;width:90px;z-index:1;}  
  
  
  
  
  
  section figure img{height:300px;width:100%;object-fit:cover;} 
  
@media screen and (max-width: 599px)
{
  section figure img{height:200px;} 
}

section .article.article-best-seats{max-height:150px;overflow:hidden;margin-bottom:20px;}
section .article.article-best-seats{}
section.section-expanded .article.article-best-seats{max-height:unset;margin-bottom:0;}
section.section-expanded .mask-article{background:none;position:relative;padding:0;}  
section .mask-article{position:absolute;bottom:0;width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));left:0;width:100%;padding:15px;padding-top:155px;text-transform:uppercase;font-weight:bold;margin-top:10px;}
  .section-collapsed:not(.section-expanded):hover{cursor:pointer;border-color:#CCC !important;webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);}
  section .mask-article  span.fakeLink:before{content:"Continue Reading";}
  section.section-expanded .mask-article span.fakeLink:before{content:"Show Less";}

  
  
  li.item-avatar{border:none;padding-top:0;padding-left:56px !important;} 

   #city-events ul{
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 16px;
      list-style-type: none;
      padding: 0;
      margin: 0;
   }

   #city-events li{
      font-size: clamp(13px, 2vw, 14px);
   }
   #city-events li a{
      color: #222;      
   }


.pseudo-section{
   padding: 10px;
}


.slider .item-card .details{
   
}

.slider .item-card .footer button{
    background-color: black;
    color: white;
    border: none;
    cursor: pointer;
    line-height: 32px;
   height: 32px;
   width: 50%;
   position: absolute;
   right: 0;
   bottom: 0;
}



#contentZoneModalXXX section{
   margin-bottom: 40px;
}

#contentZoneModalXXX section.hero{
   margin-bottom: 20px;
}

#contentZoneModalXXX img{
   max-height: 300px;
   width: 100%;
   height: 100%;
   min-height: 120px;
   aspect-ratio: 13 / 7;
   filter: brightness(0.8);
   object-fit: cover;
   border-radius: 1rem;   
}

#contentZoneModalXXX hgroup h1{
   margin-bottom: 0;
}


section.is-section{
   padding: 10px;
}

section.is-section .footer{
   padding-top: 20px;
}

section.is-section .footer .secondary-message{
   color: #666;
   float: right;
}




/* Move the cover photo to centered */
.billboard-transparent .billboard-bg img{
   object-position: center;
}

[data-pattern='card'][data-variant='shaded']{
   transition: all 0.5s ease;
}
[data-pattern='card'][data-variant='shaded']:hover{

}

[data-pattern='card'] [data-slot='cta-text']:not([data-is="btn"]):hover,
[data-pattern='card'] [data-slot='title']:hover{
   text-decoration: underline;
}

[data-pattern='card'][data-card='content']{
   
   /* force heights to match */
   height: 100%;

   /* Helps dense cards breathe */
   min-height: 160px;
}

[data-pattern='card'][data-card='content'] [data-slot='media']{
   overflow: hidden;
}

[data-pattern='card'][data-card='content'] img{
   transition: transform 0.4s ease;
   filter: brightness(0.9);
}

[data-pattern='card'][data-card='content']:hover img{
   transform: scale(1.06);
   filter: brightness(1);
}

[data-pattern='card']:not([data-variant='event']) > [data-slot='footer'][data-variant='cta']{
   color: var(--color-primary);
}

[data-pattern='card'][data-card='content']:hover{
   cursor: pointer;
}

[data-pattern='card'] [data-slot='footer'] [data-slot='cta-text']{
   font-size: 15px;
}


[data-slot='media-badge']{
   filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}

[data-slot='media-badge'] [data-role='price']{
   font-size: x-small;
   font-weight: normal;
   line-height: 1.2;
}

[data-slot='media-badge'] [data-role='price'] strong{
   display: block;
   font-size: 16px;
}

[data-pattern='card'][data-card='content'] [data-slot='media'] [data-slot='media-badge']{
   background: rgb(0 36 72 / 75%);
   color: white;
   line-height: 12px;
   padding: 6px 12px;
   top: 4px;
   left: 4px;
   border-radius: 6px;  
}
[data-pattern="card"][data-card="vignette"] [data-slot='media']::after,
[data-pattern="card"][data-card="vignette"] [data-slot='media'] img,
[data-pattern="card"][data-card="vignette"]{
   transition: transform 0.4s ease;
   transition: all 0.4s ease;
}
[data-pattern="card"][data-card="vignette"]:hover [data-slot='media'] img{
   scale:  1.06;
}

[data-pattern="card"][data-card="vignette"]:hover [data-slot='media']::after{
   background: rgba(var(--billboard-bg-rgb), 0.6);
}


a.rys-slide.view-all-events {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-decoration: none !important;
}


.cmodal main{
   display: flex;
   flex-direction: column;
}


#modal-tickets{
   margin-top: auto;
}

#modal-tickets rys-slider{
   margin-bottom: 12px;
}


#modal-tickets .is-body{
   padding-left: var(--gutter-size);
   padding-top: 16px;
   padding-bottom: 24px;
   border-top: 1px solid #0067ce17;
   background: linear-gradient(to bottom, rgb(194 213 233 / 20%) 0%, rgba(255, 255, 255, 1) 80%);
   margin-left: calc(clamp(1rem, 3vw, 1.5rem) * -1);
   margin-right: calc(clamp(1rem, 3vw, 1.5rem) * -1);
   margin-bottom: calc(var(--scene-gap) * -0.75);
   max-width: none;   
}

#modal-tickets .slider-footer{

   display: flex;
   gap: 0.5rem;
   color: var(--color-60);
   white-space: nowrap;
   overflow: hidden;
   height: 20px;   
   margin: 0px auto;
}

#modal-tickets .slider-footer li{
   display: flex;
   align-items: center;
   gap: 0.25rem;
   font-size: var(--size-content-detail);
   height: 20px;
   line-height: 20px;
   white-space: nowrap;
   flex-shrink: 0;   
}

#modal-tickets .slider-footer li:not(:first-child)::before {
   content: "•";
   margin-right: 0.5rem;
}

#modal-tickets .slider-footer i[data-icon="shield-check-outline"] {
   color: #008000;
}

#modal-tickets .is-body{
   display: flex;
   flex-direction: column;
   gap: 12px;
}

#modal-tickets .is-body .slider-footer-button [data-is='btn']{
   width: calc(100% - 16px);
}




/* Force the rail to overlap */
@media (min-width: 960px) {
   [data-layout='rail'] {
      margin-top: -100px;
      z-index: 5;
   }      
}



 .video-container{
   position: relative;
   padding-bottom: 56.25%;
   height: 0;
   overflow: hidden;
   max-width: 100%;
   border-radius: 6px;    
 }


 [data-id='meta']{
   padding: 16px;
   border-radius: 8px;
   background: #fdfdfd;
   border: 1px solid #E5E5E5;
   display: flex;
   flex-direction: column;
   gap: calc(var(--scene-gap) * 0.75);
   flex-wrap: wrap;    
 }


 @media (max-width: 959px) {
   [data-id='meta']{
      display: none;
   }
}




/* ─── Seating Areas Table ───────────────────────────────── */
.rys-container {
   max-width: 1000px;
   margin: 0 auto;
   background: var(--bg-color);
   border: 1px solid #e5e5e5;
   border-radius: 8px;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.rys-table-head {
   display: flex;
   justify-content: space-between;
   padding: 12px 16px;
   border-bottom: 2px solid #e5e5e5;
   font-size: 13px;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   font-weight: 600;
}
.th-mid {
   display: none;
}

/* ─── Row ───────────────────────────────────────────────── */
.rys-row {
   border-bottom: 1px solid #e5e5e5;
}
.rys-row:last-child {
   border-bottom: none;
}

.rys-row-header {
   display: grid;
   grid-template-columns: 1fr auto;
   grid-template-areas: "title price" "details price";
   align-items: center;
   padding: 16px;
   cursor: pointer;
   transition: background-color 0.2s ease;
   gap: 4px 16px;
}
.rys-row-header:hover {
   background-color: #f8fafc;
}

.rys-col-left {
   grid-area: title;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 4px;
}
.rys-col-mid {
   grid-area: details;
   font-size: 13px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.rys-col-right {
   grid-area: price;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 8px;
   font-weight: 500;
   min-width: 80px;
}

/* ─── Row Body / Drawer ─────────────────────────────────── */
.rys-row-body {
   display: none;
   background-color: #f8fafc;
   border-top: 1px solid #f1f5f9;
}
.rys-row.is-expanded .rys-row-body {
   display: block;
}
.rys-drawer-content {
   padding: 16px;
}

/* ─── Chevron ───────────────────────────────────────────── */
.rys-chevron {
   width: 24px;
   height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid #e5e5e5;
   border-radius: 50%;
   transition: transform 0.3s;
   flex-shrink: 0;
}
.rys-row.is-expanded .rys-chevron {
   transform: rotate(180deg);
}

/* ─── Typography ────────────────────────────────────────── */
.rys-section-title {
   font-size: 16px;
   font-weight: bold;
}
.rys-price {
   font-size: 15px;
   font-weight: 600;
}

/* ─── Badges ────────────────────────────────────────────── */
.rys-badge {
   font-size: 11px;
   font-weight: 600;
   padding: 3px 8px;
   border-radius: 12px;
   display: inline-flex;
   align-items: center;
   gap: 4px;
}

.rys-badge [data-is='icon']{
   height: 12px;
   width: 12px;
}

.badge-marquee {
   background: var(--badge-marquee-bg);
   color: var(--badge-marquee-text);
}
.badge-rating {
   background: var(--badge-rating-bg);
   color: var(--badge-rating-text);
}
.badge-cool {
   background: var(--badge-cool-bg);
   color: var(--badge-cool-text);
}
.badge-deal {
   background: var(--badge-deal-bg);
   color: var(--badge-deal-text);
}

/* ─── Chips ─────────────────────────────────────────────── */
.rys-drawer-prompt {
   margin: 0 0 12px 0;
   font-size: 14px;
   font-weight: 600;
}
.rys-chip-scroll {
   display: flex;
   gap: 8px;
   overflow-x: auto;
   padding-bottom: 8px;
   scrollbar-width: none;
}
.rys-chip-scroll::-webkit-scrollbar {
   display: none;
}
.rys-chip {
   flex: 0 0 auto;
   background: #ffffff;
   border: 1px solid #e5e5e5;
   padding: 32px 16px;
   border-radius: 6px;
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
}
.rys-chip:hover {
   border-color: var(--blue-primary);
   color: var(--blue-primary);
}

/* ─── Skeleton ──────────────────────────────────────────── */
.skeleton {
   background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
   background-size: 200% 100%;
   animation: ui-skeleton-loading 1.5s infinite;
   border-radius: 4px;
}
.skeleton-price {
   width: 60px;
}
@keyframes ui-skeleton-loading {
   0%   { background-position: 200% 0; }
   100% { background-position: -200% 0; }
}

/* ─── Table Header ──────────────────────────────────────── */
.rys-table-head {
   display: flex;
   justify-content: space-between;
   padding: 12px 16px;
   border-bottom: 2px solid #e5e5e5;
   font-size: 13px;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   font-weight: 600;
}
.th-mid {
   display: none;
}

/* ─── Row Header ────────────────────────────────────────── */
.rys-row-header {
   display: grid;
   grid-template-columns: 1fr auto;
   grid-template-areas: "title price" "details price";
   align-items: center;
   padding: 16px;
   cursor: pointer;
   transition: background-color 0.2s ease;
   gap: 4px 16px;
}
.rys-row-header:hover {
   background-color: #f8fafc;
}

/* ─── Columns ───────────────────────────────────────────── */
.rys-col-left {
   grid-area: title;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 4px;
   min-width: 0;
   padding-right: 12px;
}
.rys-section-title {
   font-size: 15px;
   font-weight: bold;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   width: 100%;
}

/* Details: mobile sits under title in grid-area "details" */
.rys-col-mid {
   grid-area: details;
   font-size: 13px;
   color: var(--color-80);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   min-width: 0;
}

.rys-col-right {
   grid-area: price;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 10px;
   flex-shrink: 0;
}

/* ─── Price ─────────────────────────────────────────────── */
.rys-price {
   font-size: 13px;
   font-weight: 600;
   white-space: nowrap;
}
.rys-price-unknown {
   font-size: 16px;
   line-height: 1;
}

/* ─── Chevron ───────────────────────────────────────────── */
.rys-chevron {
   width: 28px;
   height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   transition: transform 0.3s;
   flex-shrink: 0;
   border: 1px solid var(--color-primary);
}
.rys-row.is-expanded .rys-chevron {
   transform: rotate(180deg);
}

/* ─── Desktop ───────────────────────────────────────────── */
@media (min-width: 768px) {
   .rys-table-head {
       justify-content: flex-start;
       gap: 16px;
   }
   .th-mobile-only { display: none; }
   .th-left  { flex: 0 0 200px; }
   .th-mid   { 
       display: block; 
       flex: 1;
       padding-left: 2px;
   }
   .th-right { flex: 0 0 120px; text-align: right; }

   .rys-row-header {
       display: flex;
       align-items: center;
       gap: 16px;
   }
   .rys-col-left {
       flex: 0 0 200px;
       padding-right: 0;
   }
   .rys-col-mid {
       flex: 1;
       font-size: 13px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }
   .rys-col-right {
       flex: 0 0 120px;
       justify-content: flex-end;
   }
}


:root {
   --badge-marquee-bg:  #f3e8ff;
   --badge-marquee-text: #7e22ce;

   --badge-rating-bg:  #ffe8d6;
   --badge-rating-text: #ff6600;

   --badge-cool-bg:    #d6eaff;
   --badge-cool-text:  #0067ce;

   --badge-deal-bg:    #dcfce7;
   --badge-deal-text:  #15803d;
}

/* ─── Event Rows (Bottom Sheet) ─────────────────────────── */
.rys-event-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 16px 20px;
   border-bottom: 1px solid var(--border-color);
   cursor: pointer;
   transition: background 0.2s;
}
.rys-event-row:last-child {
   border-bottom: none;
}
.rys-event-row:hover {
   background: #f8fafc;
}

.rys-event-info {
   display: flex;
   flex-direction: column;
   gap: 4px;
}
.rys-event-date {
   font-size: 13px;
   font-weight: 500;
}
.rys-event-name {
   font-size: 15px;
   font-weight: bold;
}

.rys-event-buy {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 2px;
   flex-shrink: 0;
   padding-left: 16px;
}
.rys-event-available {
   font-size: 14px;
   font-weight: 600;
}
.rys-event-cta {
   font-size: 12px;
}

/* ─── Group Children List ───────────────────────────────── */
.rys-group-list {
   display: flex;
   flex-direction: column;
}

.rys-group-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 12px 16px;
   border-bottom: 1px solid var(--border-color);
   cursor: pointer;
   transition: background 0.2s;
   gap: 12px;
}
.rys-group-item:last-child {
   border-bottom: none;
}
.rys-group-item:hover {
   background: #f8fafc;
}

.rys-group-item-left {
   display: flex;
   flex-direction: column;
   gap: 3px;
   min-width: 0;
}
.rys-group-item-left .rys-section-title {
   font-size: 14px;
}
.rys-group-item-details {
   font-size: 12px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.rys-group-item-right {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-shrink: 0;
}
.rys-chevron-sm {
   display: flex;
   align-items: center;
   color: var(--color-60);
}

/* ─── Event type label ──────────────────────────────────── */
.rys-event-type-label {
   font-size: 11px;
   font-weight: 500;
}

/* Group summary text inside drawer */
.rys-group-summary {
   font-size: 13px;
   line-height: 1.5;
   padding: 4px 0 8px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

/* Child rows slide in below their group — subtle indent */
.rys-row-child {
   border-left: 3px solid var(--border-color);
}

.rys-row.is-expanded > .rys-row-header {
   background: #f8fafc;
   border-left: 3px solid var(--color-primary);
}

.rys-row.is-expanded > .rys-row-body {
   border-left: 3px solid var(--color-primary);
}

.billboard-transparent{
   overflow: unset;
}
 /* =============================================================================
   SPOTLIGHT PATTERN
   data-pattern="spotlight"

   Slots:
     [data-slot="avatar"]     Icon container, top-aligned left
     [data-slot="body"]       Stacked title + details
     [data-slot="title"]      Bold headline
     [data-slot="details"]    Supporting copy
     [data-slot="cta"]        Button/link, right-anchored (optional)
     [data-slot="cta-footer"] Inline text CTA below body (alternative to cta slot)
   ============================================================================= */

[data-pattern="spotlight"] {
   display: flex;
   align-items: flex-start;
   gap: 16px;
   padding: 18px 24px 18px 20px;
   background: rgb(230, 249, 254);
   border-radius: 8px;
}

[data-pattern="spotlight"] [data-slot="avatar"] {
   flex-shrink: 0;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #0067CE;
}

[data-pattern="spotlight"] [data-slot="avatar"] [data-is="icon"] {
   height: 32px;
   width: 32px;
}

[data-pattern="spotlight"] [data-slot="body"] {
   flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 3px;
}

[data-pattern="spotlight"] [data-slot="title"] {
   font-size: var(--size-title);
   font-weight: 700;
   margin: 0;
}

[data-pattern="spotlight"] [data-slot="details"] {
   color: var(--color-80);
   margin: 0;
}

[data-pattern="spotlight"] [data-slot="cta-footer"] {
   margin-top: 6px;
   font-size: 13px;
   font-weight: 600;
   color: #0067CE;
}

[data-pattern="spotlight"] [data-slot="cta-footer"] a,
[data-pattern="spotlight"] [data-slot="cta-footer"] button {
   color: inherit;
   background: none;
   border: none;
   padding: 0;
   cursor: pointer;
   font: inherit;
   text-decoration: none;
}

[data-pattern="spotlight"] [data-slot="cta-footer"] a:hover,
[data-pattern="spotlight"] [data-slot="cta-footer"] button:hover {
   text-decoration: underline;
}

[data-pattern="spotlight"] [data-slot="cta"] {
   flex-shrink: 0;
   align-self: center;
}

@media (max-width: 600px) {
   [data-pattern="spotlight"] {
       flex-wrap: wrap;
       gap: 12px;
   }

   [data-pattern="spotlight"] [data-slot="cta"] {
       width: 100%;
       align-self: unset;
   }

   [data-pattern="spotlight"] [data-slot="cta"] [data-is="btn"] {
       width: 100%;
       justify-content: center;
   }
}

/* Spotlight — deal variant */
.spotlight-deal [data-slot="avatar"] { color: #2a7a2a; }
.spotlight-deal [data-slot="title"]  { color: #2a7a2a; }

.spotlight-deal .btn-cta,
.spotlight-deal [data-slot="cta-footer"] button,
.spotlight-deal [data-slot="cta-footer"] a {
   background: #2a7a2a;
   color: #fff;
}

.spotlight-deal .btn-cta:hover,
.spotlight-deal [data-slot="cta-footer"] button:hover,
.spotlight-deal [data-slot="cta-footer"] a:hover {
   background: #235e23;
   text-decoration: none;
}

/* =============================================================================
   SPOTLIGHT PATTERN
   data-pattern="spotlight"
   ============================================================================= */

   [data-pattern="spotlight"] {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      padding: 18px 24px 18px 20px;
      background: rgb(230, 249, 254);
      border-radius: 8px;
  }
  
  [data-pattern="spotlight"] [data-slot="avatar"] {
      flex-shrink: 0;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #0067CE;
  }
  
  [data-pattern="spotlight"] [data-slot="avatar"] [data-is="icon"] {
      height: 32px;
      width: 32px;
  }
  
  [data-pattern="spotlight"] [data-slot="body"] {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 3px;
  }
  
  [data-pattern="spotlight"] [data-slot="title"] {
      font-size: var(--size-title);
      font-weight: 700;
      margin: 0;
  }
  
  [data-pattern="spotlight"] [data-slot="details"] {
      color: var(--color-80);
      margin: 0;
  }
  
  [data-pattern="spotlight"] [data-slot="cta-footer"] {
      margin-top: 6px;
      font-size: 13px;
      font-weight: 600;
      color: #0067CE;
  }
  
  [data-pattern="spotlight"] [data-slot="cta-footer"] a,
  [data-pattern="spotlight"] [data-slot="cta-footer"] button {
      color: inherit;
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      font: inherit;
      text-decoration: none;
  }
  
  [data-pattern="spotlight"] [data-slot="cta-footer"] a:hover,
  [data-pattern="spotlight"] [data-slot="cta-footer"] button:hover {
      text-decoration: underline;
  }
  
  [data-pattern="spotlight"] [data-slot="cta"] {
      flex-shrink: 0;
      align-self: center;
  }
  
  @media (max-width: 600px) {
      [data-pattern="spotlight"] { flex-wrap: wrap; gap: 12px; }
      [data-pattern="spotlight"] [data-slot="cta"] { width: 100%; align-self: unset; }
      [data-pattern="spotlight"] [data-slot="cta"] [data-is="btn"] { width: 100%; justify-content: center; }
  }
  
  /* Spotlight — deal variant */
  .spotlight-deal [data-slot="avatar"] { color: #2a7a2a; }
  .spotlight-deal [data-slot="title"]  { color: #2a7a2a; }
  
  .spotlight-deal .btn-cta,
  .spotlight-deal [data-slot="cta-footer"] button,
  .spotlight-deal [data-slot="cta-footer"] a {
      background: #2a7a2a;
      color: #fff;
  }
  
  .spotlight-deal .btn-cta:hover,
  .spotlight-deal [data-slot="cta-footer"] button:hover,
  .spotlight-deal [data-slot="cta-footer"] a:hover {
      background: #235e23;
      text-decoration: none;
  }
  
  
  /* =============================================================================
     VENUE EVENT PANELS (vep)
     ============================================================================= */
  
  .vep {
      margin: 20px 0 24px;
  }
  
  /* --- Loaded wrapper ----------------------------------------------------------- */
  
  .vep__loaded {
      border: 1px solid #E5E5E5;
      border-radius: 8px;
      overflow: hidden;
      animation: vepFadeIn 0.2s ease both;
  }
  
  /* --- Header ------------------------------------------------------------------- */
  
  .vep__loaded-header {
      padding: 14px 18px 12px;
      border-bottom: 1px solid #E5E5E5;
  }
  
  /* Theme backgrounds */
  .vep__loaded--seats .vep__loaded-header { background: rgb(230, 249, 254); }
  .vep__loaded--deals .vep__loaded-header { background: #edf7ed; }
  
  .vep__loaded-title-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 4px;
  }
  
  .vep__loaded-icon {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      color: #0067CE;
  }
  
  .vep__loaded--deals .vep__loaded-icon {
      color: #2a7a2a;
  }
  
  .vep__loaded-icon [data-is="icon"] {
      width: 20px;
      height: 20px;
  }
  
  .vep__loaded-label {
      font-size: var(--size-title);
      font-weight: 700;
      color: #0067CE;
      margin: 0;
      line-height: 1.2;
  }
  
  .vep__loaded--deals .vep__loaded-label {
      color: #2a7a2a;
  }
  
  .vep__loaded-event-meta {
      color: var(--color-80, #5a6a7a);
      line-height: 2;
      font-weight: 500;
  }
  
  /* --- Bucket label row (seats only) ------------------------------------------- */
  
  .vep__bucket-header {
      display: grid;
      grid-template-columns: 56px 1fr 80px auto 120px;
      gap: 12px;
      align-items: center;
      padding: 6px 18px;
      background: #F7F7F7;
      border-bottom: 1px solid #EBEBEB;
      font-size: 11px;
      font-weight: 600;
      color: var(--color-80, #888);
      text-transform: none;
      letter-spa3ing: 0;
  }
  
  /* --- Table rows --------------------------------------------------------------- */
  
  .vep__table {
      display: flex;
      flex-direction: column;
  }
  
  /*
   * Grid: photo | location | [score+price group] | cta
   * Score and price are siblings inside .vep__row-right so they
   * always align regardless of content width.
   */
  .vep__row {
      display: grid;
      grid-template-columns: 56px 35% auto 120px;
      column-gap: 16px;
      align-items: center;
      padding: 16px 18px;
      border-bottom: 1px solid #F0F0F0;
      cursor: pointer;
      transition: background 0.12s ease;
  }
  
  .vep__row:last-child {
      border-bottom: none;
  }
  
  .vep__row:hover {
      background: #FAFAFA;
  }
  
  /* Photo thumbnail */
  .vep__row-photo {
      width: 56px;
      height: 42px;
      border-radius: 4px;
      overflow: hidden;
      background: #F0F0F0;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
  }
  
  .vep__row-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
  }
  
  .vep__row-photo--empty {
      color: #ccc;
      font-size: 18px;
  }
  
  /* Location block */
  .vep__row-location {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 3px;
  }
  
  .vep__row-section {
      font-size: 15px;
      font-weight: 600;
      
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  
  .vep__row-sub {
      font-size: 13px;
      color: var(--color-80, #5a6a7a);
  }

  .vep__row-sub [data-is='icon']{
     height: 14px; width:14px;
  }
  
  .vep__row-attrs {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 2px;
  }
  
  /* Badges */
  .vep__badge {
      display: inline-block;
      font-size: 11px;
      font-weight: 600;
      padding: 2px 7px;
      border-radius: 4px;
      white-space: nowrap;
  }
  
  .vep__badge--view {
      background: #EEF5FC;
      color: #0067CE;
  }
  
  .vep__badge--deal {
      background: #edf7ed;
      color: #1e5c1e;
  }
  
  /*
   * Score + price wrapper — keeps them as a paired unit so they
   * always align in the same column regardless of value widths.
   */
  .vep__row-right {
      display: flex;
      align-items: center;
      gap: 20px;
      justify-content: flex-end;
  }
  
  /* Score block */
  .vep__row-score {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
      white-space: nowrap;
      min-width: 80px;
  }
  
  .vep__row-score-val {
      font-size: 14px;
      font-weight: 700;
      
  }
  
  .vep__row-score-label {
      font-size: 11px;
      color: var(--color-80, #5a6a7a);
  }
  
  /* Price */
  .vep__row-price {
      font-size: 16px;
      font-weight: 700;
      white-space: nowrap;
      text-align: right;
      min-width: 52px;
      margin-left: auto;
  }
  
  /* CTA pill button — seats (blue) */
  .vep__row-cta {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 40px;
      padding: 0 16px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 999px;
      border: none;
      background: #e6f9fe;
      color: #0067CE;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.12s ease, color 0.12s ease;
  }
  
  .vep__row-cta:hover {
      background: #cceefa;
      color: #0056b0;
  }
  
  /* CTA pill button — deals (green) */
  .vep--deals .vep__row-cta {
      background: #e6f7e6;
      color: #2a7a2a;
  }
  
  .vep--deals .vep__row-cta:hover {
      background: #c8eec8;
      color: #1e5c1e;
  }
  
  /* --- Footer ------------------------------------------------------------------- */
  
  .vep__loaded-footer {
      padding: 11px 18px;
      border-top: 1px solid #F0F0F0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #fff;
  }
  
  .vep__view-all {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 13px;
      font-weight: 600;
      color: #0067CE;
      text-decoration: none;
  }
  
  .vep__view-all:hover {
      text-decoration: underline;
      color: #0056b0;
  }
  
  .vep__fee-note {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      color: var(--color-80, #888);
  }
  
  .vep__fee-note [data-is="icon"] {
      width: 12px;
      height: 12px;
      opacity: 0.6;
  }
  
  /* --- Animation ---------------------------------------------------------------- */
  
  @keyframes vepFadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to   { opacity: 1; transform: translateY(0); }
  }
  
  /* --- Responsive --------------------------------------------------------------- */
  
  @media (max-width: 640px) {
      /*
       * Mobile grid: photo | [location+score stacked] | price | cta
       * Two rows: location top, score inline below it.
       * Price and CTA stay in their own columns, aligned to row 1 + spanning.
       */
      .vep__row {
          grid-template-columns: 48px 1fr auto 96px;
          grid-template-rows: auto auto;
          column-gap: 12px;
          row-gap: 4px;
          align-items: start;
      }
  
      /* Photo spans both rows */
      .vep__row-photo {
          width: 48px;
          height: 36px;
          grid-column: 1;
          grid-row: 1 / 3;
          align-self: center;
      }

      .vep__row {
         grid-template-columns: 1fr auto 96px;
     }
     .vep__row-photo {
         display: none;
     }      

     
  
      /* Location: row 1, col 2 */
      .vep__row-location {
          grid-column: 2;
          grid-row: 1;
      }
  
      /*
       * Score: row 2, col 2 — inline (row) directly under location text.
       * Pull .vep__row-right apart on mobile so score sits under location.
       */
      .vep__row-right {
          display: contents; /* dissolve the wrapper on mobile */
      }
  
      .vep__row-score {
          grid-column: 2;
          grid-row: 2;
          flex-direction: row;
          align-items: baseline;
          gap: 4px;
          min-width: 0;
      }
  
      .vep__row-score-val  { font-size: 12px; }
      .vep__row-score-label { font-size: 11px; }
  
      /* Price: col 3, row 1, aligned right */
      .vep__row-price {
          grid-column: 3;
          grid-row: 1;
          font-size: 14px;
          align-self: center;
          text-align: right;
      }
  
      /* CTA: col 4, spans both rows, centered */
      .vep__row-cta {
          grid-column: 4;
          grid-row: 1 / 3;
          height: 36px;
          padding: 0 10px;
          font-size: 12px;
          align-self: center;
      }
  
      .vep__bucket-header { display: none; }



      .vep__row {
         grid-template-columns: 1fr auto 96px;
     }
     .vep__row-photo { display: none; }
     .vep__row-location { grid-column: 1; }  /* reset to col 1 */
     .vep__row-score    { grid-column: 1; }  /* same */
     .vep__row-price    { grid-column: 2; margin-top: 20px;}
     .vep__row-cta      { grid-column: 3; }

  }

  /* Ticket Modal Styles */
/*  */
/*  */

#modal-ticket {
   font-size: 16px;
 }

#modal-ticket hgroup, #modal-ticket .modal-container{
   border-radius: 12px;
}

#modal-ticket section {
   border: 0;
   box-shadow: none;
   padding: 0;
}

#modal-ticket section[data-role='hero'] figure {
   width: 100%;
   height: 100%;
}

#modal-ticket section[data-role='hero'] img{
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 8px;
}

#modal-ticket section[data-role='primary-details']{
   font-size: 24px;
}

#modal-ticket section[data-role='hero'] {
  width: 100%;
  overflow: hidden;
  border-radius: 6px;
}

#modal-ticket section[data-role='hero'] figure.caption-overlay {
  width: 100%;
  position: relative;
  background: #f1f5f8;
}

#modal-ticket section[data-role='hero'] figure.caption-overlay, #modal-ticket section[data-role='hero'] .skeleton {
   aspect-ratio: 2.4 / 1;
}

#modal-ticket section[data-role='hero'] img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  max-height: unset;
}

#modal-ticket section[data-role='hero'] figure[data-media='map'] img {
   object-fit: contain;
   scale: 1.05;
}

#modal-ticket section {
   margin: 0 !important;
   border: none !important;
   box-shadow: none !important;
   padding: 0;
}

#modal-ticket .use-omni figure{
   margin: 0;
   padding: 0;
   display: block;
}

#modal-ticket .use-omni figure figcaption {
   padding: calc(var(--spacing) * 0.5);
   color: var(--color-muted);
   font-weight: 500;
}

#modal-ticket .use-omni figure.caption-overlay{
   position: relative;
}

#modal-ticket .use-omni figure.caption-overlay figcaption{
   position: absolute;
   background: rgba(0, 0, 0, 0.6);
   color: white;
   margin: unset;
   padding: 8px;
}



#modal-ticket .use-omni figure.caption-overlay figcaption[data-position="se"]{
   bottom: 0;
   right: 0;
}


#modal-ticket figure.caption-overlay figcaption {
  position: absolute;

  width: auto;
  max-width: 70%;
  padding: 10px 18px 9px 10px;
  font-size: 0.8em;
  font-weight: 500;
  background: rgba(8,18,40,0.70);
  color: #fff;
  border-radius: 8px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.11);
}



#modal-ticket section[data-role='primary-details'] > [data-role="seats"] {
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
}


#modal-ticket section[data-role='primary-details'] span {
  font-weight: 400;
  color: #586179;
  margin-left: 0.35em;
  font-size: 1em;
}

#modal-ticket section[data-role='checkout'] select, #modal-ticket section[data-role='checkout'] span {
  width: 100%;
  padding: 12px 16px;
  border-radius: 7px;
  border: 1px solid #E5E8EF;
  background: #f7fafd;
  font-size: 1em;
  font-family: inherit;
  color: #232328;
  font-weight: 500;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  transition: border-color 0.2s;
}

#modal-ticket section[data-role='checkout'] span {
   margin-bottom: 0;
}

#modal-ticket section[data-role='checkout'] select:focus {
  border-color: #0067ce;
  outline: none;
}

#modal-ticket section[data-role='checkout'] [data-role='go-to-checkout'] {
  display: block;
  width: 100%;
  background: #0067ce;
  color: #fff;
  font-size: 1.07em;
  font-weight: 500;
  border: none;
  border-radius: 7px;
  padding: 0.92em 0;
  text-align: center;
  cursor: pointer;
  margin-bottom: 12px;
  margin-top: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  text-decoration: none;
  transition: background 0.2s;
}

#modal-ticket section[data-role='checkout'] [data-role='go-to-checkout']:hover {
  background: #005bb5;
}

#modal-ticket section[data-role='details'] {

  font-size: 1.02em;
  color: #232328;
}

#modal-ticket [data-list] {
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}

#modal-ticket [data-list] lh {
  display: flex;
  align-items: center;
  font-weight: 500;
  color: #272935;
  font-size: 1em;
  margin-bottom: 0.32em;
  letter-spacing: -0.01em;
  position: relative;
  gap: 0.4em;
}

#modal-ticket [data-list]:not([data-list='previewFeatured']) li {
  font-size: 0.95em;
  color: #586179;
  padding: 0.14em 0;
  line-height: 1.38;
  padding-left: 2em;
}

#modal-ticket .has-icon[data-icon='seats']::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.34em;
  width: 1.05em;
  height: 1.05em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M15 5v7H9V5zm0-2H9a2 2 0 0 0-2 2v9h10V5a2 2 0 0 0-2-2m7 7h-3v3h3zM5 10H2v3h3zm15 5H4v6h2v-4h12v4h2z'/%3E%3C/svg%3E") no-repeat center center;
  background-size: contain;
}

#modal-ticket .has-icon[data-icon='calendar']::before {
   content: "";
   display: inline-block;
   vertical-align: middle;
   margin-right: 0.34em;
   width: 1.05em;
   height: 1.05em;
   background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19 3h-1V1h-2v2H8V1H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.11 0 2-.89 2-2V5a2 2 0 0 0-2-2m0 16H5V9h14zm0-12H5V5h14z'/%3E%3C/svg%3E") no-repeat center center;
   background-size: contain;
}

#modal-ticket .has-icon[data-icon='more']::before {
   content: "";
   display: inline-block;
   vertical-align: middle;
   margin-right: 0.34em;
   width: 1.05em;
   height: 1.05em;
   background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 10c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2m14 0c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2m-7 0c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2'/%3E%3C/svg%3E") no-repeat center center;
   background-size: contain;
}

#modal-ticket .has-icon[data-icon='notes']::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.34em;
  width: 1.05em;
  height: 1.05em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2zm4 2h6m-6 4h6m-6 4h4'/%3E%3C/svg%3E") no-repeat center center;
  background-size: contain;
}

#modal-ticket .has-icon[data-icon='zone']::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.34em;
  width: 1.05em;
  height: 1.05em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='1.5'%3E%3Cpath d='M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10Z'/%3E%3Cpath d='M12 18a6 6 0 1 0 0-12a6 6 0 0 0 0 12Z'/%3E%3Cpath d='M12 14a2 2 0 1 0 0-4a2 2 0 0 0 0 4Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
  background-size: contain;
}

#modal-ticket .has-icon[data-icon='quantity']::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.34em;
  width: 1.14em;
  height: 1.14em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 15 15'%3E%3Cpath fill='%23000' d='M5 8.9c1.44 0 2.68.252 3.575.855C9.502 10.38 10 11.343 10 12.6a.501.501 0 0 1-1 0c0-.958-.358-1.596-.983-2.017C7.359 10.141 6.35 9.9 5 9.9s-2.36.241-3.017.684C1.358 11.005 1 11.643 1 12.601a.501.501 0 0 1-1 0c0-1.258.497-2.221 1.424-2.846C2.319 9.152 3.56 8.9 5 8.9m4.975 0c1.439 0 2.68.252 3.575.855c.927.625 1.425 1.588 1.425 2.846a.5.5 0 0 1-1 0c0-.958-.358-1.596-.984-2.017c-.518-.349-1.253-.57-2.202-.65a4.5 4.5 0 0 0-.87-1.033zM5 1.85a3.151 3.151 0 0 1 0 6.3a3.15 3.15 0 1 1 0-6.3m4.975 0a3.15 3.15 0 0 1 0 6.3c-.524 0-1.016-.13-1.45-.356a4.5 4.5 0 0 0 .534-.852a2.15 2.15 0 1 0 0-3.887a4.5 4.5 0 0 0-.535-.85a3.1 3.1 0 0 1 1.45-.355M5 2.85a2.151 2.151 0 0 0 0 4.3a2.15 2.15 0 0 0 0-4.3'/%3E%3C/svg%3E") no-repeat center center;
  background-size: contain;
}

#modal-ticket section[data-role='primary-details'] {
   display: flex;
   flex-direction: column;
   gap: 0.35em;
}

#modal-ticket section[data-role='primary-details'] [data-role="price"] {
   display: inline-flex;
   align-items: baseline;
   font-size: 18px;
   font-weight: 500;
   color: #232328;
   gap: 0.32em;
}

#modal-ticket section[data-role='primary-details'] span {
   font-size: 0.97em;
   font-weight: 400;
   color: #586179;
   margin: 0;
}

#modal-ticket main > section {
   margin-bottom: 1.5em !important;
}

#modal-ticket main > section[data-role='hero'] {
   margin-bottom: 0.8em !important;
}

#modal-ticket section[data-role='checkout'] {
   display: flex;
   align-items: center;
   gap: 14px;

   max-width: 320px;
   margin: 0 auto;
}

#modal-ticket section[data-role='checkout'] select {
   flex: 1 0 50%;
   margin-bottom: 0;
   min-width: 110px;
   max-width: 55%;
}

#modal-ticket section[data-role='checkout'] [data-role='go-to-checkout'] {
   flex: 1 0 50%;
   margin: 0;
   min-width: 96px;
   max-width: 40%;
   padding: 12px 0;
}

#modal-ticket section[data-role='details'] {
   margin-bottom: 1.1em;
}

#modal-ticket main > section:last-child {
   margin-bottom: 0 !important;
}

#modal-ticket .cmodal button.is-close{
    background: white;
    border-radius: 8px;
}

#modal-ticket button.is-close{
    top: 12px;
}

@media (max-width: 600px) {
   .cmodal#modal-ticket .modal-container {
     width: 100%;
     max-width: 100%;
     left: 0;
     top: 0;
     min-height: 100vh;
     min-height: 100dvh;
     border-radius: 0;
     transform: none;
     scrollbar-gutter: stable;
     overflow-x: hidden;
   }

   #modal-ticket section[data-role='hero'] figure.caption-overlay, #modal-ticket section[data-role='hero'] .skeleton {
      aspect-ratio: 1.6 / 1;
   }
}

#modal-ticket .has-icon[data-icon='price']::before {
   content: "";
   display: inline-block;
   vertical-align: middle;
   margin-right: 0.34em;
   width: 1.14em;
   height: 1.14em;
   background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z'/%3E%3Ccircle cx='7.5' cy='7.5' r='.5' fill='%23000'/%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
   background-size: contain;
}

#modal-ticket .has-icon[data-icon='trust-reviews']::before {
   content: "";
   display: inline-block;
   vertical-align: middle;
   margin-right: 0.34em;
   width: 1.14em;
   height: 1.14em;
   background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%230067ce' d='m16 8l1.912 3.703l4.088.594L19 15l1 4l-4-2.25L12 19l1-4l-3-2.703l4.2-.594z'/%3E%3Cpath fill='%230067ce' d='M17.736 30L16 29l4-7h6a1.997 1.997 0 0 0 2-2V8a1.997 1.997 0 0 0-2-2H6a1.997 1.997 0 0 0-2 2v12a1.997 1.997 0 0 0 2 2h9v2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4h20a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4h-4.835Z'/%3E%3C/svg%3E") no-repeat center center;
   background-size: contain;
}

#modal-ticket ul[data-list='marquee']{
   padding: 12px 24px;
   margin: 0px -24px;
   background: linear-gradient(to right, rgb(253 233 239) 0%, rgba(0, 103, 206, 0.01) 100%);
}

#modal-ticket ul[data-list='marquee'] lh, #modal-ticket ul[data-list='marquee'] li:first-of-type {
   color: var(--marqueeColor);
   font-weight: 600;
}

#modal-ticket ul[data-list='marquee'] li:first-of-type{
    margin-bottom: 1em;
}

#modal-ticket .has-icon[data-icon='marquee']::before {
   content: "";
   display: inline-block;
   vertical-align: middle;
   margin-right: 0.34em;
   width: 1.14em;
   height: 1.14em;
   background: var(--marqueeIcon);
   background-size: contain;
}

#modal-ticket hgroup .is-header{
    font-size: 0.8em;
    font-weight: normal;
    color: #586179;
}

#modal-ticket hgroup{
    line-height: 54px;
    padding-top: 0;
    padding-bottom: 0;
}

#modal-ticket section[data-role='trust']{
   background: linear-gradient(
      to right,
      rgba(0, 103, 206, 0.1) 0%,
      rgba(0, 103, 206, 0.01) 100%
    );
    padding: 12px;
    font-size: 1.02em;
    border-radius: 0 !important;
    margin-left: clamp(-24px, -3vw, -16px) !important;
    margin-right: clamp(-24px, -3vw, -16px) !important;
    padding-left: clamp(16px, 3vw, 24px);
    padding-right: clamp(16px, 3vw, 24px);
    position: relative;
}

#modal-ticket section[data-role='trust'] lh{
   color: #0067CE;
   font-weight: 500;
}

#modal-ticket section[data-role='trust'] ul{
   margin: 0;
}

#modal-ticket section[data-role='trust'] ul li{
   padding-right: 3em !important;
   font-size: 0.85em !important;
}

#modal-ticket section[data-role='trust'] .google-badge{
   position: absolute;
   bottom: 0.5em;
   right: 1.2em;
   height: 4vw;
   max-height: 2.4em;
   min-height: 1.4em;
}

#modal-ticket ul[data-list='footer']{
   text-align: right;
}

#modal-ticket ul[data-list='footer'] a{
   color: black;
}

#modal-ticket [data-role='deal']{
   font-size: 0.68em;
}

#modal-ticket [data-role='deal'] span{
   background: green;
   color: white !important;
   border-radius: 4px;
   padding: 2px 4px;
   font-size: 0.68em !important;
}

#modal-ticket [data-role='deal'] strong{
   color: green;
   font-weight: normal;
}

/* --- 2. Gallery Frame and Swiping Container --- */
#modal-ticket [data-role='gallery-frame'] {
   position: relative;
   overflow: hidden; 

}

/* 💥 EDIT: Navigation buttons are hidden by default, visible on frame hover */
#modal-ticket [data-role='gallery-frame']:hover button[data-action] {
   opacity: 1;
}

#modal-ticket [data-role='gallery-list'] {
   display: flex; 
   transition: transform 0.3s ease-in-out;
   width: 100%; 
   height: 100%; 
}

#modal-ticket [data-role='gallery-list'] figure {
   flex-shrink: 0; 
   width: 100%; 
   height: 100%; 
   margin: 0;
   position: relative;
   display: flex; 
}

#modal-ticket [data-role='gallery-list'] img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover; 
}

/* Photo Caption */
#modal-ticket [data-role='gallery-list'] figcaption {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0; 
   background: rgba(0, 0, 0, 0.6);
   color: white;
   padding: 8px 15px;
   font-size: 0.9em;
}


/* --- 3. Navigation Buttons (Hidden/Visible/Styled) --- */
#modal-ticket [data-role='gallery-frame'] button[data-action] {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   
   /* 💥 EDIT: Initial button style (White BG @ 70% opacity, Black arrow text) */
   background: rgba(255, 255, 255, 0.85); 
   color: black; 
   
   border: none;
   cursor: pointer;
   z-index: 10;
   font-size: 1.3em;
   line-height: 1;
   
   /* 💥 EDIT: Hidden by default and transition for fade effect */
   opacity: 0;
   transition: opacity 0.3s, background 0.2s; 
   
   border-radius: 50%;
   width: 32px;
   height: 32px;
}

/* 💥 EDIT: Button hover state (100% white BG) */
#modal-ticket [data-role='gallery-frame'] button[data-action]:hover {
   background: rgba(255, 255, 255, 1);
}

#modal-ticket [data-role='gallery-frame'] button[data-action='prev'] {
   left: 10px;
}

#modal-ticket [data-role='gallery-frame'] button[data-action='next'] {
   right: 10px;
}

/* --- 4. Navigation Dots (5-Dot Viewport Logic) --- */

#modal-ticket [data-role='gallery-dots-viewport'] {
   /* Set max visible width (5 dots * 16px total width per dot = 80px) */
   width: 80px; 
   height: 16px; 
   overflow: hidden; /* Clips dots outside the viewport */
   position: absolute; 
   bottom: 10px; /* Position pagination at the bottom */
   left: 50%; 
   transform: translateX(-50%); /* Centers the viewport itself */
   z-index: 10;
}

#modal-ticket [data-role='gallery-dots'] {
   display: flex;
   gap: 8px; /* Space between dots */
   position: absolute; /* Allows for X-axis positioning */
   top: 0;
   
   /* FIX: Centers the ENTIRE list of dots */
   left: 50%; 
   transform: translateX(-50%); 
   transition: transform 0.2s ease-in-out; 
}

#modal-ticket [data-role='gallery-dots'] span {
   display: block;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.6);
   cursor: pointer;
   transition: background 0.2s, transform 0.2s;
   flex-shrink: 0; 
}

#modal-ticket [data-role='gallery-dots'] span.active {
   background: white;
   transform: scale(1.2);
}

/* --- 5. Seating Chart Overlay --- */
#modal-ticket [data-role='gallery-overlay'] {
   position: absolute;
   /* EDIT: Moved slightly closer to the corner */
   bottom: 12px;
   right: 12px;
   z-index: 15; 
   opacity: 1;
   visibility: visible;
   transition: opacity 0.3s, visibility 0.3s;
   
   /* EDIT: Sizing using percentages and min/max */
   width: 16%;
   min-width: 56px;
   max-width: 84px;
}

#modal-ticket [data-role='gallery-overlay'].overlay-active {
   opacity: 0;
   visibility: hidden;
}

#modal-ticket [data-role='gallery-overlay'] [data-overlay-target] {
   display: block;
   width: 100%; 
   aspect-ratio: 1.2 / 1;
   background: #DDD;
   border-radius: 5px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
   cursor: pointer;
   overflow: hidden;
}

#modal-ticket [data-role='gallery-overlay'] [data-overlay-target] img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}


#modal-ticket [data-role='hero'] figcaption{
   top: 4px;
   left: unset;
   bottom: unset;
   right: 4px;
   border-radius: 8px;
}

#modal-ticket select{
   appearance: auto;
}

#modal-ticket.cmodal main{
   padding-inline: clamp(16px, 3vw, 24px); 
}


#more [data-pattern='card'] > [data-slot='header'] {
   font-size: 15px;
   margin-inline: -8px;
   width: calc(100% + 16px);
   margin-top: -4px;
}

#more img {
   aspect-ratio: 1.4;
}