/* === GENERAL === */
body.noscroll {
  overflow: hidden;
}

.asphalt-detail-module .row,
.asphalt-detail-module .col {
  margin: 0;
  padding: 0;
}

#header-main .fl-row-content-wrap {
    border: none;
}

.bb-flex {
  display: flex;
  align-items: center;
}

/* === PRINT === */
.print-only {
  display: none;
}

@media print {
  .print-only {
    display: block;
  }
  
  .print-hidden,
  header, footer {
    display: none;
  }

  .specifications {
    page-break-before: always;
    page-break-after: always;
  }
}

/* === MAIN SWIPER === */
.detail-header {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-header .swiper-container {
  position: relative;
  padding-top: 60%;
}

.detail-header .swiper {
  position: absolute;
  inset: 0;
  background-color: black;
}

.detail-header .swiper.fullscreen {
  position: fixed;
  z-index: 999;
}

.detail-header .swiper-slide {
  overflow: hidden;
}

.detail-header .swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}

.detail-header .swiper.fullscreen .swiper-slide img {
  object-fit: contain;
  object-position: center;
}

.detail-header .swiper-button {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  position: absolute;
  bottom: calc(50% - 20px);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 0;
  background-color: black;
  color: white;
  cursor: pointer;
  opacity: 0.5;
  transition: all 0.3s;
}

.detail-header .swiper-button:hover {
  opacity: 1;
}
.detail-header .swiper-button.prev { left: 0; }
.detail-header .swiper-button.next { right: 0; }

.detail-header .swiper-button.fullscreen {
  top: 20px;
  right: 20px;
  border-radius: 9999px;
  background-color: #f1f0f0;
  color: black;
  opacity: 1;
}

.detail-header .swiper.fullscreen .swiper-button.expand,
.detail-header .swiper:not(.fullscreen) .swiper-button.unexpand {
  display: none !important;
}

.detail-header .swiper-button svg {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.detail-header .swiper-button.fullscreen svg {  
  width: 20px;
  height: 20px;
  padding: 2px;
  border: 1px solid currentColor;
}

/* === INFO BLOCK === */
.info-block .content {
  background-color: #f1f0f0;
  color: black;
  height: 100%;
  width: 100%;
  padding: 58px 79px 39px;
}

.info-block .brand_model_type {
	color: black;
	margin-bottom: 23px;
	line-height: 1;
}

.info-block .brand_model {
	/* text-transform: uppercase; */
	color: black;
	font-size: 36px
}

.info-block .type {
	font-size: 16px;
}

.info-block hr {
	border-top: 1px solid #404040;
	width: 100%;
}

.info-block .stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
	margin: 40px 0;
}

.info-block .stats .title {
  text-transform: uppercase;
  font-size: 12px;
  margin-bottom: 5px;
}

.info-block .stats .value {
  font-size: 18px;
  margin-bottom: 0;
}

.info-block .stats .lease a:hover {
  color: #d31922;
  cursor: pointer;
}

.info-block .icons {
	float: left;
	margin-top: 20px;
}

.info-block .icons .icon {
  color: white;
  background-color: black;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  margin-right: 23px;
  float: left;
  text-align: center;
  font-size: 20px;
  line-height: 40px;
}
.info-block .icons .icon:hover {
  color: white;
  background-color: #d31922;
}

.info-block .icons .reverse.icon {
	color: white;
	background-color: #d31922;
	margin-right: 0;
}

.info-block .icons .reverse.icon:hover {
  color: black;
  background-color: white;
}

.info-block .lease_price {
	float: left;
	margin-top: 10px;
	margin-left: 40px;
}

.info-block .lease_price h1{
  text-transform: uppercase;
  font-size: 12px;
  margin-bottom: 8px;
}

.info-block .lease_price h2 {
  font-size: 24px;
  color: #d31922;
}

.info-block .lease_price .button:hover {
  cursor: pointer;
  color: black;
}

/* === PHOTO LIST === */
.photo-list:hover {
  cursor: pointer;
}

.photo-list.row {
  margin-left: -10px;
}

.photo-list .col {
  border-top: 10px solid white;
  border-left: 10px solid white;
}

.photo-list img {
  width: 100%;
}

.photo-list .all-photos {
  background-color: black;
  text-transform: uppercase;
  text-align: center center;
  color: white;
}

.photo-list .all-photos:hover {
  color: #d31922;
}

.photo-list .all-photos img {
  opacity: 0.33;
}

.photo-list .all-photos h4 {
	position: absolute;
	top: calc(50% + 20px);
	width: 100%;
	text-align: center;
	pointer-events: none;
	font-size: 16px;
}

.photo-list .all-photos:after {
  content: url('/wp-content/themes/bb-blank-child/img/all-photos.png');
  position: absolute;
  top: calc(50% - 36px);
  left: calc(50% - 23px);
  pointer-events: none;
}

.photo-list .all-photos:hover:after {
  content:url('/wp-content/themes/bb-blank-child/img/all-photos-hover.png');
}

/* === SPECIFICATIONS + DESCRIPTION + CONTACT === */
.specifications,
.flex-container {
	max-width: 1450px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 100px;
}

.flex-container {
	display: flex;
	justify-content: space-between;
  gap: 100px;
}

.specifications-header,
.description-header,
.contact-header {
  background-color: white;
  padding: 0px 20px;
  margin-left: 100px;
  margin-top: -35px;
  margin-bottom: 50px;
  width: min-content;
}

.specifications hr,
.description hr,
.contact hr{
  border-top: 1px solid #404040;
  width: 100%;
}

.specifications-header h2,
.description-header h2,
.contact-header h2 {
  font-size: 26px;
}

.specifications-content {
	-moz-columns: 3;
	-webkit-columns: 3;
	columns: 3;
	margin-top: 50px;
}

.specifications h3 {
	font-size: 20px;
	margin-bottom: 18px
}

.specifications ul {
  margin-left: -15px;
  margin-top: -15px;
  margin-bottom: 20px;
}

.specifications li {
  font-size: 26px;
  margin-bottom: -10px;
}

.specifications li span {
  font-size: 16px;
}

/* description + contact */
.description,
.contact {
	flex-grow: 1;
  flex-basis: 0;
}

.contact {
	line-height: 2em;
}

.contact-content {
  display: flex;
  gap: 20px;
}

.contact-content img {
  width: 200px;
  max-width: 100%;
  object-fit: contain;
  object-position: top;
}

/* === SHARE + FINANCE === */
.share_finance {
  max-width: 1450px;
  margin: auto;
  padding: 100px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 50px;
}

.share_finance .share,
.share_finance .finance {
  position: relative;
  padding-top: 66.666%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.share_finance .overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0,0,0,0.7);
  color: white;
}

.share_finance .share .title {
  text-transform: uppercase;
}

.share_finance .share .socials {
  display: flex;
  gap: 25px;
  font-size: 25px;
}

.share_finance .finance button {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  padding: 5px 10px;
  border: 1px solid white;
  background: none;
  color: white;
  text-transform: uppercase;
  cursor: pointer;
}

.share_finance .finance button:hover {
  background: white;
  color: black;
}
#finance-iframe {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
}

#finance-iframe .overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(0,0,0,0.5);
}

#finance-iframe .iframe-content {
  overflow-y: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 20;
  transform: translateX(-50%) translateY(-50%);
  min-height: 300px;
  width: 790px;
  max-width: 90%;
  max-height: 90%;
  padding: 12px;
  background: white;
}

#finance-iframe .iframe-content button {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  position: absolute;
  top: 0px;
  right: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  padding: 3px;
  border: none;
  background-color: black;
  color: white;
  cursor: pointer;
}

#finance-iframe .iframe-content button svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#finance-iframe .iframe-content iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* === Responsive === */
@media(max-width:1600px){
  .info-block .content {
    padding: 39px;
  }

  .info-block .stats {
    margin-bottom: 0px;
  }
  .info-block .stats .row {
    margin-top: 20px;
  }
}

@media(max-width:1450px){
  .info-block .icons .icon {
    margin-right: 12px;
  }
  .info-block .lease_price {
    margin-left: 25px;
  }
}

@media(min-width:993px){
  .mobile-only {
    display: none;
  }
}
@media(max-width:992px){
  .mobile-hidden {
    display: none;
  }

  .bb-flex {
    justify-content: space-between;
  }

  .info-block .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 14px;
    margin-bottom: 10px;
  }

  .info-block .content {
    padding: 20px;
  }

  .photo-list {
    display: none;
  }

  .detail-header {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    margin-left: -20px;
    margin-right: -20px;
  }

  .info-block .info-column {
    display: flex;
    flex-direction: column-reverse;
  }
  .info-block .icons {
    margin-top: 0;
  }

  .info-block .brand_model {
    font-size: 20px;
  }

  .info-block .type {
    font-size: 12px;
  }

  .info-block .consumerPrice .title {
    font-size: 12px;
    text-transform: uppercase;
  }
  .info-block .consumerPrice .value {
    font-size: 23px;
    color: #d31922;
  }

  .specifications {
    margin-top: 50px;
  }

  .specifications-content {
    -moz-columns: 2;
    -webkit-columns: 2;
    columns: 2;
    margin-top: 40px;
  }

  .share_finance {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 20px;
    padding: 50px 0;
  }

  .flex-container {
    flex-direction: column;
    gap: 50px;
    margin-top: 50px;
  }

  .specifications-header,
  .description-header,
  .contact-header {
    padding-left: 0;
    margin-left: 0;
  }
}

@media(max-width:768px){
  .specifications-content {
    -moz-columns: 1;
    -webkit-columns: 1;
    columns: 1;
    margin-top: 30px;
  }
}

@media(max-width:640px){
  .contact-content {
    flex-direction: column;
  }
}