@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@600;700;800&family=Rajdhani:wght@300;400;600;700&display=swap');

:root {
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Rajdhani', sans-serif;
    background: #000000;
    color: #ffffff;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Show subsite: Buy Tickets to next performance – top bar (logo purple for default theme) */
.show-subsite-next-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(90deg, rgba(226, 0, 255, 0.12) 0%, rgba(226, 0, 255, 0.06) 100%);
    border-bottom: 1px solid rgba(226, 0, 255, 0.3);
    color: #E200FF;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: background 0.2s, color 0.2s;
}
.show-subsite-next-cta:hover {
    background: rgba(226, 0, 255, 0.2);
    color: #fff;
}
.show-subsite-next-cta-text {
    display: inline;
}
.show-subsite-next-cta-label,
.show-subsite-next-cta-date {
    display: inline;
}
.show-subsite-next-cta-btn {
    padding: 6px 14px;
    border: 1px solid #E200FF;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    background: #E200FF;
    color: #fff;
}
.show-subsite-next-cta:hover .show-subsite-next-cta-btn {
    background: #f020ff;
    border-color: #f020ff;
    color: #fff;
}

/* Admin-controlled promotional announcement bar (e.g. "By Popular Demand! Now Extended") */
.show-promo-banner {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.42rem 1rem;
    background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 50%, #f59e0b 100%);
    color: #1a1205;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.show-promo-banner-text {
    position: relative;
    z-index: 1;
}
.show-promo-banner-icon {
    position: relative;
    z-index: 1;
    font-size: 1rem;
    line-height: 1;
    opacity: 0.85;
    animation: promo-banner-star 2.6s ease-in-out infinite;
}
/* Periodic glint sweeping across the bar */
.show-promo-banner::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -50%;
    width: 45%;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
    transform: skewX(-18deg);
    animation: promo-banner-sheen 3s ease-in-out infinite;
    pointer-events: none;
}
@keyframes promo-banner-sheen {
    0%   { left: -50%; }
    45%  { left: 130%; }
    100% { left: 130%; }
}
@keyframes promo-banner-star {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.16); }
}
/* Americana subsite: patriotic accent bar */
body.theme-americana .show-promo-banner {
    background: linear-gradient(90deg, var(--am-red-deep) 0%, var(--am-red) 50%, var(--am-blue) 100%);
    color: var(--am-white);
}
body.theme-americana .show-promo-banner-icon {
    color: var(--am-white);
}
/* Tighter stacking: collapse the gap when the promo bar sits directly above the next-performance CTA */
.show-promo-banner + .show-subsite-next-cta {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}
/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .show-promo-banner::after { display: none; }
    .show-promo-banner-icon { animation: none; opacity: 1; }
}
@media (max-width: 768px) {
    .show-promo-banner {
        font-size: 0.74rem;
        padding: 0.4rem 0.7rem;
        gap: 0.4rem;
        letter-spacing: 0.04em;
    }
    .show-promo-banner-icon {
        font-size: 0.85rem;
    }
    .show-promo-banner + .show-subsite-next-cta {
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
    }
}

@media (max-width: 768px) {
    .show-subsite-next-cta {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0.45rem 0.75rem;
        gap: 0.75rem;
    }
    .show-subsite-next-cta-text {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
    }
    .show-subsite-next-cta-label {
        display: block;
        font-size: 0.7rem;
        letter-spacing: 0.08em;
        opacity: 0.9;
    }
    .show-subsite-next-cta-date {
        display: block;
        font-size: 0.9rem;
        font-weight: 700;
        color: #fff;
    }
    .show-subsite-next-cta-btn {
        margin-left: auto;
        flex-shrink: 0;
        text-align: center;
        padding: 0.4rem 1rem;
    }
}

/* Keep header bar minimal height on show pages */
.site-header {
    padding: 2px 0;
}

.show-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 8px 2rem 48px;
    overflow-x: hidden;
}

/* Show hero: full-width block, title + tagline above image, meta bottom-right */
.show-hero {
    width: 100%;
    background: #000000;
}

.show-hero-head {
    padding: 1rem 1.5rem 0.75rem;
    background: #000000;
    text-align: center;
}

.show-hero-head--with-logo {
    padding: 1.5rem 1.5rem 1.25rem;
}

.show-hero-subsite-logo {
    margin-bottom: 1rem;
}
.show-hero-subsite-logo img {
    width: auto;
    height: auto;
    max-width: min(360px, 85vw);
    max-height: 140px;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}

@media (min-width: 769px) {
    .show-hero-subsite-logo img {
        max-width: 400px;
        max-height: 160px;
    }
}

.show-hero-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.25rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0;
}

.show-hero-head--with-logo .show-hero-title {
    font-size: 1.85rem;
    letter-spacing: 0.1em;
    margin-top: 0.15rem;
}

.show-hero-tagline {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.95rem;
    color: #00E5FF;
    margin: 0.35rem 0 0;
}

.show-hero-recent-activity {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.8rem;
    color: rgba(0, 255, 127, 0.85);
    margin: 0.6rem 0 0;
    font-weight: 500;
}

.show-hero-head--with-logo .show-hero-tagline {
    margin-top: 0.2rem;
}
.show-hero-head--with-logo .show-hero-recent-activity {
    margin-top: 0.5rem;
}

.show-hero-image-wrap {
    position: relative;
    width: 100%;
    max-height: 50vh;
    min-height: 240px;
    overflow: hidden;
    background: #0f0f0f;
}

.show-hero-social {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 20;
    pointer-events: auto;
}

.show-hero-social-links.social-links--icons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.show-hero-social-links.social-links--icons li {
    margin: 0;
}

.show-hero-social-links.social-links--icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    transition: background 0.2s, color 0.2s, transform 0.15s;
}

.show-hero-social-links.social-links--icons a:hover {
    background: #00E5FF;
    color: #000000;
    transform: scale(1.08);
}

.show-hero-social-links .social-links__icon {
    width: 20px;
    height: 20px;
}

@media (max-width: 768px) {
    .show-hero-social {
        display: none;
    }
}

.show-hero-image-wrap img {
    width: 100%;
    height: 100%;
    max-height: 50vh;
    min-height: 240px;
    object-fit: cover;
    object-position: center 25%;
    display: block;
}

.show-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, transparent 40%, rgba(0, 0, 0, 0.85) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0;
}

.show-hero-cta-bottom {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.25rem 2rem 1.5rem;
    box-sizing: border-box;
}

.show-hero-cta {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
}

@media (min-width: 1025px) {
    .show-hero-head {
        text-align: center;
        padding: 1.5rem 2rem 1.25rem;
    }

    .show-hero-head--with-logo {
        padding: 2rem 2rem 1.5rem;
    }

    .show-hero-head--with-logo .show-hero-subsite-logo {
        margin-bottom: 1.25rem;
    }

    .show-hero-title {
        font-size: 3.5rem;
        letter-spacing: 0.15em;
    }

    .show-hero-head--with-logo .show-hero-title {
        font-size: 2.5rem;
        letter-spacing: 0.12em;
    }

    .show-hero-tagline {
        font-size: 1.2rem;
        margin-top: 0.2rem;
    }
}

.hero-cta {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-start;
}

.hero-date-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 6px 0;
}

.hero-dates-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: auto;
    max-width: 100%;
}

.hero-dates-group .hero-more-dates {
    align-self: flex-end;
    margin-top: 0;
}

.hero-cta-mobile {
    display: none;
}

.hero-date-buttons {
    display: flex;
    /* Wrap instead of running off the page when the row can't fit (long event
       names, narrow desktop/tablet widths). */
    flex-wrap: wrap;
    gap: 10px;
    max-width: 100%;
}

.hero-date-btn {
    /* Sized for readability, not density. Our audience skews over 50 and these buttons ARE the
       primary CTA on desktop — an 11px date is a date nobody squints at twice. Everything here
       is set in rem so it tracks a browser's own text-size setting. */
    min-width: 11rem;
    /* Cap the width so a long event name ellipsizes instead of stretching the
       button (and the whole row) past the edge of the hero. */
    max-width: 14rem;
    min-height: 3.25rem;
    flex: 0 1 auto;
    /* Width deliberately UNCHANGED from the small-text version: the hero overlay is
       absolutely positioned against the image, so a wider button would wrap the five-date
       row onto a second line and push the CTA out of the hero. The growth goes into text
       size and height, not track width. */
    padding: 0.7rem 0.85rem;
    font-size: 0.95rem;
    text-align: center;
    white-space: nowrap;
    /* Outline style so dates don’t compete with main CTA */
    background: rgba(15, 15, 22, 0.95);
    color: #FFD700;
    border: 1px solid rgba(255, 215, 0, 0.6);
    font-weight: 700;
    letter-spacing: 0.03em;
    box-shadow: none;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.hero-date-btn:hover {
    background: rgba(30, 28, 35, 0.98);
    border-color: #FFD700;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.25);
}

/* Sold-out date in the hero row.
   A sold-out date should RECEDE, not shout: a saturated red fill made the one date nobody can buy
   the loudest thing in the row and pulled the eye straight to it. This mutes it instead, so the
   bookable dates keep the visual weight while the label stays unmistakable.

   The `body[class]` prefix is deliberate. Every theme sets `body.theme-x .hero-date-btn`
   {background, color, border-color}, which loads after this file and out-specifies a plain
   `.hero-date-btn-sold-out` — that is why sold-out dates on the themed sub-sites (motownbrunch.com)
   rendered identically to available ones. This wins on specificity regardless of load order, and
   keeps one treatment across every theme rather than a per-theme copy that drifts. */
body[class] .hero-date-btn.hero-date-btn-sold-out {
    /* Neutral, desaturated — reads "unavailable" in both the yellow and blue themes. */
    background: rgba(24, 24, 30, 0.94);
    border-color: rgba(248, 113, 113, 0.4);
    color: #a1a1aa;
    /* Room for the SOLD OUT label above the date. */
    padding-top: 1.3rem;
    box-shadow: none;
}
/* The date itself must not keep the theme's bright link colour — that reads as bookable. */
body[class] .hero-date-btn.hero-date-btn-sold-out .hero-date-btn-line,
body[class] .hero-date-btn.hero-date-btn-sold-out .hero-date-btn-event-name {
    color: #a1a1aa;
}
/* Still a link — it leads to the sold-out ticket page, which offers the other dates — so the
   hover acknowledges the click without promising availability. */
body[class] .hero-date-btn.hero-date-btn-sold-out:hover {
    background: rgba(32, 32, 40, 0.98);
    border-color: rgba(248, 113, 113, 0.6);
    color: #d4d4d8;
    box-shadow: none;
}
body[class] .hero-date-btn.hero-date-btn-sold-out:hover .hero-date-btn-line {
    color: #d4d4d8;
}
.hero-date-btn-line-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    width: 100%;
    min-width: 0;
    text-align: center;
    line-height: 1.25;
}
.hero-date-btn-line {
    display: block;
    white-space: nowrap;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.hero-date-btn-event-name {
    display: block;
    width: 100%;
    font-size: 0.82rem;
    font-weight: 600;
    color: #00E5FF;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.hero-date-btn-book-now {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    opacity: 0.95;
}
/* The label was dark red (#7f1d1d) sitting on the old red fill — barely legible, which is how it
   ended up looking like grey smudge in the yellow theme. Light red on the muted ground clears
   contrast comfortably. */
body[class] .hero-date-btn.hero-date-btn-sold-out::before {
    content: "SOLD OUT";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    padding: 3px 2px;
    font-size: clamp(0.45rem, 1.2vw, 0.6rem);
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #fca5a5;
    background: rgba(127, 29, 29, 0.55);
    border-bottom: 1px solid rgba(248, 113, 113, 0.3);
    line-height: 1.2;
    text-align: center;
    pointer-events: none;
}
.hero-date-btn-sold-out:hover::before {
    color: #fff;
}

.hero-more-dates {
    display: inline-block;
    font-size: 0.9rem;
    color: #00E5FF;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 229, 255, 0.7);
    transition: color 0.2s ease, border-color 0.2s ease;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.hero-more-dates:hover {
    color: #fff;
    border-bottom-color: #fff;
}

.cta-button {
    background: #FFD700;
    color: #000000;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 0.875rem 2rem;
    border-radius: 6px;
    border: none;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5), 0 0 30px rgba(255, 215, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.cta-button:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 0 35px rgba(255, 215, 0, 0.4);
}

/* Hero date buttons use two classes; this higher-specificity rule ensures
   the dark overlay style wins over the base .cta-button yellow. */
.cta-button.hero-date-btn {
    background: rgba(15, 15, 22, 0.95);
    color: #FFD700;
    border: 1px solid rgba(255, 215, 0, 0.6);
    box-shadow: none;
}
.cta-button.hero-date-btn:hover {
    background: rgba(30, 28, 35, 0.98);
    border-color: #FFD700;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.25);
    filter: none;
}
.cta-button.hero-date-btn-sold-out {
    background: #b91c1c;
    border-color: #dc2626;
    color: #fff;
    box-shadow: none;
}
.cta-button.hero-date-btn-sold-out:hover {
    background: #dc2626;
    border-color: #ef4444;
    box-shadow: 0 0 12px rgba(220, 38, 38, 0.4);
    filter: none;
}

.starting-price {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #FFD700;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 4px 8px rgba(0, 0, 0, 0.5),
        0 0 12px rgba(255, 215, 0, 0.5),
        0 0 24px rgba(255, 215, 0, 0.3);
}

.show-layout {
    display: grid;
    grid-template-columns: 65% 35%;
    gap: 2rem;
    margin-top: 24px;
}

.section-card {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

/* In-page keyword jump-nav (SEO interlinking to Guest Reviews & Venue Information).
   Neutral outline at rest, brand-accent fill on hover — mirrors the site's social-icon
   hover pattern. Accent is theme-driven via --scs-jump-accent so no theme file is touched;
   the default (cyan) and each theme's override are declared together right here. */
:root {
    --scs-jump-accent: #00E5FF;
    --scs-jump-accent-ink: #000000;
}
body.theme-light,
body.theme-beige   { --scs-jump-accent: #0891b2; --scs-jump-accent-ink: #ffffff; }
body.theme-warm    { --scs-jump-accent: #fbbf24; --scs-jump-accent-ink: #000000; }
body.theme-modern  { --scs-jump-accent: #60a5fa; --scs-jump-accent-ink: #ffffff; }
body.theme-red     { --scs-jump-accent: #ef4444; --scs-jump-accent-ink: #000000; }
body.theme-americana { --scs-jump-accent: #dc2626; --scs-jump-accent-ink: #ffffff; }

.show-jump-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin: 0 0 1.5rem;
}

.show-jump-nav a {
    display: inline-block;
    padding: 0.45rem 0.95rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    opacity: 0.72;
    transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.show-jump-nav a:hover,
.show-jump-nav a:focus-visible {
    opacity: 1;
    background: var(--scs-jump-accent);
    border-color: var(--scs-jump-accent);
    color: var(--scs-jump-accent-ink);
    box-shadow: 0 0 10px color-mix(in srgb, var(--scs-jump-accent) 45%, transparent);
}

/* Offset anchored jumps so a sticky header doesn't cover the section heading. */
#guest-reviews,
#venue-information {
    scroll-margin-top: 90px;
}

.section-card h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #00E5FF;
    margin-top: 0;
    margin-bottom: 1rem;
    border-bottom: 2px solid #00E5FF;
    padding-bottom: 0.5rem;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.3);
}

.section-card p {
    font-size: 1rem;
    line-height: 1.6;
    color: #ffffff;
}

.about-content p {
    margin: 0 0 1rem;
    color: #e6e6ef;
    line-height: 1.8;
}

.about-content p:last-child {
    margin-bottom: 0;
}

.about-content ul,
.about-content ol {
    margin: 0.75rem 0 0.5rem;
    padding-left: 1.8rem;
    margin-left: 0.6rem;
    color: #e6e6ef;
}

.about-content li {
    margin-bottom: 0.6rem;
    line-height: 1.7;
}

.read-more {
    color: #00E5FF;
    font-weight: 600;
    margin-top: 1rem;
    display: inline-block;
}

.highlights-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
    font-size: 0.95rem;
}

.highlights-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 2;
}

.highlights-list li::before {
    content: '✓';
    color: #00FF7F;
}

.venue-info {
    display: grid;
    gap: 10px;
    font-size: 0.95rem;
}

.venue-info span {
    color: #00E5FF;
    margin-right: 8px;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.section-card iframe {
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.2);
}

.photo-grid img {
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #333;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.photo-grid img:hover {
    border-color: #00E5FF;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.4);
}

/* Performers section – matches section-card / quick-glance layout */
.performers-list-plain {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: #c7c7d6;
}
/* Cast-bio layout: horizontal cards (avatar + bio) so long bios read across the
   full card width instead of stacking into a tall, narrow column. Capped at two
   columns on desktop, single column on phones. */
.performers-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 769px) {
    .performers-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.performer-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 1.1rem;
    padding: 1.25rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s, background 0.2s;
}

.performer-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
    transform: translateY(-2px);
}

.performer-image {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    border: 2px solid rgba(255, 255, 255, 0.12);
    background: #181821;
    flex-shrink: 0;
}

/* Initial-letter placeholder — much better than a dashed circle.
   Color rotates per --performer-index so a row of placeholders has visual rhythm. */
.performer-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(135deg, #1f2030 0%, #161724 100%);
}
.performer-initials {
    font-family: 'Montserrat', 'Inter', system-ui, sans-serif;
    font-weight: 700;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.85);
    user-select: none;
}
/* Subtle palette rotation for empty-state placeholders so multiple in a row don't look identical */
.performer-card:nth-child(3n+1) .performer-image-placeholder { background: linear-gradient(135deg, #1f2030 0%, #161724 100%); }
.performer-card:nth-child(3n+2) .performer-image-placeholder { background: linear-gradient(135deg, #2a1f2c 0%, #1a1620 100%); }
.performer-card:nth-child(3n+3) .performer-image-placeholder { background: linear-gradient(135deg, #1c2434 0%, #141826 100%); }

.performer-info {
    flex: 1;
    min-width: 0;
    padding-top: 0.15rem;
}

.performer-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
    margin-bottom: 0.35rem;
}

.performer-description {
    font-size: 0.9rem;
    color: #c7c7d6;
    line-height: 1.45;
}

.performer-description p {
    margin: 0 0 0.6em;
}

.performer-description p:last-child {
    margin-bottom: 0;
}

.performer-description a {
    color: inherit;
    text-decoration: underline;
}

.performer-description strong {
    font-weight: 600;
}

.gallery-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 24px;
}

.gallery-modal.open {
    display: flex;
}

.gallery-modal img {
    max-width: 95vw;
    max-height: 85vh;
    border-radius: 12px;
    border: 2px solid #333;
    box-shadow: 0 0 25px rgba(0, 229, 255, 0.25);
}

.gallery-modal .close-button {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: 2px solid #00E5FF;
    color: #00E5FF;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
}

.reviews {
    display: grid;
    gap: 16px;
}

.review-card {
    background: rgba(255, 255, 255, 0.03);
    border-left: 2px solid #00E5FF;
    padding: 1rem;
}

.quick-glance-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1.25rem;
}

.quick-glance-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.quick-glance-icon {
    font-size: 1.3rem;
    color: #7aa2ff;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    line-height: 1;
}

.quick-glance-icon .material-icons {
    font-size: 24px;
    color: inherit;
}

.quick-glance-icon-image {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.quick-glance-icon-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.quick-glance-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2px;
    font-size: 0.95rem;
}

.quick-glance-text {
    color: #c7c7d6;
    font-size: 0.9rem;
    line-height: 1.35;
}

.quick-glance-item:nth-child(odd) .quick-glance-icon {
    color: #00E5FF;
}

.quick-glance-item:nth-child(even) .quick-glance-icon {
    color: #a78bfa;
}

.badge-row {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.show-badge {
    background: #1b2c5a;
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

/* Follow section: icon row (used in body; hero uses .show-hero-social-links) */
.show-social-links.social-links--icons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.show-social-links.social-links--icons li {
    margin: 0;
}

.show-social-links.social-links--icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    color: #ffffff;
    transition: background 0.2s, color 0.2s, transform 0.15s;
}

.show-social-links.social-links--icons a:hover {
    background: #00E5FF;
    color: #000000;
    transform: scale(1.06);
}

.show-social-links.social-links--icons .social-links__icon {
    width: 22px;
    height: 22px;
}

.review-card .stars {
    color: #FFD700;
}

.review-card p {
    font-style: italic;
    margin: 0.5rem 0;
    font-size: 0.95rem;
}

.review-card .name {
    font-size: 0.875rem;
    color: #9fa0ad;
}

.venue-link {
    color: #00E5FF;
    text-decoration: none;
}

.venue-link:hover {
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
}

.faq-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #333;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}

.faq-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
}

.faq-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 1rem;
    color: #c7c7d6;
    font-size: 0.9rem;
}

.faq-item.open {
    border-left: 3px solid #00E5FF;
}

.faq-item.open .faq-body {
    max-height: 400px;
    padding-bottom: 1rem;
}

.sidebar {
    position: sticky;
    top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Denser sidebar cards vs main column .section-card */
.sidebar .sidebar-section.section-card {
    padding: 0.85rem 0.9rem;
    margin-bottom: 0.7rem;
}

.sidebar-section {
    margin-bottom: 0.7rem;
}

.sidebar-section:last-child {
    margin-bottom: 0;
}

.sidebar-section img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    object-fit: cover;
    margin: 0;
}

.sidebar-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    font-size: 0.78rem;
    line-height: 1.35;
    color: #9fa0ad;
    padding: 0.4rem 0 0;
}

.sidebar-meta-venue {
    flex: 1 1 100%;
}

.sidebar-meta .venue-link {
    color: #00E5FF;
    text-decoration: none;
}

.sidebar-meta .venue-link:hover {
    text-decoration: underline;
}

.sidebar-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    margin-top: 0.35rem;
    margin-bottom: 0.1rem;
    line-height: 1.2;
}

.sidebar-venue {
    font-size: 0.9rem;
    color: #9fa0ad;
    margin-top: 0.35rem;
    margin-bottom: 0;
    letter-spacing: 0.02em;
}

.sidebar-date-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0.3rem 0 0;
    min-width: 0;
}

#upcoming-dates {
    display: flex;
    flex-direction: column;
}

.sidebar-date-link {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* 44px+ tall so it is a comfortable target for an older hand on a phone, and large
       enough to read at arm's length without zooming. */
    min-height: 3.1rem;
    min-width: 0;
    padding: 0.7rem 0.65rem;
    font-size: 0.95rem;
    text-align: center;
    background: rgba(255, 215, 0, 0.07);
    color: #FFD700;
    border: 1px solid rgba(255, 215, 0, 0.5);
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.sidebar-date-link-time {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.3;
    min-width: 0;
    word-break: break-word;
}

.sidebar-date-link-name {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #00E5FF;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.sidebar-date-link-duration {
    display: block;
    font-size: 0.82rem;
    color: #9ca3af;
    line-height: 1.2;
    margin-top: 1px;
}

.sidebar-date-link:hover {
    background: rgba(255, 215, 0, 0.18);
    border-color: #FFD700;
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.3);
    color: #fff;
}

/* Same specificity guard as the hero buttons: the red and americana themes restyle
   `.sidebar-date-link` and would otherwise erase the sold-out treatment on those sub-sites. */
body[class] .sidebar-date-link.sidebar-date-link-sold-out {
    background: rgba(185, 28, 28, 0.12);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fca5a5;
}
body[class] .sidebar-date-link.sidebar-date-link-sold-out:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: #fff;
}
.sold-out-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 3px 8px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    background: #dc2626;
    color: #fff;
    border-radius: 4px;
    white-space: nowrap;
}

/* Sidebar upcoming dates: stack sold-out badge on very narrow viewports */
@media (max-width: 768px) {
    .sidebar-date-link {
        flex-direction: column;
        min-height: 3.4rem;
        padding: 0.7rem 0.6rem;
    }
    .sidebar-date-link .sold-out-badge {
        margin-left: 0;
        margin-top: 2px;
    }
}

.sidebar-more-dates {
    display: inline-block;
    margin-top: 8px;
    margin-left: auto;
    font-size: 0.92rem;
    color: #00E5FF;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
    align-self: flex-end;
}

.sidebar-more-dates:hover {
    color: #fff;
    border-bottom-color: #00E5FF;
}

button.sidebar-more-dates--button {
    display: block;
    width: 100%;
    margin-top: 10px;
    margin-left: 0;
    padding: 0;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: #00e5ff;
    background: none;
    border: none;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}

button.sidebar-more-dates--button:hover {
    color: #fff;
    border-bottom-color: #00e5ff;
}

.sidebar-tour-departure-hint,
.sidebar-tour-book-hint {
    margin: 0.35rem 0 0.5rem;
    font-size: 0.88rem;
    line-height: 1.45;
    color: #c9cdd4;
}

.hero-tour-departure-note {
    margin: 0.65rem 0 0;
    max-width: 22rem;
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
    text-align: center;
}

.hero-tour-departure-note strong {
    font-weight: 700;
    color: #fff;
}

.sidebar-more-dates-under-calendar {
    display: block;
    width: 100%;
    margin-top: 1rem;
    margin-left: 0;
    text-align: center;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid #2b2b38;
    align-self: stretch;
    text-decoration: none;
    border-radius: 6px;
    box-sizing: border-box;
}

.sidebar-more-dates-under-calendar.cta-button {
    margin-top: 1rem;
    border-top: 1px solid #2b2b38;
    padding-top: 1rem;
    color: #000000;
    border-bottom: none;
}

.sidebar-more-dates-under-calendar.cta-button:hover {
    color: #000000;
}

.sidebar-price {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.15;
    margin: 0;
    color: #FFD700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

.sidebar-price-varies {
    font-size: 1.25rem;
    letter-spacing: 0.03em;
}

/* One-date show: the date is stated above the CTA as fact, not offered as a second
   button. A one-row "Upcoming Dates" list under a Get Tickets button is the same click
   twice. */
.sidebar-single-date {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin: 0.45rem 0 0;
}

.sidebar-single-date-label {
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9fa0ad;
}

.sidebar-single-date-value {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    color: #00E5FF;
}

.sidebar-single-date .sold-out-badge {
    margin-top: 2px;
}

.sidebar-cta-primary {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.85rem 1rem;
    font-size: 1.05rem;
    font-weight: 800;
}

.sidebar-date {
    color: #00E5FF;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
}

.sidebar-time {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.9rem;
}

.sidebar-cta {
    font-size: 1.05rem;
    padding: 0.85rem 1.5rem;
    border-radius: 6px;
    letter-spacing: 0.1em;
}

.trust-badges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #9fa0ad;
    text-align: center;
}

.section-card:has(.trust-badges) {
    padding: 0.75rem 1rem;
}

.sidebar-other-shows {
    display: grid;
    gap: 0.75rem;
}

.sidebar-other-shows-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #9fa0ad;
    margin-bottom: 0.5rem;
}

.sidebar-show-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: rgba(28, 28, 36, 0.8);
    border: 1px solid #2b2b38;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.sidebar-show-card:hover {
    border-color: rgba(255, 215, 0, 0.4);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.sidebar-show-card img {
    width: 100%;
    /* Show/tour card art is authored at 800x533 (3:2). Matching that here means object-fit
       has nothing to crop, so titles baked into the artwork stay fully readable. */
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}

.sidebar-show-card-info {
    padding: 0.65rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sidebar-show-card-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #f5f5f7;
    line-height: 1.3;
}

.sidebar-show-card-price {
    font-size: 0.8rem;
    color: #FFD700;
    font-weight: 700;
}

.recent-activity {
    background: rgba(0, 255, 127, 0.05);
    border-left: 2px solid #00FF7F;
    padding: 0.45rem 0.55rem;
    font-size: 0.72rem;
    line-height: 1.3;
    color: #00FF7F;
}

.sidebar-section > .recent-activity {
    margin-bottom: 0.45rem;
}

.mini-calendars-wrap {
    margin-top: 0;
}

.mini-calendars-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #00E5FF;
    margin-bottom: 1rem;
    text-align: center;
}

.mini-calendars {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.mini-calendar {
    background: rgba(18, 18, 24, 0.8);
    border: 1px solid #2b2b38;
    border-radius: 10px;
    padding: 1rem;
}

.mini-calendar-month {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: #f5f5f7;
    text-align: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #2b2b38;
}

.mini-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    font-size: 0.95rem;
    color: #9fa0ad;
    text-align: center;
}

.mini-calendar-head {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(0, 229, 255, 0.9);
}

.mini-calendar-day {
    padding: 9px 2px;
    border-radius: 6px;
    font-weight: 500;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.mini-calendar-day.has-event {
    background: rgba(0, 229, 255, 0.15);
    border: 1px solid rgba(0, 229, 255, 0.5);
    color: #00E5FF;
    cursor: pointer;
}

.mini-calendar-day.has-event:hover {
    background: rgba(0, 229, 255, 0.28);
    border-color: #00E5FF;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.3);
    transform: scale(1.06);
}

.mini-calendar-day.has-event a {
    color: #00E5FF;
    font-weight: 700;
    text-decoration: none;
    display: block;
}

.mini-calendar-day.has-event a:hover {
    color: #fff;
}

.mini-calendar-day.has-event:active {
    transform: scale(0.98);
}

.mini-calendar-day.today {
    background: rgba(255, 215, 0, 0.12);
    border: 1px solid rgba(255, 215, 0, 0.5);
    color: #FFD700;
    font-weight: 700;
}

.mini-calendar-day.today.has-event {
    background: rgba(0, 229, 255, 0.2);
    border-color: rgba(0, 229, 255, 0.7);
    box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.4);
}

.mini-calendar-day.today.has-event a {
    color: #00E5FF;
}

.mini-calendar-day.empty {
    background: transparent;
    color: #3a3a45;
}

.mini-calendar-day.past {
    color: #4a4a55;
    cursor: default;
}

.mini-calendar-day.past.has-event {
    background: transparent;
    border-color: transparent;
    color: #4a4a55;
    cursor: default;
    box-shadow: none;
}

.mini-calendar-day.past.has-event:hover {
    background: transparent;
    border-color: transparent;
    transform: none;
    box-shadow: none;
}

.mini-calendar-day.sold-out .sold-out-dot {
    color: #ef4444;
    font-size: 0.5rem;
    vertical-align: super;
    margin-left: 1px;
}

.mobile-sticky {
    display: none;
}

@media (max-width: 768px) {
    .show-hero-head {
        padding: 0.75rem 1rem 0.5rem;
        text-align: center;
    }

    .show-hero-title {
        font-size: 2.25rem;
        letter-spacing: 0.08em;
        line-height: 1.15;
    }

    .show-hero-tagline {
        font-size: 1.1rem;
        margin-top: 0.2rem;
    }

    .show-hero-image-wrap {
        max-height: none;
        min-height: 0;
        overflow: visible;
    }

    .show-hero-image-wrap img {
        width: 100%;
        height: 56vw;
        max-height: 300px;
        min-height: 160px;
        object-fit: cover;
        object-position: center 20%;
    }

    /* Move CTA out of the image on mobile so the artwork is unobstructed */
    .show-hero-overlay {
        position: static;
        inset: auto;
        background: linear-gradient(180deg, #111 0%, #000 100%);
    }

    .show-hero-cta-bottom {
        padding: 1rem 1rem 1.25rem;
    }

    .show-hero-cta {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .starting-price {
        font-size: 1.15rem;
    }

    .hero-cta-mobile {
        display: block;
        width: 100%;
        text-align: center;
        padding: 0.875rem 1.25rem;
        font-size: 1rem;
    }

    .hero-date-label,
    .hero-dates-group,
    .hero-cta-desktop {
        display: none !important;
    }

    .show-page {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* MOBILE ORDER: BUY PANEL FIRST.
       The buy card is the last thing in the DOM (it is the desktop right rail), so on a phone
       the dates landed ~9,900px down — roughly 25 screens past the description, reachable only
       by tapping the hero CTA or the sticky bar. `display: contents` dissolves the aside into
       the layout so its cards can be ordered individually: buy card above the copy, and the
       calendar / trust / social / cross-sell cards back below it, where a cross-sell belongs.
       DOM order is untouched, so this changes nothing for crawlers or screen-reader order. */
    .show-layout {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding-bottom: 96px; /* clears the 78px sticky bar + safe-area inset */
    }

    /* The sticky buy bar is fixed over the bottom 78px of the screen, so at full scroll it
       sat on top of the footer's contact links. Scoped to `.show-page ~ footer` because only
       the pages that render the bar should pay for the clearance. */
    .show-page ~ footer {
        padding-bottom: 96px;
    }

    .show-layout > main {
        order: 1;
    }

    .sidebar {
        display: contents;
        position: static;
    }

    .sidebar > .sidebar-section {
        order: 2;
        margin-bottom: 1rem;
    }

    .sidebar > .sidebar-section:first-child {
        order: 0;
        margin-bottom: 1.25rem;
    }

    /* The month grid needs its width for 7 columns far more than it needs inner padding. */
    .mini-calendar {
        padding: 10px;
    }

    .photo-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .performers-grid {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    .performer-card {
        padding: 1rem;
        gap: 0.9rem;
    }

    .performer-image,
    .performer-image-placeholder {
        width: 84px;
        height: 84px;
    }

    .quick-glance-grid {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
    }

    .mobile-sticky {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
        background: #000000;
        padding: 12px 16px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        border-top: 1px solid #333;
    }

    .mobile-sticky .cta-button {
        display: block;
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    /* Mobile sticky: price on the left, actions filling the rest */
    .mobile-sticky {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
    }
    .mobile-sticky-price {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        line-height: 1.1;
        flex-shrink: 0;
        min-width: 0;
    }
    .mobile-sticky-price-label {
        font-size: 0.65rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        opacity: 0.7;
        color: #ffffff;
    }
    .mobile-sticky-price-value {
        font-size: 1.1rem;
        font-weight: 700;
        color: #ffffff;
        margin-top: 0.1rem;
        white-space: nowrap;
    }
    .mobile-sticky-actions {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        min-width: 0;
    }
    .mobile-sticky-actions .cta-button {
        width: 100%;
    }

    .tour-viator-section {
        padding: 1rem 1rem 1.2rem;
        border-radius: 12px;
    }

    .tour-viator-pickup-stop-list {
        gap: 0.55rem;
    }
}

/* -------------------------------------------------------------------------- */
/* SCS tour landing — Viator-inspired sections                                */
/* -------------------------------------------------------------------------- */
.tour-viator-section {
    background: #0f0f14;
    border: 1px solid #2a2a36;
    border-radius: 14px;
    padding: 1.35rem 1.5rem 1.5rem;
    margin-bottom: 1.25rem;
}

.tour-partner-attribution {
    text-align: center;
}

.tour-partner-attribution-label {
    margin: 0 0 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9ca3af;
}

.tour-partner-attribution-name {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #f5f5f7;
}

.section-card.tour-partner-attribution .tour-partner-attribution-label {
    color: #6b7280;
}

.section-card.tour-partner-attribution .tour-partner-attribution-name {
    color: #f5f5f7;
}

.tour-viator-h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    letter-spacing: 0.02em;
}

.tour-viator-h2--inline {
    margin: 0;
}

.tour-viator-lead {
    font-size: 1.05rem;
    color: #c4c4d4;
    margin: 0 0 1rem;
    line-height: 1.55;
}

.tour-viator-about {
    color: #e6e6ef;
    line-height: 1.65;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.tour-viator-about a {
    color: #38bdf8;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tour-viator-about a:hover {
    color: #7dd3fc;
}

.tour-viator-overview-bullets {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: grid;
    gap: 0.65rem;
}

.tour-viator-overview-bullets li {
    position: relative;
    padding-left: 1.1rem;
    color: #e5e5e5;
    font-size: 0.98rem;
    line-height: 1.45;
}

.tour-viator-overview-bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.45rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00e5ff;
}

.tour-viator-disclosure {
    border: none;
    margin: 0;
    padding: 0;
}

.tour-viator-disclosure-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    user-select: none;
}

.tour-viator-disclosure-summary::-webkit-details-marker {
    display: none;
}

.tour-viator-chevron {
    width: 10px;
    height: 10px;
    border-right: 2px solid #9ca3af;
    border-bottom: 2px solid #9ca3af;
    transform: rotate(-135deg);
    flex-shrink: 0;
    margin-top: 4px;
}

.tour-viator-disclosure[open] .tour-viator-chevron {
    transform: rotate(45deg);
    margin-top: 0;
}

.tour-viator-disclosure > *:not(summary) {
    margin-top: 1.1rem;
}

.tour-viator-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 2rem;
}

@media (max-width: 720px) {
    .tour-viator-two-col {
        grid-template-columns: 1fr;
    }
}

.tour-viator-col-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
    margin: 0 0 0.5rem;
    font-weight: 600;
}

.tour-viator-checklist,
.tour-viator-excludelist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.55rem;
}

.tour-viator-checklist li,
.tour-viator-excludelist li {
    position: relative;
    padding-left: 1.5rem;
    color: #e8e8ef;
    font-size: 0.95rem;
    line-height: 1.45;
}

.tour-viator-checklist li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #34d399;
    font-weight: 700;
}

.tour-viator-excludelist li::before {
    content: '✕';
    position: absolute;
    left: 0;
    color: #f87171;
    font-weight: 700;
    font-size: 0.85rem;
}

.tour-viator-meeting-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tour-viator-meeting-intro {
    margin-bottom: 0.75rem;
}

.tour-viator-meeting-notes--after-detail {
    margin-top: 1rem;
}

.tour-viator-pickup-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9ca3af;
    margin: 0.35rem 0 0.35rem;
}

.tour-viator-pickup-select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 0 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    border: 1px solid #3f3f52;
    background: #0a0a10;
    color: #f5f5f7;
    font-size: 0.95rem;
    font-family: inherit;
    cursor: pointer;
}

.tour-viator-pickup-select:focus {
    outline: none;
    border-color: #00e5ff;
    box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.2);
}

.tour-viator-pickup-detail {
    padding: 0.85rem 1rem;
    border-radius: 10px;
    border: 1px solid #2f2f3d;
    background: #12121a;
    margin-bottom: 0.25rem;
}

.tour-viator-pickup-detail-line {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #e5e5e5;
}

.tour-viator-pickup-detail-line + .tour-viator-pickup-detail-line {
    margin-top: 0.5rem;
}

.tour-viator-pickup-detail-line--muted {
    font-size: 0.88rem;
    color: #9ca3af;
}

.tour-viator-meeting-card {
    border: 1px solid #2f2f3d;
    border-radius: 12px;
    padding: 1rem 1.1rem;
    background: #12121a;
}

.tour-viator-meeting-card-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.tour-viator-meeting-dest {
    font-size: 0.88rem;
    color: #5eead4;
    margin: 0 0 0.35rem;
}

.tour-viator-meeting-address {
    margin: 0 0 0.5rem;
    color: #e5e5e5;
    line-height: 1.45;
    font-size: 0.95rem;
}

.tour-viator-maps-link {
    color: #38bdf8;
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.tour-viator-maps-link:hover {
    text-decoration: underline;
}

.tour-viator-meeting-notes {
    margin: 0;
    font-size: 0.9rem;
    color: #b4b4c6;
    line-height: 1.5;
}

.tour-viator-meeting-notes--departure {
    margin-bottom: 0.75rem;
    color: #d1d5db;
}

.tour-viator-dropoff-note {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid #2f2f3d;
    color: #c4c4d4;
}

/* Mobile: long pickup lists use a dropdown (see tour-pickup-stops-mobile-desktop); grid from md+ */
.tour-viator-pickup-mobile-ui {
    margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
    .tour-viator-pickup-mobile-ui {
        display: none !important;
    }
}

/* Pickup grid: single column on small phones; 2-up from tablet / narrow desktop */
.tour-viator-pickup-stop-list {
    list-style: none;
    margin: 0.5rem 0 0.75rem;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
}

@media (min-width: 600px) {
    .tour-viator-pickup-stop-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }
}

/* Third column only on wide viewports so the ~65% main column stays readable */
@media (min-width: 1320px) {
    .tour-viator-pickup-stop-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/*
 * Multistop pickup: dropdown replaces the grid below md. Must come AFTER .tour-viator-pickup-stop-list
 * display:grid rules — same specificity would otherwise let grid win on small screens.
 */
@media (max-width: 767px) {
    ul.tour-viator-pickup-stop-list.tour-viator-pickup-stop-list--multistop {
        display: none !important;
    }
}

.tour-viator-pickup-stop-item {
    margin: 0;
    min-width: 0;
    padding: 0.65rem 0.72rem;
    border-radius: 10px;
    border: 1px solid #2f2f3d;
    background: #0d0d14;
}

@media (min-width: 600px) {
    .tour-viator-pickup-stop-item {
        padding: 0.75rem 0.85rem;
    }
}

.tour-viator-pickup-stop-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: #f5f5f7;
    margin-bottom: 0.25rem;
}

.tour-viator-pickup-stop-address {
    font-size: 0.88rem;
    color: #e5e5e5;
    line-height: 1.45;
    margin-bottom: 0.25rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.tour-viator-pickup-stop-detail {
    font-size: 0.86rem;
    color: #9ca3af;
    line-height: 1.45;
    margin-bottom: 0.25rem;
}

.tour-viator-pickup-stop-time {
    font-size: 0.84rem;
    color: #a5b4fc;
    line-height: 1.45;
}

.tour-viator-hours {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 1rem 0 0;
    font-size: 0.95rem;
    color: #d1d5db;
}

.tour-viator-hours-icon {
    font-size: 1.1rem !important;
    color: #a7f3d0;
}

.tour-viator-itinerary {
    list-style: none;
    padding: 0 0 0 0.25rem;
    margin: 0;
    position: relative;
}

.tour-viator-itinerary::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: #3f3f52;
}

.tour-viator-itinerary-item {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    position: relative;
}

.tour-viator-itinerary-marker {
    display: flex;
    justify-content: center;
    padding-top: 2px;
    z-index: 1;
}

.tour-viator-itinerary-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    color: #0a0a0f;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tour-viator-itinerary-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #6b7280;
    margin-top: 8px;
}

.tour-viator-itinerary-item--pass .tour-viator-itinerary-title {
    color: #c4c4d4;
}

.tour-viator-itinerary-title {
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    margin-bottom: 0.25rem;
}

.tour-viator-pass-by {
    font-weight: 500;
    color: #9ca3af;
    font-size: 0.9rem;
}

.tour-viator-itinerary-desc {
    margin: 0 0 0.35rem;
    color: #d4d4e0;
    font-size: 0.92rem;
    line-height: 1.55;
}

.tour-viator-itinerary-meta {
    margin: 0;
    font-size: 0.82rem;
    color: #9ca3af;
}

.tour-viator-addinfo-list {
    margin: 0;
    padding-left: 1.15rem;
    color: #e5e5e5;
    line-height: 1.55;
    font-size: 0.92rem;
}

.tour-viator-faq-card .faq-item {
    border-color: #2f2f3d;
}

.tour-viator-faq-count {
    font-weight: 600;
    color: #9ca3af;
    font-size: 1rem;
}

/* SCS tour: two-month mini-calendar + links (no modal) */
.mini-calendars--tour {
    gap: 1rem;
}

.tour-calendar-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
    margin-top: 1rem;
}

a.tour-see-more-dates-btn {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    text-decoration: none;
}

.tour-calendar-full-link {
    display: block;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 600;
    color: #94a3b8;
    text-decoration: underline;
}

.tour-calendar-full-link:hover {
    color: #cbd5e1;
}

/* Tour hero: desktop BOOK NOW (mobile uses .hero-cta-mobile) */
.hero-book-tour-cta {
    display: none;
}

@media (min-width: 769px) {
    .hero-book-tour-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.65rem;
        padding: 0.55rem 1.25rem;
        font-size: 0.82rem;
        text-decoration: none;
    }
}

button.hero-book-tour-cta,
button.hero-cta-mobile {
    font: inherit;
    cursor: pointer;
    border: none;
    appearance: none;
}

/* Tour: simple date-picker dialog + FAB (desktop) */
.tour-date-picker-dialog {
    padding: 0;
    border: none;
    background: transparent;
    max-width: min(420px, calc(100vw - 1.5rem));
    width: min(420px, calc(100vw - 1.5rem));
    margin: auto;
    position: fixed;
    inset: 0;
    height: fit-content;
    max-height: calc(100vh - 2rem);
    overflow: visible;
}

.tour-date-picker-dialog::backdrop {
    background: rgba(0, 0, 0, 0.72);
}

.tour-date-picker-card {
    width: 100%;
    box-sizing: border-box;
    background: #111827;
    color: #f3f4f6;
    padding: 1.35rem 1.25rem 1.15rem;
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
    border: 1px solid #374151;
}

.tour-date-picker-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.tour-date-picker-head h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
}

.tour-date-picker-close {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: 8px;
    background: #1f2937;
    color: #e5e7eb;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tour-date-picker-close:hover {
    background: #374151;
}

.tour-date-picker-lead {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    color: #9ca3af;
    line-height: 1.45;
}

.tour-date-picker-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 0.35rem;
}

.tour-date-picker-input,
.tour-date-picker-select {
    width: 100%;
    box-sizing: border-box;
    font-size: 1.05rem;
    padding: 0.85rem 0.75rem;
    border-radius: 10px;
    border: 1px solid #4b5563;
    background: #1f2937;
    color: #f9fafb;
    margin-bottom: 0.75rem;
}

.tour-date-picker-input:focus,
.tour-date-picker-select:focus {
    outline: 2px solid #fbbf24;
    outline-offset: 1px;
    border-color: #fbbf24;
}

.tour-date-picker-msg {
    font-size: 0.88rem;
    margin: 0 0 0.75rem;
    color: #d1d5db;
}

.tour-date-picker-msg--error {
    color: #fca5a5;
}

.tour-date-picker-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.tour-date-picker-primary {
    width: 100%;
    text-align: center;
    justify-content: center;
}

button.tour-date-picker-primary {
    font: inherit;
    cursor: pointer;
    border: none;
    appearance: none;
}

.tour-date-picker-cancel {
    width: 100%;
    padding: 0.65rem;
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tour-date-picker-foot {
    margin: 1rem 0 0;
    text-align: center;
    font-size: 0.85rem;
}

.tour-date-picker-foot a {
    color: #fcd34d;
}

.tour-date-picker-foot a:hover {
    color: #fde68a;
}

.tour-date-picker-fab {
    display: none;
}

@media (min-width: 769px) {
    .tour-date-picker-fab {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 1.25rem;
        right: 1.25rem;
        z-index: 90;
        padding: 0.65rem 1.1rem;
        border-radius: 999px;
        border: 1px solid #fbbf24;
        background: linear-gradient(160deg, #1f2937 0%, #111827 100%);
        color: #fef3c7;
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        cursor: pointer;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    }

    .tour-date-picker-fab:hover {
        background: #374151;
        color: #fff;
    }
}

.cta-button--outline {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #f3f4f6 !important;
    box-shadow: none !important;
}

.cta-button--outline:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
}

@media (max-width: 768px) {
    .mobile-sticky--tour-picker {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        align-items: stretch;
    }

    .mobile-sticky--tour-picker.mobile-sticky--tour-single {
        grid-template-columns: 1fr;
    }

    .mobile-sticky--tour-picker .cta-button {
        width: 100%;
        margin: 0;
        padding: 0.7rem 0.45rem;
        font-size: 0.78rem;
        letter-spacing: 0.04em;
    }

    button.tour-book-by-date-mobile {
        font: inherit;
        cursor: pointer;
        border: none;
        appearance: none;
    }
}

button.tour-pick-date-cta {
    font: inherit;
    cursor: pointer;
    border: none;
    appearance: none;
    text-align: center;
}


/* Anchor scroll offset — clear the sticky .site-header (common.css). */
#upcoming-dates,
#packages,
#reviews {
    scroll-margin-top: 80px;
}

/* ===========================================================
   Conversion / SEO additions
   - Hero rating badge (visible AggregateRating)
   - Hero trust strip (secure / instant / guaranteed)
   - Desktop sticky next-event CTA (show subsites)
   - Wider/safer mobile sticky-bar layout (price + actions)
   =========================================================== */

/* ── Hero rating badge ─────────────────────────────────────── */
.show-hero-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.55rem auto 0;
    padding: 0.3rem 0.75rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.9rem;
    line-height: 1;
    text-decoration: none;
    transition: background 0.18s, border-color 0.18s, transform 0.18s;
}
.show-hero-rating:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.32);
    color: #ffffff;
    transform: translateY(-1px);
}
.show-hero-rating-stars {
    display: inline-flex;
    align-items: center;
    gap: 0.05em;
    font-size: 1rem;
    line-height: 1;
}
.show-hero-rating-star { color: #475569; }
.show-hero-rating-star--full { color: #fbbf24; }
.show-hero-rating-star--half {
    color: #fbbf24;
    background: linear-gradient(90deg, #fbbf24 50%, #475569 50%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.show-hero-rating-text strong { font-weight: 700; margin-right: 0.25rem; }
.show-hero-rating-count { opacity: 0.85; }

/* ── Hero trust strip (compact 3-up immediately under the buy area) ── */
.show-hero-trust {
    list-style: none;
    margin: 0.85rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1.25rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
}
.show-hero-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1.2;
}
.show-hero-trust-icon {
    font-size: 1rem;
    line-height: 1;
}
.show-hero-trust-label {
    letter-spacing: 0.02em;
}
@media (max-width: 600px) {
    .show-hero-trust { gap: 0.4rem 0.85rem; font-size: 0.72rem; }
    .show-hero-trust-icon { font-size: 0.9rem; }
}

/* ── Desktop sticky next-event CTA (show subsite only — existing element) ── */
.show-subsite-next-cta {
    position: sticky;
    top: 0;
    z-index: 90;
    backdrop-filter: saturate(140%) blur(4px);
}
@media (max-width: 768px) {
    .show-subsite-next-cta { position: relative; }
}

/* "This show sells out frequently" — rendered only when the show genuinely has a sold-out date
   ahead of it (see landing.blade.php). Big and bold on purpose: it is the last thing a guest reads
   before picking a date. Themed sub-sites restyle the sidebar, so this is prefixed `body[class]`
   for the same specificity reason as the sold-out date buttons. */
/* Sell-out notice. Sits directly above the date list, so it has to inform the choice without
   becoming the loudest block on the page — the earlier version was a full-width amber slab with a
   third line of stats, and it buried the dates it was meant to send people to. Now a single-line
   flag: left accent bar, one icon, headline + one instruction, no counts. */
body[class] .sidebar-sellout-warning {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 14px;
    padding: 11px 14px;
    border-radius: 10px;
    background: rgba(251, 191, 36, 0.09);
    border: 1px solid rgba(251, 191, 36, 0.28);
    border-left: 4px solid #fbbf24;
    text-align: left;
}
body[class] .sidebar-sellout-warning__icon {
    flex: 0 0 auto;
    font-size: 1.15rem;
    line-height: 1;
    color: #fbbf24;
}
body[class] .sidebar-sellout-warning__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
body[class] .sidebar-sellout-warning__head {
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fcd34d;
}
body[class] .sidebar-sellout-warning__sub {
    margin-top: 2px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
    color: #d4d4d8;
}

/* --- Scarcity badges: still bookable, but going -------------------------------------------
   Deliberately quieter than SOLD OUT and warmer than the neutral date buttons, so the row reads
   in one glance: bookable > selling fast > almost gone > sold out. Never shows a count or a
   percentage — the copy is urgency, the numbers stay internal.
   `body[class]` prefix for the same reason as the sold-out rules: every theme restyles
   `.hero-date-btn` / `.sidebar-date-link` and loads after this file. */
body[class] .hero-date-btn.hero-date-btn-scarce--limited {
    border-color: rgba(251, 191, 36, 0.8);
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.15);
}
body[class] .hero-date-btn.hero-date-btn-scarce--almost {
    border-color: rgba(251, 146, 60, 0.75);
    box-shadow: 0 0 10px rgba(251, 146, 60, 0.18);
}
.hero-date-btn-scarcity {
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
}
body[class] .hero-date-btn-scarce--limited .hero-date-btn-scarcity {
    color: #1c1408;
    background: #fbbf24;
    border-radius: 999px;
    padding: 2px 9px;
    margin-top: 2px;
    display: inline-block;
    letter-spacing: 0.09em;
}
/* Same intent in the hero row: the almost-gone date gets a filled pill, the selling-fast date
   stays text-only, so urgency escalates visibly across the row. */
body[class] .hero-date-btn-scarce--almost .hero-date-btn-scarcity {
    color: #fff;
    background: #ea580c;
    border-radius: 999px;
    padding: 2px 9px;
    margin-top: 2px;
    display: inline-block;
    letter-spacing: 0.1em;
}

body[class] .sidebar-date-link.sidebar-date-link-scarce--limited {
    border-color: rgba(251, 191, 36, 0.45);
}
body[class] .sidebar-date-link.sidebar-date-link-scarce--almost {
    border-color: rgba(251, 146, 60, 0.6);
}
.scarcity-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 3px 9px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 4px;
    white-space: nowrap;
}
/* Filled, not tinted. A translucent amber badge disappeared against the gold date buttons on the
   default theme — it needs to read as its own object. Dark text on solid amber also clears contrast
   comfortably, which a pale amber-on-dark label did not. Gives a legible heat ladder across the
   three states: solid amber -> solid orange -> red. */
body[class] .scarcity-badge--limited {
    background: #fbbf24;
    border: 1px solid #fcd34d;
    color: #1c1408;
    box-shadow: 0 1px 8px rgba(251, 191, 36, 0.35);
}
/* "Act Now" is a call to action, so it is filled like a button rather than tinted like a label —
   the almost-gone tier should look like something you press, not something you read. */
body[class] .scarcity-badge--almost {
    background: #ea580c;
    border: 1px solid #fb923c;
    color: #fff;
    box-shadow: 0 1px 8px rgba(234, 88, 12, 0.45);
}
@media (max-width: 640px) {
    .sidebar-date-link .scarcity-badge { margin-left: 0; margin-top: 2px; }
}

/* Calendar cells: same three-step escalation, sized for the tighter grid. */
.event-item .event-scarcity {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 6px;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
    white-space: nowrap;
    vertical-align: middle;
}
body[class] .event-item.scarce--limited .event-scarcity {
    background: #fbbf24;
    border: 1px solid #fcd34d;
    color: #1c1408;
}
body[class] .event-item.scarce--almost .event-scarcity {
    background: #ea580c;
    border: 1px solid #fb923c;
    color: #fff;
}

/* Jump-nav pills: the labels carry the show name for on-page context, which is fine on desktop but
   makes two very long pills at phone width — they wrapped into a cramped block that read as broken.
   Below 640px the qualifier is dropped so the pills read "Reviews" / "Venue & Location"; the links
   and anchors are unchanged. */
@media (max-width: 640px) {
    .show-jump-nav {
        gap: 0.5rem;
    }
    .show-jump-nav .jump-nav-qualifier {
        display: none;
    }
    .show-jump-nav a {
        padding: 0.4rem 0.9rem;
        font-size: 0.85rem;
        opacity: 0.85;
    }
}

/* Calendar: SCS-native Special Event badge. These are one-off dates sitting in a grid of
   running residencies, so the pill has to read as a different kind of thing at a glance
   without competing with the scarcity pill that may sit beside it. */
.event-item .event-badge {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 6px;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
    white-space: nowrap;
    vertical-align: middle;
    background: #a78bfa;
    border: 1px solid #c4b5fd;
    color: #1a1030;
}