/* ShowKit Cards */

.showkit-cards-wrap {
    font-family: var(--sk-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-weight: var(--sk-font-weight, 400);
    font-size: var(--sk-font-size, 14px);
    line-height: var(--sk-line-height, 1.5);
    letter-spacing: var(--sk-letter-spacing, normal);
    text-transform: var(--sk-text-transform, none);
    color: var(--sk-text, #1a1a1a);
    position: relative;
}
.showkit-cards-wrap *,
.showkit-cards-wrap *::before,
.showkit-cards-wrap *::after { box-sizing: border-box; }

/* ---- Shared ---- */

.showkit-cards-wrap .sk-badge {
    display: inline-block;
    padding: 1px 7px;
    background: var(--sk-badge-bg, #1a1a2e);
    color: var(--sk-badge-color, #fff);
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: .04em;
    vertical-align: middle;
}

.showkit-cards-wrap .sk-month-heading {
    font-size: var(--sk-month-size, 0.75rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--sk-month-color, #999);
    margin: var(--sk-month-margin-top, 24px) 0 var(--sk-month-margin-bottom, 8px);
    padding: 0;
}
.showkit-cards-wrap .sk-month-heading:first-child { margin-top: 0; }

.showkit-cards-wrap .sk-search-wrap { margin-bottom: 14px; }
.showkit-cards-wrap .sk-search {
    width: 100%;
    padding: 7px 12px;
    font-size: 0.9rem;
    font-family: inherit;
    border: 1px solid var(--sk-search-border, #ccc);
    border-radius: var(--sk-radius, 8px);
    outline: none;
    background: var(--sk-search-bg, #fff);
    color: var(--sk-search-text, var(--sk-text, #1a1a1a));
    transition: border-color .2s;
}
.showkit-cards-wrap .sk-search:focus { border-color: var(--sk-search-focus, #1a1a2e); }
.showkit-cards-wrap .sk-search::placeholder { color: var(--sk-search-text, var(--sk-text, #1a1a1a)); opacity: .45; }

/* Standalone [showkit_search] shortcode */
.showkit-search-standalone.sk-search-wrap { margin-bottom: 0; }
.showkit-search-standalone .sk-search {
    width: 100%;
    padding: 7px 12px;
    font-size: 0.9rem;
    font-family: inherit;
    border: 1px solid var(--sk-search-border, #ccc);
    border-radius: var(--sk-radius, 8px);
    outline: none;
    background: var(--sk-search-bg, #fff);
    color: var(--sk-search-text, var(--sk-text, #1a1a1a));
    transition: border-color .2s;
}
.showkit-search-standalone .sk-search:focus { border-color: var(--sk-search-focus, #1a1a2e); }
.showkit-search-standalone .sk-search::placeholder { color: var(--sk-search-text, var(--sk-text, #1a1a1a)); opacity: .45; }

.showkit-cards-wrap .sk-empty {
    text-align: center;
    padding: 32px;
    color: var(--sk-text-muted, #999);
    font-style: italic;
}

/* ---- Modal Popup ---- */

.sk-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.45);
    align-items: center;
    justify-content: center;
}
.sk-popup-overlay.is-open { display: flex; }
.sk-popup {
    background: var(--sk-popup-bg, #fff);
    border: 1px solid var(--sk-popup-border, #e0e0e0);
    border-radius: var(--sk-radius, 8px);
    max-width: 480px;
    width: 92%;
    padding: 24px 28px;
    position: relative;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    max-height: 90vh;
    overflow-y: auto;
}
.sk-popup__close {
    position: absolute;
    top: 12px;
    right: 14px;
    font-size: 1.3rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--sk-text-muted, #999);
    line-height: 1;
    padding: 4px;
}
.sk-popup__close:hover { color: var(--sk-text, #1a1a1a); }
.sk-popup__heading {
    margin: 0 0 4px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--sk-popup-heading, #1a1a2e);
}
.sk-popup__date {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--sk-popup-heading, #1a1a2e);
    margin-bottom: 14px;
}
.sk-popup__body { color: var(--sk-popup-text, #333); font-size: 0.9rem; }
.sk-popup__body p { margin: 4px 0; }
.sk-popup__body a { color: var(--sk-popup-link, #1a1a2e); }
.sk-popup__actions { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.sk-btn-ticket {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: var(--sk-btn-bg, #1a1a2e);
    color: var(--sk-btn-text, #fff);
    border: none;
    border-radius: var(--sk-btn-radius, 6px);
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: opacity .15s;
}
.sk-btn-ticket:hover   { opacity: .85; color: var(--sk-btn-text, #fff); }
.sk-btn-ticket:visited { color: var(--sk-btn-text, #fff); }

.sk-card-ticket-btn:visited { color: var(--sk-text, #1a1a1a); }

.sk-band-chip {
    display: inline-block;
    padding: 1px 8px;
    background: var(--sk-chip-bg, var(--sk-accent, #1a1a2e));
    color: var(--sk-chip-text, var(--sk-accent-text, #fff));
    border-radius: 4px;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: .04em;
    vertical-align: middle;
}

/* ---- Cards ---- */

.sk-cards-list { list-style: none; margin: 0; padding: 0; }
.sk-card-item {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    align-items: center;
    gap: 0 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--sk-border, #e0e0e0);
    cursor: pointer;
    transition: background .1s;
}
.sk-card-item:last-child { border-bottom: none; }
.sk-card-item:hover {
    background: var(--sk-bg-hover, #f0f0f0);
    margin: 0 -12px;
    padding: 16px 12px;
    border-radius: 6px;
}
.sk-card-item.sk-row--active {
    background: var(--sk-bg-hover, #f0f0f0);
    margin: 0 -12px;
    padding: 16px 12px;
    border-radius: 6px;
    box-shadow: inset 3px 0 0 var(--sk-accent, #1a1a2e);
}

.sk-card-date { text-align: left; line-height: 1; user-select: none; }
.sk-card-day {
    display: block;
    font-size: var(--sk-card-day-size, 2.8rem);
    font-weight: 900;
    color: var(--sk-card-day-color, var(--sk-text, #1a1a1a));
    line-height: 1;
}
.sk-card-month {
    display: block;
    font-size: var(--sk-card-month-size, 0.75rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--sk-card-month-color, #999);
    margin-top: 2px;
}

.sk-card-info { min-width: 0; }
.sk-card-venue {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--sk-text, #1a1a1a);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sk-card-venue-sub {
    font-size: 0.88rem;
    color: var(--sk-text-secondary, #666);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sk-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 0.82rem;
    color: var(--sk-text-muted, #999);
    flex-wrap: wrap;
}

.sk-card-action { flex-shrink: 0; }
.sk-card-ticket-btn {
    display: inline-block;
    padding: 7px 16px;
    min-width: 90px;
    text-align: center;
    border: 1px solid var(--sk-text, #1a1a1a);
    border-radius: var(--sk-btn-radius, 6px);
    background: transparent;
    color: var(--sk-text, #1a1a1a);
    font-size: 0.88rem;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.sk-card-ticket-btn:hover {
    background: var(--sk-text, #1a1a1a);
    color: var(--sk-bg, #fff);
}
.sk-card-info-btn {
    display: inline-block;
    padding: 7px 16px;
    border: 1px solid var(--sk-border, #e0e0e0);
    border-radius: var(--sk-btn-radius, 6px);
    background: transparent;
    color: var(--sk-text-secondary, #666);
    font-size: 0.88rem;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}
.sk-card-info-btn:hover { background: var(--sk-bg-hover, #f0f0f0); }

/* ---- Card Accordion (mode="accordion") ---- */

.sk-card-item--open {
    background: var(--sk-bg-hover, #f0f0f0);
    margin: 0 -12px;
    padding: 16px 12px;
    border-radius: 6px;
    box-shadow: inset 3px 0 0 var(--sk-card-accent, var(--sk-accent, #1a1a2e));
}

.sk-card-detail {
    grid-column: 1 / -1;
    margin-top: 12px;
    padding: 16px 20px;
    background: var(--sk-popup-bg, #fff);
    border: 1px solid var(--sk-popup-border, #e0e0e0);
    border-radius: var(--sk-radius, 8px);
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    font-size: .9rem;
    color: var(--sk-popup-text, #333);
    line-height: 1.45;
}

.sk-card-detail-heading {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--sk-popup-heading, #1a1a2e);
    margin: 0 0 8px;
    line-height: 1.25;
}

.sk-card-detail .sk-card-detail-line { margin: 4px 0; }
.sk-card-detail .sk-card-detail-label { color: var(--sk-popup-heading, #1a1a2e); }
.sk-card-detail a { color: var(--sk-popup-link, #1a1a2e); }
.sk-card-detail a:hover { text-decoration: underline; }

.sk-card-detail-badges { margin: 6px 0; display: flex; gap: 4px; flex-wrap: wrap; }

.sk-card-detail-ticket {
    display: inline-block;
    margin-top: 12px;
    padding: 1px 7px;
    background: var(--sk-btn-bg, #1a1a2e);
    color: var(--sk-btn-text, #fff);
    border-radius: 4px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-decoration: none;
    vertical-align: middle;
    transition: opacity .15s;
}
.sk-card-detail-ticket:hover,
.sk-card-detail-ticket:visited { opacity: .85; color: var(--sk-btn-text, #fff); }

@media (max-width: 500px) {
    .sk-card-item { grid-template-columns: 64px 1fr; }
    .sk-card-action { grid-column: 2; }
    .sk-card-day { font-size: 2.2rem; }
}