.monthly-calculator {
  max-width: 1050px;
  grid-template-columns: minmax(230px, 1.6fr) minmax(115px, 0.7fr) minmax(210px, 1.2fr) 48px minmax(210px, 1.2fr) minmax(135px, 0.8fr);
}

.monthly-calculator .country-field select {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-label {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
}

.date-selects {
  display: grid;
  grid-template-columns: minmax(96px, 1.25fr) minmax(70px, 0.75fr);
  gap: 12px;
}

.date-selects .select-wrap + .select-wrap {
  padding-left: 12px;
  border-left: 1px solid var(--border);
}

[dir="rtl"] .date-selects .select-wrap + .select-wrap {
  padding-right: 12px;
  padding-left: 0;
  border-right: 1px solid var(--border);
  border-left: 0;
}

.monthly-source-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.monthly-source-list div:last-child {
  grid-column: 1 / -1;
}

.missing-periods-note {
  margin-top: -4px !important;
  color: var(--muted) !important;
  font-size: 0.8rem !important;
}

@media (max-width: 1120px) {
  .monthly-calculator {
    max-width: 560px;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    row-gap: 0;
  }

  .monthly-calculator .field {
    padding: 5px 14px 4px;
    border-bottom: 1px solid var(--border);
  }

  .monthly-calculator .field label,
  .monthly-calculator .field-label { margin-bottom: 3px; }

  .monthly-calculator .country-field {
    grid-column: 1;
    grid-row: 1;
    border-right: 1px solid var(--border);
  }

  [dir="rtl"] .monthly-calculator .country-field {
    border-right: 0;
    border-left: 1px solid var(--border);
  }

  .monthly-calculator .amount-field {
    grid-column: 2;
    grid-row: 1;
    border-right: 0;
  }

  .monthly-calculator .date-field {
    grid-column: 1 / -1;
    border-right: 0;
  }

  .monthly-calculator .start-date-field {
    grid-row: 2;
  }

  .monthly-calculator .swap-button {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: -22px auto;
    z-index: 2;
  }

  .monthly-calculator .swap-button-visual { box-shadow: 0 0 0 5px var(--surface), 0 1px 3px rgba(47, 80, 56, 0.08); }
  .monthly-calculator .swap-button svg { transform: rotate(90deg); }

  .monthly-calculator .end-date-field {
    grid-row: 4;
  }

  .monthly-calculator .calculate-button {
    grid-column: 1 / -1;
    grid-row: 5;
    min-height: 52px;
    margin-top: 7px;
  }

  .date-selects {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  }

  .site-footer {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .monthly-source-list { grid-template-columns: 1fr; }
  .monthly-source-list div:last-child { grid-column: auto; }
}

@media (max-width: 680px) {
  .monthly-calculator {
    max-width: 560px;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    padding: 5px;
  }

  .monthly-calculator .country-field { grid-column: 1 / span 6; }
  .monthly-calculator .amount-field { grid-column: 7 / span 4; }

  .monthly-calculator .field {
    padding: 2px 13px 1px;
  }

  .monthly-calculator .date-field {
    padding: 2px 12px 1px;
  }

  .monthly-calculator .field label,
  .monthly-calculator .field-label { margin-bottom: 2px; }

  .monthly-calculator .date-field .field-label {
    font-size: 0.76rem;
  }

  .monthly-calculator .date-field select {
    min-height: 44px;
    font-size: 0.94rem;
  }

  .monthly-calculator .date-selects {
    gap: 8px;
  }

  .monthly-calculator .date-selects .select-wrap + .select-wrap {
    padding-left: 8px;
  }

  [dir="rtl"] .monthly-calculator .date-selects .select-wrap + .select-wrap {
    padding-right: 8px;
    padding-left: 0;
  }

  .monthly-calculator .start-date-field { padding: 2px 12px 1px; }

  .monthly-calculator .end-date-field { padding: 2px 12px 1px; }

  .monthly-calculator .calculate-button {
    min-height: 52px;
    margin-top: 4px;
  }

  .monthly-calculator:is(.has-expanded-amount, .has-amount-error) .country-field,
  .monthly-calculator:is(.has-expanded-amount, .has-amount-error) .amount-field { grid-column: 1 / -1; border-right: 0; border-left: 0; }
  .monthly-calculator:is(.has-expanded-amount, .has-amount-error) .country-field { grid-row: 1; }
  .monthly-calculator:is(.has-expanded-amount, .has-amount-error) .amount-field { grid-row: 2; }
  .monthly-calculator:is(.has-expanded-amount, .has-amount-error) .start-date-field { grid-row: 3; }
  .monthly-calculator:is(.has-expanded-amount, .has-amount-error) .swap-button { grid-row: 4; }
  .monthly-calculator:is(.has-expanded-amount, .has-amount-error) .end-date-field { grid-row: 5; }
  .monthly-calculator:is(.has-expanded-amount, .has-amount-error) .calculate-button { grid-row: 6; }
}

@media (max-width: 420px) {
  .footer-note-line > span[aria-hidden="true"] { display: none; }
}