.quote-period-hint {
  margin: -2px 0 10px;
  color: #687785;
  font-size: 11px;
  line-height: 1.65;
}

.quote-period-grid > .term.quote-period-option {
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .15s ease, border-color .15s ease;
}

.quote-period-grid > .term.quote-period-option:focus-visible {
  outline: 3px solid #237958;
  outline-offset: 3px;
}

.quote-period-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  color: #28744c;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
}

.quote-period-state::before {
  content: '\2713';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border: 1px solid #3b855c;
  border-radius: 3px;
  color: #fff;
  background: #3b855c;
  font-size: 10px;
  line-height: 1;
}

.quote-period-grid > .term.quote-period-option.is-period-excluded {
  border-color: #dce1e5;
  background: #f1f3f5;
  box-shadow: none;
}

.quote-period-grid > .term.quote-period-option.is-period-excluded .term-top,
.quote-period-grid > .term.quote-period-option.is-period-excluded .term-price,
.quote-period-grid > .term.quote-period-option.is-period-excluded .term-note,
.quote-period-grid > .term.quote-period-option.is-period-excluded .term-note strong,
.quote-period-grid > .term.quote-period-option.is-period-excluded .was-price,
.quote-period-grid > .term.quote-period-option.is-period-excluded .quote-period-state {
  color: #808b94;
}

.quote-period-grid > .term.quote-period-option.is-period-excluded .discount-tag {
  color: #7c8891;
  background: #e5e9ed;
}

.quote-period-grid > .term.quote-period-option.is-period-excluded .quote-period-state::before {
  content: '';
  border-color: #aeb8c0;
  background: transparent;
}

.workspace .quote-period-hint {
  margin-bottom: 8px;
  color: #68776e;
}

.workspace .quote-period-state {
  margin-bottom: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .quote-period-grid > .term.quote-period-option { transition: none; }
}