/* Tour Timer Frontend Styles - Minimal, Theme-Friendly */

/* Container Layout Only - No Colors/Fonts */
.tour-timer-frontend {
    width: 100%;
    margin: 20px 0;
    --tt-border-width: 1px;
    --tt-border-strong-width: 2px;
    --tt-border-radius: 6px;
    --tt-border-color: currentColor;
    --tt-border-color: color-mix(in srgb, currentColor 20%, transparent);
    --tt-surface: transparent;
    --tt-surface-alt: transparent;
    --tt-surface-alt: color-mix(in srgb, currentColor 4%, transparent);
    --tt-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    --tt-shadow-hover: 0 3px 10px rgba(0, 0, 0, 0.12);
    --tt-muted-opacity: 0.8;
}

.tour-timer-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.tour-timer-map-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    border: var(--tt-border-width) solid var(--tt-border-color);
    border-radius: var(--tt-border-radius);
    overflow: hidden;
    aspect-ratio: 1;
    background-color: var(--tt-surface);
}

.tour-timer-map-container .tour-timer-map,
.tour-timer-map-container #tour-timer-map {
    width: 100%;
    height: 100%;
    min-height: 400px;
}

.tour-timer-schedule {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

/* Typography - Let theme handle all h3, h4, p, etc. */
.tour-timer-schedule h3 {
    margin-top: 0;
    margin-bottom: 1em;
}

.schedule-item-title h4 {
    margin: 0 0 0.25em 0;
}

/* Layout Only - No Colors */
.schedule-item {
    padding: 1em;
    margin-bottom: 1em;
    border: var(--tt-border-width) solid var(--tt-border-color);
    border-radius: var(--tt-border-radius);
    background-color: var(--tt-surface);
    transition: box-shadow 0.3s ease;
}

.schedule-item:hover {
    box-shadow: var(--tt-shadow-hover);
}

.schedule-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75em;
}

.schedule-item-number {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
    /* Use theme's link color for background, white text */
    background-color: currentColor;
    color: #fff;
}

.schedule-item-title {
    flex-grow: 1;
    margin-left: 15px;
}

.schedule-item-title .venue-address {
    font-size: 0.875em;
}

.schedule-item-details {
    margin-top: 1em;
    padding-top: 1em;
    border-top: var(--tt-border-width) solid var(--tt-border-color);
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5em 0;
    border-bottom: var(--tt-border-width) solid var(--tt-border-color);
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    font-weight: 600;
}

.detail-value {
    text-align: right;
}

/* Departure Time - Minimal styling, theme inherits */
.departure-time {
    border: var(--tt-border-strong-width) solid var(--tt-border-color);
    border-radius: var(--tt-border-radius);
    padding: 0.75em;
    margin-top: 0.75em;
    font-weight: bold;
    text-align: center;
    background-color: var(--tt-surface);
}

.departure-label,
.departure-location,
.departure-datetime,
.departure-status,
.departure-title,
.departure-description {
    /* Let theme handle all typography */
}

/* Badge styles - Minimal, theme-friendly */
.launching-point-badge,
.ending-point-badge,
.stop-badge {
    padding: 0.625em;
    margin: 0.625em 0;
    border: var(--tt-border-strong-width) solid var(--tt-border-color);
    border-radius: var(--tt-border-radius);
    font-weight: bold;
    text-align: center;
    background-color: var(--tt-surface);
}

.impossible-schedule-warning {
    padding: 1em;
    margin: 1em 0;
    border: var(--tt-border-strong-width) solid var(--tt-border-color);
    border-radius: var(--tt-border-radius);
    font-weight: bold;
    text-align: center;
    background-color: var(--tt-surface);
}

.impossible-schedule-warning .warning-large {
    font-size: 1.125em;
}

/* Map link - Use theme link styles */
.map-link {
    display: inline-block;
    margin-top: 0.75em;
    padding: 0.5em 1em;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.875em;
    transition: opacity 0.3s ease;
}

.map-link:hover {
    opacity: 0.8;
}

/* WordPress buttons - Let theme handle styling */
.tour-timer-schedule .button,
.tour-timer-schedule .button-primary {
    margin-top: 0.625em;
    display: inline-block;
}

/* Gas estimate - Band View only, theme-friendly */
.tour-timer-gas-estimate {
    margin-top: 1.5em;
    padding: 1em;
    border: var(--tt-border-width) solid var(--tt-border-color);
    border-radius: var(--tt-border-radius);
    background-color: var(--tt-surface);
}

.tour-timer-gas-estimate-inner {
    font-size: 0.95em;
}

.tour-timer-gas-estimate .tour-timer-gas-helper {
    margin: 0.75em 0 0 0;
    font-size: 0.875em;
    font-weight: normal;
    opacity: var(--tt-muted-opacity);
}

.tour-timer-gas-estimate .tour-timer-gas-helper a {
    text-decoration: underline;
}

/* Responsive Design */
@media (min-width: 768px) {
    .tour-timer-map-container {
        max-width: 800px;
        margin: 0 auto;
    }
    
    .tour-timer-schedule {
        max-width: 1000px;
        margin: 0 auto;
        width: 100%;
    }
}

@media (max-width: 767px) {
    .schedule-item-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .schedule-item-title {
        margin-left: 0;
        margin-top: 10px;
        width: 100%;
    }
    
    .detail-row {
        flex-direction: column;
    }
    
    .detail-value {
        text-align: left;
        margin-top: 5px;
    }
}

/* Setlist Styles */
.tour-timer-setlists {
    width: 100%;
    max-width: 1000px;
    margin: 20px auto;
}

.tour-timer-setlists h3 {
    margin-top: 0;
    margin-bottom: 1.5em;
}

.setlists-list {
    display: flex;
    flex-direction: column;
    gap: 2em;
}

.setlist-venue-item {
    padding: 1.5em;
    border: var(--tt-border-width) solid var(--tt-border-color);
    border-radius: var(--tt-border-radius);
    background-color: var(--tt-surface);
    box-shadow: var(--tt-shadow);
}

.setlist-venue-item .venue-name {
    margin-top: 0;
    margin-bottom: 1em;
    font-size: 1.25em;
}

.venue-date {
    font-weight: normal;
    font-size: 0.9em;
    opacity: var(--tt-muted-opacity);
}

.setlist-name {
    font-weight: bold;
    margin-bottom: 0.75em;
    font-size: 1.1em;
}

.setlist-notes {
    margin-bottom: 1em;
    font-style: italic;
    opacity: var(--tt-muted-opacity);
}

.setlist-full-audio {
    margin-bottom: 1.5em;
    padding-top: 1em;
    border-top: var(--tt-border-width) solid var(--tt-border-color);
}

.setlist-full-audio audio {
    width: 100%;
    max-width: 500px;
    margin-top: 0.5em;
    display: block;
}

.setlist-songs {
    margin-top: 1em;
}

.setlist-songs-list {
    margin-top: 0.75em;
    padding-left: 1.5em;
    list-style: decimal;
}

.setlist-song-item {
    margin-bottom: 0.75em;
    padding: 0.75em;
    border: var(--tt-border-width) solid var(--tt-border-color);
    border-radius: var(--tt-border-radius);
    background-color: var(--tt-surface-alt);
}

.song-name {
    font-weight: 600;
    margin-bottom: 0.25em;
}

.song-duration {
    font-size: 0.9em;
    opacity: var(--tt-muted-opacity);
    margin-top: 0.25em;
}

.song-notes {
    font-size: 0.9em;
    opacity: var(--tt-muted-opacity);
    margin-top: 0.5em;
    font-style: italic;
}

.song-audio {
    margin-top: 0.75em;
}

.song-audio audio {
    width: 100%;
    max-width: 400px;
    height: 32px;
}

@media (max-width: 767px) {
    .setlist-full-audio audio,
    .song-audio audio {
        width: 100%;
        max-width: 100%;
    }
    
    .setlist-venue-item {
        padding: 1em;
    }
}