#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);
}

/* ── Tabs: Details | Compare ─────────────────────────────────────────────── */
#modal-ticket nav[data-role='ticket-tabs'] {
   display: flex;
   gap: 4px;
   border-bottom: 1px solid #E5E8EF;
   margin-bottom: 1.1em;
}

#modal-ticket [data-role='ticket-tab'] {
   appearance: none;
   background: none;
   border: 0;
   border-bottom: 2px solid transparent;
   padding: 10px 14px;
   font: inherit;
   font-size: 0.95em;
   font-weight: 500;
   color: #586179;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   margin-bottom: -1px;
   transition: color 0.15s, border-color 0.15s;
}

#modal-ticket [data-role='ticket-tab']:hover {
   color: #232328;
}

#modal-ticket [data-role='ticket-tab'].is-active {
   color: #0067ce;
   border-bottom-color: #0067ce;
}

/* Compare tab working indicator → becomes a count pill */
#modal-ticket [data-role='compare-indicator'] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 20px;
   height: 20px;
   padding: 0 6px;
   border-radius: 10px;
   background: #eef2f7;
   color: #586179;
   font-size: 0.78em;
   font-weight: 600;
   line-height: 1;
}

#modal-ticket [data-role='compare-indicator'].is-ready {
   background: #0067ce;
   color: #fff;
}

#modal-ticket [data-role='compare-indicator'].is-zero {
   background: #eef2f7;
   color: #8a93a6;
}

/* Spinner (tab indicator + hint + panel status) */
#modal-ticket .compare-hint-spinner {
   display: inline-block;
   width: 12px;
   height: 12px;
   border: 2px solid rgba(0, 103, 206, 0.25);
   border-top-color: #0067ce;
   border-radius: 50%;
   vertical-align: -1px;
   animation: compareSpin 0.7s linear infinite;
}

@keyframes compareSpin { to { transform: rotate(360deg); } }

#modal-ticket [data-role='ticket-panel'][hidden] { display: none; }

/* ── Detail-tab "Looking for better options" hint block ──────────────────── */
#modal-ticket ul[data-list='compare-hint'] {
   padding: 12px 24px;
   margin: 0 -24px;
   background: linear-gradient(to right, rgba(0, 103, 206, 0.07) 0%, rgba(0, 103, 206, 0.01) 100%);
}

#modal-ticket ul[data-list='compare-hint'] lh {
   color: #0067ce;
   font-weight: 600;
}

#modal-ticket .has-icon[data-icon='compare']::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 24 24'%3E%3Cpath fill='none' stroke='%230067ce' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 6h13M3 6l3-3M3 6l3 3m15 9H8m13 0l-3-3m3 3l-3 3'/%3E%3C/svg%3E") no-repeat center center;
   background-size: contain;
}

#modal-ticket .compare-hint-link {
   color: #0067ce;
   font-weight: 600;
   cursor: pointer;
   font: inherit;
   font-weight: 600;
}

#modal-ticket .compare-hint-link:hover { text-decoration: underline; }

/* ── Compare panel ───────────────────────────────────────────────────────── */
#modal-ticket [data-role='compare-status'] {
   font-size: 0.95em;
   color: #586179;
   margin-bottom: 1.1em;
   line-height: 1.4;
}

#modal-ticket [data-role='compare-status'].is-none {
   background: linear-gradient(to right, rgba(16, 158, 86, 0.10) 0%, rgba(16, 158, 86, 0.01) 100%);
   color: #232328;
   padding: 14px 16px;
   border-radius: 8px;
}

#modal-ticket [data-role='compare-cards'] {
   display: grid;
   gap: 16px;
   align-items: stretch; /* every card in a row matches the tallest */
}

@media (min-width: 720px) {
   #modal-ticket [data-role='compare-cards'] {
      grid-template-columns: 1fr 1fr;
   }
}

/* ── Compare card (app-style) ────────────────────────────────────────────── */
#modal-ticket .compare-card {
   border: 1px solid #E5E8EF;
   border-radius: 12px;
   overflow: hidden;
   background: #fff;
   display: flex;
   flex-direction: column;
   height: 100%; /* fill the stretched grid cell so CTAs align at the bottom */
}

#modal-ticket .compare-card-tagrow {
   padding: 10px 12px 0;
}

#modal-ticket .compare-card-tag {
   display: inline-block;
   padding: 3px 9px;
   border-radius: 999px;
   font-size: 0.74em;
   font-weight: 600;
   letter-spacing: 0.01em;
   background: #eef2f7;
   color: #586179;
}

#modal-ticket .compare-card-tag.is-better-deal,
#modal-ticket .compare-card-tag.is-budget { background: #e3f5ec; color: #0d8a4e; }
#modal-ticket .compare-card-tag.is-better-seats { background: #e6f0fb; color: #0067ce; }
#modal-ticket .compare-card-tag.is-upgrade { background: #efe8fb; color: #6b3fd1; }
#modal-ticket .compare-card-tag.is-marquee { background: #fde9ef; color: var(--marqueeColor, #d6336c); }

#modal-ticket .compare-card-media {
   position: relative;
   width: 100%;
   margin-top: 10px;
   aspect-ratio: 1.9 / 1;
   background: #f1f5f8;
   overflow: hidden;
}

#modal-ticket .compare-card-img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: none;
   cursor: pointer;
}

#modal-ticket .compare-card-img.is-active { display: block; }
#modal-ticket .compare-card-img.is-map { object-fit: contain; }

/* Seat View / Map toggle */
#modal-ticket .compare-card-media-tabs {
   position: absolute;
   bottom: 8px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   gap: 2px;
   padding: 2px;
   border-radius: 999px;
   background: rgba(8, 18, 40, 0.6);
   z-index: 2;
}

#modal-ticket .compare-card-media-tab {
   appearance: none;
   border: 0;
   background: transparent;
   color: #fff;
   font: inherit;
   font-size: 0.74em;
   font-weight: 600;
   padding: 3px 11px;
   border-radius: 999px;
   cursor: pointer;
   line-height: 1.4;
}

#modal-ticket .compare-card-media-tab.is-active {
   background: #fff;
   color: #232328;
}

#modal-ticket .compare-card-body {
   padding: 12px;
   display: flex;
   flex-direction: column;
   gap: 6px;
   flex: 1 1 auto; /* grow so actions can pin to the bottom */
}

#modal-ticket .compare-card-deal {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 0.82em;
   font-weight: 600;
}

#modal-ticket .compare-card-deal-score {
   background: green;
   color: #fff;
   border-radius: 4px;
   padding: 1px 5px;
   font-size: 0.92em;
}

#modal-ticket .compare-card-deal-label { color: green; }

#modal-ticket .compare-card-loc {
   font-weight: 600;
   font-size: 1.02em;
   color: #232328;
   letter-spacing: -0.01em;
}

#modal-ticket .compare-card-pricerow {
   display: inline-flex;
   align-items: baseline;
   gap: 0.3em;
}

#modal-ticket .compare-card-price { font-size: 1.2em; font-weight: 600; color: #232328; }
#modal-ticket .compare-card-each { font-size: 0.85em; color: #586179; }

#modal-ticket .compare-card-score {
   font-size: 0.85em;
   color: #586179;
}

#modal-ticket .compare-card-score-val { font-weight: 600; color: #232328; }

/* vs. your ticket summary */
#modal-ticket .compare-card-summary {
   margin-top: 4px;
   padding-top: 8px;
   border-top: 1px solid #eef2f7;
   display: flex;
   flex-direction: column;
   gap: 3px;
}

#modal-ticket .compare-card-summary-title {
   font-size: 0.72em;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   color: #8a93a6;
   margin-bottom: 2px;
}

#modal-ticket .compare-card-row {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   font-size: 0.86em;
}

#modal-ticket .compare-card-row-label { color: #586179; }

#modal-ticket .compare-tone { font-weight: 600; }
#modal-ticket .compare-tone.is-great { color: #0d8a4e; }
#modal-ticket .compare-tone.is-good { color: #1f9d57; }
#modal-ticket .compare-tone.is-neutral { color: #586179; font-weight: 500; }
#modal-ticket .compare-tone.is-soft-bad { color: #b8791f; }
#modal-ticket .compare-tone.is-bad { color: #c0392b; }

#modal-ticket .compare-card-actions {
   margin-top: auto; /* pin to the bottom of the (equal-height) card */
   padding-top: 10px;
   display: flex;
   flex-direction: column;
   gap: 8px;
}

#modal-ticket .compare-card-qty select,
#modal-ticket .compare-card-qty span {
   display: block;
   width: 100%;
   padding: 9px 12px;
   border-radius: 7px;
   border: 1px solid #E5E8EF;
   background: #f7fafd;
   font: inherit;
   font-size: 0.86em;
   font-weight: 500;
   color: #232328;
   appearance: auto;
}

#modal-ticket .compare-card-qty span {
   text-align: center;
   color: #586179;
}

#modal-ticket .compare-card-btns {
   display: flex;
   gap: 8px;
}

#modal-ticket .compare-card-view,
#modal-ticket .compare-card-checkout {
   appearance: none;
   border: 1px solid #E5E8EF;
   background: #f7fafd;
   border-radius: 7px;
   padding: 9px 10px;
   font: inherit;
   font-size: 0.86em;
   font-weight: 500;
   color: #232328;
   cursor: pointer;
   flex: 1 0 0;
   transition: background 0.15s, border-color 0.15s;
}

#modal-ticket .compare-card-view:hover { background: #eef2f7; }

#modal-ticket .compare-card-checkout {
   background: #0067ce;
   border-color: #0067ce;
   color: #fff;
   flex: 1.4 0 0;
}

#modal-ticket .compare-card-checkout:hover { background: #005bb5; }