.calculator {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 24px;
  align-items: flex-start;
  overflow: visible !important;
}

#calculator,
#calculator.section,
section#calculator,
#calculator .container {
  overflow: visible !important;
}

.calc-form {
  display: grid;
  gap: 18px;
  align-self: flex-start;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-full {
  grid-column: 1 / -1;
}

/* =========================================================
   ПРАВЫЙ БЛОК "ПРИМЕРНАЯ СТОИМОСТЬ"
   НЕ ДВИГАЕТСЯ ПРИ ПРОКРУТКЕ
   ========================================================= */

.calc-result {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  align-self: flex-start !important;
  height: fit-content !important;
  min-height: 300px;

  z-index: 1;
  border-color: var(--green-line);

  transform: none !important;
}

.result-price {
  display: block;
  margin: 12px 0;
  color: var(--green);
  font-size: 42px;
  font-weight: 900;
  letter-spacing: -1.5px;
}

.calc-result small {
  display: block;
  color: var(--muted-dark);
  font-size: 13px;
  line-height: 1.6;
}

/* =========================================================
   CTA
   ========================================================= */

.cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 34px;
  border: 1px solid rgba(142, 230, 0, 0.22);
  border-radius: 30px;
  background:
    linear-gradient(
      90deg,
      rgba(10, 25, 20, 0.95),
      rgba(10, 25, 20, 0.64)
    ),
    url("https://images.unsplash.com/photo-1518005020951-eccb494ad742?auto=format&fit=crop&w=1400&q=80")
      center / cover;
  box-shadow: var(--shadow);
}

.cta h2 {
  margin: 0 0 10px;
  font-size: 34px;
  letter-spacing: -1px;
}

.cta p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.cta-form {
  display: flex;
  gap: 10px;
  min-width: 430px;
}

/* =========================================================
   ЕДИНЫЙ СТИЛЬ ПОЛЕЙ
   ========================================================= */

input,
textarea,
select {
  width: 100%;
  font-family: inherit;
  color: #f4fff1;
}

input,
textarea {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);

  background:
    linear-gradient(
      145deg,
      rgba(24, 32, 28, 0.96) 0%,
      rgba(13, 20, 17, 0.98) 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 34px rgba(0, 0, 0, 0.22);

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

input:focus,
textarea:focus {
  outline: none;
  border-color: rgba(142, 230, 0, 0.82);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 3px rgba(142, 230, 0, 0.13),
    0 0 26px rgba(142, 230, 0, 0.20),
    0 18px 44px rgba(0, 0, 0, 0.34);
}

input::placeholder,
textarea::placeholder {
  color: rgba(220, 235, 224, 0.62);
}

/* =========================================================
   СОВРЕМЕННЫЕ SELECT
   ========================================================= */

select {
  min-height: 56px;
  padding: 0 52px 0 18px;

  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(24, 32, 28, 0.96) 0%,
      rgba(13, 20, 17, 0.98) 100%
    ),
    url("data:image/svg+xml,%3Csvg width='14' height='9' viewBox='0 0 14 9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L7 7.5L13 1.5' stroke='%238EE600' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  background-repeat: no-repeat, no-repeat;
  background-position: center, right 20px center;
  background-size: auto, 14px 9px;

  font-size: 15px;
  font-weight: 700;

  cursor: pointer;
  outline: none;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 34px rgba(0, 0, 0, 0.22);

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

select:hover {
  border-color: rgba(142, 230, 0, 0.42);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(142, 230, 0, 0.14),
    0 0 24px rgba(142, 230, 0, 0.12),
    0 16px 40px rgba(0, 0, 0, 0.28);
}

select:focus {
  border-color: rgba(142, 230, 0, 0.82);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 3px rgba(142, 230, 0, 0.13),
    0 0 26px rgba(142, 230, 0, 0.20),
    0 18px 44px rgba(0, 0, 0, 0.34);
}

select option {
  background: #06100c;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
}

/* =========================================================
   ВЫДЕЛЕНИЕ ТЕКСТА
   ========================================================= */

input::selection,
textarea::selection,
select::selection {
  background: rgba(142, 230, 0, 0.35);
  color: #ffffff;
}

/* =========================================================
   АДАПТИВ
   ========================================================= */

@media (max-width: 900px) {
  .calculator {
    grid-template-columns: 1fr;
  }

  .calc-result {
    position: relative !important;
    top: auto !important;
  }

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

  .cta {
    grid-template-columns: 1fr;
  }

  .cta-form {
    min-width: 0;
    width: 100%;
    flex-direction: column;
  }
}