/*General*/
.svg-container {
    width: 100%;
    display: block;
    touch-action: manipulation;
    position: relative;
}

.svg-container .svg {
    position: relative;
    width: 100%;
    height: auto;
    touch-action: manipulation;
    margin-right: auto;
    margin-left: auto;
}

.svg-container .overlay-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    background-color: rgba(255, 255, 255, 0.1); /* semi-transparent white */
}

.svg-container .spinner-centered {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 3rem;
    height: 3rem;
}

/*Seats*/
@media screen and (min-width: 600px) {
    [seat="true"]:not([seat-is-disabled="true"]):hover {
        cursor: pointer;
        stroke-width: .7;
    }
    [seat="true"][seat-is-disabled="true"]:hover {
        cursor: not-allowed;
    }

    .seatmap-picker [seat="true"][seat-color=""]:hover {
        cursor: not-allowed;
    }
}

.seatmap-picker [seat="true"][seat-color=""], [seat="true"][seat-is-disabled="true"] {
    stroke: var(--gray-rgba);
    fill: var(--gray-rgba);
}

.seatmap-editor [seat="true"] {
    fill: var(--gray-rgba);
    stroke: var(--gray-rgb);
}

.seatmap-editor [seat="true"]:hover {
    fill: var(--gray-rgb);
}

/*Seats by colors*/
/*blue*/
[seat="true"][seat-color="blue"]:not([seat-is-disabled="true"]) {
    fill: var(--blue-rgb);
    stroke: var(--blue-rgb);
}
[seat="true"][seat-color="blue"][seat-is-selected="true"]:not([seat-is-disabled="true"]) {
    fill: var(--blue-rgba);
}

/*We apply hover effects only on big screens, not mobile!*/
@media screen and (min-width: 600px) {
    [seat="true"][seat-color="blue"]:not([seat-is-disabled="true"]):hover {
        fill: var(--blue-rgb);
    }
}

/*azure*/
[seat="true"][seat-color="azure"]:not([seat-is-disabled="true"]) {
    fill: var(--azure-rgb);
    stroke: var(--azure-rgb);
}
[seat="true"][seat-color="azure"][seat-is-selected="true"]:not([seat-is-disabled="true"]) {
    fill: var(--azure-rgba);
}
/*We apply hover effects only on big screens, not mobile!*/
@media screen and (min-width: 600px) {
    [seat="true"][seat-color="azure"]:not([seat-is-disabled="true"]):hover {
        fill: var(--azure-rgb);
    }
}

/*indigo*/
[seat="true"][seat-color="indigo"]:not([seat-is-disabled="true"]) {
    fill: var(--indigo-rgb);
    stroke: var(--indigo-rgb);
}
[seat="true"][seat-color="indigo"][seat-is-selected="true"]:not([seat-is-disabled="true"]) {
    fill: var(--indigo-rgba);
}
/*We apply hover effects only on big screens, not mobile!*/
@media screen and (min-width: 600px) {
    [seat="true"][seat-color="indigo"]:not([seat-is-disabled="true"]):hover {
        fill: var(--indigo-rgb);
    }
}

/*purple*/
[seat="true"][seat-color="purple"]:not([seat-is-disabled="true"]) {
    fill: var(--purple-rgb);
    stroke: var(--purple-rgb);
}
[seat="true"][seat-color="purple"][seat-is-selected="true"]:not([seat-is-disabled="true"]) {
    fill: var(--purple-rgba);
}
/*We apply hover effects only on big screens, not mobile!*/
@media screen and (min-width: 600px) {
    [seat="true"][seat-color="purple"]:not([seat-is-disabled="true"]):hover {
        fill: var(--purple-rgb);
    }
}

/*pink*/
[seat="true"][seat-color="pink"]:not([seat-is-disabled="true"]) {
    fill: var(--pink-rgb);
    stroke: var(--pink-rgb);
}
[seat="true"][seat-color="pink"][seat-is-selected="true"]:not([seat-is-disabled="true"]) {
    fill: var(--pink-rgba);
}
/*We apply hover effects only on big screens, not mobile!*/
@media screen and (min-width: 600px) {
    [seat="true"][seat-color="pink"]:not([seat-is-disabled="true"]):hover {
        fill: var(--pink-rgb);
    }
}

/*red*/
[seat="true"][seat-color="red"]:not([seat-is-disabled="true"]) {
    fill: var(--red-rgb);
    stroke: var(--red-rgb);
}
[seat="true"][seat-color="red"][seat-is-selected="true"]:not([seat-is-disabled="true"]) {
    fill: var(--red-rgba);
}
/*We apply hover effects only on big screens, not mobile!*/
@media screen and (min-width: 600px) {
    [seat="true"][seat-color="red"]:not([seat-is-disabled="true"]):hover {
        fill: var(--red-rgb);
    }
}

/*orange*/
[seat="true"][seat-color="orange"]:not([seat-is-disabled="true"]) {
    fill: var(--orange-rgb);
    stroke: var(--orange-rgb);
}
[seat="true"][seat-color="orange"][seat-is-selected="true"]:not([seat-is-disabled="true"]) {
    fill: var(--orange-rgba);
}
/*We apply hover effects only on big screens, not mobile!*/
@media screen and (min-width: 600px) {
    [seat="true"][seat-color="orange"]:not([seat-is-disabled="true"]):hover {
        fill: var(--orange-rgb);
    }
}

/*yellow*/
[seat="true"][seat-color="yellow"]:not([seat-is-disabled="true"]) {
    fill: var(--yellow-rgb);
    stroke: var(--yellow-rgb);
}
[seat="true"][seat-color="yellow"][seat-is-selected="true"]:not([seat-is-disabled="true"]) {
    fill: var(--yellow-rgba);
}
/*We apply hover effects only on big screens, not mobile!*/
@media screen and (min-width: 600px) {
    [seat="true"][seat-color="yellow"]:not([seat-is-disabled="true"]):hover {
        fill: var(--yellow-rgb);
    }
}

/*lime*/
[seat="true"][seat-color="lime"]:not([seat-is-disabled="true"]) {
    fill: var(--lime-rgb);
    stroke: var(--lime-rgb);
}
[seat="true"][seat-color="lime"][seat-is-selected="true"]:not([seat-is-disabled="true"]) {
    fill: var(--lime-rgba);
}
/*We apply hover effects only on big screens, not mobile!*/
@media screen and (min-width: 600px) {
    [seat="true"][seat-color="lime"]:not([seat-is-disabled="true"]):hover {
        fill: var(--lime-rgb);
    }
}

/*green*/
[seat="true"][seat-color="green"]:not([seat-is-disabled="true"]) {
    fill: var(--green-rgb);
    stroke: var(--green-rgb);
}
[seat="true"][seat-color="green"][seat-is-selected="true"]:not([seat-is-disabled="true"]) {
    fill: var(--green-rgba);
}
/*We apply hover effects only on big screens, not mobile!*/
@media screen and (min-width: 600px) {
    [seat="true"][seat-color="green"]:not([seat-is-disabled="true"]):hover {
        fill: var(--green-rgb);
    }
}

/*teal*/
[seat="true"][seat-color="teal"]:not([seat-is-disabled="true"]) {
    fill: var(--teal-rgb);
    stroke: var(--teal-rgb);
}
[seat="true"][seat-color="teal"][seat-is-selected="true"]:not([seat-is-disabled="true"]) {
    fill: var(--teal-rgba);
}
/*We apply hover effects only on big screens, not mobile!*/
@media screen and (min-width: 600px) {
    [seat="true"][seat-color="teal"]:not([seat-is-disabled="true"]):hover {
        fill: var(--teal-rgb);
    }
}

/*cyan*/
[seat="true"][seat-color="cyan"]:not([seat-is-disabled="true"]) {
    fill: var(--cyan-rgb);
    stroke: var(--cyan-rgb);
}
[seat="true"][seat-color="cyan"][seat-is-selected="true"]:not([seat-is-disabled="true"]) {
    fill: var(--cyan-rgba);
}
/*We apply hover effects only on big screens, not mobile!*/
@media screen and (min-width: 600px) {
    [seat="true"][seat-color="cyan"]:not([seat-is-disabled="true"]):hover {
        fill: var(--cyan-rgb);
    }
}

/*Popover*/
div.popover {
    min-width: 250px;
    max-width: 350px;

    --tblr-popover-header-padding-y: 3px;
    --bs-popover-header-padding-y: 3px;

    --tblr-popover-header-padding-x: 10px;
    --bs-popover-header-padding-x: 10px;

    --tblr-popover-body-padding-y: 10px;
    --bs-popover-body-padding-y: 10px;

    --tblr-popover-body-padding-x: 10px;
    --bs-popover-body-padding-x: 10px;

    --tblr-popover-header-color: white;
    --bs-popover-header-color: white;

    --tblr-popover-header-bg: black;
    --bs-popover-header-bg: black;
}

/*Popover by colors*/
/*blue*/
div.popover.seat-popover-color-blue {
    --tblr-popover-arrow-border: var(--blue-rgb);
    --bs-popover-arrow-border: var(--blue-rgb);

    --tblr-popover-border-color: var(--blue-rgb);
    --bs-popover-border-color: var(--blue-rgb);

    --tblr-popover-header-bg: var(--blue-rgb);
    --bs-popover-header-bg: var(--blue-rgb);
}
/*azure*/
div.popover.seat-popover-color-azure {
    --tblr-popover-arrow-border: var(--azure-rgb);
    --bs-popover-arrow-border: var(--azure-rgb);

    --tblr-popover-border-color: var(--azure-rgb);
    --bs-popover-border-color: var(--azure-rgb);

    --tblr-popover-header-bg: var(--azure-rgb);
    --bs-popover-header-bg: var(--azure-rgb);
}
/*indigo*/
div.popover.seat-popover-color-indigo {
    --tblr-popover-arrow-border: var(--indigo-rgb);
    --bs-popover-arrow-border: var(--indigo-rgb);

    --tblr-popover-border-color: var(--indigo-rgb);
    --bs-popover-border-color: var(--indigo-rgb);

    --tblr-popover-header-bg: var(--indigo-rgb);
    --bs-popover-header-bg: var(--indigo-rgb);
}
/*purple*/
div.popover.seat-popover-color-purple {
    --tblr-popover-arrow-border: var(--purple-rgb);
    --bs-popover-arrow-border: var(--purple-rgb);

    --tblr-popover-border-color: var(--purple-rgb);
    --bs-popover-border-color: var(--purple-rgb);

    --tblr-popover-header-bg: var(--purple-rgb);
    --bs-popover-header-bg: var(--purple-rgb);
}
/*pink*/
div.popover.seat-popover-color-pink {
    --tblr-popover-arrow-border: var(--pink-rgb);
    --bs-popover-arrow-border: var(--pink-rgb);

    --tblr-popover-border-color: var(--pink-rgb);
    --bs-popover-border-color: var(--pink-rgb);

    --tblr-popover-header-bg: var(--pink-rgb);
    --bs-popover-header-bg: var(--pink-rgb);
}
/*red*/
div.popover.seat-popover-color-red {
    --tblr-popover-arrow-border: var(--red-rgb);
    --bs-popover-arrow-border: var(--red-rgb);

    --tblr-popover-border-color: var(--red-rgb);
    --bs-popover-border-color: var(--red-rgb);

    --tblr-popover-header-bg: var(--red-rgb);
    --bs-popover-header-bg: var(--red-rgb);
}
/*orange*/
div.popover.seat-popover-color-orange {
    --tblr-popover-arrow-border: var(--orange-rgb);
    --bs-popover-arrow-border: var(--orange-rgb);

    --tblr-popover-border-color: var(--orange-rgb);
    --bs-popover-border-color: var(--orange-rgb);

    --tblr-popover-header-bg: var(--orange-rgb);
    --bs-popover-header-bg: var(--orange-rgb);
}
/*yellow*/
div.popover.seat-popover-color-yellow {
    --tblr-popover-arrow-border: var(--yellow-rgb);
    --bs-popover-arrow-border: var(--yellow-rgb);

    --tblr-popover-border-color: var(--yellow-rgb);
    --bs-popover-border-color: var(--yellow-rgb);

    --tblr-popover-header-bg: var(--yellow-rgb);
    --bs-popover-header-bg: var(--yellow-rgb);
}
/*lime*/
div.popover.seat-popover-color-lime {
    --tblr-popover-arrow-border: var(--lime-rgb);
    --bs-popover-arrow-border: var(--lime-rgb);

    --tblr-popover-border-color: var(--lime-rgb);
    --bs-popover-border-color: var(--lime-rgb);

    --tblr-popover-header-bg: var(--lime-rgb);
    --bs-popover-header-bg: var(--lime-rgb);
}
/*green*/
div.popover.seat-popover-color-green {
    --tblr-popover-arrow-border: var(--green-rgb);
    --bs-popover-arrow-border: var(--green-rgb);

    --tblr-popover-border-color: var(--green-rgb);
    --bs-popover-border-color: var(--green-rgb);

    --tblr-popover-header-bg: var(--green-rgb);
    --bs-popover-header-bg: var(--green-rgb);
}
/*teal*/
div.popover.seat-popover-color-teal {
    --tblr-popover-arrow-border: var(--teal-rgb);
    --bs-popover-arrow-border: var(--teal-rgb);

    --tblr-popover-border-color: var(--teal-rgb);
    --bs-popover-border-color: var(--teal-rgb);

    --tblr-popover-header-bg: var(--teal-rgb);
    --bs-popover-header-bg: var(--teal-rgb);
}
/*cyan*/
div.popover.seat-popover-color-cyan {
    --tblr-popover-arrow-border: var(--cyan-rgb);
    --bs-popover-arrow-border: var(--cyan-rgb);

    --tblr-popover-border-color: var(--cyan-rgb);
    --bs-popover-border-color: var(--cyan-rgb);

    --tblr-popover-header-bg: var(--cyan-rgb);
    --bs-popover-header-bg: var(--cyan-rgb);
}
/*cyan*/
div.popover.seat-popover-color-gray {
    --tblr-popover-arrow-border: var(--gray-rgb);
    --bs-popover-arrow-border: var(--gray-rgb);

    --tblr-popover-border-color: var(--gray-rgb);
    --bs-popover-border-color: var(--gray-rgb);

    --tblr-popover-header-bg: var(--gray-rgb);
    --bs-popover-header-bg: var(--gray-rgb);
}

/* Sold out categories */
.seatmap-picker .sold-out {
    text-decoration: line-through;
}

.drag-and-select-area {
    position: absolute;
    background-color: rgba(var(--tblr-primary-rgb), .3);
    border: 1px solid var(--tblr-primary);
}