/* 
/ Page: Car Category
/ Project: HOA Auto import
/ --------------------------
/ Creator:  Sharia.Design 👽
/ Web: https://Sharia.Design/ 💻
/ year: 2021 ⏳
*/


/* Page: Car Category */
.header {
  border-bottom: 1px solid var(--dark-3);
}

.page-cars {
  margin    : 83px 0 0 0;
  background: var(--white);
}

.cars-page-top {
  margin     : 0;
  padding-top: 47px;
  display    : flex;
  align-items: flex-start;
}

.cars-cat-img {
  display: block;
  width  : 69px;
  height : 69px;
}

.cars-page-title {
  margin-left: 22px;
}

.cars-page-title h1 {
  margin   : 0;
  font-size: 29px;
  color    : var(--black);
}

.cars-page-desc {
  margin-top: 11px;
  font-size : 16px;
  color     : var(--dark-2);
}

.cars-category {
  background: var(--white);
  overflow  : hidden;
}

.cars-container {
  margin-top: 29px;
  width     : 100%;
}

.filter-container {
  margin         : 0;
  padding        : 29px 69px 11px 69px;
  width          : 100%;
  background     : var(--gray-f6);
  display        : flex;
  justify-content: space-between;
  align-items    : flex-start;
}

.filter-item {
  margin-right: 69px;
}

.filter-item:last-of-type {
  margin-right: 0;
  display     : flex;
  align-items : flex-start;
}

.filter-item__name {
  margin     : 0;
  font-size  : 16px;
  color      : var(--black);
  font-weight: bold;
}

.filter-item__buttons {
  margin-top     : 8px;
  display        : flex;
  justify-content: flex-start;
  align-items    : flex-start;
}

.filter-item-btn {
  margin         : 0;
  padding        : 0;
  display        : inline-block;
  cursor         : pointer;
  display        : flex;
  justify-content: space-between;
}

.filter-item-btn:last-of-type {
  margin-left: 11px;
}

.filter-item-btn__txt {
  font-size   : 12px;
  color       : var(--dark-2);
  margin-right: 11px;
}

.filter-item-btn__icon {
  margin-right: 11px;
  fill        : var(--dark-2);
  display     : block;
}

.filter-item-btn:hover .filter-item-btn__txt {
  color: var(--blue);
}

.filter-item-btn:hover .filter-item-btn__icon {
  fill: var(--blue);
}

.filter-item-btn.active .filter-item-btn__icon {
  fill: var(--blue);
}

.filter-item-btn.active:hover,
.filter-item-btn.active .filter-item-btn__txt {
  color      : var(--blue);
  font-weight: bold;
}

.car-cat-container {
  margin         : 0;
  padding-top    : 22px;
  padding-bottom : 22px;
  background     : var(--white);
  border-top     : 1px solid var(--dark-3);
  display        : flex;
  justify-content: space-between;
  align-items    : flex-start;
  flex-wrap      : wrap;
}

.car-item {
  margin               : 0 0 38px 0;
  padding              : 0;
  display              : flex;
  justify-content      : space-between;
  align-items          : flex-start;
  width                : calc(50% - 22px);
  position             : relative;
  overflow             : hidden;
  border               : 1px solid var(--dark);
  border-radius        : 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius   : 2px;
  -ms-border-radius    : 2px;
  -o-border-radius     : 2px;
}

.car-item__info {
  margin      : 0;
  padding     : 0;
  position    : relative;
  width       : 50%;
  border-right: 1px solid var(--dark);
  overflow    : hidden;
}

.car-item__meta {
  margin    : 0;
  padding   : 22px 11px 11px 11px;
  position  : relative;
  width     : 50%;
  background: var(--gray-f6);
  overflow  : hidden;
}

.car-item:hover .car-item__meta {
  background: var(--dark);
}

.car-item:hover .car-item__btn-detail {
  background: var(--blue);
  color     : var(--white);
}

.car-item:hover .car-item__btn-detail path {
  fill: var(--white);
}

.car-item:hover .car-item__meta-key,
.car-item:hover .car-item__meta-value {
  color: var(--white);
}

.car-item__poster {
  display   : block;
  margin    : 0;
  min-width : 100%;
  width     : 100%;
  height    : 150px;
  object-fit: cover;
}

.car-item__info-content {
  padding : 11px;
  width   : 100%;
  overflow: hidden;
}

.car-item__name {
  margin     : 0;
  font-size  : 16px;
  color      : var(--dark);
  line-height: 146%;
}

.car-item__location {
  margin: 11px 0 0 0;
  width : 100%;
}

.car-item__pin {
  width         : 16px;
  height        : 16px;
  background    : url(../icons/pin-sm-dark.svg);
  display       : inline-block;
  vertical-align: middle;
}

.car-item__loc-txt {
  margin-left: 5px;
  font-size  : 12px;
  line-height: 146%;
  color      : var(--dark-2);
  display    : inline-block;
}

.car-item__year {
  margin-top: 5px;
  font-size : 14px;
  color     : var(--dark-2);
}

.car-item__year strong {
  font-size: 16px;
  color    : var(--dark);
}

.car-item__hr {
  margin       : 11px 0;
  border       : none;
  border-bottom: 1px solid var(--dark);
}

.car-item__price {
  margin : 0;
  padding: 0;
}

.car-item__price-int {
  position    : relative;
  margin      : 0;
  padding-left: 22px;
  font-size   : 22px;
  color       : var(--dark);
  font-weight : bold;
}

.car-item__price-int::before {
  content    : '\0024';
  position   : absolute;
  font-size  : 22px;
  top        : 6px;
  left       : 0;
  font-weight: lighter;
}

.car-item__avg {
  margin-top: 2px;
  display   : block;
  font-size : 14px;
  color     : var(--dark-2);
}

.car-item__btn-book {
  margin-top : 11px;
  width      : 100%;
  text-align : center;
  border     : 1px solid var(--dark);
  color      : var(--dark);
  font-size  : 14px;
  font-weight: bolder;
  height     : 47px;
  will-change: transform;
}

.car-item__book-icon {
  margin-right  : 11px;
  width         : 22px;
  height        : 22px;
  display       : inline-block;
  vertical-align: middle;
}

.car-item__btn-book path {
  fill: var(--dark);
}

.car-item__btn-book:hover {
  background: var(--dark);
  color     : var(--white);
}

.car-item__btn-book:active {
  background       : var(--black);
  color            : var(--white);
  transform        : scale(.98);
  -webkit-transform: scale(.98);
  -moz-transform   : scale(.98);
  -ms-transform    : scale(.98);
  -o-transform     : scale(.98);
}

.car-item__btn-book:hover path {
  fill: var(--white);
}

.car-item__meta-list {
  margin  : 0;
  padding : 0;
  width   : 100%;
  overflow: hidden;
}

.car-item__meta-list li {
  margin-bottom  : 11px;
  padding-bottom : 5px;
  display        : flex;
  justify-content: space-between;
  align-items    : flex-start;
  border-bottom  : 1px dashed #C5C8D0;
}

.car-item__meta-key {
  font-size  : 14px;
  font-weight: lighter;
  color      : var(--dark-2);
  white-space: nowrap;
}

.car-item__meta-value {
  font-size  : 14px;
  font-weight: bolder;
  color      : var(--dark);
  white-space: nowrap;
}

.car-item__meta-list li:last-child {
  margin-bottom: 0;
}

.car-item__btn-detail {
  margin-top : 11px;
  display    : block;
  width      : 100%;
  text-align : center;
  color      : var(--blue);
  font-size  : 14px;
  font-weight: bolder;
  line-height: 47px;
  background : transparent;
  border     : 1px solid var(--blue);
  will-change: transform;
}

.car-item__arrow-icon {
  margin-left   : 11px;
  width         : 22px;
  height        : 22px;
  vertical-align: middle;
}

.ar-ic-op {
  fill   : var(--blue);
  opacity: .5;
}

.ar-ic-fil {
  fill: var(--blue);
}


.car-item__btn-detail:hover {
  background: var(--blue);
  color     : var(--white);
}

.car-item__btn-detail:hover path {
  fill: var(--white);
}

.car-item__btn-detail:hover {
  background       : var(--blue);
  transform        : scale(.98);
  -webkit-transform: scale(.98);
  -moz-transform   : scale(.98);
  -ms-transform    : scale(.98);
  -o-transform     : scale(.98);
}

.car-item__btn-detail:active {
  background       : var(--blue);
  transform        : scale(1);
  -webkit-transform: scale(1);
  -moz-transform   : scale(1);
  -ms-transform    : scale(1);
  -o-transform     : scale(1);
}



/* Custom Selects */
.filter-item__cat {
  margin-right: 22px;
  margin-top  : 11px;
  font-size   : 14px;
  color       : var(--dark);
  white-space : nowrap;
}

#cars-page .select {
  width        : 220px;
  margin-bottom: 22px;
}

/* #end Custom Selects */


/* Modal Book: */
.modal-book {
  position: fixed;
  z-index: 9999;
  padding: 29px 0;
  top: -100%;
  left: 50%;
  width: 600px;
  background: var(--white);
  will-change: transform;
  box-shadow: 11px 29px 38px 11px rgba(0, 0, 17, 0.38);
  transform: translateX(-50%) scale(0);
  -webkit-transform: translateX(-50%) scale(0);
  -moz-transform: translateX(-50%) scale(0);
  -ms-transform: translateX(-50%) scale(0);
  -o-transform: translateX(-50%) scale(0);
}
.modal-book.show {
  top: 69px;
  transform: translateX(-50%) scale(1);
  -webkit-transform: translateX(-50%) scale(1);
  -moz-transform: translateX(-50%) scale(1);
  -ms-transform: translateX(-50%) scale(1);
  -o-transform: translateX(-50%) scale(1);
}
.modal-book__close {
  position   : absolute;
  padding    : 0 11px;
  top        : -44px;
  right      : 0;
  cursor     : pointer;
  height     : 44px;
  background : var(--dark);
  color      : var(--white);
  font-size  : 12px;
  will-change: transform;
}

.modal-book__x-icon {
  margin-right  : 8px;
  width         : 22px;
  height        : 22px;
  background    : url(../icons/x-22.svg);
  vertical-align: middle;
}

.modal-book__close:hover {
  background       : var(--black);
  transform        : scale(.98);
  -webkit-transform: scale(.98);
  -moz-transform   : scale(.98);
  -ms-transform    : scale(.98);
  -o-transform     : scale(.98);
}

.modal-book__close:active {
  background       : var(--dark-2);
  transform        : scale(1);
  -webkit-transform: scale(1);
  -moz-transform   : scale(1);
  -ms-transform    : scale(1);
  -o-transform     : scale(1);
}

.book-modal {
  margin  : 0;
  width   : 100%;
  overflow: hidden;
}

.book-modal__top-info {
  margin         : 0;
  padding        : 0 29px;
  width          : 100%;
  display        : flex;
  justify-content: space-between;
  align-items    : flex-start;
}

.book-modal__staff {
  margin-right         : 22px;
  width                : 47px;
  height               : 47px;
  border-radius        : 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius   : 5px;
  -ms-border-radius    : 5px;
  -o-border-radius     : 5px;
}

.book-modal__desc {
  margin     : 0;
  font-size  : 14px;
  line-height: 145%;
  color      : var(--dark);
}

.book-modal__car-info {
  margin-top     : 22px;
  padding        : 11px 22px;
  background     : var(--dark);
  width          : 100%;
  display        : flex;
  justify-content: space-between;
  align-items    : flex-start;
  color          : var(--white);
  overflow       : hidden;
}

.bm-car-info__left {
  display        : flex;
  justify-content: space-between;
  align-items    : flex-start;
}

.bm-thumbnail {
  width : 56px;
  height: 56px;
}

.bm-car-meta {
  margin-left: 11px;
  font-size  : 14px;
}

.bm-car-name {
  margin: 0;
}

.bm-car-year {
  margin-top : 11px;
  font-weight: bold;
}

.bm-car-info__right {
  text-align: right;
}

.bm-info-average {
  margin   : 0;
  font-size: 14px;
}

.bm-info-price {
  margin-top : 5px;
  font-size  : 18px;
  font-weight: bold;
}

.bm-content {
  margin-top     : 29px;
  padding        : 0 29px;
  display        : flex;
  justify-content: space-between;
  /* align-items : flex-start; */
  align-items    : center;
}

.bm-form-container {
  width: 56%;
}

.bm-form-title {
  margin   : 0;
  font-size: 16px;
  color    : var(--dark);
}

.bm-form {
  margin-top: 22px;
}

.bm-form-group {
  margin-bottom: 22px;
}

.bm-form-input {
  height               : 47px;
  padding              : 0 22px;
  width                : 100%;
  background           : #F6F9FF;
  font-family          : dejavu;
  font-size            : 14px;
  color                : var(--dark);
  letter-spacing       : 1.1px;
  border               : 1px solid var(--dark-3);
  border-radius        : 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius   : 4px;
  -ms-border-radius    : 4px;
  -o-border-radius     : 4px;
}

.bm-form-input:hover {
  background: var(--white);
}

.bm-form-input:focus {
  border    : 1px solid var(--blue);
  background: var(--white);
}

.bm-form-input.error {
  border: 1px solid var(--red);
}

.bm-form-input.error::-webkit-input-placeholder {
  color: var(--red);
}

.bm-form-input.error::-moz-placeholder {
  color: var(--red);
}

.bm-form-input.error:-ms-input-placeholder {
  color: var(--red);
}

.bm-form-input.error:-moz-placeholder {
  color: var(--red);
}

.bm-form-input.error:focus {
  border: 1px solid var(--red);
}

.bm-form-submit {
  width                : 100%;
  font-size            : 14px;
  color                : var(--white);
  font-weight          : bold;
  text-align           : center;
  background           : var(--blue);
  line-height          : 47px;
  will-change          : transform;
  border-radius        : 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius   : 4px;
  -ms-border-radius    : 4px;
  -o-border-radius     : 4px;
}

.bm-submit-icon {
  width         : 22px;
  height        : 22px;
  background    : url(../icons/modal-call-22.svg);
  vertical-align: middle;
  margin-right  : 11px;
}

.bm-form-submit:hover {
  background: var(--dark);
}

.bm-form-submit:active {
  background       : var(--dark);
  transform        : scale(.98);
  -webkit-transform: scale(.98);
  -moz-transform   : scale(.98);
  -ms-transform    : scale(.98);
  -o-transform     : scale(.98);
}

.bm-alert {
  margin-top           : 11px;
  margin-bottom           : 11px;
  padding              : 6px 11px;
  width                : 100%;
  font-weight          : bold;
  display              : none;
  border-radius        : 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius   : 4px;
  -ms-border-radius    : 4px;
  -o-border-radius     : 4px;
}

.bm-alert.show {
  display: block;
}

.bm-alert.error {
  color     : var(--red);
  background: rgb(255, 193, 193);
  border    : 1px solid var(--red);
}

.bm-alert.success {
  color     : var(--green);
  background: rgb(205, 255, 231);
  border    : 1px solid var(--green);
}

.bm-or {
  margin    : 0;
  width     : 1px;
  height    : 111px;
  background: var(--dark-3);
  position  : relative;
}

.bm-or__txt {
  position         : absolute;
  top              : 50%;
  left             : 50%;
  padding          : 4px 0;
  background       : #fff;
  color: var(--dar-2);
  font-size: 12px;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform    : translate(-50%, -50%);
  transform        : translate(-50%, -50%);
}
.bm-contact {
  margin: 0;
}
.bm-contact__list {
  margin: 0;
  list-style-type: none;
}
.bm-contact__item {
  margin: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.bm-contact__item:first-child {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--dark-3);
}
.bm-contact__item:last-child {
  padding-top: 22px;
}
.bm-contact-icon {
  width: 22px;
  height: 22px;
  margin-right: 11px;
}
.bm-icon__phone {
  background: url(../icons/modal-phone-dark.svg);
}
.bm-icon__chat {
  background: url(../icons/modal-chat-dark-22.svg);
}

.bm-contact__link {
  display: block;
  color: var(--black);
  will-change: transform;
}
.bm-contact__link span {
  font-size: 12px;
  display: block;
}
.bm-contact__link strong {
  font-size: 12px;
  display: block;
}
.bm-contact__link:hover {
  color: var(--blue);
}
.bm-contact__link:active {
  color: var(--blue);
  transform: scale(.98);
  -webkit-transform: scale(.98);
  -moz-transform: scale(.98);
  -ms-transform: scale(.98);
  -o-transform: scale(.98);
}
.book-modal__footer {
  margin: 0;
  padding: 11px 29px 0 29px;
  border-top: 1px solid var(--dark-3);
  display: flex;
  align-items: flex-start;
}
.bm-info-icon {
  width: 22px;
  height: 16px;
  margin-right: 11px;
  background: url(../icons/modal-info-16.svg);
}
.bm-info__txt {
  margin: 0;
  font-size: 12px;
  line-height: 122%;
  color: var(--dark-2);
}
/* : Modal Book */


/* Success: */
.book-success {
  margin: 0;
  padding: 0 29px;
  width: 100%;
  text-align: center;
}
.book-success__icon {
  margin: 0 auto;
  width: 69px;
  height: 69px;
  background: url(../icons/book-check.svg);
}
.book-success__title {
  margin-top: 22px;
  font-size: 18px;
  font-weight: bold;
  color: var(--blue);
}
.book-success__desc {
  margin-top: 11px;
  font-size: 14px;
  font-weight: lighter;
  color: var(--dark-2);
}
.book-success__hr {
  margin: 22px auto;
  border: none;
  border-bottom: 1px solid var(--dark-3);
}
.book-success__link {
  margin: 0 auto;
  display: block;
  width: 200px;
  line-height: 38px;
  background: var(--dark-3);
  text-align: center;
  font-size: 12px;
  color: var(--dark);
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}
.book-return-icon {
  margin-right: 11px;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  background: url(../icons/return-dark-16.svg);
}
.book-success__link:hover {
  background: var(--dark);
  color: var(--white);
}
.book-success__link:hover .book-return-icon {
  filter: brightness(0) invert(1);
}
.book-success__link:active {
  background: var(--blue);
  color: var(--white);
}
/* : Success */



/* #end Page: Car Category */


@media all and (max-width: 1200px) {
  .filter-container {
    padding: 29px 22px 11px 22px;
  }
  .filter-container {
    flex-direction: column;
  }
  .filter-item {
    margin-right: 0;
    width: 100%;
    margin-bottom: 11px;
  }

}

@media all and (max-width: 740px) {
  .wrap-69 {
    padding: 0 22px;
  }
  .bm-content,
  .car-cat-container {
    flex-direction: column;
  }
  .bm-form-container,
  .car-item {
    width: 100%;
  }
  .car-item__btn-book,
  .car-item__btn-detail {
    white-space: nowrap;
    font-size: 12px;
  }
  .bm-or,
  .book-modal__staff,
  .hide-mob,
  .car-item__book-icon,
  .car-item__arrow-icon {
    display: none;
  }
  .car-item__price-int {
    font-size: 18px;
  }
  .car-item__poster {
    height: 129px;
  }
  .modal-book {
    width: 96%;
  }
  .bm-thumbnail {
    width: 38px;
    height: 38px;
  }

}