/* Main Widget Container */
.tkt-widget {
   position: relative;
   width: 100%;
   overflow: hidden; /* Hides the slide-out view */
   font-family: 'Inter', Arial, sans-serif;
   background: #fff;
 }
 
 /* The Slider Wrapper (Holds both views side-by-side) */
 .tkt-slider {
   display: flex;
   width: 200%; /* 2 views = 200% width */
   transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 

.tkt-view-header{
   margin-bottom: 0.5rem;
   font-size: 0.8rem;   
}

 /* Individual View Panes */
 .tkt-view {
   width: 50%;
   box-sizing: border-box;
   padding: 20px;
 }
 
 /* List Item Styles */
 .tkt-item {
   border: 1px solid #e5e7eb;
   border-radius: 8px;
   padding: 16px;
   margin-bottom: 12px;
   cursor: pointer;
   transition: box-shadow 0.2s ease, border-color 0.2s ease;
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
 }
 
 
 .tkt-item:hover {
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
   border-color: #d1d5db;
 }
 
 .tkt-headline {
   font-size: 16px;
   font-weight: 600;
   color: #111;
   margin-bottom: 4px;
 }
 
 .tkt-price {
   color: #16a34a; /* Green */
   font-size: 15px;
   
 }
 
 .tkt-features {
   list-style: none;
   padding: 0;
   margin: 0;
   font-size: 13px;
   color: #6b7280;
   margin-top: 1rem;
 }
 
 .tkt-features li {
   display: flex;
   align-items: center;
   margin-bottom: 2px;
 }
 
 .tkt-features li::before {
   content: "✓";
   color: #16a34a;
   margin-right: 6px;
   font-weight: bold;
   margin-bottom: auto;
 }
 
 .tkt-availability {
   font-size: 13px;
   color: #6b7280;
   white-space: nowrap;
   margin-left: 12px;
 }
 
 /* Detail View Styles */
 .tkt-detail-header {
   display: flex;
   align-items: center;
   margin-bottom: 20px;
   border-bottom: 1px solid #eee;
   padding-bottom: 10px;
 }
 
 .tkt-back-btn {
   background: none;
   border: none;
   font-size: 14px;
   cursor: pointer;
   padding: 0;
   opacity: 0.7;

 }
 .tkt-back-btn:hover{
    box-shadow: none;
    font-weight: bold;
    opacity: 1;
 }
 
 .tkt-detail-title {
   font-size: 18px;
   font-weight: 700;
   margin: 0;
 }
 
 .tkt-empty-state {
   text-align: center;
   padding: 40px;
   color: #9ca3af;
   font-style: italic;
   background: #f9fafb;
   border-radius: 8px;
 }



/* Unavailable Item Styling */
.tkt-item.unavailable {
   background-color: #f9fafb;
   border-color: #eee;
   color: #9ca3af;
   cursor: default;
}

.tkt-item.unavailable .tkt-headline {
   color: #9ca3af; /* Grey out headline */
}

.tkt-item.unavailable .tkt-features li::before {
   content: "X"; /* Change checkmark to warning or nothing */
   color: #d1d5db;
   margin-right: 8px;
}

.tkt-item.unavailable .tkt-features li {
   font-style: italic;
   color: #999; /* Red text for the warning note */
}



.ticket-results {
   width: 100%;
   min-height: 200px; /* specific height so it doesn't collapse if empty */
   /* The TicketList library will likely style the internals */
 }



 ul.list-themed-tickets:not([data-theme='enhanced']) li[data-role='ticket']{
   position: relative;
   padding: 8px;
   border: 1px solid #E5E5E5;
   margin-bottom: 16px;
   border-radius: 4px;
   height: 96px;
   cursor: pointer;
   background: white;
   container-type: inline-size; /* allows children to query its width */
   container-name: themeTicket;
}
ul.list-themed-tickets:not([data-theme='enhanced']) li[data-role='ticket'] *{
   line-height: 1 !important;
}
ul.list-themed-tickets:not([data-theme='enhanced']) li[data-role='ticket']:hover{
   background: #eff5fc;
   transition: background 0.2s;
   border-color: #E6F0FA;
}


ul.list-themed-tickets:not([data-theme='enhanced']) li[data-role='ticket'] [data-role='details']{
   width: 40%;   
}

ul.list-themed-tickets:not([data-theme='enhanced']) li[data-role='ticket'] [data-role='headline']{
   color: green;
   font-weight: 500;
   font-size: 11px;
   margin-bottom: 8px;
}

ul.list-themed-tickets:not([data-theme='enhanced']) li[data-role='ticket'] [data-role='section']{
   font-size: 15px;
   font-weight: 500;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;   
   margin-bottom: 4px;
}

ul.list-themed-tickets:not([data-theme='enhanced']) li[data-role='ticket'] [data-role='seats']{
   color: #222;
   margin-bottom: 12px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: 13px;   
}

ul.list-themed-tickets:not([data-theme='enhanced']) li[data-role='ticket'] ul[data-role='features']{
   
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
      
   margin-bottom: 0;;
}

ul.list-themed-tickets:not([data-theme='enhanced']) li[data-role='ticket'] [data-role='features'] li{
   margin-bottom: 4px;
   font-size: 13px;
   color: #222;
   padding-left: 1.5em; /* space for the icon */
   position: relative;
   
}


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

.has-icon[data-icon='arrow-left']{
   padding-left: 44px;
   position:relative;
}
.has-icon[data-icon='arrow-left']::before{
   content: "";
   position: absolute;
   top: 50%;
   left: 8px;
   transform: translateY(-50%);
   width: 24px;
   height: 24px;
   background: currentColor;
   mask: 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='M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42a.996.996 0 0 0-1.41 0l-6.59 6.59a.996.996 0 0 0 0 1.41l6.59 6.59a.996.996 0 1 0 1.41-1.41L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1'/%3E%3C/svg%3E");
   -webkit-mask: 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='M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42a.996.996 0 0 0-1.41 0l-6.59 6.59a.996.996 0 0 0 0 1.41l6.59 6.59a.996.996 0 1 0 1.41-1.41L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1'/%3E%3C/svg%3E");
}


ul.list-themed-tickets:not([data-theme='enhanced']) li[data-role='ticket'] [data-role='location']{
   height: 100%;
   width: 32%;
   left: 44%;
   overflow: hidden;
   top: 0;
   position: absolute;  
  
}


ul.list-themed-tickets:not([data-theme='enhanced']) li[data-role='ticket'] [data-role='location'] img{
   height: 100%;
   width: 100%;
   object-fit: contain !important;
   scale: 2 !important;   
}


ul.list-themed-tickets:not([data-theme='enhanced']) li[data-role='ticket'] [data-role='price']{
   position: absolute;
   font-weight: bold;
   font-size: 18px;
   top: 50%;
   transform:translateY(-50%);
   right: 116px;   
}
ul.list-themed-tickets:not([data-theme='enhanced']) li[data-role='ticket'] [data-role='price'] span{
   font-size: 10px;
   font-weight: normal;
}


ul.list-themed-tickets:not([data-theme='enhanced']) [data-role='price']:after {
   content: "per ticket";
   font-size: 10px;
   font-weight: normal;
   top: 0;
   left: 0;
   display: block;
   text-align: center;
}


ul.list-themed-tickets:not([data-theme='enhanced']) li[data-role='ticket'] button[data-role='action']{
   background: #0067CE;
   height: 32px;
   line-height: 32px;
   position: absolute;
   right: 0;
   color: white;
   border-radius: 16px;
   top: 50%;
   transform:translateY(-50%);
   right: 12px;   
}





@container themeTicket (max-width: 600px) {
   [data-role='details']{
      width: calc(100% - 120px) !important;
   }     
   [data-role='location']{
      top: 0;
      right:0;
      left: unset !important;
      height: 56px !important;
      width: 108px !important;
      background: #F8F8F8;
      border-radius: 0 4px 0 4px;       
   }
   [data-role='action']{
      display: none;
   }
   [data-role='price']{
      bottom: 0;
      right: 8px !important;
      top: unset !important;
   }
   [data-role='price']:after {
      content: "/ea" !important;
      display: unset !important;
      right: 18px !important;
   }      
    
}


.ticket-table {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
   background-color: #ffffff;
}

.ticket-table th, 
.ticket-table td {
   padding: 0.75rem 0.25rem;
   border-bottom: 1px solid #e5e7eb;
   text-align: left;
   vertical-align: top;
}

.ticket-table th {
   font-weight: normal;
   color: #1f2937;
   font-size: 0.6rem;
}


.ticket-table tbody tr:last-child td { border-bottom: none; }


/* Table Body Styling */
.ticket-row {
   cursor: pointer;
   transition: background-color 0.15s ease;
}
.ticket-row:hover {
   background-color: #f9fafb;
}

/* Column Specific Styling */
.details-col [data-role="headline"] {
   font-size: 11px;
   margin-bottom: 8px;
   color: green;
   font-weight: 500;
}

.details-col [data-role="headline"] span {
   background-color: #008a00;
   color: white;
   font-weight: 700;
   padding: 2px 6px;
   border-radius: 4px;
   font-size: 11px;
}

.details-col [data-role="section"] {
   font-weight: 500;
   font-size: 1rem;
   color: #111827;
   margin-bottom: 0.3rem;
}
.details-col [data-role="seats"] {
   color: #757575;
   font-size: 12px;
}
.details-col [data-role="features"] {
   list-style: none;
   padding: 0;
   display: flex;
   gap: 0.75rem;
   font-size: 0.75rem;
   color: #6b7280;
   margin-bottom: 0.5rem;   
}

.details-col [data-role="features"] li{
   background-color: #eef6fc;
   color: #1a6fb0;
   padding: 4px 8px;
   border-radius: 4px;   
}



.price-col {
   font-weight: 700;
   font-size: 1.1rem;
   color: #0067CE; /* Blue for Price */
   white-space: nowrap;
   width: 1px; /* Keep price column tight */
}
.price-col span {
   font-size: 0.75rem;
   font-weight: 400;
   color: #6b7280;
}


td.price-col {
   vertical-align: middle;
   line-height: 28px;
}

/* Action Button Styling - Mobile Default */
td.action-col {
   width: 16px; /* Keep action column tight */
   vertical-align: middle;
}

.action-col button {
   /* Button should have a greater than sign as content by default and appear very close to the price column */
   color: #0067CE;
   padding: 0;
   font-weight: 700;
   transition: background-color 0.2s;
   line-height: 1; /* Tighten up line height */
   position: relative;
   height: 28px;
   line-height: 28px;
}




.action-col button::before {
   content: '';
   display: inline-block;
   position: absolute;
   left: 2px;
   top: 50%;
   transform: translateY(-50%);
   width: 16px;
   height: 16px;
   background-color: currentColor; /* inherits from .ticket-attribute-headline */
   mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M16.175 13H5q-.425 0-.712-.288T4 12t.288-.712T5 11h11.175l-4.9-4.9q-.3-.3-.288-.7t.313-.7q.3-.275.7-.288t.7.288l6.6 6.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-6.6 6.6q-.275.275-.687.275T11.3 19.3q-.3-.3-.3-.712t.3-.713z'/%3E%3C/svg%3E") no-repeat center / contain;
   -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M16.175 13H5q-.425 0-.712-.288T4 12t.288-.712T5 11h11.175l-4.9-4.9q-.3-.3-.288-.7t.313-.7q.3-.275.7-.288t.7.288l6.6 6.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-6.6 6.6q-.275.275-.687.275T11.3 19.3q-.3-.3-.3-.712t.3-.713z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Hidden Tickets and See More Button */
.hidden-ticket-row {
   display: none;
}

#see-more-btn {
   display: block;
   width: 100%;
   margin-top: 1rem;
   padding: 0.75rem;
   border: 1px solid #E5E5E5;
   font-weight: 600;
   cursor: pointer;
   transition: background-color 0.2s;
   border-radius: 8px;
}

#see-more-btn:hover {
   background-color: #e0e7ff;
}


button.reset-style, button:hover.reset-style{
   border: unset;
   -moz-box-shadow: unset;
   -webkit-box-shadow: unset;
   box-shadow: unset;
   font-weight: unset;
   font-size: unset;
   
}

button.reset-style{
   padding: unset;   
}

.section-tickets h3,.section-tickets h4{
   display: none;
} 


ul[data-theme='enhanced'] {

   margin: 8px;

   /* 'inline-size' looks at width. Use 'size' for width & height. */
   container-type: inline-size; 
   container-name: enhanced-list; /* Optional, helps structure */
 }


        /* Ticket Card Base */
        [data-theme='enhanced'] li[data-role="ticket"] {
         box-sizing: border-box;
         background: white;
         border: 1px solid #e5e5e5;
         border-radius: 12px;
         padding: 12px;
         position: relative;
         margin-bottom: 16px;
         cursor: pointer;
         transition: box-shadow 0.2s ease, border-color 0.2s ease;
         display: flex;
         flex-direction: column;
         gap: 12px;
         overflow: hidden;
     }


     /* @container (width < 600px) {
      ul[data-theme='enhanced'] li[data-role='ticket'] {
         border: none;
         border-bottom: 1px solid #E5E5E5;
         border-radius: 0;
      }
    } */


     [data-theme='enhanced'] li[data-role="ticket"]:hover {
         box-shadow: 0 4px 12px rgba(0,0,0,0.08);
         border-color: #d0d0d0;
     }

     /* CTA Arrow */
     [data-theme='enhanced'] .ticket-cta {
         position: absolute;
         bottom: 13px;
         right: 16px;
         color: #000;
         pointer-events: none;
     }
     [data-theme='enhanced'] .ticket-cta svg {
         width: 24px;
         height: 24px;
         stroke-width: 2.5;
     }

     /* Row 1: Tag */
     [data-theme='enhanced']  [data-role="tag"] {
         display: flex;
         align-items: center;
         gap: 8px;
         font-size: 11px;
     }
     [data-theme='enhanced']  .score-badge {
         background-color: #008a00;
         color: white;
         font-weight: 700;
         padding: 2px 6px;
         border-radius: 4px;
         font-size: 11px;
     }
     [data-theme='enhanced'] .deal-text {
         color: #008a00;
         font-weight: 500;
     }

     /* Row 2: Seats */
     [data-theme='enhanced']  [data-role="seat-details"] {

         line-height: 1.4;
         padding-right: 30px;
         font-weight: 500;
         font-size: 1rem;
         color: #111827;         
     }

     /* Row 3: Features */
     [data-theme='enhanced']  [data-role="features"] {
         display: flex;
         flex-wrap: wrap;
         gap: 8px;
     }
     [data-theme='enhanced']  .feature-badge {
         background-color: #eef6fc;
         color: #1a6fb0;
         padding: 4px 8px;
         border-radius: 4px;
     }

     /* Row 4: Bottom Info */
     [data-theme='enhanced']  .ticket-bottom-row {
         display: flex;
         justify-content: space-between;
         align-items: flex-end;
         margin-top: 4px;
     }

     [data-theme='enhanced']  .price-container {
         display: flex;
         flex-direction: column;
         margin-right: 40px;
     }
     [data-theme='enhanced']  .ticket-qty {
         color: #757575;
         font-size: 12px;
         margin-bottom: 2px;
     }
     [data-theme='enhanced']  .ticket-price {
         font-size: 20px;
         font-weight: 700;
         color: #000;
     }
     [data-theme='enhanced']  .ticket-price .ea {
         font-size: 14px;
         font-weight: 400;
         color: #000;
     }

     [data-theme='enhanced']  .visuals-container {
         display: flex;
         gap: 8px;
         padding-left: 4px;
     }
     [data-theme='enhanced']  .visual-placeholder {
         width: 80px;
         height: 50px;
         border-radius: 6px;
         background-color: #eee;
         overflow: hidden;
         display: flex;
         align-items: center;
         justify-content: center;
         /* Needed for absolute positioning of injected map if necessary */
         position: relative; 
     }
     [data-theme='enhanced']  .visual-placeholder img {
         width: 100%;
         height: 100%;
         object-fit: cover;
     }
     [data-theme='enhanced']  .visual-placeholder.map {
         background: #fff;
     }
     [data-theme='enhanced']  .visual-placeholder.map img{
        scale: 2;
     }




#modal-ticket [data-role='deal']{
   margin-top: 4px;
}


#modal-ticket [data-role='deal'] strong {
   line-height: 18px;
   vertical-align: middle;
   font-size: 0.9rem;
}