#avt-to-calc,
#avt-to-calc * {
  box-sizing: border-box;
}

#avt-to-calc {

  --orange:#ED8100;
  --blue:#73B0BE;
  --dark:#111923;
  --white:#FFFFFF;
  --soft:#F4F8F9;
  --line:#DDE7EA;
  --muted:#6C7A86;

  width:100%;

  background:#FFFFFF;

  color:var(--dark);

  font-family:Arial,sans-serif;

  line-height:1.35;
}


#avt-to-calc button,
#avt-to-calc input {
  font:inherit;
}


.avt-container {

  width:min(1480px,calc(100% - 40px));

  margin:0 auto;
}


/* HERO */

.avt-hero {

  position:relative;

  min-height:440px;

  background:

    linear-gradient(
      90deg,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.93) 27%,
      rgba(255,255,255,.35) 52%,
      rgba(255,255,255,0) 70%
    ),

    var(--hero)
    center center /
    cover
    no-repeat;

  overflow:hidden;
}


.avt-hero__inner {

  min-height:440px;

  display:flex;

  align-items:center;

  padding:48px 0;
}


.avt-hero__content {

  width:min(680px,52%);

  position:relative;

  z-index:2;
}


.avt-logo {

  max-width:230px;

  max-height:65px;

  object-fit:contain;

  display:block;

  margin-bottom:30px;
}


.avt-hero h1 {

  margin:0;

  font-size:clamp(42px,4.5vw,76px);

  line-height:.94;

  letter-spacing:-2.5px;

  font-weight:900;

  color:var(--dark);
}


.avt-orange {
  color:var(--orange);
}


.avt-hero__subtitle {

  max-width:650px;

  margin:22px 0 28px;

  font-size:20px;

  color:#274B66;
}


.avt-benefits {

  display:flex;

  flex-wrap:wrap;

  gap:26px;
}


.avt-benefit {

  display:flex;

  align-items:center;

  gap:10px;

  font-size:14px;

  font-weight:700;
}


.avt-benefit__icon {

  width:38px;

  height:38px;

  flex:0 0 38px;

  border:2px solid var(--blue);

  color:var(--blue);

  border-radius:12px;

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:20px;
}


/* CALCULATOR */

.avt-calc {

  background:var(--soft);

  padding:34px 0 60px;
}


.avt-section {
  margin-bottom:34px;
}


.avt-title {

  margin:0 0 17px;

  font-size:25px;

  font-weight:900;
}


.avt-title__num {

  color:var(--orange);

  margin-right:4px;
}


/* MODELS */

.avt-models {

  display:grid;

  grid-template-columns:repeat(7,1fr);

  gap:10px;
}


.avt-model {

  border:1.5px solid #DFE7E9;

  background:#fff;

  border-radius:14px;

  padding:12px 8px 13px;

  min-width:0;

  cursor:pointer;

  transition:.2s ease;

  text-align:center;
}


.avt-model:hover {

  transform:translateY(-2px);

  border-color:#B8CED4;
}


.avt-model.is-active {

  border:2px solid var(--orange);

  box-shadow:
    0 7px 22px rgba(237,129,0,.10);
}


.avt-model__image {

  height:95px;

  display:flex;

  align-items:center;

  justify-content:center;

  margin-bottom:8px;
}


.avt-model__image img {

  max-width:100%;

  max-height:100%;

  object-fit:contain;

  display:block;
}


.avt-model__name {

  font-size:14px;

  line-height:1.15;

  font-weight:900;
}


/* MAIN */

.avt-main-grid {

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    340px;

  gap:24px;

  align-items:start;
}


.avt-main-left {
  min-width:0;
}


/* MILEAGE */

.avt-mileage-row {

  display:flex;

  align-items:center;

  gap:10px;

  flex-wrap:wrap;
}


.avt-mileage-input {

  width:200px;

  height:52px;

  border:1.5px solid #D6E2E5;

  background:#fff;

  border-radius:10px;

  display:flex;

  align-items:center;

  padding:0 14px;
}


.avt-mileage-input input {

  border:0;

  outline:0;

  width:100%;

  min-width:0;

  font-size:22px;

  font-weight:700;

  color:var(--dark);

  background:transparent;
}


.avt-mileage-input span {

  font-size:13px;

  color:#4F6674;

  margin-left:5px;
}


.avt-ok {

  height:52px;

  padding:0 25px;

  border:0;

  border-radius:10px;

  color:#fff;

  background:var(--blue);

  font-weight:900;

  cursor:pointer;
}


.avt-mileage-presets {

  display:flex;

  flex-wrap:wrap;

  gap:7px;
}


.avt-mileage-btn {

  height:40px;

  padding:0 15px;

  border:1px solid #D6E2E5;

  background:#fff;

  color:var(--dark);

  border-radius:22px;

  cursor:pointer;

  font-size:12px;
}


.avt-mileage-btn.is-active {

  color:#fff;

  background:var(--orange);

  border-color:var(--orange);
}


.avt-hint {

  margin-top:8px;

  font-size:12px;

  color:var(--muted);
}


/* PARTS */

.avt-parts-switch {

  display:flex;

  width:360px;

  max-width:100%;

  padding:3px;

  border-radius:30px;

  background:#E7EEF0;
}


.avt-parts-switch button {

  flex:1;

  border:0;

  background:transparent;

  border-radius:27px;

  padding:12px 15px;

  cursor:pointer;

  color:var(--dark);
}


.avt-parts-switch button.is-active {

  color:#fff;

  background:var(--orange);

  font-weight:800;
}


/* SERVICES */

.avt-services {

  background:#fff;

  border:1px solid #E2EAEC;

  border-radius:14px;

  overflow:hidden;
}


.avt-service-head,
.avt-service-row {

  display:grid;

  grid-template-columns:
    38px
    minmax(160px,1.3fr)
    minmax(170px,1.3fr)
    90px
    115px
    115px
    110px;

  align-items:center;
}


.avt-service-head {

  min-height:45px;

  padding:0 13px;

  background:#F7FAFB;

  color:#74838F;

  font-size:11px;

  font-weight:700;
}


.avt-service-row {

  min-height:60px;

  padding:7px 13px;

  border-top:1px solid #EDF1F2;
}


.avt-check {

  width:20px;

  height:20px;

  accent-color:var(--orange);

  cursor:pointer;
}


.avt-service__name {

  font-size:13px;

  font-weight:700;

  padding-right:8px;
}


.avt-service__parts {

  color:#70808B;

  font-size:12px;

  padding-right:8px;
}


.avt-service__hours {

  font-size:12px;

  font-weight:800;
}


.avt-service__price,
.avt-service__parts-price {

  font-size:13px;

  font-weight:700;
}


.avt-service__total {

  font-size:14px;

  font-weight:900;
}


.avt-recommended {

  display:block;

  margin-top:4px;

  color:var(--orange);

  font-size:10px;

  font-weight:800;
}


/* SUMMARY */

.avt-summary {

  position:sticky;

  top:20px;

  background:#fff;

  border:1px solid #E0E9EB;

  border-radius:16px;

  padding:23px;

  box-shadow:
    0 12px 35px rgba(17,25,35,.06);
}


.avt-summary__top {

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;

  padding-bottom:18px;

  border-bottom:1px solid #E5ECEE;
}


.avt-summary__label {

  font-size:13px;

  color:#657582;
}


.avt-summary__model {

  margin-top:2px;

  font-size:23px;

  font-weight:900;
}


.avt-summary__image {

  width:125px;

  height:80px;

  object-fit:contain;
}


.avt-summary__meta {

  padding:16px 0;

  border-bottom:1px solid #E5ECEE;

  font-size:13px;

  line-height:1.6;
}


.avt-summary__line {

  display:flex;

  justify-content:space-between;

  gap:15px;

  margin:12px 0;

  font-size:14px;
}


.avt-summary__line strong {
  white-space:nowrap;
}


.avt-summary__hours {

  margin-top:-6px;

  color:#74838E;

  font-size:11px;
}


.avt-summary__total-label {

  margin-top:20px;

  font-size:15px;

  font-weight:800;
}


.avt-summary__total {

  color:var(--orange);

  font-size:42px;

  line-height:1;

  font-weight:900;

  margin:5px 0 18px;
}


.avt-order {

  width:100%;

  height:55px;

  border:0;

  border-radius:10px;

  background:var(--orange);

  color:#fff;

  font-weight:900;

  font-size:16px;

  cursor:pointer;
}


.avt-summary__note {

  margin-top:14px;

  font-size:11px;

  color:#788793;

  text-align:center;
}


/* POPUP */

.avt-popup {

  position:fixed;

  inset:0;

  z-index:999999;

  background:rgba(17,25,35,.65);

  display:none;

  align-items:center;

  justify-content:center;

  padding:20px;
}


.avt-popup.is-open {
  display:flex;
}


.avt-popup__box {

  width:min(620px,100%);

  max-height:90vh;

  overflow:auto;

  background:#fff;

  border-radius:18px;

  padding:28px;

  box-shadow:
    0 30px 90px rgba(0,0,0,.25);
}


.avt-popup__head {

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  margin-bottom:22px;
}


.avt-popup__head h3 {

  margin:0;

  font-size:27px;

  font-weight:900;
}


.avt-popup__close {

  border:0;

  background:transparent;

  font-size:30px;

  cursor:pointer;
}


.avt-popup__calc {

  background:var(--soft);

  border-radius:12px;

  padding:16px;

  margin-bottom:20px;
}


.avt-popup__model {

  font-weight:900;

  font-size:19px;
}


.avt-popup__result {

  margin-top:10px;

  display:flex;

  justify-content:space-between;

  gap:20px;
}


.avt-popup__result strong {

  color:var(--orange);

  font-size:24px;
}


.avt-form-grid {

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:12px;
}


.avt-form-field label {

  display:block;

  font-size:12px;

  font-weight:700;

  margin-bottom:6px;
}


.avt-form-field input {

  width:100%;

  height:48px;

  border:1px solid #D7E2E5;

  border-radius:9px;

  padding:0 13px;

  outline:0;
}


.avt-submit {

  margin-top:14px;

  width:100%;

  height:52px;

  border:0;

  border-radius:9px;

  background:var(--orange);

  color:#fff;

  font-weight:900;

  cursor:pointer;
}


/* TABLET */

@media(max-width:1000px) {

  .avt-models {

    display:flex;

    overflow-x:auto;

    gap:10px;

    padding-bottom:14px;

    scrollbar-color:
      var(--blue)
      #DCE6E8;
  }


  .avt-models::-webkit-scrollbar {
    height:7px;
  }


  .avt-models::-webkit-scrollbar-track {

    background:#DCE6E8;

    border-radius:10px;
  }


  .avt-models::-webkit-scrollbar-thumb {

    background:var(--blue);

    border-radius:10px;
  }


  .avt-model {
    flex:0 0 160px;
  }


  .avt-main-grid {
    grid-template-columns:1fr;
  }


  .avt-summary {

    position:relative;

    top:auto;
  }


  .avt-service-head {
    display:none;
  }


  .avt-service-row {

    grid-template-columns:
      32px
      1fr
      auto;

    gap:4px 8px;

    padding:12px;
  }


  .avt-service__name {
    grid-column:2;
  }


  .avt-service__parts {
    grid-column:2;
  }


  .avt-service__hours {

    grid-column:2;

    color:#74838E;
  }


  .avt-service__price,
  .avt-service__parts-price {
    display:none;
  }


  .avt-service__total {

    grid-column:3;

    grid-row:1 / span 3;

    align-self:center;
  }

}


/* MOBILE */

@media(max-width:640px) {

  .avt-container {
    width:calc(100% - 28px);
  }


  .avt-hero {

    min-height:310px;

    background:

      linear-gradient(
        90deg,
        rgba(255,255,255,.98),
        rgba(255,255,255,.91) 68%,
        rgba(255,255,255,.30)
      ),

      var(--hero)
      68% center /
      cover
      no-repeat;
  }


  .avt-hero__inner {

    min-height:310px;

    padding:28px 0;
  }


  .avt-hero__content {
    width:80%;
  }


  .avt-logo {

    max-width:160px;

    margin-bottom:18px;
  }


  .avt-hero h1 {

    font-size:34px;

    letter-spacing:-1.3px;
  }


  .avt-hero__subtitle {

    font-size:14px;

    margin:14px 0;
  }


  .avt-benefits {
    display:none;
  }


  .avt-calc {
    padding-top:24px;
  }


  .avt-title {
    font-size:20px;
  }


  .avt-model {
    flex-basis:135px;
  }


  .avt-model__image {
    height:76px;
  }


  /*
    На мобильном быстрые пробеги убираем.
    Только ручной ввод + ОК.
  */

  .avt-mileage-presets {
    display:none;
  }


  .avt-mileage-row {
    flex-wrap:nowrap;
  }


  .avt-mileage-input {

    flex:1;

    width:auto;
  }


  .avt-ok {
    flex:0 0 76px;
  }


  .avt-parts-switch {
    width:100%;
  }


  .avt-summary__total {
    font-size:38px;
  }


  .avt-form-grid {
    grid-template-columns:1fr;
  }

}

</style>