/* path: src/tariffs/static/tariffs/css/tariff_summary.css */

.TariffSummary{
  display:grid;
  gap:0;
  padding:20px 18px 18px;
  background:var(--surface);
  border:1px solid var(--divider);
  border-radius:var(--r-m);
}

.TariffSummary__head{
  display:grid;
  gap:6px;
  margin-bottom:16px;
}

.TariffSummary__title{
  margin:0;
  font-size:1.9rem;
  line-height:1.06;
  letter-spacing:-.02em;
}

.TariffSummary__subtitle{
  margin:0;
  max-width:28ch;
  color:var(--text-2);
  font-size:.98rem;
  line-height:1.38;
}

.TariffSummary__body{
  display:grid;
  gap:0;
  min-width:0;
}

.TariffSummary__empty{
  color:var(--text-2);
  line-height:1.45;
}

.TariffSummary__items{
  display:grid;
  gap:0;
}

.TariffSummary__item{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  grid-template-areas:
    "title side"
    "meta  side";
  column-gap:12px;
  row-gap:5px;
  align-items:start;
  padding:13px 0;
  border-bottom:1px solid var(--divider-2);
}

.TariffSummary__item:first-child{
  padding-top:0;
}

.TariffSummary__item:last-child{
  padding-bottom:0;
  border-bottom:0;
}

.TariffSummary__itemTitle{
  grid-area:title;
  min-width:0;
  color:var(--text);
  font-size:1.06rem;

  line-height:1.3;
}

.TariffSummary__itemMeta{
  grid-area:meta;
  min-width:0;
  color:var(--text-2);
  font-size:.93rem;
  line-height:1.34;
}

.TariffSummary__itemSide{
  grid-area:side;
  min-width:96px;
  display:grid;
  justify-items:end;
  align-content:start;
}

.TariffSummary__itemTop{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  min-width:0;
}

.TariffSummary__itemPrice{
  white-space:nowrap;
  color:var(--text);
  font-size:1.04rem;
  line-height:1.2;
  text-align:right;
}

.TariffSummary__remove{
  width:14px;
  height:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin-top:0;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.34);
  font:inherit;
  font-size:.8rem;
  line-height:1;
  cursor:pointer;
  transition:color .15s ease;
}

.TariffSummary__remove:hover,
.TariffSummary__remove:focus{
  color:var(--text-2);
  outline:none;
}

.TariffSummary__remove:active{
  color:rgba(255,255,255,.34);
}

.TariffSummary__total{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--divider-3);
}

.TariffSummary__totalLabel{
  color:var(--text-2);
  font-size:1rem;
  line-height:1.2;
}

.TariffSummary__totalValue{
  color:var(--text);
  font-size:1.75rem;
  font-family: var(--font-head);
  line-height:1;
  letter-spacing:-.02em;
  text-align:right;
}

@media (max-width: 479px){
  .TariffSummary{
    padding:18px 16px 16px;
  }

  .TariffSummary__head{
    gap:6px;
    margin-bottom:14px;
  }

  .TariffSummary__title{
    font-size:1.8rem;
  }

  .TariffSummary__subtitle{
    max-width:26ch;
    font-size:.95rem;
    line-height:1.36;
  }

  .TariffSummary__item{
    column-gap:10px;
    row-gap:4px;
    padding:12px 0;
  }

  .TariffSummary__itemTitle{
    font-size:1rem;
  }

  .TariffSummary__itemMeta{
    font-size:.9rem;
  }

  .TariffSummary__itemSide{
    min-width:84px;
  }

  .TariffSummary__itemTop{
    gap:8px;
  }

  .TariffSummary__itemPrice{
    font-size:1rem;
  }

  .TariffSummary__remove{
    width:12px;
    height:12px;
    font-size:.76rem;
  }

  .TariffSummary__total{
    margin-top:14px;
    padding-top:13px;
  }

  .TariffSummary__totalValue{
    font-size:1.65rem;
  }
}