/* Основной контейнер */
.bus-body, .bus-legend-wrapper{
    --seat-size: 45px;
    --seat-border: 2px solid;
    --border-radius: 3px;
}
.bus-body .form-checkboxes{
    display: grid;
    gap: 0.25rem min(27px, var(--font-size-l));
    background-color: var(--color-white);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 23px;
    padding: 2.5rem 2.75rem;
    width: fit-content;
}

/* Водитель */
.bus-body .form-checkboxes::after{
    content: '';
    display: block;
}
.bus-body .form-checkboxes::after{
  grid-area: driver;
  width: var(--seat-size);
  height: var(--seat-size);
  background: url('../image/bus/driver.svg') no-repeat center;
  background-size: contain;
}

/* Стили сидений */
input.bus-seat{
    display: none;
}
.bus-seat+.option{
  position: relative;
  width: var(--seat-size);
  height: var(--seat-size);
  border: var(--seat-border) var(--color-main);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  /* padding-left: 0.5rem; */
  color: var(--color-main);
  cursor: pointer;
  user-select: none;
}
.bus-seat+.option::before{
    content: '';
    display: block;
    width: 0.5rem;
    height: 96%;
    position: absolute;
    left: -1px;
    border: var(--seat-border) var(--color-main);
    border-radius: var(--border-radius);
}

@media screen and (min-width: 991px){
    .bus-seat[data-ticket-status="free"]+.option:is(.hover, :hover){
        border-color: var(--color-accent);
        color: var(--color-accent);
    }
    .bus-seat+.option:is(.hover, :hover)::before{
        border-color: var(--color-accent);
    }
}

.bus-seat:checked+.option,
.bus-seat:checked+.option::before{
    border-color: var(--color-accent);
}
.bus-seat:not([data-ticket-status="free"])+.option{
    border-color: var(--color-bg-gray);
    background-color: var(--color-bg-gray);
    /* pointer-events: none; */
    cursor: not-allowed;
}
.bus-seat:not([data-ticket-status="free"])+.option::before{
    border-color: var(--color-white);
}

.bus-legend-wrapper{
    display: flex;
    gap: 1rem;
    flex-direction: column;
}
.bus-legend-wrapper .bus-legend{
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}

/* *** РАЗНОВИДНОСТИ *** */

.bus-14-body .form-checkboxes{
    grid-template-areas:
      "seat11 seat8 seat5 seat3 . driver"
      "seat12 seat9 seat6 seat4 . ."
      "seat13 . . . . seat1"
      "seat14 seat10 seat7 . . seat2";
    grid-template-columns: repeat(6, min-content);
  
    background-image: url('../image/bus/carcase.svg');
}
  
/* Позиционирование сидений */
.bus-body .form-item-tickets-1{ grid-area: seat1; }
.bus-body .form-item-tickets-2{ grid-area: seat2; }
.bus-body .form-item-tickets-3{ grid-area: seat3; }
.bus-body .form-item-tickets-5{ grid-area: seat5; }
.bus-body .form-item-tickets-4{ grid-area: seat4; }
.bus-body .form-item-tickets-6{ grid-area: seat6; }
.bus-body .form-item-tickets-7{ grid-area: seat7; }
.bus-body .form-item-tickets-8{ grid-area: seat8; }
.bus-body .form-item-tickets-9{ grid-area: seat9; }
.bus-body .form-item-tickets-10{ grid-area: seat10; }
.bus-body .form-item-tickets-11{ grid-area: seat11; }
.bus-body .form-item-tickets-12{ grid-area: seat12; }
.bus-body .form-item-tickets-13{ grid-area: seat13; } 
.bus-body .form-item-tickets-14{ grid-area: seat14; }

@media screen and (max-width: 991px) {

    .bus-legend-wrapper{
        flex-direction: row;
    }
    /* .bus-body .form-checkboxes{
        padding: 1.95rem 2.25rem;
    } */
    
    .vesta-booking-form{
        align-items: center;
    }
}
@media screen and (max-width: 575px) {
    .bus-body, .bus-legend-wrapper {
         --seat-size: 33px;
    }
    .bus-body .form-checkboxes{
        padding: 1.75rem 2rem;
        border-radius: 20px;
    }
    
}