/*--- SEATING CHART ----------------------------------------------------*/

/*--- skip links ---*/
[id^="seating-chart-skip-"] {position:absolute !important;z-index:1000 !important;clip-path:inset(50%)}
    [id^="seating-chart-skip-"]:is(:hover, :focus) {clip-path:none}


/*--- wrapper -------------------*/
.seating-chart-wrap {}

    /*--- inner wrapper ---*/
    #holder {width:fit-content;padding:var(--common-responsive-padding);border:var(--common-border);border-radius:var(--common-border-radius);margin:0 auto 2em}

        /*--- stage ---*/
        #stage {font-size:clamp(.8em, 3vw, 1em);text-align:center;font-weight:bold;text-transform:uppercase;margin:0 0 1rem}

        /*--- list -----------------*/
        #place {display:grid;justify-content:center;align-items:start;grid-template-columns:repeat(var(--seating-chart-columns, 20), minmax(auto, var(--max-seat-item-size, 1.8rem)));margin:0}

            /*--- grid items ---*/
            #place div {padding-top:100%;position:relative}
                #place div:has(input:is(:hover, :focus), label:is(:hover, :focus)) {z-index:1}
                #place div:not(:has(label:hover, input:focus)) {overflow:hidden}

                /*--- content ---*/
                #place input {position:absolute;top:0;left:0;z-index:3;margin:0;opacity:0;scale:none;cursor:pointer}
                #place label {/*--seat-icon:none*/;display:block;width:auto;box-sizing:border-box;padding:8%;background-color:#757575;background:var(--seat-icon, none), linear-gradient(var(--seat-color), var(--seat-color)) content-box, #fff;border-radius:20%;font-size:1rem;line-height:2;color:#000;position:absolute;top:0;bottom:0;left:0;right:0;margin:0;overflow:hidden;cursor:pointer;transition:scale .2s}
                    #place label::before {display:block;padding-top:100%;background-repeat:no-repeat;background-position:center;background-size:95% auto;content:""}
                    #place input:not([disabled]):is(:hover, :focus)+label, #place input:not([disabled])+label:is(:hover, :focus) {box-shadow:0 0 0 .02em rgba(0, 0, 0, .2);z-index:2;scale:1.2}

                /*--- disabled item ---*/
                #place input:disabled, #place input:disabled+label, #place .reservedSeat {--seat-color:#d1d1d1;cursor:default}
                    #place input:disabled+label::before, #place .reservedSeat::before {background-image:url(https://dev.websavvyoracle.com/css/images/unavailable-seat.svg)}
                #place input:checked+label::before {background-image:url(https://dev.websavvyoracle.com/css/images/selected-seat.svg)}
                #place input:checked+label.FrontPrime, #place .selectedSeat.FrontPrime {--seat-icon:none}










/*--- SEAT TYPE KEY -------------------------------*/
#seat-type-key {display:flex;flex-wrap:wrap;align-items:start;gap:1em 2em;margin:0 0 2rem}

    /*--- list ---*/
    #seatDescription {list-style:none;flex:1 0 auto;padding:0;font-size:.8rem;margin:0}
        #seatDescription li {padding:0 0 0 1.5em;font-weight:bold;line-height:1;position:relative;margin:0 0 .75rem}
            #seatDescription li span {text-transform:uppercase}
            #seatDescription li sup {vertical-align:top;position:static;line-height:1}

            /*--- icons ---*/
            #seatDescription li::before {display:block;width:1em;height:1em;border-radius:.2rem;background-color:#bbb;background:var(--seat-color, #757575) var(--seat-icon, none no-repeat center / 95% auto);font-size:1em;position:absolute;top:0;left:0;content:""}
                #seatDescription .selectedSeat::before {background-image:url(https://dev.websavvyoracle.com/css/images/selected-seat.svg)}
                #seatDescription .reservedSeat::before {background-image:url(https://dev.websavvyoracle.com/css/images/unavailable-seat.svg)}


    /*--- descriptions ---*/
    #seat-type-key p {flex:20 0 15rem;margin-bottom:0}
        #seat-type-key p span {display:block;margin:0 0 .55rem}
        #seat-type-key p br {display:none}










    /*--- ADMIN VERSION ---------------------------------------------------------------------*/


    /*--- seating chart ---*/
    .container-fluid .seating-chart-wrap {}
        .container-fluid #holder {/*font-size:1.25rem;margin-bottom:1rem*/}
            .container-fluid #place {margin-left:0 !important;margin-right:0 !important}


        /*--- seat type key--------*/
        .container-fluid #seatDescription {display:flex;flex-wrap:wrap;gap:0 1.5em}
            .container-fluid #seatDescription :is(.selectedSeat, .reservedSeat)::before {background-color:transparent}


        /*--- held seat type ---*/
        .container-fluid .heldSeat {--seat-color:#36e8d4}