.calculator-container {
  max-width: 100%;
  margin: 0 auto;
  font-family: 'Inter', sans-serif;
}

.calculator-body {
  display: flex;
  flex-wrap: wrap;
  gap: 30px
}

.input-panel {
  flex: 1 1 600px;
  padding: 30px;
  background: #fff;
  border: 1px solid #ebe6e7;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08)
}

.summary-panel {
  flex: 0 1 600px;
  background: #fff;
  border: 1px solid #ebe6e7;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
  overflow: hidden;
  align-self: flex-start;
  position: sticky;
  top: 40px;
}

.summary-panel h3 {
  margin: 0;
  padding: 20px;
  background: #18283c;
  color: #fff;
  font-size: 1.25rem
}

.summary-details {
  padding: 20px
}

.summary-row {
  display: flex;
  justify-content: space-between;
  padding: 15px 0;
  font-size: 14px;
  border-bottom: 1px solid #d8e0e7
}

.summary-row.total {
  font-weight: 700;
  margin-top: 10px;
  padding-top: 20px;
  border-top: 2px solid #18283c;
  border-bottom: 0;
  font-size: 1.1rem
}

.summary-label {
  font-weight: 400;
  color: #4a5565;
  font-size: 14px
}

.summary-row.total .summary-label {
  font-weight: 700;
  color: #101828
}

.summary-amount {
  font-weight: 600;
  color: #18283c
}

.form-row {
  margin-bottom: 20px
}

.form-row .form-label {
  font-weight: 500;
  margin-bottom: 8px;
  font-size: 14px;
  color: #374151
}

.form-row .form-input {
  width: 100%;
  padding: .75rem;
  border: 1px solid #d1d5db;
  border-radius: .5rem;
  transition: border-color .2s;
  font-size: 14px
}

.form-input:focus {
  outline: none;
  border-color: #53849e;
  box-shadow: 0 0 0 3px rgba(83, 132, 158, .1)
}

.percentage-input {
  display: flex;
  gap: 10px
}

.percentage-input .form-input:first-child {
  flex: 0 0 100px
}

.percentage-input .form-input:last-child {
  flex: 1
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 15px
}

.radio-item {
  display: flex;
  align-items: center;
  gap: 5px
}

details>summary {
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  padding: .75rem 0;
  margin-bottom: 1rem;
  transition: color .2s;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e5e7eb
}

details summary::before {
  content: "▼";
  margin-right: 0.75rem;
  font-size: 0.65rem;
  transition: transform 0.2s ease-in-out;
}

details[open] summary::before {
  transform: rotate(180deg);
}

.section-total {
  background: #18283c;
  margin-top: 20px;
  padding: 15px;
  color: #fff;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600
}

.button-row {
  padding: 20px;
  background: #fff;
  border-top: 1px solid #e8e8e8;
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}

.btn-custom {
  background: #53849e;
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: background .2s;
  flex: 1;
  text-transform: uppercase;
}

.btn-custom:hover {
  background: #3f6580;
  color: #fff
}

@media (max-width:1200px) {
  .summary-panel {
    position: static
  }
}

@media (max-width:768px) {
  .calculator-body {
    gap: 20px
  }

  .input-panel {
    padding: 20px;
    flex: 1 1 100%
  }

  .summary-panel {
    flex: 1 1 100%
  }

  .button-row {
    justify-content: center
  }

  .btn-custom {
    flex: 1 1 calc(50% - 5px);
    min-width: 120px
  }

  .radio-group {
    flex-direction: column;
    gap: 10px
  }

  .percentage-input {
    flex-direction: column
  }

  .percentage-input .form-input:first-child {
    flex: 1
  }
}

@media (max-width:576px) {
  .input-panel {
    padding: 15px
  }

  .summary-panel h3 {
    font-size: 1rem;
    padding: 15px
  }

  .summary-details {
    padding: 15px
  }

  .btn-custom {
    flex: 1 1 100%
  }
}