/*
 * Venue-specific SYOS styles.
 *
 * Keep reusable ticketing and seat-selection rules in syos-styles.css. This
 * file can be replaced or omitted when a site uses different venue graphics.
 */

/* S. Mark Taper Foundation Auditorium overview tooltip */
.taper-overview-tooltip {
    pointer-events: none;
}

.taper-overview-tooltip .tooltip-inner {
    max-width: 240px;
    padding: .7rem .9rem;
    text-align: center;
}

.taper-overview-tooltip-title,
.taper-overview-tooltip-availability,
.taper-overview-tooltip-action {
    display: block;
}

.taper-overview-tooltip-title {
    font-size: 1rem;
    font-weight: 700;
}

.taper-overview-tooltip-availability {
    margin-top: .1rem;
    font-size: .9rem;
    font-weight: 600;
}

.taper-overview-tooltip-action {
    margin-top: .35rem;
    font-size: .78rem;
    font-weight: 400;
}

/* S. Mark Taper Foundation Auditorium overview map */
.taper-overview-wrap {
    width: 100%;
}

svg#venue.taper-overview {
    display: block;
    width: 100%;
    max-width: 1100px;
    height: auto;
    margin-inline: auto;
    /* Keep the overview artwork inside its own column so it cannot paint over
       the adjacent event description or the mobile instructions. */
    overflow: hidden;
}

.taper-overview .taper-map-stage,
.taper-overview .taper-map-label,
.taper-overview .taper-map-sublabel,
.taper-overview .taper-map-legend-text,
.taper-overview .taper-map-legend-symbol {
    font-family: var(--font-primary);
/*    text-anchor: middle;*/
    pointer-events: none;
    fill: #000;
}

.taper-overview .taper-map-stage,
.taper-overview .taper-map-label {
    font-size: 19px;
    font-weight: 500;
}

.taper-overview .taper-map-sublabel {
    font-size: 14px;
    font-weight: 400;
}

.taper-overview .taper-map-label-vertical {
    font-size: 16px;
}

.taper-overview .taper-map-sublabel.taper-map-label-vertical {
    font-size: 12px;
}

.taper-overview .taper-map-label-light {
    fill: #fff;
    fill: #000
}

.taper-overview .taper-map-region {
    stroke: var(--default-brown, #8f6638);
    stroke-opacity: .5;
    stroke-width: 3px !important;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    fill: var(--default-paper, #f7f2ea) !important;
    fill-opacity: 1 !important;
/*    transition: filter 160ms ease, opacity 160ms ease, stroke 160ms ease;*/
}

.taper-overview .taper-map-section {
    cursor: pointer;
}

.taper-overview .taper-map-section:not(.sold-out):hover .taper-map-region,
.taper-overview .taper-map-section:not(.sold-out):focus-visible .taper-map-region {
    stroke: var(--default-brown, #8f6638);
    stroke-opacity: 1;
    stroke-width: 4px !important;
}

.taper-overview .taper-map-section.active:not(.sold-out) .taper-map-region {
    fill: var(--default-gold, #EDB52A) !important;
    filter: none;
    stroke: var(--default-brown, #8f6638);
    stroke-opacity: 1;
    stroke-width: 3px !important;
}

.taper-overview .taper-map-section:focus {
    outline: none;
}

.taper-overview .taper-map-section.sold-out {
    cursor: not-allowed;
}

.taper-overview .taper-map-section.sold-out .taper-map-region {
    fill: #777 !important;
    filter: none;
    opacity: 1;
    stroke: #777;
    stroke-opacity: 1;
}

.taper-overview .taper-map-legend-text {
    font-size: 1rem;
    text-anchor: start;
}

.taper-overview .taper-map-legend-symbol {
    font-size: 2rem;
    font-weight: 800;
}

@media (min-width: 992px) {
    #overview-container svg#venue.taper-overview {
        width: auto;
        max-width: 100%;
        max-height: calc(100vh - 165px);
    }
}

.sidebar .taper-overview .taper-map-region {
    stroke-width: 2px !important;
}

.sidebar .taper-overview .taper-map-section:not(.sold-out):hover .taper-map-region,
.sidebar .taper-overview .taper-map-section:not(.sold-out):focus-visible .taper-map-region {
    stroke-width: 3px !important;
}

.sidebar .taper-overview .taper-map-section.active:not(.sold-out) .taper-map-region {
    stroke-width: 2px !important;
}

@media (max-width: 767.98px) {
    .taper-overview .taper-map-region {
        stroke-width: 2px !important;
    }

    .taper-overview .taper-map-section:not(.sold-out):hover .taper-map-region,
    .taper-overview .taper-map-section:not(.sold-out):focus-visible .taper-map-region {
        stroke-width: 3px !important;
    }

    .taper-overview .taper-map-section.active:not(.sold-out) .taper-map-region {
        stroke-width: 2px !important;
    }
}