main.container-content-sidebar-layout {
  display: flex;
  flex-direction: row;
  justify-content: center;
  max-width: 1920px;
  margin: 0 auto;
  min-height: 80vh;
  box-sizing: border-box;
  position: relative;
  background: transparent;
  z-index: 1;
}

.container-content {
  flex: 1 1 auto;
  max-width: 730px;
  width: 100%;
  min-width: 0; /* For overflow handling inside flex */
  margin: 0 auto;
  box-sizing: border-box;
}

aside.container-sidebar {
  width: 360px;
  min-width: 360px;
  max-width: 360px;
  background: #d3d3d3;
  color: #333;
  border-radius: 12px;
  margin-left: 40px;
  box-sizing: border-box;
  height: fit-content;
  position: sticky;
  top: 0;
  align-self: flex-start;
  z-index: 10;
  padding: 32px;
  transition: margin .3s;
}

/* Large (1920+) layout: sidebar next to content, equal margin L/R */
@media (min-width: 1920px) {
  main.container-content-sidebar-layout {
    justify-content: center;
    gap: 40px;
    padding: 40px 0;
  }
  .container-content {
    margin-left: auto;
    margin-right: 0;
  }
  aside.container-sidebar{
    margin-left: 40px;
    margin-right: auto;
  }
}

/* Under 1170px: 40px side margin, sidebar stays */
@media (max-width: 1170px) {
  main.container-content-sidebar-layout {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Under 1024px: sidebar hidden, content goes 100% */
@media (max-width: 1024px) {
  main.container-content-sidebar-layout {
    flex-direction: column;
  }
  aside.container-sidebar{
    display: none;
  }
  .container-content {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
  }
}

/* Under 800px: content stretches full width, remove max-width */
@media (max-width: 800px) {
  .container-content {
    max-width: 100%;
    width: 100%;
    border-radius: 0;
  }
}






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


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

section[data-id='ticket-picks'] button{
   color: black;
   background: #8BF8FE;
   width: 200px;
   font-size: 16px;
   line-height: 40px;
   height: 40px;   
}

section[data-id='ticket-picks'] h2{
   margin-bottom: 0.25em;
}

section[data-id='ticket-picks'] p{
   color: white;
   margin-bottom: 1.5em !important;
}

section[data-id='ticket-picks'] img{
   height: calc(100% - 40px);
   position: absolute;
   right: 20px;
   top: 20px;
}
















#sidebar-events{
   border-left: 1px solid #E5E5E5;

   right: 0;
   max-width: 600px;
   padding: 16px;
   height: 100%;

}



.events-manager-sidebar {
   background-color: #ffffff;
   border-radius: 16px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
   padding: 24px;
   width: 100%;
   max-width: 400px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.sidebar-header {
   font-size: 1.25rem;
   font-weight: 600;
   color: #1e293b;
   margin-bottom: 8px;
}

.sidebar-divider {
   border: none;
   height: 1px;
   background-color: #e2e8f0;
   margin: 10px 0;
}

/* --- No Events Selected State --- */
.no-events-container {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.warning-message {
   background-color: #fff1f2; /* Light red */
   border-left: 4px solid #ef4444; /* Red */
   padding: 16px;
   border-radius: 8px;
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 0.95rem;
   margin-bottom: 16px;
}

.warning-icon {
   color: #ef4444;
   font-size: 1.2rem;
   line-height: 1;
}

.warning-text {
   color: #333;
}

.benefits-popup {
   background-color: #0067CE; /* Blue */
   color: #ffffff;
   padding: 16px;
   border-radius: 12px;
   position: relative;
   font-size: 0.875rem;
}

.benefits-popup::after {
   content: '';
   position: absolute;
   top: -10px;
   right: 20px;
   width: 0;
   height: 0;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
   border-bottom: 10px solid #2563eb;
}

.search-input {
   flex-grow: 1;
   padding: 12px;
   border: 1px solid #e2e8f0;
   border-radius: 8px;
   font-size: 1rem;
   transition: border-color 0.2s;
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg>');
   background-repeat: no-repeat;
   background-position: 12px center;
   padding-left: 40px;
}

.search-input:focus {
   outline: none;
   border-color: #2563eb;
}

.search-clear-button {
   position: absolute;
   right: 52px;
   top: 50%;
   transform: translateY(-50%);
   background: none;
   border: none;
   cursor: pointer;
   padding: 4px;
   display: none; /* Initially hidden */
}

.search-container{
   margin-bottom: 16px;
   

}

.search-container input{
   height: 48px;
   width: 100%;   
   font-size: 15px;
}

.search-input:focus + .search-clear-button,
.search-clear-button:hover {
   display: block;
}

.search-clear-button svg {
   color: #94a3b8;
}

.search-clear-button:hover svg {
   color: #475569;
}

.filter-button {
   background-color: #ffffff;
   border: 1px solid #e2e8f0;
   border-radius: 8px;
   padding: 12px;
   cursor: pointer;
   transition: background-color 0.2s;
}

.filter-button.active {
   background-color: #e0e7ff;
   border-color: #2563eb;
}

.filter-button:hover {
   background-color: #f1f5f9;
}

/* --- Filter Pop-up UI --- */
.filter-popup {
   position: absolute;
   top: 100%;
   right: 0;
   z-index: 10;
   background-color: #ffffff;
   border-radius: 8px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   padding: 12px;
   margin-top: 8px;
   width: 150px;
   display: none;
}

.filter-popup.active {
   display: block;
}

.filter-popup-item {
   padding: 8px 12px;
   cursor: pointer;
   border-radius: 6px;
   font-size: 0.875rem;
   transition: background-color 0.2s;
}

.filter-popup-item:hover {
   background-color: #f1f5f9;
}

.filter-popup-item.active {
   background-color: #e0e7ff;
   color: #2563eb;
   font-weight: 600;
}

.filter-clear-all {
   padding-top: 8px;
   border-top: 1px solid #e2e8f0;
   margin-top: 8px;
   text-align: right;
   font-size: 0.8rem;
   color: #6b7280;
   cursor: pointer;
}

.filter-clear-all:hover {
   color: #4b5563;
}


/* --- Events List --- */
.events-list {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.event-item{
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 16px;
   background-color: #F7FAFD;
   border-radius: 12px;
   cursor: pointer;
   transition: background-color 0.2s, border-color 0.2s;
   font-size: 0.875rem;
}

.event-type-item{
   padding: 16px;
   background-color: #F7FAFD;
   border-radius: 12px;
   cursor: pointer;
   transition: background-color 0.2s, border-color 0.2s;
   font-size: 0.875rem;
   text-align:center;
   position: relative;   
}

.event-item, .event-type-item{
   margin-bottom: 12px;
}



.event-item:hover, .event-type-item:hover {
   background-color: #E6F0FA;
}

.event-item.selected, .event-types-selected-container .event-type-item {
   background-color: #E6F0FA; /* Light blue */
   color: #0067CE;
   position: relative;
}

.event-types-selected-container .event-type-item .event-type-details{
   display: none;

}

.event-type-details{
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: normal;   
}

.event-types-selected-container .event-type-item:after, .event-item.selected:after {
   content: "×";
   position: absolute;
   right: 16px;
   line-height: 24px;
   top: calc(50% - 12px);
   font-size: 24px;
}


.event-item.selected:hover, .event-types-selected-container .event-type-item:hover {
   background-color: #eff5fc;
}

.event-checkbox {
   border: 2px solid #333;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: background-color 0.2s, border-color 0.2s;
   background: white;

}

.event-item:hover .event-checkbox, .event-item.selected .event-checkbox, .event-type-item.selected {
   background-color: #0067CE;
   border-color: #0067ce;
   display: flex;
}

.event-item.selected .event-checkbox{
   display: none;
}

.event-checkbox svg {
   color: #ffffff;

}

.event-item:hover .event-checkbox svg{
   color: white;
   display: unset;
}

.event-item.selected .event-checkbox svg, .event-type-item.selected .event-checkbox svg {
   display: block;
}

.event-info {
   display: flex;
   flex-direction: column;
}

.selected .event-info{
   width: calc(90% - 24px);
}

.event-date, .event-type-details{
   font-size: 12px;
   color: #666;
}

.event-date {

   margin-bottom: 4px;
}

.event-name, .event-type-name {
   font-weight: 500;
   font-size: 16px;
   line-height: 1.1;
   
}

.event-name{
   font-size: 15px;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
   text-overflow: ellipsis;
   /* Optional (for progressive enhancement): */
   white-space: normal;   
}

.selected .event-name{
   
}



.event-type-details{
   margin-top: 4px;
}


.selected .event-date, .selected .event-name{
   color: #0067ce;
}

/* --- Events Selected State --- */
.selected-event-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 16px;
   background-color: #F3F7FE;
   border-radius: 12px;
   cursor: pointer;
   font-size: 0.875rem;
}

.selected-event-info {
   display: flex;
   flex-direction: column;
}

.selected-event-tickets {
   display: flex;
   align-items: center;
   gap: 4px;
   color: #2563eb;
}

.featured-tickets-container {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.featured-ticket-title {
   font-size: 1rem;
   font-weight: 600;
   color: #1e293b;
}

.ticket-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 12px;
   background-color: #f8fafc;
   border-radius: 8px;
   border: 1px solid #e2e8f0;
}

.ticket-item-placeholder {
   height: 12px;
   background-color: #e2e8f0;
   border-radius: 4px;
   width: 70%;
}

.shop-button {
   background-color: #0067CE;
   color: #ffffff;
   line-height: 44px;
   height: 44px;
   border-radius: 8px;
   font-weight: 500;
   text-align: center;
   cursor: pointer;
   transition: background-color 0.2s;
}

.shop-button:hover {
   background-color: #1d4ed8;
}

/* --- Narrower Devices (@media max-width: 800px) --- */
@media (max-width: 800px) {
   body {
       padding: 10px;
   }

   .events-manager-sidebar {
       border-radius: 0;
       box-shadow: none;
       max-width: 100%;
       height: 100vh;
       padding: 16px;
   }
   
   .sidebar-header {
       font-size: 1.125rem;
   }

   .sidebar-divider {
       display: none; /* Hide divider on narrow screens */
   }

   .selected-events-toggle {
       display: flex;
       justify-content: space-between;
       align-items: center;
       background-color: #ffffff;
       padding: 16px;
       border-bottom: 1px solid #e2e8f0;
       cursor: pointer;
   }

   .selected-events-toggle.expanded .toggle-icon {
       transform: rotate(180deg);
   }

   .selected-events-toggle .toggle-icon {
       transition: transform 0.2s;
   }

   .no-events-container,
   .events-list,
   .featured-tickets-container {
       display: none;
   }

   .selected-events-toggle-container.expanded .no-events-container,
   .selected-events-toggle-container.expanded .events-list,
   .selected-events-toggle-container.expanded .featured-tickets-container {
       display: flex;
   }

   .selected-events-toggle-container {
       width: 100%;
   }
}

/* Isolate mode overlay */
.sidebar-isolate-overlay {
   position: fixed;
   left: 0; top: 0; right: 0; bottom: 0;
   width: 100vw; height: 100vh;
   background: rgba(255,255,255,0.95);
   z-index: 9998;
   transition: opacity 0.2s;
}

.sidebar-isolated {
   z-index: 9999 !important;
   box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.10);
   position: fixed !important;
   left: 50%; top: 50%; transform: translate(-50%,-50%);
   background: #fff;
   border-radius: 20px;
   max-width: 420px;
   width: 95vw;
   max-height: 95vh;
   overflow: auto;
   padding: 32px 24px;
   transition: box-shadow 0.2s;
}



body.iso *{
   opacity: 0.5;
   pointer-events: none;
}

body.iso #sidebar-events,
body.iso #sidebar-events * {
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 9999;
}


section[data-id='ticket-picks']{
   margin: 40px 8px;
}


.container{
   /* allow sticky to work */
   overflow: unset; 
}

aside#sidebar-events{
   position: sticky;
   top: 0;
   overflow-y: auto;
   height: 100vh;   
}

.row.row-col-responsive .col.col-main {
   flex: 0 0 calc(65% - 2vw);
}

.row.row-col-responsive .col.col-side {
   flex: 0 0 calc(35% - 2vw);
}



.qty-selector {
   position: relative;
   border: 1px solid #e5e5e5;
   display: inline-block;
   border-radius: 8px;;
}
.qty-btn {
   background: white;
   border: none;
   text-align: center;
   padding: 0;
   padding-right: 16px;
   border-radius: 8px;
   font-size: 15px;
   cursor: pointer;
   line-height: 40px;
   height: 40px;
   width: 108px;
   
}
.qty-btn:after{
   content: "";
   position: absolute;
   right: 12px;
   top: 50%;
   transform: translateY(-50%);
   mask: 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") 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='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9l6 6l6-6'/%3E%3C/svg%3E") no-repeat center / contain;
   background: #333; /* this sets the visible color of the mask */
   height: 1em;
   width: 1em;
 }
 


.qty-options {
   list-style: none;
   margin: 0;
   padding: 5px 0;
   background: #fff;
   border: 1px solid #e2e8f3;
   border-radius: 8px;
   box-shadow: 0 3px 8px rgba(23,34,60,0.10);
   position: absolute;
   left: 0;
   top: 39px;
   min-width: 92px;
   z-index: 60;
}
.qty-options.hide {
   display: none;
}
.qty-options li {
   cursor: pointer;
   padding: 7px 15px;
   font-size: 15px;
   transition: background 0.14s;
}






nav ul.list-scroll{
   margin-bottom: 0 !important;
}


.tippy-list span{
   display: block;
   position: relative;
   padding-left: 1.6em;
}

.tippy-list span::before {
   content: '';
   display: inline-block;
   position: absolute;
   left: 4px;
   top: 50%;
   transform: translateY(-50%);
   width: 1em;
   height: 1em;
   color: white;
   background-color: currentColor;
   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;
}

.tippy-box[data-theme~='brand'] {
   background-color: #0067CE;
   color: white;
   border-radius: 8px;
   box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
 }

 .tippy-content{
    padding: 16px;
    
 }

 .tippy-box[data-theme~='brand'][data-placement^='top'] > .tippy-arrow::before {
   border-top-color: #0067CE;
 }
 .tippy-box[data-theme~='brand'][data-placement^='bottom'] > .tippy-arrow::before {
   border-bottom-color: #0067CE;
 }
 .tippy-box[data-theme~='brand'][data-placement^='left'] > .tippy-arrow::before {
   border-left-color: #0067CE;
 }
 .tippy-box[data-theme~='brand'][data-placement^='right'] > .tippy-arrow::before {
   border-right-color: #0067CE;
 }

 .tippy-box[data-theme~='brand'] > .tippy-svg-arrow {
   fill: #0067CE;
 }

 .tippy-box[data-theme~='brand'] > .tippy-arrow::before {
   transform: scale(1.5);
 }

.tippy-box li{
   margin-bottom: 0px !important;
}

.tippy-arrow{
   transform: translate(0px, 16px) !important;
}