:root{
    --msa-sp-location-bg-color:#1B1B1B;
    --msa-sp-location-padding-tb:24px;
    --msa-sp-location-padding-lr:9px;
    --msa-sp-location-border-radius:12px;
    --msa-sp-location-heading-font-size:18px;
    --msa-sp-location-heading-line-height:24px;
    --msa-sp-location-heading-letter-spacing:0.5px;
    --msa-sp-location-gap:24px;
    --msa-sp-wrapper-gap:12px;
    --msa-sp-location-box-gap:8px;
    --msa-sp-location-box-padding:12px;
    --msa-sp-location-box-font-color:#FFD700;
    --msa-sp-location-box-font-size:12px;
    --msa-sp-select-location-padding-tb:9px;
    --msa-sp-select-location-padding-lr:12px;
    --msa-sp-select-course-padding-tb:9px;
    --msa-sp-select-course-padding-lr:12px;
    --msa-sp-select-course-option-padding-tb:12px;
    --msa-sp-select-course-option-padding-lr:21px;
    --msa-sp-select-course-option-font-size:14px;
    --msa-sp-select-location-border-radius:4px;
    --msa-sp-select-border-color: #c7c7c7;
    --msa-sp-select-location-font-color: #A6A6A6;
    --msa-sp-datepicker-bg-color: #ffffff;
    --msa-sp-select-location-font-size:14px;

    --msa-sp-vehicle-button-padding-tb:10px;
    --msa-sp-vehicle-button-padding-lr:12px;
    --msa-sp-vehicle-button-border-radius:16px;
    --msa-sp-vehicle-button-font-color:#8F8F8F;
    --msa-sp-vehicle-button-gap:10px;
    --msa-sp-datepicker-border-radius:6px;
    --msa-sp-vehicle-toggle-gap:13px;
    --msa-sp-vehicle-button-margin-right:8px;
    --msa-sp-empty-events-bg-color:#FF6363;
    --msa-sp-empty-events-padding :24px;

}
.msa-schedule-filter{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: var(--msa-sp-location-gap);
}
.msa-schedule-filter-wrapper {
    font-family: var(--font-primary);
    display: flex;
    justify-content: start;
    flex-direction: column;
    width: 100%;
    gap: var(--msa-sp-wrapper-gap);
} 

.msa-schedule-filter-wrapper button,
.msa-schedule-filter-wrapper input,
.msa-schedule-filter-wrapper select{
    margin: 0;
}
.msa-schedule-filter-container .msa-schedule-filter-location{
    display: none;
    position: relative;
}
.msa-schedule-filter-container .msa-location-box.active{
    display: flex;
    z-index: 10;
}
.msa-schedule-filter-container .msa-location-box{
    position: absolute;
    left: 0;
    top: 50px;
    display: none;
}

.msa-schedule-filter-container .msa-location-box.active {
    padding: var(--msa-sp-location-box-padding,12px);
}
.msa-schedule-filter-container{
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--msa-sp-wrapper-gap);
    border: 1px solid var(--msa-sp-select-border-color);
    border-radius: var(--msa-sp-datepicker-border-radius);
    overflow: hidden;
    color: var(--msa-sp-select-location-font-color);
}

::placeholder {
  color:var(--msa-secondary-color,#000);
  opacity: 1; /* Firefox */
}

.msa-schedule-select-course{
    padding: var(--msa-sp-select-course-padding-tb) var(--msa-sp-select-course-padding-lr);
    border-radius: var(--msa-sp-datepicker-border-radius);
    color: var(--msa-sp-select-location-font-color);
    border: 1px solid  var(--msa-sp-select-border-color);
    background: none;
}

.msa-schedule-select-course option{
    padding: var(--msa-sp-select-course-option-padding-tb,12px) var(--msa-sp-select-course-option-padding-lr,21px);
    font-family: var(--font-primary);
    font-weight: var(--medium-font-weight,500);
    font-size: var(--msa-sp-select-course-option-font-size,14px);
}
.msa-schedule-select-course option:hover{
    color: var(--msa-sp-datepicker-bg-color);
    text-decoration: underline;
}

.msa-schedule-filter-clear,
.msa-schedule-filter-clear:focus{
    border: none;
    background: transparent;
    color:var(--msa-secondary-color,#000);
    text-decoration: underline;
    cursor: pointer;
}

.vehicle-container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.vehicle-toggle {
    display: flex;
    justify-content: start;
    gap: var(--msa-sp-vehicle-toggle-gap);
}

.vehicle-btn {
    padding: var(--msa-sp-vehicle-button-padding-tb) var(--msa-sp-vehicle-button-padding-lr);
    border: 1px solid var(--msa-sp-vehicle-button-font-color,#8F8F8F);
    background: transparent;
    border-radius: var(--msa-sp-vehicle-button-border-radius,16px);
    font-size: var(--font-size-xs);
    font-family: var(--font-primary);
    font-weight: var(--bold-font-weight,700);
    cursor: pointer;
    color:var(--msa-sp-vehicle-button-font-color,#8F8F8F);
    gap: var(--msa-sp-vehicle-button-gap);
    position: relative;

    transition: border-color 0.4s ease, color 0.4s ease; 
}
.vehicle-btn.active {
    border-color:  var(--msa-secondary-color,#000);
    color:var(--msa-secondary-color,#000);
}
.vehicle-btn svg{
    /* 1. INITIAL STATE: Hidden, takes no space, and shifted left */
    width: 0;
    opacity: 0;
    transform: translateX(-100%);

    fill: var(--msa-sp-vehicle-button-font-color,#8F8F8F);

    /* 2. TRANSITION: Defines the animation for width, opacity, and position */
    transition: width 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
}
.vehicle-btn.active svg{
    /* 3. ACTIVE STATE: Visible, has its original width, and is in its normal position */
    width: 17px; 
    opacity: 1;
    transform: translateX(0);
    fill: var(--msa-secondary-color,#000);
    margin-right: var(--msa-sp-vehicle-button-margin-right);
}

.ridercourse-box {
    background: var(--msa-sp-location-bg-color); 
    padding: var(--msa-sp-location-padding-tb) var(--msa-sp-location-padding-lr);
    border-radius: var(--msa-sp-location-border-radius);
    font-family: var(--font-primary);
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap:var(--msa-sp-location-gap);
    width: 100%;
}

.msa-location-box{
    width: 100%;
    background: var(--msa-sp-location-bg-color);
    border-radius: var(--msa-sp-location-border-radius);
    font-family: var(--font-primary);
    display: flex;
    flex-direction: column;
    align-items: start;
    gap:var(--msa-sp-location-box-gap);
}

.ridercourse-box h2 {
    font-size: var(--msa-sp-location-heading-font-size);
    font-weight: var(--bold-font-weight,700);
    line-height: var(--msa-sp-location-heading-line-height, 24px);
    letter-spacing: var(--msa-sp-location-heading-letter-spacing,0.5px);
    color: var(--msa-tertiary-color,#fff);
}

.rider-label {
  display: block;
  color: var(--msa-sp-location-box-font-color);
  font-weight: var(--semibold-font-weight);
  font-size: var(--msa-sp-location-box-font-size, 12px);
}

.rider-select {
  width: 100%;
  padding: var(--msa-sp-select-location-padding-tb) var(--msa-sp-select-location-padding-lr);
  border-radius: var(--msa-sp-select-location-border-radius);
  border: 1px solid  var(--msa-sp-select-border-color);
  font-size: var(--msa-sp-select-location-font-size);
  appearance: none;
  background: var(--msa-tertiary-color , #fff) url("data:image/svg+xml,%3Csvg fill='gray' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 1rem center;
  color: var(--msa-sp-select-location-font-color);
}


.empty-schedule-result{
    background: var(--msa-sp-empty-events-bg-color);
    grid-column: span 3;
    padding-left :var(--msa-sp-empty-events-padding);
    padding-right :var(--msa-sp-empty-events-padding);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height : fit-content;
}

.empty-schedule-result .caption-secondary{
    color : var(--msa-tertiary-color);
}

.schedule-filter-container {
    border: 1px solid var(--msa-sp-select-border-color);
    border-radius: var(--msa-sp-select-location-border-radius);
    overflow: hidden;
    position: relative;
    width: 100%;
}

.schedule-filter-container select,
.schedule-filter-container input {
    border: none;
    width: 100%;
    color: var(--msa-sp-select-location-font-color);
    padding: 9px 12px;
    font-family: var(--font-primary);
}

.schedule-filter-container select:focus-visible,
.schedule-filter-container input:focus-visible {
    outline: 0px;
}

.schedule-filter-container select{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url("../images/arrow-down.svg") no-repeat right 12px center;
    background-size: 20px;
    height: 100%;
}

.schedule-filter-container select option{
    color: black;
    font-family: var(--font-primary);
}
.schedule-filter-container select optgroup {
    font-weight: bold;
    color: var(--msa-secondary-color);
    padding: 5px 0;
}


.schedule-filter-container input::placeholder{
    color: var(--msa-sp-select-location-font-color);
}

.schedule-filter-container:focus-within{
    border: 1px solid black;
}

.mobile-filter{
    display: none;
}

.filter-icon{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 20px;
    width: 20px;
    right: 12px;
}

@media (max-width: 992px) {
    .msa-schedule-filter-container .msa-schedule-filter-location{
        display: block;
    }

    .ridercourse-box{
        display: none;
    }

    .msa-schedule-filter-wrapper {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .msa-schedule-filter-container{
        grid-column: span 2;
    }
    .vehicle-container{
        width: 100%;
    }
    .schedule-filter-container{
        width: calc( ( 100% - (var(--msa-sp-wrapper-gap) * 2) ) / 3 );
    }
}

@media (max-width: 768px) {
    .mobile-filter{
        display: block;
        position: absolute;
        top: -78px;
        right: 0px;
        width: 20px;
        height: 20px;
    }

    .msa-schedule-filter{
        position: absolute;
        border-radius: 5px;
        background: #fff;
        z-index: 1;
        top: -40px;
        padding: 10px;
        display: none;
        box-shadow: 0px 0px 10px -4px rgba( 0, 0, 0, 0.4 );
        width: 300px;
        right: 0;
    }

    .vehicle-container{
        order: 1;
    }

    .schedule-filter-container.location{
        width: 100%;
        order: 2;
    }

    .schedule-filter-container.course{
        order: 3;
    }

    .schedule-filter-container.date{
        order: 4;
    }

    .schedule-filter-container{
        width: calc( (100% - var(--msa-sp-wrapper-gap) ) / 2 );
    }

    .msa-schedule-select-course{
        grid-column: span 2;
    }
    .msa-schedule-filter-container{
        display: flex;
        flex-wrap: wrap;
    }

    .vehicle-container{
        grid-column: span 2;

    }
}