[data-component='venue-nav']{
   background: white;
   border-top: 1px solid #CCC;
   border-bottom: 1px solid #CCC;
}

[data-component='venue-nav'] ul{
   padding-top: 8px;
}

[data-component='venue-nav'] li {
    border-bottom: 3px solid white;
    text-align: center;
    padding: 12px;
    margin-right: clamp(12px, 3vw, 24px);
    display: inline-block;
    position: relative;
}

[data-component='venue-nav'] li.is-selected{
   border-bottom-color: black;
   font-weight: 500;
} 

[data-component='venue-nav'] li:hover{
   border-bottom-color: black;
}

section.hero.has-events{
   height: unset;
   max-height: unset;
   padding-top: 40px;
}

.contains-hero-events.pos-sticky{
   background: #000000cc;
   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);   
}
.contains-hero-events.pos-sticky .slider-header{
   /* color: black;
   margin-top: 8px; */
   display: none;
}
.contains-hero-events.pos-sticky .container{
   max-width: 1600px;
   padding: clamp(12px, 12px, 16px);
}

.contains-hero-events.pos-sticky .card{
   background: white;
   border: 1px solid #E5E5E5;
}

section[data-id='hero-events']{
   margin-bottom: 1.5rem;
}

section[data-id='hero-events'] .slider-header.has-navigation h2{
   line-height: 40px;
} 

.contains-hero-events.pos-sticky section[data-id='hero-events']{
   margin-bottom: 0;
}

section.hero.has-events .slider-header{
   margin-bottom: 0.5rem;;
}
section.hero.has-events .slider-header h2{
   font-size: 1.3rem;
}

.card-hero{
   width: 100%;
   border-radius: 8px;
   color:white;
   text-align: center;
   padding: 32px;
   box-sizing: border-box;
   overflow: hidden; /* Ensures the image doesn't overflow the card */
}
.card-hero.has-mask::before{
   border-radius: 12px;
}

.card-hero.skeleton{
   padding: 0;
}
.card-hero *{
   color:white;
   z-index: 10;
   position: relative;
}
.card-hero.has-mask{
   
}

.card-hero img{
   position: absolute;
   height: 100%;
   width: 100%;
   object-fit: cover;
   border-radius: 12px;
   z-index: 0;
   left: 0;
   top: 0;
   transition: transform 0.4s ease; /* Smooth transition for zoom */
}
.card-hero p{
   font-size: 0.9rem;
   line-height: 1rem;
}

.card-hero button{
   background: #0067ce;
   color: white;
   line-height: 48px;
   height: 48px;
   font-size: 16px;
   min-width: 50%;   
}


.card-hero:hover img{
   transform: scale(1.1); /* Zoom in the image */
}

.card-hero h2{
   font-weight: bold;
   margin-bottom: 1.5rem;
}

section[data-id='seat-views'] figure:hover img{
   
}

section[data-id='seat-views'] img{
   width: 100%;
   border-radius: var(--border-radius);
   height: 100%;   
}

section[data-id='seat-views'] figure , #show-more-photos{
   float:left;
   margin-right: 12px;
   width:calc(25% - 12px);
   height: 16vw;
   max-height: 120px;
   border-radius: var(--border-radius);
   position: relative;
   cursor:  pointer;
}

section[data-id='seat-views'] figure figcaption{
   padding:3px 5px;
   position:absolute;
   bottom:0;
   left:0;
   color:white !important;
   background:rgba(0,0,0,0.85) none;
   width: 100%;
   font-size: var(--fsize-d-xsmall);
   border-radius: 0 0 var(--border-radius) var(--border-radius);
   text-overflow: ellipsis;
   overflow:hidden;
   white-space: nowrap;

}

section[data-id='seat-views']  figure.link-holder{   
   background: black;
   color: white;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   font-weight: 500;  
}



.thumbnail-holder:hover img{
   opacity:0.85;
   filter:alpha(opacity = 85);
}

section[data-id='ratings'] .card[data-cdtheme='preview'] header em{
   font-size: 1.16rem;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   line-height: 1.2;
   overflow: hidden;
   text-overflow: ellipsis;

   position: relative;
   font-weight: 500;
}
section[data-id='ratings'] .card[data-cdtheme='preview'][data-id^='rating-'] header {
   height: calc(4.4rem + 16px);
}

section[data-id='ratings'] .card[data-cdtheme='preview'][data-id^='review-'] header {
   margin-bottom: 2rem;
}

.card[data-cdtheme='preview+hero'] footer .aside{
   flex-grow: 1;
   align-self: flex-start;
   font-size: x-small;
 }
 .card[data-cdtheme='preview+hero'] footer .aside strong{
    font-size: 1.28rem;
 }


 section[data-id='photos'] figure img{
    width: 100%;
    height: 24vw;
    min-height: 220px;
    object-fit: cover;
    border-radius: var(--border-radius-lg);
    max-height: 440px;
 }

 section[data-id='photos'] .swiper-button-white{
   padding: 24px;
   background-color: rgba(0, 0, 0, .6);
   border-radius: 50%;    
 }
 .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled{
    display: none;
 }

 .col-side section[data-id='city'] ul {
   display: grid;
   grid-template-columns: repeat(2, 1fr); /* Two columns */
   grid-template-rows: repeat(2, auto);   /* Two rows */
   gap: 10px; /* Optional: add space between the items */
}


.cmodal figure img{
   width: 100%;
   height: 24vw;
   min-height: 220px;
   object-fit: cover;
   border-radius: var(--border-radius-lg);
   max-height: 440px;
}





.cmodal figure img{
   border-radius: var(--border-radius);
}


.card[data-cdtheme='preview'][data-id^='review='] header  :is(h1, h2, h3, h4, h5, h6){
   white-space: unset;
   overflow: unset;
   text-overflow: unset;
}



section[data-id='guarantee'] img{
   border-radius: 4px;
}

@media (max-width: 959px) {
   .col-side section:not([data-id^='city']) {
     display: inline-block;
     vertical-align: top; /* Ensures that sections align at the top */
     width: calc(50% - 16px); /* Adjust width as needed */
     margin-right: 16px; /* Add margin between inline sections */
   }
   .col-side section{
   }
   

   section[data-id='guarantee'] img{
      max-height: 200px;
      height: 20vw;
      width: 80%;
      object-fit: cover;
   }

 }
 
 @media (max-width: 600px) {
   .col-side section {
     display: block !important;
     width: 100% !important;
     margin-right: 0 !important;
   }

   section[data-id='guarantee'] img{
      height: 200px;
      width: 80%;
      min-width: 300px;
      min-height: 144px;
   }
 }





@media (min-width: 960px) {
.col-side .wrapper{
   border: var(--border-default);
   padding: 1.5rem;
   border-radius: 8px;
   background: #f8f8f845;   
}
section[data-id='guarantee'] img{
   max-height: 144px;
   object-fit: cover;
   width: 100%;
}

.col-side section{
   margin-bottom: clamp(1.5rem, 2vw, 3.5rem);
}

}

.col-side section h3{
   font-size: 1.3rem;
}

#modal-photo .modal-container{
   max-width: 1200px;
}

#modal-photo figure img{
   height: unset;
   max-height: unset;
}


main[data-vstatus='tiered'] section[data-id='seat-views'] figure, #show-more-photos {
   width: calc(33% - 12px);
}


#show-more-photos{
   display: flex;
   align-items: center;
   justify-content: center;
}

/* Custom Ticket Display CSS */

.list-tickets {
   list-style: none; /* Remove default list bullets */
   padding: 0; /* Remove default padding */
   margin: 20px 0; /* Add some margin around the list */
}

.ticket-item {
   display: grid;
   /* Default 4 columns: column 1 (flexible), map (fixed), price (flexible), button (flexible) */
   grid-template-columns: minmax(150px, 1.5fr) 220px minmax(100px, 0.75fr) minmax(100px, 0.5fr);
   gap: 20px; /* Space between columns */
   align-items: flex-start; /* All grid items (columns) align their content to the top */
   padding: 8px 10px; /* 8px top/bottom, 10px left/right padding for the ticket item */
   border-bottom: 1px solid #f0f0f0; /* Lighter grey border-bottom */
   cursor: pointer;
   transition: background-color 0.2s ease-in-out;
   margin-top: 16px;
   min-height: 72px;
   /* Removed position: relative; as it's no longer needed for map positioning */
}

.ticket-item:hover {
   background-color: #f9f9f9; /* Light hover effect */
}

/* Column Styling */
.ticket-col {
   display: flex;
   flex-direction: column; /* Stack content vertically within columns */
   justify-content: flex-start; /* Default: content starts at the top within its flex container */
   height: 100%; /* Ensure columns fill available height in the grid row */
}

/* Specific content styling for Column 1 */
.ticket-tags {
   margin-bottom: 8px; /* Space below the tag */
}

.ticket-tag-chip {
   display: inline-block;
   background-color: #e0e0e0; /* Neutral background for the chip */
   color: #333; /* Darker text for readability */
   padding: 4px 10px;
   border-radius: 16px; /* Pill shape */
   font-size: 0.75em; /* Smaller text */
   font-weight: 500;
   text-transform: uppercase;
}

.ticket-seat-info {
   font-size: 1em; /* Standard text size */
   font-weight: bold;
   color: #333;
   margin-bottom: 4px; /* Space below seat info */
}

.ticket-quantity {
   font-size: 0.85em; /* Slightly smaller text */
   color: #666;
}

/* Column 2: Interactive Map Placeholder - Now correctly aligned within the grid */
.ticket-col-2 {
   width: 220px; /* Fixed width as requested */
   height: 100%; /* Minimum height for the placeholder box */

   display: flex; /* Use flexbox to center content */
   align-items: center; /* Center placeholder text horizontally */
   justify-content: center; /* Center placeholder text vertically within its box */
   text-align: center;
   overflow: hidden; /* Hide overflow if content is too large */
   flex-shrink: 0; /* Prevent this column from shrinking */
   margin-bottom: -8px;

   /* KEY CHANGE: Align this specific grid item to the bottom of its cell */
   align-self: flex-end;
}

.map-placeholder-text {
   font-size: 0.9em;
   color: #999;
}

/* Column 3: Price */
.ticket-col-3 {
   text-align: right; /* Right align content */
   align-items: flex-end; /* Right align price block itself */
   justify-content: flex-start; /* Align content to the top */
}

.ticket-price-main {
   font-size: 1.5em; /* Larger price font */
   font-weight: bold;
   color: #28a745; /* Green color for price, can be adjusted */
   line-height: 1.2;
}

.ticket-price-per-ticket {
   font-size: 0.8em; /* Smaller "per ticket" text */
   color: #666;
   line-height: 1.2;
}

/* Column 4: CTA Button */
.ticket-col-4 {
   text-align: right; /* Right align button */
   align-items: flex-end; /* Right align button within its column */
   justify-content: flex-start; /* Align content to the top */
}

.view-deal-button {
   background-color: #007bff; /* Primary blue button */
   color: white;
   border: none;
   padding: 12px 20px;
   border-radius: 5px;
   font-size: 1em;
   cursor: pointer;
   transition: background-color 0.2s ease-in-out;
   text-decoration: none; /* In case it's an <a> tag later */
   display: inline-block; /* For padding and alignment */
}

.view-deal-button:hover {
   background-color: #0056b3; /* Darker blue on hover */
}

/* --- Responsive Hiding (Media Queries) --- */

/* Hide map placeholder on screens less than 800px wide */
@media (max-width: 799px) {
   .ticket-col-2 {
       display: none; /* Hide the map column */
       /* No need to reset positioning as it's no longer absolutely positioned */
   }

   .ticket-item {
       /* Adjust grid for 3 columns when map is hidden */
       grid-template-columns: minmax(150px, 2fr) minmax(100px, 1fr) minmax(100px, 0.75fr);
       gap: 15px; /* Slightly reduce gap for smaller screens */
   }
}

/* Hide View Deal button on screens less than 600px wide */
@media (max-width: 599px) {
   .ticket-col-4 {
       display: none; /* Hide the button column */
   }

   .ticket-item {
       /* Adjust grid for 2 columns when button is hidden (and map is already hidden) */
       grid-template-columns: minmax(150px, 2fr) minmax(100px, 1fr); /* Column 1 and Column 3 remain */
       gap: 10px; /* Further reduce gap */
       padding: 10px 0; /* Reduce vertical padding for very small screens */
   }

   /* Adjust font sizes for even smaller screens if needed */
   .ticket-seat-info {
       font-size: 0.9em;
   }
   .ticket-quantity {
       font-size: 0.75em;
   }
   .ticket-price-main {
       font-size: 1.3em;
   }
   .ticket-price-per-ticket {
       font-size: 0.7em;
   }
}

/* --- Header Area Styles --- */

.header-area-container {
   margin-bottom: 20px; /* Space between header and ticket list */
   font-family: Arial, sans-serif; /* Example font */
   color: #333; /* Default text color */
}

.header-row {
   display: flex;
   align-items: center;
   padding: 10px 0; /* Vertical padding for rows */
}

/* Row 1: Event Info and Quantity Selector */
.header-row-top {
   gap: 20px; /* Gutter between columns */
   padding-bottom: 15px; /* More padding for separation from tabs */
}

.event-info-column {
   flex-grow: 1; /* Takes up remaining space */
   cursor: pointer;
   background-color: #f0f0f0; /* Light background for clickability */
   padding: 10px 15px;
   border-radius: 5px;
   position: relative; /* For chevron icon positioning */
   display: flex;
   flex-direction: column;
   justify-content: center;
   overflow: hidden; /* Hide overflowing text */
   white-space: nowrap; /* Prevent wrapping */
   text-overflow: ellipsis; /* Add ellipsis for overflow */
}

.event-name {
   font-size: 1.1em;
   font-weight: bold;
   margin-bottom: 2px;
   overflow: hidden;
   text-overflow: ellipsis;
}

.event-date {
   font-size: 0.9em;
   color: #666;
   overflow: hidden;
   text-overflow: ellipsis;
}

/* Chevron Icons */
.chevron-icon {
   width: 20px;
   height: 20px;
   position: absolute;
   right: 10px;
   top: 50%;
   transform: translateY(-50%);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   pointer-events: none; /* Allows clicks to pass through to parent */
}

.event-chevron {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9l6 6l6-6'/%3E%3C/svg%3E");
   /* Changed stroke to #333 for visibility on light background */
}

/* Quantity Selector */
.quantity-selection-container {
   position: relative; /* For dropdown positioning */
   min-width: 120px;
   max-width: 160px; /* Max width as per request */
   flex-shrink: 0; /* Prevent from shrinking too much */
   flex-grow: 0; /* Don't allow it to grow beyond its max-width */
   width: 25%; /* Start with a percentage, adjust as needed with media queries */
}

.quantity-selector-display {
   background-color: #f0f0f0; /* Light background for clickability */
   padding: 10px 15px;
   border-radius: 5px;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.quantity-display-text {
   font-size: 1em;
   font-weight: bold;
   color: #333;
}

.quantity-chevron {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9l6 6l6-6'/%3E%3C/svg%3E");
   position: static; /* Override absolute positioning from general .chevron-icon */
   transform: none; /* Override transform */
   margin-left: 10px;
}

.quantity-selector-dropdown {
   position: absolute;
   top: 100%; /* Below the display */
   left: 0;
   right: 0;
   background-color: #fff;
   border: 1px solid #ccc;
   border-radius: 5px;
   z-index: 100; /* Ensure it's above other content */
   box-shadow: 0 4px 8px rgba(0,0,0,0.1);
   max-height: 200px; /* Limit height for scrollability */
   overflow-y: auto;
   display: none; /* Hidden by default */
}

.quantity-selector-dropdown.is-visible {
   display: block; /* Show when 'is-visible' class is added */
}

.quantity-option {
   padding: 10px 15px;
   cursor: pointer;
   font-size: 1em;
   color: #333;
}

.quantity-option:hover {
   background-color: #f0f0f0;
}

/* Row 2: Tabbed Bar */
.tabbed-bar {
   border-bottom: 1px solid #e5e5e5;
   padding-top: 5px; /* Adjust padding to look good with border */
   padding-bottom: 0; /* Remove bottom padding as border serves as separator */
}

.tab-option {
   padding: 10px 20px;
   cursor: pointer;
   font-size: 1em;
   color: #666;
   border-bottom: 2px solid transparent; /* Default transparent border */
   transition: all 0.2s ease-in-out;
   margin-bottom: -1px; /* Overlap border with container's border-bottom */
}

.tab-option:hover {
   color: #333;
   background-color: #f9f9f9;
}

.tab-option.is-selected {
   font-weight: bold;
   color: #000;
   border-bottom-color: #000; /* Black bottom border when selected */
}

/* Row 3: Listings Count and Fees Info */
.listings-info-row {
   justify-content: space-between; /* Pushes content to ends */
   font-size: 0.9em;
   color: #666;
   padding-top: 15px; /* More padding for separation from tabs */
}

.listings-count {
   font-weight: bold;
   color: #333;
}

.prices-info {
   display: flex;
   align-items: center;
   gap: 5px;
}

.tag-icon {
   width: 20px;
   height: 16px; /* Adjust height to match SVG aspect ratio */
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath fill='%23666' d='M19.25 0h-6c-.412 0-.989.239-1.28.53L4.531 7.969a.75.75 0 0 0 0 1.061l6.439 6.439a.75.75 0 0 0 1.061 0L19.47 8.03c.292-.292.53-.868.53-1.28v-6a.75.75 0 0 0-.75-.75M15.5 6a1.5 1.5 0 1 1 .001-3.001A1.5 1.5 0 0 1 15.5 6'/%3E%3Cpath fill='%23666' d='M2 8.5L10.5 0H9.25c-.412 0-.989.239-1.28.53L.531 7.969a.75.75 0 0 0 0 1.061l6.439 6.439a.75.75 0 0 0 1.061 0l.47-.47z'/%3E%3C/svg%3E");
   /* Changed fill to #666 for visibility */
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
}

/* --- Responsive Adjustments (Optional, but good practice) --- */
@media (max-width: 768px) {
   .header-row-top {
       flex-direction: column; /* Stack event info and quantity vertically */
       align-items: stretch; /* Stretch to full width */
   }

   .event-info-column,
   .quantity-selection-container {
       width: 100%; /* Take full width */
       max-width: none; /* Override max-width */
       margin-bottom: 10px; /* Space between stacked elements */
   }

   .quantity-selection-container {
       margin-bottom: 0; /* No extra margin if it's the last in the column */
   }

   .tab-option {
       padding: 10px 10px; /* Reduce tab padding */
       font-size: 0.95em;
   }

   .listings-info-row {
       flex-direction: column;
       align-items: flex-start;
       gap: 5px;
   }
}





/* NEW BELOW */


section.hero{
   height: 12vw;
   min-height: 120px;
   max-height: 180px;
}


section[data-id='ticket-picks']{
   background: black;
   color: white;
   border-radius: 8px;
}

section[data-id='ticket-picks'] button{
   color: black;
   background: #8BF8FE;
}

section[data-id='ticket-picks'] p{
   color: white;
}

section[data-id='ticket-picks'] img{
   height: 90px;
}[data-component='venue-nav']{
   background: white;
   border-top: 1px solid #CCC;
   border-bottom: 1px solid #CCC;
}

[data-component='venue-nav'] ul{
   padding-top: 8px;
}

[data-component='venue-nav'] li {
    border-bottom: 3px solid white;
    text-align: center;
    padding: 12px;
    margin-right: clamp(12px, 3vw, 24px);
    display: inline-block;
    position: relative;
}

[data-component='venue-nav'] li.is-selected{
   border-bottom-color: black;
   font-weight: 500;
} 

[data-component='venue-nav'] li:hover{
   border-bottom-color: black;
}

section.hero.has-events{
   height: unset;
   max-height: unset;
   padding-top: 40px;
}

.contains-hero-events.pos-sticky{
   background: #000000cc;
   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);   
}
.contains-hero-events.pos-sticky .slider-header{
   /* color: black;
   margin-top: 8px; */
   display: none;
}
.contains-hero-events.pos-sticky .container{
   max-width: 1600px;
   padding: clamp(12px, 12px, 16px);
}

.contains-hero-events.pos-sticky .card{
   background: white;
   border: 1px solid #E5E5E5;
}

section[data-id='hero-events']{
   margin-bottom: 1.5rem;
}

section[data-id='hero-events'] .slider-header.has-navigation h2{
   line-height: 40px;
} 

.contains-hero-events.pos-sticky section[data-id='hero-events']{
   margin-bottom: 0;
}

section.hero.has-events .slider-header{
   margin-bottom: 0.5rem;;
}
section.hero.has-events .slider-header h2{
   font-size: 1.3rem;
}

.card-hero{
   width: 100%;
   border-radius: 8px;
   color:white;
   text-align: center;
   padding: 32px;
   box-sizing: border-box;
   overflow: hidden; /* Ensures the image doesn't overflow the card */
}
.card-hero.has-mask::before{
   border-radius: 12px;
}

.card-hero.skeleton{
   padding: 0;
}
.card-hero *{
   color:white;
   z-index: 10;
   position: relative;
}
.card-hero.has-mask{
   
}

.card-hero img{
   position: absolute;
   height: 100%;
   width: 100%;
   object-fit: cover;
   border-radius: 12px;
   z-index: 0;
   left: 0;
   top: 0;
   transition: transform 0.4s ease; /* Smooth transition for zoom */
}
.card-hero p{
   font-size: 0.9rem;
   line-height: 1rem;
}

.card-hero button{
   background: #0067ce;
   color: white;
   line-height: 48px;
   height: 48px;
   font-size: 16px;
   min-width: 50%;   
}


.card-hero:hover img{
   transform: scale(1.1); /* Zoom in the image */
}

.card-hero h2{
   font-weight: bold;
   margin-bottom: 1.5rem;
}

section[data-id='seat-views'] figure:hover img{
   
}

section[data-id='seat-views'] img{
   width: 100%;
   border-radius: var(--border-radius);
   height: 100%;   
}

section[data-id='seat-views'] figure , #show-more-photos{
   float:left;
   margin-right: 12px;
   width:calc(25% - 12px);
   height: 16vw;
   max-height: 120px;
   border-radius: var(--border-radius);
   position: relative;
   cursor:  pointer;
}

section[data-id='seat-views'] figure figcaption{
   padding:3px 5px;
   position:absolute;
   bottom:0;
   left:0;
   color:white !important;
   background:rgba(0,0,0,0.85) none;
   width: 100%;
   font-size: var(--fsize-d-xsmall);
   border-radius: 0 0 var(--border-radius) var(--border-radius);
   text-overflow: ellipsis;
   overflow:hidden;
   white-space: nowrap;

}

section[data-id='seat-views']  figure.link-holder{   
   background: black;
   color: white;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   font-weight: 500;  
}



.thumbnail-holder:hover img{
   opacity:0.85;
   filter:alpha(opacity = 85);
}

section[data-id='ratings'] .card[data-cdtheme='preview'] header em{
   font-size: 1.16rem;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   line-height: 1.2;
   overflow: hidden;
   text-overflow: ellipsis;

   position: relative;
   font-weight: 500;
}
section[data-id='ratings'] .card[data-cdtheme='preview'][data-id^='rating-'] header {
   height: calc(4.4rem + 16px);
}

section[data-id='ratings'] .card[data-cdtheme='preview'][data-id^='review-'] header {
   margin-bottom: 2rem;
}

.card[data-cdtheme='preview+hero'] footer .aside{
   flex-grow: 1;
   align-self: flex-start;
   font-size: x-small;
 }
 .card[data-cdtheme='preview+hero'] footer .aside strong{
    font-size: 1.28rem;
 }


 section[data-id='photos'] figure img{
    width: 100%;
    height: 24vw;
    min-height: 220px;
    object-fit: cover;
    border-radius: var(--border-radius-lg);
    max-height: 440px;
 }

 section[data-id='photos'] .swiper-button-white{
   padding: 24px;
   background-color: rgba(0, 0, 0, .6);
   border-radius: 50%;    
 }
 .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled{
    display: none;
 }

 .col-side section[data-id='city'] ul {
   display: grid;
   grid-template-columns: repeat(2, 1fr); /* Two columns */
   grid-template-rows: repeat(2, auto);   /* Two rows */
   gap: 10px; /* Optional: add space between the items */
}


.cmodal figure img{
   width: 100%;
   height: 24vw;
   min-height: 220px;
   object-fit: cover;
   border-radius: var(--border-radius-lg);
   max-height: 440px;
}





.cmodal figure img{
   border-radius: var(--border-radius);
}


.card[data-cdtheme='preview'][data-id^='review='] header  :is(h1, h2, h3, h4, h5, h6){
   white-space: unset;
   overflow: unset;
   text-overflow: unset;
}



section[data-id='guarantee'] img{
   border-radius: 4px;
}

@media (max-width: 959px) {
   .col-side section:not([data-id^='city']) {
     display: inline-block;
     vertical-align: top; /* Ensures that sections align at the top */
     width: calc(50% - 16px); /* Adjust width as needed */
     margin-right: 16px; /* Add margin between inline sections */
   }
   .col-side section{
   }
   

   section[data-id='guarantee'] img{
      max-height: 200px;
      height: 20vw;
      width: 80%;
      object-fit: cover;
   }

 }
 
 @media (max-width: 600px) {
   .col-side section {
     display: block !important;
     width: 100% !important;
     margin-right: 0 !important;
   }

   section[data-id='guarantee'] img{
      height: 200px;
      width: 80%;
      min-width: 300px;
      min-height: 144px;
   }
 }





@media (min-width: 960px) {
.col-side .wrapper{
   border: var(--border-default);
   padding: 1.5rem;
   border-radius: 8px;
   background: #f8f8f845;   
}
section[data-id='guarantee'] img{
   max-height: 144px;
   object-fit: cover;
   width: 100%;
}

.col-side section{
   margin-bottom: clamp(1.5rem, 2vw, 3.5rem);
}

}

.col-side section h3{
   font-size: 1.3rem;
}

#modal-photo .modal-container{
   max-width: 1200px;
}

#modal-photo figure img{
   height: unset;
   max-height: unset;
}


main[data-vstatus='tiered'] section[data-id='seat-views'] figure, #show-more-photos {
   width: calc(33% - 12px);
}


#show-more-photos{
   display: flex;
   align-items: center;
   justify-content: center;
}

/* Custom Ticket Display CSS */

.list-tickets {
   list-style: none; /* Remove default list bullets */
   padding: 0; /* Remove default padding */
   margin: 20px 0; /* Add some margin around the list */
}

.ticket-item {
   display: grid;
   /* Default 4 columns: column 1 (flexible), map (fixed), price (flexible), button (flexible) */
   grid-template-columns: minmax(150px, 1.5fr) 220px minmax(100px, 0.75fr) minmax(100px, 0.5fr);
   gap: 20px; /* Space between columns */
   align-items: flex-start; /* All grid items (columns) align their content to the top */
   padding: 8px 10px; /* 8px top/bottom, 10px left/right padding for the ticket item */
   border-bottom: 1px solid #f0f0f0; /* Lighter grey border-bottom */
   cursor: pointer;
   transition: background-color 0.2s ease-in-out;
   margin-top: 16px;
   min-height: 72px;
   /* Removed position: relative; as it's no longer needed for map positioning */
}

.ticket-item:hover {
   background-color: #f9f9f9; /* Light hover effect */
}

/* Column Styling */
.ticket-col {
   display: flex;
   flex-direction: column; /* Stack content vertically within columns */
   justify-content: flex-start; /* Default: content starts at the top within its flex container */
   height: 100%; /* Ensure columns fill available height in the grid row */
}

/* Specific content styling for Column 1 */
.ticket-tags {
   margin-bottom: 8px; /* Space below the tag */
}

.ticket-tag-chip {
   display: inline-block;
   background-color: #e0e0e0; /* Neutral background for the chip */
   color: #333; /* Darker text for readability */
   padding: 4px 10px;
   border-radius: 16px; /* Pill shape */
   font-size: 0.75em; /* Smaller text */
   font-weight: 500;
   text-transform: uppercase;
}

.ticket-seat-info {
   font-size: 1em; /* Standard text size */
   font-weight: bold;
   color: #333;
   margin-bottom: 4px; /* Space below seat info */
}

.ticket-quantity {
   font-size: 0.85em; /* Slightly smaller text */
   color: #666;
}

/* Column 2: Interactive Map Placeholder - Now correctly aligned within the grid */
.ticket-col-2 {
   width: 220px; /* Fixed width as requested */
   height: 100%; /* Minimum height for the placeholder box */

   display: flex; /* Use flexbox to center content */
   align-items: center; /* Center placeholder text horizontally */
   justify-content: center; /* Center placeholder text vertically within its box */
   text-align: center;
   overflow: hidden; /* Hide overflow if content is too large */
   flex-shrink: 0; /* Prevent this column from shrinking */
   margin-bottom: -8px;

   /* KEY CHANGE: Align this specific grid item to the bottom of its cell */
   align-self: flex-end;
}

.map-placeholder-text {
   font-size: 0.9em;
   color: #999;
}

/* Column 3: Price */
.ticket-col-3 {
   text-align: right; /* Right align content */
   align-items: flex-end; /* Right align price block itself */
   justify-content: flex-start; /* Align content to the top */
}

.ticket-price-main {
   font-size: 1.5em; /* Larger price font */
   font-weight: bold;
   color: #28a745; /* Green color for price, can be adjusted */
   line-height: 1.2;
}

.ticket-price-per-ticket {
   font-size: 0.8em; /* Smaller "per ticket" text */
   color: #666;
   line-height: 1.2;
}

/* Column 4: CTA Button */
.ticket-col-4 {
   text-align: right; /* Right align button */
   align-items: flex-end; /* Right align button within its column */
   justify-content: flex-start; /* Align content to the top */
}

.view-deal-button {
   background-color: #007bff; /* Primary blue button */
   color: white;
   border: none;
   padding: 12px 20px;
   border-radius: 5px;
   font-size: 1em;
   cursor: pointer;
   transition: background-color 0.2s ease-in-out;
   text-decoration: none; /* In case it's an <a> tag later */
   display: inline-block; /* For padding and alignment */
}

.view-deal-button:hover {
   background-color: #0056b3; /* Darker blue on hover */
}

/* --- Responsive Hiding (Media Queries) --- */

/* Hide map placeholder on screens less than 800px wide */
@media (max-width: 799px) {
   .ticket-col-2 {
       display: none; /* Hide the map column */
       /* No need to reset positioning as it's no longer absolutely positioned */
   }

   .ticket-item {
       /* Adjust grid for 3 columns when map is hidden */
       grid-template-columns: minmax(150px, 2fr) minmax(100px, 1fr) minmax(100px, 0.75fr);
       gap: 15px; /* Slightly reduce gap for smaller screens */
   }
}

/* Hide View Deal button on screens less than 600px wide */
@media (max-width: 599px) {
   .ticket-col-4 {
       display: none; /* Hide the button column */
   }

   .ticket-item {
       /* Adjust grid for 2 columns when button is hidden (and map is already hidden) */
       grid-template-columns: minmax(150px, 2fr) minmax(100px, 1fr); /* Column 1 and Column 3 remain */
       gap: 10px; /* Further reduce gap */
       padding: 10px 0; /* Reduce vertical padding for very small screens */
   }

   /* Adjust font sizes for even smaller screens if needed */
   .ticket-seat-info {
       font-size: 0.9em;
   }
   .ticket-quantity {
       font-size: 0.75em;
   }
   .ticket-price-main {
       font-size: 1.3em;
   }
   .ticket-price-per-ticket {
       font-size: 0.7em;
   }
}

/* --- Header Area Styles --- */

.header-area-container {
   margin-bottom: 20px; /* Space between header and ticket list */
   font-family: Arial, sans-serif; /* Example font */
   color: #333; /* Default text color */
}

.header-row {
   display: flex;
   align-items: center;
   padding: 10px 0; /* Vertical padding for rows */
}

/* Row 1: Event Info and Quantity Selector */
.header-row-top {
   gap: 20px; /* Gutter between columns */
   padding-bottom: 15px; /* More padding for separation from tabs */
}

.event-info-column {
   flex-grow: 1; /* Takes up remaining space */
   cursor: pointer;
   background-color: #f0f0f0; /* Light background for clickability */
   padding: 10px 15px;
   border-radius: 5px;
   position: relative; /* For chevron icon positioning */
   display: flex;
   flex-direction: column;
   justify-content: center;
   overflow: hidden; /* Hide overflowing text */
   white-space: nowrap; /* Prevent wrapping */
   text-overflow: ellipsis; /* Add ellipsis for overflow */
}

.event-name {
   font-size: 1.1em;
   font-weight: bold;
   margin-bottom: 2px;
   overflow: hidden;
   text-overflow: ellipsis;
}

.event-date {
   font-size: 0.9em;
   color: #666;
   overflow: hidden;
   text-overflow: ellipsis;
}

/* Chevron Icons */
.chevron-icon {
   width: 20px;
   height: 20px;
   position: absolute;
   right: 10px;
   top: 50%;
   transform: translateY(-50%);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   pointer-events: none; /* Allows clicks to pass through to parent */
}

.event-chevron {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9l6 6l6-6'/%3E%3C/svg%3E");
   /* Changed stroke to #333 for visibility on light background */
}

/* Quantity Selector */
.quantity-selection-container {
   position: relative; /* For dropdown positioning */
   min-width: 120px;
   max-width: 160px; /* Max width as per request */
   flex-shrink: 0; /* Prevent from shrinking too much */
   flex-grow: 0; /* Don't allow it to grow beyond its max-width */
   width: 25%; /* Start with a percentage, adjust as needed with media queries */
}

.quantity-selector-display {
   background-color: #f0f0f0; /* Light background for clickability */
   padding: 10px 15px;
   border-radius: 5px;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.quantity-display-text {
   font-size: 1em;
   font-weight: bold;
   color: #333;
}

.quantity-chevron {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9l6 6l6-6'/%3E%3C/svg%3E");
   position: static; /* Override absolute positioning from general .chevron-icon */
   transform: none; /* Override transform */
   margin-left: 10px;
}

.quantity-selector-dropdown {
   position: absolute;
   top: 100%; /* Below the display */
   left: 0;
   right: 0;
   background-color: #fff;
   border: 1px solid #ccc;
   border-radius: 5px;
   z-index: 100; /* Ensure it's above other content */
   box-shadow: 0 4px 8px rgba(0,0,0,0.1);
   max-height: 200px; /* Limit height for scrollability */
   overflow-y: auto;
   display: none; /* Hidden by default */
}

.quantity-selector-dropdown.is-visible {
   display: block; /* Show when 'is-visible' class is added */
}

.quantity-option {
   padding: 10px 15px;
   cursor: pointer;
   font-size: 1em;
   color: #333;
}

.quantity-option:hover {
   background-color: #f0f0f0;
}

/* Row 2: Tabbed Bar */
.tabbed-bar {
   border-bottom: 1px solid #e5e5e5;
   padding-top: 5px; /* Adjust padding to look good with border */
   padding-bottom: 0; /* Remove bottom padding as border serves as separator */
}

.tab-option {
   padding: 10px 20px;
   cursor: pointer;
   font-size: 1em;
   color: #666;
   border-bottom: 2px solid transparent; /* Default transparent border */
   transition: all 0.2s ease-in-out;
   margin-bottom: -1px; /* Overlap border with container's border-bottom */
}

.tab-option:hover {
   color: #333;
   background-color: #f9f9f9;
}

.tab-option.is-selected {
   font-weight: bold;
   color: #000;
   border-bottom-color: #000; /* Black bottom border when selected */
}

/* Row 3: Listings Count and Fees Info */
.listings-info-row {
   justify-content: space-between; /* Pushes content to ends */
   font-size: 0.9em;
   color: #666;
   padding-top: 15px; /* More padding for separation from tabs */
}

.listings-count {
   font-weight: bold;
   color: #333;
}

.prices-info {
   display: flex;
   align-items: center;
   gap: 5px;
}

.tag-icon {
   width: 20px;
   height: 16px; /* Adjust height to match SVG aspect ratio */
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath fill='%23666' d='M19.25 0h-6c-.412 0-.989.239-1.28.53L4.531 7.969a.75.75 0 0 0 0 1.061l6.439 6.439a.75.75 0 0 0 1.061 0L19.47 8.03c.292-.292.53-.868.53-1.28v-6a.75.75 0 0 0-.75-.75M15.5 6a1.5 1.5 0 1 1 .001-3.001A1.5 1.5 0 0 1 15.5 6'/%3E%3Cpath fill='%23666' d='M2 8.5L10.5 0H9.25c-.412 0-.989.239-1.28.53L.531 7.969a.75.75 0 0 0 0 1.061l6.439 6.439a.75.75 0 0 0 1.061 0l.47-.47z'/%3E%3C/svg%3E");
   /* Changed fill to #666 for visibility */
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
}

/* --- Responsive Adjustments (Optional, but good practice) --- */
@media (max-width: 768px) {
   .header-row-top {
       flex-direction: column; /* Stack event info and quantity vertically */
       align-items: stretch; /* Stretch to full width */
   }

   .event-info-column,
   .quantity-selection-container {
       width: 100%; /* Take full width */
       max-width: none; /* Override max-width */
       margin-bottom: 10px; /* Space between stacked elements */
   }

   .quantity-selection-container {
       margin-bottom: 0; /* No extra margin if it's the last in the column */
   }

   .tab-option {
       padding: 10px 10px; /* Reduce tab padding */
       font-size: 0.95em;
   }

   .listings-info-row {
       flex-direction: column;
       align-items: flex-start;
       gap: 5px;
   }
}