/* ===== Promin Partner — Courier income calculator ===== */
/* Brand tokens (taken from prominpartner.com) */
:root {
  --font: "Manrope", system-ui, sans-serif;
  --font-family: "Manrope", system-ui, sans-serif;
  --accent: #FBC707;
  --accent-ink: #3A2F06;
  --ink: #000000;
  --dark: #1E1E1E;      
  --dark-2: #262626;    
  --dark-3: #2E2E2E;    
  --line: #ECECEC;
  --line-dark: rgba(255, 255, 255, 0.08);
  --muted: #999999;
  --muted-dark: #8A8A8A;
  --surface: #FFFFFF;
  --surface-2: #F5F5F5;
  --radius-lg: 1.458333vw;
  --radius-md: 0.9375vw;
  --radius-sm: 0.625vw;
}

* { box-sizing: border-box; }

.calc {
  /* max-width: 64.583333vw; */
  margin: 0 auto 0;
  -webkit-font-smoothing: antialiased;
}

.calc .mini-container-w{
  margin: auto;
}
.calc h1{
    font-size: 3.75vw;
    font-weight: 500;
    line-height: 3.75vw;
    letter-spacing: -.04em;
    text-align: left;
    margin-top: 2.5vw;
}
.calc .h1-desc{
  font-weight: 400;
  font-size: 0.833333vw;
  margin-top: 0.520833vw;
  line-height: 140%;
  color: #000;
}

.calc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.083333vw;
  align-items: stretch;
  margin-top: 2.083333vw;
}

/* ===== Panels ===== */
.panel {border-radius: 1.666667vw;}

.panel--controls {
  border: 0.052083vw solid #000;
  border-radius: 1.666667vw;
  padding: 1.5625vw;
}

.panel--result {
  background: #000;
  padding: 1.5625vw;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5625vw;
}

/* ===== Fields ===== */
.field {margin-bottom: 2.083333vw;}
.field:last-child { margin-bottom: 0; }

.field--row {
  display: grid;
  grid-template-columns: 10.416667vw 1fr;
  gap: 1.5625vw;
  align-items: start;
}
.field__col { display: flex; flex-direction: column; }

.field__label {
  display: block;
  margin-bottom: 1.041667vw;
  font-weight: 400;
  font-size: 0.833333vw;
  line-height: 140%;
  color: #000;
}

/* ===== City dropdown (custom, branded) ===== */
.dropdown { position: relative; }

.dropdown__trigger {
  display: flex;
  align-items: center;
  gap: 0.520833vw;
  width: 100%;
  height: 3.125vw;
  padding: 0 0.833333vw;
  background: #fff;
  border: 0.052083vw solid #000;
  border-radius: 0.833333vw;
  cursor: pointer;
  
  font-weight: 600;
  font-size: 0.833333vw;
  line-height: 140%;
  color: #000;
  text-align: left;
  transition: border-color .15s ease;
}
.dropdown__trigger:hover { border-color: #000; }
.dropdown__trigger:focus-visible { outline: 0.104167vw solid var(--accent); outline-offset: 0.104167vw; }

.dropdown__pin { display: flex; color: #000; flex: 0 0 auto; }
.dropdown__value { flex: 1 1 auto; }
.dropdown__chev {
  display: flex;
  color: #000;
  flex: 0 0 auto;
  transition: transform .2s ease;
}
.dropdown.is-open .dropdown__chev { transform: rotate(180deg); }

.dropdown__menu {
  position: absolute;
  top: calc(100% + 0.416667vw);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 0.416667vw;
  list-style: none;
  background: #fff;
  border: 0.052083vw solid #000;
  border-radius: 0.833333vw;
  box-shadow: 0 1.041667vw 2.083333vw rgba(0, 0, 0, 0.12);
  max-height: 16.666667vw;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.3125vw);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.dropdown.is-open .dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.520833vw;
  padding: 0.625vw 0.729167vw;
  border-radius: 0.520833vw;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.833333vw;
  line-height: 140%;
  color: #000;
  transition: background .12s ease;
}
.dropdown__option:hover { background: var(--surface-2); }
.dropdown__option.is-selected { background: var(--surface-2); }
.dropdown__option-check {
  display: none;
  width: 0.9375vw;
  height: 0.9375vw;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.dropdown__option.is-selected .dropdown__option-check { display: flex; }

/* ===== Segmented (transport) ===== */
.segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.seg {
  
  cursor: pointer;
  transition: all .15s ease;
  font-weight: 600;
  font-size: 0.833333vw;
  line-height: 140%;
  color: #000;
  background: var(--surface);
  border: 0.052083vw solid #eee;
  border-radius: 0.833333vw;
  height: 3.125vw;
}
.seg:hover { border-color: #cfcfcf; }
.seg.is-active {
  border-color: #000;
  color: #fff;
  background: #000 !important;
}

/* ===== Services ===== */
.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.041667vw;
}
.service {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.125vw;
  border-radius: 0.833333vw;
  cursor: pointer;
  border: 0.052083vw solid transparent;
  background: #EEEEEE;
  transition: transform .12s ease, background .15s ease, color .15s ease;
  user-select: none;
}
.service:hover { transform: translateY(-0.104167vw); }

.service__logo {
  height: 1.145833vw;
  width: auto;
  max-width: 80%;
  fill: currentColor;
  color: inherit;
}
/* неактивный логотип: заливка задаётся тут, через доп. класс */
.service__logo.is-off { fill: rgba(117, 117, 117, 0.5); }

/* per-brand backgrounds — full colour by default (nothing selected) */
.service--uber, .service--uber:focus   { background: #000000 !important; }
.service--bolt, .service--bolt:focus   { background: #32BB78 !important; }
.service--glovo, .service--glovo:focus  { background: #FFCE1C !important; }
.service--wolt, .service--wolt:focus   { background: #4CB2E2 !important; }
.service--stuart, .service--stuart:focus { background: #0192FF !important; }
.service--jush, .service--jush:focus   { background: #8ECB01 !important; }

/* dimmed: at least one service is chosen and this one is NOT */
.service.is-dimmed {
  background: #EEEEEE !important;
  border-color: #EEEEEE !important;
     /* logo -> rgba(117,117,117,.5) */
}

.service svg{
  height: 3.125vw;
  opacity: 1;
  width: auto;
}
.service.is-dimmed svg path{
  fill: rgba(117, 117, 117, 0.5);
  opacity: 1;
}

/* locked: max (2) reached, this one not selected — no interaction */
.service.is-disabled { cursor: default; }
.service.is-disabled:hover { transform: none; }

.service__check {
  position: absolute;
  top: 0.416667vw;
  right: 0.416667vw;
  width: 1.041667vw;
  height: 1.041667vw;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.service.is-active .service__check { display: flex; }

/* ===== Sliders ===== */
.slider { margin-top: 1.145833vw; }
.slider:first-of-type { margin-top: 0; }
.slider__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 1.5625vw;
  padding: 1.5625vw 0;
  border-top: 0.052083vw solid #eee;
}
.slider:nth-child(2) .slider__top { margin-top: 0; }
.slider__name {font-weight: 600;font-size: 1.041667vw;line-height: 120%;letter-spacing: -0.04em;color: #000;}
.slider__value {font-weight: 600;font-size: 1.041667vw;line-height: 120%;letter-spacing: -0.04em;color: #000;}

.slider__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.104167vw;
  border-radius: 0.15625vw;
  background: var(--ink);
  cursor: pointer;
  outline: none;
  z-index: 20;
  position: relative;
}
/* filled portion via gradient set inline-free through JS custom prop */
.slider__input {
  background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill, 50%), var(--ink) var(--fill, 50%), var(--ink) 100%) !important;
}
.slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.25vw;
  height: 1.25vw;
  border-radius: 50%;
  background: #000;
  border: 0.3125vw solid #FBC707;
  cursor: pointer;
}
.slider__input::-moz-range-thumb {
  width: 1.25vw;
  height: 1.25vw;
  border-radius: 50%;
  background: #000;
  border: 0.208333vw solid #FBC707;
  cursor: pointer;
}

/* ticks: round bullet ABOVE each number */
.slider__ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 0.9375vw;
  position: relative;
  z-index: 10;
}
.slider__ticks span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.520833vw;
  width: 1.25vw;
  font-weight: 600;
  font-size: 0.833333vw;
  line-height: 120%;
  letter-spacing: -0.04em;
  text-align: center;
  color: #000;
  position: relative;
}
.slider__ticks span::before {
  content: "";
  width: 0.364583vw;
  height: 0.364583vw;
  border-radius: 50%;
  background: #000;                 /* вне жёлтого диапазона — чёрный */
  transition: background .15s ease;
  position: absolute;
  top: -1.302083vw;
}
.slider__ticks span.is-filled::before {
  background: var(--accent);        /* попадает в жёлтый диапазон — жёлтый */
}

/* ===== Result tags ===== */
.result__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.208333vw;
  align-items: center;
}
.tag {
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.729167vw;
  line-height: 140%;
  color: #fff;
  border-radius: 0.416667vw;
  padding: 0.260417vw 0.520833vw;
  background: rgba(255, 255, 255, 0.2);
}
.tag--muted { color: var(--muted-dark); }
.result__reset {
  margin-left: auto;
  width: 1.875vw;
  height: 1.5625vw;
  border-radius: 0.625vw;
  border: none;
  background: #fff !important;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.result__reset svg{
  width: 0.833333vw;
  height: auto;
  transition: transform .3s ease;
}
.result__reset:hover svg { transform: rotate(-45deg); }

/* ===== Hero cards ===== */
.result__hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.520833vw;
  flex-grow: 1;
}
.card {
  border-radius: 0.833333vw;
  padding: 1.041667vw;
  display: flex;
  flex-direction: column;
}
.card--accent {
  background: var(--accent);
  color: var(--accent-ink);
  justify-content: space-between;
  /* min-height: 17.1875vw; */
}
.card__label {font-weight: 500;font-size: 0.833333vw;line-height: 140%;color: #000;}
.card__big {
  margin: 1.041667vw 0 0;
  margin-bottom: auto;
  
  font-weight: 600;
  font-size: 3.333333vw;
  line-height: 100%;
  letter-spacing: -0.04em;
  color: #000;
}
.card__approx { font-weight: 700; }
.card__foot {font-weight: 500;font-size: 0.729167vw;line-height: 140%;color: rgba(0, 0, 0, 0.5);}

.card--orders {
  background: #fff;
  justify-content: space-between;
}
.orders {display: flex;flex-direction: column;gap: 0.78125vw;}
.orders__row {
  display: flex;
  justify-content: space-between;
  font-size: 0.833333vw;
  line-height: 140%;
}
.orders__row span:first-child {font-weight: 500;color: #000;}
.orders__row span:last-child {font-weight: 600;color: #000;}
.orders__net {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 0.052083vw solid rgba(0, 0, 0, 0.2);
  padding-top: 0.833333vw;
  margin-top: 0.833333vw;
  font-size: 0.833333vw;
}
.orders__net span:first-child {color: #000;}
.orders__net strong {font-size: 0.833333vw;font-weight: 700;color: #000;}

/* ===== Empty state (сервис не выбран) ===== */
/* Показывается вместо .result__hero, когда на .panel--result есть класс .is-empty */
.result__empty {
  display: none;                    /* скрыт по умолчанию */
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  min-height: 17.1875vw;
  background: #fff;
  border-radius: 0.833333vw;
  padding: 1.5625vw;
}
.result__empty-title {
  margin: 0;
  
  font-weight: 600;
  font-size: 1.666667vw;
  line-height: 120%;
  letter-spacing: -0.04em;
  color: #000;
}
.result__empty-hint {
  margin: 0;
  
  font-weight: 500;
  font-size: 0.833333vw;
  line-height: 140%;
  color: rgba(0, 0, 0, 0.5);
}
.panel--result.is-empty .result__hero { display: none; }
.panel--result.is-empty .result__empty { display: flex; }

/* ===== Stat cards ===== */
.result__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.520833vw;
}
.stat {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0.833333vw;
  padding: 1.041667vw;
}
.stat__label {font-weight: 500;font-size: 0.729167vw;line-height: 140%;color: #fff;}
.stat__value {
  display: block;
  margin-top: 0.520833vw;
  font-weight: 600;
  font-size: 1.666667vw;
  line-height: 120%;
  letter-spacing: -0.04em;
  color: #fff;
}
.stat__approx { font-weight: 700; }
.stat__note {
  margin-left: 0.208333vw;
  padding: 0.416667vw 0;
  font-weight: 500;
  font-size: 0.833333vw;
  line-height: 140%;
  color: #fff;
}
.stat__note--neg {color: rgba(255, 255, 255, 0.5);}



@media(max-width: 1660px){

	.calc {
	  /* max-width: 1240px; */
	  margin: 0 auto 0;
	  -webkit-font-smoothing: antialiased;
	}

	.calc .mini-container-w{
	  margin: auto;
	}
	.calc h1{
	    margin-top: 40px;
	    font-size: 64px;
	    line-height: 64px;
	}
	.calc .h1-desc{
	  font-weight: 400;
	  font-size: 16px;
	  margin-top: 10px;
	  line-height: 140%;
	  color: #000;
	}

	.calc__grid {
	  display: grid;
	  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	  gap: 40px;
	  align-items: stretch;
	  margin-top: 40px;
	}

	/* ===== Panels ===== */
	.panel {border-radius: 32px;}

	.panel--controls {
	  border: 1px solid #000;
	  border-radius: 32px;
	  padding: 30px;
	}

	.panel--result {
	  background: #000;
	  padding: 30px;
	  color: #fff;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	  gap: 30px;
	}

	/* ===== Fields ===== */
	.field {margin-bottom: 40px;}
	.field:last-child { margin-bottom: 0; }

	.field--row {
	  display: grid;
	  grid-template-columns: 200px 1fr;
	  gap: 30px;
	  align-items: start;
	}
	.field__col { display: flex; flex-direction: column; }

	.field__label {
	  display: block;
	  margin-bottom: 20px;
	  font-weight: 400;
	  font-size: 16px;
	  line-height: 140%;
	  color: #000;
	}

	/* ===== City dropdown (custom, branded) ===== */
	.dropdown { position: relative; }

	.dropdown__trigger {
	  display: flex;
	  align-items: center;
	  gap: 10px;
	  width: 100%;
	  height: 60px;
	  padding: 0 16px;
	  background: #fff;
	  border: 1px solid #000;
	  border-radius: 16px;
	  cursor: pointer;
	  
	  font-weight: 600;
	  font-size: 16px;
	  line-height: 140%;
	  color: #000;
	  text-align: left;
	  transition: border-color .15s ease;
	}
	.dropdown__trigger:hover { border-color: #000; }
	.dropdown__trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

	.dropdown__pin { display: flex; color: #000; flex: 0 0 auto; }
	.dropdown__value { flex: 1 1 auto; }
	.dropdown__chev {
	  display: flex;
	  color: #000;
	  flex: 0 0 auto;
	  transition: transform .2s ease;
	}
	.dropdown.is-open .dropdown__chev { transform: rotate(180deg); }

	.dropdown__menu {
	  position: absolute;
	  top: calc(100% + 8px);
	  left: 0;
	  right: 0;
	  z-index: 20;
	  margin: 0;
	  padding: 8px;
	  list-style: none;
	  background: #fff;
	  border: 1px solid #000;
	  border-radius: 16px;
	  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
	  max-height: 320px;
	  overflow: auto;
	  opacity: 0;
	  visibility: hidden;
	  transform: translateY(-6px);
	  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
	}
	.dropdown.is-open .dropdown__menu {
	  opacity: 1;
	  visibility: visible;
	  transform: translateY(0);
	}

	.dropdown__option {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  gap: 10px;
	  padding: 12px 14px;
	  border-radius: 10px;
	  cursor: pointer;
	  font-weight: 600;
	  font-size: 16px;
	  line-height: 140%;
	  color: #000;
	  transition: background .12s ease;
	}
	.dropdown__option:hover { background: var(--surface-2); }
	.dropdown__option.is-selected { background: var(--surface-2); }
	.dropdown__option-check {
	  display: none;
	  width: 18px;
	  height: 18px;
	  border-radius: 50%;
	  background: var(--accent);
	  color: var(--accent-ink);
	  align-items: center;
	  justify-content: center;
	  flex: 0 0 auto;
	}
	.dropdown__option.is-selected .dropdown__option-check { display: flex; }

	/* ===== Segmented (transport) ===== */
	.segmented {
	  display: grid;
	  grid-template-columns: repeat(3, 1fr);
	  gap: 0;
	}
	.seg {
	  
	  cursor: pointer;
	  transition: all .15s ease;
	  font-weight: 600;
	  font-size: 16px;
	  line-height: 140%;
	  color: #000;
	  background: var(--surface);
	  border: 1px solid #eee;
	  border-radius: 16px;
	  height: 60px;
	}
	.seg:hover { border-color: #cfcfcf; }
	.seg.is-active {
	  border-color: #000;
	  color: #fff;
	  background: #000 !important;
	}

	/* ===== Services ===== */
	.services {
	  display: grid;
	  grid-template-columns: repeat(3, 1fr);
	  gap: 20px;
	}
	.service {
	  position: relative;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  height: 60px;
	  border-radius: 16px;
	  cursor: pointer;
	  border: 1px solid transparent;
	  background: #EEEEEE;
	  transition: transform .12s ease, background .15s ease, color .15s ease;
	  user-select: none;
	}
	.service:hover { transform: translateY(-2px); }

	.service__logo {
	  height: 22px;
	  width: auto;
	  max-width: 80%;
	  fill: currentColor;
	  color: inherit;
	}
	/* неактивный логотип: заливка задаётся тут, через доп. класс */
	.service__logo.is-off { fill: rgba(117, 117, 117, 0.5); }

	/* per-brand backgrounds — full colour by default (nothing selected) */
	.service--uber, .service--uber:focus   { background: #000000 !important; }
	.service--bolt, .service--bolt:focus   { background: #32BB78 !important; }
	.service--glovo, .service--glovo:focus  { background: #FFCE1C !important; }
	.service--wolt, .service--wolt:focus   { background: #4CB2E2 !important; }
	.service--stuart, .service--stuart:focus { background: #0192FF !important; }
	.service--jush, .service--jush:focus   { background: #8ECB01 !important; }

	/* dimmed: at least one service is chosen and this one is NOT */
	.service.is-dimmed {
	  background: #EEEEEE !important;
	  border-color: #EEEEEE !important;
	     /* logo -> rgba(117,117,117,.5) */
	}

	.service svg{
	  height: 60px;
	  opacity: 1;
	}
	.service.is-dimmed svg path{
	  fill: rgba(117, 117, 117, 0.5);
	  opacity: 1;
	}

	/* locked: max (2) reached, this one not selected — no interaction */
	.service.is-disabled { cursor: default; }
	.service.is-disabled:hover { transform: none; }

	.service__check {
	  position: absolute;
	  top: 8px;
	  right: 8px;
	  width: 20px;
	  height: 20px;
	  border-radius: 50%;
	  background: var(--accent);
	  color: var(--accent-ink);
	  display: none;
	  align-items: center;
	  justify-content: center;
	  z-index: 2;
	}
	.service.is-active .service__check { display: flex; }

	/* ===== Sliders ===== */
	.slider { margin-top: 22px; }
	.slider:first-of-type { margin-top: 0; }
	.slider__top {
	  display: flex;
	  justify-content: space-between;
	  align-items: baseline;
	  margin-top: 30px;
	  padding: 30px 0;
	  border-top: 1px solid #eee;
	}
	.slider:nth-child(2) .slider__top { margin-top: 0; }
	.slider__name {font-weight: 600;font-size: 20px;line-height: 120%;letter-spacing: -0.04em;color: #000;}
	.slider__value {font-weight: 600;font-size: 20px;line-height: 120%;letter-spacing: -0.04em;color: #000;}

	.slider__input {
	  -webkit-appearance: none;
	  appearance: none;
	  width: 100%;
	  height: 2px;
	  border-radius: 3px;
	  background: var(--ink);
	  cursor: pointer;
	  outline: none;
	  z-index: 20;
	  position: relative;
	}
	/* filled portion via gradient set inline-free through JS custom prop */
	.slider__input {
	  background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill, 50%), var(--ink) var(--fill, 50%), var(--ink) 100%) !important;
	}
	.slider__input::-webkit-slider-thumb {
	  -webkit-appearance: none;
	  appearance: none;
	  width: 24px;
	  height: 24px;
	  border-radius: 50%;
	  background: #000;
	  border: 6px solid #FBC707;
	  cursor: pointer;
	}
	.slider__input::-moz-range-thumb {
	  width: 24px;
	  height: 24px;
	  border-radius: 50%;
	  background: #000;
	  border: 4px solid #FBC707;
	  cursor: pointer;
	}

	/* ticks: round bullet ABOVE each number */
	.slider__ticks {
	  display: flex;
	  justify-content: space-between;
	  margin-top: 18px;
	  position: relative;
	  z-index: 10;
	}
	.slider__ticks span {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  gap: 10px;
	  width: 24px;
	  font-weight: 600;
	  font-size: 16px;
	  line-height: 120%;
	  letter-spacing: -0.04em;
	  text-align: center;
	  color: #000;
	  position: relative;
	}
	.slider__ticks span::before {
	  content: "";
	  width: 7px;
	  height: 7px;
	  border-radius: 50%;
	  background: #000;                 /* вне жёлтого диапазона — чёрный */
	  transition: background .15s ease;
	  position: absolute;
	  top: -25px;
	}
	.slider__ticks span.is-filled::before {
	  background: var(--accent);        /* попадает в жёлтый диапазон — жёлтый */
	}

	/* ===== Result tags ===== */
	.result__tags {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 4px;
	  align-items: center;
	}
	.tag {
	  white-space: nowrap;
	  font-weight: 600;
	  font-size: 14px;
	  line-height: 140%;
	  color: #fff;
	  border-radius: 8px;
	  padding: 5px 10px;
	  background: rgba(255, 255, 255, 0.2);
	}
	.tag--muted { color: var(--muted-dark); }
	.result__reset {
	  margin-left: auto;
	  width: 36px;
	  height: 30px;
	  border-radius: 12px;
	  border: none;
	  background: #fff !important;
	  color: #000;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  cursor: pointer;
	}

	.result__reset svg{
	  width: 16px;
	  height: auto;
	  transition: transform .3s ease;
	}
	.result__reset:hover svg { transform: rotate(-45deg); }

	/* ===== Hero cards ===== */
	.result__hero {
	  display: grid;
	  grid-template-columns: 1fr 1fr;
	  gap: 10px;
	  flex-grow: 1;
	}
	.card {
	  border-radius: 16px;
	  padding: 20px;
	  display: flex;
	  flex-direction: column;
	}
	.card--accent {
	  background: var(--accent);
	  color: var(--accent-ink);
	  justify-content: space-between;
	  /* min-height: 330px; */
	}
	.card__label {font-weight: 500;font-size: 16px;line-height: 140%;color: #000;}
	.card__big {
	  margin: 20px 0 0;
	  margin-bottom: auto;
	  
	  font-weight: 600;
	  font-size: 64px;
	  line-height: 100%;
	  letter-spacing: -0.04em;
	  color: #000;
	}
	.card__approx { font-weight: 700; }
	.card__foot {font-weight: 500;font-size: 14px;line-height: 140%;color: rgba(0, 0, 0, 0.5);}

	.card--orders {
	  background: #fff;
	  justify-content: space-between;
	}
	.orders {display: flex;flex-direction: column;gap: 15px;}
	.orders__row {
	  display: flex;
	  justify-content: space-between;
	  font-size: 16px;
	  line-height: 140%;
	}
	.orders__row span:first-child {font-weight: 500;color: #000;}
	.orders__row span:last-child {font-weight: 600;color: #000;}
	.orders__net {
	  display: flex;
	  justify-content: space-between;
	  align-items: baseline;
	  border-top: 1px solid rgba(0, 0, 0, 0.2);
	  padding-top: 16px;
	  margin-top: 16px;
	  font-size: 16px;
	}
	.orders__net span:first-child {color: #000;}
	.orders__net strong {font-size: 16px;font-weight: 700;color: #000;}

	/* ===== Empty state (сервис не выбран) ===== */
	/* Показывается вместо .result__hero, когда на .panel--result есть класс .is-empty */
	.result__empty {
	  display: none;                    /* скрыт по умолчанию */
	  flex-direction: column;
	  justify-content: space-between;
	  flex-grow: 1;
	  min-height: 330px;
	  background: #fff;
	  border-radius: 16px;
	  padding: 30px;
	}
	.result__empty-title {
	  margin: 0;
	  
	  font-weight: 600;
	  font-size: 32px;
	  line-height: 120%;
	  letter-spacing: -0.04em;
	  color: #000;
	}
	.result__empty-hint {
	  margin: 0;
	  
	  font-weight: 500;
	  font-size: 16px;
	  line-height: 140%;
	  color: rgba(0, 0, 0, 0.5);
	}
	.panel--result.is-empty .result__hero { display: none; }
	.panel--result.is-empty .result__empty { display: flex; }

	/* ===== Stat cards ===== */
	.result__stats {
	  display: grid;
	  grid-template-columns: 1fr 1fr;
	  gap: 10px;
	}
	.stat {
	  background: rgba(255, 255, 255, 0.1);
	  border-radius: 16px;
	  padding: 20px;
	}
	.stat__label {font-weight: 500;font-size: 14px;line-height: 140%;color: #fff;}
	.stat__value {
	  display: block;
	  margin-top: 10px;
	  font-weight: 600;
	  font-size: 32px;
	  line-height: 120%;
	  letter-spacing: -0.04em;
	  color: #fff;
	}
	.stat__approx { font-weight: 700; }
	.stat__note {
	  margin-left: 4px;
	  padding: 8px 0;
	  font-weight: 500;
	  font-size: 16px;
	  line-height: 140%;
	  color: #fff;
	}
	.stat__note--neg {color: rgba(255, 255, 255, 0.5);}
}

@media(max-width: 1440px){
	.calc h1{
		font-family: var(--font-family);
		font-weight: 600;
		font-size: 40px;
		line-height: 120%;
		letter-spacing: -0.04em;
		color: #000;
		margin-top: 20px;
	}
}

@media (max-width:1280px) {
	.calc__grid{
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

@media (max-width:700px) {
	.field--row{
		grid-template-columns: 1fr;
		margin-bottom: 30px;
	}
	.segmented{
		grid-template-columns: 1fr 1fr;
	}
	.seg:last-child{
		grid-column-start: 1;
		grid-column-end: 3;
	}
	.panel--controls{
		padding: 25px 20px;;
	}
	.dropdown__trigger,
	.seg{
		height: 50px;
	}
	.services{
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
	.slider__top{
		padding: 15px 0;
		margin-top: 15px;
	}
	.panel--result{
		padding: 20px;
		gap: 20px;
	}
	.result__hero{
		grid-template-columns: 1fr;
		
	}
	.card__label{
		font-size: 14px;
	}
	.card--accent,
	.card--orders{
		padding: 15px;
	}
	.card--accent{
		display: grid;
		grid-template-columns:
	}
	.card__big{
		font-family: var(--font-family);
		font-weight: 600;
		font-size: 40px;
		line-height: 100%;
		letter-spacing: -0.04em;
		color: #000;
	}
	.stat{
		padding: 15px;
	}
	.stat__value{
		font-family: var(--font-family);
		font-weight: 600;
		font-size: 24px;
		line-height: 120%;
		letter-spacing: -0.04em;
		color: #fff;
	}
	.stat__note{
		display: block;
		font-family: var(--font-family);
		font-weight: 500;
		font-size: 14px;
		line-height: 140%;
		color: #fff;
		margin-top: 5px;
	}
	.result__stats{
		margin-top: -10px;
	}
	.calc h1{
		font-family: var(--font-family);
		font-weight: 600;
		font-size: 32px;
		line-height: 120%;
		letter-spacing: -0.04em;
		color: #000;
	}
}
/* ============================================================
   Доработки: reset по выбору, лоадер-оверлей, тултип расходов
   ============================================================ */

/* 1) Кнопка reset — только когда выбран хотя бы 1 сервис
   (.is-empty ставится на панель, когда сервисов нет) */
.panel--result.is-empty .result__reset { display: none; }

/* 2) Оверлей со спиннером при пересчёте правой панели */
.panel--result { position: relative; }
.result__loader {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: #000;
  border-radius: inherit;
  z-index: 6;
  backdrop-filter: blur(10px);
  background: rgba(0, 0, 0, 0.5);
}
.panel--result.is-loading .result__loader { display: flex; }
.result__spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--accent);
  animation: calcspin 0.7s linear infinite;
}
@keyframes calcspin { to { transform: rotate(360deg); } }

/* 3) Тултип «?» у расходов (Чистый/смену) */
.hint {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  margin-left: 6px;
  cursor: help;
}
.hint__icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.hint__pop {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  left: auto;
  width: 280px;
  padding: 14px 16px;
  background: #fff;
  color: #000;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  font-family: var(--font-family);
  font-size: 13px;
  line-height: 140%;
  font-weight: 500;
  text-align: left;
  white-space: normal;
  display: none;
  z-index: 30;
}
.hint:hover .hint__pop,
.hint:focus-within .hint__pop { display: block; }
.hint__intro { display: block; margin-bottom: 8px; color: rgba(0, 0, 0, 0.6); }
.hint__row { display: block; }
.hint__row[hidden] { display: none; }