.mscb_add_order_page{
  flex-direction: column;
  height: 100%; /* щоб контейнер займав усю висоту свого батька */
  overflow: hidden;
  padding-top: 11.16%;
  width: 100%;
  position: relative;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  display: none;
}

.mscbao_header {
  flex: 0 0 auto; /* фіксована висота — тільки свій контент */
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 9.3333%;
}
.mscbao_header > h2 {
  margin: 0 !important;
  font-size: 1.5rem;
  font-family: "RubikRegular";
  color: #D9D9D9;
}



.mscbao_body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 5.3% 0% 5.3%;
  position: relative;
}

.mscbao_fields{
  padding: 1rem;
  border-radius: 1rem;
    background: linear-gradient(90deg,rgba(87, 87, 87, 0.164) 0%, rgba(34, 34, 34, 0.164) 100%);
    /* background: rgba(87, 87, 87, 0.164); */
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.055);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.466),
        0 0 20px rgba(255, 255, 255, 0.027);
}

.mscbao_field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3% 2%;
  border-bottom: 1px solid #191919;
  color: #bdbdbd;
  font-family: "RubikLight";
  font-size: 1rem;
}
.mscbao_field:last-child {
  border-bottom: none;
}
.mscbao_field p {
  margin: 0;
  color: #d9d9d9;
  font-family: "RubikLight";
  font-size: 1rem;
  
}

.mscbao_field span {
    flex: 1;
  font-family: "RubikLight";
    font-size: 1rem;
    color: #adadad;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: end;
}

#modal_aop_brand_car .brand-icon{ 
  width: 6vw;
  height: auto;
  aspect-ratio: 1 / 1; }

  #aop_brand_car .brand-icon{ 
  width: 4.5vw;
  height: auto;
  aspect-ratio: 1 / 1;
  margin-right: 2vw;
 }

.mscbao_field input {
    border: none;
    outline: none;
    border-bottom: 1px solid #3d3d3d;
    background: transparent;
    flex: 1;
    font-family: "RubikLight";
    font-size: 1rem;
    color: #adadad;
    text-align: center;
    padding-bottom: .5vh;
    transform: translateY(.25vh);
}
.mscbao_field input#aop_date {
    max-width: 23vw;
}
.mscbao_field input#aop_time {
    max-width: 14vw;
}
.mscbao_field input#aop_number {
    max-width: 32vw;
}


.mscbao_field i {
  color: #b7b7b7;
  font-size: 1.25rem;
  transform: translateY(3px);
  padding-left: 3.66%;
}

/* ---------- Обрані послуги ---------- */
.mscbao_selected_services {
  margin-top: 5.5%;
  display: flex;
  flex-direction: column;
  gap: 4%;
}

.mscbao_selected_services h3 {
  color: #d9d9d9;
  font-size: 1.125rem;
  font-family: "RubikMedium";
  text-align: center;
    margin: 0;
}

#selected_services_count{
    font-size: 1rem;
    color: #a0a0a0;
    font-family: "RubikLight";
}

.mscbao_service_items{
    margin-top: 3vh;
    overflow-y: auto;
}

.mscbao_service_item {
  border-radius: 1rem;
    background: linear-gradient(90deg,rgba(87, 87, 87, 0.164) 0%, rgba(34, 34, 34, 0.164) 100%);
    /* background: rgba(87, 87, 87, 0.164); */
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.055);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.466),
        0 0 20px rgba(255, 255, 255, 0.027);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #d9d9d9;
  font-family: "RubikLight";
  font-size: 1rem;
  margin-bottom: .5vh;
  position: relative;
  min-height: var(--service-item-height, 2.7vh); /* <-- ключовий момент */
}
.mscbao_service_item:last-child {
  margin-bottom: 0;
}
.mscbao_service_item::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 8.64%;
    height: 100%;
    background-color: #40404067;
    z-index: 90;
    border-top-right-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
}
.mscbao_service_item::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 8.64%;
    width: 20.47%;
    height: 100%;
    background-color: #2a2a2a59;
    z-index: 90;
}

.mscbao_service_item p{
  margin: 0;
  padding: 3% 5%;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
}

.mscbao_service_coast{
  color: #D9D9D9;
  font-size: 1rem;
  font-family: "RubikMedium";
  z-index: 95;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20.47%;

}
.mscbao_service_remove{
  color: #D9D9D9;
  font-size: 1.4rem;
  height: 100%;
  z-index: 95;
  width: 8.64%;
  color: #f13c3cad;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Підсумок ---------- */
.mscbao_total_item {
  margin-top: 4%;
  display: flex;
  align-items: center;
  gap: 2vw;
}

.mscbao_total {
  border-radius: .75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #d9d9d9;
  font-family: "RubikLight";
  font-size: 1rem;
  position: relative;
  padding: 3% 5%;
  flex: 1;
}
.mscbao_total p{
  margin: 0;
    font-family: "RubikRegular";
}

.mscbao_add_order {
  border-radius: .75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #7ac777c4;
  font-family: "RubikLight";
  font-size: 1.2rem;
  position: relative;
  padding: 3% 5%;
  flex: 0 0 auto;
}

.mscbao_total_value {
  display: flex;
  align-items: center;
  justify-content: end;
  font-family: "RubikRegular";
  gap: 5%;
  flex: 1;
}

.mscbao_total_value span {
  display: flex;
  align-items: center;
  font-family: "RubikMedium";
  color: #D9D9D9;
}

.mscbao_total_value i {
  font-size: 1rem;
  color: #66ac63c4;
}

/* ---------- Кнопка ---------- */
.mscbao_submit_btn {
    font-family: "RubikRegular";
    font-size: 0.9rem;
    color: #e0e0e0;
    width: 33.4%;
    padding: 3.6% 0;
    border-radius: .5rem;
    text-align: center;
    margin: 8% auto calc(5rem + 4vh) auto;
    border-radius: 1rem;
    background: linear-gradient(90deg,rgba(155, 155, 155, 0.164) 0%, rgba(48, 48, 48, 0.164) 100%);
    /* background: rgba(87, 87, 87, 0.164); */
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.055);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.466),
        0 0 20px rgba(255, 255, 255, 0.027);
}


#modal_pick_time_add_order .msc_modal_body{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
}
#modal_pick_time_add_order .mscbo_tc_item{
  padding: 3vw 0vw;
  margin: 0;
  text-align: center;
  justify-content: center;
  pointer-events: all;
}

#modal_pick_time_add_order .mscbo_tc_item.deactive{
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0);
  box-shadow: none;
  pointer-events: none;
}
#modal_pick_time_add_order .mscbo_tc_item.deactive > p{
  color: #888888;
}

#modal_pick_time_add_order .msc_modal_header > h1{
  font-size: 1.2rem !important;
  font-family: "RubikRegular";
  margin: 0;
}