/* site.css
 * Назначение: общий дизайн сайта (НЕ калькулятор).
 * Из этого файла вынесены стили калькулятора в /assets/components/avcalc/css/avcalc.calc.css
 */

/* [MERGE][BLOCK01][STYLE] START */




:root {
  --brand-green: #22c55e;
  --brand-green-dark: #16a34a;
  --brand-orange: #f97316;
  --brand-orange-dark: #ea580c;
  --brand-orange-deep: #9a3412;
  --brand-red: #ef4444;
  --brand-red-dark: #b91c1c;
  --brand-blue: #38bdf8;

  --bg-page-1: #020617;

  --card-bg: #020617;
  --card-border: #1f2937;

  --text-main: #e5e7eb;
  --text-muted: #9ca3af;
  --danger: #f87171;

  --radius-card: 22px;
  --shadow-strong: 0 28px 60px rgba(0,0,0,0.8);
  --shadow-soft: 0 18px 40px rgba(0,0,0,0.9);

  --input-bg: rgba(34,197,94,0.12);
  --input-border: #334155;
  --input-border-focus: #22c55e;
  --input-bg-focus: rgba(34,197,94,0.18);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top left, #0b1120 0, #020617 38%, #020617 70%, #000000 100%);
  color: var(--text-main);
}

.page {
  min-height: 100vh;
  background:
    radial-gradient(circle at bottom right, rgba(56,189,248,0.08) 0, transparent 55%),
    radial-gradient(circle at top right, rgba(34,197,94,0.14) 0, transparent 55%);
}

.wrapper {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 12px 42px;
}


header {
  background: radial-gradient(circle at top left, #020617 0, #020617 55%, #02091c 100%);
  border-radius: 999px;
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.9);
  border: 1px solid #111827;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}

header::before {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 140px;
  height: 140px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(148,163,184,0.22) 0, transparent 70%);
  opacity: 0.9;
  pointer-events: none;
}

.logo {
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 1;
}

.logo-mark {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background:
    conic-gradient(from 220deg, #f97316, #f97316, #22c55e, #f97316, #f97316);
  box-shadow: 0 20px 36px rgba(0,0,0,0.9);
  position: relative;
  overflow: hidden;
}

.logo-mark::after {
  content: "";
  position: absolute;
  inset: 6px 10px;
  border-radius: 12px;
  border: 2px solid rgba(15,23,42,0.9);
}


.logo-mark.logo-mark--truck{
  width: 75px; 
  height: 44px; 
  border-radius: 0; 
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.logo-mark.logo-mark--truck::after{ display: none; }
.logo-mark.logo-mark--truck .logo-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}



.logo-text-main {
  font-weight: 900;
  font-size: 26px;
  letter-spacing: 0.14em;
  color: #f9fafb;
  text-transform: uppercase;
}

.logo-text-sub {
  font-weight: 500;
  font-size: 15px;
  color: var(--text-muted);
}


.top-runner {
  --cycle: 20s;
  --slot: 5s;
  --startOffset: -1.8s;

  position: relative;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,0.9);
  background: radial-gradient(circle at top left, #020617 0, #020617 60%, #02091c 100%);
  box-shadow: 0 12px 28px rgba(0,0,0,0.85);
  overflow: hidden;
  margin-bottom: 22px;
  opacity: 0.94;
  isolation: isolate;
}

.top-runner::before {
  content: "";
  position: absolute;
  inset: -40px -60px;
  background:
    radial-gradient(circle at 20% 30%, rgba(56,189,248,0.09) 0, transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(34,197,94,0.10) 0, transparent 48%);
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}

.top-runner-road {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background:
    repeating-linear-gradient(
      90deg,
      rgba(148,163,184,0.55) 0,
      rgba(148,163,184,0.55) 14px,
      rgba(148,163,184,0.0) 14px,
      rgba(148,163,184,0.0) 30px
    );
  opacity: 0.28;
  pointer-events: none;
  z-index: 1;
  animation: roadMove 2.8s linear infinite;
}

@keyframes roadMove {
  0%   { background-position: 0 0; }
  100% { background-position: 44px 0; }
}

.runner-item {
  position: absolute;
  top: 50%;
  left: -180px;
  transform: translateY(-50%);
  line-height: 1;
  will-change: left, opacity;
  pointer-events: none;
  opacity: 0;
  z-index: 2;

  animation-name: runnerPassFull;
  animation-duration: var(--cycle);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes runnerPassFull {
  0%   { left: -180px; opacity: 0.95; }
  48%  { left: calc(100% + 180px); opacity: 0.95; }
  50%  { left: calc(100% + 180px); opacity: 0; }
  100% { left: calc(100% + 180px); opacity: 0; }
}

.runner-vehicle {
  position: absolute;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.62));
}

.runner-vehicle svg {
  width: 66px;
  height: 38px;
  display: block;
  color: #e5e7eb;
  opacity: 0.92;
  animation: vehicleBob 0.85s ease-in-out infinite alternate;
}

@keyframes vehicleBob {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-1.4px); }
}

.runner-worker svg {
  width: 40px;
  height: 40px;
  display: block;
  color: var(--text-main);
  opacity: 0.86;
  animation: workerBob 0.95s ease-in-out infinite alternate;
}

@keyframes workerBob {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-1.8px); }
}

.runner-vehicle-a { animation-delay: calc(var(--startOffset) + 0s); }
.runner-worker-a  { animation-delay: calc(var(--startOffset) + var(--slot)); }

.runner-vehicle-b { animation-delay: calc(var(--startOffset) + (var(--slot) * 2)); }
.runner-worker-b  { animation-delay: calc(var(--startOffset) + (var(--slot) * 3)); }

@media (max-width: 700px) {
  .top-runner { height: 46px; margin-bottom: 18px; }
  .runner-vehicle svg { width: 72px; height: 40px; }
  .runner-worker svg { width: 42px; height: 42px; }
  .top-runner-road { opacity: 0.30; }
}

@media (prefers-reduced-motion: reduce) {
  .top-runner-road { animation: none; }
  .runner-item { animation: none; opacity: 0; }
  .runner-vehicle-a { opacity: 0.95; left: 16px; }
  .runner-vehicle svg, .runner-worker svg { animation: none; }
}

main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}


.hero {
  background: radial-gradient(circle at top left, #fed7aa 0, #fdba74 20%, #fb923c 40%, #ea580c 65%, #9a3412 100%);
  border-radius: var(--radius-card);
  padding: 28px 22px 24px;
  box-shadow: var(--shadow-strong);
  border: 1px solid rgba(148,91,35,0.9);
  position: relative;
  overflow: hidden;
  overflow-anchor: none;
}

.hero::before {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -80px;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(252,211,77,0.4) 0, transparent 60%);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  right: -120px;
  top: 30%;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(234,88,12,0.6) 0, transparent 70%);
  pointer-events: none;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  z-index: 1;
}

.hero-top {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.hero-subtitle {
  font-size: 19px;
  margin: 0 0 14px;
  color: #111827;
}

.hero-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 14px;
  padding: 0;
  max-width: 860px;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,0.22);
  background: rgba(255,255,255,0.78);
  color: #111827;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 12px 26px rgba(0,0,0,0.18);
  user-select: none;
  line-height: 1.2;
}

.hero-pill .dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(34,197,94,1) 0, rgba(22,163,74,1) 60%);
  box-shadow: 0 0 10px rgba(34,197,94,0.45);
  flex: 0 0 auto;
}

.hero-pill:hover {
  background: rgba(255,255,255,0.88);
  transform: translateY(-1px);
}

.hero-note {
  font-size: 15px;
  color: #111827;
  max-width: 520px;
  margin: 0 auto;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 16px;
  border-radius: 999px;
  background: rgba(22,163,74,0.9);
  color: #ecfdf5;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 18px;
  box-shadow: 0 8px 18px rgba(21,128,61,0.9);
  margin-left: auto;
  margin-right: auto;
}

.hero-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #bbf7d0 0, #22c55e 40%, #16a34a 100%);
  box-shadow: 0 0 8px rgba(34,197,94,0.9);
}

.hero-form-wrap {
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
}

.form-card {
  background: radial-gradient(circle at top left, #020617 0, #020617 55%, #02091c 100%);
  border-radius: 18px;
  padding: 20px 16px 18px;
  border: 1px solid #020617;
  box-shadow: var(--shadow-soft);
}

.form-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.form-title {
  font-size: 22px;
  margin: 0;
  color: #f9fafb;
}

.form-tag {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #bbf7d0;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(52,211,153,0.7);
  background: rgba(6,95,70,0.9);
  white-space: nowrap;
}

.form-subtitle {
  font-size: 15px;
  color: var(--text-muted);
  margin: 0 0 14px;
}


















































.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  margin-top: 6px;
}

.form-row { margin-bottom: 0; }
.form-row--full { grid-column: 1 / -1; }

label {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
  color: var(--text-main);
}



input, select, textarea {
  width: 100%;
  padding: 9px 12px;
  border-radius: 11px;
  border: 1px solid var(--input-border);
  font-size: 16px;
  font-family: inherit;
  background: var(--input-bg);
  color: var(--text-main);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.08s ease;
}

select option { color: #020617; background: #f9fafb; }

input::placeholder, textarea::placeholder { color: #6b7280; }

input:focus, select:focus, textarea:focus {
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 1px rgba(15,23,42,0.9), 0 0 0 2px rgba(34,197,94,0.8);
  outline: none;
  background: var(--input-bg-focus);
  transform: translateY(-0.5px);
}

textarea { min-height: 80px; resize: vertical; }





.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: 999px;
  border: none;
  background: radial-gradient(circle at top left, #22c55e 0, #16a34a 60%, #15803d 100%);
  color: #f9fafb;
  font-weight: 800;
  font-size: 17px;
  cursor: pointer;
  margin-top: 10px;
  min-width: 200px;
  box-shadow: 0 22px 48px rgba(22,163,74,0.95);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-primary:active { filter: brightness(0.97); transform: translateY(0); box-shadow: 0 16px 32px rgba(22,163,74,1); }

.small-note {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
}

.small-note a { color: var(--brand-blue); text-decoration: underline; }





























/* [IVAN][TASK-20251226-ORANGE-MONO] Единый оранжевый фон для блоков тарифов (BLOCK05-07) */

/* [/IVAN][TASK-20251226-ORANGE-MONO] */






table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 720px;
  background: #020617;
  color: var(--text-main);
  border-radius: 14px;
  overflow: hidden;
}

thead tr { background: linear-gradient(90deg, #0f172a 0, #0b1120 50%, #0f172a 100%); }

th, td {
  padding: 9px 7px;
  border: 1px solid #1e293b;
  vertical-align: top;
  text-align: left;
}

th { font-weight: 700; color: #e5e7eb; }

tbody tr:nth-child(even) { background: #020617; }
tbody tr:nth-child(odd) { background: #02091c; }

table small { color: var(--text-muted); }



.loader-tariff-title { font-size: 18px; margin: 16px 0 6px; color: #000; }

#ivan-hdr-packaging,
#ivan-hdr-assembly,
#ivan-hdr-trash {
  text-align: center;
  font-size: 21.6px; 
}


#tariffs-transport-title { text-align: center; font-size: 26.4px; } 
#tariffs-loaders-title { text-align: center; font-size: 21.6px; }  


footer { margin-top: 18px; font-size: 14px; color: #9ca3af; }
footer strong { color: #e5e7eb; }



@media (max-width: 900px) {
  header { flex-direction: column; align-items: flex-start; border-radius: 18px; }
  .hero { padding: 22px 14px 20px; }
  .hero-form-wrap { margin-top: 4px; }
}

@media (max-width: 700px) {
  .wrapper { padding: 18px 10px 24px; }
  .form-card { padding: 18px 12px 16px; }
  .form-grid { grid-template-columns: 1fr; }
  
  
  
  
  .form-title-row { flex-direction: column; align-items: center; text-align: center; }
  .form-title { text-align: center; }
  .form-tag { align-self: center; }
  .hero-pill { font-size: 14px; padding: 9px 12px; }
}







:root {
  --brand-green: #22c55e;
  --brand-green-dark: #16a34a;
  --brand-orange: #f97316;
  --brand-orange-dark: #ea580c;
  --brand-orange-deep: #9a3412;
  --brand-red: #ef4444;
  --brand-red-dark: #b91c1c;
  --brand-blue: #38bdf8;

  --bg-page-1: #020617;

  --card-bg: #020617;
  --card-border: #1f2937;

  --text-main: #e5e7eb;
  --text-muted: #9ca3af;
  --danger: #f87171;

  --radius-card: 22px;
  --shadow-strong: 0 28px 60px rgba(0,0,0,0.8);
  --shadow-soft: 0 18px 40px rgba(0,0,0,0.9);

  --input-bg: rgba(34,197,94,0.12);
  --input-border: #334155;
  --input-border-focus: #22c55e;
  --input-bg-focus: rgba(34,197,94,0.18);
}


.hero, .hero * { box-sizing: border-box; }


.hero {
  background: radial-gradient(circle at top left, #fed7aa 0, #fdba74 20%, #fb923c 40%, #ea580c 65%, #9a3412 100%);
  border-radius: var(--radius-card);
  padding: 28px 22px 24px;
  box-shadow: var(--shadow-strong);
  border: 1px solid rgba(148,91,35,0.9);
  position: relative;
  overflow: hidden;
  overflow-anchor: none;
}

.hero::before {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -80px;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(252,211,77,0.4) 0, transparent 60%);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  right: -120px;
  top: 30%;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(234,88,12,0.6) 0, transparent 70%);
  pointer-events: none;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  z-index: 1;
}

.hero-top {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.hero-subtitle {
  font-size: 19px;
  margin: 0 0 14px;
  color: #111827;
}

.hero-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 14px;
  padding: 0;
  max-width: 860px;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,0.22);
  background: rgba(255,255,255,0.78);
  color: #111827;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 12px 26px rgba(0,0,0,0.18);
  user-select: none;
  line-height: 1.2;
  transition: transform 0.12s ease, background 0.12s ease;
}

.hero-pill .dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(34,197,94,1) 0, rgba(22,163,74,1) 60%);
  box-shadow: 0 0 10px rgba(34,197,94,0.45);
  flex: 0 0 auto;
}

.hero-pill:hover {
  background: rgba(255,255,255,0.88);
  transform: translateY(-1px);
}

.hero-note {
  font-size: 15px;
  color: #111827;
  max-width: 520px;
  margin: 0 auto;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 16px;
  border-radius: 999px;
  background: rgba(22,163,74,0.9);
  color: #ecfdf5;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 18px;
  box-shadow: 0 8px 18px rgba(21,128,61,0.9);
  margin-left: auto;
  margin-right: auto;
}

.hero-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #bbf7d0 0, #22c55e 40%, #16a34a 100%);
  box-shadow: 0 0 8px rgba(34,197,94,0.9);
}

.hero-form-wrap {
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
}


.form-card {
  background: radial-gradient(circle at top left, #020617 0, #020617 55%, #02091c 100%);
  border-radius: 18px;
  padding: 20px 16px 18px;
  border: 1px solid #020617;
  box-shadow: var(--shadow-soft);
}

.form-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.form-title {
  font-size: 22px;
  margin: 0;
  color: #f9fafb;
}

.form-tag {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #bbf7d0;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(52,211,153,0.7);
  background: rgba(6,95,70,0.9);
  white-space: nowrap;
}

.form-subtitle {
  font-size: 15px;
  color: var(--text-muted);
  margin: 0 0 14px;
}













































.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: 999px;
  border: none;
  background: radial-gradient(circle at top left, #22c55e 0, #16a34a 60%, #15803d 100%);
  color: #f9fafb;
  font-weight: 800;
  font-size: 17px;
  cursor: pointer;
  margin-top: 10px;
  min-width: 200px;
  box-shadow: 0 22px 48px rgba(22,163,74,0.95);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: filter 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}

.btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-primary:active { filter: brightness(0.97); transform: translateY(0); box-shadow: 0 16px 32px rgba(22,163,74,1); }

.small-note {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
}

.small-note a { color: var(--brand-blue); text-decoration: underline; }


























@media (max-width: 900px) {
  .hero { padding: 22px 14px 20px; }
  .hero-form-wrap { margin-top: 4px; }
}

@media (max-width: 700px) {
  .form-card { padding: 18px 12px 16px; }
  
  
  
  
  
  .form-title-row { flex-direction: column; align-items: center; text-align: center; }
  .form-title { text-align: center; }
  .form-tag { align-self: center; }
  .hero-pill { font-size: 14px; padding: 9px 12px; }
}















































@media (max-width:860px){
   
}
@media (max-width:680px){
  
}


.partner-box{
  border: 2px solid rgba(15,23,42,0.85); 
  border-radius: 12px; 
  padding: 14px 12px; 
  margin: 16px auto 14px; 
  max-width: 860px; 
  background: transparent; 
}
.partner-title{
  font-size: 16px; 
  font-weight: 800; 
  color: #111827; 
  margin: 0 0 10px; 
  text-align: center; 
}
.partner-pills{
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center; 
  gap: 10px; 
}
.partner-pill{
  text-decoration: none; 
  cursor: pointer; 
}
.partner-pill:focus{
  outline: 2px solid rgba(22,163,74,0.55); 
  outline-offset: 2px; 
}




.tg-fab {
  background: rgba(229, 168, 69, 0.45) !important; 
  background: #E5A84572 !important; 
  
  
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 99999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
	  
	  border: 1px solid rgba(0, 0, 0, 0.12); 
	  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35); 
	  color: #ffffff;  
  text-decoration: none;
  line-height: 1;
  font-weight: 800;
  max-width: calc(100vw - 24px);
  -webkit-tap-highlight-color: transparent;
	  touch-action: manipulation;
	  -webkit-backdrop-filter: blur(6px); 
	  backdrop-filter: blur(6px); 
}

.tg-fab:hover {
  filter: brightness(1.05);
}

.tg-fab:active {
  transform: translateY(1px);
}

.tg-fab__icon {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
  color: #2AABEE;
}

.tg-fab__icon svg {
  width: 26px;
  height: 26px;
  display: block;
  fill: currentColor;
}

.tg-fab__text {
  font-size: 14px;
  white-space: nowrap;
}


@media (max-width: 360px) {
  .tg-fab {
    padding: 12px;
  }
  .tg-fab__text {
    display: none;
  }
}


/* [MERGE][BLOCK01][STYLE] END */


/* [MERGE][BLOCK01][STYLE] START */

    :root{
      
      --calc-block-bg: #171424; 
      --calc-field-bg: #062a33; 
      --calc-field-border: rgba(0, 0, 0, .35);
      --calc-block-border: rgba(0, 0, 0, .35);
    }

    
    

    
    

    

    

    
    

    
    

    
    
    
    
    

    
    

    
    


    
    
    
    

        
    
    



    
    
    
    

    .ms-modal{
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 999999;
      padding: 12px;
    }
    .ms-modal.is-open{ display: flex; }

    .ms-backdrop{
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.62);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
    }

    .ms-dialog{
      position: relative;
      width: min(560px, calc(100vw - 24px));
      max-height: min(560px, calc(100vh - 24px));
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 16px;
      border: 1px solid rgba(148,163,184,0.35);
      background: radial-gradient(circle at top left, #0b1224 0, #020617 60%, #020617 100%);
      box-shadow: var(--shadow-strong);
    }

    .ms-header{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 12px 14px;
      border-bottom: 1px solid rgba(148,163,184,0.18);
    }
    .ms-title{
      font-weight: 900;
      font-size: 16px;
      color: #f9fafb;
    }
    .ms-close{
      border: none;
      background: transparent;
      color: #e5e7eb;
      font-size: 28px;
      line-height: 1;
      cursor: pointer;
      padding: 0 6px;
      border-radius: 10px;
    }
    .ms-close:hover{ background: rgba(148,163,184,0.10); }

    .ms-body{
      padding: 12px 14px;
      overflow: auto;
    }

    .ms-list{
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .ms-item{
      display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 10px 10px;
      border-radius: 12px;
      background: rgba(6,42,51,0.88);
      border: 1px solid rgba(0,0,0,.35);
      cursor: pointer;
      user-select: none;
    }
    .ms-item:hover{ filter: brightness(1.05); }
    .ms-item input{
      margin-top: 2px;
      width: 18px;
      height: 18px;
      flex: 0 0 18px;
      accent-color: #22c55e;
    }
    .ms-item .ms-item-label{
      font-weight: 800;
      color: #d8f7ff;
    }

    
.ms-row--qty{
  display: flex; 
  align-items: stretch; 
  gap: 10px; 
}
.ms-row--qty .ms-item{
  flex: 1 1 auto; 
  cursor: default; 
}
.ms-row--qty .ms-item:hover{ filter: none; } 

.ms-stepper{
  display: flex; 
  align-items: center; 
  gap: 8px; 
  padding: 6px; 
  border-radius: 12px; 
  background: rgba(6,42,51,0.88); 
  border: 1px solid rgba(0,0,0,.35); 
  flex: 0 0 auto; 
}

.ms-stepper-btn{
  width: 44px; 
  height: 44px; 
  border-radius: 12px; 
  border: 1px solid rgba(0,0,0,.35); 
  background: rgba(15,23,42,0.55); 
  color: #e5e7eb; 
  font-weight: 900; 
  font-size: 22px; 
  line-height: 1; 
  cursor: pointer; 
  -webkit-tap-highlight-color: transparent; 
  touch-action: manipulation; 
}
.ms-stepper-btn:active{ transform: translateY(1px); } 
.ms-stepper-btn:disabled{
  opacity: .35; 
  cursor: not-allowed; 
}

.ms-qty{
  width: 74px; 
  height: 44px; 
  padding: 0 8px; 
  border-radius: 11px; 
  border: 1px solid rgba(0,0,0,.35); 
  background: rgba(15,23,42,0.35); 
  color: #e5e7eb; 
  font-weight: 900; 
  text-align: center; 
  outline: none; 
}
.ms-qty:focus{
  border-color: rgba(34,197,94,.65); 
  box-shadow: 0 0 0 3px rgba(34,197,94,0.18); 
}

@media (max-width: 520px){
  .ms-row--qty{
    flex-direction: column; 
    align-items: stretch; 
  }
  .ms-stepper{
    justify-content: space-between; 
  }
  .ms-stepper-btn{
    width: 52px; 
    height: 52px; 
    font-size: 26px; 
  }
  .ms-qty{
    width: 92px; 
    height: 52px; 
    font-size: 18px; 
  }
}



    .ms-footer{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      padding: 12px 14px;
      border-top: 1px solid rgba(148,163,184,0.18);
    }

    .ms-btn{
      border: none;
      border-radius: 999px;
      padding: 10px 16px;
      font-weight: 900;
      cursor: pointer;
      line-height: 1;
      transition: transform 0.08s ease, filter 0.15s ease;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    .ms-btn:active{ transform: translateY(1px); }

    .ms-btn--ghost{
      background: rgba(148,163,184,0.14);
      border: 1px solid rgba(148,163,184,0.28);
      color: #e5e7eb;
    }
    .ms-btn--ghost:hover{ filter: brightness(1.05); }

    .ms-btn--primary{
      background: radial-gradient(circle at top left, #22c55e 0, #16a34a 60%, #15803d 100%);
      color: #f9fafb;
    }
    .ms-btn--primary:hover{ filter: brightness(1.05); }
    


    
    .form-grid--inside{
      margin-top: 0;
    }
  
/* [MERGE][BLOCK01][STYLE] END */


/* [MERGE][BLOCK01][STYLE] START */

/* [IVAN][TASK-20251225-01] UI: кнопка "Тех поддержка" + модальное окно (только дизайн) */
.hdr-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
  z-index: 1;
}
.hdr-support-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
    /* [IVAN][TASK-20251225-07] 80% прозрачность (opacity 0.20) */
  background: rgba(229,168,69,0.20);
  background: #E5A84533;

  box-shadow: 0 14px 30px rgba(0,0,0,0.35);
  color:#ffffff;
  text-decoration:none;
  line-height:1;
  font-weight:900;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  white-space:nowrap;
}
.hdr-support-btn:hover{ filter: brightness(1.05); }
.hdr-support-btn:active{ transform: translateY(1px); }
.hdr-support-btn:focus-visible{
  outline: 2px solid rgba(56,189,248,0.8);
  outline-offset: 2px;
}

.iv-support-toggle{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* модалка */
.iv-support-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  padding: 12px;
}
#iv-support-toggle:checked ~ .iv-support-modal{ display:flex; }

.iv-support-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.iv-support-dialog{
  position: relative;
  width: min(620px, calc(100vw - 24px));
  max-height: min(680px, calc(100vh - 24px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,0.35);
  background: radial-gradient(circle at top left, #0b1224 0, #020617 60%, #020617 100%);
  box-shadow: var(--shadow-strong);
}

.iv-support-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(148,163,184,0.18);
}
.iv-support-title{
  font-weight: 900;
  font-size: 16px;
  color: #f9fafb;
}
.iv-support-close{
  border: none;
  background: transparent;
  color: #e5e7eb;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
  border-radius: 10px;
}
.iv-support-close:hover{ background: rgba(148,163,184,0.10); }

.iv-support-body{
  padding: 12px 14px 14px;
  overflow: auto;
}

.iv-support-form .form-grid{
  margin-top: 0;
}
.iv-support-hint{
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 10px;
  line-height: 1.4;
}

/* адаптив для кнопки в шапке */
@media (max-width: 700px){
  .hdr-support-btn{ width: 100%; justify-content: center; }
  .hdr-actions{ width: 100%; }
}

/* [MERGE][BLOCK01][STYLE] END */


/* [MERGE][BLOCK02][STYLE] START */

:root {
  --brand-green: #22c55e;
  --brand-green-dark: #16a34a;
  --brand-orange: #f97316;
  --brand-orange-dark: #ea580c;
  --brand-orange-deep: #9a3412;
  --brand-red: #ef4444;
  --brand-red-dark: #b91c1c;
  --brand-blue: #38bdf8;

  --bg-page-1: #020617;

  --card-bg: #020617;
  --card-border: #1f2937;

  --text-main: #e5e7eb;
  --text-muted: #9ca3af;
  --danger: #f87171;

  --radius-card: 22px;
  --shadow-strong: 0 28px 60px rgba(0,0,0,0.8);
  --shadow-soft: 0 18px 40px rgba(0,0,0,0.9);

  --input-bg: rgba(34,197,94,0.12);
  --input-border: #334155;
  --input-border-focus: #22c55e;
  --input-bg-focus: rgba(34,197,94,0.18);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top left, #0b1120 0, #020617 38%, #020617 70%, #000000 100%);
  color: var(--text-main);
}

.page {
  min-height: 100vh;
  background:
    radial-gradient(circle at bottom right, rgba(56,189,248,0.08) 0, transparent 55%),
    radial-gradient(circle at top right, rgba(34,197,94,0.14) 0, transparent 55%);
}

.wrapper {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 12px 42px;
}

header {
  background: radial-gradient(circle at top left, #020617 0, #020617 55%, #02091c 100%);
  border-radius: 999px;
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.9);
  border: 1px solid #111827;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}

header::before {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 140px;
  height: 140px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(148,163,184,0.22) 0, transparent 70%);
  opacity: 0.9;
  pointer-events: none;
}

.logo {
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 1;
}

.logo-mark {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background:
    conic-gradient(from 220deg, #f97316, #f97316, #22c55e, #f97316, #f97316);
  box-shadow: 0 20px 36px rgba(0,0,0,0.9);
  position: relative;
  overflow: hidden;
}

.logo-mark::after {
  content: "";
  position: absolute;
  inset: 6px 10px;
  border-radius: 12px;
  border: 2px solid rgba(15,23,42,0.9);
}

.logo-mark.logo-mark--truck{
  width: 75px;
  height: 44px;
  border-radius: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.logo-mark.logo-mark--truck::after{ display: none; }
.logo-mark.logo-mark--truck .logo-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.logo-text-main {
  font-weight: 900;
  font-size: 26px;
  letter-spacing: 0.14em;
  color: #f9fafb;
  text-transform: uppercase;
}

.logo-text-sub {
  font-weight: 500;
  font-size: 15px;
  color: var(--text-muted);
}

.top-runner {
  --cycle: 20s;
  --slot: 5s;
  --startOffset: -1.8s;

  position: relative;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,0.9);
  background: radial-gradient(circle at top left, #020617 0, #020617 60%, #02091c 100%);
  box-shadow: 0 12px 28px rgba(0,0,0,0.85);
  overflow: hidden;
  margin-bottom: 22px;
  opacity: 0.94;
  isolation: isolate;
}

.top-runner::before {
  content: "";
  position: absolute;
  inset: -40px -60px;
  background:
    radial-gradient(circle at 20% 30%, rgba(56,189,248,0.09) 0, transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(34,197,94,0.10) 0, transparent 48%);
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}

.top-runner-road {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background:
    repeating-linear-gradient(
      90deg,
      rgba(148,163,184,0.55) 0,
      rgba(148,163,184,0.55) 14px,
      rgba(148,163,184,0.0) 14px,
      rgba(148,163,184,0.0) 30px
    );
  opacity: 0.28;
  pointer-events: none;
  z-index: 1;
  animation: roadMove 2.8s linear infinite;
}

@keyframes roadMove {
  0%   { background-position: 0 0; }
  100% { background-position: 44px 0; }
}

.runner-item {
  position: absolute;
  top: 50%;
  left: -180px;
  transform: translateY(-50%);
  line-height: 1;
  will-change: left, opacity;
  pointer-events: none;
  opacity: 0;
  z-index: 2;

  animation-name: runnerPassFull;
  animation-duration: var(--cycle);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes runnerPassFull {
  0%   { left: -180px; opacity: 0.95; }
  48%  { left: calc(100% + 180px); opacity: 0.95; }
  50%  { left: calc(100% + 180px); opacity: 0; }
  100% { left: calc(100% + 180px); opacity: 0; }
}

.runner-vehicle {
  position: absolute;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.62));
}

.runner-vehicle svg {
  width: 66px;
  height: 38px;
  display: block;
  color: #e5e7eb;
  opacity: 0.92;
  animation: vehicleBob 0.85s ease-in-out infinite alternate;
}

@keyframes vehicleBob {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-1.4px); }
}

.runner-worker svg {
  width: 40px;
  height: 40px;
  display: block;
  color: var(--text-main);
  opacity: 0.86;
  animation: workerBob 0.95s ease-in-out infinite alternate;
}

@keyframes workerBob {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-1.8px); }
}

.runner-vehicle-a { animation-delay: calc(var(--startOffset) + 0s); }
.runner-worker-a  { animation-delay: calc(var(--startOffset) + var(--slot)); }

.runner-vehicle-b { animation-delay: calc(var(--startOffset) + (var(--slot) * 2)); }
.runner-worker-b  { animation-delay: calc(var(--startOffset) + (var(--slot) * 3)); }

@media (max-width: 700px) {
  .top-runner { height: 46px; margin-bottom: 18px; }
  .runner-vehicle svg { width: 72px; height: 40px; }
  .runner-worker svg { width: 42px; height: 42px; }
  .top-runner-road { opacity: 0.30; }
}

@media (prefers-reduced-motion: reduce) {
  .top-runner-road { animation: none; }
  .runner-item { animation: none; opacity: 0; }
  .runner-vehicle-a { opacity: 0.95; left: 16px; }
  .runner-vehicle svg, .runner-worker svg { animation: none; }
}

main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero {
  background: radial-gradient(circle at top left, #fed7aa 0, #fdba74 20%, #fb923c 40%, #ea580c 65%, #9a3412 100%);
  border-radius: var(--radius-card);
  padding: 28px 22px 24px;
  box-shadow: var(--shadow-strong);
  border: 1px solid rgba(148,91,35,0.9);
  position: relative;
  overflow: hidden;
  overflow-anchor: none;
}

.hero::before {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -80px;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(252,211,77,0.4) 0, transparent 60%);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  right: -120px;
  top: 30%;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(234,88,12,0.6) 0, transparent 70%);
  pointer-events: none;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  z-index: 1;
}

.hero-top {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.hero-subtitle {
  font-size: 19px;
  margin: 0 0 14px;
  color: #111827;
}

.hero-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 14px;
  padding: 0;
  max-width: 860px;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,0.22);
  background: rgba(255,255,255,0.78);
  color: #111827;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 12px 26px rgba(0,0,0,0.18);
  user-select: none;
  line-height: 1.2;
}

.hero-pill .dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(34,197,94,1) 0, rgba(22,163,74,1) 60%);
  box-shadow: 0 0 10px rgba(34,197,94,0.45);
  flex: 0 0 auto;
}

.hero-pill:hover {
  background: rgba(255,255,255,0.88);
  transform: translateY(-1px);
}

.hero-note {
  font-size: 15px;
  color: #111827;
  max-width: 520px;
  margin: 0 auto;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 16px;
  border-radius: 999px;
  background: rgba(22,163,74,0.9);
  color: #ecfdf5;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 18px;
  box-shadow: 0 8px 18px rgba(21,128,61,0.9);
  margin-left: auto;
  margin-right: auto;
}

.hero-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #bbf7d0 0, #22c55e 40%, #16a34a 100%);
  box-shadow: 0 0 8px rgba(34,197,94,0.9);
}

.hero-form-wrap {
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
}

.form-card {
  background: radial-gradient(circle at top left, #020617 0, #020617 55%, #02091c 100%);
  border-radius: 18px;
  padding: 20px 16px 18px;
  border: 1px solid #020617;
  box-shadow: var(--shadow-soft);
}

.form-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.form-title {
  font-size: 22px;
  margin: 0;
  color: #f9fafb;
}

.form-tag {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #bbf7d0;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(52,211,153,0.7);
  background: rgba(6,95,70,0.9);
  white-space: nowrap;
}

.form-subtitle {
  font-size: 15px;
  color: var(--text-muted);
  margin: 0 0 14px;
}




























.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  margin-top: 6px;
}

.form-row { margin-bottom: 0; }
.form-row--full { grid-column: 1 / -1; }

label {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
  color: var(--text-main);
}



input, select, textarea {
  width: 100%;
  padding: 9px 12px;
  border-radius: 11px;
  border: 1px solid var(--input-border);
  font-size: 16px;
  font-family: inherit;
  background: var(--input-bg);
  color: var(--text-main);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.08s ease;
}

select option { color: #020617; background: #f9fafb; }

input::placeholder, textarea::placeholder { color: #6b7280; }

input:focus, select:focus, textarea:focus {
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 1px rgba(15,23,42,0.9), 0 0 0 2px rgba(34,197,94,0.8);
  outline: none;
  background: var(--input-bg-focus);
  transform: translateY(-0.5px);
}

textarea { min-height: 80px; resize: vertical; }

#lead-success-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.75);
  display: none;
  z-index: 9998;
}

#lead-success-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
  font-family: inherit;
}

.lead-modal-card {
  background: #020617;
  max-width: 420px;
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.85);
  padding: 22px 20px 18px;
  position: relative;
  color: #e5e7eb;
  text-align: center;
}

.lead-modal-close-x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: none;
  background: #ef4444;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lead-modal-ok {
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  background: #16a34a;
  color: #fff;
  min-height: 52px;
}

.lead-modal-close {
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  background: #b91c1c;
  color: #fff;
  min-height: 52px;
}

@media (max-width: 900px) {
  header { flex-direction: column; align-items: flex-start; border-radius: 18px; }
  .hero { padding: 22px 14px 20px; }
  .hero-form-wrap { margin-top: 4px; }
}

@media (max-width: 700px) {
  .wrapper { padding: 18px 10px 24px; }
  .form-card { padding: 18px 12px 16px; }
  .form-grid { grid-template-columns: 1fr; }
  
  
  
  
  .form-title-row { flex-direction: column; align-items: center; text-align: center; }
  .form-title { text-align: center; }
  .form-tag { align-self: center; }
  .hero-pill { font-size: 14px; padding: 9px 12px; }


  .table-shell { padding-bottom: 40px; }
  .hscroll { height: 30px; bottom: 8px; }
}



.tg-fab {
  background: rgba(229, 168, 69, 0.45) !important;
  background: #E5A84572 !important;


  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 99999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;

	  border: 1px solid rgba(0, 0, 0, 0.12);
	  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
	  color: #ffffff;
  text-decoration: none;
  line-height: 1;
  font-weight: 800;
  max-width: calc(100vw - 24px);
  -webkit-tap-highlight-color: transparent;
	  touch-action: manipulation;
	  -webkit-backdrop-filter: blur(6px);
	  backdrop-filter: blur(6px);
}

.tg-fab:hover {
  filter: brightness(1.05);
}

.tg-fab:active {
  transform: translateY(1px);
}

.tg-fab__icon {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
  color: #2AABEE;
}

.tg-fab__icon svg {
  width: 26px;
  height: 26px;
  display: block;
  fill: currentColor;
}

.tg-fab__text {
  font-size: 14px;
  white-space: nowrap;
}

@media (max-width: 360px) {
  .tg-fab {
    padding: 12px;
  }
  .tg-fab__text {
    display: none;
  }
}

/* [MERGE][BLOCK02][STYLE] END */


/* [MERGE][BLOCK02][STYLE] START */

:root{

      --calc-block-bg: #171424;
      --calc-field-bg: #062a33;
      --calc-field-border: rgba(0, 0, 0, .35);
      --calc-block-border: rgba(0, 0, 0, .35);
    }


    


    

    
    


    


    


    

    
    

    
    




    
    


    .ms-modal{
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 999999;
      padding: 12px;
    }
    .ms-modal.is-open{ display: flex; }

    .ms-backdrop{
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.62);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
    }

    .ms-dialog{
      position: relative;
      width: min(560px, calc(100vw - 24px));
      max-height: min(560px, calc(100vh - 24px));
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 16px;
      border: 1px solid rgba(148,163,184,0.35);
      background: radial-gradient(circle at top left, #0b1224 0, #020617 60%, #020617 100%);
      box-shadow: var(--shadow-strong);
    }

    .ms-header{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 12px 14px;
      border-bottom: 1px solid rgba(148,163,184,0.18);
    }
    .ms-title{
      font-weight: 900;
      font-size: 16px;
      color: #f9fafb;
    }
    .ms-close{
      border: none;
      background: transparent;
      color: #e5e7eb;
      font-size: 28px;
      line-height: 1;
      cursor: pointer;
      padding: 0 6px;
      border-radius: 10px;
    }
    .ms-close:hover{ background: rgba(148,163,184,0.10); }

    .ms-body{
      padding: 12px 14px;
      overflow: auto;
    }

    .ms-list{
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .ms-item{
      display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 10px 10px;
      border-radius: 12px;
      background: rgba(6,42,51,0.88);
      border: 1px solid rgba(0,0,0,.35);
      cursor: pointer;
      user-select: none;
    }
    .ms-item:hover{ filter: brightness(1.05); }
    .ms-item input{
      margin-top: 2px;
      width: 18px;
      height: 18px;
      flex: 0 0 18px;
      accent-color: #22c55e;
    }
    .ms-item .ms-item-label{
      font-weight: 800;
      color: #d8f7ff;
    }


.ms-row--qty{
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.ms-row--qty .ms-item{
  flex: 1 1 auto;
  cursor: default;
}
.ms-row--qty .ms-item:hover{ filter: none; }

.ms-stepper{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(6,42,51,0.88);
  border: 1px solid rgba(0,0,0,.35);
  flex: 0 0 auto;
}

.ms-stepper-btn{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.35);
  background: rgba(15,23,42,0.55);
  color: #e5e7eb;
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.ms-stepper-btn:active{ transform: translateY(1px); }
.ms-stepper-btn:disabled{
  opacity: .35;
  cursor: not-allowed;
}

.ms-qty{
  width: 74px;
  height: 44px;
  padding: 0 8px;
  border-radius: 11px;
  border: 1px solid rgba(0,0,0,.35);
  background: rgba(15,23,42,0.35);
  color: #e5e7eb;
  font-weight: 900;
  text-align: center;
  outline: none;
}

.ms-stepper input[type="number"]::-webkit-outer-spin-button,
.ms-stepper input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

.ms-stepper input[type="number"]{
  -moz-appearance: textfield;
  appearance: textfield;
}

.ms-qty:focus{
  border-color: rgba(34,197,94,.65);
  box-shadow: 0 0 0 3px rgba(34,197,94,0.18);
}

@media (max-width: 520px){
  .ms-row--qty{
    flex-direction: column;
    align-items: stretch;
  }
  .ms-stepper{
    justify-content: space-between;
  }
  .ms-stepper-btn{
    width: 52px;
    height: 52px;
    font-size: 26px;
  }
  .ms-qty{
    width: 92px;
    height: 52px;
    font-size: 18px;
  }
}

    .ms-footer{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      padding: 12px 14px;
      border-top: 1px solid rgba(148,163,184,0.18);
    }

    .ms-btn{
      border: none;
      border-radius: 999px;
      padding: 10px 16px;
      font-weight: 900;
      cursor: pointer;
      line-height: 1;
      transition: transform 0.08s ease, filter 0.15s ease;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    .ms-btn:active{ transform: translateY(1px); }

    .ms-btn--ghost{
      background: rgba(148,163,184,0.14);
      border: 1px solid rgba(148,163,184,0.28);
      color: #e5e7eb;
    }
    .ms-btn--ghost:hover{ filter: brightness(1.05); }

    .ms-btn--primary{
      background: radial-gradient(circle at top left, #22c55e 0, #16a34a 60%, #15803d 100%);
      color: #f9fafb;
    }
    .ms-btn--primary:hover{ filter: brightness(1.05); }



    .form-grid--inside{
      margin-top: 0;
    }

/* [MERGE][BLOCK02][STYLE] END */


/* [MERGE][BLOCK03][STYLE] START */



/* ===== main.css ===== */
:root {
  --brand-green: #22c55e;
  --brand-green-dark: #16a34a;
  --brand-orange: #f97316;
  --brand-orange-dark: #ea580c;
  --brand-orange-deep: #9a3412;
  --brand-red: #ef4444;
  --brand-red-dark: #b91c1c;
  --brand-blue: #38bdf8;

  --bg-page-1: #020617;

  --card-bg: #020617;
  --card-border: #1f2937;

  --text-main: #e5e7eb;
  --text-muted: #9ca3af;
  --danger: #f87171;

  --radius-card: 22px;
  --shadow-strong: 0 28px 60px rgba(0,0,0,0.8);
  --shadow-soft: 0 18px 40px rgba(0,0,0,0.9);

  --input-bg: rgba(34,197,94,0.12);
  --input-border: #334155;
  --input-border-focus: #22c55e;
  --input-bg-focus: rgba(34,197,94,0.18);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top left, #0b1120 0, #020617 38%, #020617 70%, #000000 100%);
  color: var(--text-main);
}

.page {
  min-height: 100vh;
  background:
    radial-gradient(circle at bottom right, rgba(56,189,248,0.08) 0, transparent 55%),
    radial-gradient(circle at top right, rgba(34,197,94,0.14) 0, transparent 55%);
}

.wrapper {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 12px 42px;
}

/* HEADER */
header {
  background: radial-gradient(circle at top left, #020617 0, #020617 55%, #02091c 100%);
  border-radius: 999px;
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.9);
  border: 1px solid #111827;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}

header::before {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 140px;
  height: 140px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(148,163,184,0.22) 0, transparent 70%);
  opacity: 0.9;
  pointer-events: none;
}

.logo {
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 1;
}

.logo-mark {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background:
    conic-gradient(from 220deg, #f97316, #f97316, #22c55e, #f97316, #f97316);
  box-shadow: 0 20px 36px rgba(0,0,0,0.9);
  position: relative;
  overflow: hidden;
}

.logo-mark::after {
  content: "";
  position: absolute;
  inset: 6px 10px;
  border-radius: 12px;
  border: 2px solid rgba(15,23,42,0.9);
}

/* [IVAN][EDIT][9] START: LOGO -> маленькая машинка вместо градиентной иконки */
.logo-mark.logo-mark--truck{
  width: 75px; /* [IVAN][EDIT][10] +30% */
  height: 44px; /* [IVAN][EDIT][10] +30% */
  border-radius: 0; /* [IVAN][EDIT][12] убрали скругление */
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.logo-mark.logo-mark--truck::after{ display: none; }
.logo-mark.logo-mark--truck .logo-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
/* [IVAN][EDIT][9] END */


.logo-text-main {
  font-weight: 900;
  font-size: 26px;
  letter-spacing: 0.14em;
  color: #f9fafb;
  text-transform: uppercase;
}

.logo-text-sub {
  font-weight: 500;
  font-size: 15px;
  color: var(--text-muted);
}

/* ✅ ТОП-Анимация */
.top-runner {
  --cycle: 20s;
  --slot: 5s;
  --startOffset: -1.8s;

  position: relative;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,0.9);
  background: radial-gradient(circle at top left, #020617 0, #020617 60%, #02091c 100%);
  box-shadow: 0 12px 28px rgba(0,0,0,0.85);
  overflow: hidden;
  margin-bottom: 22px;
  opacity: 0.94;
  isolation: isolate;
}

.top-runner::before {
  content: "";
  position: absolute;
  inset: -40px -60px;
  background:
    radial-gradient(circle at 20% 30%, rgba(56,189,248,0.09) 0, transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(34,197,94,0.10) 0, transparent 48%);
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}

.top-runner-road {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background:
    repeating-linear-gradient(
      90deg,
      rgba(148,163,184,0.55) 0,
      rgba(148,163,184,0.55) 14px,
      rgba(148,163,184,0.0) 14px,
      rgba(148,163,184,0.0) 30px
    );
  opacity: 0.28;
  pointer-events: none;
  z-index: 1;
  animation: roadMove 2.8s linear infinite;
}

@keyframes roadMove {
  0%   { background-position: 0 0; }
  100% { background-position: 44px 0; }
}

.runner-item {
  position: absolute;
  top: 50%;
  left: -180px;
  transform: translateY(-50%);
  line-height: 1;
  will-change: left, opacity;
  pointer-events: none;
  opacity: 0;
  z-index: 2;

  animation-name: runnerPassFull;
  animation-duration: var(--cycle);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes runnerPassFull {
  0%   { left: -180px; opacity: 0.95; }
  48%  { left: calc(100% + 180px); opacity: 0.95; }
  50%  { left: calc(100% + 180px); opacity: 0; }
  100% { left: calc(100% + 180px); opacity: 0; }
}

.runner-vehicle {
  position: absolute;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.62));
}

.runner-vehicle svg {
  width: 66px;
  height: 38px;
  display: block;
  color: #e5e7eb;
  opacity: 0.92;
  animation: vehicleBob 0.85s ease-in-out infinite alternate;
}

@keyframes vehicleBob {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-1.4px); }
}

.runner-worker svg {
  width: 40px;
  height: 40px;
  display: block;
  color: var(--text-main);
  opacity: 0.86;
  animation: workerBob 0.95s ease-in-out infinite alternate;
}

@keyframes workerBob {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-1.8px); }
}

.runner-vehicle-a { animation-delay: calc(var(--startOffset) + 0s); }
.runner-worker-a  { animation-delay: calc(var(--startOffset) + var(--slot)); }

.runner-vehicle-b { animation-delay: calc(var(--startOffset) + (var(--slot) * 2)); }
.runner-worker-b  { animation-delay: calc(var(--startOffset) + (var(--slot) * 3)); }

@media (max-width: 700px) {
  .top-runner { height: 46px; margin-bottom: 18px; }
  .runner-vehicle svg { width: 72px; height: 40px; }
  .runner-worker svg { width: 42px; height: 42px; }
  .top-runner-road { opacity: 0.30; }
}

@media (prefers-reduced-motion: reduce) {
  .top-runner-road { animation: none; }
  .runner-item { animation: none; opacity: 0; }
  .runner-vehicle-a { opacity: 0.95; left: 16px; }
  .runner-vehicle svg, .runner-worker svg { animation: none; }
}

main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* HERO / FORM */
.hero {
  background: radial-gradient(circle at top left, #fed7aa 0, #fdba74 20%, #fb923c 40%, #ea580c 65%, #9a3412 100%);
  border-radius: var(--radius-card);
  padding: 28px 22px 24px;
  box-shadow: var(--shadow-strong);
  border: 1px solid rgba(148,91,35,0.9);
  position: relative;
  overflow: hidden;
  overflow-anchor: none;
}

.hero::before {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -80px;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(252,211,77,0.4) 0, transparent 60%);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  right: -120px;
  top: 30%;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(234,88,12,0.6) 0, transparent 70%);
  pointer-events: none;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  z-index: 1;
}

.hero-top {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.hero-subtitle {
  font-size: 19px;
  margin: 0 0 14px;
  color: #111827;
}

.hero-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 14px;
  padding: 0;
  max-width: 860px;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,0.22);
  background: rgba(255,255,255,0.78);
  color: #111827;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 12px 26px rgba(0,0,0,0.18);
  user-select: none;
  line-height: 1.2;
}

.hero-pill .dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(34,197,94,1) 0, rgba(22,163,74,1) 60%);
  box-shadow: 0 0 10px rgba(34,197,94,0.45);
  flex: 0 0 auto;
}

.hero-pill:hover {
  background: rgba(255,255,255,0.88);
  transform: translateY(-1px);
}

.hero-note {
  font-size: 15px;
  color: #111827;
  max-width: 520px;
  margin: 0 auto;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 16px;
  border-radius: 999px;
  background: rgba(22,163,74,0.9);
  color: #ecfdf5;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 18px;
  box-shadow: 0 8px 18px rgba(21,128,61,0.9);
  margin-left: auto;
  margin-right: auto;
}

.hero-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #bbf7d0 0, #22c55e 40%, #16a34a 100%);
  box-shadow: 0 0 8px rgba(34,197,94,0.9);
}

.hero-form-wrap {
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
}

.form-card {
  background: radial-gradient(circle at top left, #020617 0, #020617 55%, #02091c 100%);
  border-radius: 18px;
  padding: 20px 16px 18px;
  border: 1px solid #020617;
  box-shadow: var(--shadow-soft);
}

.form-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.form-title {
  font-size: 22px;
  margin: 0;
  color: #f9fafb;
}

.form-tag {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #bbf7d0;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(52,211,153,0.7);
  background: rgba(6,95,70,0.9);
  white-space: nowrap;
}

.form-subtitle {
  font-size: 15px;
  color: var(--text-muted);
  margin: 0 0 14px;
}





















/* [IVAN][EDIT][3] START: стили переключателя city/intercity */





/* [IVAN][EDIT][5] START: фикс ширины фона для "Город-пригород / Межгород" */



/* [IVAN][EDIT][5] END */
/* [IVAN][EDIT][6] START: день/ночь на всю ширину (фон-слайдер под текст, как у city/intercity) */



/* [IVAN][EDIT][6] END */

/* [IVAN][EDIT][7] START: заголовки режимных блоков по центру +20% */

/* [IVAN][EDIT][7] END */



/* [IVAN][EDIT][3] END */





.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  margin-top: 6px;
}

.form-row { margin-bottom: 0; }
.form-row--full { grid-column: 1 / -1; }

label {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
  color: var(--text-main);
}



input, select, textarea {
  width: 100%;
  padding: 9px 12px;
  border-radius: 11px;
  border: 1px solid var(--input-border);
  font-size: 16px;
  font-family: inherit;
  background: var(--input-bg);
  color: var(--text-main);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.08s ease;
}

select option { color: #020617; background: #f9fafb; }

input::placeholder, textarea::placeholder { color: #6b7280; }

input:focus, select:focus, textarea:focus {
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 1px rgba(15,23,42,0.9), 0 0 0 2px rgba(34,197,94,0.8);
  outline: none;
  background: var(--input-bg-focus);
  transform: translateY(-0.5px);
}

textarea { min-height: 80px; resize: vertical; }

/* ✅ Красно/зелёная подсветка */




/* [IVAN][TASK-20251225-05][EDIT][1] Зеленая окантовка для заполненных полей (все "плашки") */


.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: 999px;
  border: none;
  background: radial-gradient(circle at top left, #22c55e 0, #16a34a 60%, #15803d 100%);
  color: #f9fafb;
  font-weight: 800;
  font-size: 17px;
  cursor: pointer;
  margin-top: 10px;
  min-width: 200px;
  box-shadow: 0 22px 48px rgba(22,163,74,0.95);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-primary:active { filter: brightness(0.97); transform: translateY(0); box-shadow: 0 16px 32px rgba(22,163,74,1); }

.small-note {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
}

.small-note a { color: var(--brand-blue); text-decoration: underline; }























/* AUTOCOMPLETE */










/* ТАРИФНЫЕ БЛОКИ НИЖЕ */





/* ✅ СКРОЛЛ КАК В СТАРОМ ФАЙЛЕ (Android фикс): ползунок НЕ внутри scroll-контейнера */
.table-shell {
  position: relative;
  padding-bottom: 28px; /* место под ползунок */
}

.table-wrapper {
  overflow-x: auto;
  margin: 0 -2px 8px;
  -webkit-overflow-scrolling: touch;

  /* прячем нативный скролл */
  scrollbar-width: none;    /* Firefox */
  -ms-overflow-style: none; /* старый Edge */
}
.table-wrapper::-webkit-scrollbar { width: 0; height: 0; }

.hscroll {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  height: 18px;
  z-index: 20;
  pointer-events: none;
}

.hscroll-track {
  height: 100%;
  border-radius: 999px;
  background: rgba(34,197,94,0.22);
  border: 1px solid rgba(34,197,94,0.35);
  box-shadow: inset 0 0 0 1px rgba(2,6,23,0.35);
  position: relative;
  pointer-events: auto;
  cursor: pointer;
  overflow: hidden;
  touch-action: manipulation;
}

.hscroll-thumb {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 999px;
  background: rgba(34,197,94,0.78);
  box-shadow: 0 6px 14px rgba(22,163,74,0.35), inset 0 0 0 1px rgba(2,6,23,0.55);
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  transition: filter 0.12s ease, background 0.12s ease, box-shadow 0.12s ease, transform 0.06s ease;
}

.hscroll-thumb:hover {
  filter: brightness(1.08);
  background: rgba(34,197,94,0.90);
}

.hscroll-thumb.is-active {
  cursor: grabbing;
  background: rgba(22,163,74,0.98);
  box-shadow: 0 10px 22px rgba(22,163,74,0.55), inset 0 0 0 1px rgba(2,6,23,0.65);
  transform: scaleY(1.03);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 720px;
  background: #020617;
  color: var(--text-main);
  border-radius: 14px;
  overflow: hidden;
}

thead tr { background: linear-gradient(90deg, #0f172a 0, #0b1120 50%, #0f172a 100%); }

th, td {
  padding: 9px 7px;
  border: 1px solid #1e293b;
  vertical-align: top;
  text-align: left;
}

th { font-weight: 700; color: #e5e7eb; }

tbody tr:nth-child(even) { background: #020617; }
tbody tr:nth-child(odd) { background: #02091c; }

table small { color: var(--text-muted); }



.loader-tariff-title { font-size: 18px; margin: 16px 0 6px; color: #000; }
/* [IVAN][TASK-20251220-45][EDIT] Центр +20% только для 3 выделенных заголовков */
#ivan-hdr-packaging,
#ivan-hdr-assembly,
#ivan-hdr-trash {
  text-align: center;
  font-size: 21.6px; /* 18px * 1.2 */
}

/* [IVAN][TASK-20251220-44] точечно центрируем + увеличиваем на 20% только 2 заголовка (НЕ все .loader-tariff-title) */
#tariffs-transport-title { text-align: center; font-size: 26.4px; } /* 22px * 1.2 */
#tariffs-loaders-title { text-align: center; font-size: 21.6px; }  /* 18px * 1.2 */
/* [/IVAN][TASK-20251220-44] */

footer { margin-top: 18px; font-size: 14px; color: #9ca3af; }
footer strong { color: #e5e7eb; }

/* MODAL (успех) */
#lead-success-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.75);
  display: none;
  z-index: 9998;
}

#lead-success-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
  font-family: inherit;
}

.lead-modal-card {
  background: #020617;
  max-width: 420px;
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.85);
  padding: 22px 20px 18px;
  position: relative;
  color: #e5e7eb;
  text-align: center;
}

.lead-modal-close-x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: none;
  background: #ef4444;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lead-modal-ok {
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  background: #16a34a;
  color: #fff;
  min-height: 52px;
}

.lead-modal-close {
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  background: #b91c1c;
  color: #fff;
  min-height: 52px;
}

@media (max-width: 900px) {
  header { flex-direction: column; align-items: flex-start; border-radius: 18px; }
  .hero { padding: 22px 14px 20px; }
  .hero-form-wrap { margin-top: 4px; }
}

@media (max-width: 700px) {
  .wrapper { padding: 18px 10px 24px; }
  .form-card { padding: 18px 12px 16px; }
  .form-grid { grid-template-columns: 1fr; }
  
  
  
  
  .form-title-row { flex-direction: column; align-items: center; text-align: center; }
  .form-title { text-align: center; }
  .form-tag { align-self: center; }
  .hero-pill { font-size: 14px; padding: 9px 12px; }

  /* ✅ ползунок крупнее на мобилке */
  .table-shell { padding-bottom: 40px; }
  .hscroll { height: 30px; bottom: 8px; }
}

/* ===== hero-form.css ===== */
/* [TASK-20251219-13]
Что сделано:
- Добавлены CSS-классы для блока загрузки фото (вместо inline-стилей в photos.php).
- Добавлены базовые стили для превью фото и кнопки удаления (photo-preview/photo-remove).
Где:
- /public_html/assets/css/hero-form.css
Зачем:
- Чтобы дизайн фото-блока был изолирован в CSS и не ломался при правках PHP/разметки.
*/

/* =========================================
   HERO + FORM + CALC + AUTOCOMPLETE
   File: /public_html/assets/css/hero-form.css
   ========================================= */

/* Переменные (нужны форме/кальку) */
:root {
  --brand-green: #22c55e;
  --brand-green-dark: #16a34a;
  --brand-orange: #f97316;
  --brand-orange-dark: #ea580c;
  --brand-orange-deep: #9a3412;
  --brand-red: #ef4444;
  --brand-red-dark: #b91c1c;
  --brand-blue: #38bdf8;

  --bg-page-1: #020617;

  --card-bg: #020617;
  --card-border: #1f2937;

  --text-main: #e5e7eb;
  --text-muted: #9ca3af;
  --danger: #f87171;

  --radius-card: 22px;
  --shadow-strong: 0 28px 60px rgba(0,0,0,0.8);
  --shadow-soft: 0 18px 40px rgba(0,0,0,0.9);

  --input-bg: rgba(34,197,94,0.12);
  --input-border: #334155;
  --input-border-focus: #22c55e;
  --input-bg-focus: rgba(34,197,94,0.18);
}

/* Локальный box-sizing, чтобы не ломать остальной сайт */
.hero, .hero * { box-sizing: border-box; }

/* HERO / FORM */
.hero {
  background: radial-gradient(circle at top left, #fed7aa 0, #fdba74 20%, #fb923c 40%, #ea580c 65%, #9a3412 100%);
  border-radius: var(--radius-card);
  padding: 28px 22px 24px;
  box-shadow: var(--shadow-strong);
  border: 1px solid rgba(148,91,35,0.9);
  position: relative;
  overflow: hidden;
  overflow-anchor: none;
}

.hero::before {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -80px;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(252,211,77,0.4) 0, transparent 60%);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  right: -120px;
  top: 30%;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(234,88,12,0.6) 0, transparent 70%);
  pointer-events: none;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  z-index: 1;
}

.hero-top {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.hero-subtitle {
  font-size: 19px;
  margin: 0 0 14px;
  color: #111827;
}

.hero-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 14px;
  padding: 0;
  max-width: 860px;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,0.22);
  background: rgba(255,255,255,0.78);
  color: #111827;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 12px 26px rgba(0,0,0,0.18);
  user-select: none;
  line-height: 1.2;
  transition: transform 0.12s ease, background 0.12s ease;
}

.hero-pill .dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(34,197,94,1) 0, rgba(22,163,74,1) 60%);
  box-shadow: 0 0 10px rgba(34,197,94,0.45);
  flex: 0 0 auto;
}

.hero-pill:hover {
  background: rgba(255,255,255,0.88);
  transform: translateY(-1px);
}

.hero-note {
  font-size: 15px;
  color: #111827;
  max-width: 520px;
  margin: 0 auto;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 16px;
  border-radius: 999px;
  background: rgba(22,163,74,0.9);
  color: #ecfdf5;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 18px;
  box-shadow: 0 8px 18px rgba(21,128,61,0.9);
  margin-left: auto;
  margin-right: auto;
}

.hero-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #bbf7d0 0, #22c55e 40%, #16a34a 100%);
  box-shadow: 0 0 8px rgba(34,197,94,0.9);
}

.hero-form-wrap {
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
}

/* FORM CARD */
.form-card {
  background: radial-gradient(circle at top left, #020617 0, #020617 55%, #02091c 100%);
  border-radius: 18px;
  padding: 20px 16px 18px;
  border: 1px solid #020617;
  box-shadow: var(--shadow-soft);
}

.form-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.form-title {
  font-size: 22px;
  margin: 0;
  color: #f9fafb;
}

.form-tag {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #bbf7d0;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(52,211,153,0.7);
  background: rgba(6,95,70,0.9);
  white-space: nowrap;
}

.form-subtitle {
  font-size: 15px;
  color: var(--text-muted);
  margin: 0 0 14px;
}

/* Day/Night */



















/* FORM GRID */



















/* Красно/зелёная подсветка */



.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: 999px;
  border: none;
  background: radial-gradient(circle at top left, #22c55e 0, #16a34a 60%, #15803d 100%);
  color: #f9fafb;
  font-weight: 800;
  font-size: 17px;
  cursor: pointer;
  margin-top: 10px;
  min-width: 200px;
  box-shadow: 0 22px 48px rgba(22,163,74,0.95);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: filter 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}

.btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-primary:active { filter: brightness(0.97); transform: translateY(0); box-shadow: 0 16px 32px rgba(22,163,74,1); }

.small-note {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
}

.small-note a { color: var(--brand-blue); text-decoration: underline; }























/* AUTOCOMPLETE */










/* RESPONSIVE (hero/form only) */
@media (max-width: 900px) {
  .hero { padding: 22px 14px 20px; }
  .hero-form-wrap { margin-top: 4px; }
}

@media (max-width: 700px) {
  .form-card { padding: 18px 12px 16px; }
  
  
  
  
  
  .form-title-row { flex-direction: column; align-items: center; text-align: center; }
  .form-title { text-align: center; }
  .form-tag { align-self: center; }
  .hero-pill { font-size: 14px; padding: 9px 12px; }
}
/* ===== FIX: заполненные поля не должны становиться белыми ===== */

/* 1) Заполнено (плейсхолдер исчез) — держим тёмный фон */


/* 2) Отключаем “нативную” валидность браузера (чтобы не красил сам) */



/* [IVAN][EDIT][19] START: Пункт А/Пункт Б — красная окантовка и заливка ТОЛЬКО когда поле пустое */


/* [IVAN][EDIT][19] при фокусе пустого поля оставляем красный (не зелёный) */

/* [IVAN][EDIT][19] END: Пункт А/Пункт Б — красная окантовка и заливка */

/* [IVAN][EDIT][21] START: обязательная плашка "Машины" (в блоке услуг) — красная по умолчанию */



/* [IVAN][EDIT][21] END */

/* [IVAN][EDIT][23] START: обязательная плашка "Грузчики" (в блоке услуг) — красная по умолчанию */



/* [IVAN][EDIT][23] END */




/* 3) Хром/Автозаполнение (на всякий) */


/* ===== Приоритет нашей подсветки над всем ===== */




/* =========================
   [TASK-20251219-13] PHOTO UPLOAD UI (no inline styles)
========================= */

/* [IVAN][TASK-20251219-13] Универсальный отступ вместо inline style="margin-top:8px" */
.form-row--mt8 {
  margin-top: 8px;
}

/* [IVAN][TASK-20251219-13] Обёртка кастомной загрузки */


/* [IVAN][TASK-20251219-13] Прячем нативный input */


/* [IVAN][TASK-20251219-13] Кнопка выбора файлов */


/* [IVAN][TASK-20251219-13] Текст “Файлы не выбраны / Выбрано N” */


/* [IVAN][TASK-20251219-13] Статус/ошибки/подсказки под загрузкой */


/* [IVAN][TASK-20251219-13] Сетка превью */


/* [IVAN][TASK-20251219-13] Карточка превью */




/* [IVAN][TASK-20251219-13] Крестик удаления */






/* ===== style.css ===== */
/* [IVAN][TASK-20251219-23]
Что сделано:
- Добавлены стили для debug-missing (плашка отсутствующих чанков) без inline-стилей.
Где:
- /public_html/assets/css/style.css
Зачем:
- Чистый код: служебные элементы живут в CSS, а не в PHP-строках.
*/

.debug-badge { /* [IVAN][TASK-20251219-23] */
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 99999;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.15);
  padding: 10px 12px;
  border-radius: 12px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  line-height: 1.25;
}

.debug-badge__link { /* [IVAN][TASK-20251219-23] */
  color: #e5e7eb;
  text-decoration: none;
  font-weight: 800;
}

.debug-badge__link:hover { /* [IVAN][TASK-20251219-23] */
  text-decoration: underline;
}

.debug-badge__hint { /* [IVAN][TASK-20251219-23] */
  margin-top: 6px;
  color: #9ca3af;
  font-size: 12px;
}

/* [IVAN][TASK-20251219-23] Плашка отсутствующих partials (видна только при $DEBUG=true) */
.debug-missing {
  max-width: 1120px;
  margin: 18px auto;
  padding: 14px 12px;
  border-radius: 14px;
  border: 1px solid #ef4444;
  background: #020617;
  color: #e5e7eb;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  line-height: 1.45;
}

.debug-missing__title {
  font-weight: 800;
  margin-bottom: 6px;
}

.debug-missing__list {
  margin: 0;
  padding-left: 18px;
}

.debug-missing__hint {
  margin-top: 8px;
  color: #9ca3af;
  font-size: 13px;
}

  
/* [IVAN][TASK-20251220-04] FIX: блок "Выберите услуги" — выравнивание и вид как плитки (без логики) */





@media (max-width:860px){
   /* [IVAN][TASK-20251220-05] */
}
@media (max-width:680px){
  
}

/* [IVAN][TASK-20251220-42] Блок "Полезные услуги наших партнёров" в HERO */
.partner-box{
  border: 2px solid rgba(15,23,42,0.85); /* [IVAN][TASK-20251220-42] */
  border-radius: 12px; /* [IVAN][TASK-20251220-42] */
  padding: 14px 12px; /* [IVAN][TASK-20251220-42] */
  margin: 16px auto 14px; /* [IVAN][TASK-20251220-42] */
  max-width: 860px; /* [IVAN][TASK-20251220-42] */
  background: transparent; /* [IVAN][TASK-20251220-42] */
}
.partner-title{
  font-size: 16px; /* [IVAN][TASK-20251220-42] */
  font-weight: 800; /* [IVAN][TASK-20251220-42] */
  color: #111827; /* [IVAN][TASK-20251220-42] */
  margin: 0 0 10px; /* [IVAN][TASK-20251220-42] */
  text-align: center; /* [IVAN][TASK-20251220-42] */
}
.partner-pills{
  display: flex; /* [IVAN][TASK-20251220-42] */
  flex-wrap: wrap; /* [IVAN][TASK-20251220-42] */
  justify-content: center; /* [IVAN][TASK-20251220-42] */
  gap: 10px; /* [IVAN][TASK-20251220-42] */
}
.partner-pill{
  text-decoration: none; /* [IVAN][TASK-20251220-42] */
  cursor: pointer; /* [IVAN][TASK-20251220-42] */
}
.partner-pill:focus{
  outline: 2px solid rgba(22,163,74,0.55); /* [IVAN][TASK-20251220-42] */
  outline-offset: 2px; /* [IVAN][TASK-20251220-42] */
}

/* [/IVAN][TASK-20251220-04] */

/* [IVAN][TASK-20251220-46] Плавающая кнопка Telegram (фиксированная, не ломает верстку) */
.tg-fab {
  background: rgba(229, 168, 69, 0.45) !important; /* [IVAN][TASK-20251220-51] fallback */
  background: #E5A84572 !important; /* [IVAN][TASK-20251220-51] */
  /* [IVAN][TASK-20251220-50] #E5A84572 fallback */
  /* [IVAN][TASK-20251220-50] */
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 99999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
	  /* [IVAN][TASK-20251220-48] 80% прозрачности фона */
	  border: 1px solid rgba(0, 0, 0, 0.12); /* [IVAN][TASK-20251220-47] контраст рамки на белом */
	  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35); /* [IVAN][TASK-20251220-47] чуть мягче тень */
	  color: #ffffff; /* [IVAN][TASK-20251220-49] текст кнопки белый */ /* [IVAN][TASK-20251220-47] контрастный текст */
  text-decoration: none;
  line-height: 1;
  font-weight: 800;
  max-width: calc(100vw - 24px);
  -webkit-tap-highlight-color: transparent;
	  touch-action: manipulation;
	  -webkit-backdrop-filter: blur(6px); /* [IVAN][TASK-20251220-47] мягкость на фоне */
	  backdrop-filter: blur(6px); /* [IVAN][TASK-20251220-47] мягкость на фоне */
}

.tg-fab:hover {
  filter: brightness(1.05);
}

.tg-fab:active {
  transform: translateY(1px);
}

.tg-fab__icon {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
  color: #2AABEE;
}

.tg-fab__icon svg {
  width: 26px;
  height: 26px;
  display: block;
  fill: currentColor;
}

.tg-fab__text {
  font-size: 14px;
  white-space: nowrap;
}

/* На очень маленьких экранах текст можно скрыть, чтобы кнопка не перекрывала контент */
@media (max-width: 360px) {
  .tg-fab {
    padding: 12px;
  }
  .tg-fab__text {
    display: none;
  }
}


/* [MERGE][BLOCK03][STYLE] END */


/* [MERGE][BLOCK03][STYLE] START */

    :root{
      /* ТЕСТ: яркий красный, чтобы было видно что фон НЕ наложением, а под контентом */
      --calc-block-bg: #171424; /* [IVAN][TASK-20251220-41] */
      --calc-field-bg: #062a33; /* фон "плашек" (инпуты/селекты) */
      --calc-field-border: rgba(0, 0, 0, .35);
      --calc-block-border: rgba(0, 0, 0, .35);
    }

    /* Общая оболочка блока */
    

    /* Если блок стоит внутри .form-grid — растягиваем на всю ширину */
    

    

    

    
    
/* Обнуляем "внутренний" фон у старых секций, чтобы не спорил с calc-block */
    
    

    /* Главное: "плашки" должны быть ОТДЕЛЬНЫМ сплошным цветом, не прозрачными */
    
    
    /* [IVAN][TASK-20251220-26] FIX: внутри .calc-block фон "плашек" не должен становиться прозрачным/валидным и пропускать цвет блока */
    

    /* [IVAN][TASK-20251220-26] FIX: фокус/ховер не меняет фон на прозрачный */
    

    /* [IVAN][TASK-20251220-26] FIX: автозаполнение (Chrome) держит тот же фон */
    


    /* Блок предварительного расчёта тоже как "один из 4" */
    
    
    

        /* [IVAN][TASK-20251221-10][EDIT][16] Ссылка «Удалённые районы» — плашка как у кнопки Telegram */
    
    



    /* [IVAN][EDIT][26] START: мультивыбор (триггер + модалка) */
    
    
    

    .ms-modal{
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 999999;
      padding: 12px;
    }
    .ms-modal.is-open{ display: flex; }

    .ms-backdrop{
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.62);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
    }

    .ms-dialog{
      position: relative;
      width: min(560px, calc(100vw - 24px));
      max-height: min(560px, calc(100vh - 24px));
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 16px;
      border: 1px solid rgba(148,163,184,0.35);
      background: radial-gradient(circle at top left, #0b1224 0, #020617 60%, #020617 100%);
      box-shadow: var(--shadow-strong);
    }

    .ms-header{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 12px 14px;
      border-bottom: 1px solid rgba(148,163,184,0.18);
    }
    .ms-title{
      font-weight: 900;
      font-size: 16px;
      color: #f9fafb;
    }
    .ms-close{
      border: none;
      background: transparent;
      color: #e5e7eb;
      font-size: 28px;
      line-height: 1;
      cursor: pointer;
      padding: 0 6px;
      border-radius: 10px;
    }
    .ms-close:hover{ background: rgba(148,163,184,0.10); }

    .ms-body{
      padding: 12px 14px;
      overflow: auto;
    }

    .ms-list{
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .ms-item{
      display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 10px 10px;
      border-radius: 12px;
      background: rgba(6,42,51,0.88);
      border: 1px solid rgba(0,0,0,.35);
      cursor: pointer;
      user-select: none;
    }
    .ms-item:hover{ filter: brightness(1.05); }
    .ms-item input{
      margin-top: 2px;
      width: 18px;
      height: 18px;
      flex: 0 0 18px;
      accent-color: #22c55e;
    }
    .ms-item .ms-item-label{
      font-weight: 800;
      color: #d8f7ff;
    }

    /* [IVAN][EDIT][28] START: мультивыбор Упаковка — количества */
.ms-row--qty{
  display: flex; /* [IVAN][TASK-20251222-03][EDIT][1] */
  align-items: stretch; /* [IVAN][TASK-20251222-03][EDIT][1] */
  gap: 10px; /* [IVAN][TASK-20251222-03][EDIT][1] */
}
.ms-row--qty .ms-item{
  flex: 1 1 auto; /* [IVAN][TASK-20251222-03][EDIT][1] */
  cursor: default; /* [IVAN][TASK-20251222-03][EDIT][1] */
}
.ms-row--qty .ms-item:hover{ filter: none; } /* [IVAN][TASK-20251222-03][EDIT][1] */

.ms-stepper{
  display: flex; /* [IVAN][TASK-20251222-03][EDIT][1] */
  align-items: center; /* [IVAN][TASK-20251222-03][EDIT][1] */
  gap: 8px; /* [IVAN][TASK-20251222-03][EDIT][1] */
  padding: 6px; /* [IVAN][TASK-20251222-03][EDIT][1] */
  border-radius: 12px; /* [IVAN][TASK-20251222-03][EDIT][1] */
  background: rgba(6,42,51,0.88); /* [IVAN][TASK-20251222-03][EDIT][1] */
  border: 1px solid rgba(0,0,0,.35); /* [IVAN][TASK-20251222-03][EDIT][1] */
  flex: 0 0 auto; /* [IVAN][TASK-20251222-03][EDIT][1] */
}

.ms-stepper-btn{
  width: 44px; /* [IVAN][TASK-20251222-03][EDIT][1] */
  height: 44px; /* [IVAN][TASK-20251222-03][EDIT][1] */
  border-radius: 12px; /* [IVAN][TASK-20251222-03][EDIT][1] */
  border: 1px solid rgba(0,0,0,.35); /* [IVAN][TASK-20251222-03][EDIT][1] */
  background: rgba(15,23,42,0.55); /* [IVAN][TASK-20251222-03][EDIT][1] */
  color: #e5e7eb; /* [IVAN][TASK-20251222-03][EDIT][1] */
  font-weight: 900; /* [IVAN][TASK-20251222-03][EDIT][1] */
  font-size: 22px; /* [IVAN][TASK-20251222-03][EDIT][1] */
  line-height: 1; /* [IVAN][TASK-20251222-03][EDIT][1] */
  cursor: pointer; /* [IVAN][TASK-20251222-03][EDIT][1] */
  -webkit-tap-highlight-color: transparent; /* [IVAN][TASK-20251222-03][EDIT][1] */
  touch-action: manipulation; /* [IVAN][TASK-20251222-03][EDIT][1] */
}
.ms-stepper-btn:active{ transform: translateY(1px); } /* [IVAN][TASK-20251222-03][EDIT][1] */
.ms-stepper-btn:disabled{
  opacity: .35; /* [IVAN][TASK-20251222-03][EDIT][1] */
  cursor: not-allowed; /* [IVAN][TASK-20251222-03][EDIT][1] */
}

.ms-qty{
  width: 74px; /* [IVAN][TASK-20251222-03][EDIT][1] */
  height: 44px; /* [IVAN][TASK-20251222-03][EDIT][1] */
  padding: 0 8px; /* [IVAN][TASK-20251222-03][EDIT][1] */
  border-radius: 11px; /* [IVAN][TASK-20251222-03][EDIT][1] */
  border: 1px solid rgba(0,0,0,.35); /* [IVAN][TASK-20251222-03][EDIT][1] */
  background: rgba(15,23,42,0.35); /* [IVAN][TASK-20251222-03][EDIT][1] */
  color: #e5e7eb; /* [IVAN][TASK-20251222-03][EDIT][1] */
  font-weight: 900; /* [IVAN][TASK-20251222-03][EDIT][1] */
  text-align: center; /* [IVAN][TASK-20251222-03][EDIT][1] */
  outline: none; /* [IVAN][TASK-20251222-03][EDIT][1] */
}
.ms-qty:focus{
  border-color: rgba(34,197,94,.65); /* [IVAN][TASK-20251222-03][EDIT][1] */
  box-shadow: 0 0 0 3px rgba(34,197,94,0.18); /* [IVAN][TASK-20251222-03][EDIT][1] */
}

@media (max-width: 520px){
  .ms-row--qty{
    flex-direction: column; /* [IVAN][TASK-20251222-03][EDIT][1] */
    align-items: stretch; /* [IVAN][TASK-20251222-03][EDIT][1] */
  }
  .ms-stepper{
    justify-content: space-between; /* [IVAN][TASK-20251222-03][EDIT][1] */
  }
  .ms-stepper-btn{
    width: 52px; /* [IVAN][TASK-20251222-03][EDIT][1] */
    height: 52px; /* [IVAN][TASK-20251222-03][EDIT][1] */
    font-size: 26px; /* [IVAN][TASK-20251222-03][EDIT][1] */
  }
  .ms-qty{
    width: 92px; /* [IVAN][TASK-20251222-03][EDIT][1] */
    height: 52px; /* [IVAN][TASK-20251222-03][EDIT][1] */
    font-size: 18px; /* [IVAN][TASK-20251222-03][EDIT][1] */
  }
}
/* [IVAN][EDIT][28] END: мультивыбор Упаковка — количества */


    .ms-footer{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      padding: 12px 14px;
      border-top: 1px solid rgba(148,163,184,0.18);
    }

    .ms-btn{
      border: none;
      border-radius: 999px;
      padding: 10px 16px;
      font-weight: 900;
      cursor: pointer;
      line-height: 1;
      transition: transform 0.08s ease, filter 0.15s ease;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    .ms-btn:active{ transform: translateY(1px); }

    .ms-btn--ghost{
      background: rgba(148,163,184,0.14);
      border: 1px solid rgba(148,163,184,0.28);
      color: #e5e7eb;
    }
    .ms-btn--ghost:hover{ filter: brightness(1.05); }

    .ms-btn--primary{
      background: radial-gradient(circle at top left, #22c55e 0, #16a34a 60%, #15803d 100%);
      color: #f9fafb;
    }
    .ms-btn--primary:hover{ filter: brightness(1.05); }
    /* [IVAN][EDIT][26] END: мультивыбор (триггер + модалка) */


    /* Вложенный грид внутри адресного блока */
    .form-grid--inside{
      margin-top: 0;
    }
  
/* [MERGE][BLOCK03][STYLE] END */


/* [MERGE][BLOCK04][STYLE] START */



/* ===== main.css ===== */
:root {
  --brand-green: #22c55e;
  --brand-green-dark: #16a34a;
  --brand-orange: #f97316;
  --brand-orange-dark: #ea580c;
  --brand-orange-deep: #9a3412;
  --brand-red: #ef4444;
  --brand-red-dark: #b91c1c;
  --brand-blue: #38bdf8;

  --bg-page-1: #020617;

  --card-bg: #020617;
  --card-border: #1f2937;

  --text-main: #e5e7eb;
  --text-muted: #9ca3af;
  --danger: #f87171;

  --radius-card: 22px;
  --shadow-strong: 0 28px 60px rgba(0,0,0,0.8);
  --shadow-soft: 0 18px 40px rgba(0,0,0,0.9);

  --input-bg: rgba(34,197,94,0.12);
  --input-border: #334155;
  --input-border-focus: #22c55e;
  --input-bg-focus: rgba(34,197,94,0.18);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top left, #0b1120 0, #020617 38%, #020617 70%, #000000 100%);
  color: var(--text-main);
}

.page {
  min-height: 100vh;
  background:
    radial-gradient(circle at bottom right, rgba(56,189,248,0.08) 0, transparent 55%),
    radial-gradient(circle at top right, rgba(34,197,94,0.14) 0, transparent 55%);
}

.wrapper {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 12px 42px;
}

/* HEADER */
header {
  background: radial-gradient(circle at top left, #020617 0, #020617 55%, #02091c 100%);
  border-radius: 999px;
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.9);
  border: 1px solid #111827;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}

header::before {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 140px;
  height: 140px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(148,163,184,0.22) 0, transparent 70%);
  opacity: 0.9;
  pointer-events: none;
}

.logo {
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 1;
}

.logo-mark {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background:
    conic-gradient(from 220deg, #f97316, #f97316, #22c55e, #f97316, #f97316);
  box-shadow: 0 20px 36px rgba(0,0,0,0.9);
  position: relative;
  overflow: hidden;
}

.logo-mark::after {
  content: "";
  position: absolute;
  inset: 6px 10px;
  border-radius: 12px;
  border: 2px solid rgba(15,23,42,0.9);
}

/* [IVAN][EDIT][9] START: LOGO -> маленькая машинка вместо градиентной иконки */
.logo-mark.logo-mark--truck{
  width: 75px; /* [IVAN][EDIT][10] +30% */
  height: 44px; /* [IVAN][EDIT][10] +30% */
  border-radius: 0; /* [IVAN][EDIT][12] убрали скругление */
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.logo-mark.logo-mark--truck::after{ display: none; }
.logo-mark.logo-mark--truck .logo-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
/* [IVAN][EDIT][9] END */


.logo-text-main {
  font-weight: 900;
  font-size: 26px;
  letter-spacing: 0.14em;
  color: #f9fafb;
  text-transform: uppercase;
}

.logo-text-sub {
  font-weight: 500;
  font-size: 15px;
  color: var(--text-muted);
}

/* ✅ ТОП-Анимация */
.top-runner {
  --cycle: 20s;
  --slot: 5s;
  --startOffset: -1.8s;

  position: relative;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,0.9);
  background: radial-gradient(circle at top left, #020617 0, #020617 60%, #02091c 100%);
  box-shadow: 0 12px 28px rgba(0,0,0,0.85);
  overflow: hidden;
  margin-bottom: 22px;
  opacity: 0.94;
  isolation: isolate;
}

.top-runner::before {
  content: "";
  position: absolute;
  inset: -40px -60px;
  background:
    radial-gradient(circle at 20% 30%, rgba(56,189,248,0.09) 0, transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(34,197,94,0.10) 0, transparent 48%);
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}

.top-runner-road {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background:
    repeating-linear-gradient(
      90deg,
      rgba(148,163,184,0.55) 0,
      rgba(148,163,184,0.55) 14px,
      rgba(148,163,184,0.0) 14px,
      rgba(148,163,184,0.0) 30px
    );
  opacity: 0.28;
  pointer-events: none;
  z-index: 1;
  animation: roadMove 2.8s linear infinite;
}

@keyframes roadMove {
  0%   { background-position: 0 0; }
  100% { background-position: 44px 0; }
}

.runner-item {
  position: absolute;
  top: 50%;
  left: -180px;
  transform: translateY(-50%);
  line-height: 1;
  will-change: left, opacity;
  pointer-events: none;
  opacity: 0;
  z-index: 2;

  animation-name: runnerPassFull;
  animation-duration: var(--cycle);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes runnerPassFull {
  0%   { left: -180px; opacity: 0.95; }
  48%  { left: calc(100% + 180px); opacity: 0.95; }
  50%  { left: calc(100% + 180px); opacity: 0; }
  100% { left: calc(100% + 180px); opacity: 0; }
}

.runner-vehicle {
  position: absolute;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.62));
}

.runner-vehicle svg {
  width: 66px;
  height: 38px;
  display: block;
  color: #e5e7eb;
  opacity: 0.92;
  animation: vehicleBob 0.85s ease-in-out infinite alternate;
}

@keyframes vehicleBob {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-1.4px); }
}

.runner-worker svg {
  width: 40px;
  height: 40px;
  display: block;
  color: var(--text-main);
  opacity: 0.86;
  animation: workerBob 0.95s ease-in-out infinite alternate;
}

@keyframes workerBob {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-1.8px); }
}

.runner-vehicle-a { animation-delay: calc(var(--startOffset) + 0s); }
.runner-worker-a  { animation-delay: calc(var(--startOffset) + var(--slot)); }

.runner-vehicle-b { animation-delay: calc(var(--startOffset) + (var(--slot) * 2)); }
.runner-worker-b  { animation-delay: calc(var(--startOffset) + (var(--slot) * 3)); }

@media (max-width: 700px) {
  .top-runner { height: 46px; margin-bottom: 18px; }
  .runner-vehicle svg { width: 72px; height: 40px; }
  .runner-worker svg { width: 42px; height: 42px; }
  .top-runner-road { opacity: 0.30; }
}

@media (prefers-reduced-motion: reduce) {
  .top-runner-road { animation: none; }
  .runner-item { animation: none; opacity: 0; }
  .runner-vehicle-a { opacity: 0.95; left: 16px; }
  .runner-vehicle svg, .runner-worker svg { animation: none; }
}

main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* HERO / FORM */
.hero {
  background: radial-gradient(circle at top left, #fed7aa 0, #fdba74 20%, #fb923c 40%, #ea580c 65%, #9a3412 100%);
  border-radius: var(--radius-card);
  padding: 28px 22px 24px;
  box-shadow: var(--shadow-strong);
  border: 1px solid rgba(148,91,35,0.9);
  position: relative;
  overflow: hidden;
  overflow-anchor: none;
}

.hero::before {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -80px;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(252,211,77,0.4) 0, transparent 60%);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  right: -120px;
  top: 30%;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(234,88,12,0.6) 0, transparent 70%);
  pointer-events: none;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  z-index: 1;
}

.hero-top {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.hero-subtitle {
  font-size: 19px;
  margin: 0 0 14px;
  color: #111827;
}

.hero-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 14px;
  padding: 0;
  max-width: 860px;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,0.22);
  background: rgba(255,255,255,0.78);
  color: #111827;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 12px 26px rgba(0,0,0,0.18);
  user-select: none;
  line-height: 1.2;
}

.hero-pill .dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(34,197,94,1) 0, rgba(22,163,74,1) 60%);
  box-shadow: 0 0 10px rgba(34,197,94,0.45);
  flex: 0 0 auto;
}

.hero-pill:hover {
  background: rgba(255,255,255,0.88);
  transform: translateY(-1px);
}

.hero-note {
  font-size: 15px;
  color: #111827;
  max-width: 520px;
  margin: 0 auto;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 16px;
  border-radius: 999px;
  background: rgba(22,163,74,0.9);
  color: #ecfdf5;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 18px;
  box-shadow: 0 8px 18px rgba(21,128,61,0.9);
  margin-left: auto;
  margin-right: auto;
}

.hero-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #bbf7d0 0, #22c55e 40%, #16a34a 100%);
  box-shadow: 0 0 8px rgba(34,197,94,0.9);
}

.hero-form-wrap {
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
}

.form-card {
  background: radial-gradient(circle at top left, #020617 0, #020617 55%, #02091c 100%);
  border-radius: 18px;
  padding: 20px 16px 18px;
  border: 1px solid #020617;
  box-shadow: var(--shadow-soft);
}

.form-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.form-title {
  font-size: 22px;
  margin: 0;
  color: #f9fafb;
}

.form-tag {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #bbf7d0;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(52,211,153,0.7);
  background: rgba(6,95,70,0.9);
  white-space: nowrap;
}

.form-subtitle {
  font-size: 15px;
  color: var(--text-muted);
  margin: 0 0 14px;
}





















/* [IVAN][EDIT][3] START: стили переключателя city/intercity */





/* [IVAN][EDIT][5] START: фикс ширины фона для "Город-пригород / Межгород" */



/* [IVAN][EDIT][5] END */
/* [IVAN][EDIT][6] START: день/ночь на всю ширину (фон-слайдер под текст, как у city/intercity) */



/* [IVAN][EDIT][6] END */

/* [IVAN][EDIT][7] START: заголовки режимных блоков по центру +20% */

/* [IVAN][EDIT][7] END */



/* [IVAN][EDIT][3] END */





.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  margin-top: 6px;
}

.form-row { margin-bottom: 0; }
.form-row--full { grid-column: 1 / -1; }

label {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
  color: var(--text-main);
}



input, select, textarea {
  width: 100%;
  padding: 9px 12px;
  border-radius: 11px;
  border: 1px solid var(--input-border);
  font-size: 16px;
  font-family: inherit;
  background: var(--input-bg);
  color: var(--text-main);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.08s ease;
}

select option { color: #020617; background: #f9fafb; }

input::placeholder, textarea::placeholder { color: #6b7280; }

input:focus, select:focus, textarea:focus {
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 1px rgba(15,23,42,0.9), 0 0 0 2px rgba(34,197,94,0.8);
  outline: none;
  background: var(--input-bg-focus);
  transform: translateY(-0.5px);
}

textarea { min-height: 80px; resize: vertical; }

/* ✅ Красно/зелёная подсветка */



.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: 999px;
  border: none;
  background: radial-gradient(circle at top left, #22c55e 0, #16a34a 60%, #15803d 100%);
  color: #f9fafb;
  font-weight: 800;
  font-size: 17px;
  cursor: pointer;
  margin-top: 10px;
  min-width: 200px;
  box-shadow: 0 22px 48px rgba(22,163,74,0.95);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-primary:active { filter: brightness(0.97); transform: translateY(0); box-shadow: 0 16px 32px rgba(22,163,74,1); }

.small-note {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
}

.small-note a { color: var(--brand-blue); text-decoration: underline; }























/* AUTOCOMPLETE */










/* ТАРИФНЫЕ БЛОКИ НИЖЕ */





/* ✅ СКРОЛЛ КАК В СТАРОМ ФАЙЛЕ (Android фикс): ползунок НЕ внутри scroll-контейнера */
.table-shell {
  position: relative;
  padding-bottom: 28px; /* место под ползунок */
}

.table-wrapper {
  overflow-x: auto;
  margin: 0 -2px 8px;
  -webkit-overflow-scrolling: touch;

  /* прячем нативный скролл */
  scrollbar-width: none;    /* Firefox */
  -ms-overflow-style: none; /* старый Edge */
}
.table-wrapper::-webkit-scrollbar { width: 0; height: 0; }

.hscroll {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  height: 18px;
  z-index: 20;
  pointer-events: none;
}

.hscroll-track {
  height: 100%;
  border-radius: 999px;
  background: rgba(34,197,94,0.22);
  border: 1px solid rgba(34,197,94,0.35);
  box-shadow: inset 0 0 0 1px rgba(2,6,23,0.35);
  position: relative;
  pointer-events: auto;
  cursor: pointer;
  overflow: hidden;
  touch-action: manipulation;
}

.hscroll-thumb {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 999px;
  background: rgba(34,197,94,0.78);
  box-shadow: 0 6px 14px rgba(22,163,74,0.35), inset 0 0 0 1px rgba(2,6,23,0.55);
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  transition: filter 0.12s ease, background 0.12s ease, box-shadow 0.12s ease, transform 0.06s ease;
}

.hscroll-thumb:hover {
  filter: brightness(1.08);
  background: rgba(34,197,94,0.90);
}

.hscroll-thumb.is-active {
  cursor: grabbing;
  background: rgba(22,163,74,0.98);
  box-shadow: 0 10px 22px rgba(22,163,74,0.55), inset 0 0 0 1px rgba(2,6,23,0.65);
  transform: scaleY(1.03);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 720px;
  background: #020617;
  color: var(--text-main);
  border-radius: 14px;
  overflow: hidden;
}

thead tr { background: linear-gradient(90deg, #0f172a 0, #0b1120 50%, #0f172a 100%); }

th, td {
  padding: 9px 7px;
  border: 1px solid #1e293b;
  vertical-align: top;
  text-align: left;
}

th { font-weight: 700; color: #e5e7eb; }

tbody tr:nth-child(even) { background: #020617; }
tbody tr:nth-child(odd) { background: #02091c; }

table small { color: var(--text-muted); }



.loader-tariff-title { font-size: 18px; margin: 16px 0 6px; color: #000; }
/* [IVAN][TASK-20251220-45][EDIT] Центр +20% только для 3 выделенных заголовков */
#ivan-hdr-packaging,
#ivan-hdr-assembly,
#ivan-hdr-trash {
  text-align: center;
  font-size: 21.6px; /* 18px * 1.2 */
}

/* [IVAN][TASK-20251220-44] точечно центрируем + увеличиваем на 20% только 2 заголовка (НЕ все .loader-tariff-title) */
#tariffs-transport-title { text-align: center; font-size: 26.4px; } /* 22px * 1.2 */
#tariffs-loaders-title { text-align: center; font-size: 21.6px; }  /* 18px * 1.2 */
/* [/IVAN][TASK-20251220-44] */

footer { margin-top: 18px; font-size: 14px; color: #9ca3af; }
footer strong { color: #e5e7eb; }

/* MODAL (успех) */
#lead-success-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.75);
  display: none;
  z-index: 9998;
}

#lead-success-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
  font-family: inherit;
}

.lead-modal-card {
  background: #020617;
  max-width: 420px;
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.85);
  padding: 22px 20px 18px;
  position: relative;
  color: #e5e7eb;
  text-align: center;
}

.lead-modal-close-x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: none;
  background: #ef4444;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lead-modal-ok {
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  background: #16a34a;
  color: #fff;
  min-height: 52px;
}

.lead-modal-close {
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  background: #b91c1c;
  color: #fff;
  min-height: 52px;
}

@media (max-width: 900px) {
  header { flex-direction: column; align-items: flex-start; border-radius: 18px; }
  .hero { padding: 22px 14px 20px; }
  .hero-form-wrap { margin-top: 4px; }
}

@media (max-width: 700px) {
  .wrapper { padding: 18px 10px 24px; }
  .form-card { padding: 18px 12px 16px; }
  .form-grid { grid-template-columns: 1fr; }
  
  
  
  
  .form-title-row { flex-direction: column; align-items: center; text-align: center; }
  .form-title { text-align: center; }
  .form-tag { align-self: center; }
  .hero-pill { font-size: 14px; padding: 9px 12px; }

  /* ✅ ползунок крупнее на мобилке */
  .table-shell { padding-bottom: 40px; }
  .hscroll { height: 30px; bottom: 8px; }
}

/* ===== hero-form.css ===== */
/* [TASK-20251219-13]
Что сделано:
- Добавлены CSS-классы для блока загрузки фото (вместо inline-стилей в photos.php).
- Добавлены базовые стили для превью фото и кнопки удаления (photo-preview/photo-remove).
Где:
- /public_html/assets/css/hero-form.css
Зачем:
- Чтобы дизайн фото-блока был изолирован в CSS и не ломался при правках PHP/разметки.
*/

/* =========================================
   HERO + FORM + CALC + AUTOCOMPLETE
   File: /public_html/assets/css/hero-form.css
   ========================================= */

/* Переменные (нужны форме/кальку) */
:root {
  --brand-green: #22c55e;
  --brand-green-dark: #16a34a;
  --brand-orange: #f97316;
  --brand-orange-dark: #ea580c;
  --brand-orange-deep: #9a3412;
  --brand-red: #ef4444;
  --brand-red-dark: #b91c1c;
  --brand-blue: #38bdf8;

  --bg-page-1: #020617;

  --card-bg: #020617;
  --card-border: #1f2937;

  --text-main: #e5e7eb;
  --text-muted: #9ca3af;
  --danger: #f87171;

  --radius-card: 22px;
  --shadow-strong: 0 28px 60px rgba(0,0,0,0.8);
  --shadow-soft: 0 18px 40px rgba(0,0,0,0.9);

  --input-bg: rgba(34,197,94,0.12);
  --input-border: #334155;
  --input-border-focus: #22c55e;
  --input-bg-focus: rgba(34,197,94,0.18);
}

/* Локальный box-sizing, чтобы не ломать остальной сайт */
.hero, .hero * { box-sizing: border-box; }

/* HERO / FORM */
.hero {
  background: radial-gradient(circle at top left, #fed7aa 0, #fdba74 20%, #fb923c 40%, #ea580c 65%, #9a3412 100%);
  border-radius: var(--radius-card);
  padding: 28px 22px 24px;
  box-shadow: var(--shadow-strong);
  border: 1px solid rgba(148,91,35,0.9);
  position: relative;
  overflow: hidden;
  overflow-anchor: none;
}

.hero::before {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -80px;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(252,211,77,0.4) 0, transparent 60%);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  right: -120px;
  top: 30%;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(234,88,12,0.6) 0, transparent 70%);
  pointer-events: none;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  z-index: 1;
}

.hero-top {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.hero-subtitle {
  font-size: 19px;
  margin: 0 0 14px;
  color: #111827;
}

.hero-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 14px;
  padding: 0;
  max-width: 860px;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,0.22);
  background: rgba(255,255,255,0.78);
  color: #111827;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 12px 26px rgba(0,0,0,0.18);
  user-select: none;
  line-height: 1.2;
  transition: transform 0.12s ease, background 0.12s ease;
}

.hero-pill .dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(34,197,94,1) 0, rgba(22,163,74,1) 60%);
  box-shadow: 0 0 10px rgba(34,197,94,0.45);
  flex: 0 0 auto;
}

.hero-pill:hover {
  background: rgba(255,255,255,0.88);
  transform: translateY(-1px);
}

.hero-note {
  font-size: 15px;
  color: #111827;
  max-width: 520px;
  margin: 0 auto;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 16px;
  border-radius: 999px;
  background: rgba(22,163,74,0.9);
  color: #ecfdf5;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 18px;
  box-shadow: 0 8px 18px rgba(21,128,61,0.9);
  margin-left: auto;
  margin-right: auto;
}

.hero-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #bbf7d0 0, #22c55e 40%, #16a34a 100%);
  box-shadow: 0 0 8px rgba(34,197,94,0.9);
}

.hero-form-wrap {
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
}

/* FORM CARD */
.form-card {
  background: radial-gradient(circle at top left, #020617 0, #020617 55%, #02091c 100%);
  border-radius: 18px;
  padding: 20px 16px 18px;
  border: 1px solid #020617;
  box-shadow: var(--shadow-soft);
}

.form-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.form-title {
  font-size: 22px;
  margin: 0;
  color: #f9fafb;
}

.form-tag {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #bbf7d0;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(52,211,153,0.7);
  background: rgba(6,95,70,0.9);
  white-space: nowrap;
}

.form-subtitle {
  font-size: 15px;
  color: var(--text-muted);
  margin: 0 0 14px;
}

/* Day/Night */



















/* FORM GRID */



















/* Красно/зелёная подсветка */



.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: 999px;
  border: none;
  background: radial-gradient(circle at top left, #22c55e 0, #16a34a 60%, #15803d 100%);
  color: #f9fafb;
  font-weight: 800;
  font-size: 17px;
  cursor: pointer;
  margin-top: 10px;
  min-width: 200px;
  box-shadow: 0 22px 48px rgba(22,163,74,0.95);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: filter 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}

.btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-primary:active { filter: brightness(0.97); transform: translateY(0); box-shadow: 0 16px 32px rgba(22,163,74,1); }

.small-note {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
}

.small-note a { color: var(--brand-blue); text-decoration: underline; }























/* AUTOCOMPLETE */










/* RESPONSIVE (hero/form only) */
@media (max-width: 900px) {
  .hero { padding: 22px 14px 20px; }
  .hero-form-wrap { margin-top: 4px; }
}

@media (max-width: 700px) {
  .form-card { padding: 18px 12px 16px; }
  
  
  
  
  
  .form-title-row { flex-direction: column; align-items: center; text-align: center; }
  .form-title { text-align: center; }
  .form-tag { align-self: center; }
  .hero-pill { font-size: 14px; padding: 9px 12px; }
}
/* [IVAN][TASK-20251225-08] START: чистый дизайн обязательных полей (красное по умолчанию / зелёное после заполнения)
   - Без .touched/.is-valid (только CSS :required/:valid/:invalid)
   - "Телефон" и "Ваше имя" после заполнения получают такую же заливку как у селектов (var(--calc-field-bg))
*/
:root{
  --iv-req-invalid-border: rgba(239,68,68,0.95);
  --iv-req-invalid-bg: rgba(239,68,68,0.10);

  --iv-req-valid-border: rgba(34,197,94,0.95);
  --iv-req-valid-bg: var(--calc-field-bg, #062a33);
  --iv-req-valid-text: #d8f7ff;
}

/* По умолчанию: все required — красная окантовка + лёгкая красная подкраска внутри */


/* После заполнения (валидно): зелёная окантовка + зелёная/бирюзовая заливка как у селектов */


/* Фокус: красный если невалидно / зелёный если валидно */




/* Автозаполнение (Chrome): удерживаем фон плашки */


/* [IVAN][TASK-20251225-08] END */

/* =========================
   [TASK-20251219-13] PHOTO UPLOAD UI (no inline styles)
========================= */

/* [IVAN][TASK-20251219-13] Универсальный отступ вместо inline style="margin-top:8px" */
.form-row--mt8 {
  margin-top: 8px;
}

/* [IVAN][TASK-20251219-13] Обёртка кастомной загрузки */


/* [IVAN][TASK-20251219-13] Прячем нативный input */


/* [IVAN][TASK-20251219-13] Кнопка выбора файлов */


/* [IVAN][TASK-20251219-13] Текст “Файлы не выбраны / Выбрано N” */


/* [IVAN][TASK-20251219-13] Статус/ошибки/подсказки под загрузкой */


/* [IVAN][TASK-20251219-13] Сетка превью */


/* [IVAN][TASK-20251219-13] Карточка превью */




/* [IVAN][TASK-20251219-13] Крестик удаления */




/* [IVAN][TASK-20251225-11][EDIT][2] START: очень узкие экраны — превью крупнее для удобства */
@media (max-width: 520px) {
  
  
}
/* [IVAN][TASK-20251225-11][EDIT][2] END */




/* ===== style.css ===== */
/* [IVAN][TASK-20251219-23]
Что сделано:
- Добавлены стили для debug-missing (плашка отсутствующих чанков) без inline-стилей.
Где:
- /public_html/assets/css/style.css
Зачем:
- Чистый код: служебные элементы живут в CSS, а не в PHP-строках.
*/

.debug-badge { /* [IVAN][TASK-20251219-23] */
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 99999;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.15);
  padding: 10px 12px;
  border-radius: 12px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  line-height: 1.25;
}

.debug-badge__link { /* [IVAN][TASK-20251219-23] */
  color: #e5e7eb;
  text-decoration: none;
  font-weight: 800;
}

.debug-badge__link:hover { /* [IVAN][TASK-20251219-23] */
  text-decoration: underline;
}

.debug-badge__hint { /* [IVAN][TASK-20251219-23] */
  margin-top: 6px;
  color: #9ca3af;
  font-size: 12px;
}

/* [IVAN][TASK-20251219-23] Плашка отсутствующих partials (видна только при $DEBUG=true) */
.debug-missing {
  max-width: 1120px;
  margin: 18px auto;
  padding: 14px 12px;
  border-radius: 14px;
  border: 1px solid #ef4444;
  background: #020617;
  color: #e5e7eb;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  line-height: 1.45;
}

.debug-missing__title {
  font-weight: 800;
  margin-bottom: 6px;
}

.debug-missing__list {
  margin: 0;
  padding-left: 18px;
}

.debug-missing__hint {
  margin-top: 8px;
  color: #9ca3af;
  font-size: 13px;
}

  
/* [IVAN][TASK-20251220-04] FIX: блок "Выберите услуги" — выравнивание и вид как плитки (без логики) */





@media (max-width:860px){
   /* [IVAN][TASK-20251220-05] */
}
@media (max-width:680px){
  
}

/* [IVAN][TASK-20251220-42] Блок "Полезные услуги наших партнёров" в HERO */
.partner-box{
  border: 2px solid rgba(15,23,42,0.85); /* [IVAN][TASK-20251220-42] */
  border-radius: 12px; /* [IVAN][TASK-20251220-42] */
  padding: 14px 12px; /* [IVAN][TASK-20251220-42] */
  margin: 16px auto 14px; /* [IVAN][TASK-20251220-42] */
  max-width: 860px; /* [IVAN][TASK-20251220-42] */
  background: transparent; /* [IVAN][TASK-20251220-42] */
}
.partner-title{
  font-size: 16px; /* [IVAN][TASK-20251220-42] */
  font-weight: 800; /* [IVAN][TASK-20251220-42] */
  color: #111827; /* [IVAN][TASK-20251220-42] */
  margin: 0 0 10px; /* [IVAN][TASK-20251220-42] */
  text-align: center; /* [IVAN][TASK-20251220-42] */
}
.partner-pills{
  display: flex; /* [IVAN][TASK-20251220-42] */
  flex-wrap: wrap; /* [IVAN][TASK-20251220-42] */
  justify-content: center; /* [IVAN][TASK-20251220-42] */
  gap: 10px; /* [IVAN][TASK-20251220-42] */
}
.partner-pill{
  text-decoration: none; /* [IVAN][TASK-20251220-42] */
  cursor: pointer; /* [IVAN][TASK-20251220-42] */
}
.partner-pill:focus{
  outline: 2px solid rgba(22,163,74,0.55); /* [IVAN][TASK-20251220-42] */
  outline-offset: 2px; /* [IVAN][TASK-20251220-42] */
}

/* [/IVAN][TASK-20251220-04] */

/* [IVAN][TASK-20251220-46] Плавающая кнопка Telegram (фиксированная, не ломает верстку) */
.tg-fab {
  background: rgba(229, 168, 69, 0.45) !important; /* [IVAN][TASK-20251220-51] fallback */
  background: #E5A84572 !important; /* [IVAN][TASK-20251220-51] */
  /* [IVAN][TASK-20251220-50] #E5A84572 fallback */
  /* [IVAN][TASK-20251220-50] */
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 99999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
	  /* [IVAN][TASK-20251220-48] 80% прозрачности фона */
	  border: 1px solid rgba(0, 0, 0, 0.12); /* [IVAN][TASK-20251220-47] контраст рамки на белом */
	  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35); /* [IVAN][TASK-20251220-47] чуть мягче тень */
	  color: #ffffff; /* [IVAN][TASK-20251220-49] текст кнопки белый */ /* [IVAN][TASK-20251220-47] контрастный текст */
  text-decoration: none;
  line-height: 1;
  font-weight: 800;
  max-width: calc(100vw - 24px);
  -webkit-tap-highlight-color: transparent;
	  touch-action: manipulation;
	  -webkit-backdrop-filter: blur(6px); /* [IVAN][TASK-20251220-47] мягкость на фоне */
	  backdrop-filter: blur(6px); /* [IVAN][TASK-20251220-47] мягкость на фоне */
}

.tg-fab:hover {
  filter: brightness(1.05);
}

.tg-fab:active {
  transform: translateY(1px);
}

.tg-fab__icon {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
  color: #2AABEE;
}

.tg-fab__icon svg {
  width: 26px;
  height: 26px;
  display: block;
  fill: currentColor;
}

.tg-fab__text {
  font-size: 14px;
  white-space: nowrap;
}

/* На очень маленьких экранах текст можно скрыть, чтобы кнопка не перекрывала контент */
@media (max-width: 360px) {
  .tg-fab {
    padding: 12px;
  }
  .tg-fab__text {
    display: none;
  }
}


/* [MERGE][BLOCK04][STYLE] END */


/* [MERGE][BLOCK04][STYLE] START */

    :root{
      /* ТЕСТ: яркий красный, чтобы было видно что фон НЕ наложением, а под контентом */
      --calc-block-bg: #171424; /* [IVAN][TASK-20251220-41] */
      --calc-field-bg: #062a33; /* фон "плашек" (инпуты/селекты) */
      --calc-field-border: rgba(0, 0, 0, .35);
      --calc-block-border: rgba(0, 0, 0, .35);
    }

    /* Общая оболочка блока */
    

    /* Если блок стоит внутри .form-grid — растягиваем на всю ширину */
    

    

    

    
    
/* Обнуляем "внутренний" фон у старых секций, чтобы не спорил с calc-block */
    
    

    /* Главное: "плашки" должны быть ОТДЕЛЬНЫМ сплошным цветом, не прозрачными */
    
    
    /* [IVAN][TASK-20251220-26] FIX: внутри .calc-block фон "плашек" не должен становиться прозрачным/валидным и пропускать цвет блока */
    

    /* [IVAN][TASK-20251220-26] FIX: фокус/ховер не меняет фон на прозрачный */
    

    /* [IVAN][TASK-20251220-26] FIX: автозаполнение (Chrome) держит тот же фон */
    


    /* Блок предварительного расчёта тоже как "один из 4" */
    
    
    

        /* [IVAN][TASK-20251221-10][EDIT][16] Ссылка «Удалённые районы» — плашка как у кнопки Telegram */
    
    



    /* [IVAN][EDIT][26] START: мультивыбор (триггер + модалка) */
    
    
    

    .ms-modal{
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 999999;
      padding: 12px;
    }
    .ms-modal.is-open{ display: flex; }

    .ms-backdrop{
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.62);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
    }

    .ms-dialog{
      position: relative;
      width: min(560px, calc(100vw - 24px));
      max-height: min(560px, calc(100vh - 24px));
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 16px;
      border: 1px solid rgba(148,163,184,0.35);
      background: radial-gradient(circle at top left, #0b1224 0, #020617 60%, #020617 100%);
      box-shadow: var(--shadow-strong);
    }

    .ms-header{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 12px 14px;
      border-bottom: 1px solid rgba(148,163,184,0.18);
    }
    .ms-title{
      font-weight: 900;
      font-size: 16px;
      color: #f9fafb;
    }
    .ms-close{
      border: none;
      background: transparent;
      color: #e5e7eb;
      font-size: 28px;
      line-height: 1;
      cursor: pointer;
      padding: 0 6px;
      border-radius: 10px;
    }
    .ms-close:hover{ background: rgba(148,163,184,0.10); }

    .ms-body{
      padding: 12px 14px;
      overflow: auto;
    }

    .ms-list{
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .ms-item{
      display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 10px 10px;
      border-radius: 12px;
      background: rgba(6,42,51,0.88);
      border: 1px solid rgba(0,0,0,.35);
      cursor: pointer;
      user-select: none;
    }
    .ms-item:hover{ filter: brightness(1.05); }
    .ms-item input{
      margin-top: 2px;
      width: 18px;
      height: 18px;
      flex: 0 0 18px;
      accent-color: #22c55e;
    }
    .ms-item .ms-item-label{
      font-weight: 800;
      color: #d8f7ff;
    }

    /* [IVAN][EDIT][28] START: мультивыбор Упаковка — количества */
.ms-row--qty{
  display: flex; /* [IVAN][TASK-20251222-03][EDIT][1] */
  align-items: stretch; /* [IVAN][TASK-20251222-03][EDIT][1] */
  gap: 10px; /* [IVAN][TASK-20251222-03][EDIT][1] */
}
.ms-row--qty .ms-item{
  flex: 1 1 auto; /* [IVAN][TASK-20251222-03][EDIT][1] */
  cursor: default; /* [IVAN][TASK-20251222-03][EDIT][1] */
}
.ms-row--qty .ms-item:hover{ filter: none; } /* [IVAN][TASK-20251222-03][EDIT][1] */

.ms-stepper{
  display: flex; /* [IVAN][TASK-20251222-03][EDIT][1] */
  align-items: center; /* [IVAN][TASK-20251222-03][EDIT][1] */
  gap: 8px; /* [IVAN][TASK-20251222-03][EDIT][1] */
  padding: 6px; /* [IVAN][TASK-20251222-03][EDIT][1] */
  border-radius: 12px; /* [IVAN][TASK-20251222-03][EDIT][1] */
  background: rgba(6,42,51,0.88); /* [IVAN][TASK-20251222-03][EDIT][1] */
  border: 1px solid rgba(0,0,0,.35); /* [IVAN][TASK-20251222-03][EDIT][1] */
  flex: 0 0 auto; /* [IVAN][TASK-20251222-03][EDIT][1] */
}

.ms-stepper-btn{
  width: 44px; /* [IVAN][TASK-20251222-03][EDIT][1] */
  height: 44px; /* [IVAN][TASK-20251222-03][EDIT][1] */
  border-radius: 12px; /* [IVAN][TASK-20251222-03][EDIT][1] */
  border: 1px solid rgba(0,0,0,.35); /* [IVAN][TASK-20251222-03][EDIT][1] */
  background: rgba(15,23,42,0.55); /* [IVAN][TASK-20251222-03][EDIT][1] */
  color: #e5e7eb; /* [IVAN][TASK-20251222-03][EDIT][1] */
  font-weight: 900; /* [IVAN][TASK-20251222-03][EDIT][1] */
  font-size: 22px; /* [IVAN][TASK-20251222-03][EDIT][1] */
  line-height: 1; /* [IVAN][TASK-20251222-03][EDIT][1] */
  cursor: pointer; /* [IVAN][TASK-20251222-03][EDIT][1] */
  -webkit-tap-highlight-color: transparent; /* [IVAN][TASK-20251222-03][EDIT][1] */
  touch-action: manipulation; /* [IVAN][TASK-20251222-03][EDIT][1] */
}
.ms-stepper-btn:active{ transform: translateY(1px); } /* [IVAN][TASK-20251222-03][EDIT][1] */
.ms-stepper-btn:disabled{
  opacity: .35; /* [IVAN][TASK-20251222-03][EDIT][1] */
  cursor: not-allowed; /* [IVAN][TASK-20251222-03][EDIT][1] */
}

.ms-qty{
  width: 74px; /* [IVAN][TASK-20251222-03][EDIT][1] */
  height: 44px; /* [IVAN][TASK-20251222-03][EDIT][1] */
  padding: 0 8px; /* [IVAN][TASK-20251222-03][EDIT][1] */
  border-radius: 11px; /* [IVAN][TASK-20251222-03][EDIT][1] */
  border: 1px solid rgba(0,0,0,.35); /* [IVAN][TASK-20251222-03][EDIT][1] */
  background: rgba(15,23,42,0.35); /* [IVAN][TASK-20251222-03][EDIT][1] */
  color: #e5e7eb; /* [IVAN][TASK-20251222-03][EDIT][1] */
  font-weight: 900; /* [IVAN][TASK-20251222-03][EDIT][1] */
  text-align: center; /* [IVAN][TASK-20251222-03][EDIT][1] */
  outline: none; /* [IVAN][TASK-20251222-03][EDIT][1] */
}
.ms-qty:focus{
  border-color: rgba(34,197,94,.65); /* [IVAN][TASK-20251222-03][EDIT][1] */
  box-shadow: 0 0 0 3px rgba(34,197,94,0.18); /* [IVAN][TASK-20251222-03][EDIT][1] */
}

@media (max-width: 520px){
  .ms-row--qty{
    flex-direction: column; /* [IVAN][TASK-20251222-03][EDIT][1] */
    align-items: stretch; /* [IVAN][TASK-20251222-03][EDIT][1] */
  }
  .ms-stepper{
    justify-content: space-between; /* [IVAN][TASK-20251222-03][EDIT][1] */
  }
  .ms-stepper-btn{
    width: 52px; /* [IVAN][TASK-20251222-03][EDIT][1] */
    height: 52px; /* [IVAN][TASK-20251222-03][EDIT][1] */
    font-size: 26px; /* [IVAN][TASK-20251222-03][EDIT][1] */
  }
  .ms-qty{
    width: 92px; /* [IVAN][TASK-20251222-03][EDIT][1] */
    height: 52px; /* [IVAN][TASK-20251222-03][EDIT][1] */
    font-size: 18px; /* [IVAN][TASK-20251222-03][EDIT][1] */
  }
}
/* [IVAN][EDIT][28] END: мультивыбор Упаковка — количества */


    .ms-footer{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      padding: 12px 14px;
      border-top: 1px solid rgba(148,163,184,0.18);
    }

    .ms-btn{
      border: none;
      border-radius: 999px;
      padding: 10px 16px;
      font-weight: 900;
      cursor: pointer;
      line-height: 1;
      transition: transform 0.08s ease, filter 0.15s ease;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    .ms-btn:active{ transform: translateY(1px); }

    .ms-btn--ghost{
      background: rgba(148,163,184,0.14);
      border: 1px solid rgba(148,163,184,0.28);
      color: #e5e7eb;
    }
    .ms-btn--ghost:hover{ filter: brightness(1.05); }

    .ms-btn--primary{
      background: radial-gradient(circle at top left, #22c55e 0, #16a34a 60%, #15803d 100%);
      color: #f9fafb;
    }
    .ms-btn--primary:hover{ filter: brightness(1.05); }
    /* [IVAN][EDIT][26] END: мультивыбор (триггер + модалка) */


    /* Вложенный грид внутри адресного блока */
    .form-grid--inside{
      margin-top: 0;
    }
  
/* [MERGE][BLOCK04][STYLE] END */


/* [MERGE][BLOCK05][STYLE] START */

:root {
  --brand-green: #22c55e;
  --brand-green-dark: #16a34a;
  --brand-orange: #f97316;
  --brand-orange-dark: #ea580c;
  --brand-orange-deep: #9a3412;
  --brand-red: #ef4444;
  --brand-red-dark: #b91c1c;
  --brand-blue: #38bdf8;

  --bg-page-1: #020617;

  --card-bg: #020617;
  --card-border: #1f2937;

  --text-main: #e5e7eb;
  --text-muted: #9ca3af;
  --danger: #f87171;

  --radius-card: 22px;
  --shadow-strong: 0 28px 60px rgba(0,0,0,0.8);
  --shadow-soft: 0 18px 40px rgba(0,0,0,0.9);

  --input-bg: rgba(34,197,94,0.12);
  --input-border: #334155;
  --input-border-focus: #22c55e;
  --input-bg-focus: rgba(34,197,94,0.18);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top left, #0b1120 0, #020617 38%, #020617 70%, #000000 100%);
  color: var(--text-main);
}

.page {
  min-height: 100vh;
  background:
    radial-gradient(circle at bottom right, rgba(56,189,248,0.08) 0, transparent 55%),
    radial-gradient(circle at top right, rgba(34,197,94,0.14) 0, transparent 55%);
}

.wrapper {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 12px 42px;
}

header {
  background: radial-gradient(circle at top left, #020617 0, #020617 55%, #02091c 100%);
  border-radius: 999px;
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.9);
  border: 1px solid #111827;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}

header::before {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 140px;
  height: 140px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(148,163,184,0.22) 0, transparent 70%);
  opacity: 0.9;
  pointer-events: none;
}

.logo {
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 1;
}

.logo-mark {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background:
    conic-gradient(from 220deg, #f97316, #f97316, #22c55e, #f97316, #f97316);
  box-shadow: 0 20px 36px rgba(0,0,0,0.9);
  position: relative;
  overflow: hidden;
}

.logo-mark::after {
  content: "";
  position: absolute;
  inset: 6px 10px;
  border-radius: 12px;
  border: 2px solid rgba(15,23,42,0.9);
}

.logo-mark.logo-mark--truck{
  width: 75px;
  height: 44px;
  border-radius: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.logo-mark.logo-mark--truck::after{ display: none; }
.logo-mark.logo-mark--truck .logo-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.logo-text-main {
  font-weight: 900;
  font-size: 26px;
  letter-spacing: 0.14em;
  color: #f9fafb;
  text-transform: uppercase;
}

.logo-text-sub {
  font-weight: 500;
  font-size: 15px;
  color: var(--text-muted);
}

.top-runner {
  --cycle: 20s;
  --slot: 5s;
  --startOffset: -1.8s;

  position: relative;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,0.9);
  background: radial-gradient(circle at top left, #020617 0, #020617 60%, #02091c 100%);
  box-shadow: 0 12px 28px rgba(0,0,0,0.85);
  overflow: hidden;
  margin-bottom: 22px;
  opacity: 0.94;
  isolation: isolate;
}

.top-runner::before {
  content: "";
  position: absolute;
  inset: -40px -60px;
  background:
    radial-gradient(circle at 20% 30%, rgba(56,189,248,0.09) 0, transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(34,197,94,0.10) 0, transparent 48%);
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}

.top-runner-road {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background:
    repeating-linear-gradient(
      90deg,
      rgba(148,163,184,0.55) 0,
      rgba(148,163,184,0.55) 14px,
      rgba(148,163,184,0.0) 14px,
      rgba(148,163,184,0.0) 30px
    );
  opacity: 0.28;
  pointer-events: none;
  z-index: 1;
  animation: roadMove 2.8s linear infinite;
}

@keyframes roadMove {
  0%   { background-position: 0 0; }
  100% { background-position: 44px 0; }
}

.runner-item {
  position: absolute;
  top: 50%;
  left: -180px;
  transform: translateY(-50%);
  line-height: 1;
  will-change: left, opacity;
  pointer-events: none;
  opacity: 0;
  z-index: 2;

  animation-name: runnerPassFull;
  animation-duration: var(--cycle);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes runnerPassFull {
  0%   { left: -180px; opacity: 0.95; }
  48%  { left: calc(100% + 180px); opacity: 0.95; }
  50%  { left: calc(100% + 180px); opacity: 0; }
  100% { left: calc(100% + 180px); opacity: 0; }
}

.runner-vehicle {
  position: absolute;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.62));
}

.runner-vehicle svg {
  width: 66px;
  height: 38px;
  display: block;
  color: #e5e7eb;
  opacity: 0.92;
  animation: vehicleBob 0.85s ease-in-out infinite alternate;
}

@keyframes vehicleBob {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-1.4px); }
}

.runner-worker svg {
  width: 40px;
  height: 40px;
  display: block;
  color: var(--text-main);
  opacity: 0.86;
  animation: workerBob 0.95s ease-in-out infinite alternate;
}

@keyframes workerBob {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-1.8px); }
}

.runner-vehicle-a { animation-delay: calc(var(--startOffset) + 0s); }
.runner-worker-a  { animation-delay: calc(var(--startOffset) + var(--slot)); }

.runner-vehicle-b { animation-delay: calc(var(--startOffset) + (var(--slot) * 2)); }
.runner-worker-b  { animation-delay: calc(var(--startOffset) + (var(--slot) * 3)); }

@media (max-width: 700px) {
  .top-runner { height: 46px; margin-bottom: 18px; }
  .runner-vehicle svg { width: 72px; height: 40px; }
  .runner-worker svg { width: 42px; height: 42px; }
  .top-runner-road { opacity: 0.30; }
}

@media (prefers-reduced-motion: reduce) {
  .top-runner-road { animation: none; }
  .runner-item { animation: none; opacity: 0; }
  .runner-vehicle-a { opacity: 0.95; left: 16px; }
  .runner-vehicle svg, .runner-worker svg { animation: none; }
}

main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero {
  background: radial-gradient(circle at top left, #fed7aa 0, #fdba74 20%, #fb923c 40%, #ea580c 65%, #9a3412 100%);
  border-radius: var(--radius-card);
  padding: 28px 22px 24px;
  box-shadow: var(--shadow-strong);
  border: 1px solid rgba(148,91,35,0.9);
  position: relative;
  overflow: hidden;
  overflow-anchor: none;
}

.hero::before {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -80px;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(252,211,77,0.4) 0, transparent 60%);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  right: -120px;
  top: 30%;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(234,88,12,0.6) 0, transparent 70%);
  pointer-events: none;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  z-index: 1;
}

.hero-top {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.hero-subtitle {
  font-size: 19px;
  margin: 0 0 14px;
  color: #111827;
}

.hero-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 14px;
  padding: 0;
  max-width: 860px;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,0.22);
  background: rgba(255,255,255,0.78);
  color: #111827;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 12px 26px rgba(0,0,0,0.18);
  user-select: none;
  line-height: 1.2;
}

.hero-pill .dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(34,197,94,1) 0, rgba(22,163,74,1) 60%);
  box-shadow: 0 0 10px rgba(34,197,94,0.45);
  flex: 0 0 auto;
}

.hero-pill:hover {
  background: rgba(255,255,255,0.88);
  transform: translateY(-1px);
}

.hero-note {
  font-size: 15px;
  color: #111827;
  max-width: 520px;
  margin: 0 auto;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 16px;
  border-radius: 999px;
  background: rgba(22,163,74,0.9);
  color: #ecfdf5;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 18px;
  box-shadow: 0 8px 18px rgba(21,128,61,0.9);
  margin-left: auto;
  margin-right: auto;
}

.hero-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #bbf7d0 0, #22c55e 40%, #16a34a 100%);
  box-shadow: 0 0 8px rgba(34,197,94,0.9);
}

.hero-form-wrap {
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
}

.form-card {
  background: radial-gradient(circle at top left, #020617 0, #020617 55%, #02091c 100%);
  border-radius: 18px;
  padding: 20px 16px 18px;
  border: 1px solid #020617;
  box-shadow: var(--shadow-soft);
}

.form-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.form-title {
  font-size: 22px;
  margin: 0;
  color: #f9fafb;
}

.form-tag {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #bbf7d0;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(52,211,153,0.7);
  background: rgba(6,95,70,0.9);
  white-space: nowrap;
}

.form-subtitle {
  font-size: 15px;
  color: var(--text-muted);
  margin: 0 0 14px;
}





































.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  margin-top: 6px;
}

.form-row { margin-bottom: 0; }
.form-row--full { grid-column: 1 / -1; }

label {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
  color: var(--text-main);
}



input, select, textarea {
  width: 100%;
  padding: 9px 12px;
  border-radius: 11px;
  border: 1px solid var(--input-border);
  font-size: 16px;
  font-family: inherit;
  background: var(--input-bg);
  color: var(--text-main);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.08s ease;
}

select option { color: #020617; background: #f9fafb; }

input::placeholder, textarea::placeholder { color: #6b7280; }

input:focus, select:focus, textarea:focus {
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 1px rgba(15,23,42,0.9), 0 0 0 2px rgba(34,197,94,0.8);
  outline: none;
  background: var(--input-bg-focus);
  transform: translateY(-0.5px);
}

textarea { min-height: 80px; resize: vertical; }




.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: 999px;
  border: none;
  background: radial-gradient(circle at top left, #22c55e 0, #16a34a 60%, #15803d 100%);
  color: #f9fafb;
  font-weight: 800;
  font-size: 17px;
  cursor: pointer;
  margin-top: 10px;
  min-width: 200px;
  box-shadow: 0 22px 48px rgba(22,163,74,0.95);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-primary:active { filter: brightness(0.97); transform: translateY(0); box-shadow: 0 16px 32px rgba(22,163,74,1); }

.small-note {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
}

.small-note a { color: var(--brand-blue); text-decoration: underline; }






































.table-shell {
  position: relative;
  padding-bottom: 28px;
}

.table-wrapper {
  overflow-x: auto;
  margin: 0 -2px 8px;
  -webkit-overflow-scrolling: touch;


  scrollbar-width: none;
  -ms-overflow-style: none;
}
.table-wrapper::-webkit-scrollbar { width: 0; height: 0; }

.hscroll {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  height: 18px;
  z-index: 20;
  pointer-events: none;
}

.hscroll-track {
  height: 100%;
  border-radius: 999px;
  background: rgba(34,197,94,0.22);
  border: 1px solid rgba(34,197,94,0.35);
  box-shadow: inset 0 0 0 1px rgba(2,6,23,0.35);
  position: relative;
  pointer-events: auto;
  cursor: pointer;
  overflow: hidden;
  touch-action: manipulation;
}

.hscroll-thumb {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 999px;
  background: rgba(34,197,94,0.78);
  box-shadow: 0 6px 14px rgba(22,163,74,0.35), inset 0 0 0 1px rgba(2,6,23,0.55);
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  transition: filter 0.12s ease, background 0.12s ease, box-shadow 0.12s ease, transform 0.06s ease;
}

.hscroll-thumb:hover {
  filter: brightness(1.08);
  background: rgba(34,197,94,0.90);
}

.hscroll-thumb.is-active {
  cursor: grabbing;
  background: rgba(22,163,74,0.98);
  box-shadow: 0 10px 22px rgba(22,163,74,0.55), inset 0 0 0 1px rgba(2,6,23,0.65);
  transform: scaleY(1.03);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 720px;
  background: #020617;
  color: var(--text-main);
  border-radius: 14px;
  overflow: hidden;
}

thead tr { background: linear-gradient(90deg, #0f172a 0, #0b1120 50%, #0f172a 100%); }

th, td {
  padding: 9px 7px;
  border: 1px solid #1e293b;
  vertical-align: top;
  text-align: left;
}

th { font-weight: 700; color: #e5e7eb; }

tbody tr:nth-child(even) { background: #020617; }
tbody tr:nth-child(odd) { background: #02091c; }

table small { color: var(--text-muted); }



.loader-tariff-title { font-size: 18px; margin: 16px 0 6px; color: #000; }

#ivan-hdr-packaging,
#ivan-hdr-assembly,
#ivan-hdr-trash {
  text-align: center;
  font-size: 21.6px;
}

#tariffs-transport-title { text-align: center; font-size: 26.4px; }
#tariffs-loaders-title { text-align: center; font-size: 21.6px; }

footer { margin-top: 18px; font-size: 14px; color: #9ca3af; }
footer strong { color: #e5e7eb; }

#lead-success-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.75);
  display: none;
  z-index: 9998;
}

#lead-success-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
  font-family: inherit;
}

.lead-modal-card {
  background: #020617;
  max-width: 420px;
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.85);
  padding: 22px 20px 18px;
  position: relative;
  color: #e5e7eb;
  text-align: center;
}

.lead-modal-close-x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: none;
  background: #ef4444;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lead-modal-ok {
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  background: #16a34a;
  color: #fff;
  min-height: 52px;
}

.lead-modal-close {
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  background: #b91c1c;
  color: #fff;
  min-height: 52px;
}

@media (max-width: 900px) {
  header { flex-direction: column; align-items: flex-start; border-radius: 18px; }
  .hero { padding: 22px 14px 20px; }
  .hero-form-wrap { margin-top: 4px; }
}

@media (max-width: 700px) {
  .wrapper { padding: 18px 10px 24px; }
  .form-card { padding: 18px 12px 16px; }
  .form-grid { grid-template-columns: 1fr; }
  
  
  
  
  .form-title-row { flex-direction: column; align-items: center; text-align: center; }
  .form-title { text-align: center; }
  .form-tag { align-self: center; }
  .hero-pill { font-size: 14px; padding: 9px 12px; }


  .table-shell { padding-bottom: 40px; }
  .hscroll { height: 30px; bottom: 8px; }
}

:root {
  --brand-green: #22c55e;
  --brand-green-dark: #16a34a;
  --brand-orange: #f97316;
  --brand-orange-dark: #ea580c;
  --brand-orange-deep: #9a3412;
  --brand-red: #ef4444;
  --brand-red-dark: #b91c1c;
  --brand-blue: #38bdf8;

  --bg-page-1: #020617;

  --card-bg: #020617;
  --card-border: #1f2937;

  --text-main: #e5e7eb;
  --text-muted: #9ca3af;
  --danger: #f87171;

  --radius-card: 22px;
  --shadow-strong: 0 28px 60px rgba(0,0,0,0.8);
  --shadow-soft: 0 18px 40px rgba(0,0,0,0.9);

  --input-bg: rgba(34,197,94,0.12);
  --input-border: #334155;
  --input-border-focus: #22c55e;
  --input-bg-focus: rgba(34,197,94,0.18);
}

.hero, .hero * { box-sizing: border-box; }

.hero {
  background: radial-gradient(circle at top left, #fed7aa 0, #fdba74 20%, #fb923c 40%, #ea580c 65%, #9a3412 100%);
  border-radius: var(--radius-card);
  padding: 28px 22px 24px;
  box-shadow: var(--shadow-strong);
  border: 1px solid rgba(148,91,35,0.9);
  position: relative;
  overflow: hidden;
  overflow-anchor: none;
}

.hero::before {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -80px;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(252,211,77,0.4) 0, transparent 60%);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  right: -120px;
  top: 30%;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(234,88,12,0.6) 0, transparent 70%);
  pointer-events: none;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  z-index: 1;
}

.hero-top {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.hero-subtitle {
  font-size: 19px;
  margin: 0 0 14px;
  color: #111827;
}

.hero-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 14px;
  padding: 0;
  max-width: 860px;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,0.22);
  background: rgba(255,255,255,0.78);
  color: #111827;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 12px 26px rgba(0,0,0,0.18);
  user-select: none;
  line-height: 1.2;
  transition: transform 0.12s ease, background 0.12s ease;
}

.hero-pill .dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(34,197,94,1) 0, rgba(22,163,74,1) 60%);
  box-shadow: 0 0 10px rgba(34,197,94,0.45);
  flex: 0 0 auto;
}

.hero-pill:hover {
  background: rgba(255,255,255,0.88);
  transform: translateY(-1px);
}

.hero-note {
  font-size: 15px;
  color: #111827;
  max-width: 520px;
  margin: 0 auto;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 16px;
  border-radius: 999px;
  background: rgba(22,163,74,0.9);
  color: #ecfdf5;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 18px;
  box-shadow: 0 8px 18px rgba(21,128,61,0.9);
  margin-left: auto;
  margin-right: auto;
}

.hero-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #bbf7d0 0, #22c55e 40%, #16a34a 100%);
  box-shadow: 0 0 8px rgba(34,197,94,0.9);
}

.hero-form-wrap {
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
}

.form-card {
  background: radial-gradient(circle at top left, #020617 0, #020617 55%, #02091c 100%);
  border-radius: 18px;
  padding: 20px 16px 18px;
  border: 1px solid #020617;
  box-shadow: var(--shadow-soft);
}

.form-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.form-title {
  font-size: 22px;
  margin: 0;
  color: #f9fafb;
}

.form-tag {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #bbf7d0;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(52,211,153,0.7);
  background: rgba(6,95,70,0.9);
  white-space: nowrap;
}

.form-subtitle {
  font-size: 15px;
  color: var(--text-muted);
  margin: 0 0 14px;
}










































.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: 999px;
  border: none;
  background: radial-gradient(circle at top left, #22c55e 0, #16a34a 60%, #15803d 100%);
  color: #f9fafb;
  font-weight: 800;
  font-size: 17px;
  cursor: pointer;
  margin-top: 10px;
  min-width: 200px;
  box-shadow: 0 22px 48px rgba(22,163,74,0.95);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: filter 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}

.btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-primary:active { filter: brightness(0.97); transform: translateY(0); box-shadow: 0 16px 32px rgba(22,163,74,1); }

.small-note {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
}

.small-note a { color: var(--brand-blue); text-decoration: underline; }

































@media (max-width: 900px) {
  .hero { padding: 22px 14px 20px; }
  .hero-form-wrap { margin-top: 4px; }
}

@media (max-width: 700px) {
  .form-card { padding: 18px 12px 16px; }
  
  
  
  
  
  .form-title-row { flex-direction: column; align-items: center; text-align: center; }
  .form-title { text-align: center; }
  .form-tag { align-self: center; }
  .hero-pill { font-size: 14px; padding: 9px 12px; }
}























.form-row--mt8 {
  margin-top: 8px;
}





















.debug-badge {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 99999;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.15);
  padding: 10px 12px;
  border-radius: 12px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  line-height: 1.25;
}

.debug-badge__link {
  color: #e5e7eb;
  text-decoration: none;
  font-weight: 800;
}

.debug-badge__link:hover {
  text-decoration: underline;
}

.debug-badge__hint {
  margin-top: 6px;
  color: #9ca3af;
  font-size: 12px;
}

.debug-missing {
  max-width: 1120px;
  margin: 18px auto;
  padding: 14px 12px;
  border-radius: 14px;
  border: 1px solid #ef4444;
  background: #020617;
  color: #e5e7eb;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  line-height: 1.45;
}

.debug-missing__title {
  font-weight: 800;
  margin-bottom: 6px;
}

.debug-missing__list {
  margin: 0;
  padding-left: 18px;
}

.debug-missing__hint {
  margin-top: 8px;
  color: #9ca3af;
  font-size: 13px;
}








@media (max-width:860px){
  
}
@media (max-width:680px){
  
}

.partner-box{
  border: 2px solid rgba(15,23,42,0.85);
  border-radius: 12px;
  padding: 14px 12px;
  margin: 16px auto 14px;
  max-width: 860px;
  background: transparent;
}
.partner-title{
  font-size: 16px;
  font-weight: 800;
  color: #111827;
  margin: 0 0 10px;
  text-align: center;
}
.partner-pills{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.partner-pill{
  text-decoration: none;
  cursor: pointer;
}
.partner-pill:focus{
  outline: 2px solid rgba(22,163,74,0.55);
  outline-offset: 2px;
}

.tg-fab {
  background: rgba(229, 168, 69, 0.45) !important;
  background: #E5A84572 !important;


  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 99999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;

	  border: 1px solid rgba(0, 0, 0, 0.12);
	  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
	  color: #ffffff;
  text-decoration: none;
  line-height: 1;
  font-weight: 800;
  max-width: calc(100vw - 24px);
  -webkit-tap-highlight-color: transparent;
	  touch-action: manipulation;
	  -webkit-backdrop-filter: blur(6px);
	  backdrop-filter: blur(6px);
}

.tg-fab:hover {
  filter: brightness(1.05);
}

.tg-fab:active {
  transform: translateY(1px);
}

.tg-fab__icon {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
  color: #2AABEE;
}

.tg-fab__icon svg {
  width: 26px;
  height: 26px;
  display: block;
  fill: currentColor;
}

.tg-fab__text {
  font-size: 14px;
  white-space: nowrap;
}

@media (max-width: 360px) {
  .tg-fab {
    padding: 12px;
  }
  .tg-fab__text {
    display: none;
  }
}

/* [MERGE][BLOCK05][STYLE] END */


/* [MERGE][BLOCK05][STYLE] START */

:root{

      --calc-block-bg: #171424;
      --calc-field-bg: #062a33;
      --calc-field-border: rgba(0, 0, 0, .35);
      --calc-block-border: rgba(0, 0, 0, .35);
    }


    


    

    



    


    
    


    


    


    


    



    
    
    


    
    


    
    
    

    .ms-modal{
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 999999;
      padding: 12px;
    }
    .ms-modal.is-open{ display: flex; }

    .ms-backdrop{
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.62);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
    }

    .ms-dialog{
      position: relative;
      width: min(560px, calc(100vw - 24px));
      max-height: min(560px, calc(100vh - 24px));
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 16px;
      border: 1px solid rgba(148,163,184,0.35);
      background: radial-gradient(circle at top left, #0b1224 0, #020617 60%, #020617 100%);
      box-shadow: var(--shadow-strong);
    }

    .ms-header{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 12px 14px;
      border-bottom: 1px solid rgba(148,163,184,0.18);
    }
    .ms-title{
      font-weight: 900;
      font-size: 16px;
      color: #f9fafb;
    }
    .ms-close{
      border: none;
      background: transparent;
      color: #e5e7eb;
      font-size: 28px;
      line-height: 1;
      cursor: pointer;
      padding: 0 6px;
      border-radius: 10px;
    }
    .ms-close:hover{ background: rgba(148,163,184,0.10); }

    .ms-body{
      padding: 12px 14px;
      overflow: auto;
    }

    .ms-list{
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .ms-item{
      display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 10px 10px;
      border-radius: 12px;
      background: rgba(6,42,51,0.88);
      border: 1px solid rgba(0,0,0,.35);
      cursor: pointer;
      user-select: none;
    }
    .ms-item:hover{ filter: brightness(1.05); }
    .ms-item input{
      margin-top: 2px;
      width: 18px;
      height: 18px;
      flex: 0 0 18px;
      accent-color: #22c55e;
    }
    .ms-item .ms-item-label{
      font-weight: 800;
      color: #d8f7ff;
    }


.ms-row--qty{
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.ms-row--qty .ms-item{
  flex: 1 1 auto;
  cursor: default;
}
.ms-row--qty .ms-item:hover{ filter: none; }

.ms-stepper{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(6,42,51,0.88);
  border: 1px solid rgba(0,0,0,.35);
  flex: 0 0 auto;
}

.ms-stepper-btn{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.35);
  background: rgba(15,23,42,0.55);
  color: #e5e7eb;
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.ms-stepper-btn:active{ transform: translateY(1px); }
.ms-stepper-btn:disabled{
  opacity: .35;
  cursor: not-allowed;
}

.ms-qty{
  width: 74px;
  height: 44px;
  padding: 0 8px;
  border-radius: 11px;
  border: 1px solid rgba(0,0,0,.35);
  background: rgba(15,23,42,0.35);
  color: #e5e7eb;
  font-weight: 900;
  text-align: center;
  outline: none;
}
.ms-qty:focus{
  border-color: rgba(34,197,94,.65);
  box-shadow: 0 0 0 3px rgba(34,197,94,0.18);
}

@media (max-width: 520px){
  .ms-row--qty{
    flex-direction: column;
    align-items: stretch;
  }
  .ms-stepper{
    justify-content: space-between;
  }
  .ms-stepper-btn{
    width: 52px;
    height: 52px;
    font-size: 26px;
  }
  .ms-qty{
    width: 92px;
    height: 52px;
    font-size: 18px;
  }
}

    .ms-footer{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      padding: 12px 14px;
      border-top: 1px solid rgba(148,163,184,0.18);
    }

    .ms-btn{
      border: none;
      border-radius: 999px;
      padding: 10px 16px;
      font-weight: 900;
      cursor: pointer;
      line-height: 1;
      transition: transform 0.08s ease, filter 0.15s ease;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    .ms-btn:active{ transform: translateY(1px); }

    .ms-btn--ghost{
      background: rgba(148,163,184,0.14);
      border: 1px solid rgba(148,163,184,0.28);
      color: #e5e7eb;
    }
    .ms-btn--ghost:hover{ filter: brightness(1.05); }

    .ms-btn--primary{
      background: radial-gradient(circle at top left, #22c55e 0, #16a34a 60%, #15803d 100%);
      color: #f9fafb;
    }
    .ms-btn--primary:hover{ filter: brightness(1.05); }



    .form-grid--inside{
      margin-top: 0;
    }

/* [MERGE][BLOCK05][STYLE] END */


/* [MERGE][BLOCK06][STYLE] START */


:root {
  --brand-green: #22c55e;
  --brand-green-dark: #16a34a;
  --brand-orange: #f97316;
  --brand-orange-dark: #ea580c;
  --brand-orange-deep: #9a3412;
  --brand-red: #ef4444;
  --brand-red-dark: #b91c1c;
  --brand-blue: #38bdf8;

  --bg-page-1: #020617;

  --card-bg: #020617;
  --card-border: #1f2937;

  --text-main: #e5e7eb;
  --text-muted: #9ca3af;
  --danger: #f87171;

  --radius-card: 22px;
  --shadow-strong: 0 28px 60px rgba(0,0,0,0.8);
  --shadow-soft: 0 18px 40px rgba(0,0,0,0.9);

  --input-bg: rgba(34,197,94,0.12);
  --input-border: #334155;
  --input-border-focus: #22c55e;
  --input-bg-focus: rgba(34,197,94,0.18);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top left, #0b1120 0, #020617 38%, #020617 70%, #000000 100%);
  color: var(--text-main);
}

.page {
  min-height: 100vh;
  background:
    radial-gradient(circle at bottom right, rgba(56,189,248,0.08) 0, transparent 55%),
    radial-gradient(circle at top right, rgba(34,197,94,0.14) 0, transparent 55%);
}

.wrapper {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 12px 42px;
}

header {
  background: radial-gradient(circle at top left, #020617 0, #020617 55%, #02091c 100%);
  border-radius: 999px;
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.9);
  border: 1px solid #111827;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}

header::before {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 140px;
  height: 140px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(148,163,184,0.22) 0, transparent 70%);
  opacity: 0.9;
  pointer-events: none;
}

.logo {
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 1;
}

.logo-mark {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background:
    conic-gradient(from 220deg, #f97316, #f97316, #22c55e, #f97316, #f97316);
  box-shadow: 0 20px 36px rgba(0,0,0,0.9);
  position: relative;
  overflow: hidden;
}

.logo-mark::after {
  content: "";
  position: absolute;
  inset: 6px 10px;
  border-radius: 12px;
  border: 2px solid rgba(15,23,42,0.9);
}

.logo-mark.logo-mark--truck{
  width: 75px;
  height: 44px;
  border-radius: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.logo-mark.logo-mark--truck::after{ display: none; }
.logo-mark.logo-mark--truck .logo-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.logo-text-main {
  font-weight: 900;
  font-size: 26px;
  letter-spacing: 0.14em;
  color: #f9fafb;
  text-transform: uppercase;
}

.logo-text-sub {
  font-weight: 500;
  font-size: 15px;
  color: var(--text-muted);
}

.top-runner {
  --cycle: 20s;
  --slot: 5s;
  --startOffset: -1.8s;

  position: relative;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,0.9);
  background: radial-gradient(circle at top left, #020617 0, #020617 60%, #02091c 100%);
  box-shadow: 0 12px 28px rgba(0,0,0,0.85);
  overflow: hidden;
  margin-bottom: 22px;
  opacity: 0.94;
  isolation: isolate;
}

.top-runner::before {
  content: "";
  position: absolute;
  inset: -40px -60px;
  background:
    radial-gradient(circle at 20% 30%, rgba(56,189,248,0.09) 0, transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(34,197,94,0.10) 0, transparent 48%);
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}

.top-runner-road {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background:
    repeating-linear-gradient(
      90deg,
      rgba(148,163,184,0.55) 0,
      rgba(148,163,184,0.55) 14px,
      rgba(148,163,184,0.0) 14px,
      rgba(148,163,184,0.0) 30px
    );
  opacity: 0.28;
  pointer-events: none;
  z-index: 1;
  animation: roadMove 2.8s linear infinite;
}

@keyframes roadMove {
  0%   { background-position: 0 0; }
  100% { background-position: 44px 0; }
}

.runner-item {
  position: absolute;
  top: 50%;
  left: -180px;
  transform: translateY(-50%);
  line-height: 1;
  will-change: left, opacity;
  pointer-events: none;
  opacity: 0;
  z-index: 2;

  animation-name: runnerPassFull;
  animation-duration: var(--cycle);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes runnerPassFull {
  0%   { left: -180px; opacity: 0.95; }
  48%  { left: calc(100% + 180px); opacity: 0.95; }
  50%  { left: calc(100% + 180px); opacity: 0; }
  100% { left: calc(100% + 180px); opacity: 0; }
}

.runner-vehicle {
  position: absolute;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.62));
}

.runner-vehicle svg {
  width: 66px;
  height: 38px;
  display: block;
  color: #e5e7eb;
  opacity: 0.92;
  animation: vehicleBob 0.85s ease-in-out infinite alternate;
}

@keyframes vehicleBob {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-1.4px); }
}

.runner-worker svg {
  width: 40px;
  height: 40px;
  display: block;
  color: var(--text-main);
  opacity: 0.86;
  animation: workerBob 0.95s ease-in-out infinite alternate;
}

@keyframes workerBob {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-1.8px); }
}

.runner-vehicle-a { animation-delay: calc(var(--startOffset) + 0s); }
.runner-worker-a  { animation-delay: calc(var(--startOffset) + var(--slot)); }

.runner-vehicle-b { animation-delay: calc(var(--startOffset) + (var(--slot) * 2)); }
.runner-worker-b  { animation-delay: calc(var(--startOffset) + (var(--slot) * 3)); }

@media (max-width: 700px) {
  .top-runner { height: 46px; margin-bottom: 18px; }
  .runner-vehicle svg { width: 72px; height: 40px; }
  .runner-worker svg { width: 42px; height: 42px; }
  .top-runner-road { opacity: 0.30; }
}

@media (prefers-reduced-motion: reduce) {
  .top-runner-road { animation: none; }
  .runner-item { animation: none; opacity: 0; }
  .runner-vehicle-a { opacity: 0.95; left: 16px; }
  .runner-vehicle svg, .runner-worker svg { animation: none; }
}

main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero {
  background: radial-gradient(circle at top left, #fed7aa 0, #fdba74 20%, #fb923c 40%, #ea580c 65%, #9a3412 100%);
  border-radius: var(--radius-card);
  padding: 28px 22px 24px;
  box-shadow: var(--shadow-strong);
  border: 1px solid rgba(148,91,35,0.9);
  position: relative;
  overflow: hidden;
  overflow-anchor: none;
}

.hero::before {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -80px;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(252,211,77,0.4) 0, transparent 60%);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  right: -120px;
  top: 30%;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(234,88,12,0.6) 0, transparent 70%);
  pointer-events: none;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  z-index: 1;
}

.hero-top {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.hero-subtitle {
  font-size: 19px;
  margin: 0 0 14px;
  color: #111827;
}

.hero-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 14px;
  padding: 0;
  max-width: 860px;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,0.22);
  background: rgba(255,255,255,0.78);
  color: #111827;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 12px 26px rgba(0,0,0,0.18);
  user-select: none;
  line-height: 1.2;
}

.hero-pill .dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(34,197,94,1) 0, rgba(22,163,74,1) 60%);
  box-shadow: 0 0 10px rgba(34,197,94,0.45);
  flex: 0 0 auto;
}

.hero-pill:hover {
  background: rgba(255,255,255,0.88);
  transform: translateY(-1px);
}

.hero-note {
  font-size: 15px;
  color: #111827;
  max-width: 520px;
  margin: 0 auto;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 16px;
  border-radius: 999px;
  background: rgba(22,163,74,0.9);
  color: #ecfdf5;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 18px;
  box-shadow: 0 8px 18px rgba(21,128,61,0.9);
  margin-left: auto;
  margin-right: auto;
}

.hero-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #bbf7d0 0, #22c55e 40%, #16a34a 100%);
  box-shadow: 0 0 8px rgba(34,197,94,0.9);
}

.hero-form-wrap {
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
}

.form-card {
  background: radial-gradient(circle at top left, #020617 0, #020617 55%, #02091c 100%);
  border-radius: 18px;
  padding: 20px 16px 18px;
  border: 1px solid #020617;
  box-shadow: var(--shadow-soft);
}

.form-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.form-title {
  font-size: 22px;
  margin: 0;
  color: #f9fafb;
}

.form-tag {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #bbf7d0;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(52,211,153,0.7);
  background: rgba(6,95,70,0.9);
  white-space: nowrap;
}

.form-subtitle {
  font-size: 15px;
  color: var(--text-muted);
  margin: 0 0 14px;
}





































.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  margin-top: 6px;
}

.form-row { margin-bottom: 0; }
.form-row--full { grid-column: 1 / -1; }

label {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
  color: var(--text-main);
}



input, select, textarea {
  width: 100%;
  padding: 9px 12px;
  border-radius: 11px;
  border: 1px solid var(--input-border);
  font-size: 16px;
  font-family: inherit;
  background: var(--input-bg);
  color: var(--text-main);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.08s ease;
}

select option { color: #020617; background: #f9fafb; }

input::placeholder, textarea::placeholder { color: #6b7280; }

input:focus, select:focus, textarea:focus {
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 1px rgba(15,23,42,0.9), 0 0 0 2px rgba(34,197,94,0.8);
  outline: none;
  background: var(--input-bg-focus);
  transform: translateY(-0.5px);
}

textarea { min-height: 80px; resize: vertical; }

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: 999px;
  border: none;
  background: radial-gradient(circle at top left, #22c55e 0, #16a34a 60%, #15803d 100%);
  color: #f9fafb;
  font-weight: 800;
  font-size: 17px;
  cursor: pointer;
  margin-top: 10px;
  min-width: 200px;
  box-shadow: 0 22px 48px rgba(22,163,74,0.95);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-primary:active { filter: brightness(0.97); transform: translateY(0); box-shadow: 0 16px 32px rgba(22,163,74,1); }

.small-note {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
}

.small-note a { color: var(--brand-blue); text-decoration: underline; }






































.table-shell {
  position: relative;
  padding-bottom: 28px;
}

.table-wrapper {
  overflow-x: auto;
  margin: 0 -2px 8px;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;
  -ms-overflow-style: none;
}
.table-wrapper::-webkit-scrollbar { width: 0; height: 0; }

.hscroll {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  height: 18px;
  z-index: 20;
  pointer-events: none;
}

.hscroll-track {
  height: 100%;
  border-radius: 999px;
  background: rgba(34,197,94,0.22);
  border: 1px solid rgba(34,197,94,0.35);
  box-shadow: inset 0 0 0 1px rgba(2,6,23,0.35);
  position: relative;
  pointer-events: auto;
  cursor: pointer;
  overflow: hidden;
  touch-action: manipulation;
}

.hscroll-thumb {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 999px;
  background: rgba(34,197,94,0.78);
  box-shadow: 0 6px 14px rgba(22,163,74,0.35), inset 0 0 0 1px rgba(2,6,23,0.55);
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  transition: filter 0.12s ease, background 0.12s ease, box-shadow 0.12s ease, transform 0.06s ease;
}

.hscroll-thumb:hover {
  filter: brightness(1.08);
  background: rgba(34,197,94,0.90);
}

.hscroll-thumb.is-active {
  cursor: grabbing;
  background: rgba(22,163,74,0.98);
  box-shadow: 0 10px 22px rgba(22,163,74,0.55), inset 0 0 0 1px rgba(2,6,23,0.65);
  transform: scaleY(1.03);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 720px;
  background: #020617;
  color: var(--text-main);
  border-radius: 14px;
  overflow: hidden;
}

thead tr { background: linear-gradient(90deg, #0f172a 0, #0b1120 50%, #0f172a 100%); }

th, td {
  padding: 9px 7px;
  border: 1px solid #1e293b;
  vertical-align: top;
  text-align: left;
}

th { font-weight: 700; color: #e5e7eb; }

tbody tr:nth-child(even) { background: #020617; }
tbody tr:nth-child(odd) { background: #02091c; }

table small { color: var(--text-muted); }



.loader-tariff-title { font-size: 18px; margin: 16px 0 6px; color: #000; }

#ivan-hdr-packaging,
#ivan-hdr-assembly,
#ivan-hdr-trash {
  text-align: center;
  font-size: 21.6px;
}

#tariffs-transport-title { text-align: center; font-size: 26.4px; }
#tariffs-loaders-title { text-align: center; font-size: 21.6px; }

footer { margin-top: 18px; font-size: 14px; color: #9ca3af; }
footer strong { color: #e5e7eb; }

#lead-success-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.75);
  display: none;
  z-index: 9998;
}

#lead-success-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
  font-family: inherit;
}

.lead-modal-card {
  background: #020617;
  max-width: 420px;
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.85);
  padding: 22px 20px 18px;
  position: relative;
  color: #e5e7eb;
  text-align: center;
}

.lead-modal-close-x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: none;
  background: #ef4444;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lead-modal-ok {
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  background: #16a34a;
  color: #fff;
  min-height: 52px;
}

.lead-modal-close {
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  background: #b91c1c;
  color: #fff;
  min-height: 52px;
}

@media (max-width: 900px) {
  header { flex-direction: column; align-items: flex-start; border-radius: 18px; }
  .hero { padding: 22px 14px 20px; }
  .hero-form-wrap { margin-top: 4px; }
}

@media (max-width: 700px) {
  .wrapper { padding: 18px 10px 24px; }
  .form-card { padding: 18px 12px 16px; }
  .form-grid { grid-template-columns: 1fr; }
  
  
  
  
  .form-title-row { flex-direction: column; align-items: center; text-align: center; }
  .form-title { text-align: center; }
  .form-tag { align-self: center; }
  .hero-pill { font-size: 14px; padding: 9px 12px; }

  .table-shell { padding-bottom: 40px; }
  .hscroll { height: 30px; bottom: 8px; }
}























.form-row--mt8 {
  margin-top: 8px;
}





















.debug-badge {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 99999;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.15);
  padding: 10px 12px;
  border-radius: 12px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  line-height: 1.25;
}

.debug-badge__link {
  color: #e5e7eb;
  text-decoration: none;
  font-weight: 800;
}

.debug-badge__link:hover {
  text-decoration: underline;
}

.debug-badge__hint {
  margin-top: 6px;
  color: #9ca3af;
  font-size: 12px;
}

.debug-missing {
  max-width: 1120px;
  margin: 18px auto;
  padding: 14px 12px;
  border-radius: 14px;
  border: 1px solid #ef4444;
  background: #020617;
  color: #e5e7eb;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  line-height: 1.45;
}

.debug-missing__title {
  font-weight: 800;
  margin-bottom: 6px;
}

.debug-missing__list {
  margin: 0;
  padding-left: 18px;
}

.debug-missing__hint {
  margin-top: 8px;
  color: #9ca3af;
  font-size: 13px;
}






@media (max-width:860px){
  
}
@media (max-width:680px){
  
}

.partner-box{
  border: 2px solid rgba(15,23,42,0.85);
  border-radius: 12px;
  padding: 14px 12px;
  margin: 16px auto 14px;
  max-width: 860px;
  background: transparent;
}
.partner-title{
  font-size: 16px;
  font-weight: 800;
  color: #111827;
  margin: 0 0 10px;
  text-align: center;
}
.partner-pills{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.partner-pill{
  text-decoration: none;
  cursor: pointer;
}
.partner-pill:focus{
  outline: 2px solid rgba(22,163,74,0.55);
  outline-offset: 2px;
}

.tg-fab {
  background: rgba(229, 168, 69, 0.45) !important;
  background: #E5A84572 !important;

  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 99999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;

	  border: 1px solid rgba(0, 0, 0, 0.12);
	  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
	  color: #ffffff;
  text-decoration: none;
  line-height: 1;
  font-weight: 800;
  max-width: calc(100vw - 24px);
  -webkit-tap-highlight-color: transparent;
	  touch-action: manipulation;
	  -webkit-backdrop-filter: blur(6px);
	  backdrop-filter: blur(6px);
}

.tg-fab:hover {
  filter: brightness(1.05);
}

.tg-fab:active {
  transform: translateY(1px);
}

.tg-fab__icon {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
  color: #2AABEE;
}

.tg-fab__icon svg {
  width: 26px;
  height: 26px;
  display: block;
  fill: currentColor;
}

.tg-fab__text {
  font-size: 14px;
  white-space: nowrap;
}

@media (max-width: 360px) {
  .tg-fab {
    padding: 12px;
  }
  .tg-fab__text {
    display: none;
  }
}


/* [MERGE][BLOCK06][STYLE] END */


/* [MERGE][BLOCK06][STYLE] START */

    :root{

      --calc-block-bg: #171424;
      --calc-field-bg: #062a33;
      --calc-field-border: rgba(0, 0, 0, .35);
      --calc-block-border: rgba(0, 0, 0, .35);
    }

    

    

    

    

    
    

    

    

    

    


    
    
    

    
    

    
    
    

    .ms-modal{
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 999999;
      padding: 12px;
    }
    .ms-modal.is-open{ display: flex; }

    .ms-backdrop{
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.62);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
    }

    .ms-dialog{
      position: relative;
      width: min(560px, calc(100vw - 24px));
      max-height: min(560px, calc(100vh - 24px));
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 16px;
      border: 1px solid rgba(148,163,184,0.35);
      background: radial-gradient(circle at top left, #0b1224 0, #020617 60%, #020617 100%);
      box-shadow: var(--shadow-strong);
    }

    .ms-header{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 12px 14px;
      border-bottom: 1px solid rgba(148,163,184,0.18);
    }
    .ms-title{
      font-weight: 900;
      font-size: 16px;
      color: #f9fafb;
    }
    .ms-close{
      border: none;
      background: transparent;
      color: #e5e7eb;
      font-size: 28px;
      line-height: 1;
      cursor: pointer;
      padding: 0 6px;
      border-radius: 10px;
    }
    .ms-close:hover{ background: rgba(148,163,184,0.10); }

    .ms-body{
      padding: 12px 14px;
      overflow: auto;
    }

    .ms-list{
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .ms-item{
      display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 10px 10px;
      border-radius: 12px;
      background: rgba(6,42,51,0.88);
      border: 1px solid rgba(0,0,0,.35);
      cursor: pointer;
      user-select: none;
    }
    .ms-item:hover{ filter: brightness(1.05); }
    .ms-item input{
      margin-top: 2px;
      width: 18px;
      height: 18px;
      flex: 0 0 18px;
      accent-color: #22c55e;
    }
    .ms-item .ms-item-label{
      font-weight: 800;
      color: #d8f7ff;
    }

.ms-row--qty{
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.ms-row--qty .ms-item{
  flex: 1 1 auto;
  cursor: default;
}
.ms-row--qty .ms-item:hover{ filter: none; }

.ms-stepper{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(6,42,51,0.88);
  border: 1px solid rgba(0,0,0,.35);
  flex: 0 0 auto;
}

.ms-stepper-btn{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.35);
  background: rgba(15,23,42,0.55);
  color: #e5e7eb;
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.ms-stepper-btn:active{ transform: translateY(1px); }
.ms-stepper-btn:disabled{
  opacity: .35;
  cursor: not-allowed;
}

.ms-qty{
  width: 74px;
  height: 44px;
  padding: 0 8px;
  border-radius: 11px;
  border: 1px solid rgba(0,0,0,.35);
  background: rgba(15,23,42,0.35);
  color: #e5e7eb;
  font-weight: 900;
  text-align: center;
  outline: none;
}
.ms-qty:focus{
  border-color: rgba(34,197,94,.65);
  box-shadow: 0 0 0 3px rgba(34,197,94,0.18);
}

@media (max-width: 520px){
  .ms-row--qty{
    flex-direction: column;
    align-items: stretch;
  }
  .ms-stepper{
    justify-content: space-between;
  }
  .ms-stepper-btn{
    width: 52px;
    height: 52px;
    font-size: 26px;
  }
  .ms-qty{
    width: 92px;
    height: 52px;
    font-size: 18px;
  }
}

    .ms-footer{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      padding: 12px 14px;
      border-top: 1px solid rgba(148,163,184,0.18);
    }

    .ms-btn{
      border: none;
      border-radius: 999px;
      padding: 10px 16px;
      font-weight: 900;
      cursor: pointer;
      line-height: 1;
      transition: transform 0.08s ease, filter 0.15s ease;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    .ms-btn:active{ transform: translateY(1px); }

    .ms-btn--ghost{
      background: rgba(148,163,184,0.14);
      border: 1px solid rgba(148,163,184,0.28);
      color: #e5e7eb;
    }
    .ms-btn--ghost:hover{ filter: brightness(1.05); }

    .ms-btn--primary{
      background: radial-gradient(circle at top left, #22c55e 0, #16a34a 60%, #15803d 100%);
      color: #f9fafb;
    }
    .ms-btn--primary:hover{ filter: brightness(1.05); }

    .form-grid--inside{
      margin-top: 0;
    }
  
/* [MERGE][BLOCK06][STYLE] END */


/* [MERGE][BLOCK07][STYLE] START */


:root {
  --brand-green: #22c55e;
  --brand-green-dark: #16a34a;
  --brand-orange: #f97316;
  --brand-orange-dark: #ea580c;
  --brand-orange-deep: #9a3412;
  --brand-red: #ef4444;
  --brand-red-dark: #b91c1c;
  --brand-blue: #38bdf8;

  --bg-page-1: #020617;

  --card-bg: #020617;
  --card-border: #1f2937;

  --text-main: #e5e7eb;
  --text-muted: #9ca3af;
  --danger: #f87171;

  --radius-card: 22px;
  --shadow-strong: 0 28px 60px rgba(0,0,0,0.8);
  --shadow-soft: 0 18px 40px rgba(0,0,0,0.9);

  --input-bg: rgba(34,197,94,0.12);
  --input-border: #334155;
  --input-border-focus: #22c55e;
  --input-bg-focus: rgba(34,197,94,0.18);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top left, #0b1120 0, #020617 38%, #020617 70%, #000000 100%);
  color: var(--text-main);
}

.page {
  min-height: 100vh;
  background:
    radial-gradient(circle at bottom right, rgba(56,189,248,0.08) 0, transparent 55%),
    radial-gradient(circle at top right, rgba(34,197,94,0.14) 0, transparent 55%);
}

.wrapper {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 12px 42px;
}

header {
  background: radial-gradient(circle at top left, #020617 0, #020617 55%, #02091c 100%);
  border-radius: 999px;
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.9);
  border: 1px solid #111827;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}

header::before {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 140px;
  height: 140px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(148,163,184,0.22) 0, transparent 70%);
  opacity: 0.9;
  pointer-events: none;
}

.logo {
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 1;
}

.logo-mark {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background:
    conic-gradient(from 220deg, #f97316, #f97316, #22c55e, #f97316, #f97316);
  box-shadow: 0 20px 36px rgba(0,0,0,0.9);
  position: relative;
  overflow: hidden;
}

.logo-mark::after {
  content: "";
  position: absolute;
  inset: 6px 10px;
  border-radius: 12px;
  border: 2px solid rgba(15,23,42,0.9);
}

.logo-mark.logo-mark--truck{
  width: 75px;
  height: 44px;
  border-radius: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.logo-mark.logo-mark--truck::after{ display: none; }
.logo-mark.logo-mark--truck .logo-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.logo-text-main {
  font-weight: 900;
  font-size: 26px;
  letter-spacing: 0.14em;
  color: #f9fafb;
  text-transform: uppercase;
}

.logo-text-sub {
  font-weight: 500;
  font-size: 15px;
  color: var(--text-muted);
}

.top-runner {
  --cycle: 20s;
  --slot: 5s;
  --startOffset: -1.8s;

  position: relative;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,0.9);
  background: radial-gradient(circle at top left, #020617 0, #020617 60%, #02091c 100%);
  box-shadow: 0 12px 28px rgba(0,0,0,0.85);
  overflow: hidden;
  margin-bottom: 22px;
  opacity: 0.94;
  isolation: isolate;
}

.top-runner::before {
  content: "";
  position: absolute;
  inset: -40px -60px;
  background:
    radial-gradient(circle at 20% 30%, rgba(56,189,248,0.09) 0, transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(34,197,94,0.10) 0, transparent 48%);
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}

.top-runner-road {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background:
    repeating-linear-gradient(
      90deg,
      rgba(148,163,184,0.55) 0,
      rgba(148,163,184,0.55) 14px,
      rgba(148,163,184,0.0) 14px,
      rgba(148,163,184,0.0) 30px
    );
  opacity: 0.28;
  pointer-events: none;
  z-index: 1;
  animation: roadMove 2.8s linear infinite;
}

@keyframes roadMove {
  0%   { background-position: 0 0; }
  100% { background-position: 44px 0; }
}

.runner-item {
  position: absolute;
  top: 50%;
  left: -180px;
  transform: translateY(-50%);
  line-height: 1;
  will-change: left, opacity;
  pointer-events: none;
  opacity: 0;
  z-index: 2;

  animation-name: runnerPassFull;
  animation-duration: var(--cycle);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes runnerPassFull {
  0%   { left: -180px; opacity: 0.95; }
  48%  { left: calc(100% + 180px); opacity: 0.95; }
  50%  { left: calc(100% + 180px); opacity: 0; }
  100% { left: calc(100% + 180px); opacity: 0; }
}

.runner-vehicle {
  position: absolute;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.62));
}

.runner-vehicle svg {
  width: 66px;
  height: 38px;
  display: block;
  color: #e5e7eb;
  opacity: 0.92;
  animation: vehicleBob 0.85s ease-in-out infinite alternate;
}

@keyframes vehicleBob {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-1.4px); }
}

.runner-worker svg {
  width: 40px;
  height: 40px;
  display: block;
  color: var(--text-main);
  opacity: 0.86;
  animation: workerBob 0.95s ease-in-out infinite alternate;
}

@keyframes workerBob {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-1.8px); }
}

.runner-vehicle-a { animation-delay: calc(var(--startOffset) + 0s); }
.runner-worker-a  { animation-delay: calc(var(--startOffset) + var(--slot)); }

.runner-vehicle-b { animation-delay: calc(var(--startOffset) + (var(--slot) * 2)); }
.runner-worker-b  { animation-delay: calc(var(--startOffset) + (var(--slot) * 3)); }

@media (max-width: 700px) {
  .top-runner { height: 46px; margin-bottom: 18px; }
  .runner-vehicle svg { width: 72px; height: 40px; }
  .runner-worker svg { width: 42px; height: 42px; }
  .top-runner-road { opacity: 0.30; }
}

@media (prefers-reduced-motion: reduce) {
  .top-runner-road { animation: none; }
  .runner-item { animation: none; opacity: 0; }
  .runner-vehicle-a { opacity: 0.95; left: 16px; }
  .runner-vehicle svg, .runner-worker svg { animation: none; }
}

main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero {
  background: radial-gradient(circle at top left, #fed7aa 0, #fdba74 20%, #fb923c 40%, #ea580c 65%, #9a3412 100%);
  border-radius: var(--radius-card);
  padding: 28px 22px 24px;
  box-shadow: var(--shadow-strong);
  border: 1px solid rgba(148,91,35,0.9);
  position: relative;
  overflow: hidden;
  overflow-anchor: none;
}

.hero::before {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -80px;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(252,211,77,0.4) 0, transparent 60%);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  right: -120px;
  top: 30%;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(234,88,12,0.6) 0, transparent 70%);
  pointer-events: none;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  z-index: 1;
}

.hero-top {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.hero-subtitle {
  font-size: 19px;
  margin: 0 0 14px;
  color: #111827;
}

.hero-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 14px;
  padding: 0;
  max-width: 860px;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,0.22);
  background: rgba(255,255,255,0.78);
  color: #111827;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 12px 26px rgba(0,0,0,0.18);
  user-select: none;
  line-height: 1.2;
  transition: transform 0.12s ease, background 0.12s ease;
}

.hero-pill .dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(34,197,94,1) 0, rgba(22,163,74,1) 60%);
  box-shadow: 0 0 10px rgba(34,197,94,0.45);
  flex: 0 0 auto;
}

.hero-pill:hover {
  background: rgba(255,255,255,0.88);
  transform: translateY(-1px);
}

.hero-note {
  font-size: 15px;
  color: #111827;
  max-width: 520px;
  margin: 0 auto;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 16px;
  border-radius: 999px;
  background: rgba(22,163,74,0.9);
  color: #ecfdf5;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 18px;
  box-shadow: 0 8px 18px rgba(21,128,61,0.9);
  margin-left: auto;
  margin-right: auto;
}

.hero-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #bbf7d0 0, #22c55e 40%, #16a34a 100%);
  box-shadow: 0 0 8px rgba(34,197,94,0.9);
}

.hero-form-wrap {
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
}

.form-card {
  background: radial-gradient(circle at top left, #020617 0, #020617 55%, #02091c 100%);
  border-radius: 18px;
  padding: 20px 16px 18px;
  border: 1px solid #020617;
  box-shadow: var(--shadow-soft);
}

.form-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.form-title {
  font-size: 22px;
  margin: 0;
  color: #f9fafb;
}

.form-tag {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #bbf7d0;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(52,211,153,0.7);
  background: rgba(6,95,70,0.9);
  white-space: nowrap;
}

.form-subtitle {
  font-size: 15px;
  color: var(--text-muted);
  margin: 0 0 14px;
}





































.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  margin-top: 6px;
}

.form-row { margin-bottom: 0; }
.form-row--full { grid-column: 1 / -1; }

label {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
  color: var(--text-main);
}



input, select, textarea {
  width: 100%;
  padding: 9px 12px;
  border-radius: 11px;
  border: 1px solid var(--input-border);
  font-size: 16px;
  font-family: inherit;
  background: var(--input-bg);
  color: var(--text-main);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.08s ease;
}

select option { color: #020617; background: #f9fafb; }

input::placeholder, textarea::placeholder { color: #6b7280; }

input:focus, select:focus, textarea:focus {
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 1px rgba(15,23,42,0.9), 0 0 0 2px rgba(34,197,94,0.8);
  outline: none;
  background: var(--input-bg-focus);
  transform: translateY(-0.5px);
}

textarea { min-height: 80px; resize: vertical; }

.btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-primary:active { filter: brightness(0.97); transform: translateY(0); box-shadow: 0 16px 32px rgba(22,163,74,1); }

.small-note {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
}

.small-note a { color: var(--brand-blue); text-decoration: underline; }






































.table-shell {
  position: relative;
  padding-bottom: 28px;
}

.table-wrapper {
  overflow-x: auto;
  margin: 0 -2px 8px;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;
  -ms-overflow-style: none;
}
.table-wrapper::-webkit-scrollbar { width: 0; height: 0; }

.hscroll {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  height: 18px;
  z-index: 20;
  pointer-events: none;
}

.hscroll-track {
  height: 100%;
  border-radius: 999px;
  background: rgba(34,197,94,0.22);
  border: 1px solid rgba(34,197,94,0.35);
  box-shadow: inset 0 0 0 1px rgba(2,6,23,0.35);
  position: relative;
  pointer-events: auto;
  cursor: pointer;
  overflow: hidden;
  touch-action: manipulation;
}

.hscroll-thumb {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 999px;
  background: rgba(34,197,94,0.78);
  box-shadow: 0 6px 14px rgba(22,163,74,0.35), inset 0 0 0 1px rgba(2,6,23,0.55);
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  transition: filter 0.12s ease, background 0.12s ease, box-shadow 0.12s ease, transform 0.06s ease;
}

.hscroll-thumb:hover {
  filter: brightness(1.08);
  background: rgba(34,197,94,0.90);
}

.hscroll-thumb.is-active {
  cursor: grabbing;
  background: rgba(22,163,74,0.98);
  box-shadow: 0 10px 22px rgba(22,163,74,0.55), inset 0 0 0 1px rgba(2,6,23,0.65);
  transform: scaleY(1.03);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 720px;
  background: #020617;
  color: var(--text-main);
  border-radius: 14px;
  overflow: hidden;
}

thead tr { background: linear-gradient(90deg, #0f172a 0, #0b1120 50%, #0f172a 100%); }

th, td {
  padding: 9px 7px;
  border: 1px solid #1e293b;
  vertical-align: top;
  text-align: left;
}

th { font-weight: 700; color: #e5e7eb; }

tbody tr:nth-child(even) { background: #020617; }
tbody tr:nth-child(odd) { background: #02091c; }

table small { color: var(--text-muted); }



.loader-tariff-title { font-size: 18px; margin: 16px 0 6px; color: #000; }

#ivan-hdr-packaging,
#ivan-hdr-assembly,
#ivan-hdr-trash {
  text-align: center;
  font-size: 21.6px;
}

#tariffs-transport-title { text-align: center; font-size: 26.4px; }
#tariffs-loaders-title { text-align: center; font-size: 21.6px; }

footer { margin-top: 18px; font-size: 14px; color: #9ca3af; }
footer strong { color: #e5e7eb; }

#lead-success-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.75);
  display: none;
  z-index: 9998;
}

#lead-success-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
  font-family: inherit;
}

.lead-modal-card {
  background: #020617;
  max-width: 420px;
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.85);
  padding: 22px 20px 18px;
  position: relative;
  color: #e5e7eb;
  text-align: center;
}

.lead-modal-close-x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: none;
  background: #ef4444;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lead-modal-ok {
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  background: #16a34a;
  color: #fff;
  min-height: 52px;
}

.lead-modal-close {
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  background: #b91c1c;
  color: #fff;
  min-height: 52px;
}

@media (max-width: 900px) {
  header { flex-direction: column; align-items: flex-start; border-radius: 18px; }
  
  .hero-form-wrap { margin-top: 4px; }
}

@media (max-width: 700px) {
  .wrapper { padding: 18px 10px 24px; }
  .form-card { padding: 18px 12px 16px; }
  .form-grid { grid-template-columns: 1fr; }
  
  
  
  
  .form-title-row { flex-direction: column; align-items: center; text-align: center; }
  .form-title { text-align: center; }
  .form-tag { align-self: center; }
  

  .table-shell { padding-bottom: 40px; }
  .hscroll { height: 30px; bottom: 8px; }
}




















.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: 999px;
  border: none;
  background: radial-gradient(circle at top left, #22c55e 0, #16a34a 60%, #15803d 100%);
  color: #f9fafb;
  font-weight: 800;
  font-size: 17px;
  cursor: pointer;
  margin-top: 10px;
  min-width: 200px;
  box-shadow: 0 22px 48px rgba(22,163,74,0.95);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: filter 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}

.btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-primary:active { filter: brightness(0.97); transform: translateY(0); box-shadow: 0 16px 32px rgba(22,163,74,1); }

.small-note {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
}

.small-note a { color: var(--brand-blue); text-decoration: underline; }

































@media (max-width: 900px) {
  .hero { padding: 22px 14px 20px; }
  .hero-form-wrap { margin-top: 4px; }
}

@media (max-width: 700px) {
  .form-card { padding: 18px 12px 16px; }
  
  
  
  
  
  .form-title-row { flex-direction: column; align-items: center; text-align: center; }
  .form-title { text-align: center; }
  .form-tag { align-self: center; }
  .hero-pill { font-size: 14px; padding: 9px 12px; }
}























.form-row--mt8 {
  margin-top: 8px;
}





















.debug-badge {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 99999;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.15);
  padding: 10px 12px;
  border-radius: 12px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  line-height: 1.25;
}

.debug-badge__link {
  color: #e5e7eb;
  text-decoration: none;
  font-weight: 800;
}

.debug-badge__link:hover {
  text-decoration: underline;
}

.debug-badge__hint {
  margin-top: 6px;
  color: #9ca3af;
  font-size: 12px;
}

.debug-missing {
  max-width: 1120px;
  margin: 18px auto;
  padding: 14px 12px;
  border-radius: 14px;
  border: 1px solid #ef4444;
  background: #020617;
  color: #e5e7eb;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  line-height: 1.45;
}

.debug-missing__title {
  font-weight: 800;
  margin-bottom: 6px;
}

.debug-missing__list {
  margin: 0;
  padding-left: 18px;
}

.debug-missing__hint {
  margin-top: 8px;
  color: #9ca3af;
  font-size: 13px;
}






@media (max-width:860px){
  
}
@media (max-width:680px){
  
}

.partner-box{
  border: 2px solid rgba(15,23,42,0.85);
  border-radius: 12px;
  padding: 14px 12px;
  margin: 16px auto 14px;
  max-width: 860px;
  background: transparent;
}
.partner-title{
  font-size: 16px;
  font-weight: 800;
  color: #111827;
  margin: 0 0 10px;
  text-align: center;
}
.partner-pills{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.partner-pill{
  text-decoration: none;
  cursor: pointer;
}
.partner-pill:focus{
  outline: 2px solid rgba(22,163,74,0.55);
  outline-offset: 2px;
}

.tg-fab {
  background: rgba(229, 168, 69, 0.45) !important;
  background: #E5A84572 !important;

  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 99999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;

	  border: 1px solid rgba(0, 0, 0, 0.12);
	  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
	  color: #ffffff;
  text-decoration: none;
  line-height: 1;
  font-weight: 800;
  max-width: calc(100vw - 24px);
  -webkit-tap-highlight-color: transparent;
	  touch-action: manipulation;
	  -webkit-backdrop-filter: blur(6px);
	  backdrop-filter: blur(6px);
}

.tg-fab:hover {
  filter: brightness(1.05);
}

.tg-fab:active {
  transform: translateY(1px);
}

.tg-fab__icon {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
  color: #2AABEE;
}

.tg-fab__icon svg {
  width: 26px;
  height: 26px;
  display: block;
  fill: currentColor;
}

.tg-fab__text {
  font-size: 14px;
  white-space: nowrap;
}

@media (max-width: 360px) {
  .tg-fab {
    padding: 12px;
  }
  .tg-fab__text {
    display: none;
  }
}


/* [MERGE][BLOCK07][STYLE] END */


/* [MERGE][BLOCK07][STYLE] START */

    :root{

      --calc-block-bg: #171424;
      --calc-field-bg: #062a33;
      --calc-field-border: rgba(0, 0, 0, .35);
      --calc-block-border: rgba(0, 0, 0, .35);
    }

    

    

    

    

    
    

    

    

    

    


    
    
    

    
    

    
    
    

    .ms-modal{
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 999999;
      padding: 12px;
    }
    .ms-modal.is-open{ display: flex; }

    .ms-backdrop{
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.62);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
    }

    .ms-dialog{
      position: relative;
      width: min(560px, calc(100vw - 24px));
      max-height: min(560px, calc(100vh - 24px));
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 16px;
      border: 1px solid rgba(148,163,184,0.35);
      background: radial-gradient(circle at top left, #0b1224 0, #020617 60%, #020617 100%);
      box-shadow: var(--shadow-strong);
    }

    .ms-header{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 12px 14px;
      border-bottom: 1px solid rgba(148,163,184,0.18);
    }
    .ms-title{
      font-weight: 900;
      font-size: 16px;
      color: #f9fafb;
    }
    .ms-close{
      border: none;
      background: transparent;
      color: #e5e7eb;
      font-size: 28px;
      line-height: 1;
      cursor: pointer;
      padding: 0 6px;
      border-radius: 10px;
    }
    .ms-close:hover{ background: rgba(148,163,184,0.10); }

    .ms-body{
      padding: 12px 14px;
      overflow: auto;
    }

    .ms-list{
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .ms-item{
      display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 10px 10px;
      border-radius: 12px;
      background: rgba(6,42,51,0.88);
      border: 1px solid rgba(0,0,0,.35);
      cursor: pointer;
      user-select: none;
    }
    .ms-item:hover{ filter: brightness(1.05); }
    .ms-item input{
      margin-top: 2px;
      width: 18px;
      height: 18px;
      flex: 0 0 18px;
      accent-color: #22c55e;
    }
    .ms-item .ms-item-label{
      font-weight: 800;
      color: #d8f7ff;
    }

.ms-row--qty{
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.ms-row--qty .ms-item{
  flex: 1 1 auto;
  cursor: default;
}
.ms-row--qty .ms-item:hover{ filter: none; }

.ms-stepper{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(6,42,51,0.88);
  border: 1px solid rgba(0,0,0,.35);
  flex: 0 0 auto;
}

.ms-stepper-btn{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.35);
  background: rgba(15,23,42,0.55);
  color: #e5e7eb;
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.ms-stepper-btn:active{ transform: translateY(1px); }
.ms-stepper-btn:disabled{
  opacity: .35;
  cursor: not-allowed;
}

.ms-qty{
  width: 74px;
  height: 44px;
  padding: 0 8px;
  border-radius: 11px;
  border: 1px solid rgba(0,0,0,.35);
  background: rgba(15,23,42,0.35);
  color: #e5e7eb;
  font-weight: 900;
  text-align: center;
  outline: none;
}
.ms-qty:focus{
  border-color: rgba(34,197,94,.65);
  box-shadow: 0 0 0 3px rgba(34,197,94,0.18);
}

@media (max-width: 520px){
  .ms-row--qty{
    flex-direction: column;
    align-items: stretch;
  }
  .ms-stepper{
    justify-content: space-between;
  }
  .ms-stepper-btn{
    width: 52px;
    height: 52px;
    font-size: 26px;
  }
  .ms-qty{
    width: 92px;
    height: 52px;
    font-size: 18px;
  }
}

    .ms-footer{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      padding: 12px 14px;
      border-top: 1px solid rgba(148,163,184,0.18);
    }

    .ms-btn{
      border: none;
      border-radius: 999px;
      padding: 10px 16px;
      font-weight: 900;
      cursor: pointer;
      line-height: 1;
      transition: transform 0.08s ease, filter 0.15s ease;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    .ms-btn:active{ transform: translateY(1px); }

    .ms-btn--ghost{
      background: rgba(148,163,184,0.14);
      border: 1px solid rgba(148,163,184,0.28);
      color: #e5e7eb;
    }
    .ms-btn--ghost:hover{ filter: brightness(1.05); }

    .ms-btn--primary{
      background: radial-gradient(circle at top left, #22c55e 0, #16a34a 60%, #15803d 100%);
      color: #f9fafb;
    }
    .ms-btn--primary:hover{ filter: brightness(1.05); }

    .form-grid--inside{
      margin-top: 0;
    }
  
/* [MERGE][BLOCK07][STYLE] END */


/* [IVAN][FIX][REQ-TINT-CONTACTS] START: обязательные поля в блоке контактов — красная заливка когда пусто */


/* Для селектов (пока не выбран вариант) */


/* При фокусе пустого поля сохраняем красную заливку */

/* [IVAN][FIX][REQ-TINT-CONTACTS] END */


/* [AVCALC][SPLIT][FIX] Вернули подложку тарифных блоков (ch_sections, BLOCK05-07). */
.tariff-card {
  background: radial-gradient(circle at top left, #fed7aa 0, #fdba74 25%, #fb923c 50%, #ea580c 80%, #9a3412 100%);
  border-radius: var(--radius-card);
  padding: 22px 16px 18px;
  box-shadow: var(--shadow-strong);
  border: 1px solid rgba(147,84,32,0.95);
}


/* [IVAN][TASK-20251226-ORANGE-MONO] Единый оранжевый фон для блоков тарифов (BLOCK05-07) */
.tariff-stack__part + .tariff-stack__part {
  margin-top: 22px; /* расстояние остаётся, но фон — общий (оранжевый) */
}
/* [/IVAN][TASK-20251226-ORANGE-MONO] */
.tariff-title { font-size: 22px; margin: 0 0 4px; color: #000; }
.tariff-date { font-size: 14px; color: #000; margin-bottom: 12px; }




/* [/AVCALC][SPLIT][FIX] */

/* [AVCALC][UI][GREEN-FRAMES-V2] START
   Красивые зелёные рамки-разделители в модалках AvCalc (#msModal), чтобы на телефоне визуально не "сливалось".
   ВАЖНО: применяем только к #msModal, на остальной сайт не влияет.
*/
#msModal .ms-dialog{
  border-color: rgba(34,197,94,0.72);
  box-shadow:
    0 0 0 1px rgba(34,197,94,0.22) inset,
    0 8px 30px rgba(0,0,0,0.55);
}

#msModal .ms-header{
  border-bottom-color: rgba(34,197,94,0.42);
  box-shadow: 0 1px 0 rgba(34,197,94,0.12);
}

#msModal .ms-body{
  /* тонкая внутренняя рамка по периметру скролл-зоны */
  box-shadow: 0 0 0 1px rgba(34,197,94,0.12) inset;
}

#msModal .ms-footer{
  border-top-color: rgba(34,197,94,0.42);
  box-shadow: 0 -1px 0 rgba(34,197,94,0.12);
}

/* Убираем левый плейсхолдер/заглушку в футере (например блок с текстом "ЗДЕСЬ"),
   оставляем только кнопки управления. */
#msModal .ms-footer > :not(.ms-btn):not(button){
  display: none !important;
}

/* Блок "Минимальный расчёт" (генерируется JS) */
#msModal .avcalc-ms-mincalc{
  margin-top: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(34,197,94,0.40);
  background: rgba(6,42,51,0.40);
}
#msModal .avcalc-ms-mincalc__title{
  font-weight: 900;
  color: rgba(187,247,208,0.96);
  margin-bottom: 6px;
}
#msModal .avcalc-ms-mincalc__row{
  color: rgba(229,231,235,0.95);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.25;
  margin: 2px 0;
}
#msModal .avcalc-ms-mincalc__total{
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(34,197,94,0.32);
  font-weight: 900;
  color: rgba(229,231,235,0.98);
}

@media (max-width: 520px){
  #msModal .ms-dialog{
    border-color: rgba(34,197,94,0.80);
  }
  #msModal .avcalc-ms-mincalc{
    border-color: rgba(34,197,94,0.50);
  }
}
/* [AVCALC][UI][GREEN-FRAMES-V2] END */

/* [AVCALC][UI][PRECALC-BLOCK] START */
.avcalc-precalc-summary{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(34,197,94,0.45);
  background: rgba(6,42,51,0.35);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
}
.avcalc-precalc-summary__row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.avcalc-precalc-summary__label{
  font-weight: 900;
  color: rgba(187,247,208,0.96);
}
.avcalc-precalc-summary__sum{
  font-weight: 900;
  font-size: 20px;
  color: rgba(229,231,235,0.98);
}
.avcalc-precalc-summary__note{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(229,231,235,0.70);
  line-height: 1.2;
}

@media (max-width: 520px){
  .avcalc-precalc-summary{
    border-color: rgba(34,197,94,0.55);
  }
}
/* [AVCALC][UI][PRECALC-BLOCK] END */



/* [AVCALC][UI][WORKERS-MINCALC-STYLE] START
   В модалке "Грузчики/сборщики..." блок мини-расчёта создаётся JS как ms-hint
   с data-ms-workers-mincalc-*. Делаем визуально как в "Машины" (avcalc-ms-mincalc).
*/
#msModal [data-ms-workers-mincalc-wrap="1"]{
  margin-top: 10px !important;
  padding: 10px 10px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(34,197,94,0.40) !important;
  background: rgba(6,42,51,0.40) !important;
}

#msModal [data-ms-workers-mincalc-title="1"]{
  font-weight: 900 !important;
  color: rgba(187,247,208,0.96) !important;
  margin-bottom: 6px !important;
}

/* строки внутри тела (у работников JS формирует <div>..</div>) */
#msModal [data-ms-workers-mincalc-body="1"] > div{
  color: rgba(229,231,235,0.95) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  margin: 2px 0 !important;
}

/* последняя строка = "Итого минимум" */
#msModal [data-ms-workers-mincalc-body="1"] > div:last-child{
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px dashed rgba(34,197,94,0.32) !important;
  font-weight: 900 !important;
  color: rgba(229,231,235,0.98) !important;
}

@media (max-width: 520px){
  #msModal [data-ms-workers-mincalc-wrap="1"]{
    border-color: rgba(34,197,94,0.50) !important;
  }
}
/* [AVCALC][UI][WORKERS-MINCALC-STYLE] END */

/* [AVCALC][UI][TRUCK-MINCALC-STYLE] START
   Модалка "Машины" — мини-расчёт создаётся JS с data-ms-truck-mincalc-*.
   Делаем оформление таким же, как у работников.
*/
#msModal [data-ms-truck-mincalc-wrap="1"]{
  margin-top: 10px !important;
  padding: 10px 10px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(34,197,94,0.40) !important;
  background: rgba(6,42,51,0.40) !important;
}

#msModal [data-ms-truck-mincalc-title="1"]{
  font-weight: 900 !important;
  color: rgba(187,247,208,0.96) !important;
  margin-bottom: 6px !important;
}

/* строки (JS добавляет <div>) */
#msModal [data-ms-truck-mincalc-body="1"] > div{
  color: rgba(229,231,235,0.95) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  margin: 2px 0 !important;
}

/* последняя строка = "Итого минимум" */
#msModal [data-ms-truck-mincalc-body="1"] > div:last-child{
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px dashed rgba(34,197,94,0.32) !important;
  font-weight: 900 !important;
  color: rgba(229,231,235,0.98) !important;
}

@media (max-width: 520px){
  #msModal [data-ms-truck-mincalc-wrap="1"]{
    border-color: rgba(34,197,94,0.50) !important;
  }
}
/* [AVCALC][UI][TRUCK-MINCALC-STYLE] END */

/* [IV][LEAD-SUCCESS-POSITION] START
   Уведомление об успешной отправке — по центру, но ближе к верху.
   Важно: показываем #lead-success-modal через display:flex (см. JS),
   тогда работают align-items/justify-content.
*/
#lead-success-modal{
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 16px 16px;
}
@media (max-width: 520px){
  #lead-success-modal{ padding-top: 8vh; }
}
/* [IV][LEAD-SUCCESS-POSITION] END */