/* Container */
.tdd-wrapper { width: 100%; margin: 0 auto; font-family: inherit; }

/* Header */
.tour-header { display: flex; flex-direction:row; justify-content: space-between; align-items: center; margin-bottom: 40px; gap:20px; }
.filters-row { display: flex; gap: 10px; }

/* CUSTOM DROPDOWN STYLING */
.tdd-custom-select { position: relative; width: 340px; }
.tour-filter-select { border: 1px solid #fff; padding: 10px 20px; cursor: pointer; text-transform: uppercase; font-weight: 700; width: 100%; background: transparent; color: white; display: flex; justify-content: space-between; align-items: center; border-radius: 0; font-family: inherit; font-size: inherit; }
.dropdown-icon { transition: transform 0.3s ease; fill: currentColor; margin-left: 10px; }
.tdd-custom-select.is-open .dropdown-icon { transform: rotate(180deg); }
.tdd-options-list { display: none; position: absolute; top: 100%; left: 0; right: 0; background-color: #000; border: 1px solid #fff; border-top: none; z-index: 100; max-height: 300px; overflow-y: auto; }
.tdd-custom-select.is-open .tdd-options-list { display: block; }
.tdd-option { padding: 10px 20px; cursor: pointer; text-transform: uppercase; color: #fff; font-weight: 600; font-size:14px; }
.tdd-option:hover { background-color: #333; }

/* Row Card */
.tour-row { display: flex; align-items: center; justify-content: space-between; background-color: #323232; padding: 25px; margin-bottom: 25px; gap: 20px; }

/* DEFAULT COLUMNS (SHOWS - 4 COLUMNS) */
.t-col-date  { width: 20%; font-size: 20px; font-weight: 700; line-height: 120%; }
.t-col-venue { display: flex; flex-direction: column; width: 40%; gap: 10px; line-height: 1.2em; }
.t-col-show  { display: flex; flex-direction: column; width: 20%; gap: 10px; line-height: 1.2em; }
.t-col-btn   { width: 20%; text-align: right; min-width: 160px; }

/* ARTIST COLUMNS (5 COLUMNS) */
.is-artists .t-col-date  { width: 18%; }
.is-artists .t-col-venue { width: 25%; }
.is-artists .t-col-show  { width: 12%; }
.is-artists .t-col-event { display: flex; flex-direction: column; width: 25%; font-family: Raleway; font-size: 16px; font-weight: 700; line-height: 1.4em; }
.is-artists .t-col-btn   { width: 20%; }

/* Info Details */
.venue-name, .show-name { font-size: 14px; font-weight: 400; }
.venue-city, .show-time { font-family: Raleway; font-size: 16px; font-style: normal; font-weight: 700; }

/* Buttons & Statuses */
.tour-btn.sold-out { background-color: transparent; border: 2px solid #ffffff; padding:10px 20px; color: #ffffff; opacity: 0.5; transition: all 0.3s ease; }
.tour-btn.sold-out:hover { background-color: #ffffff; border-color: #ffffff; color: #000000; opacity: 0.9; }

.tour-btn.cancelled { background-color: transparent; border: 2px solid #E53935; padding:10px 20px; color: #E53935; transition: all 0.3s ease; }
.tour-btn.cancelled:hover { background-color: #E53935; border-color: #ffffff; color: #000000; }

.mobile-only{ display:none; }
.filter-block{ width:auto; }
.filter-label{ display:none; }

/* Title Block Custom Adjustments */
.title-block { width: 40%; }
.filter-block { width: 60%; }
.filters-row { width: 100%; }

/* Tablet */
@media (max-width: 1024px) {
    .tdd-custom-select { width: 250px; }
}

/* Tablet Portrait */
@media (max-width: 991px) {
    .t-col-show { flex-direction: row; flex-wrap: wrap; }
    .t-col-date, .t-col-venue, .t-col-show, .t-col-event, .t-col-btn { width: 100%; text-align:left; }
    
    /* Ensure Artist columns also force 100% width on mobile/tablet */
    .is-artists .t-col-date, .is-artists .t-col-venue, .is-artists .t-col-show, .is-artists .t-col-event, .is-artists .t-col-btn { width: 100%; }
    
    .tour-row { flex-direction: column; text-align: left; gap: 15px; padding:25px 30px; }
    .t-col-btn{ text-align:left; }
    
    /* Make button contents flex so the arrow aligns nicely next to the text */
    .tour-btn { color:#F6C603; background:transparent; padding:0; min-width:auto; display: inline-flex; align-items: center; gap: 8px; }
    
    /* Mobile Icon Handling - visible for all buttons! */
    .mobile-only { display: block; }
    
    /* This forces the arrow's color to perfectly match the button's text color */
    .tour-btn svg path { fill: currentColor; transition: fill 0.3s ease; }
    
    /* General Button Hover on Mobile */
    .tour-btn:hover { background-color:transparent !important; color:white; }
    
    /* Status Buttons on Mobile */
    .tour-btn.sold-out, .tour-btn.cancelled { padding:0; border:none; background-color: transparent !important; }
    
    /* Mobile Text Hover Overrides */
    .tour-btn.sold-out:hover { color: #ffffff !important; opacity: 0.9; }
    .tour-btn.cancelled:hover { color: #E53935 !important; }
    
    .tour-header { flex-wrap:wrap; }
    .title-block{ width:auto; }
    .filter-block{ width:65%; }
    .filters-row { flex-direction: row; width: 100%;}
    .tdd-custom-select { width: 100%; }
}

/* Mobile */
@media (max-width: 747px) {
    .t-col-date{ font-size:18px; }
    .filter-block{ width:100%; gap:15px; }
    .filter-label{ display:block; font-size: 16px; font-weight: 700; line-height: 100%; text-transform: uppercase; }
    .title-block{ width:100%; }
    .tour-header{ margin-bottom:30px; }
    .title-block h2{ font-size:var(--h2-mobile); }
    .tour-row { padding: 20px; margin-bottom: 15px; }
}

@media (max-width:450px){
    .filters-row{ width:100%; flex-wrap:wrap; }
}